panxiaohe
2 years ago
6 changed files with 345 additions and 6 deletions
-
5config/index.js
-
9src/api/user/user.js
-
10src/router/index.js
-
18src/views/userCenter/changeInfo/changePhone.vue
-
284src/views/userCenter/changeInfo/changeRealName.vue
-
25src/views/userCenter/userInfo/userInfo.vue
@ -0,0 +1,284 @@ |
|||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<el-container> |
||||
|
<el-header> |
||||
|
<el-row class="title">实名认证</el-row> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<el-row> |
||||
|
<el-col :span="18" :offset="3"> |
||||
|
<ShopStep :data="stepsArr" :active="active" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div v-if="active == 0"> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col :span="8" :offset="9"> |
||||
|
<span>已绑定的手机号码：{{ phone }}</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col class="flex-row-plus" :span="5" :offset="8"> |
||||
|
<el-input class="codeipt" v-model="verifyCode" placeholder="验证码"></el-input> |
||||
|
</el-col> |
||||
|
<el-col class="flex-row-plus" :span="3"> |
||||
|
<el-button |
||||
|
v-if="isoldCodeShow" |
||||
|
class="codebut" |
||||
|
@click="getoldCode" |
||||
|
>{{ oldcodeText }}</el-button |
||||
|
> |
||||
|
<el-button v-else class="codebut codeDisable">{{ |
||||
|
oldcodeText |
||||
|
}}</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col class="flex-row-plus" :span="4" :offset="10"> |
||||
|
<el-button class="submitBut" @click="checkUser" type="primary" |
||||
|
>下一步</el-button |
||||
|
> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div v-if="active == 1"> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col :span="8" :offset="8"> |
||||
|
<el-input class="codeipt" v-model="realName" placeholder="输入真实姓名"></el-input> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col :span="8" :offset="8"> |
||||
|
<el-input class="codeipt" v-model="idCard" placeholder="输入身份证号码"></el-input> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="mar-top-30"> |
||||
|
<el-col class="flex-row-plus" :span="4" :offset="10"> |
||||
|
<el-button class="submitBut" @click="updateRealName" type="primary" v-throttle |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div v-if="active == 2" style="margin:70px 0"> |
||||
|
<el-row> |
||||
|
<el-col :span="8" :offset="8" style="text-align:center;margin-bottom:20px;"> |
||||
|
<icon-svg style="font-size: 120px; margin-bottom: 20px;" icon-class="success" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="8" :offset="8" style="text-align:center;"> |
||||
|
<span>恭喜您，实名认证已完成！</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
<el-footer class="mar-top-50"> |
||||
|
<el-row class="flex-column-plus mar-20-30"> |
||||
|
<span class="fs8" style="color:#C83732;font-size:16px;">安全服务提示</span> |
||||
|
<span class="mar-top-20 fs7 font-color-9A9" |
||||
|
>• |
||||
|
实名认证后才可购买跨境商品</span |
||||
|
> |
||||
|
</el-row> |
||||
|
</el-footer> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {mapGetters, mapMutations} from 'vuex' |
||||
|
|
||||
|
import ShopStep from '@/components/base/steps.vue' |
||||
|
|
||||
|
import { |
||||
|
getTheCode |
||||
|
} from '@/api/login.js' |
||||
|
import { |
||||
|
changeRealName, |
||||
|
checkUser, |
||||
|
getUserInfo |
||||
|
} from '@/api/user/user.js' |
||||
|
|
||||
|
export default { |
||||
|
components: {ShopStep}, |
||||
|
data () { |
||||
|
return { |
||||
|
stepsArr: [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '身份验证' |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '实名认证' |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '完成' |
||||
|
} |
||||
|
], |
||||
|
active: 0, |
||||
|
realName: '', |
||||
|
idCard: '', |
||||
|
// 手机验证码 |
||||
|
isoldCodeShow: true, |
||||
|
verifyCode: '', |
||||
|
oldcodeText: '获取验证码', |
||||
|
oldtime: 60, |
||||
|
verifyIphone: '', |
||||
|
phone: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'userInfo' // 用户信息 |
||||
|
]) |
||||
|
}, |
||||
|
created () { |
||||
|
if (this.userInfo.phone) { |
||||
|
this.verifyIphone = this.userInfo.phone |
||||
|
} |
||||
|
this.phone = this.verifyIphone.substr(0, 3) + '****' + this.verifyIphone.substr(7, this.verifyIphone.split('').length) |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations({ |
||||
|
setUserInfo: 'SET_USERINFO' // 修改用户信息 |
||||
|
}), |
||||
|
async getUserInfoData () { |
||||
|
const response = await getUserInfo() |
||||
|
const res = response.data |
||||
|
if (res.code === '200') { |
||||
|
this.setUserInfo(res.data) |
||||
|
} else { |
||||
|
this.$message.error(res.message) |
||||
|
} |
||||
|
}, |
||||
|
// 身份验证 |
||||
|
async checkUser () { |
||||
|
if (this.verifyCode === '') { |
||||
|
this.$message.warning('验证码不能为空') |
||||
|
return |
||||
|
} |
||||
|
const response = await checkUser({ |
||||
|
phone: this.verifyIphone, |
||||
|
verificationCode: this.verifyCode |
||||
|
}) |
||||
|
const res = response.data |
||||
|
if (res.code === '200') { |
||||
|
this.active = 1 |
||||
|
} else { |
||||
|
this.$message(res.message) |
||||
|
} |
||||
|
}, |
||||
|
// 获取身份验证的验证码 |
||||
|
async getoldCode () { |
||||
|
if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(this.verifyIphone))) { |
||||
|
this.$message.warning('手机号格式错误请重新输入') |
||||
|
return |
||||
|
} |
||||
|
const response = await getTheCode({ phone: this.verifyIphone }) |
||||
|
const res = response.data |
||||
|
if (res.code === '200') { |
||||
|
this.$message({ |
||||
|
message: '验证码获取成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.oldtimer() |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: res.message, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 更改手机号 |
||||
|
async updateRealName () { |
||||
|
// if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(this.iphoneNum))) { |
||||
|
// this.$message.warning('手机号格式错误请重新输入') |
||||
|
// return |
||||
|
// } |
||||
|
if (this.realName === '') { |
||||
|
this.$message.warning('真实姓名不能为空') |
||||
|
return |
||||
|
} |
||||
|
if (this.idCard === '') { |
||||
|
this.$message.warning('身份证号码不能为空') |
||||
|
return |
||||
|
} |
||||
|
const response = await changeRealName({ |
||||
|
realName: this.realName, |
||||
|
idCard: this.idCard |
||||
|
}) |
||||
|
const res = response.data |
||||
|
if (res.code === '200') { |
||||
|
this.getUserInfoData() |
||||
|
this.active = 2 |
||||
|
} else { |
||||
|
this.$message.warning(res.message) |
||||
|
} |
||||
|
}, |
||||
|
// 获取更换手机号的验证码倒计时 |
||||
|
oldtimer () { |
||||
|
if (this.oldtime > 0) { |
||||
|
this.oldtime-- |
||||
|
this.oldcodeText = this.oldtime + 's' |
||||
|
setTimeout(this.oldtimer, 1000) |
||||
|
this.isoldCodeShow = false |
||||
|
} else { |
||||
|
this.oldtime = 0 |
||||
|
this.oldcodeText = '获取验证码' |
||||
|
this.isoldCodeShow = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #ffffff; |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid #E5E5E5; |
||||
|
.el-header{ |
||||
|
padding: 0; |
||||
|
.title{ |
||||
|
padding: 0 30px; |
||||
|
line-height: 50px; |
||||
|
background-color: #FAFAFA; |
||||
|
} |
||||
|
} |
||||
|
.submitBut { |
||||
|
width: 400px; |
||||
|
color: $mainGlod; |
||||
|
background-color: #333; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
.codebut { |
||||
|
padding: 13px 20px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
color: #FFF; |
||||
|
background-color: $mainGlod; |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
.codeDisable{ |
||||
|
color: #999; |
||||
|
cursor: auto; |
||||
|
|
||||
|
} |
||||
|
>>>.codeipt{ |
||||
|
.el-input__inner{ |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
} |
||||
|
.bottom-box { |
||||
|
background-color: #eeeeee; |
||||
|
} |
||||
|
>>>.el-footer{ |
||||
|
background-color: #eee; |
||||
|
height: auto !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue