370 lines
11 KiB
Vue
370 lines
11 KiB
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>
|