MP_XOIL_company_new/AppletCode/pages/index/index.vue

<template>
	<view class="code_body">
		<view class="code_header" :style="{paddingTop:(styles.top+styles.height)+'px'}">
			<image class="code_body_headerImg" :src="codeBg"></image>
			<view v-if="current!==0" @click="current=0" :style="{top:styles.top+'px'}" class="back">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
			<view v-if="fromSwitchingState==false&&postData.phone" @click="animation=true"
				:style="{top:styles.top+'px'}" class="back">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
			<view class="code_header_text">
				<image class="code_header_logo" :src="logo"></image>
				<view class="samall_text">现邀请成为</view>
				<view class="bold_text">{{basicsData.name}}的{{basicsData.selfOperatedOrOutsourced==1?'自营':'外请'}}司机
				</view>
			</view>
		</view>

		<view :style="{	transform: `translateY(${animation?fromStyle.height+'px':0})`}" class="code_from_body">
			<view v-if="!fromSwitchingState" class="code_from_body_tip">使用其他手机号</view>
			<swiper :current='current' style="height: 100%;" class="swiper" circular>
				<swiper-item v-if="fromSwitchingState" catchtouchmove="stopTouchMove">
					<view style="transition: all .3s;padding: 10px;">
						<view class="code_from_item">
							<input :disabled="true" v-model="postData.phone" class="code_from_input"
								placeholder="请输入手机号" />
							<view @click="iconClick">
								<image class="code_from_input_icon" :src="qh"></image>
							</view>
						</view>
						<view :class="fromStyle.nameType?'code_from_item':'err_item'">
							<input @blur="checkFn('name')" v-model="postData.name" class="code_from_input"
								placeholder="请输入姓名" />
						</view>
						<view :class="fromStyle.plateNumberType?'code_from_item':'err_item'">
							<input @blur="checkFn('plateNumber')" v-model="postData.plateNumber" class="code_from_input"
								placeholder="请输入车牌号" />
						</view>
						<view @click="current=1" class="code_from_footer_tip">
							<view class="code_from_footer_tip_text">申请理由</view>
							<view
								style="flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0 10px;">
								{{postData.remark}}
							</view>
							<view>
								<uni-icons color='#bbbbbb' type="forward" size="25"></uni-icons>
							</view>
						</view>
						<view class="code_from_item_butten">
							<button @click="submit" class="code_from_butten">提交注册申请</button>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="fromSwitchingState" catchtouchmove="stopTouchMove">
					<view>申请理由</view>
					<view style="width: 100%;">
						<textarea v-model="postData.remark" class="code_from_textarea" placeholder="请输入申请理由"></textarea>
					</view>
					<view class="code_from_item_butten">
						<button @click="current=0" class="code_from_butten">确定</button>
					</view>
				</swiper-item>
				<swiper-item v-else="fromSwitchingState" catchtouchmove="stopTouchMove">
					<view style="padding: 10px;">
						<view :class="fromStyle.replacePhoneType?'code_from_item':'err_item'">
							<input @blur="checkFn('replacePhone')" v-model="replace.phone" class="code_from_input"
								placeholder="请输入手机号" />
							<view @click="codeClick">
								<text style="color: #FF6700;">{{timerNumber?timerNumber+'s':'获取验证码'}}</text>
							</view>
						</view>
						<view class="code_from_item">
							<input v-model="replace.verification" class="code_from_input" placeholder="请输入验证码" />
						</view>
						<view class="code_from_item_butten">
							<button @click="replacePhoneFn" class="code_from_butten">确定</button>
						</view>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<view @click="goLogin" class="code_footer">已有账号？<text style="font-size: 30rpx;">去登录</text> </view>
		<uni-popup :mask-click='false' ref="popup" type="center">
			<view class="phone">
				<view>需要获取您的手机号用于注册</view>
				<view style="display: flex;">
					<button style="font-size: 28rpx;margin-right: 25rpx;" type="primary" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber"> 点击授权 </button>
					<button style="font-size: 28rpx; margin-right: 35rpx;" @click="closeFn">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tools from '@/utils/tools.js';
	import wxcode from '@/api/wxcode.js'
	export default {
		data() {
			return {
				replace: {
					phone: '',
					token: '',
					verification: ''
				},
				replacePhone: '',
				replacePhoneToken: '',
				Verification: '',
				postData: {
					"name": "",
					"phone": uni.getStorageSync('phone'),
					"qrCode": "",
					"plateNumber": "",
					"remark": "",
					"createSource": "XOIL_DRIVER_COMPANY_WECHAT_APPLET",
					"selfOperatedOrOutsourced": "0"
				},
				timerNumber: 0,
				timer: null,
				basicsData: null,
				fromSwitchingState: true,
				fromStyle: {
					height: '',
					nameType: true,
					plateNumberType: true,
					phoneType: true,
					replacePhoneType: true
				},
				animation: false,
				current: 0,
				styles: null,
				qh: require('../../static/img/qh.png'),
				logo: require('../../static/img/CodeLogo.png'),
				codeBg: require('../../static/img/codeBg.png')
			}
		},
		mounted() {
			this.styles = uni.getMenuButtonBoundingClientRect()
			Object.keys(this.styles).forEach(key => {
				this.styles[key] = this.styles[key]
			});
			this.resize()
			console.log(this.styles)
		},
		onLoad(e) {
			this.basicsData = JSON.parse(e.details);
			this.postData.selfOperatedOrOutsourced = this.basicsData.selfOperatedOrOutsourced
			this.init()
		},
		onHide() {
			// uni.redirectTo({
			// 	url: '/BagAuth/pages/login/login'
			// })
		},
		watch: {
			animation(n) {
				if (n) {
					setTimeout(() => {
						this.animation = false;
						this.fromSwitchingState = !this.fromSwitchingState;
						this.clearReplaceFn()
					}, 500)
				}
			},
			// "postData.phone":{
			// 	handler (n) {
			// 		if (n) {
			// 			this.$refs.popup.close()
			// 		}
			// 	}
			// }
		},
		methods: {
			closeFn() {
				this.$refs.popup.close();
				this.animation = true;
			},
			replacePhoneFn() {
				this.checkFn('replacePhone')
				if (!this.fromStyle.replacePhoneType) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					})
					return
				}
				// if (!this.replace.verification) {
				// 	uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				// this.postData.phone = this.replace.phone;
				// this.animation = true;
				// this.postData.name = '';
				// this.postData.remark = '';
				// this.postData.plateNumber = '';
				wxcode.checkCodeWithDel({
					code:this.replace.verification,
					verifyCodeToken:this.replace.token
				}).then(res=>{
					if(res.code==20000){
						uni.showToast({
							title: '更换成功',
							icon: 'success'
						})
						this.postData.phone = this.replace.phone;
						this.animation = true;
						this.postData.name = '';
						this.postData.remark = '';
						this.postData.plateNumber = '';
					}
				})
			},
			clearReplaceFn() {
				Object.keys(this.replace).forEach(keys => {
					this.replace[keys] = ''
				})
			},
			codeClick() {
				if (this.timerNumber !== 0) return;
				this.checkFn('replacePhone');
				if (!this.replace.phone) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'error'
					})
					return
				}
				wxcode.loginSmsCode({
					phone: this.replace.phone
				}).then(res => {
					if (res.code == 20000) {
						this.countDown()
						uni.showToast({
							title: '验证码已发送到您的手机',
							icon: 'success'
						});
						this.replace.token = res.data.verifyCodeToken
					}
				})
			},
			countDown() {
				this.timerNumber = 60
				this.timer = setInterval(() => {
					if (this.timerNumber == 0) {
						clearInterval(this.timer);

					} else {
						this.timerNumber -= 1;
					}
				}, 1000)
			},
			checkFn(e) {
				switch (e) {
					case 'name':
						this.fromStyle.nameType =
							/(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/
							.test(this.postData.name);
						break
					case 'plateNumber':
						this.fromStyle.plateNumberType =
							/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/
							.test(this.postData.plateNumber)
						break
					case 'phone':
						this.fromStyle.phoneType = /^1[3456789]\d{9}$/.test(this.postData.phone);
						console.log(this.fromStyle.phoneType, '----')
						break;
					case 'replacePhone':
						this.fromStyle.replacePhoneType = /^1[3456789]\d{9}$/.test(this.replace.phone);
						break;
				}
			},
			submit() {
				this.checkFn('name');
				this.checkFn('plateNumber');
				if (!this.fromStyle.nameType || !this.fromStyle.plateNumberType) {
					uni.showToast({
						title: '还有信息没有填哦',
						icon: 'error'
					});
					return
				};
				wxcode.theUserAuthentication(this.postData).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/BagAuth/pages/login/login'
							})
						}, 2000)
					}
				})
			},
			goLogin() {
				uni.redirectTo({
					url: '/BagAuth/pages/login/login'
				})
			},
			async decryptPhoneNumber(e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					this.postData.phone = await tools.WXlogin(e);
					uni.setStorageSync('phone', this.postData.phone);
					this.$refs.popup.close()
				} else {
					uni.showModal({
						title: '您已拒绝授权手机号'
					})
				}

			},
			init() {
				if (this.basicsData) {
					if (!this.postData.phone) this.$refs.popup.open('center');
				};
				({
					qrCode: this.postData.qrCode,
					selfOperatedOrOutsourced: this.postData.selfOperatedOrOutsourced
				} = this.basicsData);
			},
			resize() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.code_from_body').boundingClientRect((pos) => {
					this.fromStyle.height = pos.height
					console.log('pos', pos)
				}).exec()
			},
			stopTouchMove() {
				return false
			},
			iconClick() {
				const token = uni.getStorageSync('Authorization');
				const openid = uni.getStorageSync('openid');
				if (token && openid) {
					uni.showToast({
						title: '登陆状态暂不支持切换手机号',
						icon: 'none'
					})
					return
				}
				this.animation = true;
				console.log('点击了图标')
			}
		}
	}
</script>

<style scoped>
	@import url("../../css/index.css");

	.phone {
		background-color: #FFFFFF;
		height: 300rpx;
		width: 550rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
</style>