You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
6.3 KiB
Vue
322 lines
6.3 KiB
Vue
<template>
|
|
<view class="page page-box">
|
|
<view class="saveThePhoneNumber">
|
|
|
|
<!-- <view class="mobilePhone">
|
|
<u-input border="none" placeholder="请输入手机号" v-model="form.phone">
|
|
<template #prefix>
|
|
<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
|
|
+86
|
|
</span>
|
|
</template>
|
|
</u-input>
|
|
</view> -->
|
|
|
|
|
|
<view class="tip">
|
|
向您绑定的手机号 199xxxx1234 发送验证码
|
|
</view>
|
|
|
|
<view class="input">
|
|
<view class="verificationCode">
|
|
<u-input v-model="form.password" border="none" placeholder="请输入验证码"></u-input>
|
|
</view>
|
|
|
|
<view class="toObtain">
|
|
<u-code keepRunning ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
|
|
<u-button @click="getCode" :text="tips" :disabled="!['获取验证码', '重新获取'].includes(tips)"
|
|
:color="['获取验证码', '重新获取'].includes(tips) ? 'rgb(247, 56, 38)' : '#cccccc'"></u-button>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mobilePhone">
|
|
<u-input border="none" placeholder="请输入新密码" v-model="form.newPassword">
|
|
<template #prefix>
|
|
<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
|
|
新密码
|
|
</span>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
|
|
<view class="mobilePhone">
|
|
<u-input border="none" placeholder="请重新输入密码" v-model="form.phone">
|
|
<template #prefix>
|
|
<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
|
|
确认密码
|
|
</span>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
|
|
<view style="width: 100%;margin: 20rpx auto;border-radius: 18rpx;font-weight: 600;overflow: hidden;">
|
|
<u-button color="rgb(247, 56, 38)" text="修改密码" @click="saveThePhoneNumber"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
tips: "",
|
|
form: {
|
|
password: "",
|
|
newPassword: "",
|
|
code: ""
|
|
}
|
|
};
|
|
},
|
|
onLoad() { },
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
|
|
/**
|
|
* 获取验证码并发送给指定手机号。
|
|
* @returns {void}
|
|
*/
|
|
async getCode() {
|
|
if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)) {
|
|
return uni.$u.toast('请检查手机号格式');
|
|
}
|
|
|
|
if (this.form.newPassword != this.form.password) {
|
|
return uni.$u.toast('两次输入密码不一致');
|
|
}
|
|
|
|
if (this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
// uni.hideLoading();
|
|
// // 这里的提示会被this.start()方法中的提示覆盖
|
|
// uni.$u.toast('验证码已发送');
|
|
// // 通知验证码组件内部开始倒计时
|
|
// this.$refs.uCode.start();
|
|
// }, 2000);
|
|
const res = await this.$api.user.send({
|
|
mobile: this.form.phone
|
|
})
|
|
|
|
if (res.code === 0) {
|
|
this.$refs.uCode.start();
|
|
} else {
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
uni.hideLoading();
|
|
} else {
|
|
uni.$u.toast('倒计时结束后再发送');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 保存手机号码并进行验证。
|
|
* @returns {void}
|
|
*/
|
|
async saveThePhoneNumber() {
|
|
// if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)) {
|
|
// return uni.$u.toast('请检查手机号格式');
|
|
// }
|
|
|
|
if (this.form.code.trim() === "") {
|
|
return uni.$u.toast('请输入验证码');
|
|
}
|
|
|
|
// 执行保存手机号码的逻辑
|
|
|
|
const res = await this.$api.user.bind_merge({
|
|
mobile: this.form.phone,
|
|
sms_code: this.form.code
|
|
})
|
|
|
|
if (res.code === 0) {
|
|
uni.$u.toast('绑定成功');
|
|
} else {
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
|
|
this.getData();
|
|
}
|
|
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
onReachBottom() { },
|
|
onPullDownRefresh() {
|
|
console.log("加载");
|
|
setTimeout(() => {
|
|
uni.stopPullDownRefresh();
|
|
}, 200);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
position: relative;
|
|
min-height: 100%;
|
|
background: #f2f2f2;
|
|
padding: 24rpx 0 100rpx;
|
|
padding: 24rpx 0 calc(constant(safe-area-inset-bottom) + 100rpx);
|
|
padding: 24rpx 0 calc(env(safe-area-inset-bottom) + 100rpx);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.m-box {
|
|
margin-bottom: 24rpx;
|
|
padding: 0 24rpx;
|
|
background: #fff;
|
|
width: 100%;
|
|
}
|
|
|
|
.payList {
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 120rpx;
|
|
border-top: 1px solid #f8f8f8;
|
|
}
|
|
|
|
.let {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
image {
|
|
// width: 100%;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
font-size: 22rpx;
|
|
color: #a0a0a0;
|
|
font-weight: bold;
|
|
margin-bottom: 14rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.m-tit {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
font-size: 32rpx;
|
|
color: #262626;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.payTime {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 50rpx;
|
|
font-size: 24rpx;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
padding: 10rpx 0 30rpx;
|
|
color: #262626;
|
|
font-size: 80rpx;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
|
|
&:before {
|
|
content: "¥";
|
|
font-size: 48rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.u-count-down__text {
|
|
padding-left: 8rpx;
|
|
color: #8c8c8c;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 12rpx 36rpx 12rpx;
|
|
padding: 12rpx 36rpx calc(constant(safe-area-inset-bottom) + 12rpx);
|
|
padding: 12rpx 36rpx calc(env(safe-area-inset-bottom) + 12rpx);
|
|
background: #fff;
|
|
|
|
view {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 76rpx;
|
|
background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
|
|
border-radius: 18rpx;
|
|
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.saveThePhoneNumber {
|
|
padding: 0 20rpx;
|
|
|
|
.mobilePhone {
|
|
background-color: white;
|
|
margin-bottom: 22rpx;
|
|
border-radius: 18rpx;
|
|
padding: 18rpx;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
align-items: center;
|
|
|
|
.verificationCode {
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 18rpx;
|
|
}
|
|
|
|
.toObtain {
|
|
width: 7em;
|
|
margin-left: 22rpx;
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|