432 lines
8.9 KiB
Vue
432 lines
8.9 KiB
Vue
<template>
|
||
<view class="user-page page-container">
|
||
<!-- 用户信息卡片 -->
|
||
<view class="user-card cyber-card">
|
||
<image :src="user.avatar" class="user-avatar" />
|
||
<view class="user-info">
|
||
<text class="user-name">{{ user.nickname }}</text>
|
||
<view class="vip-badge">
|
||
<text class="vip-icon">👑</text>
|
||
<text class="vip-text">{{ user.vipName }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="setting-btn" @click="goSetting">
|
||
<text class="setting-icon">⚙️</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 资产信息 -->
|
||
<view class="assets-card cyber-card">
|
||
<view class="asset-item" @click="goWallet">
|
||
<text class="asset-value neon-text">{{ user.balance }}</text>
|
||
<text class="asset-label">余额</text>
|
||
</view>
|
||
<view class="asset-divider"></view>
|
||
<view class="asset-item" @click="goPoints">
|
||
<text class="asset-value neon-text">{{ user.points }}</text>
|
||
<text class="asset-label">积分</text>
|
||
</view>
|
||
<view class="asset-divider"></view>
|
||
<view class="asset-item" @click="goCoupons">
|
||
<text class="asset-value neon-text">{{ userStats.couponCount }}</text>
|
||
<text class="asset-label">优惠券</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单统计 -->
|
||
<view class="order-stats cyber-card">
|
||
<view class="stats-header">
|
||
<text class="stats-title">我的订单</text>
|
||
<text class="stats-more" @click="goAllOrders">全部 ></text>
|
||
</view>
|
||
|
||
<view class="stats-grid">
|
||
<view class="stat-item" @click="goOrders(0)">
|
||
<text class="stat-icon">💳</text>
|
||
<text class="stat-name">待支付</text>
|
||
<view v-if="userStats.orderCount.waitPay > 0" class="stat-badge">
|
||
{{ userStats.orderCount.waitPay }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stat-item" @click="goOrders(1)">
|
||
<text class="stat-icon">👀</text>
|
||
<text class="stat-name">待接单</text>
|
||
<view v-if="userStats.orderCount.waitAccept > 0" class="stat-badge">
|
||
{{ userStats.orderCount.waitAccept }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stat-item" @click="goOrders(3)">
|
||
<text class="stat-icon">🎮</text>
|
||
<text class="stat-name">进行中</text>
|
||
<view v-if="userStats.orderCount.inProgress > 0" class="stat-badge">
|
||
{{ userStats.orderCount.inProgress }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stat-item" @click="goOrders(4)">
|
||
<text class="stat-icon">⭐</text>
|
||
<text class="stat-name">待确认</text>
|
||
<view v-if="userStats.orderCount.waitConfirm > 0" class="stat-badge">
|
||
{{ userStats.orderCount.waitConfirm }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stat-item" @click="goOrders(5)">
|
||
<text class="stat-icon">✨</text>
|
||
<text class="stat-name">已完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能菜单 -->
|
||
<view class="menu-card cyber-card">
|
||
<view class="menu-item" @click="goFavorites">
|
||
<text class="menu-icon">❤️</text>
|
||
<text class="menu-name">我的收藏</text>
|
||
<text class="menu-extra">{{ userStats.favoriteCount }}</text>
|
||
<text class="menu-arrow">→</text>
|
||
</view>
|
||
|
||
<view class="menu-item" @click="goMessages">
|
||
<text class="menu-icon">💬</text>
|
||
<text class="menu-name">消息中心</text>
|
||
<view v-if="userStats.messageCount > 0" class="menu-badge">
|
||
{{ userStats.messageCount }}
|
||
</view>
|
||
<text class="menu-arrow">→</text>
|
||
</view>
|
||
|
||
<view class="menu-item" @click="goHelp">
|
||
<text class="menu-icon">❓</text>
|
||
<text class="menu-name">帮助中心</text>
|
||
<text class="menu-arrow">→</text>
|
||
</view>
|
||
|
||
<view class="menu-item" @click="goAbout">
|
||
<text class="menu-icon">ℹ️</text>
|
||
<text class="menu-name">关于我们</text>
|
||
<text class="menu-arrow">→</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部装饰 -->
|
||
<view class="bottom-decoration">
|
||
<view class="decoration-line"></view>
|
||
<text class="decoration-text">// GAME SERVICE v1.0.0 //</text>
|
||
<view class="decoration-line"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { currentUser, userStats } from '../../mock'
|
||
|
||
const user = ref(currentUser)
|
||
|
||
const goSetting = () => {
|
||
uni.showToast({ title: '设置', icon: 'none' })
|
||
}
|
||
|
||
const goWallet = () => {
|
||
uni.showToast({ title: '我的余额', icon: 'none' })
|
||
}
|
||
|
||
const goPoints = () => {
|
||
uni.showToast({ title: '我的积分', icon: 'none' })
|
||
}
|
||
|
||
const goCoupons = () => {
|
||
uni.showToast({ title: '优惠券', icon: 'none' })
|
||
}
|
||
|
||
const goAllOrders = () => {
|
||
uni.switchTab({
|
||
url: '/pages/order/list'
|
||
})
|
||
}
|
||
|
||
const goOrders = (status) => {
|
||
uni.navigateTo({
|
||
url: `/pages/order/list?status=${status}`
|
||
})
|
||
}
|
||
|
||
const goFavorites = () => {
|
||
uni.showToast({ title: '我的收藏', icon: 'none' })
|
||
}
|
||
|
||
const goMessages = () => {
|
||
uni.showToast({ title: '消息中心', icon: 'none' })
|
||
}
|
||
|
||
const goHelp = () => {
|
||
uni.showToast({ title: '帮助中心', icon: 'none' })
|
||
}
|
||
|
||
const goAbout = () => {
|
||
uni.showToast({ title: '关于我们', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-page {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.user-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28rpx;
|
||
padding: 40rpx 32rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
border: 3px solid rgba(0, 255, 255, 0.5);
|
||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.vip-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 6rpx 20rpx;
|
||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
|
||
border: 1px solid rgba(255, 215, 0, 0.5);
|
||
border-radius: 20rpx;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.vip-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.vip-text {
|
||
font-size: 22rpx;
|
||
color: #ffd700;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.setting-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(20, 25, 50, 0.6);
|
||
border: 1px solid rgba(0, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.setting-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.assets-card {
|
||
display: flex;
|
||
padding: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.asset-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.asset-value {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #00ffff;
|
||
}
|
||
|
||
.asset-label {
|
||
font-size: 24rpx;
|
||
color: #7a7e9d;
|
||
}
|
||
|
||
.asset-divider {
|
||
width: 1px;
|
||
background: linear-gradient(180deg,
|
||
transparent 0%,
|
||
rgba(0, 255, 255, 0.3) 50%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
.order-stats {
|
||
padding: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.stats-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.stats-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.stats-more {
|
||
font-size: 26rpx;
|
||
color: #00ffff;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.stat-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
.stat-name {
|
||
font-size: 24rpx;
|
||
color: #a0a4c4;
|
||
}
|
||
|
||
.stat-badge {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
min-width: 32rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
padding: 0 8rpx;
|
||
background: #ff3366;
|
||
border-radius: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
|
||
.menu-card {
|
||
padding: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 0;
|
||
border-bottom: 1px solid rgba(0, 255, 255, 0.1);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.menu-icon {
|
||
font-size: 40rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.menu-name {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.menu-extra {
|
||
font-size: 24rpx;
|
||
color: #7a7e9d;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.menu-badge {
|
||
min-width: 32rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
padding: 0 8rpx;
|
||
background: #ff3366;
|
||
border-radius: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 32rpx;
|
||
color: #7a7e9d;
|
||
}
|
||
|
||
.bottom-decoration {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
margin-top: 60rpx;
|
||
padding: 40rpx 0;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.decoration-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
rgba(122, 126, 157, 0.3) 50%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
.decoration-text {
|
||
font-size: 20rpx;
|
||
color: #7a7e9d;
|
||
letter-spacing: 2rpx;
|
||
font-family: monospace;
|
||
}
|
||
</style>
|