Init project
This commit is contained in:
lifizer
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="user-bindPhone">
|
||||
<view class="input-box flex ai-center" style="margin-bottom: 32rpx">
|
||||
<image class="icon-phone flex-0" :src="webUrl+'/20220925102913233030.png'"/>
|
||||
<input v-model="phone" type="number" placeholder="请填写手机号码" placeholder-style="color:#E2E2E2"/>
|
||||
</view>
|
||||
|
||||
<view class="flex jc-between ai-center">
|
||||
<view class="input-box flex ai-center">
|
||||
<input v-model="captcha" type="text" placeholder="请填写验证码" placeholder-style="color:#E2E2E2"/>
|
||||
</view>
|
||||
|
||||
<button class="btn-code" :class="disabled === true ? 'on' : ''"
|
||||
:disabled="disabled" @click="code">{{ text }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<button class="btn-save" @click="confirm">确认绑定</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
||||
import {required, alpha_num, chs_phone} from "@/utils/validate";
|
||||
import {validatorDefaultCatch} from "@/utils/dialog";
|
||||
import {registerVerify, bindingPhoneByInput} from "@/api/user";
|
||||
|
||||
export default {
|
||||
name: "BindingPhone",
|
||||
components: {},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
captcha: "",
|
||||
phone: "" //手机号
|
||||
};
|
||||
},
|
||||
mixins: [sendVerifyCode],
|
||||
computed: mapGetters(["userInfo"]),
|
||||
mounted: function () {
|
||||
},
|
||||
methods: {
|
||||
async confirm() {
|
||||
let that = this;
|
||||
const {phone, captcha} = that;
|
||||
try {
|
||||
await that
|
||||
.$validator({
|
||||
phone: [
|
||||
chs_phone(chs_phone.message("手机号码")),
|
||||
alpha_num(alpha_num.message())
|
||||
],
|
||||
captcha: [
|
||||
required(required.message("验证码")),
|
||||
alpha_num(alpha_num.message("验证码"))
|
||||
]
|
||||
})
|
||||
.validate({phone, captcha});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
bindingPhoneByInput({
|
||||
phone: this.phone,
|
||||
captcha: this.captcha
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data !== undefined && res.data.is_bind) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认绑定?",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
bindingPhoneByInput({
|
||||
phone: this.phone,
|
||||
captcha: this.captcha,
|
||||
step: 1
|
||||
})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.$yrouter.replace({
|
||||
path: "/pkg_user/views/personalData"
|
||||
});
|
||||
})
|
||||
.catch(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.$yrouter.replace({
|
||||
path: "/pkg_user/views/personalData"
|
||||
});
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
uni.showToast({
|
||||
title: "已取消绑定",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.$yrouter.replace({
|
||||
path: "/pkg_user/views/personalData"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.$yrouter.replace({
|
||||
path: "/pkg_user/views/personalData"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
async code() {
|
||||
let that = this;
|
||||
const {phone} = that;
|
||||
try {
|
||||
await that
|
||||
.$validator({
|
||||
phone: [
|
||||
required(required.message("手机号码")),
|
||||
chs_phone(chs_phone.message())
|
||||
]
|
||||
})
|
||||
.validate({phone});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
|
||||
registerVerify({phone: phone})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
that.sendCode();
|
||||
})
|
||||
.catch(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-bindPhone {
|
||||
min-height: 100vh;
|
||||
padding: 60rpx 32rpx;
|
||||
background: #F9F9F9;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
|
||||
button {
|
||||
border-radius: 8rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
height: 100rpx;
|
||||
padding: 0 36rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #FFFFFF;
|
||||
color: #999999;
|
||||
|
||||
.icon-phone {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-code {
|
||||
width: 200rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 0 0 32rpx;
|
||||
background: #28AAF4;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
height: 80rpx;
|
||||
margin-top: 80rpx;
|
||||
background: #FD574B;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user