xinwang/pages/user/applyMember.vue

<template>
	<view class="content">
		<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="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="sub-ts"></view>
		<view class="sub-wrapper" @click="sub">
			提交申请
		</view>
	</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: '',
				area: '',
				// code: '',
				sfzz: '', //身份证正面
				sfzf: '' //身份证反面
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad() {
			let obj = this
			obj.speed_id = uni.getStorageSync('spread') || '';
			if(obj.speed_id == '') {
				obj.speed_id = obj.userInfo.spread_uid || ''
			}
		},
		watch:{
			countDown(i) {
				if (i == 0) {
					clearInterval(this.time);
				}
			}
		},
		methods: {
			//发送验证码
			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);
						});
				}
			},
			//上传图片
			upImg(item) {
				let obj = this;
				upload({
					filename: ''
				}).then(res => {
					console.log(res[0].url);
					obj[item] = res[0].url
				}).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.area == '') {
					obj.$api.msg('请输入会员区域')
					return
				}
				if(obj.sfzz == '') {
					obj.$api.msg('请上传身份证证件照')
					return
				}
				if(obj.sfzf == '') {
					obj.$api.msg('请上传身份证证件照')
					return
				}
				let card_id = obj.sfzz + ',' + obj.sfzf
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				enter({
					type: 0,
					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>
	.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-ts {
		height: 98rpx;
	}
	.sub-wrapper {
		width: 750rpx;
		height: 98rpx;
		position: fixed;
		bottom: 0;
		background: linear-gradient(180deg, #FD4646, #FF3535);
		text-align: center;
		line-height: 98rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>