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 style="width: 226rpx;height: 108rpx" 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"
					@clear="clearCode"
					: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>
			

			<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:'',
			  checkGoods:{},
			  showResult:false,
			  emptyText:'',
			  showEmpty:false,
			}
		},
		onLoad() {
			let that = this;
			
			// this.initEvent()
			 

		},
		mounted() {
		},
		onShow() {
			this.exchangeCode = this.vuexExchangeCode;
		},
		beforeDestroy() {
			
		},
		 watch: {
			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);
				})
			},
			clearCode(){
				this.showEmpty = true;
				this.showResult = true;
			},
			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);
				})
			},
			async openScan() {
				// uni.$u.route('/center/scan');
				uni.navigateTo({
					url:'/center/scan',
					fail(e) {
						console.log('navigateTo',e);
					}
				})
				
			},
			
		}
	}
</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>