You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
11 KiB
361 lines
11 KiB
<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="@/static/account.png"></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: #476FFAFF;">{{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/tool.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'), |
|
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() { |
|
console.log('000') |
|
uni.clearStorageSync() |
|
}, |
|
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 |
|
} |
|
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 = |
|
/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/ |
|
.test(this.postData.plateNumber) |
|
break |
|
case 'phone': |
|
this.fromStyle.phoneType = /^1[3456789]\d{9}$/.test(this.postData.phone); |
|
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.navigateTo({ |
|
url:'/pages/login/index' |
|
}) |
|
}, 2000) |
|
} |
|
}) |
|
}, |
|
goLogin() { |
|
uni.navigateTo({ |
|
url:'/pages/login/index' |
|
}) |
|
}, |
|
async decryptPhoneNumber(e) { |
|
if (e.detail.errMsg === 'getPhoneNumber:ok') { |
|
let phoneNumber = await tools.getPhone(e); |
|
if(phoneNumber){ |
|
this.postData.phone = phoneNumber; |
|
uni.setStorageSync('phone', this.postData.phone); |
|
this.$refs.popup.close(); |
|
}else{ |
|
uni.showModal({ |
|
title: '手机号获取失败' |
|
}) |
|
} |
|
} else { |
|
uni.showModal({ |
|
title: '您已拒绝授权手机号' |
|
}) |
|
} |
|
|
|
}, |
|
async init() { |
|
let loginRes = await tools.weixinLogin(); |
|
await tools.sendCode(loginRes.code).then(res=>{}); |
|
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; |
|
} |
|
} |
|
} |
|
</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>
|
|
|