caoliancun/MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

星油企业版

Browse Source
This commit is contained in:
caolc
2022-08-08 09:17:43 +08:00
commit e3238cb907
517 changed files with 80472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
AppletCode/pages/index/index.vue Normal file
View File

@@ -0,0 +1,369 @@
<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>