173 lines
4.5 KiB
Vue
173 lines
4.5 KiB
Vue
<template>
|
||
<view class="mine-page">
|
||
<!-- 用户信息 -->
|
||
<view class="user-card">
|
||
<image class="user-card__avatar" :src="userStore.user?.avatar || '/static/logo.png'" mode="aspectFill" />
|
||
<view class="user-card__info">
|
||
<text class="user-card__name">{{ userStore.user?.nickname || '未登录' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能入口 -->
|
||
<view class="menu-group">
|
||
<view class="menu-item" @click="navigateTo('/pages/order/list')">
|
||
<text class="menu-item__label">我的订单</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="navigateTo('/pages/address/index')">
|
||
<text class="menu-item__label">收货地址</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="showQrCode = true">
|
||
<text class="menu-item__label">联系客服</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-group">
|
||
<view class="menu-item" @click="showAbout = true">
|
||
<text class="menu-item__label">关于我们</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="showAgreement('user')">
|
||
<text class="menu-item__label">用户协议</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @click="showAgreement('privacy')">
|
||
<text class="menu-item__label">隐私政策</text>
|
||
<text class="menu-item__arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 客服二维码弹窗 -->
|
||
<CustomerServiceBtn v-if="showQrCode" mode="qrcode" @close="showQrCode = false" />
|
||
|
||
<!-- 关于我们弹窗 -->
|
||
<view class="modal-mask" v-if="showAbout" @click="showAbout = false">
|
||
<view class="modal-popup" @click.stop>
|
||
<text class="modal-popup__title">关于我们</text>
|
||
<text class="modal-popup__content">珠宝商城 —— 专注珠宝零售，为您提供优质珠宝商品和贴心服务。</text>
|
||
<view class="modal-popup__close" @click="showAbout = false">关闭</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { useUserStore } from '../../store/user'
|
||
import CustomerServiceBtn from '../../components/CustomerServiceBtn.vue'
|
||
|
||
const userStore = useUserStore()
|
||
const showQrCode = ref(false)
|
||
const showAbout = ref(false)
|
||
|
||
onMounted(() => {
|
||
// 进入「我的」页面时拉取最新用户信息
|
||
userStore.fetchProfile()
|
||
})
|
||
|
||
function navigateTo(url: string) {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
function showAgreement(type: 'user' | 'privacy') {
|
||
const title = type === 'user' ? '用户协议' : '隐私政策'
|
||
uni.showModal({
|
||
title,
|
||
content: type === 'user'
|
||
? '欢迎使用珠宝商城小程序。使用本小程序即表示您同意遵守相关服务条款。'
|
||
: '我们重视您的隐私保护。我们仅收集必要的信息以提供服务，不会向第三方泄露您的个人信息。',
|
||
showCancel: false,
|
||
confirmText: '我知道了',
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mine-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
.user-card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #e4393c;
|
||
padding: 60rpx 32rpx 40rpx;
|
||
}
|
||
.user-card__avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||
background: #fff;
|
||
}
|
||
.user-card__info {
|
||
margin-left: 24rpx;
|
||
}
|
||
.user-card__name {
|
||
font-size: 34rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
.menu-group {
|
||
background: #fff;
|
||
margin-top: 16rpx;
|
||
}
|
||
.menu-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 28rpx 32rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.menu-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.menu-item__label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
.menu-item__arrow {
|
||
font-size: 32rpx;
|
||
color: #ccc;
|
||
}
|
||
.modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
.modal-popup {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
width: 560rpx;
|
||
}
|
||
.modal-popup__title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.modal-popup__content {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 44rpx;
|
||
display: block;
|
||
}
|
||
.modal-popup__close {
|
||
margin-top: 28rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
</style>
|