<template>
	<view class="page">
		<view class="OrderCancellation">
			<view class="header":style="{ 'background-image': `url(${domain}/static/images/cancellation-header.png)`}">
			</view>
			<view class="scan_count">
				<view class="scan_bg"></view>
				<view v-if="!iShidden" class="whiteBg">
					<view class="input">
						<input type="number" placeholder-class='placeholder' placeholder="请输入核销码" v-model="verify_code" />
						<text @tap="codeChange">搜索</text>
					</view>
					<!-- #ifdef MP || MP-WEIXIN || APP-PLUS -->
					<view class="bnt" @tap="scanCode"><text class="iconfont icon-saoma"></text>扫码核销</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view v-if="isWeixin" class="bnt" @tap="scanCode">
						<text class="iconfont icon-saoma"></text>
						扫码核销
					</view>
					<!-- #endif -->
				</view>	
			</view>	
		</view>
	</view>
</template>

<script>

	import {orderVerific,verifierOrder} from "@/api/admin";
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				iShidden: false,
				verify_code: '',
				orderInfo:{},
				isWeixin: false,
				mer_id: '',
				downStatus: false,
				type: 'customer',
				service: null
			}
		},
		
		onLoad: function(options) {
			// #ifdef MP
			if (options.scene) {
				let value = this.$util.getUrlParams(decodeURIComponent(options.scene) || {});
				if (value.verify_code) options.verify_code = value.verify_code;				
				if (value.mer_id) options.mer_id = value.mer_id;				
			}
			// #endif
			this.verify_code = options.verify_code;
			this.mer_id = options.mer_id;
			
			if(this.verify_code){
				this.codeChange();
			}	
			// #ifdef H5
			if(this.$wechat.isWeixin()){
				this.isWeixin = true;						
			}
			// #endif
		},
		methods: {
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(id) {
				uni.navigateTo({
					url: '/pages/admin/orderDetail/index?id='+id+'&mer_id='+this.mer_id
				});
			},
			changeTips(data) {
				this.downStatus = !this.downStatus;
				this.$refs.shopList.isShowStore();
			},
			changeClose() {
				this.downStatus = false;
			},
			// 立即核销
			codeChange: function() {
				let self = this
				let ref = /[0-9]/;
				if (!this.verify_code) return self.$util.Tips({
					title: '请输入核销码'
				});
				if (!ref.test(this.verify_code)) return self.$util.Tips({
					title: '请输入正确的核销码'
				});		
				uni.navigateTo({
					url: '/pages/admin/cancellate_result/index?code='+this.verify_code+'&mer_id='+this.mer_id
				});
			},
			// 扫码核销			
			scanCode() {
				var self = this;
				// #ifdef MP || APP-PLUS
				wx.scanCode({
					scanType: ["qrCode", "barCode"],
					success(res) {
						self.verify_code = res.result
						uni.navigateTo({
							url: '/pages/admin/cancellate_result/index?code='+self.verify_code+'&mer_id='+self.mer_id
						});
						// self.codeChange();
					},
					fail(res) {
						console.log(res);
					},
				})
				// #endif
				//#ifdef H5
				if(this.$wechat.isWeixin()){
					this.$wechat.wechatEvevt('scanQRCode',{
						needResult: 1,
						scanType: ["qrCode", "barCode"]
					}).then(res=>{
						this.verify_code = res.resultStr
						uni.navigateTo({
							url: '/pages/admin/cancellate_result/index?code='+self.verify_code+'&mer_id='+self.mer_id
						});
						// this.codeChange();
					}).catch(res => {
						this.$util.Tips({
							title: res
						});
					});;
				}
				//#endif
			},					
		}
	}
</script>

<style lang="scss">
	.page{
		// height: 100vh;
	}
	.OrderCancellation .header {
		padding-top: 30rpx;
		width: 100%;
		height: 520rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	.OrderCancellation {
		width: 100%;		
		
	}
	.OrderCancellation .title_bg {
		height: 90rpx;
		background: #E93323;
		width: 100%;
	}
	.OrderCancellation .scan_count{
		position: relative;
		top: -140rpx;
		width: 690rpx;
		margin: 0 auto;
	}
	.OrderCancellation .scan_bg{
		width: 100%;
		height: 70rpx;
		border-radius: 16rpx;
		background-image: url('data:image/png;base64,[encoded data, 9820 characters]');
		background-size: 100%;
		background-repeat: no-repeat;

	}
	.OrderCancellation .whiteBg {
		width: 640rpx;
		background-color: #fff;
		margin: -47rpx auto 0;
		padding-top: 60rpx;
		border-radius: 4rpx 4rpx 16rpx 16rpx;
		padding-bottom: 77rpx;
		box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
	}
	.OrderCancellation .whiteBg .placeholder{
		color: #282828;
		font-size: 40rpx;
	}
	.OrderCancellation .whiteBg .input {
		width: 580rpx;
		background: #F4F4F4;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
		padding: 0 100rpx 0 20rpx;
		border-radius: 10rpx;
		
		position: relative;
	}
	.OrderCancellation .whiteBg .input text{
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		color: #666666;
		font-size: 32rpx;
	}
	.OrderCancellation .whiteBg .input input {
		font-size: 60rpx;
		color: #282828;
		line-height: 100rpx;
		height: 100rpx;		
	}
	.OrderCancellation .whiteBg .bnt {
		font-size: 32rpx;
		color: #fff;
		width: 80%;
		height: 86rpx;
		border-radius: 43rpx;
		background: #2291F8;
		text-align: center;
		line-height: 86rpx;
		margin: 60rpx auto 0 auto;
	}
	.OrderCancellation .whiteBg .bnt .icon-saoma{
		color: #ffffff;
		font-size: 30rpx;
		margin-right: 15rpx;
	}
	.OrderCancellation .scan {
		width: 300rpx;
		height: 300rpx;
		margin: 160rpx auto 0 auto;
	}
	.OrderCancellation .scan image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.WriteOff {
		width: 640rpx;
		background-color: #fff;
		margin: -47rpx auto 0;
		padding: 24rpx 30rpx;
		border-radius: 4rpx 4rpx 16rpx 16rpx;
		padding-bottom: 77rpx;
		box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
		}

	.WriteOff .num {
		font-size: 28rpx;
		color: #282828;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 22rpx;
	}
	.WriteOff .num .see {
		font-size: 16rpx;
		color: #fff;
		border-radius: 4rpx;
		background-color: #c68937;
		padding-left: 5rpx;
		margin-left: 12rpx;
	}
	.WriteOff .num .see .iconfont {
		font-size: 15rpx;
	}
	
	.WriteOff .sure {
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 86rpx;
		height: 86rpx;
		width: 580rpx;
		border-radius: 41rpx;
		margin: 40rpx auto 0 auto;
		background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
		background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
	}
	.WriteOff .sure.cancel {
		background-image: none;
		color: #666666;
		margin-top: 30rpx;
		border: 1px solid #BBBBBB;
	}
	.WriteOff .order_count scroll-view{
		max-height: 450rpx;
	}
	.WriteOff .order_count .order_list{
		margin-top: 30rpx;
		justify-content: space-between;
		align-items: center;
	}
	.WriteOff .order_list .pictrue{
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
	.WriteOff .order_list .name{
		color: #282828;
		font-size: 28rpx;
	}
	.WriteOff .order_list .pro_name{
		width: 320rpx;
	}
	.WriteOff .order_list .price{
		color: #999999;
		font-size: 28rpx;
		text-align: right;
		line-height: 40rpx;
	}
	.WriteOff .order_list .btn-item{
		display: block;
		font-size: 24rpx;
		color: #E93323;
		margin-top: 16rpx;
		
	}
	.WriteOff .order_price{
		margin-top: 20rpx;
		text-align: right;
		font-size: 26rpx;
		text{
			color: #E93323;
			font-weight: bold;
		}
	}
	.views {
		font-size: 24rpx;
		color: #666666;
	}
	.views-jian {
		font-size: 10px;
	}
	.spin {
		display: block;
		transform: rotate(180deg);
		font-size: 36rpx;
	}
	.popupn{
		width: 100%;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		.title{
			background: rgba(0,0,0,.15);
			max-width: 360rpx;
			margin: 0 auto;
			position: relative;
			border-radius: 30rpx;
		}
		.iconfont{
			display: inline-block;
			position: relative;
			top: 4rpx;
			right: 0;
		}
		.mer_logo{
			width: 34rpx;
			height: 34rpx;
			position: relative;
			top: 6rpx;
			right: 10px;			
		}
		.mer_name{
			display: inline-block;
			max-width: 650rpx;
		}
		.invoice-content{
			background-color: #ffffff;
		}
	}
</style>
