<template>
	<view class="whole">
		<view class="title">你即将查看店铺详细信息</view>
		<view class="desc">为保证双方信息安全，请先按照提示完成安全验证。</view>
		<view class="btn" @click="verificate">去验证</view>
		
		<tf-verify-img @succeed="verifySuccess" @close="showVerify = false" v-if="showVerify" :verifyImgs="imgs"></tf-verify-img>
		
	</view>
	
</template>

<script>
	import { reactive, toRefs } from 'vue'
	import tfVerifyImg from '@/components/tf-verify-img/index.vue'
	
	export default {
		components: { tfVerifyImg },
		setup() {
			const data = reactive({
				id: 0,
				Color: uni.getStorageSync('theme_color'),
				imgs:[
					{ src: 'https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/09/25/OXFDXcT6px79ph6gZ1oXBqqbWy6Qn18EgW6OqzDO.png' },
					{ src: 'https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/09/25/5xI1XZQ2hAYEowW4Nma10qbAQ1Lr2hyOBDTRi8t6.png' },
					{ src: 'https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/09/25/TOwJN2a91RE8eiXFBZ7euUM78zcqnSI2iZpMq2CT.png' },
					{ src: 'https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/09/25/hp56Ygo2e6roMYJtJ8YH6mmPwsvtvGzpnewX8pBX.png' },
					{ src: 'https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/09/25/QtQ4UseTINYPz1PznPP7DGUTKEaIE2lYJuRWUClC.png' }
				],
				showVerify: false
			})
			
			function verificate() {
				data.showVerify = true
			}
			
			function verifySuccess() {
				data.showVerify = false
				uni.showToast({
					icon: 'success',
					title: '验证成功',
					duration: 1000,
					success() {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/mine/other/directsales/index?id=' + data.id
							})
						}, 1000)
					}
				})
			}
			
			return {
				...toRefs(data),
				verificate,
				verifySuccess
			}
		},
		async onLoad(options) {
			this.id = options.id || 0
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.desc{
			font-size: 28rpx;
			color: #999;
			margin: 20rpx 0 60rpx;
		}
		.btn{
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			background-color: v-bind('Color');
			color: #fff;
			font-size: 30rpx;
			border-radius: 80rpx;
		}
	}
</style>
