businessCard/xiaochengxu/pages/cardHolder/scancode.vue

<template>
	<view>
		 
		 
		 <!-- 扫描框 -->
		 <view class="scanBox" >
		     <camera :class="status==0?'scancode':'camera'" :mode="status==0?'scanCode':'normal'" @scancode="scancode" :flash='flashBtn'>
		         <image v-if='status==0' class="coverImg" :src="iconScanBgGif"></image>
		     </camera>
			  
		     <view class="scanTip">{{status==1?'请':'请扫描二维码'}}</view>
		     <!-- 关闭扫码页面 -->
			 <view class='wrap'>
				 <view class='content'>
					 <view class='scan-left' @click="scanClick(0)">扫码添加名片</view>
					<view  v-if='status==0'></view>
					<view @click='takePhoto' v-if='status==1' class='center-btn'><u-icon size="40" name="camera"></u-icon></view>
					<view class='scan' @click="scanClick(1)">名片识别</view>
				 </view>
				
			 </view>
		     

		 </view>
	</view>
</template>

<script>
// import { iconScanBgGif,scancodeOpen,scancodeClose } from "../../../utils/imgUrl/index";
// const permisson = require("../../../utils/tools/permisson"); // 权限校验封装
const userCameraName = "scope.camera"; // 摄像头权限
const userCameraZhName = "手机摄像头"; // 摄像头权限对应的中文名称
export default {
  data() {
    return {
		iconScanBgGif:'/static/imgs/code.gif',
		// iconScanBgGif,scancodeOpen,scancodeClose,
		canScan: false, // 是否显示自定义扫码界面
        flashBtn: 'off', // off关闭   on  打开手电筒
        scanResult: '', // 扫描结果
		isShow:false,
		status:0,
		flag:false,
		src:''
    };
  },
  mounted() {
	  var that = this
  	    //需要获得现在的授权信息
  		uni.getSetting({
  			success(res){
  			    //如果相机访问权限没有授权
  				if (!res.authSetting['scope.camera']) {
  				    //访问授权
  					uni.authorize({
  						scope: 'scope.camera',
  						success(){
  							uni.showToast({
  								title:'授权成功',
  							})
  							that.isShow = true
  						},
  						//拒绝后第二次访问授权默认进入fail，询问用户“检测到您没打开获取相机功能权限，是否去设置打开”
  						fail(){
  							uni.showModal({
  								content: '检测到您没打开获取相机功能权限，是否去设置打开？',
  								confirmText: "确认",
  								cancelText: '取消',
  								success: (res)=>{
  									if (res.confirm) {
  									//打开设置页面，让用户授权
  										uni.openSetting({
  											success: ()=>{
  												uni.showModal({
  													title: '授权后请重新打开此页面',
  													icon: 'none',
  													success: function(){
  													// 刷新
  														uni.navigateTo({
  															url: '/pages/cardHolder/scancode',
  														});
  													}
  												})
  											}
  										})
  									}
  								}
  							})
  						}
  					})
  				}else{
  				  that.isShow = true
  				}
  			}
  					
  		})
  	},
	methods: {
		takePhoto() {
	        const ctx = uni.createCameraContext();
	        ctx.takePhoto({
	            quality: 'high',
	            success: (res) => {
	                this.src = res.tempImagePath
	            }
	        });
		},
       // 显示扫码界面(扫一扫)
       scanShowClick(){
		   console.log('扫码',111111)
           // 校验权限, 必须开启摄像头权限
           // wx.getSetting({
           //     success:async(res)=> {
           //         if(!res.authSetting['scope.camera']) {
                       // 权限封装
                       // permisson.permission_request(userCameraName, userCameraZhName);
    
                       // 也可自己写,通过 wx.authorize 打开有关授权=>官方链接https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html
                   // } else {
                       this.canScan=true
                       // 顶部标题栏背景变黑
                       uni.setNavigationBarColor({
                           backgroundColor: '#000000',
                           frontColor: '#ffffff',
                       });
           //         }
           //     }
           // })
       },
       // 隐藏扫码界面
       scanClick(status){
          this.status=status
       },
       // 扫一扫返回数据
       scancode(e) {
		   if(this.flag){
			   return
		   }else{
			   this.flag=true
			   if(e){
				   console.log(e,1111111)
				   if(e.target.result){
					   
						uni.navigateTo({
							url: "/pages/cardHolder/scanCodeAddCard?id="+e.target.result
						})
						this.flag=false
				   }else{
					   uni.showModal({
					   		content: '二维码无效',
					   		showCancel: false
					   	});
					   	this.flag = false
					   	return
				   }
			   }  
		   }
           
           // const {result:scanResult} = e.detail; 
           // if(result) {
           //     this.scanResult,canScan=false
           //     // 顶部标题栏背景变白
           //     uni.setNavigationBarColor({
           //         backgroundColor: '#ffffff',
           //         frontColor: '#000000'
           //     });
           // }
       }
  },
};
</script>
<style lang="scss" scoped>
.scanBox {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
}

.scancode {
    position: relative;
    width: 70vw;
    height: 70vw;
    margin: 20vh auto 0;
}
.camera {
    position: relative;
    width: 100vw;
    height: 80vh;

}
.coverImg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.scanTip {
    padding: 20rpx 0 0 0;
    font-size: 32rpx;
    text-align: center;
    color: #fff;
}

/* 开关手电筒 */
.scancodePic{
    background: transparent !important;
    width: 100rpx;
    height: 100rpx;
    padding: 0 !important;
}
.scancodePic>image{
    width: 100%;
    height: 100%;
}
/* 关闭按钮 */
.scan,.scan-left{
    padding: 20rpx 30rpx;
    background: #fff;
}
.wrap{
	width:100vw;
	position:absolute;
	z-index: 99999;
	left:0;
	bottom:0;
	background-color: #000000;
}
.content{
	display: flex;
	justify-content: space-between;
}
.center-btn{
	background:#fff;
}
</style>