104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { ACCOUNT_SECURITY_ITEMS } from '@/constants/account-security'
|
||
import type { AccountSecurityItem } from '@/types/account-security'
|
||
import { navigateBackWithFallback } from '@/utils/navigate-back'
|
||
|
||
const securityItems = ACCOUNT_SECURITY_ITEMS
|
||
|
||
function handleBack() {
|
||
navigateBackWithFallback('/pages/personal-center/index')
|
||
}
|
||
|
||
function handleItemTap(item: AccountSecurityItem) {
|
||
if (item.key === 'password') {
|
||
uni.navigateTo({ url: '/pages/personal-center/change-password/index' })
|
||
return
|
||
}
|
||
|
||
if (item.key === 'phone') {
|
||
uni.navigateTo({ url: '/pages/personal-center/bind-phone/index' })
|
||
return
|
||
}
|
||
|
||
if (item.key === 'email') {
|
||
uni.navigateTo({ url: '/pages/personal-center/bind-email/index' })
|
||
return
|
||
}
|
||
|
||
uni.showToast({ title: `${item.title}开发中`, icon: 'none' })
|
||
}
|
||
|
||
function handleDeleteAccount() {
|
||
uni.showModal({
|
||
title: '注销账号',
|
||
content: '注销后账号数据将无法恢复，确认继续吗？',
|
||
confirmText: '确认注销',
|
||
confirmColor: '#2563EB',
|
||
success: (res) => {
|
||
if (res.confirm)
|
||
uni.showToast({ title: '注销申请已提交', icon: 'none' })
|
||
},
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="account-security">
|
||
<view class="account-security__navbar">
|
||
<view
|
||
class="account-security__back"
|
||
@tap="handleBack"
|
||
>
|
||
<image
|
||
class="account-security__back-icon"
|
||
src="/static/icons/icon-back.svg"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<text class="account-security__navbar-title">
|
||
账号安全
|
||
</text>
|
||
<view class="account-security__navbar-placeholder" />
|
||
</view>
|
||
|
||
<view class="account-security__content">
|
||
<view class="account-security__list">
|
||
<view
|
||
v-for="item in securityItems"
|
||
:key="item.key"
|
||
class="account-security__item"
|
||
@tap="handleItemTap(item)"
|
||
>
|
||
<view class="account-security__item-main">
|
||
<text class="account-security__item-title">
|
||
{{ item.title }}
|
||
</text>
|
||
<text class="account-security__item-subtitle">
|
||
{{ item.subtitle }}
|
||
</text>
|
||
</view>
|
||
<view class="account-security__item-side">
|
||
<text class="account-security__item-status">
|
||
{{ item.status }}
|
||
</text>
|
||
<text class="account-security__item-arrow">
|
||
›
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="account-security__delete-btn"
|
||
@tap="handleDeleteAccount"
|
||
>
|
||
注销账号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import './index.scss';
|
||
</style>
|