470 lines
14 KiB
Vue
470 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import {useMessage} from "wot-design-uni";
|
|
import {useConfigStore, useUserStore} from "@/store";
|
|
import ChooseLanguage from "./components/choose-language/choose-language.vue";
|
|
import Logout from "./components/log-out/log-out.vue";
|
|
import PasswordDialogs from "./components/password-dialogs/password-dialogs.vue";
|
|
import Config from "@/config";
|
|
import {appUserLogOffPost, appUserEditLoginPwdPost, appUserForgetPwdPost} from "@/service";
|
|
import { setPayPwd, editPayPwd, forgetPayPwd } from "@/pages-user/service";
|
|
import { SmsType } from "@/constant/enums";
|
|
import { z } from "zod";
|
|
import useGetMsgCode from "@/hooks/useGetMsgCode";
|
|
|
|
const {t} = useI18n();
|
|
const {locale} = useI18n();
|
|
const userStore = useUserStore();
|
|
const configStore = useConfigStore()
|
|
const message = useMessage();
|
|
const chooseLanguageRef = ref<InstanceType<typeof ChooseLanguage>>()
|
|
const logoutRef = ref<InstanceType<typeof Logout>>()
|
|
const currentLanguageLabel = computed(() => (locale.value === 'en' ? 'English' : '中文'))
|
|
const { isSend, getMsgCode } = useGetMsgCode()
|
|
|
|
const showLoginPwdPopup = ref(false)
|
|
const showLoginPwdForgetPopup = ref(false)
|
|
const showPayPwdPopup = ref(false)
|
|
const showPayPwdForgetPopup = ref(false)
|
|
const payPwdMode = ref<'set' | 'change'>('set')
|
|
|
|
const loginPwdForm = ref({
|
|
oldLoginPwd: '',
|
|
newLoginPwd: '',
|
|
confirmPwd: '',
|
|
})
|
|
|
|
const loginPwdSchema = computed(() =>
|
|
z
|
|
.object({
|
|
oldLoginPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-old-password') }),
|
|
newLoginPwd: z
|
|
.string()
|
|
.min(8, { message: t('pages-user.pay-password.password-length-limit') })
|
|
.max(16, { message: t('pages-user.pay-password.password-length-limit') }),
|
|
confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
|
|
})
|
|
.refine((data) => data.newLoginPwd === data.confirmPwd, {
|
|
path: ['confirmPwd'],
|
|
message: t('pages-user.pay-password.two-passwords-inconsistent'),
|
|
})
|
|
)
|
|
|
|
function validateBySchema(schema: z.ZodTypeAny, data: any) {
|
|
const res = schema.safeParse(data)
|
|
if (!res.success) {
|
|
const errors = res.error.flatten().fieldErrors
|
|
const first = Object.values(errors).find((arr) => Array.isArray(arr) && arr.length)?.[0]
|
|
if (first) uni.showToast({ title: String(first), icon: 'none' })
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
async function submitLoginPwd() {
|
|
if (!validateBySchema(loginPwdSchema.value, loginPwdForm.value)) return
|
|
await appUserEditLoginPwdPost({ body: { ...loginPwdForm.value } })
|
|
uni.showToast({ title: t('pages-user.password.change-password-successfully'), icon: 'none' })
|
|
showLoginPwdPopup.value = false
|
|
loginPwdForm.value = { oldLoginPwd: '', newLoginPwd: '', confirmPwd: '' }
|
|
setTimeout(() => {
|
|
userStore.clear()
|
|
uni.navigateTo({ url: Config.loginPath })
|
|
}, 1000)
|
|
}
|
|
|
|
const loginPwdForgetForm = ref({
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
confirmPwd: '',
|
|
newLoginPwd: '',
|
|
})
|
|
|
|
const loginPwdForgetSchema = computed(() =>
|
|
z
|
|
.object({
|
|
captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
|
|
confirmPwd: z
|
|
.string()
|
|
.min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
|
|
.regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
|
|
newLoginPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
|
|
})
|
|
.refine((data) => data.confirmPwd === data.newLoginPwd, {
|
|
path: ['newLoginPwd'],
|
|
message: t('pages-user.pay-password.two-passwords-inconsistent'),
|
|
})
|
|
)
|
|
|
|
function openLoginPwdPopup() {
|
|
showLoginPwdPopup.value = true
|
|
}
|
|
|
|
function openPayPwdPopup() {
|
|
payPwdMode.value = userStore.userInfo?.payPwd ? 'change' : 'set'
|
|
showPayPwdPopup.value = true
|
|
}
|
|
|
|
function requestLoginForgetCode() {
|
|
if (isSend.value > 0) return
|
|
getMsgCode({
|
|
type: SmsType.USER_FORGET_PASSWORD,
|
|
phone: loginPwdForgetForm.value.phone,
|
|
areaCode: loginPwdForgetForm.value.areaCode,
|
|
})
|
|
}
|
|
|
|
async function submitLoginPwdForget() {
|
|
if (!validateBySchema(loginPwdForgetSchema.value, loginPwdForgetForm.value)) return
|
|
await appUserForgetPwdPost({ body: { ...loginPwdForgetForm.value } })
|
|
uni.showToast({ title: t('pages-user.password.forget-password-successfully'), icon: 'none' })
|
|
await userStore.getUserInfo()
|
|
showLoginPwdForgetPopup.value = false
|
|
loginPwdForgetForm.value = {
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
confirmPwd: '',
|
|
newLoginPwd: '',
|
|
}
|
|
}
|
|
|
|
const payPwdSetForm = ref({
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
payPwd: '',
|
|
confirmPwd: '',
|
|
})
|
|
|
|
const payPwdSetSchema = computed(() =>
|
|
z
|
|
.object({
|
|
captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
|
|
payPwd: z
|
|
.string()
|
|
.min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
|
|
.regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
|
|
confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
|
|
})
|
|
.refine((data) => data.payPwd === data.confirmPwd, {
|
|
path: ['confirmPwd'],
|
|
message: t('pages-user.pay-password.two-passwords-inconsistent'),
|
|
})
|
|
)
|
|
|
|
function requestPaySetCode() {
|
|
if (isSend.value > 0) return
|
|
getMsgCode({
|
|
type: SmsType.USER_SET_PAYMENT_PASSWORD,
|
|
phone: payPwdSetForm.value.phone,
|
|
areaCode: payPwdSetForm.value.areaCode,
|
|
})
|
|
}
|
|
|
|
async function submitPayPwdSet() {
|
|
if (!validateBySchema(payPwdSetSchema.value, payPwdSetForm.value)) return
|
|
await setPayPwd(payPwdSetForm.value as any)
|
|
uni.showToast({ title: t('pages-user.pay-password.set-payment-password-successfully'), icon: 'none' })
|
|
await userStore.getUserInfo()
|
|
showPayPwdPopup.value = false
|
|
payPwdSetForm.value = {
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
payPwd: '',
|
|
confirmPwd: '',
|
|
}
|
|
}
|
|
|
|
const payPwdChangeForm = ref({
|
|
oldPayPwd: '',
|
|
newPayPwd: '',
|
|
confirmPwd: '',
|
|
})
|
|
|
|
const payPwdChangeSchema = computed(() =>
|
|
z
|
|
.object({
|
|
oldPayPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-old-password') }),
|
|
newPayPwd: z
|
|
.string()
|
|
.min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
|
|
.regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
|
|
confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
|
|
})
|
|
.refine((data) => data.newPayPwd === data.confirmPwd, {
|
|
path: ['confirmPwd'],
|
|
message: t('pages-user.pay-password.two-passwords-inconsistent'),
|
|
})
|
|
)
|
|
|
|
async function submitPayPwdChange() {
|
|
if (!validateBySchema(payPwdChangeSchema.value, payPwdChangeForm.value)) return
|
|
await editPayPwd(payPwdChangeForm.value as any)
|
|
uni.showToast({ title: t('pages-user.pay-password.change-payment-password-successfully'), icon: 'none' })
|
|
await userStore.getUserInfo()
|
|
showPayPwdPopup.value = false
|
|
payPwdChangeForm.value = { oldPayPwd: '', newPayPwd: '', confirmPwd: '' }
|
|
}
|
|
|
|
const payPwdForgetForm = ref({
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
payPwd: '',
|
|
confirmPwd: '',
|
|
})
|
|
|
|
const payPwdForgetSchema = computed(() =>
|
|
z
|
|
.object({
|
|
captcha: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-verification-code') }),
|
|
payPwd: z
|
|
.string()
|
|
.min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password') })
|
|
.regex(/^\d{6}$/, { message: t('pages-user.pay-password.enter-6-digit-password') }),
|
|
confirmPwd: z.string().min(1, { message: t('pages-user.pay-password.input-placeholder.enter-new-password-again') }),
|
|
})
|
|
.refine((data) => data.payPwd === data.confirmPwd, {
|
|
path: ['confirmPwd'],
|
|
message: t('pages-user.pay-password.two-passwords-inconsistent'),
|
|
})
|
|
)
|
|
|
|
function requestPayForgetCode() {
|
|
if (isSend.value > 0) return
|
|
getMsgCode({
|
|
type: SmsType.USER_FORGET_PAYMENT_PASSWORD,
|
|
phone: payPwdForgetForm.value.phone,
|
|
areaCode: payPwdForgetForm.value.areaCode,
|
|
})
|
|
}
|
|
|
|
async function submitPayPwdForget() {
|
|
if (!validateBySchema(payPwdForgetSchema.value, payPwdForgetForm.value)) return
|
|
await forgetPayPwd(payPwdForgetForm.value as any)
|
|
uni.showToast({ title: t('pages-user.pay-password.forget-payment-password-successfully'), icon: 'none' })
|
|
await userStore.getUserInfo()
|
|
showPayPwdForgetPopup.value = false
|
|
payPwdForgetForm.value = {
|
|
areaCode: userStore.userInfo?.areaCode || '',
|
|
phone: userStore.userInfo?.phone || '',
|
|
captcha: '',
|
|
payPwd: '',
|
|
confirmPwd: '',
|
|
}
|
|
}
|
|
|
|
function handleChooseLanguage() {
|
|
if (chooseLanguageRef.value) {
|
|
chooseLanguageRef.value.init()
|
|
}
|
|
}
|
|
|
|
|
|
function navigateTo(url: string) {
|
|
uni.navigateTo({url});
|
|
}
|
|
|
|
|
|
function handleSetOrUpdatePassword() {
|
|
openPayPwdPopup()
|
|
}
|
|
|
|
function handleLogout() {
|
|
if (logoutRef.value) {
|
|
logoutRef.value.init()
|
|
}
|
|
}
|
|
|
|
function handleLogoutAccount() {
|
|
message
|
|
.confirm({
|
|
msg: t('pages-user.setting.cancelAccountConfirm'),
|
|
title: t('common.prompt.system-prompt'),
|
|
cancelButtonText: t('common.close'),
|
|
confirmButtonText: t('common.confirm'),
|
|
confirmButtonProps: {
|
|
customClass: '!bg-#000'
|
|
}
|
|
})
|
|
.then(() => {
|
|
appUserLogOffPost({
|
|
body: {
|
|
userPort: 1,
|
|
}
|
|
}).then(res=> {
|
|
uni.showToast({
|
|
title: t('pages-user.setting.cancelAccountSuccess'),
|
|
icon: 'none',
|
|
})
|
|
userStore.clear()
|
|
uni.switchTab({
|
|
url: Config.indexPath,
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="setting-root">
|
|
<navbar :title="t('navbar-settings')"/>
|
|
<view class="setting-page">
|
|
<view class="setting-card">
|
|
<view
|
|
class="setting-row setting-row--border"
|
|
@click="openLoginPwdPopup"
|
|
>
|
|
<text class="setting-row__label">{{ t("pages-user.setting.modification") }}</text>
|
|
<image src="@img/chef/100202.png" class="setting-row__arrow"></image>
|
|
</view>
|
|
|
|
<view class="setting-row" @click="handleSetOrUpdatePassword">
|
|
<text class="setting-row__label">{{ t("pages-user.setting.payPwd") }}</text>
|
|
<view class="setting-row__right">
|
|
<text class="setting-row__value">{{ t('pages.mine.set') }}</text>
|
|
<image src="@img/chef/100202.png" class="setting-row__arrow"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="setting-card setting-card--gap">
|
|
<view class="setting-row" @click="handleChooseLanguage">
|
|
<text class="setting-row__label">{{ t("pages-user.setting.language") }}</text>
|
|
<view class="setting-row__right">
|
|
<text class="setting-row__value">{{ currentLanguageLabel }}</text>
|
|
<image src="@img/chef/100202.png" class="setting-row__arrow"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="setting-card setting-card--gap">
|
|
<view class="setting-row" @click="handleLogoutAccount">
|
|
<text class="setting-row__label setting-row__label--strong">{{ t('pages-user.setting.cancelAccount') }}</text>
|
|
<!-- <image src="@img/chef/100202.png" class="setting-row__arrow"></image> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="logout-actions">
|
|
<wd-button custom-class="logout-btn" block @click="handleLogout">
|
|
{{ t('pages-user.setting.logout') }}
|
|
</wd-button>
|
|
</view>
|
|
</view>
|
|
|
|
<choose-language ref="chooseLanguageRef"/>
|
|
<logout ref="logoutRef"/>
|
|
<password-dialogs
|
|
:t="t"
|
|
:is-send="isSend"
|
|
:pay-pwd-mode="payPwdMode"
|
|
:show-login-pwd-popup="showLoginPwdPopup"
|
|
:show-login-pwd-forget-popup="showLoginPwdForgetPopup"
|
|
:show-pay-pwd-popup="showPayPwdPopup"
|
|
:show-pay-pwd-forget-popup="showPayPwdForgetPopup"
|
|
:login-pwd-form="loginPwdForm"
|
|
:login-pwd-forget-form="loginPwdForgetForm"
|
|
:pay-pwd-set-form="payPwdSetForm"
|
|
:pay-pwd-change-form="payPwdChangeForm"
|
|
:pay-pwd-forget-form="payPwdForgetForm"
|
|
@update:show-login-pwd-popup="showLoginPwdPopup = $event"
|
|
@update:show-login-pwd-forget-popup="showLoginPwdForgetPopup = $event"
|
|
@update:show-pay-pwd-popup="showPayPwdPopup = $event"
|
|
@update:show-pay-pwd-forget-popup="showPayPwdForgetPopup = $event"
|
|
@submit-login-pwd="submitLoginPwd"
|
|
@submit-login-pwd-forget="submitLoginPwdForget"
|
|
@submit-pay-pwd-set="submitPayPwdSet"
|
|
@submit-pay-pwd-change="submitPayPwdChange"
|
|
@submit-pay-pwd-forget="submitPayPwdForget"
|
|
@request-login-forget-code="requestLoginForgetCode"
|
|
@request-pay-set-code="requestPaySetCode"
|
|
@request-pay-forget-code="requestPayForgetCode"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.setting-root {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.setting-page {
|
|
padding: 20rpx 30rpx calc(160rpx + env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.setting-card {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.setting-card--gap {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.setting-row {
|
|
height: 102rpx;
|
|
padding: 0 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&--border {
|
|
border-bottom: 1rpx solid #ededed;
|
|
}
|
|
|
|
&__label {
|
|
font-size: 34rpx;
|
|
line-height: 34rpx;
|
|
color: #2c2c2c;
|
|
// font-weight: 700;
|
|
}
|
|
|
|
&__label--strong {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
&__value {
|
|
font-size: 30rpx;
|
|
line-height: 30rpx;
|
|
color: #2c2c2c;
|
|
// font-weight: 600;
|
|
}
|
|
|
|
&__arrow {
|
|
width: 22rpx;
|
|
height: 30rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.logout-actions {
|
|
position: fixed;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
bottom: calc(36rpx + env(safe-area-inset-bottom));
|
|
z-index: 20;
|
|
}
|
|
|
|
:deep(.logout-btn) {
|
|
height: 108rpx !important;
|
|
border-radius: 22rpx !important;
|
|
background: #111 !important;
|
|
color: #fff !important;
|
|
font-size: 36rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
</style>
|