|
|
@@ -1,395 +0,0 @@
|
|
|
-<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>
|
张平