xinwang/pages/store/apply.vue

<template>
	<view class="wrapper">
		<template v-if="isStep == 1">
			<view class="top-box" style="height: 135rpx;">
				<image src="../../static/img/vip-bg.png" mode=""></image>
			</view>
			<view class="top">
				<view class="top-tit">
					鑫旺新零售VIP店长
				</view>
				<view class="top-btm">
					<text class="hx"></text><text>累计业绩达到12W可申请成为店长</text><text class="hx"></text>
				</view>
			</view>
			<view class="item">
				<view class="item-top">特权一</view>
				<view class="item-tit">
					享受六折拿货价
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">所有商品享受六折的拿货价</view>
				</view>
			</view>
			<view class="item">
				<view class="item-top">特权二</view>
				<view class="item-tit">
					销售奖励
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">推广更多会员享受更多销售奖励</view>
				</view>
			</view>
			<view class="item">
				<view class="item-top">特权三</view>
				<view class="item-tit">
					区代业绩奖励
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">推广更多店长将有资格成为区代，享受更多业绩奖励</view>
				</view>
			</view>
			<view class="more">
				<image src="../../static/icon/i-left.png" mode=""></image>
				<view class="more-tit">
					更多店长特权持续开放中，敬请期待
				</view>
				<image src="../../static/icon/i-right.png" mode=""></image>
			</view>
			<view class="btn" @click="changeStep">立即申请成为店长</view>
		</template>
		<template v-if="isStep == 2">
			<view class="tab-wrapper">
				<view class="tab-item">
					<view class="itemx">
						<view class="item-tit">姓名：</view>
						<input type="text" v-model="name" placeholder="请输入您的姓名"/>
					</view>
					<view class="itemx">
						<view class="item-tit">推荐人编号：</view>
						<input type="text" v-model="speed_id" placeholder="请输入推荐人编号"/>
					</view>
					<view class="itemx">
						<view class="item-tit">联系方式：</view>
						<input type="text" v-model="phone" placeholder="请输入您的手机号"/>
					</view>
					<view class="itemx">
						<view class="item-tit">验证码：</view>
						<input type="text" v-model="code" placeholder="请输入验证码"/>
						<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
					</view>
				</view>
			</view>
			<view class="up-wrapper">
				身份证正反面
				<view class="imgs">
					<view class="imgs-item">
						<image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg('sfzz')"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg('sfzz')"></image>
					</view>
					<view class="imgs-item">
						<image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg('sfzf')"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg('sfzf')"></image>
					</view>
				</view>
			</view>
			<view class="up-wrapper">
				营业执照
				<view class="imgs">
					<view class="imgs-item">
						<image :src="sfzz" mode="" v-if="sfzz" @click.stop="upImg(1)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzz" @click.stop="upImg(1)"></image>
					</view>
					<view class="imgs-item">
						<image :src="sfzf" mode="" v-if="sfzf" @click.stop="upImg(2)"></image>
						<image src="../../static/img/add.png" mode="" v-if="!sfzf" @click.stop="upImg(2)"></image>
					</view>
				</view>
			</view>
			<view class="btn-tc">
				
			</view>
			<view class="sub-btn">
				提交申请
			</view>
		</template>
	</view>
</template>

<script>
import { register, verify } from '@/api/login.js';
import { upload } from '@/api/user.js';
export default {
	data() {
		return {
			time: '', //保存倒计时对象
			countDown: 0,//倒计时
			isStep: 1,
			name: '',
			speed_id: '',
			phone: '',
			code: '',
			sfzz: '', //身份证正面
			sfzf: '' //身份证反面
		};
	},
	watch:{
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	methods: {
		changeStep() {
			this.isStep = 2;
		},
		upImg(item) {
			let obj = this;
			upload({
				filename: ''
			}).then(res => {
				console.log(res[0].url);
				obj[item] = res[0].url
			}).catch( err => {
				console.log(err)
			})
		},
		//发送验证码
		verification() {
			let obj = this;
			if (this.phone == '') {
				this.$api.msg('请输入电话号码');
				return;
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				verify({
					phone: obj.phone,
					type: 'register'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100%;
}
.top {
	position: relative;
	z-index: 2;
	margin: 0 auto 49rpx;
	width: 674rpx;
	height: 231rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 10rpx;
	.top-tit {
		padding-top: 80rpx;
		text-align: center;
		font-size: 49rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #6A4714;
	}
	.top-btm {
		margin-top: 35rpx;
		font-size: 19rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6A4714;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			display: inline-block;
			padding: 0 4rpx;
		}
		.hx {
			width: 66rpx;
			height: 1rpx;
			background: #81504A;
		}
	}
}
.item {
	margin: 44rpx auto;
	width: 674rpx;
	// height: 176rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	border-radius: 10rpx;
	padding-bottom: 40rpx;
	.item-top {
		width: 85rpx;
		line-height: 36rpx;
		background-color: #fed591;
		border-radius: 10rpx 18rpx 18rpx 0;
		text-align: center;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #975f4a;
	}
	.item-tit {
		display: inline-block;
		padding: 0 10rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #202020;
		margin-left: 68rpx;
		margin-top: 20rpx;
		.line {
			// width: 197rpx;
			margin-top: -10rpx;
			height: 15rpx;
			background: #FFF0C5;
		}
	}
	.item-info {
		display: flex;
		align-items: flex-start;
		padding-left: 68rpx;
		padding-top: 15rpx;
		// align-items: center;
		font-size: 21rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6F6F6F;
		line-height: 40rpx;
		.info-y {
			width: 24rpx;
			height: 24rpx;
			background: #343238;
			border-radius: 50%;
			margin-right: 14rpx;
			margin-top: 8rpx;
			flex-shrink: 0;
		}
		.info {
			padding-right: 20rpx;
		}
	}
}
.btn {
	margin: 20rpx auto;
	width: 606rpx;
	height: 80rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 40rpx;
	font-size: 35rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #704e1c;
	line-height: 80rpx;
	text-align: center;
}
.tab-wrapper {
	padding: 20rpx 30rpx;
	background-color: #f2f3f5;
	.itemx {
		margin: 0 auto;
		width: 100%;
		background-color: #fff !important;
		height: 100rpx;
		display: flex;
		// width: 690px;
		border: 1px #f4f4f4 solid;
		.code {
			width: 150rpx;
			flex-shrink: 0;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF4C4C;
			line-height: 100rpx;
		}
		.item-tit {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			width: 250rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
		}
		input {
			width: 440rpx;
			padding-right: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
}
.up-wrapper {
	margin: auto;
	padding: 38rpx 21rpx;
	width: 690rpx;
	// height: 250rpx;
	background: #ffffff;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	.imgs {
		padding: 27rpx 70rpx;
		display: flex;
		justify-content: space-around;
		.imgs-item {
			height: 160rpx;
			width: 160rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.sub-btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 98rpx;
	background: linear-gradient(180deg, #FD4646, #FF3535);
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 98rpx;
	text-align: center;
}
.btn-tc {
	height: 98rpx;
}
.top-box {
	position: relative;
	z-index: 1;
	image {
		width: 750rpx;
		height: 236rpx;
		position: absolute;
		top: 0;
		
	}
}
.more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #6F6F6F;
	height: 40rpx;
	line-height: 40rpx;
	image {
		height: 15rpx;
		width: 40rpx;
	}
	view {
		padding: 0 8rpx;
	}
}
</style>