170 lines
3.3 KiB
Vue
170 lines
3.3 KiB
Vue
<template>
|
||
<view class="about-page">
|
||
<!-- APP信息 -->
|
||
<view class="app-info">
|
||
<image class="logo" src="/static/logo.png" mode="aspectFit" />
|
||
<text class="version">{{ t('about.version', { version: appVersion }) }}</text>
|
||
</view>
|
||
|
||
<!-- 注销账号按钮（已登录时显示） -->
|
||
<view v-if="userStore.isLoggedIn" class="delete-section">
|
||
<view class="delete-btn" @click="showDeleteConfirm = true">
|
||
<text class="delete-text">{{ t('about.deleteAccount') }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 注销确认弹窗 -->
|
||
<view class="popup-mask" v-if="showDeleteConfirm" @click="showDeleteConfirm = false">
|
||
<view class="popup-content" @click.stop>
|
||
<text class="popup-title">{{ t('about.deleteConfirm') }}</text>
|
||
<view class="popup-actions">
|
||
<view class="btn cancel-btn" @click="showDeleteConfirm = false">
|
||
<text class="btn-text cancel-text">{{ t('common.cancel') }}</text>
|
||
</view>
|
||
<view class="btn confirm-btn" @click="handleDelete">
|
||
<text class="btn-text confirm-text">{{ t('common.confirm') }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useUserStore } from '../../stores/user.js'
|
||
|
||
const { t } = useI18n()
|
||
const userStore = useUserStore()
|
||
|
||
// 从manifest读取版本号
|
||
const appVersion = ref('1.0.0')
|
||
|
||
const showDeleteConfirm = ref(false)
|
||
|
||
// 注销账号
|
||
async function handleDelete() {
|
||
showDeleteConfirm.value = false
|
||
try {
|
||
await userStore.deleteAccount()
|
||
uni.showToast({ title: t('about.deleteSuccess'), icon: 'none' })
|
||
// 返回首页
|
||
uni.switchTab({ url: '/pages/index/index' })
|
||
} catch (e) {
|
||
/* 错误已统一处理 */
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.about-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.app-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 80rpx 0 40rpx;
|
||
}
|
||
|
||
.logo {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.version {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.delete-section {
|
||
width: 100%;
|
||
padding: 60rpx 24rpx 0;
|
||
}
|
||
|
||
.delete-btn {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.delete-text {
|
||
font-size: 30rpx;
|
||
color: #ff3b30;
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.popup-content {
|
||
width: 600rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
display: block;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.popup-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background-color: #ff3b30;
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.cancel-text {
|
||
color: #666;
|
||
}
|
||
|
||
.confirm-text {
|
||
color: #ffffff;
|
||
}
|
||
</style>
|