web-app_taiwan/pages/invite-proxy/invite-proxy.vue

<template>
	<view v-show="showBox" class="invite-proxy">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="content" v-if="!isOverdue">
			<view class="app-item item">
				<text>分享人</text>
				<text>{{ share_info.user_name }}</text>
			</view>
			<view class="app-item item">
				<text>联系方式</text>
				<text>{{ share_info.user_mobile }}</text>
			</view>

			<view class="form">
				<navigator :url="type?'':'../phone-area/phone-area'" class="phone-area">
					<text class="text">国家/地区</text>
					<text class="area">{{ areaName }}（{{ areaCode }}）</text>
					<text class="icon cuIcon-right"></text>
				</navigator>
				<view class="item">
					<image src="../../static/new_index/phone.png"></image>
					<input maxlength="11" type="number" v-model="phone" placeholder="请输入手机号" disabled />
				</view>
			<!-- 	<view class="item" v-else>
					<image src="../../static/new_index/phone.png"></image>
					<input maxlength="11" type="number" v-model="phone" placeholder="请输入手机号" />
					<text v-if="phone&&!type" class="cuIcon-roundclosefill" @tap="phone=''"></text>
				</view> -->
				<view class="item">
					<image src="../../static/new_index/sms.png"></image>
					<input maxlength="6" type="number" v-model="verifycode" placeholder="请输入6位验证码" />
					<text v-if="verifycode" class="cuIcon-roundclosefill" @tap="verifycode=''"></text>
					<view class="countdown" @tap="getCode">
						<text v-if="countDown">{{ ' ' + countDown }}s</text>
						<text v-else>发送验证码</text>
					</view>
				</view>
				<view class="item">
					<image src="../../static/new_index/address.png"></image>
					<input v-model="address" type="text" @click="choosePicker" placeholder="省/市/区" disabled />
				</view>
			</view>

			<view class="app-item item item-space">
				<text>微信昵称</text>
				<input v-model="wx_nickname" placeholder="请填写微信昵称" placeholder-class="place" />
			</view>
			<view class="app-item item">
				<text>真实姓名</text>
				<input v-model="real_name" maxlength="32" placeholder="请填写真实姓名" placeholder-class="place" />
			</view>
			<view class="app-item item">
				<text>身份证号</text>
				<input type="text" @input="inputChange" v-model="id_card_num" maxlength="18" placeholder="请填写身份证号"
					placeholder-class="place" />
			</view>
			<!-- <view class="app-item item">
				<text>地址</text>
				<input v-model="address" type="text" @click="choosePicker" placeholder="请选择地址" disabled
					style="font-size:30rpx;" />
			</view> -->
			<w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" />
			<button class="big-btn bg" @tap="submit" style="border:none;">立即加入</button>
		</view>
		<view class="overdue" v-else>
			<view class="overdue_con">
				<image src="../../static/new_index/top.png" mode="widthFix" style="width: 642rpx;margin-top: 76rpx;">
				</image>
				<image src="../../static/new_index/safe.png" mode="widthFix" style="width: 310rpx;margin-top: 116rpx;">
				</image>
				<view class="title flexCC">
					<view>该二维码已过期，</view>
					<view>请联系客户索取新的二维码进行注册。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		_API_GetVerifyCode,
		_API_Reg
	} from '@/apis/verify.js'
	import {
		_API_SubAuthInfo,
		getShareInfo
	} from '@/apis/user.js'
	import WPicker from '@/components/w-picker/w-picker.vue';
	import cityPicker from '@/components/citypicker/city-picker.vue';
	import areaList from '@/common/util/phone-area.js'
	export default {
		data() {
			return {
				showBox: false,
				title: '欢迎加入大卫博士',
				invite_code: '',
				wx_nickname: '',
				real_name: '',
				id_card_num: '',
				areaName: '中国台湾', // 手机号地区名称
				areaCode: '+886', // 手机号地区代码
				phone: '', // 正常手机号
				verifycode: '', // 验证码
				countDown: 0, // 倒计时
				isREG: true,
				src: '',
				share_info: {},
				address: '', // 地址展示信息
				province: '', //省
				city: '', //市
				area: '', //区
				type: '', //邀请类型
				time: '', //邀请码到期时间
				isOverdue: false, //邀请码是否过期
				codeList: areaList, //手机号区域选择
				isMatch: /^[a-zA-Z][0-9]{9}$/,
				phoneReg: /^[0]{1}[9]{1}\d{8}$/
			};
		},
		computed: {
			logged() {
				return this.$store.state.app.token
			}
		},
		onLoad({ uuid }) {
			uni.$on('CHOOSEPHONECODE', (name, code, reg, phoneReg) => { // 监听 chooseArea 事件更新
				this.areaName = name // 修改选择的手机号地区名称
				this.areaCode = code // 修改选择的手机号地区代码
				this.isMatch = reg //修改选择的手机号地区身份的正则验证
				this.phoneReg = phoneReg //手机号正则验证
			})
			if (!uuid) {
				uni.showModal({
					content: '客户不存在,请联系分享人',
					showCancel: false
				})
				return false
			}
			// uni.showModal({
			// 	content: "请确认关注公众号",
			// 	showCancel: false
			// })

			// this.type = type

			this.getShareInfo(uuid)


		},
		methods: {
			// 获取选择到的地址
			onConfirm(e) {
				this.address = `${e.checkArr[0]}-${e.checkArr[1]}-${e.checkArr[2]}`;
				this.province = e.checkArr[0]
				this.city = e.checkArr[1]
				this.area = e.checkArr[2]
			},
			/*点击选择地址*/
			choosePicker() {
				this.$refs.Selector.show();
			},
			getShareInfo(uuid) {
				getShareInfo({ uuid }).then(res => {
					if (res.code === 200) {
						// 系统维护，禁止注册
						if (!res.data.system_status) {
							uni.reLaunch({
								url: '../safeguard/safeguard'
							})
							return
						}
						this.showBox = true
						this.share_info = res.data
						this.phone = res.data.phone
						// 如果是微店铺邀请默认显示手机号和国家区号
						// this.phone = this.type ? res.data.customer_mobile : ''
						// this.areaCode = this.type ? res.data.area_code : '+86'
						if (this.areaCode) {
							let index = this.areaCode.indexOf('+')
							let code = this.areaCode.substring(index + 1)
							this.codeList[0].list.map(i => {
								if (i.code === Number(code)) {
									this.areaName = i.name
									this.isMatch = i.reg
									this.phoneReg = i.phoneReg
								}
							})
						}

					} else {
						uni.showModal({
							content: res.msg || '客户不存在,请联系分享人',
							showCancel: false
						})
					}
				}).catch(e => {
					uni.showModal({
						content: JSON.stringify(e)
					})
				})
			},
			inputChange() {
				this.id_card_num = this.id_card_num.trim()
			},
			getCode() { // 点击获取手机验证码
				if (this.phone.length) { // 手机号是否输入
					if (this.countDown) { // 如果正在倒计时
						uni.toast('验证码已发送,请稍后重试')
					} else {
						uni.showLoading({
							mask: true
						}) // 显示 loading
						_API_GetVerifyCode({
							mobile: this.phone,
							code: this.areaCode,
							type: 'invite'
						}).then(res => {
							if (res.code == 200) {
								if (res.data.status == 0) { // 登录 // 0、 1 代表用户是登录 或 注册
									this.isREG = false // 隐藏提交
									uni.toast('该手机号已注册！请直接登录！') // 提示邀请码发送成功
								} else {
									this.isREG = true // 显示提交
									uni.toast('验证码发送成功') // 提示邀请码发送成功
									this.countDown = 120 // 倒计时时长
									this.timer = setInterval(() => { // 开始倒计时
										this.countDown--
										if (this.countDown <= 0) { // 倒计时结束清除倒计时
											this.countDown = 0
											clearInterval(this.timer)
										}
									}, 1000)
								}
							} else if (res.code == 900) {
								this.isREG = false // 隐藏提交
								uni.toast('该手机号已注册！请直接登录！') // 提示邀请码发送成功
							} else { // code 300 表示禁止获取验证码，禁止登录
								uni.toast(res.message)
							}
						})
					}
				} else {
					uni.toast('手机号格式不正确，请重新输入')
				}
			},
			submit() { // 点击登录/注册
				if (!this.phone.length) {
					uni.toast('手机号格式不正确，请重新输入');
					return
				}
				if (!this.phone.match(this.phoneReg)) {
					uni.toast('手机号所属与区号不一致');
					return
				}
				if (!(this.verifycode.length == 6)) {
					uni.toast('验证码格式不正确，请重新输入');
					return
				}
				if (!this.wx_nickname.length) {
					uni.toast('微信昵称不能为空')
					return
				}
				if (!this.real_name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
					uni.toast('真实姓名不符合要求')
					return
				}
				if (!this.id_card_num.match(this.isMatch)) {
					uni.toast('身份号码不合法')
					return
				}
				// if (!this.id_card_num.match(
				// 		/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {
				// 	uni.toast('身份号码不合法')
				// 	return
				// }
				if (!this.address) {
					uni.toast('地址不能为空')
					return
				}
				uni.showLoading({
					mask: true
				}) // 显示 loading
				if (!this.requesting) {
					this.requesting = true
					setTimeout(() => this.requesting = false, 567)
					_API_Reg({
						mobile: this.phone,
						verify_code: this.verifycode,
						recom_code: this.share_info.recom_code,
						code: this.areaCode,
						wxcode: this.$store.state.userinfo.code,
						province: this.province, //省
						city: this.city, //市0·
						area: this.area, //区
						type: '',
					}).then(res => {
						uni.showLoading({
							mask: true
						}) // 显示 loading
						if (res.code == 200) { // 注册成功
							this.$store.commit('app/LOGIN', res.data.token) // 保存 token
							_API_SubAuthInfo({ // 提交信息
								wechatname: this.wx_nickname,
								realname: this.real_name,
								cre_num: this.id_card_num,
								customer_id: this.type
							}).then(res => {
								uni.hideLoading()
								if (res.code === 200) { // 提交成功
									this.$store.commit('userinfo/UPDATA_USERINFO', {
										cert_status: 1
									})
									uni.redirectTo({
										url: '../auth-progress/auth-progress'
									}) // redirect 到 审核进度页面
								} {
									uni.showToast({
										title: res.message
									})
								}
							})
						} else { // 验证码不正确
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite-proxy {
		@include page();


		.content {

			#imgWrapper {
				flex: 1;
				@include flex();

				.showCan {
					width: 680rpx;
					height: 960rpx;
					border-radius: 14rpx;
					box-shadow: 0px 0px 23px 2px rgba(194, 133, 58, 0.5);
				}
			}

			.app-item {
				height: 102rpx;

				text {
					color: #333;
				}

				.place {
					font-size: 30rpx;
				}

			}

			.sharetext {
				font-size: 88rpx;
				text-align: center;
				margin: 8rpx 0;
				box-sizing: border-box;
				padding: 0 24rpx;
			}

			.form {
				padding: 30rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;

				.phone-area {
					@include flex();
					justify-content: space-between;
					padding: 10rpx 0;

					.text {
						font-size: 32rpx;
					}

					.area {
						color: #42b983;
					}

				}

				.item {
					@include flex();
					height: 110rpx;
					padding-top: 20rpx;
					box-sizing: border-box;
					color: $app-sec-text-color;
					border-bottom: 1rpx solid #eee;

					.icon,
					.cuIcon-roundclosefill {
						margin: 0 20rpx;
						font-size: 36rpx;
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}

					input {
						flex: 1;
						height: 84rpx;
						margin-left: 15rpx;
					}

					.countdown {
						@include flex();
						width: 168rpx;
						height: 60rpx;
						background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
						border-radius: 30rpx;
						color: #fff;

						text {
							margin-left: 8rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}

	.overdue {

		width: 100vw;
		height: 100vh;
		background: #fff;

		.overdue_con {
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				color: #333333;
				font-size: 32rpx;
				margin-top: 136rpx;

				view {
					margin-bottom: 24rpx;
				}
			}

		}



	}
</style>