初始化提交
This commit is contained in:
wangxiaowei
179
src/bundle/profile/set-password.vue
Normal file
179
src/bundle/profile/set-password.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<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.password"
|
||||
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"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx">
|
||||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">再次确认</view>
|
||||
<view class="mt-20rpx">
|
||||
<wd-input
|
||||
v-model="model.password_confirm"
|
||||
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"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" @click="SetPassword.handleToConfirm">确定</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="router.switchTab('/pages/my/my')">好的</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {mobile as testMobile} from '@/utils/test'
|
||||
import { resetPassword } from '@/api/user'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { useUserStore } from '@/store'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const toast = useToast()
|
||||
const disabled = ref<boolean>(true)
|
||||
|
||||
// 弹窗
|
||||
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
|
||||
|
||||
// 表单相关
|
||||
const model = reactive<{
|
||||
password: string
|
||||
password_confirm: string
|
||||
}>({
|
||||
password: '',
|
||||
password_confirm: ''
|
||||
})
|
||||
|
||||
// 手机和验证码
|
||||
const mobile = ref<string>('')
|
||||
const code = ref<string>('')
|
||||
|
||||
onLoad((args) => {
|
||||
mobile.value = args.mobile || ''
|
||||
code.value = args.code || ''
|
||||
})
|
||||
|
||||
const SetPassword = {
|
||||
/**
|
||||
* 确认密码
|
||||
*/
|
||||
handleToConfirm: async () => {
|
||||
if (!mobile) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '手机号异常，请重新操作',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '验证码异常，请重新操作',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!model.password) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '请输入密码',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (model.password !== model.password_confirm) {
|
||||
toast.show({
|
||||
iconClass: 'info-circle',
|
||||
msg: '两次输入的密码不一致',
|
||||
direction: 'vertical'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
await resetPassword({
|
||||
mobile: mobile.value,
|
||||
code: code.value,
|
||||
password: model.password,
|
||||
password_confirm: model.password_confirm
|
||||
})
|
||||
|
||||
showEditSuccessPopup.value = true
|
||||
|
||||
// const userStore = useUserStore()
|
||||
// await userStore.logout()
|
||||
// if (!userStore.isLoggedIn) {
|
||||
// toast.info('退出成功')
|
||||
// router.redirectTo('/pages/login/login')
|
||||
// }
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user