|
|
|
@@ -1,243 +1,289 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="title"> |
|
|
|
<!-- <img style="display: block; |
|
|
|
margin: 0 auto;" src="../../static/images/onlineHome/yinnongLogo.jpg" alt=""> --> |
|
|
|
<div class="app-container"> |
|
|
|
<!-- <van-tabs :swipeable="true" style="margin-top:0.5rem;padding:0 10px;">--> |
|
|
|
<van-form style="margin:50px 0;"> |
|
|
|
<!-- <van-field--> |
|
|
|
<!-- v-model="formData.memberName"--> |
|
|
|
<!-- name="请输入姓名"--> |
|
|
|
<!-- placeholder="请输入姓名"--> |
|
|
|
<!-- :rules="[{ required: true, message: '' }]"--> |
|
|
|
<!-- />--> |
|
|
|
<!-- <van-field--> |
|
|
|
<!-- v-model="formData.idcard"--> |
|
|
|
<!-- name="请输入身份证号"--> |
|
|
|
<!-- style="margin-top: 20px"--> |
|
|
|
<!-- placeholder="请输入身份证号"--> |
|
|
|
<!-- :rules="[{ required: true, message: '' }]"--> |
|
|
|
<!-- />--> |
|
|
|
<van-field |
|
|
|
v-model="formData.mobile" |
|
|
|
name="请输入手机号" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入手机号" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
/> |
|
|
|
<!-- <van-field--> |
|
|
|
<!-- v-model="formData.code"--> |
|
|
|
<!-- center--> |
|
|
|
<!-- clearable--> |
|
|
|
<!-- label="验证码"--> |
|
|
|
<!-- placeholder="图形验证码"--> |
|
|
|
<!-- >--> |
|
|
|
<!-- <template #button>--> |
|
|
|
<!-- <img style="width: 100px" :src="codeUrl" @click="getCode"/>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </van-field>--> |
|
|
|
<van-field |
|
|
|
v-model="formData.smsCode" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入验证码" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<!-- <van-button size="mini" type="info" @click="getRegisterSmsCode" >获取验证码</van-button> --> |
|
|
|
<div class="registerSmsBtn" @click="getRegisterSmsCode">{{ |
|
|
|
computeTime > 0 ? `(${computeTime}s)已发送` : "获取短信码" |
|
|
|
}} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit" @click="registerSubmit">绑定</van-button> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
<!-- </van-tabs>--> |
|
|
|
</div> |
|
|
|
<!-- <van-tabs v-model="active" :swipeable="true" style="margin-top:0.5rem;padding:0 10px;"> --> |
|
|
|
<van-form style="margin:50px 0;"> |
|
|
|
<van-field |
|
|
|
v-model="formData.memberName" |
|
|
|
name="请输入姓名" |
|
|
|
placeholder="请输入姓名" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.idcard" |
|
|
|
name="请输入身份证号" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入身份证号" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.mobile" |
|
|
|
name="请输入手机号" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入手机号" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img style="width: 100px" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<van-field |
|
|
|
v-model="formData.smsCode" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入验证码" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<!-- <van-button size="mini" type="info" @click="getRegisterSmsCode" >获取验证码</van-button> --> |
|
|
|
<div class="registerSmsBtn" @click="getRegisterSmsCode">{{ |
|
|
|
computeTime > 0 ? `(${computeTime}s)已发送` : "获取短信码" |
|
|
|
}}</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit" @click="registerSubmit">绑定</van-button> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
.app-container{ |
|
|
|
background: #fff; |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
padding-top: 20%; |
|
|
|
width: 88%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.van-tab--active{ |
|
|
|
font-size: .6rem; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.van-tabs__line{ |
|
|
|
background:#1D6FE9; |
|
|
|
width: 0.15rem; |
|
|
|
height: 0.15rem; |
|
|
|
border-radius: 0.07rem; |
|
|
|
bottom: 0.3rem; |
|
|
|
} |
|
|
|
.van-tabs__nav{ |
|
|
|
padding:0 |
|
|
|
} |
|
|
|
.van-tab{ |
|
|
|
display: inline-block; |
|
|
|
flex: inherit; |
|
|
|
margin-left: 30px; |
|
|
|
line-height: .8rem; |
|
|
|
} |
|
|
|
.van-tab__text--ellipsis { |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.van-password-input{ |
|
|
|
width: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
[class*=van-hairline]::after{ |
|
|
|
border:none; |
|
|
|
} |
|
|
|
.van-password-input__security li{ |
|
|
|
margin: 0 10px; |
|
|
|
border-bottom: 3px solid black; |
|
|
|
} |
|
|
|
.registerSmsBtn{ |
|
|
|
color: rgb(29, 111, 233); |
|
|
|
font-size: 0.34rem; |
|
|
|
.app-container { |
|
|
|
background: #fff; |
|
|
|
height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
padding-top: 20%; |
|
|
|
width: 88%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.van-tab--active { |
|
|
|
font-size: .6rem; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.van-tabs__line { |
|
|
|
background: #1D6FE9; |
|
|
|
width: 0.15rem; |
|
|
|
height: 0.15rem; |
|
|
|
border-radius: 0.07rem; |
|
|
|
bottom: 0.3rem; |
|
|
|
} |
|
|
|
|
|
|
|
.van-tabs__nav { |
|
|
|
padding: 0 |
|
|
|
} |
|
|
|
|
|
|
|
.van-tab { |
|
|
|
display: inline-block; |
|
|
|
flex: inherit; |
|
|
|
margin-left: 30px; |
|
|
|
line-height: .8rem; |
|
|
|
} |
|
|
|
|
|
|
|
.van-tab__text--ellipsis { |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.van-password-input { |
|
|
|
width: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
[class*=van-hairline]::after { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.van-password-input__security li { |
|
|
|
margin: 0 10px; |
|
|
|
border-bottom: 3px solid black; |
|
|
|
} |
|
|
|
|
|
|
|
.registerSmsBtn { |
|
|
|
color: rgb(29, 111, 233); |
|
|
|
font-size: 1rem; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
import { getUUID } from '@/utils' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showMessage:false, |
|
|
|
smsCodeValue:"", |
|
|
|
showKeyboard:false, |
|
|
|
formData: { |
|
|
|
username: "", //账号 |
|
|
|
password: "", //密码 |
|
|
|
code: null, //图片验证码 |
|
|
|
uuid: null, //识别uuid |
|
|
|
mobile: null, //手机号 |
|
|
|
smsCode: null, //短信验证码 |
|
|
|
memberName:null, //身份信息 |
|
|
|
idcard:null, //身份号码 |
|
|
|
rememberMe:false |
|
|
|
}, |
|
|
|
loading: false, |
|
|
|
codeUrl: "", //验证码 |
|
|
|
isSmsLogin: false, //是否手机验证码 |
|
|
|
computeTime: 0, |
|
|
|
active:1 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getCode(); |
|
|
|
this.reset(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
reset(){ |
|
|
|
import {getUUID} from '@/utils' |
|
|
|
|
|
|
|
}, |
|
|
|
showPopup(){ |
|
|
|
this.showKeyboard = !this.showKeyboard |
|
|
|
}, |
|
|
|
showMessagePop(){ |
|
|
|
this.showMessage = !this.showMessage |
|
|
|
}, |
|
|
|
getCode() { |
|
|
|
this.formData.uuid = getUUID() |
|
|
|
this.codeUrl = this.$http.adornUrl(`/captcha?uuid=${this.formData.uuid}`) |
|
|
|
}, |
|
|
|
getRegisterSmsCode(){ |
|
|
|
if (!this.computeTime) { |
|
|
|
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; |
|
|
|
if (!myreg.test(this.formData.mobile)) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号格式不正确', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
}else if (this.formData.code == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '图片验证码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (this.active==2) { |
|
|
|
let formObj = { |
|
|
|
code :this.formData.code, |
|
|
|
mobile:this.formData.mobile, |
|
|
|
uuid:this.formData.uuid |
|
|
|
} |
|
|
|
getRegisterSmsCode(formObj).then((res) => { |
|
|
|
console.log(res) |
|
|
|
console.log(res.code == 200) |
|
|
|
if(res.code == 200) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '验证码已发送', |
|
|
|
}); |
|
|
|
this.formData.uuid = res.uuid; |
|
|
|
this.computeTime = 60; |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.computeTime--; |
|
|
|
if (this.computeTime <= 0) { |
|
|
|
clearInterval(this.timer); |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
}).catch((res)=>{ |
|
|
|
if(res=='Error: 验证码已失效'){ |
|
|
|
this.getCode() |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
registerSubmit(){ |
|
|
|
const APPID = "wx7135dd84735bc392"; |
|
|
|
const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID |
|
|
|
+ '&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=0#wechat_redirect'; |
|
|
|
|
|
|
|
//注册 |
|
|
|
if (this.formData.memberName == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '姓名不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else if (this.formData.idcard == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '身份证号不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else if (this.formData.mobile == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
}else if (this.formData.smsCode == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '短信验证码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
//registerCheck,registerOn |
|
|
|
console.log(this.formData) |
|
|
|
registerCheck(this.formData).then((res)=>{ |
|
|
|
if(res.code == 200){ |
|
|
|
registerOn(this.formData).then((res)=>{ |
|
|
|
if(res.code == 200){ |
|
|
|
// |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '您的初始密码：'+res.password, |
|
|
|
}).then(() => { |
|
|
|
this.$router.push({ path: "/yinnong/workbench" }).catch(() => {}); |
|
|
|
}); |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showMessage: false, |
|
|
|
smsCodeValue: "", |
|
|
|
showKeyboard: false, |
|
|
|
formData: { |
|
|
|
// username: "", //账号 |
|
|
|
// password: "", //密码 |
|
|
|
code: null, //图片验证码 |
|
|
|
uuid: null, //识别uuid |
|
|
|
mobile: null, //手机号 |
|
|
|
smsCode: null, //短信验证码 |
|
|
|
codeTime: null, //短信验证码发送时间 |
|
|
|
openId: null, // openId |
|
|
|
// memberName: null, //身份信息 |
|
|
|
// idcard: null, //身份号码 |
|
|
|
// rememberMe: false |
|
|
|
}, |
|
|
|
loading: false, |
|
|
|
codeUrl: "", //验证码 |
|
|
|
isSmsLogin: false, //是否手机验证码 |
|
|
|
computeTime: 0, |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// this.getCode(); |
|
|
|
this.wxAuth(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showPopup() { |
|
|
|
this.showKeyboard = !this.showKeyboard |
|
|
|
}, |
|
|
|
showMessagePop() { |
|
|
|
this.showMessage = !this.showMessage |
|
|
|
}, |
|
|
|
wxAuth() { |
|
|
|
// let code = this.getUrlParam('code');//获取URL中的code参数 |
|
|
|
// if (code) return code; |
|
|
|
// let currentUrl = encodeURIComponent(window.location.href); |
|
|
|
// window.location.replace(WX_AUTH_URL.replace('REDIRECT_URI', currentUrl)); |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
let openid = this.$cookie.get('openid'); |
|
|
|
if (openid) { |
|
|
|
resolve(openid); |
|
|
|
return; |
|
|
|
} |
|
|
|
let code = this.getUrlParam('code'); |
|
|
|
if (!code) {//未经过微信授权 |
|
|
|
let currentUrl = encodeURIComponent(window.location.href); |
|
|
|
window.location.replace(WX_AUTH_URL.replace('REDIRECT_URI', currentUrl)); |
|
|
|
} else { |
|
|
|
this.$cookie.set('appid', APPID); //接口服务端从cookie中读取openid |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/wxAuth/codeToOpenid'), |
|
|
|
method: 'post', |
|
|
|
data: this.$http.adornParams({ |
|
|
|
'code': code |
|
|
|
}) |
|
|
|
}).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
console.log("微信授权完成" + res.data); |
|
|
|
resolve(res.data); |
|
|
|
} else { |
|
|
|
console.log("换取openid失败"); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getUrlParam(key) {//获取当前页面url中的参数 |
|
|
|
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); |
|
|
|
var result = window.location.search.substr(1).match(reg); |
|
|
|
return result ? decodeURIComponent(result[2]) : ''; |
|
|
|
}, |
|
|
|
getCode() { |
|
|
|
this.formData.uuid = getUUID() |
|
|
|
this.codeUrl = this.$http.adornUrl(`/captcha?uuid=${this.formData.uuid}`) |
|
|
|
}, |
|
|
|
getRegisterSmsCode() { |
|
|
|
if (!this.computeTime) { |
|
|
|
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; |
|
|
|
if (!myreg.test(this.formData.mobile)) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号格式不正确', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
// else if (this.formData.code == "") { |
|
|
|
// this.$dialog.alert({ |
|
|
|
// message: '图片验证码不能为空', |
|
|
|
// }); |
|
|
|
// return false; |
|
|
|
// } |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/sms/code'), |
|
|
|
method: 'post', |
|
|
|
data: this.$http.adornParams({ |
|
|
|
'mobile': this.formData.mobile |
|
|
|
}) |
|
|
|
}).then((res) => { |
|
|
|
if (res.data.code == 200) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '验证码已发送', |
|
|
|
}); |
|
|
|
this.formData.codeTime = res.data.smsCode; |
|
|
|
this.computeTime = 60; |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.computeTime--; |
|
|
|
if (this.computeTime <= 0) { |
|
|
|
clearInterval(this.timer); |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
} else { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: res.data.msg, |
|
|
|
}); |
|
|
|
} |
|
|
|
}).catch((res) => { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '验证码发送失败' + res.data.msg, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
registerSubmit() { |
|
|
|
//绑定 |
|
|
|
if (this.formData.mobile == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} else if (this.formData.smsCode == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '短信验证码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
this.$http({ |
|
|
|
url: this.$http.adornUrl('/sms/verifyCode'), |
|
|
|
method: 'post', |
|
|
|
data: this.$http.adornParams({ |
|
|
|
'openId': this.$cookie.get('openid'), |
|
|
|
'mobile': this.formData.mobile, |
|
|
|
'code': this.formData.smsCode, |
|
|
|
'codeTime': this.formData.codeTime |
|
|
|
}) |
|
|
|
}).then((res) => { |
|
|
|
if (res.data.code == 200) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号绑定成功', |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: res.data.msg, |
|
|
|
}); |
|
|
|
} |
|
|
|
}).catch((res) => { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '手机号绑定失败' + res.data.msg, |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
