<template>
	<view class="s_page">
		<custom :isBack="false">
			<template v-slot:left>
				<view class="custom_icon left" @tap="windowHandler">
					<image src="/static/img/icon_01.png" mode=""></image>
				</view>
			</template>
		</custom>
		<view class="view_content">
			<view class="txt_box">
				<view class="txt">{{ $t(`核销积分比例(每单上限)`) }}:10%(100)</view>
				<view class="txt">{{ $t(`返现积分比例(每单上限)`) }}:10%(100)</view>
			</view>
			<view class="step_two public_box">
				<view class="item_box">
					<view class="box_title">{{ $t('店铺ID·名称') }}/店舗ID·店舗名</view>
					<view class="box_fun flex"><view class="txt ts"><view>No.123</view><view>asd</view></view></view>
				</view>
				<view class="item_box">
					<view class="box_title">{{ $t('消费金额') }}/消费金額</view>
					<view class="box_fun flex"><view class="txt flex"><input v-model="form_data.money.value" type="number" /></view></view>
				</view>
			</view>
			<view class="next_btn_box">
				<view class="next_btn flex_abc" :class="{'active': form_data.money.value}" @tap="scanCodeHandle()">扫会员码</view>
			</view>
		</view>
		<view class="window_box" v-show="window_flag">
			<view class="window_bgc" @tap="windowHandler"></view>
			<view class="window_content" :class="{'active': animation_flag,'close': !animation_flag}"></view>
		</view>
	</view>
</template>

<script>
	import custom from '@/components/custom/custom'
	export default {
		components: {
			custom
		},
		data() {
			return {
				window_flag: false,
				animation_flag: false,
				form_data: {
					money: {
						value: '',
						tips_key: '',
						process_type: 2
					}
				},
			}
		},
		onLoad() {

		},
		methods: {
			windowHandler() {
				let flag = !this.window_flag
				if(flag) {
					this.window_flag = flag
					this.animation_flag = flag
				}else {
					this.animation_flag = flag
					setTimeout(() => {
						this.window_flag = flag
					},1000)
				}
			},
			gotoWhere(url) {
				uni.navigateTo({
					url
				})
			},
			scanCodeHandle() {
				// this.gotoWhere(`/pages/verification/stepOne`)
				// 允许从相机和相册扫码
				uni.scanCode({
					success:(res) => {
						let customer_info = res.result.split('-')
						uni.setStorageSync('customer_info',customer_info)
						this.gotoWhere(`/pages/verification/stepOne`)
						// let rex = /^(\/page)/
						// if(rex.test(res.result)) {
						// 	this.gotoWhere(res.result)
						// }
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: linear-gradient(rgba(160,204,87, .2) 0%, rgba(223,226,0, .2) 100%);
	}
</style>
<style scoped lang="scss">
	.s_page {
		width: 100vw;
		min-height: 100vh;
		height: auto;
	}
	.custom_icon {
		width: 48rpx;
		height: 48rpx;
		image {
			width: 100%;
			height: 100%;
		}
		&.left {
			margin-left: 16rpx;
		}
		&.right {
			margin-right: 32rpx;
		}
	}
	.txt_box {
		.txt {
			font-size: 28rpx;
			margin-bottom: 16rpx;
		}
	}
	.window_box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		.window_bgc {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
		.window_content {
			width: 320rpx;
			height: 100%;
			position: absolute;
			top: 0;
			left: -320rpx;
			background-color: #FFFFFF;
			transition: left 1s;
			&.active {
				animation: oneframe 1s forwards;
			}
			&.close {
				animation: twoeframe 1s forwards;
			}
		}
	}
	@keyframes oneframe {
		0% {
		}
		100% {
			left: 0;
		}
	}
	@keyframes twoeframe {
		0% {
			left: 0;
		}
		100% {
			left: -320rpx;
		}
	}
	.public_box {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	}
	.view_content {
		padding-top: 40rpx;
		padding-bottom: 150rpx;
	}
	.step_two {
			.item_box {
				width: 100%;
				margin-bottom: 40rpx;
				&:last-child {
					margin-bottom: 0;
				}
				.box_title {
					font-size: 28rpx;
					line-height: 38rpx;
					color: $them_color_two;
					font-weight: bold;
				}
				.box_fun {
					width: 100%;
					min-height: 80rpx;
					
					.change_btn_box {
						flex-shrink: 0;
						margin-left: 20rpx;
						.chang_btn {
							height: 54rpx;
							width: 54rpx;
							border-radius: 50%;
							overflow: hidden;
							image {
								height: 35%;
								width: 35%;
								display: block;
							}
							&.del {
								background-color: $them_color_two;
							}
							&.add {
								background-color: $them_color_two;
							}
						}
					}
					.txt {
						flex: 1;
						height: 100%;
						padding: 16rpx 0 30rpx;
						box-sizing: border-box;
						align-items: flex-end;
						border-bottom: 1px solid #E1E0E8;
						>view,
						input{
							color: #000000;
							font-size: 48rpx;
							line-height: 48rpx;
							font-weight: bold;
						}
						&.ts {
							>view {
								font-size: 28rpx !important;
								line-height: 38rpx !important;
							}
						}
					}
				}
			}
		}
	.next_btn_box {
		// width: 100%;
		// position: fixed;
		// left: 0;
		// bottom: 0;
		// background-color: #FFFFFF;
		// padding: 20rpx 0;
	}
	.next_btn {
		margin: 0 auto;
		width: 92%;
		height: 82rpx;
		border-radius: 41rpx;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		background: #F2F2F2;
		color: #ACACAC;
		&.active {
			background: linear-gradient(90deg, #7EB96A 0%, #D3D722 100%);
			color: #FFFFFF;
		}
	}
</style>
