pz/pages/user/becomeVip.vue

<template>
	<view class="center">
		<view class="info-box">
			<view class="info-item flex">
				<view class="info-item-left">姓名：</view>
				<view class="info-item-right"><input type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="placeholder" /></view>
			</view>
			<view class="info-item flex">
				<view class="info-item-left">性别：</view>
				<view class="info-item-right">
					<picker @change="bindPickerSex" :range="array">
						<view>{{ sex }}</view>
					</picker>
				</view>
			</view>
			<view class="info-item flex">
				<view class="info-item-left">联系方式：</view>
				<view class="info-item-right"><input type="number" v-model="phone" placeholder="请输入您的手机号" placeholder-class="placeholder" /></view>
			</view>
			<view class="info-item flex">
				<view class="info-item-left">验证码：</view>
				<view class="info-item-right"><input type="number" v-model="code" placeholder="请输入您的验证码" placeholder-class="placeholder" /></view>
				<view class="info-item-yzm" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
			</view>
		</view>
		<view class="upload">
			<view class="upload-title">身份证正反面</view>
			<view class="upload-main">
				<view class="add-img-box flex_item">
					<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
						<image class="add-img" @click.stop="imgInfo(index)" :src="item" mode="aspectFill"></image>
						<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
					</view>
					<view v-for="(item, index) in 2 - imgList.length" class="add-img-item" @click.stop="scImg()"><image class="add-img" src="/static/img/add.png"></image></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="add()">提交申请</view>
	</view>
</template>

<script>
import { upload, apply } from '@/api/order.js';
import { verify } from '@/api/login.js';
export default {
	data() {
		return {
			name: '',
			sex: '请选择您的性别',
			phone: '',
			code: '',
			countDown: 0, //倒计时
			array: ['男', '女'],
			imgList: [],
			imgCount: 2 //最多支持9张上传，可以修改
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	methods: {
		scImg() {
			let obj = this;
			console.log(obj.imgCount, 11);
			if (obj.imgCount == 0) {
				uni.showToast({
					title: '最多添加2张图片',
					icon: 'none'
				});
				return;
			}
			upload({
				file: ''
			})
				.then(e => {
					console.log(e[0].url, 'e');
					obj.imgList.push(e[0].url);
					console.log(obj.imgList, 'imgList');
					obj.imgCount = 2 - obj.imgList.length;
					console.log(obj.imgCount, 'imgCount ');
				})
				.catch(e => {});
		},
		// 选择性别
		bindPickerSex: function(e) {
			console.log(this.array[e.target.value]);
			this.sex = this.array[e.target.value];
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			console.log(111);
			this.imgList.forEach(e => {
				tempList.push(e);
			});
			console.log(tempList);
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: tempList,
				indicator: 'default'
			});
		},
		//删除图片
		delImg(i) {
			uni.showModal({
				content: '确定删除这张吗',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(i, 1);
						this.imgCount++;
					} else if (res.cancel) {
					}
				}
			});
		},
		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);
					});
			}
		},
		// 提交申请
		add() {
			const obj = this;
			if (obj.name == '') {
				return this.$api.msg('请输入你的姓名');
			}
			if (obj.sex == '') {
				return this.$api.msg('请输入你的姓别');
			}
			if (obj.phone == '') {
				return this.$api.msg('请输入你的联系方式');
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的联系方式');
				return;
			}
			if (obj.code == '') {
				return this.$api.msg('请输入你的验证码');
			}
			if (obj.imgList.length == 0) {
				return this.$api.msg('请上传你的身份证照片');
			}
			apply({ name: obj.name, sex: obj.sex == '男' ? 1 : 2, phone: obj.phone, images: obj.imgList, captcha: obj.code }).then(e => {
				uni.navigateTo({
					url: '/pages/order/success?type=2'
				});
			});
		}
	}
};
</script>

<style lang="scss">
page,
.center {
	min-height: 100%;
	height: auto;
	background: #f2f3f5;
}
.info-box {
	width: 690rpx;
	margin: 20rpx auto 0;
	background: #ffffff;
	border-radius: 10rpx;
	.info-item {
		justify-content: flex-start;
		padding: 38rpx 20rpx;
		.info-item-left {
			width: 140rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.info-item-right {
			margin-left: 70rpx;
			width: 260rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.placeholder {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.info-item-yzm {
			margin-left: 100rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff6f0f;
		}
	}
}
.upload-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
}
.upload-title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.upload-main {
	padding-top: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.upload-font {
		margin-top: 24rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.upload {
	width: 690rpx;
	margin: 20rpx auto 0;
	padding: 34rpx 30rpx 40rpx 30rpx;
	background: #ffffff;
	.add-img-box {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 50rpx;
	}
	.add-img-item {
		width: 180rpx;
		height: 180rpx;
		border-radius: 24rpx;
		position: relative;
		margin: 0rpx 20rpx;
		margin-bottom: 25rpx;
		.add-img {
			width: 100%;
			height: 100%;
		}
	}
}
.add-img-del {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	left: 155rpx;
	bottom: 155rpx;
	//background-color: rgba(238, 0, 0, 1);
	border-radius: 20rpx;
}
.btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 98rpx;
	background: #24a17d;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 98rpx;
}
</style>