<template>
	<view class="page">
		<view class="OrderCancellation">
			<view class="header" :style="{ 'background-image': `url(${domain}/static/images/coupon_wiff_header.jpg)`}">
			</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="write_code" />
						<text @tap="goCallate">核销</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>
		<!--授权登录-->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import { writeOff } from '@/api/user.js';

	export default {
		components: {
			authorize
		},
		data() {
			return {
				// 登录相关
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				domain: HTTP_REQUEST_URL,
				iShidden: false,
				write_code: '',
				isWeixin: false,
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'viewColor'])
		},
		onLoad(options) {
			let _this = this;
			console.log(_this)
			if (options.scene) {
				// console.log('转换前参数：', options.scene)
				let scene = _this.$util.getUrlParams(decodeURIComponent(options.scene));
				console.log('转换后参数：', scene);
				if(scene.write_code) {
					this.write_code = scene.write_code
					writeOff({
						write_code: this.write_code,
					}).then(res => {
						this.$util.Tips({
							title: res.message
						});
					}).catch(res => {
						this.$util.Tips({
							title: res
						});
					});
				}
			}
			// 判断：是否登录
			if (!_this.isLogin) {
				// 未登录  授权登录
				_this.isAuto = true;
				_this.isShowAuth = true
			} else {
				// 已登录  获取信息
				_this.init();
			}
		},
		// 滚动到底部
		onReachBottom() {},
		methods: {
			// 授权回调
			onLoadFun() {
				if (this.isLogin) {
					this.isShowAuth = false;
					this.init();
				}
			},
			// 授权关闭
			authClose(e) {
				this.isShowAuth = e
			},
			// 授权成功 初始化
			init() {

			},
			goCallate() {
				let that = this

        console.log('核销码信息：',that.write_code)

        if(!that.write_code || that.write_code.length <= 0){
          that.$util.Tips({
            title: '无核销码信息！',
          });
          return false;
        }

				writeOff({
					write_code: that.write_code,
				}).then(res => {
					that.$util.Tips({
						title: res.message
					});
				}).catch(res => {
					that.$util.Tips({
						title: res
					});
				});
			},
			// 扫码核销
			scanCode() {
				var self = this;
				// #ifdef MP || APP-PLUS
				wx.scanCode({
					// scanType: ["qrCode", "barCode"],
					success(res) {
						console.log(res);
            let page = res.path || '';
            let pathArr = page.split('?');
            let path = pathArr[1];
            let reg = new RegExp("scene=","g");
            let paramsStr = path.replace(reg,"");

            if(page){
              if(res.charSet != 'ISO8859-1'){
                page = pathArr[0] + '?scene=' + encodeURIComponent(paramsStr)
                console.log('真机处理',page)
              }
              // 跳转
              uni.redirectTo({
                url: '/' + page
              })
            }
					},
					fail(res) {
						console.log(res);
					},
				})
				// #endif
				//#ifdef H5
				if (self.$wechat.isWeixin()) {
          self.$wechat.wechatEvevt('scanQRCode', {
						needResult: 1,
						scanType: ["qrCode", "barCode"]
					}).then(res => {
						console.log(res);
            self.write_code = res.resultStr
            self.goCallate()
					}).catch(res => {
            self.$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>
