224 lines
7.4 KiB
Vue
224 lines
7.4 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationBarTitleText": "",
|
||
"navigationBarBackgroundColor": "#fff"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view>
|
||
<view class="mx-60rpx mt-20rpx">
|
||
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
|
||
设置新密码
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请设置你得新密码</view>
|
||
</view>
|
||
<view class="mt-106rpx mx-48rpx">
|
||
<wd-form ref="form" :model="model">
|
||
<view>
|
||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
|
||
<view class="mt-20rpx">
|
||
<wd-input
|
||
v-model="model.mobile"
|
||
type="text"
|
||
placeholder="请输入密码"
|
||
inputmode="numeric"
|
||
no-border
|
||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||
custom-input-class="!px-32rpx !h-104rpx"
|
||
@input="mobile.handleInputMobile"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">再次确认</view>
|
||
<view class="mt-20rpx">
|
||
<wd-input
|
||
v-model="model.mobile"
|
||
type="text"
|
||
placeholder="再次确认新的密码"
|
||
inputmode="numeric"
|
||
no-border
|
||
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
|
||
custom-input-class="!px-32rpx !h-104rpx"
|
||
@input="mobile.handleInputMobile"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</wd-form>
|
||
</view>
|
||
|
||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">确定</view>
|
||
|
||
<!-- 手机号修改成功 -->
|
||
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pt-64rpx pb-74rpx">
|
||
<view class="flex justify-center items-center">
|
||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||
</view>
|
||
</view>
|
||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">密码修改成功</view>
|
||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">请记住你的登录密码</view>
|
||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import {mobile as testMobile} from '@/utils/test'
|
||
import { useToast } from 'wot-design-uni'
|
||
|
||
const OSS = inject('OSS')
|
||
const toast = useToast()
|
||
const disabled = ref<boolean>(true)
|
||
|
||
/** 页面 **/
|
||
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
|
||
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
|
||
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
|
||
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
|
||
|
||
/** 验证码倒计时 **/
|
||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||
const countDown = ref<any>(null) // 倒计时组件
|
||
|
||
/** 表单相关 **/
|
||
const model = reactive<{
|
||
mobile: string
|
||
code: string
|
||
}>({
|
||
mobile: '',
|
||
code: ''
|
||
})
|
||
/** 结束 **/
|
||
|
||
/** 服务协议和隐私政策 **/
|
||
const agree = ref<boolean>(false)
|
||
/** 结束 **/
|
||
|
||
onLoad((args) => {
|
||
// 从个人登录页面进入
|
||
if (args.type === 'edit') {
|
||
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
|
||
|
||
page.value.title = '修改手机号'
|
||
page.value.desc = '手机号一年内可修改2次'
|
||
pageType = 'edit'
|
||
}
|
||
})
|
||
|
||
const mobile = {
|
||
// 验证手机号
|
||
handleInputMobile: (e: {value: string}) => {
|
||
model.mobile = e.value
|
||
disabled.value = !testMobile(model.mobile)
|
||
},
|
||
|
||
// 发送验证码
|
||
handleCountDown: () => {
|
||
if (disabled.value) {
|
||
toast.show({
|
||
iconClass: 'info-circle',
|
||
msg: '手机号码错误请重新输入',
|
||
direction: 'vertical'
|
||
})
|
||
return
|
||
}
|
||
|
||
startCountDown.value = true
|
||
nextTick(() => {
|
||
countDown.value?.start()
|
||
|
||
// 发送验证码请求
|
||
})
|
||
},
|
||
|
||
// 验证码倒计时结束
|
||
handleFinishCountDown: () => {
|
||
startCountDown.value = false
|
||
},
|
||
|
||
// 登录
|
||
handleToLogin: () => {
|
||
// TODO 如果是edit的话就是修改手机号
|
||
|
||
if (pageType === 'login' && !agree.value) {
|
||
toast.show({
|
||
iconClass: 'info-circle',
|
||
msg: '请同意服务协议和隐私政策',
|
||
direction: 'vertical'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!testMobile(model.mobile)) {
|
||
toast.show({
|
||
iconClass: 'info-circle',
|
||
msg: '手机号码错误请重新输入',
|
||
direction: 'vertical'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!model.code) {
|
||
toast.show({
|
||
iconClass: 'info-circle',
|
||
msg: '验证码错误',
|
||
direction: 'vertical'
|
||
})
|
||
return
|
||
}
|
||
},
|
||
|
||
// 获取手机号
|
||
handleGetPhoneNumber: (e: object) => {
|
||
console.log("🚀 ~ e:", e)
|
||
},
|
||
|
||
handleAgree: (e: any) => {
|
||
console.log('e', e)
|
||
},
|
||
|
||
// 跳转到服务协议页面
|
||
handleToService: () => {
|
||
disabled.value = !disabled.value
|
||
console.log("🚀 ~ disabled:", disabled)
|
||
},
|
||
|
||
// 跳转到隐私政策页面
|
||
handleToPrivacy: () => {
|
||
|
||
},
|
||
|
||
// 修改手机成功后返回
|
||
handleToBack: () => {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.service {
|
||
:deep() {
|
||
.wd-checkbox {
|
||
display: flex;
|
||
align-content: flex-start;
|
||
}
|
||
|
||
.wd-checkbox__label {
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|