businessCard/xiaochengxu/pages/cardHolder/scancode.vue

<template>
	<view>
		 
		 
		 <!-- 扫描框 -->
		 <view class="scanBox" >
			 <view class="scan-view">
				<view class="scan-border">
					<camera :class="status==0?'scan-camera':'camera'" @error="error" :mode="status==0?'scanCode':'normal'" @scancode="scancode" :flash='flashBtn'>
					 <cover-view v-if='status==0'
							   class="scan-animation"
							   :animation="animation"
							 ></cover-view>
						   <!--  <cover-view class="scan-pict"
							   ><cover-image
								 class="pic"
								 src="../../static/images/selectpic.png"
							   ></cover-image>
							 </cover-view> -->

					</camera>
				</view>
			</view>
		     
			  
		     <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"); // 权限校验封装
import uploadImage from '@/components/ossutil/uploadFile.js';
const userCameraName = "scope.camera"; // 摄像头权限
const userCameraZhName = "手机摄像头"; // 摄像头权限对应的中文名称
let animation = uni.createAnimation({});
export default {
  data() {
    return {
		// iconScanBgGif:'/static/imgs/code1.gif',
		// iconScanBgGif,scancodeOpen,scancodeClose,
		canScan: false, // 是否显示自定义扫码界面
        flashBtn: 'off', // off关闭   on  打开手电筒
        scanResult: '', // 扫描结果
		isShow:false,
		status:uni.getStorageSync('scancodeStatus')?uni.getStorageSync('scancodeStatus'):0,
		flag:false,
		src:'',
		animation,
    };
  },
  onShow() {
  	this.donghua()
  },
  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.redirectTo({
  															url: '/pages/cardHolder/scancode',
  														});
  													}
  												})
  											}
  										})
  									}
  								}
  							})
  						}
  					})
  				}else{
  				  that.isShow = true
  				}
  			}
  					
  		})
  	},
	methods: {
		donghua() {
		    let that = this;
		    let scode = true;
		    setInterval(
		        function () {
		          if (scode) {
		            animation.translateY(240).step({
		              duration: 1500,
		            });
		            scode = !scode;
		          } else {
		            animation.translateY(-10).step({
		              duration: 1500,
		            });
		            scode = !scode;
		          }
		          that.animation = animation.export();
		        }.bind(this),
		        1500
		    );
		},
		takePhoto() {
			console.log(1111111)
			uni.showLoading({
				title: '数据加载中',
				mask:true
			})
	        const ctx = uni.createCameraContext();
			console.log(ctx)
	        ctx.takePhoto({
	            quality: 'high',
				fail: (req) => {
					console.log(req,22222)
					uni.hideLoading()
	            },
	            success: (res) => {
	                this.src = res.tempImagePath
					console.log(res.tempImagePath,33333333)
					this.uploadFilePromise(res.tempImagePath)
	            },
				
	        });
		},
		uploadFilePromise(url) {
			console.log(url)
			uploadImage(url, 'cardImages/',
				result => {
					console.log(result, 22222)
					
				}
			)
		},
		error(e) {
		    console.log(e.detail);
		},
       // 显示扫码界面(扫一扫)
       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
		  uni.setStorageSync('scancodeStatus', this.status);
		  uni.redirectTo({
		  	url: '/pages/cardHolder/scancode',
		  });
       },
       // 扫一扫返回数据
       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;
}


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


/* 关闭按钮 */
.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;
}

// .scan-border {
//   width: 100%;
//   height: 100%;
//   /* border: 6rpx solid #08FDFE; */
//   display: flex;
//   flex-direction: column;
//   align-items: center;
 

  .scan-camera {
      position: relative;
      width: 70vw;
      height: 70vw;
      margin: 20vh auto 0;
	  border-radius: 6rpx;
  }
// }
 
.scan-animation {
  position: absolute;
  top: 10%;
  left:5%;
  width: 480rpx;
  height: 8rpx;
  background-color: #0091ff;
  border-radius: 50%;
}
.btns {
  margin: 10rpx;
  width: 100%;
  background-color: #0091ff;
}
.scan-pict {
  position: absolute;
  right: 1%;
  bottom: 1%;
  width: 70rpx;
  height: 70rpx;
  z-index: 20;
  border-radius: 50%;
  background-color: #c0c0c0;
  opacity: 0.8;
  .pic {
    z-index: 999;
    width: 50rpx;
    height: 50rpx;
    margin: 10rpx;
  }
}
</style>