对接拍照预览页及登录授权功能

take-order/App.vue

@@ -6,7 +6,8 @@
 	
 	import {
 		AnalysysAgent
-	} from '@/utils/analysys_paas.js'
+	} from '@/utils/analysys_paas.js'
+	import util from '@/utils/util.js'
 	
 	export default {
 		
@@ -101,22 +102,15 @@
 			navHeight:0, //导航栏高度
 			rpxScreenHeight:0,// 照相视框高度
 			
-			//拍照相关数据
-			photo:{
-				product:{
-					brandId:'', // 品牌id
-					brandName:'', // 品牌名称
-					classifyId:'', // 分类id
-					systemId:'', // 系统id
-				},
-				productList:[],
-				currentItem:null, // 选择的某一项
-			}
+			// 用户信息
+			tempUserInfo: '', // 临时用户选项
+			userInfo: '', // 用户信息
+			authLoading: false,
 		},
 		
 		onLaunch: function() {
 			this.getSystemInfo()
-			this.checkUpdate()
+			this.checkUpdate()
 			
 			var that=this
 			uni.getStorage({
@@ -128,12 +122,19 @@
 				}
 			})
 			
-			this.getProtocolContent()
+			this.getProtocolContent()
+			
 			
 			AnalysysAgent.registerSuperProperty("platform","take-order");
 			
 		},
-		onShow: function() {},
+		onShow: function() {
+			if (this.globalData.token) {
+				this.globalData.authLoading = false
+			} else {
+				this.autoLogin()
+			}
+		},
 		methods: {
 			getSystemInfo(){
 				try {
@@ -317,7 +318,66 @@
 				}
 			},
 			/* ------------------------- 数据埋点end ------------------------------ */
-		
+		
+			/**
+			 * 用户自动登录
+			 */
+			autoLogin() {
+				let that = this;
+				that.globalData.authLoading = true
+				uni.login({
+					success(res) {
+						if (res.code) {
+							let params = {code: res.code};
+							that.authorization(params)
+						} else {
+							uni.showModal({
+								title: '登录失败',
+								content: '未获取到code',
+							});
+						}
+					},
+					fail() {
+						wx.showModal({
+							title: '登录失败',
+							content: '接口调用失败',
+						});
+					}
+				});
+			},
+			
+			async authorization(params) {
+				let that = this
+				const res = await that.$u.api.loginWechatAuth(params)
+				if(!res || !res.code || !res.data){
+					uni.hideLoading()
+					return 
+				} else if (res.code == 200) {
+					that.setUserData(res.data)
+					if (typeof callback == "function") {
+						callback();
+					}
+				} else {
+					wx.showModal({
+						title: '请求失败',
+						showCancel: false
+					});
+				}
+				that.globalData.authLoading = false
+				uni.hideLoading()
+			},
+			setUserData(userInfo) {
+				if(userInfo && userInfo.token) {
+					// 如果已经登录则直接获取相关信息
+					util.setOpenid(userInfo.wxopenid)
+					util.setToken(userInfo.token)
+					this.globalData.userInfo = userInfo;
+					uni.setStorageSync('user-info', userInfo);
+					uni.setStorageSync('isNewUser', false);
+				} else {
+					uni.setStorageSync('isNewUser', true);
+				}
+			},
 		},
 		
 		

take-order/common/api/common.js

@@ -4,10 +4,12 @@ const ucenterApiUrl = globalUrl.ucenterUrl.apiUrl
 let commonApiFun = function(vm){
 	let loginWxByUser        = async (params = {}) => await vm.$u.get('/wxh-support-rest/rest/ssoinfo/v3/getUsersByCode', params);
 	let loginWxByPhone		 = async (params = {}) => await vm.$u.post('/wxh-support-rest/rest/ssoinfo/v3/findByMobile', params,{'content-type': 'application/x-www-form-urlencoded'});
+	let loginWechatAuth		 = async (params = {}) => await vm.$u.post('/wxh-support-rest/rest/ssoinfo/wxapp/unify/authorization', params, {'content-type': 'application/x-www-form-urlencoded'});
 	
 	const commonApi = {
 		loginWxByUser,
-		loginWxByPhone
+		loginWxByPhone,
+		loginWechatAuth,
 	}
 	return commonApi
 }

take-order/common/base_url.js

@@ -13,15 +13,15 @@ let systemUrl = {
 
 /* --------------------------- test begin --------------------------- */
  
-// let ucenterUrl = {
-// 	apiUrl: 'https://rest-u.test.ibanshou.cn',
-// 	xueUrl:'https://xue.test.ibanshou.cn', //学院
-// 	banshou:'https://m.test.ibanshou.cn/', //扳手app
+ucenterUrl = {
+	apiUrl: 'https://rest-u.test.ibanshou.cn',
+	xueUrl:'https://xue.test.ibanshou.cn', //学院
+	banshou:'https://m.test.ibanshou.cn/', //扳手app
 	
-// }
-// let systemUrl = {
-// 	apiUrl:'https://system.dev.banshouhui.com'
-// }
+}
+systemUrl = {
+	apiUrl:'https://system.dev.banshouhui.com'
+}
 /* --------------------------- test end --------------------------- */
 
 

take-order/common/http.interceptor.js

@@ -6,7 +6,8 @@ let noLoginUrl = [
 	'/v1/h5/settled/save-info',
 	'/v1/h5/settled/card-front',
 	'/wxh-support-rest/rest/ssoinfo/v3/getUsersByCode',
-	'/wxh-support-rest/rest/ssoinfo/v3/findByMobile'
+	'/wxh-support-rest/rest/ssoinfo/v3/findByMobile',
+	'/wxh-support-rest/rest/ssoinfo/wxapp/unify/authorization',
 ];
 //设置session_id
 const getSessionId = function(vm) {

take-order/components/upload/qiniup.js

+import qiniuUploader from '@/include/libs/qiniuUploader.js';
+import globalUrl from '@/common/base_url.js'
+export default {
+	name: 'qiniup',
+	components: {},
+	data() {
+		return {
+			domain: 'http://upload.qiniup.com', // 七牛上传域名地址
+			uptokenURL: globalUrl.ucenterUrl.apiUrl + '/v1/tokens', // 上传token地址
+			files:[], // 上传文件
+			fileMaps:[], // 上传文件返回对象
+			keys:[], // 七牛返回key
+			uploadToken: '', // 上传token
+			maximum:999, // 最大上传数量
+			qiniuOptions: {}, // 七牛上传配置
+		};
+	},
+	created() {
+		this.initQiniu()
+	},
+	methods: {
+		initQiniu: function() {
+			var defaulfs = {
+				// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
+				region: 'ECN',
+				bucket: 'fa-cms',
+				qiniuBucketURLPrefix: 'uploads',
+				// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
+				// 由其他程序生成七牛云uptoken，然后直接写入uptoken
+				uptoken: '',
+				// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
+				uptokenURL: this.uptokenURL,
+				// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
+				uptokenFunc: function() {
+			
+				},
+				// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
+				domain: this.domain,
+				// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
+				// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
+				// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
+				// 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
+				shouldUseQiniuFileName: true
+			};
+			
+			let options = {}
+			if(Object.keys(this.qiniuOptions).length) {
+				Object.assign(options, defaulfs, this.qiniuOptions);
+			} else {
+				options = defaulfs;
+			}
+			
+			// 将七牛云相关配置初始化进本sdk
+			qiniuUploader.init(options);
+		},
+		
+		getUrlKey(file) {
+			let index = file.lastIndexOf('/');
+			let len = file.length
+			let name = file.substring(index + 1, len)
+			return name;
+		},
+		
+		/**
+		* 确认上传
+		* @param {boolean} submit
+		 */
+		confirmUpload(submit = false) {
+			let self = this
+			const fileList = self.files
+			if (self.maximum - fileList.length <= 0) {
+				uni.showToast({
+					title: '图片数量不能大于' + self.maximum,
+					icon: 'none'
+				})
+				return
+			}
+			for (let file of fileList) {
+				let name = self.getUrlKey(file)
+				// 交给七牛上传
+				let item = {
+					src: '',
+					id: '',
+					key:'',
+					// filesize: '',
+					progress: 0
+				}
+				const params = {
+					name:name,
+					file:file,
+				}
+				
+				qiniuUploader.upload(params, (res) => {
+					console.log(res,'res')
+					let inLen = self.maximum - fileList.length
+					if (inLen > 0) {
+						item.src = file
+						item.key = res.key || res.src
+						self.fileMaps.push(item);
+						self.keys.push(item.key)
+						if(submit) {
+							self.submitFile()
+						}
+					} else {
+						uni.showToast({
+							title: '图片数量不能大于9'
+						})
+					}
+				}, (error) => {
+					console.log('error: ' + error);
+				}, null, (res) => {
+					item.progress = res.progress
+				}, () => {
+					// 取消上传
+				}, () => {
+					// `before` 上传前执行的操作
+				}, (err) => {
+					// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
+				});
+			}
+		}
+	}
+}

take-order/pages.json

@@ -4,14 +4,14 @@
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
 
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/photo/product",
-			"style": {
-				"navigationBarTitleText": "拍照小工具",
-				"navigationBarBackgroundColor":"#FFFFFF",
-				"backgroundColor":"#F4F5F7"
-			}
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/photo/product",
+			"style": {
+				"navigationBarTitleText": "拍照小工具",
+				"navigationBarBackgroundColor":"#FFFFFF",
+				"backgroundColor":"#F4F5F7"
+			}
 		},
 		{
 			"path": "pages/photo/index",
@@ -19,24 +19,24 @@
 				"navigationBarTitleText": "拍照小工具首页"
 			}
 		},
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "下单"
-			}
-		
-		},{
-			"path": "pages/settle/index",
-			"style": {
-				"navigationBarTitleText": "充电桩安装招募"
-			}
-		
-		},{
-			"path": "pages/exam/start",
-			"style": {
-				"navigationBarTitleText": "考试"
-			}
-		
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "下单"
+			}
+		
+		},{
+			"path": "pages/settle/index",
+			"style": {
+				"navigationBarTitleText": "充电桩安装招募"
+			}
+		
+		},{
+			"path": "pages/exam/start",
+			"style": {
+				"navigationBarTitleText": "考试"
+			}
+		
 		},{
 			"path": "pages/settle/base",
 			"style": {
@@ -154,15 +154,17 @@
 		{
 			"path": "pages/photo/preview",
 			"style": {
-				"navigationBarTitleText": "照片预览"
+				"navigationBarTitleText": "照片预览",
+				"navigationBarBackgroundColor":"#333333",
+				"backgroundColor":"#FFFFFF"
 			}
 		},
 
 		{
 			"path": "pages/photo/list",
 			"style": {
-				"navigationBarTitleText": "规范展示",
-				"navigationBarBackgroundColor":"#FFFFFF",
+				"navigationBarTitleText": "规范展示",
+				"navigationBarBackgroundColor":"#FFFFFF",
 				"backgroundColor":"#F4F5F7"
 			}
 		},
@@ -301,6 +303,10 @@
 			"name": "签约页面", //模式名称
 			"path": "pages/settle/sign-contract", //启动页面，必选
 			"query": "" //启动参数，在页面的onLoad函数里面得到
+		},{
+			"name": "照片预览", //模式名称
+			"path": "pages/photo/preview", //启动页面，必选
+			"query": "standardId=1&img=https://papers.co/wallpaper/papers.co-bk57-art-illust-girl-pink-tomboy-red-6-wallpaper.jpg" //启动参数，在页面的onLoad函数里面得到
 		}]
 	}
 }

take-order/pages/login/wxlogin.vue

@@ -7,9 +7,12 @@
 			<view class="noticeTitleView">
 				<text class="noticeTitle">{{noticeTitle}}</text>
 			</view>
-			<button class="loginBtn" v-if="!isNewUser" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
+			<button class="loginBtn" v-if="!isNewUser" lang="zh_CN" catchtap="getUserProfile">
 				<text class="u-font-32 white">立即登录</text>
 			</button>
+			<!-- <button class="loginBtn" v-if="!isNewUser" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">
+				<text class="u-font-32 white">立即登录</text>
+			</button> -->
 			<button class="loginBtn" v-if="isNewUser" open-type="getPhoneNumber" throttle-time="1000" @getphonenumber="getPhoneNumber">
 				<text class="u-font-32 white">授权登录</text>
 			</button>
@@ -45,6 +48,70 @@
 			app.globalData.jumpLoginStatus = true
 		},
 		methods: {
+			// 授权用户信息
+			getUserProfile() {
+				var self = this
+				const app = getApp()
+				if (self.isNewUser) {
+				    uni.getUserProfile({
+				        desc: '用于授权登录',
+				        success: function (res) {
+				            const userInfo = res.userInfo;
+				            if (!userInfo) {
+								uni.showModal({
+								    title: '授权失败',
+								    content: '获取用户信息的授权失败',
+								    showCancel: false
+								});
+								return
+				            }
+				            app.globalData.tempUserInfo = userInfo;
+				            uni.showLoading({
+				                title: '授权中..',
+				                mask: true
+				            });
+				            self.authLogin()
+				        },
+				        fail:function(res){
+				            uni.showModal({
+				                title: '授权失败',
+				                content: '请允许获取用户信息的授权',
+				                showCancel: false
+				            });
+				            return;
+				        }
+				    })
+				}
+			},
+			async authLogin() {
+				var that = this
+				const app = getApp()
+				const res = await that.$u.api.loginWechatAuth(params)
+				if(!res || !res.code || !res.data){
+					uni.hideLoading()
+					return 
+				} else if (res.code == 200) {
+					app.setUserData(res.data)
+				} else {
+					
+				}
+				uni.hideLoading()
+			},
+			async signLogin() {
+				var that = this
+				const app = getApp()
+				const res = await that.$u.api.loginWechatAuth(params)
+				if(!res || !res.code || !res.data){
+					uni.hideLoading()
+					return 
+				} else if (res.code == 200) {
+					app.setUserData(res.data)
+				} else {
+					
+				}
+				uni.hideLoading()
+			},
+			
 			//用户授权得到用户的信息
 			getUserInfo: async function(e) {
 

take-order/pages/photo/preview.vue

 <template>
 	<view>
-		<image class="pic" :src="images[0]" mode="aspectFill" @click="showPreviewFn"></image>
+		<view class="contentView">
+			<image class="pic" :src="images[0]" mode="widthFix" @click="showPreviewFn"></image>
+		</view>
+		<view class="bottomView">
+			<image class="remakeIcon" :src="btn_remake" @click="remakePhoto"></image>
+			<image class="continueIcon" :src="btn_continue" @click="continuePhoto"></image>
+		</view>
 	</view>
 </template>
 
 <script>
+	import qiniup from '@/components/upload/qiniup';
 	export default {
+		mixins: [qiniup],
 		data() {
 			return {
-				protocolContent:'',
-				images:[]
+				protocolContent: '',
+				btn_remake: 'https://qn-static.banshouhui.com/take_order/photo/remake.png',
+				btn_continue: 'https://qn-static.banshouhui.com/take_order/photo/continue.png',
+				standardId: '',
+				images: [],
+				files: [],
+				fileMaps: [],
+				keys: [],
+				token: '',
 			}
 		},
 		onLoad(e) {
 			getApp().trackPage('照片预览页')
-			console.log(e,'e')
-			if(e.img){
-				this.images =  [e.img]
+			console.log(e, 'e')
+			if(e.standardId) {
+				this.standardId = e.standardId
 			}
-			console.log(this.images,'this.images')
+			
+			if (e.img) {
+				this.images = [e.img]
+				this.downloadImages()
+			}
+			console.log(this.images, 'this.images')
+			
+			this.token = getApp().globalData.token
 		},
 		methods: {
-			
+
 			showPreviewFn(img) {
 				uni.previewImage({
 					current: 0,
@@ -29,22 +51,106 @@
 				});
 			},
 			//拨打客服 点击
-			phoneCallClick: function (phone) {
+			phoneCallClick: function(phone) {
 				uni.makePhoneCall({
-				    phoneNumber: phone
+					phoneNumber: phone
 				});
 			},
-			
-			
-			
+
+			// 重拍图片
+			remakePhoto() {
+				uni.navigateTo({
+					url: '/pages/photo/take'
+				})
+			},
+
+			// 确认图片
+			continuePhoto() {
+				let self = this
+				self.confirmUpload(true)
+			},
+			submitFile() {
+				let self = this
+				if(self.keys.length) {
+					for (let s of self.keys) {
+						self.$u.cloudApi.saveImage({
+							"token": self.token,
+							"standardId": self.standardId,
+							"url": s,
+						}).then(res =>{
+							console.log(res, "云服务保存图片");
+							if(res.result) {
+								// TODO 参数是否要来回传递
+								uni.navigateTo({
+									url: '/pages/photo/list'
+								})
+							} else {
+								uni.showToast({
+									title:'图片上传失败'
+								})
+							}
+						})
+					}
+				}
+			},
+			downloadImages() {
+				let self = this;
+				for (let url of this.images) {
+					uni.downloadFile({
+						url: url, //仅为示例，并非真实的资源
+						success(res) {
+							// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
+							if (res.statusCode === 200) {
+								self.files.push(res.tempFilePath)
+							}
+						},
+						fail(e) {
+							debugger
+						}
+					})
+				}
+			},
+
 		}
 	}
 </script>
 
 <style>
-	.pic{
-		display: block;
-		width:100%;
-		height:auto;
+	.contentView {
+		background-color: #333333;
+		padding-top: 120rpx;
+		height: 880rpx;
+	}
+
+	.pic {
+		width: 100%;
+		height: 760rpx;
+	}
+
+	.bottomView {
+		background-color: #333333;
+		width: 100%;
+		height: 326rpx;
+		position: fixed;
+		bottom: 0;
+		display: flex;
+		flex-direction: column-reverse;
+		align-items: center;
+	}
+
+	.remakeIcon {
+		width: 200rpx;
+		height: 88rpx;
+		position: fixed;
+		left: 80rpx;
+		bottom: 176rpx;
+	}
+
+	.continueIcon {
+		width: 200rpx;
+		height: 88rpx;
+		position: fixed;
+		right: 80rpx;
+		bottom: 176rpx;
 	}
 </style>

take-order/utils/login.js

+const app = getApp();
+
+// 小程序登录
+function appLogin() {
+    return new Promise(function (resolve, reject) {
+        uni.login({
+            success: res => {
+                if (!res.code) {
+                    uni.hideLoading();
+                    uni.showModal({
+                        content: res.errMsg,
+                        showCancel: false
+                    });
+                }
+                resolve(res);
+            },
+            fail() {
+                uni.hideLoading();
+                uni.showModal({
+                    content: '登录失败',
+                    showCancel: false
+                });
+                reject();
+            }
+        });
+    });
+}
+
+// 小程序授权
+function authorization(data) {
+    return new Promise(function (resolve, reject) {
+        data = data || {}
+		const res = await app.$u.api.loginWechatAuth(data)
+		if (res && res.status) {
+		    let data = res.data
+		    app.setUserData(data)
+		    uni.hideLoading();
+		    resolve(res);
+		} else () {
+		    uni.hideLoading();
+		    uni.showModal({
+		        title: '请求失败',
+		        content: err.message,
+		        showCancel: false
+		    });
+		    reject();
+		},
+    });
+}
+
+// 小程序注册
+function signup(data) {
+    return new Promise(function (resolve, reject) {
+		const res = await app.$u.api.loginWechatAuth(data)
+		
+        api.request('login/signup-login', {
+            method: "post",
+            data: {
+                code: data.code,
+                encryptedData: data.encryptedData,
+                iv: data.iv
+            },
+            success: function (res) {
+                if (res && res.status) {
+                    let data = res.data
+                    app.setUserData(data)
+                    resolve(res);
+                }else{
+                    if(!res.status && res.message==='用户授权信息失效，请重新授权'){
+                        api.setAuthToken('')
+                    }
+                    resolve(res);
+                }
+            }
+        });
+    });
+
+}
+
+
+module.exports = {
+    appLogin: appLogin,
+    authorization: authorization,
+    signup: signup
+}
\ No newline at end of file