businessCard/xiaochengxu/pages/cardHolder/scancode.vue

<template>
	<view>
		 
		 
		 <!-- 扫描框 -->
		 <view class="scanBox" >
		     <camera class="camera" mode="scanCode" @scancode="scancode" :flash='flashBtn'>
		         <image class="coverImg" :src="iconScanBgGif"></image>
		     </camera>
		     <view style="text-align: center;margin: 80rpx 0 40rpx 0;">
		         <button class="cu-btn scancodePic" bindtap="changeflashBtn">
		             <!-- <image :src="flashBtn=='on'?scancodeOpen:scancodeClose"></image> -->
		         </button>
		     </view>
		     <view class="scanTip">{{status==1?'请':'请扫描二维码'}}</view>
		     <!-- 关闭扫码页面 -->
		     <view class='scan-left' @click="scanClick(0)">扫码添加名片</view>
			 <view class='scan' @click="scanClick(1)">名片识别</view>
			 <div class="000"></div>
		 </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
    };
  },
  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: {
     changeflashBtn(){
           this.flashBtn=this.data.flashBtn=='off'?'on':'off'
       },
       // 显示扫码界面(扫一扫)
       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){
		   uni.scanCode({
		   		scanType: ['barCode', 'qrCode'],
		   		success: function(res) {
					
				}
		    })
          // this.status=status
       },
       // 扫一扫返回数据
       scancode(e) {
           console.log(e.detail)
			uni.scanCode({
		   			scanType: ['barCode', 'qrCode'],
		   			success: function(res) {
						
					}
			})

           // 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;
}

.camera {
    position: relative;
    width: 70vw;
    height: 70vw;
    margin: 20vh auto 0;
}
.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{
    position: absolute;
    bottom: 0;
    padding: 20rpx 30rpx;
    z-index: 99999;
    background: #fff;
}
.scan{
	right:0;
}
.scan-left{
	left:0;
}
</style>