<template>
	<view>
		<far-bottom></far-bottom>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container" :style="{height:phoneHight}">
			<!-- <view class="verification"> -->
				<!-- <view class="verification-main-package">
					<view class="verification-main p-r p-left-right-30">
						<view class="verification-header">
							<view class="dis-flex f-24 flex-x-center flex-y-center">
								<! <view class="i icon iconfont icon-info"></view>您输入的核销码无效，重新输入！ -->
							<!-- </view>
							<view class="verification-input dis-flex flex-x-center flex-y-center">
								<view class="verification-input-number dis-flex">
									<view class="verification-input-number-item">{{taiyang[0]}}</view>
									<view class="verification-input-number-item">{{taiyang[1]}}</view>
									<view class="verification-input-number-item">{{taiyang[2]}}</view>
								</view>
								<image class="verification-input-delete" @click="deleNum" :src="imgfixUrls + 'centerMerchant/delete.png'" />
							</view>
							<view class="verification-btn f-28 dis-flex flex-x-center flex-y-center">
								<view class="verification-btn-item dis-flex flex-x-center flex-y-center" @click="getQrcodeInfo">
									<view class="i icon iconfont icon-scan"></view>
									<view >扫码验证</view>
								</view>	
								<view class="verification-btn-line"></view>
								<view class="verification-btn-item dis-flex flex-x-center flex-y-center" @click="goRecord">
									<view class="i icon iconfont icon-time"></view>
									<view>验证记录</view>
								</view>
							</view>
						</view>
					</view>
				</view> --> 
				<!-- <view class="verification-body dis-flex">
					<view v-for="(item,index) in 9" :key="index" class="verification-num-item dis-flex flex-x-center flex-y-center"
					 @click="clickNum(index+1)">{{index+1}}</view>
					<view class="verification-num-item dis-flex flex-x-center flex-y-center" @click="clickNum(0)">0</view>
					<view class="verification-num-yz dis-flex flex-x-center flex-y-center" @click="checkcodeCash">验证</view>
				</view> -->
			<!-- </view> -->
			<view class="verification">
				<view class="bgbox">
					<image :src="imgfixUrls + 'verificationBg.png'" mode=""></image>
				</view>
				<view class="record" @click="goRecord">
					核销记录
				</view>
				<view class="verificationBtnbox">
					<view class="inputbox">
						<input type="text" v-model="verifcode" class="input" placeholder="请输入核销码" value="" />
						<view class="verificaBtn" @click="checkcodeCash">
							核销
						</view>
					</view>
					<view class="sanCode" @click="getQrcodeInfo">
						<view class="iconfont icon-scan icons">
							
						</view>
						<view class="t-c f-28 col-f">
							扫码验证
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	import TabBars from '@/components/template/tabBar.vue'
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default {
		data() {
			return {
				loadlogo: false,
				shopShow: false,
				taiyang: ['', '', ''],
				phoneHight: null,
				verifcode:''
			}
		},
		components: {
			Loadlogo,
			TabBars
		},
		computed: {},
		onShow() {},
		onLoad(e) {
			let _this = this
			_this.init()
		},
		mounted() {},
		methods: {
			init() {
				let _this = this
				// #ifdef H5
				wxApi.wxRegister();
				// #endif
				uni.getStorage({
					key: 'checkStoreid',
					success: function(res) {
						_this.storeid = res.data;
					}
				});
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight + 'px';
					}
				});
			},
			getQrcodeInfo() {
				// #ifdef H5
				wxApi.scanQRCode(res => {
					console.info(res)
				})
				// #endif
				// #ifndef H5
				uni.scanCode({
					scanType: 'qrCode',
					success: function(res) {
					console.log(res);
						App.navigationTo({
							url:res.path
						})
					}
				});
				// #endif
			},
			// 跳转商家
			goRecord() {
				App.navigationTo({
					url: 'pages/subPages/merchant/merchantRecord/merchantRecord'
				})
			},
			// 输码核销接口
			checkcodeCash() {
				let _this = this
				// _this.verifcode = _this.taiyang[0] + _this.taiyang[1] + _this.taiyang[2]
				let data = {
					storeid: _this.storeid,
					verifcode: _this.verifcode
				}
				if (_this.verifcode.length < 8) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确格式的核销码',
						duration: 2000
					});
					return;
				}
				App._post_form('&p=store&do=checkcodeCash', data, res => {
					uni.showToast({
						icon: 'none',
						title: '核销成功',
						duration: 2000
					});
					return;
				})
			},
			clickNum(num) {
				if (this.taiyang[0]['length'] < 3) {
					this.taiyang.splice(0, 1, `${this.taiyang[0]}${num}`)
				} else if (this.taiyang[1]['length'] < 3) {
					this.taiyang.splice(1, 1, `${this.taiyang[1]}${num}`)
				} else if (this.taiyang[2]['length'] < 2) {
					this.taiyang.splice(2, 1, `${this.taiyang[2]}${num}`)
				}
			},
			deleNum() {
				if (this.taiyang[2]['length'] > 0) {
					this.taiyang.splice(2, 1, this.taiyang[2]['slice'](0, -1))
				} else if (this.taiyang[1]['length'] > 0) {
					this.taiyang.splice(1, 1, this.taiyang[1]['slice'](0, -1))
				} else if (this.taiyang[0]['length'] > 0) {
					this.taiyang.splice(0, 1, this.taiyang[0]['slice'](0, -1))
				}
			},
			navgateTo(e, navType) {
				let _this = this;
				switch (navType) {
					case 'contactway':
						App.navigationTo({
							url: 'pages/subPages/dealer/contactway/contactway'
						});
						break;
					case 'withdraw':
						App.navigationTo({
							url: 'pages/subPages/dealer/withdraw/withdraw'
						});
						break;
					case 'setshop':
						App.navigationTo({
							url: 'pages/subPages/dealer/setshop/setshop'
						});
						break;
					case 'order':
						App.navigationTo({
							url: 'pages/subPages/merchant/merchantUserCenter/merchantUserCenter'
						});
						break;
					case 'rank':
						App.navigationTo({
							url: 'pages/subPages/dealer/rank/rank'
						});
						break;
					case 'level':
						App.navigationTo({
							url: 'pages/subPages/dealer/level/level'
						});
						break;
					case 'client':
						App.navigationTo({
							url: 'pages/subPages/dealer/client/client'
						});
						break;
					case 'help':
						App.navigationTo({
							url: 'pages/subPages/dealer/richtext/setrich'
						});
						break;
					case 'gener':
						App.navigationTo({
							url: 'pages/subPages/dealer/gener/gener'
						});
						break;
					case 'poster':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
					case 'shops':
						// #ifdef H5
						location.href = e.currentTarget.dataset.url;
						// #endif
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.container {
		
		.verification {
			height: 100%;
			overflow: hidden;
			.bgbox{
				width: 65%;
				height: 45%;
				margin: auto;
				margin-top: 72upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.record{
				width: 160upx;
				height: 70upx;
				border-radius: 39upx 0upx 0upx 39upx;
				background-color: #398CFF;
				color: #ffffff;
				font-size: 28upx;
				line-height: 70upx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 30upx;
			}
			.verificationBtnbox{
				padding: 30upx;
				background-color: #ffffff;
				border-radius: 50upx 50upx 0 0;
				height: 100%;
			}
			.inputbox{
				width: 100%;
				background-color: #f8f8f8;
				border-radius: 20upx;
				height: 100upx;
				position: relative;
				.input{
					text-align: center;
					height: 100upx;
					line-height: 100upx;
					font-weight: 600;
					width: 80%;
				}
				.verificaBtn{
					width: 110upx;
					height: 70upx;
					border-radius: 10upx;
					background-color: #398CFF;
					color: #ffffff;
					text-align: center;
					line-height: 70upx;
					font-size: 28upx;
					position: absolute;
					top: 15upx;
					right: 30upx;
				}
			}
			.sanCode{
				width: 224upx;
				height: 224upx;
				border-radius: 50%;
				background-color: #398CFF;
				margin: 100upx auto;
				.icons{
					font-size: 80upx;
					color: #ffffff;
					text-align: center;
					// margin-top: 30upx;
					height: 130upx;
					line-height: 130upx;
				}
			}
		}

		//权限名字
		.permission-name {
			font-size: 28upx;

			color: rgba(153, 153, 153, 1);
		}

		// 头部内容
		.pages-header {
			width: 100%;
			height: 400upx;
			background-repeat: no-repeat;
			background-size: 100% 400upx;
		}

		// 内容
		.verification-main-package {
			height: 35%;
			width: 100%;
			overflow: hidden;
			background: linear-gradient(-55deg, rgba(51, 136, 255, 1) 0%, rgba(80, 153, 255, 1) 100%);

			.verification-main {

				color: #ffffff;

				.verification-header {
					.icon-info {
						margin-right: 10upx;
					}

					//输入框
					.verification-input {
						width: 647upx;
						position: relative;
						margin-top: 150upx;
						margin: 70upx auto 0 auto;
						height: 135upx;
						background: rgba(255, 255, 255, 1);
						border-radius: 10upx;

						.verification-input-number {
							font-size: 60upx;
							color: #3388FF;
							line-height: 40upx;

							.verification-input-number-item {
								margin-right: 14upx;
							}

							.verification-input-number-item:last-child {
								margin-right: 0;
							}
						}

						.verification-input-delete {
							color: #3388FF;
							height: 50rpx;
							width: 50rpx;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 30upx;
						}
					}

					//扫码验证按钮
					.verification-btn {
						padding-top: 100upx;

						.verification-btn-item {
							width: 50%;

							.icon {
								margin-right: 20upx;
							}
						}

						.verification-btn-line {
							height: 30upx;
							width: 1upx;
							background: rgba(238, 238, 238, 1);
						}
					}
				}
			}
		}

		//数字按钮
		.verification-body {
			width: 100%;
			flex-wrap: wrap;
			height: 65%;

			.verification-num-item {
				width: 33.33%;
				height: 25%;
				font-size: 50upx;
				box-sizing: border-box;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				background-color: #ffffff;
				border: 1upx solid rgba(238, 238, 238, 1);
			}

			.verification-num-yz {
				width: 66.66%;
				font-size: 32upx;
				box-sizing: border-box;
				font-weight: bold;
				color: #FFFFFF;
				background: linear-gradient(90deg, rgba(51, 136, 255, 1) 0%, rgba(80, 153, 255, 1) 100%);
				height: 25%;
				// border: 1upx solid rgba(238, 238, 238, 1);
			}
		}
	}
</style>
