security_study_hx/pages/index/index.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="page-wrap">
			<view class="title-wrap">
				<img src="../../static/img/index-title.png" alt="">
			</view>
			<view class="search-wrap u-flex">
				<u-search 
					placeholder="请输入核销码" 
					color="#009AEF"
					searchIconColor="#009AEF"
					bgColor="#F5F9FC"
					@search="getCheckGoods"
					@custom="getCheckGoods"
					:inputStyle="{height:'88rpx'}"
					:actionStyle="{'background-color':'#3ebbff',width:'88rpx',height:'88rpx','line-height':'88rpx',color:'#fff','border-radius':'16rpx'}"
					v-model="exchangeCode">
				</u-search>
				<view class="qr-link" @click="openScan"></view>
			</view>
			<view class="goods-wrap" v-if="showResult&&showEmpty==false">
				<view class="title">搜索结果</view>
				<view class="goods u-flex u-col-top">
					<img class="img" :src="checkGoods.mainImg" alt="">
					<view class="text">
						<view class="title ellipsis-2">{{checkGoods.goodsName}}</view>
						<view class="credit">{{checkGoods.credit}}积分</view>
						<view class="bottom u-flex u-row-between">
							<view class="left">
								<view class="quantity">兑换数量：{{checkGoods.quantity}}</view>
								<view class="userinfo">姓名：{{checkGoods.name}} / {{checkGoods.dept}} </view>
							</view>
							<u-button 
								@click.native.stop="check()" 
								type="primary" 
								:customStyle="{height:'58rpx',width: 'auto','margin-right': 'unset'}" 
								text="核销">
							</u-button>
						</view>
					</view>
				</view>
			</view>
			<u-empty mode="data" :text="emptyText" v-if="showEmpty&&!showResult"></u-empty>
			
			<view class="scan" v-show="showScan">
				<!-- <view class="loop_line"></view> -->
				<u-icon class="close" name="close-circle" color="#fff" size="30" @click="closeScan"></u-icon>
			    <view class="video-container">
			      <video class="video" id="video_nav_id" :controls="false"></video>
			    </view>
			    <view class="camera-container" v-if="videoInputDevices.length">
			      <label>摄像头：</label>
			      <select v-model="currentVideoInputDevice">
			        <option
			          v-for="(videoInputDevice, index) in videoInputDevices"
			          :key="index"
			          :value="videoInputDevice"
			        >
			          {{ videoInputDevice.label }}
			        </option>
			      </select>
			    </view>
			  </view>

			<tabbar :tabbarIndexProps='0' />
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import {
	  BrowserMultiFormatReader,
	  ChecksumException,
	  FormatException,
	} from "@zxing/library";
import { LOG } from "@zxing/library/esm/core/datamatrix/encoder/constants";
	import tabbar from "../../components/tabbar.vue";
	export default {
		components:{
			tabbar,
		},
		mixins:[systemInfo],
		data() {
			return {
			  exchangeCode:'',
			  codeReader: null,
			  videoInputDevices: [],
			  currentVideoInputDevice: {},
			  decodeResult: undefined,
			  showScan:false,
			  checkGoods:{},
			  showResult:false,
			  emptyText:'',
			  showEmpty:false,
			}
		},
		onLoad() {
			let that = this;
			
			// this.initEvent()
			 

		},
		mounted() {
			var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
			video.setAttribute('id','video-1')
			video.setAttribute('class','video_calss')
			this.codeReader = new BrowserMultiFormatReader();
		},
		onShow() {
			
		},
		beforeDestroy() {
			this.codeReader.reset(); //关闭摄像头
		},
		 watch: {
		    currentVideoInputDevice: function () {
		      this.decodeFromInputVideo();
		    },
		    decodeResult: function () {
		      this.successDecode();
		    },
			exchangeCode:{
				handler(val){
					if(val.length>=8){
						this.getCheckGoods()
					}
				}
			}
		  },
		methods: {
			getCheckGoods(){
				this.$u.api.getCheckGood({exchangeCode:this.exchangeCode}).then(res=>{
					this.checkGoods = res.data;
					this.showResult = true;
					this.showEmpty = false;
					// console.log('getCheckGood',this.checkGoods);
				}).catch(err=>{
					this.showEmpty = true;
					this.showResult = false;
					this.emptyText = err.msg;
					console.log('getCheckGood',err);
				})
			},
			check(){//核销
				this.$u.api.check({exchangeCode:this.exchangeCode}).then(res=>{
					this.checkGoods = {};
					this.showResult = false;
					uni.showToast({
						title:res.msg,
						icon:"success"
					})
					uni.reLaunch({url: `/center/checksuccess?success=true`});
					// console.log('check',this.checkGoods);
				}).catch(err=>{
					console.log('check',err);
				})
			},
			closeScan(){
				this.showScan = false;
			},
			async openScan() {
				uni.$u.route('/center/scan');
				return
			      const _this = this;
				  // console.log('codeReader', this.codeReader);
				  // camera.setDisplayOrientation(90);
				  this.showScan = true;
			      _this.codeReader
			        .getVideoInputDevices() //老版本listVideoInputDevices()
			        .then((videoInputDevices) => {
			          if (videoInputDevices && videoInputDevices.length) {
			            if (videoInputDevices.length > 1) {
			              videoInputDevices.reverse();
			            } //防止先唤出前摄像头
			            _this.videoInputDevices = videoInputDevices;
			            _this.currentVideoInputDevice = videoInputDevices[0];
			          }
			        })
			        .catch(() => {});
			    },
			
			    decodeFromInputVideo() {
			      const _this = this;
			      _this.codeReader.reset();
			      // 多次
				try {
					_this.codeReader.decodeFromVideoDevice(_this.currentVideoInputDevice.deviceId, 'video-1',(res,err) => {
						if(res) {
							_this.decodeResult = res.text;
						}
						if (err) {
												  // alert(err)
						  if (err instanceof ChecksumException) {
													alert("A code was found, but it's read value was not valid.")
						    console.log(
						      "A code was found, but it's read value was not valid."
						    );
						  }
						  if (err instanceof FormatException) {
													alert("A code was found, but it was in a invalid format.")
						    console.log("A code was found, but it was in a invalid format.");
						  }
						}
					})
				}catch(err){
					uni.showToast({title: `初始化失败${err}`,icon: 'none'});
				}
			},
			
			successDecode() {
			  const _this = this;
			  let result = JSON.parse(_this.decodeResult);
			  this.exchangeCode = result.qrcode;
			  this.closeScan();
			  this.getCheckGoods();
			  // alert(_this.decodeResult);
			},
		}
	}
</script>
<style>
page{
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.title-wrap{
	text-align: center;
	margin: 100rpx auto 60rpx;
}
.qr-link{
	margin-left: 10rpx;
	width: 88rpx;
	height: 88rpx;
	background: url(../../static/img/qr-ico.png) no-repeat center;
	background-color: rgba(0,154,239,0.2);
	border-radius: 16rpx;
}

.loop_line {
	height: 3px;
	width: 80%;
	background-color: aliceblue;
	border-radius: 50%;
	box-shadow: 1px -4px 25px 7px rgba(255, 255, 255, 0.5);
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translateX(-50%);
	animation: myfirst 3s infinite;
	z-index: 999999;
}
@keyframes myfirst {
  from {
    top: 5%;
  }
  to {
    top: 80%;
  }
}
#video_nav_id {
	height: 100%;
	width: 100%;
}
/deep/.uni-video-cover {
	display: none;
}

.scan {
position: fixed;
left: 0;
top: 0;
z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff9900;
  width: 100%;
  height: 100vh;
  background: #000;
  .video-container {
	width: 100%;
	height: 100%;
    display: flex;
    justify-content: center;
    /deep/ #video-1{
      width: 100%;
      height: 100%;
    }
    @media (min-width: 500px) {
      video {
        // width: 80vh;
        max-width: 96vw;
        height: 80vh;
      }
    }
  }
  .camera-container {
    margin-top: 5vh;
    width: 80%;
    height: 50px;
    line-height: 44px;
    border-radius: 10px;
    border: 3px solid #ff9900;
    display: flex;
    justify-content: center;
    select {
      width: calc(100% - 80px);
      color: #ff9900;
      background: transparent;
      border: none;
      outline: none;
    }
  }
  .close{
	  position: absolute;
	  right: 40rpx;
	  top: 40rpx;
	  z-index: 100;
  }
}
.goods-wrap{
	margin-top: 42rpx;
	.title{
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-bottom: 20rpx;
	}
	.goods{
		padding: 28rpx 0;
		background-color: #fff;
		.img{
			width: 200rpx;
			height: 202rpx;
		}
		.text{
			flex: 1;
			margin-left: 40rpx;
			.title{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.credit{
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFB100;
				line-height: 44rpx;
				margin-bottom: 20rpx;
			}
			.left{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
		&:not(:last-of-type){
			border-bottom: 0.5px solid #ddd;
			padding-bottom: 20rpx;
		}
	}
}
</style>