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="" disabled/>
					</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="merchant_name" placeholder="请输入店铺名称"/>
					</view> -->
					<view class="itemx">
						<view class="item-tit">店长区域(镇/街道)：</view>
						<input type="text" v-model="area" placeholder="请输入店长区域"/>
					</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="yyzz" @click.stop="upImg('yyzz')"></image>
						<image src="../../static/img/add.png" mode="" v-if="!yyzz" @click.stop="upImg('yyzz')"></image>
					</view>
				</view>
			</view>
			<view class="btn-tc">
				
			</view>
			<view class="sub-btn" @click="sub">
				提交申请
			</view>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { register, verify } from '@/api/login.js';
import { upload ,enter} from '@/api/user.js';
export default {
	data() {
		return {
			time: '', //保存倒计时对象
			countDown: 0,//倒计时
			isStep: 1,
			name: '',
			speed_id: '',
			phone: '',
			// code: '',
			sfzz: '', //身份证正面
			sfzf: '', //身份证反面
			yyzz: '',//营业执照
			merchant_name: '',//店铺名称
			area: ''//店长区域
		};
	},
	onLoad() {
		let obj = this
		obj.speed_id = uni.getStorageSync('spread') || '';
		if(obj.speed_id == '') {
			obj.speed_id = obj.userInfo.spread_uid || ''
		}
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	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);
					});
			}
		},
		//提交
		sub() {
			let obj = this
			if(obj.name == '') {
				obj.$api.msg('请输入姓名')
				return
			}
			if(obj.phone == '') {
				obj.$api.msg('请输入联系方式')
				return
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			if(obj.sfzz == '') {
				obj.$api.msg('请上传身份证证件照')
				return
			}
			if(obj.sfzf == '') {
				obj.$api.msg('请上传身份证证件照')
				return
			}
			if(obj.yyzz == '') {
				obj.$api.msg('请上传营业执照')
				return
			}
			if(obj.area == '') {
				obj.$api.msg('请输入会员区域')
				return
			}
			let card_id = obj.sfzz + ',' + obj.sfzf
			uni.showLoading({
				title: '提交中...',
				mask: true
			})
			enter({
				type: 1,
				merchant_name: obj.area,
				link_user: obj.name,
				link_tel: obj.phone,
				spread_uid: obj.speed_id,
				charter: obj.yyzz,
				card_id: card_id
			}).then( res => {
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
				setTimeout(()=> {
					uni.navigateBack({})
				},2000)
				
				console.log(res)
			}).catch( err => {
				uni.hideLoading()
				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: 310rpx;
			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;
	margin: 60rpx auto;
	width: 600rpx;
	height: 98rpx;
	border-radius: 49rpx;
	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>