welcomeRegister_web/pages/index/index.vue

<template>
	<view class="content">
		<view class="item-camera" v-if="showHeader">
			<camera binderror="" :device-position="devicePosition" :flash="deviceLight" class="camera"
				v-if="authCamera">
				<cover-image src='../../static/images/head1.png' class="item-cover" v-if="cover">
				</cover-image>
			</camera>
			<view class="item-list" v-if="list_btn">
				<image src="../../static/images/light.png" class="image-light" @tap="takeLight"></image>
				<image src="../../static/images/take.png" class="image-btn" @tap="takePhotoByHead"></image>
				<image src="../../static/images/change.png" class="image-change" @tap="changeDevice"></image>
			</view>
			<view class="error-handler" v-if="!authCamera">
				<button class="nobtn" openType="openSetting">打开相机授权</button>
			</view>
		</view>
		<view class="item-camera" v-if="!showHeader">
			<view>
				<image :src="image" class="camera"></image>
			</view>

			<view class="item-btn-list">
				<view><button class="use-btn" @tap="resetImage">重拍</button></view>
				<view><button class="use-btn" @tap="checkImage">使用照片</button></view>
			</view>
		</view>
		<view v-if="showLogin" class="login-item">
			<login :ocode="ocode" :appkey="appkey" scope="snsapi_userinfo" :visible="visible" @success="callback()"
				@cancel="callback()" @fail="callback()" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: false, //覆盖层
				visible: true,  //是否可见
				authCamera: true, //控制camera
				showHeader: true, //控制camera所在的view
				list_btn: false, //控制三个按钮
				showLogin: true,
				ctxHeader: null,
				devicePosition: 'front', //摄像头
				deviceLight: 'off', //闪光灯
				image: '',
				card_number: '', //学生信息
				appkey: '8C41E2FECF2E9925',
				sub_appid: '1015730314_1941301045',
				appid: 'wxd6f090391d410534', // 获取用户信息
				ocode: '1015730314', // 获取用户信息
				app_secret: '9C5EC8E3B7ABBF9C0641804000D8F28E', // 获取用户信息
				wxcode: '',
				access_token: '',
				userinfo: {},
			}
		},
		onLoad(options) {
			// console.log(options)
			// this.card_number = options.card_number   //获取后台传入参数
			// if (!this.card_number) {
			// 	this.get_wxcode() //授权
			// 	// uni.showToast({
			// 	// 	icon: 'false',
			// 	// 	title: '请重新授权',
			// 	// 	duration: 1000,
			// 	// 	success: (res) => {
			// 	// 		// this.my_display = true
			// 	// 	}
			// 	// })
			// } else {
			// this.list_btn = true
			// this.get_image()
			// this.show_Toast()
			//获取摄像头权限
			uni.authorize({
				scope: 'scope.camera',
				success: res => {
				}
			})
			//判断是否获取摄像头权限
			uni.getSetting({
				success: (res) => {
					// console.log(res)
					if (res.authSetting["scope.camera"]) {
						this.authCamera = true
						// this.takePhotoByHead()
					} else {
						// this.handleCameraError()
						this.authCamera = false
					}
				}
			})
			// console.log(this.authCamera)
			// this.get_image()  //拍照获取人脸信息
			// }
		},
		methods: {
			//授权获取wxcode
			callback: function({
				detail
			}) {
				// console.log(detail)
				// {wxcode: "7f7Qi9rN8zQ1nifQiysTZ3WIeIWlgcGk"}
				if (detail === undefined) {
					// this.userinfo = {};
					uni.showToast({
						icon: 'success',
						title: '需要先授权'
					});
				} else {
					const {
						wxcode = ""
					} = detail
					
					if (wxcode.length == 0) {
						uni.showToast({
							title: '未获得wxcode',
							duration: 500
						})
					} else {
						// 获取wxcode
						this.wxcode = wxcode
						// console.log(this.wxcode)
						this.list_btn = true
						this.cover = true
						// 通过wxcode换取access_token
						this.get_access_token()
					}
				}
			},
			/**
			 * 通过wxcode换取access_token
			 */
			async get_access_token() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth2/token',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						'wxcode': this.wxcode,
						'app_key': this.appkey,
						'app_secret': this.app_secret,
						'grant_type': 'authorization_code',
						'redirect_uri': 'mnp://wxd6f090391d410534'
					}
				})
				if (res.statusCode == 200) {
					if (res.data.access_token == '' || res.data.access_token == 'undefined') {
						uni.showToast({
							title: '未获得token'
						})
					} else {
						// console.log(res)
						this.access_token = res.data.access_token;
						
						// 通过access_token换取用户信息
						this.get_user_info();
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请求失败，未获得token'
					})
				}
			},
			/**
			 * 通过access_token换取用户信息
			 */
			async get_user_info() {
				const res = await this.$myRequest({
					host: 'wecard',
					url: '/connect/oauth/get-user-info',
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						"access_token": this.access_token
					}
				});
			
				if (res.statusCode == 200) {
					if (res.data.errcode == 0 && res.data.errmsg == 'OK') {
						try {
							this.userinfo = res.data
							// // 存储用户信息
							uni.setStorageSync('userinfo_storage_key', this.userinfo)
							// 提示授权成功
							uni.showToast({
								icon: 'success',
								title: '授权成功',
								duration: 800,
								success: (res) => {
									// this.my_display = true
									this.list_btn = true
									this.cover = true
								}
							})
							this.card_number = this.userinfo.card_number
							// console.log(this.userinfo)
						} catch (e) {
							console.log(e)
						}
					} else {
						uni.showToast({
							title: '未获得用户信息',
							duration: 1000
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请求失败，未授权成功'
					});
				}
			},

			// //拍照获取人脸相片
			// get_image() {
			// 	uni.chooseMedia({
			// 		count: 1, //默认9
			// 		mediaType: ['image'],
			// 		sourceType: ['camera'],
			// 		sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
			// 		camera: 'front',
			// 		success: res => {
			// 			// console.log(res)
			// 			let imgFiles = res.tempFiles[0].tempFilePath
			// 			this.image = imgFiles
			// 			console.log('本地地址', this.image)
			// 			this.preview()
			// 			// this.uploadTheImg(imgFiles)  //向后台传送文件
			// 		}
			// 	});
			// },
			//拍摄头像
			takePhotoByHead() {
				this.showHeader = true //开启拍照
				this.ctxHeader = uni.createCameraContext();
				this.ctxHeader.takePhoto({
					quality: 'high',
					success: (res) => {
						uni.compressImage({
							src: res.tempImagePath,
							quality: 90, //压缩比例
							success: ress => {
								this.image = ress.tempFilePath;
								console.log(this.image)
								// console.log(typeof(this.image))
								this.showHeader = false; //关闭拍照
								// this.uploadTheImg()
							}
						})
					}
				});
			},
			// //当摄像头无法启动时显示
			// handleCameraError() {
			// 	uni.showToast({
			// 		title: '用户拒绝使用摄像头',
			// 		icon: 'none'
			// 	})
			// },
			//刷新页面
			onPullDownRefresh: function() {
				uni.navigateTo({
					url: '../index/index',
				});
				// console.log('触发了下拉刷新')
			},
			//相片预览
			preview() {
				console.log('路径' + this.image)
				uni.previewImage({
					// 对选中的图片进行预览
					urls: [this.image, ],
					// urls:['','']  图片的地址 是数组形式
				});
			},
			//重新拍摄
			resetImage() {
				this.showHeader = true
			},
			//调用另一个摄像头
			changeDevice() {
				if (this.devicePosition == 'front') {
					this.devicePosition = 'back'
					uni.showToast({
						title: '开启后摄像头',
						icon: 'none'
					})
				} else {
					this.devicePosition = 'front'
					uni.showToast({
						title: '开启前摄像头',
						icon: 'none'
					})
				}
			},
			//设置闪光灯
			takeLight() {
				if (this.deviceLight == 'off') {
					this.deviceLight = 'on'
					uni.showToast({
						title: '开启闪光灯',
						icon: 'success'
					})
				} else {
					this.deviceLight = 'off'
					uni.showToast({
						title: '关闭闪光灯',
						icon: 'false'
					})
				}
			},
			//确定使用图片
			checkImage() {
				// console.log(this.image)
				uni.showLoading({
					title: '图片正在上传中'
				});
				this.uploadTheImg() //向后台传送文件
			},
			
			//上传图片
			uploadTheImg() {
				uni.uploadFile({
					url: 'http://pwawgw.natappfree.cc', //后端用于处理图片并返回图片地址的接口
					// header: {
					// 	"Content-Type": "multipart/form-data" // formdata提交格式
					// },
					filePath: this.image,
					name: 'uploadFile', // 默认
					fileType: 'image',
					formData: { // 其他的formdata参数
						card_number: this.card_number,
					},
					success: (res) => {
						console.log(res)
						// let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式，打印data如下图
						// if (data.code == 200) {
							// console.log(data.msg) //图片地址
						// }
						uni.hideLoading();
						// var code = '200'
						// if (code == 200) {
						if (res.statusCode == 200) {
							uni.showToast({
								icon: 'success',
								title: '人脸采集成功',
								success: (res) => {
									setTimeout(function() {
										uni.navigateTo({
											url: '../confirm/confirm',
										})
									}, 1500);
								}
							})
						} else {
							uni.showModal({
								title: '人脸采集失败',
								content: '请重新拍照上传',
								confirmText: '重新拍照',
								cancelText: '直接跳转',
								// showCancel: false,
								success: res => {
									if (res.confirm) {
										this.showHeader = true
									} else if (res.cancel) {
										uni.navigateTo({
											url: '../confirm/confirm',
										})
									}
								}
							});
						}
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
		},
	}
</script>

<style>
	@import url("index.css");
</style>