<template>
	<view class="bindingClerk">
		<loadlogo v-if="!loadlogo" />
		<view class="binding-title">
			<swiper
				class="swiper"
				indicator-color="rgba(255,255,255,.4)"
				indicator-active-color="rgba(255,255,255,.85)"
				:indicator-dots="true"
				:autoplay="true"
				:interval="2000"
				:duration="500"
			>
				<swiper-item v-for="(item, index) in storeData.adv" :key="index" style="border-radius: 15upx;"><image :src="item"></image></swiper-item>
			</swiper>
		</view>
		<view class="binding-content">
			<view class="abbox">
				<view class="storeName">
					<view class="f-36 f-w col-3">{{storeData.storename}}</view>
					<view class="f-24 col-9" style="padding-top: 20upx;">{{storeData.address}}</view>
				</view>
				<view class="user">
					<view class="f-36 f-w col-3" style="padding-bottom: 30upx;">绑定信息</view>
					<view class="dis-flex inputbox">
						<view class="input-title t-r">姓名</view>
						<view class="input-content"><input class="input" adjust-position="false" placeholder="请输入真实姓名" v-model="name" type="text" value="" /></view>
					</view>
					<view class="dis-flex inputbox" style="margin-top: 30upx;">
						<view class="input-title t-r">手机号</view>
						<view class="input-content"><input class="input" adjust-position="false" maxlength="11" placeholder="请输入手机联系方式" v-model="phone" type="number" value="" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交绑定信息</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo';
export default {
	data() {
		return {
			sid: '',
			storeData: {},
			name:'',
			phone:'',
			loadlogo:false
		};
	},
	components:{
		Loadlogo
	},
	onLoad(e) {
		this.sid = e.sid;
		this.getPageContent();
	},
	methods: {
		getPageContent() {
			setTimeout(()=>{
				this.loadlogo = true;
			},2000)
			App._post_form('&p=store&do=storeAdminApply', { sid: this.sid }, res => {
				console.log(res);
				this.storeData = res.data;
				this.loadlogo = true;
			});
		},
		submit(){
			App._post_form('&p=store&do=adminApplyApi', 
			{ sid: this.sid ,realname:this.name,mobile:this.phone},
			res => {
				console.log(res);
				uni.showToast({
					title:'操作成功'
				});
				App.navigationTo({
					url: 'pages/mainPages/index/index'
				});
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.bindingClerk {
	height: 100vh;
	.binding-title {
		.swiper {
			width: 750upx;
			height: 422upx;
			image {
				width: 750upx;
				height: 422upx;
			}
		}
	}
	.binding-content {
		position: relative;
		transform: translateY(-80upx);
		.abbox {
			.storeName {
				padding: 30upx;
				margin: 0 30upx 20upx;
				background-color: #ffffff;
				border-radius: 20upx;
			}
			.user {
				padding: 30upx;
				margin: 0 30upx;
				background-color: #ffffff;
				border-radius: 20upx;
				.inputbox {
					background-color: #f8f8f8;
					border-radius: 10upx;
					.input-title {
						height: 100upx;
						line-height: 100upx;
						width: 110upx;
						font-size: 28upx;
						padding-right: 30upx;
					}
					.input-content {
						.input {
							height: 100upx;
							line-height: 100upx;
							font-size: 28upx;
						}
					}
				}
			}
		}
	}
	.submit-btn {
		width: 690upx;
		height: 100upx;
		border-radius: 20upx;
		line-height: 100upx;
		color: #ffffff;
		text-align: center;
		background-color: #3388ff;
		font-size: 32upx;
		margin: auto;
		margin-top: 300upx;
		// position: absolute;
		// bottom: 30upx;
		// left: 30upx;
	}
}
</style>
