first commit
This commit is contained in:
PC-202306242200\Administrator
246
pages/mine/mobile.vue
Normal file
246
pages/mine/mobile.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 旧手机号输入区 -->
|
||||
<view class="form-group">
|
||||
<text class="label">旧手机号：</text>
|
||||
<input class="input" type="number" placeholder="请输入旧手机号" disabled :value="userInfo.mobile" maxlength="11" />
|
||||
</view>
|
||||
|
||||
<!-- 短信验证码区 -->
|
||||
<view class="form-group code-group">
|
||||
<text class="label">短信验证码：</text>
|
||||
<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.oldCode" maxlength="6" />
|
||||
<view class="code-btn" @click="getCode1">{{ current1.seconds || codeIngo1 }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 新手机号输入区 -->
|
||||
<view class="form-group">
|
||||
<text class="label">新手机号：</text>
|
||||
<input class="input" type="number" placeholder="请输入新手机号" v-model="formData.mobile" maxlength="11" />
|
||||
</view>
|
||||
|
||||
<!-- 短信验证码区 -->
|
||||
<view class="form-group code-group">
|
||||
<text class="label">短信验证码：</text>
|
||||
<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.code" maxlength="6" />
|
||||
<view class="code-btn" @click="getCode2">{{ current2.seconds || codeIngo2 }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 确定按钮 -->
|
||||
<button class="confirm-btn" @click="handleSubmit">确定</button>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<view class="tips">
|
||||
<text class="tips-title">温馨提醒：</text>
|
||||
<text class="tips-item">1. 一个手机号只能作为一个账户的登录名；</text>
|
||||
<text class="tips-item">2. 手机号修改成功后，原手机号将不支持登录。</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { toast } from '@/utils/fun.js';
|
||||
import { useCountDown } from '@/uni_modules/wot-design-uni';
|
||||
import api from '@/api/index';
|
||||
import { Store } from '@/store';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
const store = Store();
|
||||
|
||||
|
||||
|
||||
|
||||
const userInfo = computed(
|
||||
() =>
|
||||
store.userInfo || {
|
||||
inviteCode: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
avatar: '',
|
||||
paywallet: {
|
||||
balance: 0
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onShow(async () => {
|
||||
await store.usersGetInfo();
|
||||
});
|
||||
|
||||
const codeIngo1 = ref('获取验证码');
|
||||
const codeIngo2 = ref('获取验证码');
|
||||
|
||||
const formData = ref({
|
||||
code: '',
|
||||
mobile: '',
|
||||
oldCode: ''
|
||||
});
|
||||
|
||||
const {
|
||||
start: start1,
|
||||
pause: pause1,
|
||||
reset: reset1,
|
||||
current: current1
|
||||
} = useCountDown({
|
||||
time: 60 * 1000,
|
||||
onChange(current) {},
|
||||
onFinish() {
|
||||
codeIngo1.value = '重新发送';
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
start: start2,
|
||||
pause: pause2,
|
||||
reset: reset2,
|
||||
current: current2
|
||||
} = useCountDown({
|
||||
time: 60 * 1000,
|
||||
onChange(current) {},
|
||||
onFinish() {
|
||||
codeIngo2.value = '重新发送';
|
||||
}
|
||||
});
|
||||
|
||||
// 获取验证码方法
|
||||
const getCode1 = (e) => {
|
||||
if (!userInfo.value.mobile) {
|
||||
toast('请输入旧手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (current1.value.seconds) {
|
||||
toast('请等待倒计时结束');
|
||||
return;
|
||||
}
|
||||
|
||||
api.smsCode({
|
||||
mobile: userInfo.value.mobile,
|
||||
scene: 2
|
||||
})
|
||||
.then((res) => {
|
||||
start1();
|
||||
toast('验证码发送成功');
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
toast('验证码发送失败');
|
||||
});
|
||||
};
|
||||
|
||||
// 获取验证码方法
|
||||
const getCode2 = (e) => {
|
||||
if (!formData.value.mobile) {
|
||||
toast('请输入旧手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (current2.value.seconds) {
|
||||
toast('请等待倒计时结束');
|
||||
return;
|
||||
}
|
||||
|
||||
api.smsCode({
|
||||
mobile: formData.value.mobile,
|
||||
scene: 2
|
||||
})
|
||||
.then((res) => {
|
||||
start2();
|
||||
toast('验证码发送成功');
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
toast('验证码发送失败');
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
api.updateMobile(formData.value).then((res) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '修改成功',
|
||||
showCancel: false,
|
||||
success: async () => {
|
||||
await store.usersGetInfo();
|
||||
uni.navigateBack();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 表单组通用样式 */
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
width: 180rpx; /* 固定标签宽度，保证输入框对齐 */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-bottom: 1px solid #eee; /* 底部下划线 */
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 验证码按钮组 */
|
||||
.code-group {
|
||||
justify-content: space-between; /* 输入框与按钮左右分布 */
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 175rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #5d7a4e;
|
||||
border: 1rpx solid #5d7a4e;
|
||||
text-align: center;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
background-color: #5d7a4e; /* 深绿 */
|
||||
border-radius: 10rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips {
|
||||
margin-top: 60rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user