<template>
	<view>
		<view class="" style="height: 20rpx;"></view>
		<!-- 核销号码 -->
		<view class="appliedNum flex-y-center flex-between ">
			<view class="appliedNumText">优惠券核销码</view>
			<input type="text" :value="codes" @input="appliedTab" class="appliedNuminput" placeholder-class="appliedNumpleahode"
			 placeholder="请输入优惠券核销码" />
		</view>
		<!-- 圆圈扩散 -->
		<view class="point point-flicker" @click="scan">
			<image src="../static/images/my_icon_6.png" mode="" class="scanTextsImgs"></image>
			<view class="scanTexts">扫码核销</view>
		</view> 
		<!-- 圆圈扩散end -->
		<!-- 底部按钮 -->
		<view class="bottomButton" @click="confirm">核销</view>
	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				codes: '', //优惠券code码
				is_hexiao:false
			}
		},

		onLoad() {
			
			if(uni.getStorageSync("is_login")=="2"){
				this.is_hexiao=true;
			}
			
		},
		
		onShow() {

		},


		methods: {
			//输入核销码
			appliedTab(e) {
				this.codes = e.detail.value;
			},
			
			//扫描核销
			scan() {
				// #ifdef MP-WEIXIN
		         uni.scanCode({
					 
					success: (res)=> {
						console.log(res,"eeeee")
						// this.verification(res.result);
						uni.navigateTo({
							  url:"./Applied-detail?code="+res.result
						})
					}
				});
				// #endif
				
				// #ifdef H5
				getWXSign().then(res => {
					console.log('wx_getLocation');
					this.$wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: (res) => {
							console.log(res, "qrCode")
							uni.navigateTo({
								  url:"./Applied-detail?code="+res.result
							})
						}
					})
				})
				// #endif	
			},
			
			//确定核销
			confirm() {
				if (!this.codes) {
					uni.showToast({
						title: '请输入核销码',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					  url:"./Applied-detail?code="+this.codes
				})
			},	
			
		}
	}
</script>

<style>
	page {
		background: #F5F7FA;
	}

	.flex-between {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.flex-y-center {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.appliedNum {
		height: 100rpx;
		background: #fff;
		/* margin-top: 10rpx; */
	}

	.appliedNumText {
		padding-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;

	}

	.appliedNuminput {
		flex: 1;
		text-align: right;
		padding: 0 30rpx 0 150rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333;
	}

	.appliedNumpleahode {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666;
	}

	.appliedNumRgo {
		height: 100rpx;
	}

	.appliedNumRgotext {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
	}

	.appliedNumRgoimg {
		width: 26rpx;
		height: 26rpx;
		margin: 0 30rpx 0 6rpx;
	}


	/* 圆圈扩散 */
	.point {
		width: 400rpx;
		height: 400rpx;
		position: /* absolute */;
		left: 170rpx;
		top: 220rpx;
		background: linear-gradient(180deg, #6fa5ff, #438aff);
		position: relative;
		border-radius: 50%;
	}

	/* 设置动画前颜色 */
	.point-flicker:after {
		background: linear-gradient(180deg, #6fa5ff, #438aff);
	}

	/* 设置动画后颜色 */
	.point-flicker:before {
		background: linear-gradient(180deg, #6fa5ff, #438aff);
	}

	/* 设置动画 */
	.point-flicker:before,
	.point-flicker:after {
		content: '';
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		left: 10%;
		top: 10%;
		margin-left: -40rpx;
		margin-top: -40rpx;
		border-radius: 50%;
		animation: warn 1.5s ease-out 0s infinite;
	}


	/* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 */
	@keyframes warn {

		0% {
			transform: scale(0.5);
			opacity: 1;
		}

		30% {
			opacity: 1;
		}

		100% {
			transform: scale(1.4);
			opacity: 0;
		}
	}

	/* 圆圈扩散 end*/
	.scanTextsImgs {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
		z-index: 998;
	}

	.scanTexts {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 36rpx;
		z-index: 999;
	}



	/* 底部按钮 */
	.bottomButton {
		position: absolute;
		left: 60rpx;
		bottom: 100rpx;
		width: 630rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background: linear-gradient(180deg, #6fa5ff, #438aff);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #ffffff;
	}
</style>
