用户中心样式调整
This commit is contained in:
@@ -0,0 +1,464 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
type PayPwdMode = 'set' | 'change'
|
||||
|
||||
const props = defineProps<{
|
||||
t: (key: string) => string
|
||||
isSend: number
|
||||
payPwdMode: PayPwdMode
|
||||
showLoginPwdPopup: boolean
|
||||
showLoginPwdForgetPopup: boolean
|
||||
showPayPwdPopup: boolean
|
||||
showPayPwdForgetPopup: boolean
|
||||
loginPwdForm: { oldLoginPwd: string; newLoginPwd: string; confirmPwd: string }
|
||||
loginPwdForgetForm: { phone: string; captcha: string; newLoginPwd: string; confirmPwd: string }
|
||||
payPwdSetForm: { phone: string; captcha: string; payPwd: string; confirmPwd: string }
|
||||
payPwdChangeForm: { oldPayPwd: string; newPayPwd: string; confirmPwd: string }
|
||||
payPwdForgetForm: { phone: string; captcha: string; payPwd: string; confirmPwd: string }
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:showLoginPwdPopup', value: boolean): void
|
||||
(e: 'update:showLoginPwdForgetPopup', value: boolean): void
|
||||
(e: 'update:showPayPwdPopup', value: boolean): void
|
||||
(e: 'update:showPayPwdForgetPopup', value: boolean): void
|
||||
(e: 'submit-login-pwd'): void
|
||||
(e: 'submit-login-pwd-forget'): void
|
||||
(e: 'submit-pay-pwd-set'): void
|
||||
(e: 'submit-pay-pwd-change'): void
|
||||
(e: 'submit-pay-pwd-forget'): void
|
||||
(e: 'request-login-forget-code'): void
|
||||
(e: 'request-pay-set-code'): void
|
||||
(e: 'request-pay-forget-code'): void
|
||||
}>()
|
||||
|
||||
const loginPwdPopupVisible = computed({
|
||||
get: () => props.showLoginPwdPopup,
|
||||
set: (value: boolean) => emit('update:showLoginPwdPopup', value),
|
||||
})
|
||||
|
||||
const loginPwdForgetPopupVisible = computed({
|
||||
get: () => props.showLoginPwdForgetPopup,
|
||||
set: (value: boolean) => emit('update:showLoginPwdForgetPopup', value),
|
||||
})
|
||||
|
||||
const payPwdPopupVisible = computed({
|
||||
get: () => props.showPayPwdPopup,
|
||||
set: (value: boolean) => emit('update:showPayPwdPopup', value),
|
||||
})
|
||||
|
||||
const payPwdForgetPopupVisible = computed({
|
||||
get: () => props.showPayPwdForgetPopup,
|
||||
set: (value: boolean) => emit('update:showPayPwdForgetPopup', value),
|
||||
})
|
||||
|
||||
function openLoginPwdForget() {
|
||||
emit('update:showLoginPwdPopup', false)
|
||||
emit('update:showLoginPwdForgetPopup', true)
|
||||
}
|
||||
|
||||
function openPayPwdForget() {
|
||||
emit('update:showPayPwdPopup', false)
|
||||
emit('update:showPayPwdForgetPopup', true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<wd-popup
|
||||
v-model="loginPwdPopupVisible"
|
||||
:close-on-click-modal="false"
|
||||
position="bottom"
|
||||
custom-class="ios-popup-mask"
|
||||
>
|
||||
<view class="ios-dialog">
|
||||
<view class="ios-dialog__header">
|
||||
<view class="ios-dialog__title">{{ t('navbar-change-password') }}</view>
|
||||
<view class="ios-dialog__close" @click="emit('update:showLoginPwdPopup', false)">×</view>
|
||||
</view>
|
||||
<view class="ios-dialog__body">
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForm.oldLoginPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="20"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-old-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForm.newLoginPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="16"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForm.confirmPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="16"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
|
||||
/>
|
||||
<view class="ios-dialog__link-row">
|
||||
<text class="ios-dialog__link" @click="openLoginPwdForget">
|
||||
{{ t('navbar-forget-password') }}?
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-dialog__footer">
|
||||
<wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-login-pwd')">
|
||||
{{ t('common.confirm') }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<wd-popup
|
||||
v-model="loginPwdForgetPopupVisible"
|
||||
:close-on-click-modal="false"
|
||||
position="bottom"
|
||||
custom-class="ios-popup-mask"
|
||||
>
|
||||
<view class="ios-dialog">
|
||||
<view class="ios-dialog__header">
|
||||
<view class="ios-dialog__title">{{ t('navbar-forget-password') }}</view>
|
||||
<view class="ios-dialog__close" @click="emit('update:showLoginPwdForgetPopup', false)">×</view>
|
||||
</view>
|
||||
<view class="ios-dialog__body">
|
||||
<wd-input :model-value="loginPwdForgetForm.phone" disabled disabledColor="transparent" no-border />
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForgetForm.captcha"
|
||||
style="color:#000 !important;"
|
||||
no-border
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
|
||||
>
|
||||
<template #suffix>
|
||||
<wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-login-forget-code')">
|
||||
{{ isSend ? isSend + 'S' : t('common.obtain') }}
|
||||
</wd-button>
|
||||
</template>
|
||||
</wd-input>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForgetForm.newLoginPwd"
|
||||
style="color:#000 !important;"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="20"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="loginPwdForgetForm.confirmPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="20"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
|
||||
/>
|
||||
</view>
|
||||
<view class="ios-dialog__footer">
|
||||
<wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-login-pwd-forget')">
|
||||
{{ t('common.confirm') }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<wd-popup
|
||||
v-model="payPwdPopupVisible"
|
||||
:close-on-click-modal="false"
|
||||
position="bottom"
|
||||
custom-class="ios-popup-mask"
|
||||
>
|
||||
<view class="ios-dialog">
|
||||
<view class="ios-dialog__header">
|
||||
<view class="ios-dialog__title">
|
||||
{{ payPwdMode === 'set' ? t('navbar-set-payment-password') : t('navbar-change-payment-password') }}
|
||||
</view>
|
||||
<view class="ios-dialog__close" @click="emit('update:showPayPwdPopup', false)">×</view>
|
||||
</view>
|
||||
|
||||
<view class="ios-dialog__body" v-if="payPwdMode === 'set'">
|
||||
<wd-input :model-value="payPwdSetForm.phone" disabled disabledColor="transparent" no-border />
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdSetForm.captcha"
|
||||
no-border
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
|
||||
>
|
||||
<template #suffix>
|
||||
<wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-pay-set-code')">
|
||||
{{ isSend ? isSend + 'S' : t('common.obtain') }}
|
||||
</wd-button>
|
||||
</template>
|
||||
</wd-input>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdSetForm.payPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdSetForm.confirmPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="ios-dialog__body" v-else>
|
||||
<wd-input
|
||||
v-model.trim="payPwdChangeForm.oldPayPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-old-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdChangeForm.newPayPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdChangeForm.confirmPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
|
||||
/>
|
||||
<view class="ios-dialog__link-row">
|
||||
<text class="ios-dialog__link" @click="openPayPwdForget">
|
||||
{{ t('navbar-forget-password') }}?
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="ios-dialog__footer">
|
||||
<wd-button
|
||||
custom-class="ios-dialog__btn ios-dialog__btn--primary"
|
||||
block
|
||||
@click="payPwdMode === 'set' ? emit('submit-pay-pwd-set') : emit('submit-pay-pwd-change')"
|
||||
>
|
||||
{{ t('common.confirm') }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<wd-popup
|
||||
v-model="payPwdForgetPopupVisible"
|
||||
:close-on-click-modal="false"
|
||||
position="bottom"
|
||||
custom-class="ios-popup-mask"
|
||||
>
|
||||
<view class="ios-dialog">
|
||||
<view class="ios-dialog__header">
|
||||
<view class="ios-dialog__title">{{ t('navbar-forget-payment-password') }}</view>
|
||||
<view class="ios-dialog__close" @click="emit('update:showPayPwdForgetPopup', false)">×</view>
|
||||
</view>
|
||||
<view class="ios-dialog__body">
|
||||
<wd-input :model-value="payPwdForgetForm.phone" disabled disabledColor="transparent" no-border />
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdForgetForm.captcha"
|
||||
style="color:#000 !important;"
|
||||
no-border
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
|
||||
>
|
||||
<template #suffix>
|
||||
<wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-pay-forget-code')">
|
||||
{{ isSend ? isSend + 'S' : t('common.obtain') }}
|
||||
</wd-button>
|
||||
</template>
|
||||
</wd-input>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdForgetForm.payPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
|
||||
/>
|
||||
<view class="ios-dialog__divider" />
|
||||
<wd-input
|
||||
v-model.trim="payPwdForgetForm.confirmPwd"
|
||||
no-border
|
||||
show-password
|
||||
clearable
|
||||
:maxlength="6"
|
||||
:placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
|
||||
/>
|
||||
</view>
|
||||
<view class="ios-dialog__footer">
|
||||
<wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-pay-pwd-forget')">
|
||||
{{ t('common.confirm') }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ios-dialog {
|
||||
width: 100vw;
|
||||
max-height: 88vh;
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ios-dialog__header {
|
||||
height: 96rpx;
|
||||
padding: 0 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ios-dialog__title {
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
line-height: 44rpx;
|
||||
color: #1c1c1e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ios-dialog__close {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
line-height: 44rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.ios-dialog__body {
|
||||
margin: 0 24rpx 12rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ios-dialog__divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ios-dialog__link-row {
|
||||
padding: 12rpx 8rpx 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ios-dialog__link {
|
||||
font-size: 34rpx;
|
||||
line-height: 34rpx;
|
||||
color: #3c3c43;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ios-dialog__footer {
|
||||
padding: 210rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
:deep(.ios-dialog__btn) {
|
||||
height: 88rpx !important;
|
||||
border-radius: 999rpx !important;
|
||||
font-size: 34rpx !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
:deep(.ios-dialog__btn--primary) {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.ios-code-btn) {
|
||||
min-width: 92rpx !important;
|
||||
height: 52rpx !important;
|
||||
padding: 0 20rpx !important;
|
||||
border-radius: 16rpx !important;
|
||||
font-size: 26rpx !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 52rpx !important;
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:deep(.ios-code-btn.is-disabled) {
|
||||
background: #8e8e93 !important;
|
||||
color: #fff !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
:deep(.wd-input) {
|
||||
height: 84rpx !important;
|
||||
border: 1rpx solid #dedede !important;
|
||||
border-radius: 24rpx !important;
|
||||
padding: 0 24rpx !important;
|
||||
box-sizing: border-box !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
:deep(.wd-input__inner) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.wd-input__suffix) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
:deep(.ios-popup-mask) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.ios-popup-mask.wd-popup--bottom) {
|
||||
border-radius: 40rpx 40rpx 0 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,260 @@
|
||||
<script setup lang="ts">
|
||||
import {useMessage} from "wot-design-uni";
|
||||
import {useConfigStore, useUserStore} from "@/store";
|
||||
import {conversionMobile} from "@/utils";
|
||||
import {Agreement} from "@/constant/enums";
|
||||
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} from "@/service";
|
||||
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 currentVersion = ref(configStore.appVersion)
|
||||
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) {
|
||||
@@ -30,10 +269,7 @@ function navigateTo(url: string) {
|
||||
|
||||
|
||||
function handleSetOrUpdatePassword() {
|
||||
if (userStore.userInfo?.payPwd) {
|
||||
return navigateTo(`/pages-user/pages/pay-password/change/index`)
|
||||
}
|
||||
navigateTo(`/pages-user/pages/pay-password/set/index`)
|
||||
openPayPwdPopup()
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
@@ -74,76 +310,160 @@ function handleLogoutAccount() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<navbar :title="t('navbar-settings')"/>
|
||||
<view class="pt-20rpx">
|
||||
<view class="text-30-bold bg-#fff">
|
||||
<view
|
||||
class="flex justify-between items-center border-bottom font-bold p-[40rpx+20rpx]"
|
||||
@click="navigateTo('/pages-user/pages/password/change/index')"
|
||||
>
|
||||
<view>{{ t("pages-user.setting.modification") }}</view>
|
||||
<image
|
||||
src="@img/chef/100202.png"
|
||||
class="shrink-0 ml-16rpx w-22rpx h-30rpx"
|
||||
></image>
|
||||
</view>
|
||||
<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
|
||||
@click="
|
||||
handleSetOrUpdatePassword
|
||||
"
|
||||
class="flex justify-between items-center p-[40rpx+20rpx] border-bottom"
|
||||
>
|
||||
<view>{{ t("pages-user.setting.payPwd") }}</view>
|
||||
<view class="flex items-center">
|
||||
<text>{{ t('navbar-settings') }}</text>
|
||||
<image
|
||||
src="@img/chef/100202.png"
|
||||
class="shrink-0 ml-16rpx w-22rpx h-30rpx"
|
||||
></image>
|
||||
<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="flex justify-between items-center p-[40rpx+20rpx] border-bottom before:!bg-common"
|
||||
@click="handleChooseLanguage"
|
||||
>
|
||||
<view>{{ t("pages-user.setting.language") }}</view>
|
||||
<view class="flex items-center">
|
||||
<text>{{ locale === 'en' ? 'English' : '中文'}}</text>
|
||||
<image
|
||||
src="@img/chef/100202.png"
|
||||
class="shrink-0 ml-16rpx w-22rpx h-30rpx"
|
||||
></image>
|
||||
<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="flex justify-between items-center font-bold p-[40rpx+20rpx]"
|
||||
@click="handleLogoutAccount"
|
||||
>
|
||||
<view>{{ t('pages-user.setting.cancelAccount') }}</view>
|
||||
<image
|
||||
src="@img/chef/100202.png"
|
||||
class="shrink-0 ml-16rpx w-22rpx h-30rpx"
|
||||
></image>
|
||||
<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>
|
||||
|
||||
<view class="px-30rpx mt-180rpx">
|
||||
<wd-button
|
||||
custom-class="!h-108rpx !text-36rpx !text-white !bg-#14181B !rounded-16rpx"
|
||||
block
|
||||
@click="handleLogout"
|
||||
>
|
||||
{{ t('pages-user.setting.logout') }}
|
||||
</wd-button>
|
||||
|
||||
</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></style>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user