对接设置接口
This commit is contained in:
zhouyanli
@@ -1,296 +1,256 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="contentStyle">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="更改手机号码" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
<uni-nav-bar
|
||||
title="更改手机号码"
|
||||
left-icon="left"
|
||||
@click-left="goBack"
|
||||
background-color="transparent"
|
||||
:border="false"
|
||||
>
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-container">
|
||||
<!-- 手机号输入框（带+86前缀） -->
|
||||
<view class="input-group phone-input">
|
||||
<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/phoneIcon.png"></image>
|
||||
<input class="input-item" type="number" v-model="phone" placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder" maxlength="11" />
|
||||
<input
|
||||
class="input-item"
|
||||
type="number"
|
||||
v-model="phone"
|
||||
placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder"
|
||||
maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 验证码输入框（带获取验证码按钮） -->
|
||||
<view class="input-group code-input" style="padding: 0 0 0 20rpx;">
|
||||
<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/codeIcon.png">️</image>
|
||||
|
||||
<input class="input-item code-item" type="number" v-model="code" placeholder="请输入验证码"
|
||||
placeholder-class="input-placeholder" maxlength="6" />
|
||||
<button class="code-btn" :disabled="countdown > 0" @click="getCode">
|
||||
<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/codeIcon.png"></image>
|
||||
<input
|
||||
class="input-item code-item"
|
||||
type="number"
|
||||
v-model="code"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="input-placeholder"
|
||||
maxlength="6"
|
||||
/>
|
||||
<button
|
||||
class="code-btn"
|
||||
:disabled="countdown > 0"
|
||||
@click="getCode"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-btn">
|
||||
<button class="submit-btn" @click="onSubmit">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除定时器
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
phone: '',
|
||||
code: '',
|
||||
countdown: 0,
|
||||
timer: null,
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
// 1. 手机号校验
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!this.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 2. 模拟发送验证码（替换为实际接口）
|
||||
uni.showLoading({
|
||||
title: '发送中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
// 3. 开启60秒倒计时
|
||||
this.countdown = 60
|
||||
this.timer = setInterval(() => {
|
||||
if (this.countdown <= 1) {
|
||||
clearInterval(this.timer)
|
||||
this.countdown = 0
|
||||
return
|
||||
}
|
||||
this.countdown--
|
||||
}, 1000)
|
||||
}, 800)
|
||||
},
|
||||
|
||||
// 提交修改
|
||||
onSubmit() {
|
||||
// 1. 基础校验
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!this.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '更换中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '更换成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
import { getAuthSendSmsCode, getUserChangePhone } from '../api/apiSub.js'
|
||||
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
const phone = ref('')
|
||||
const code = ref('')
|
||||
const countdown = ref(0)
|
||||
let timer = null // 定时器无需响应式，用普通变量
|
||||
|
||||
// 获取验证码
|
||||
const getCode = () => {
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!phone.value) {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(phone.value)) {
|
||||
uni.showToast({ title: '手机号格式不正确', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '发送中...' })
|
||||
getAuthSendSmsCode({ phone: phone.value, scene: 'register' }).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '验证码已发送', icon: 'none' })
|
||||
|
||||
// 60秒倒计时
|
||||
countdown.value = 60
|
||||
timer = setInterval(() => {
|
||||
if (countdown.value <= 1) {
|
||||
clearInterval(timer)
|
||||
countdown.value = 0
|
||||
return
|
||||
}
|
||||
countdown.value--
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '发送失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '发送失败', icon: 'none' })
|
||||
})
|
||||
}
|
||||
|
||||
// 提交修改
|
||||
const onSubmit = () => {
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!phone.value) {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(phone.value)) {
|
||||
uni.showToast({ title: '手机号格式不正确', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '更换中...', mask: true })
|
||||
getUserChangePhone({ newPhone: phone.value, smsCode: code.value,scene:'change_phone' }).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '更换成功', icon: 'success' })
|
||||
setTimeout(() => goBack(), 1500)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '更换失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '更换失败', icon: 'none' })
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/settingIndex'
|
||||
})
|
||||
}
|
||||
|
||||
// 页面卸载清除定时器
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
/* padding: 60rpx 30rpx; */
|
||||
}
|
||||
/* 表单容器 */
|
||||
.form-container {}
|
||||
|
||||
/* 输入框组（手机号+验证码行） */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
/* border: 1rpx solid #dcdcdc; */
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* 输入框组（手机号+验证码行） */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width:50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.iconStyle {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.phone-input .input-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.phone-input .input-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 验证码输入框 */
|
||||
.code-input .code-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
/* 验证码输入框 */
|
||||
.code-input .code-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: #2F77FD;
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: 88rpx;
|
||||
width: 100px;
|
||||
}
|
||||
.code-btn {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: #2F77FD;
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: 88rpx;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.code-btn[disabled] {
|
||||
color: #999;
|
||||
}
|
||||
.code-btn[disabled] {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -34,98 +34,57 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
oldPwd: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { authChangePassword } from '../api/apiSub.js'
|
||||
|
||||
|
||||
const statusBarHeight = ref(20);
|
||||
const oldPwd = ref('');
|
||||
const newPwd = ref('');
|
||||
const confirmPwd = ref('')
|
||||
|
||||
|
||||
// 方法
|
||||
const onSubmit = () => {
|
||||
if (!oldPwd.value) {
|
||||
uni.showToast({ title: '请输入原密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!newPwd.value) {
|
||||
uni.showToast({ title: '请输入新密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (newPwd.value !== confirmPwd.value) {
|
||||
uni.showToast({ title: '两次密码不一致', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '修改中...', mask: true })
|
||||
authChangePassword({
|
||||
oldPassword: oldPwd.value,
|
||||
newPassword: newPwd.value,
|
||||
confirmPassword: confirmPwd.value
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
setTimeout(() => goBack(), 1500)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '修改失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
// 提交修改
|
||||
onSubmit() {
|
||||
// 1. 基础校验
|
||||
if (!this.oldPwd) {
|
||||
uni.showToast({
|
||||
title: '请输入原密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.newPwd) {
|
||||
uni.showToast({
|
||||
title: '请输入新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.newPwd !== this.confirmPwd) {
|
||||
uni.showToast({
|
||||
title: '两次密码不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '修改中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}).catch((err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: err.msg || '修改失败', icon: 'none' })
|
||||
})
|
||||
}
|
||||
|
||||
const goBack = () =>{
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/settingIndex',
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
authLogout
|
||||
authLogout, getUserProfile, getUserNotify, changeUserNotify
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
//
|
||||
@@ -47,7 +47,8 @@
|
||||
const cacheSize = ref(0)
|
||||
const settingList = ref([{
|
||||
title: '更改手机号码',
|
||||
type: 'arrow'
|
||||
type: 'text',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
title: '修改密码',
|
||||
@@ -144,7 +145,19 @@
|
||||
}
|
||||
|
||||
const onSwitchChange = (item, e) => {
|
||||
item.checked = e.detail.value
|
||||
const checked = e.detail.value
|
||||
const notifyEnabled = checked ? '1' : '0'
|
||||
changeUserNotify({ notifyEnabled }).then(res => {
|
||||
if (res.code === 200) {
|
||||
item.checked = checked
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '更新失败', icon: 'none' })
|
||||
item.checked = !checked
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.showToast({ title: '更新失败', icon: 'none' })
|
||||
item.checked = !checked
|
||||
})
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
@@ -152,6 +165,20 @@
|
||||
url: '/pages/myIndex/myIndex'
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUserProfile().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
const phone = res.data.phone || ''
|
||||
settingList.value[0].value = phone
|
||||
}
|
||||
})
|
||||
getUserNotify().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
settingList.value[2].checked = res.data.notifyEnabled === '1'
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user