435 lines
9.9 KiB
Vue
435 lines
9.9 KiB
Vue
<template>
|
||
<view class="mine-page">
|
||
<!-- Custom Navbar -->
|
||
<view
|
||
class="nav-bar"
|
||
:style="{ paddingTop: navBarTop + 'px', height: navBarHeight + 'px' }"
|
||
>
|
||
<!-- <text class="nav-title">我的</text> -->
|
||
</view>
|
||
|
||
<scroll-view
|
||
scroll-y
|
||
class="content-scroll"
|
||
:style="{ paddingTop: navBarTop + navBarHeight + 'px' }"
|
||
>
|
||
<view class="content-wrap">
|
||
<!-- User Card -->
|
||
<view class="user-card" @tap="handleUserClick">
|
||
<view class="avatar-box">
|
||
<image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
|
||
<view class="red-badge"><text class="fire">🔥</text></view>
|
||
</view>
|
||
<view class="user-info">
|
||
<view class="row-1">
|
||
<text class="nickname">{{ userInfo.nickName }}</text>
|
||
<view class="vip-tag" v-if="isLoggedIn">
|
||
<text class="vip-text">VIP 祥瑞会员</text>
|
||
</view>
|
||
</view>
|
||
<view class="row-2" v-if="isLoggedIn">
|
||
<text class="arrow-icon">➤</text>
|
||
<text class="stats-text"
|
||
>已发送 <text class="num">3</text> 条新春祝福</text
|
||
>
|
||
</view>
|
||
<view class="row-2" v-else>
|
||
<text class="stats-text">点击登录解锁更多功能</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-arrow">›</view>
|
||
</view>
|
||
|
||
<!-- My Creations -->
|
||
<view class="section-title">我的创作</view>
|
||
<view class="menu-group">
|
||
<view class="menu-item" @tap="navTo('greetings')">
|
||
<view class="icon-box red-bg"><text>🧧</text></view>
|
||
<text class="menu-text">我的新春祝福</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @tap="navTo('fortune-record')">
|
||
<view class="icon-box orange-bg"><text>📹</text></view>
|
||
<text class="menu-text">我的新年运势</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @tap="navTo('avatar')">
|
||
<view class="icon-box pink-bg"><text>☺</text></view>
|
||
<text class="menu-text">我的新春头像</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @tap="navTo('wallpaper')">
|
||
<view class="icon-box yellow-bg"><text>🖼</text></view>
|
||
<text class="menu-text">我的新春壁纸</text>
|
||
<view class="new-badge">NEW</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- History -->
|
||
<!-- <view class="section-title">历史记录</view>
|
||
<view class="menu-group">
|
||
<view class="menu-item" @tap="navTo('history')">
|
||
<view class="icon-box gray-bg"><text>🕒</text></view>
|
||
<text class="menu-text">新春祝福记录</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @tap="navTo('archive')">
|
||
<view class="icon-box gray-bg"><text>📂</text></view>
|
||
<text class="menu-text">历年祝福存档</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- Other Actions -->
|
||
<view class="menu-group mt-30">
|
||
<button class="menu-item share-btn" open-type="share">
|
||
<view class="icon-left"><text class="share-icon">🔗</text></view>
|
||
<text class="menu-text">分享给好友</text>
|
||
<text class="arrow">›</text>
|
||
</button>
|
||
<view class="menu-item" @tap="navTo('feedback')">
|
||
<view class="icon-left"><text class="feedback-icon">📝</text></view>
|
||
<text class="menu-text">意见反馈</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" @tap="navTo('help')">
|
||
<view class="icon-left"><text class="help-icon">❓</text></view>
|
||
<text class="menu-text">使用说明 / 帮助</text>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Footer -->
|
||
<view class="version-info">2026 丙午马年 · 新春助手 v1.0.2</view>
|
||
|
||
<!-- Bottom Spacer for TabBar -->
|
||
<view style="height: 120rpx"></view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- Login Popup -->
|
||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from "vue";
|
||
import { wxLogin } from "@/utils/login.js";
|
||
import { getPlatformProvider, getBavBarHeight } from "@/utils/system";
|
||
import { useUserStore } from "@/stores/user";
|
||
import { apiLogin } from "@/api/auth.js";
|
||
|
||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||
|
||
const userStore = useUserStore();
|
||
const loginPopupRef = ref(null);
|
||
|
||
// Navigation Bar
|
||
const navBarTop = ref(20);
|
||
const navBarHeight = ref(44);
|
||
|
||
// User Info
|
||
const defaultAvatarUrl =
|
||
"https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
|
||
|
||
const userInfo = computed(() => ({
|
||
nickName: userStore.userInfo.nickName || "点击登录",
|
||
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl,
|
||
}));
|
||
|
||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||
|
||
onMounted(() => {
|
||
const sysInfo = uni.getSystemInfoSync();
|
||
navBarTop.value = sysInfo.statusBarHeight;
|
||
// Assuming standard nav bar height
|
||
navBarHeight.value = 44;
|
||
});
|
||
|
||
const handleUserClick = () => {
|
||
if (!isLoggedIn.value) {
|
||
loginPopupRef.value.open();
|
||
} else {
|
||
// Navigate to profile details or do nothing
|
||
}
|
||
};
|
||
|
||
const handleLogind = async () => {
|
||
// Logic after successful login if needed
|
||
};
|
||
|
||
const navTo = (page) => {
|
||
if (!isLoggedIn.value) {
|
||
loginPopupRef.value.open();
|
||
uni.showToast({ title: "请先登录", icon: "none" });
|
||
return;
|
||
}
|
||
|
||
if (page === "greetings") {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/greeting",
|
||
});
|
||
return;
|
||
}
|
||
if (page === "fortune-record") {
|
||
uni.navigateTo({
|
||
url: "/pages/fortune/record",
|
||
});
|
||
return;
|
||
}
|
||
if (page === "wallpaper") {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/wallpaper",
|
||
});
|
||
return;
|
||
}
|
||
if (page === "avatar") {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/avatar",
|
||
});
|
||
return;
|
||
}
|
||
if (page === "feedback") {
|
||
uni.navigateTo({
|
||
url: "/pages/feedback/index",
|
||
});
|
||
return;
|
||
}
|
||
uni.showToast({ title: "功能开发中", icon: "none" });
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mine-page {
|
||
min-height: 100vh;
|
||
background: #f9f9f9;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nav-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f9f9f9;
|
||
}
|
||
.nav-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.content-scroll {
|
||
height: 100vh;
|
||
}
|
||
.content-wrap {
|
||
padding: 20rpx 30rpx 40rpx;
|
||
}
|
||
|
||
/* User Card */
|
||
.user-card {
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
position: relative;
|
||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
|
||
}
|
||
.avatar-box {
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
}
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #fff;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
.red-badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: -10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #ff3b30;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #fff;
|
||
}
|
||
.fire {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
}
|
||
.row-1 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.nickname {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-right: 16rpx;
|
||
}
|
||
.vip-tag {
|
||
background: #ffecec;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
}
|
||
.vip-text {
|
||
color: #ff3b30;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
.row-2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.arrow-icon {
|
||
color: #ff3b30;
|
||
font-size: 20rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.stats-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
.num {
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin: 0 4rpx;
|
||
}
|
||
.card-arrow {
|
||
font-size: 40rpx;
|
||
color: #ccc;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
/* Section Title */
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #999;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
/* Menu Group */
|
||
.menu-group {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 40rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||
}
|
||
.menu-group.mt-30 {
|
||
margin-top: 30rpx;
|
||
}
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
.menu-item:active {
|
||
background: #f9f9f9;
|
||
}
|
||
/* For button reset */
|
||
.menu-item.share-btn {
|
||
width: 100%;
|
||
text-align: left;
|
||
line-height: normal;
|
||
border-radius: 0;
|
||
}
|
||
.menu-item.share-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.icon-box {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
.red-bg {
|
||
background: #fff0f0;
|
||
color: #ff3b30;
|
||
}
|
||
.orange-bg {
|
||
background: #fff8e6;
|
||
color: #ff9500;
|
||
}
|
||
.pink-bg {
|
||
background: #fff0f5;
|
||
color: #ff2d55;
|
||
}
|
||
.yellow-bg {
|
||
background: #fffae0;
|
||
color: #ffcc00;
|
||
}
|
||
.gray-bg {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.icon-left {
|
||
width: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
.share-icon,
|
||
.help-icon,
|
||
.feedback-icon {
|
||
font-size: 36rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.menu-text {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.new-badge {
|
||
background: #ff3b30;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
.arrow {
|
||
color: #ccc;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
/* Version Info */
|
||
.version-info {
|
||
text-align: center;
|
||
color: #ccc;
|
||
font-size: 22rpx;
|
||
margin-top: 60rpx;
|
||
}
|
||
</style>
|