zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: deaw share

Browse Source
This commit is contained in:
zzc
2026-01-21 22:33:37 +08:00
parent 915dd33aac
commit 25de38a1f5
5 changed files with 512 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
pages/mine/mine.vue
View File

@@ -1,17 +1,24 @@
<template>
<view class="mine-page">
<!-- Custom Navbar -->
<view class="nav-bar" :style="{ paddingTop: navBarTop + 'px', height: navBarHeight + 'px' }">
<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' }">
<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>
<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">
@@ -22,7 +29,9 @@
</view>
<view class="row-2" v-if="isLoggedIn">
<text class="arrow-icon">➤</text>
<text class="stats-text">已发送 <text class="num">3</text> 条新春祝福</text>
<text class="stats-text"
>已发送 <text class="num">3</text> 条新春祝福</text
>
</view>
<view class="row-2" v-else>
<text class="stats-text">点击登录解锁更多功能</text>
@@ -39,9 +48,9 @@
<text class="menu-text">我的新春祝福</text>
<text class="arrow">›</text>
</view>
<view class="menu-item" @tap="navTo('videos')">
<view class="menu-item" @tap="navTo('fortune-record')">
<view class="icon-box orange-bg"><text>📹</text></view>
<text class="menu-text">我的拜年视频</text>
<text class="menu-text">我的新年运势</text>
<text class="arrow">›</text>
</view>
<view class="menu-item" @tap="navTo('decorations')">
@@ -72,7 +81,7 @@
</view>
</view>
<!-- Other Actions -->
<!-- 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>
@@ -88,65 +97,72 @@
<!-- Footer -->
<view class="version-info">2026 丙午马年 · 新春助手 v1.0.2</view>
<!-- Bottom Spacer for TabBar -->
<view style="height: 120rpx;"></view>
<view style="height: 120rpx"></view>
</view>
</scroll-view>
<!-- Login Popup -->
<LoginPopup ref="loginPopupRef" @logind="handleLogind"/>
<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 { 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'
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
const userStore = useUserStore()
const loginPopupRef = ref(null)
const userStore = useUserStore();
const loginPopupRef = ref(null);
// Navigation Bar
const navBarTop = ref(20)
const navBarHeight = ref(44)
const navBarTop = ref(20);
const navBarHeight = ref(44);
// User Info
const defaultAvatarUrl = 'https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png'
const defaultAvatarUrl =
"https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
const userInfo = computed(() => ({
nickName: userStore.userInfo.nickName || '点击登录',
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl
}))
nickName: userStore.userInfo.nickName || "点击登录",
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl,
}));
const isLoggedIn = computed(() => !!userStore.userInfo.nickName)
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
onMounted(() => {
const sysInfo = uni.getSystemInfoSync()
navBarTop.value = sysInfo.statusBarHeight
const sysInfo = uni.getSystemInfoSync();
navBarTop.value = sysInfo.statusBarHeight;
// Assuming standard nav bar height
navBarHeight.value = 44
})
navBarHeight.value = 44;
});
const handleUserClick = () => {
if (!isLoggedIn.value) {
loginPopupRef.value.open()
loginPopupRef.value.open();
} else {
// Navigate to profile details or do nothing
}
}
};
const handleLogind = async () => {
// Logic after successful login if needed
}
};
const navTo = (page) => {
uni.showToast({ title: '功能开发中', icon: 'none' })
}
if (page === "fortune-record") {
uni.navigateTo({
url: "/pages/fortune/record",
});
return;
}
uni.showToast({ title: "功能开发中", icon: "none" });
};
</script>
<style lang="scss" scoped>
@@ -189,7 +205,7 @@ const navTo = (page) => {
align-items: center;
margin-bottom: 40rpx;
position: relative;
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.03);
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
}
.avatar-box {
position: relative;
@@ -200,7 +216,7 @@ const navTo = (page) => {
height: 120rpx;
border-radius: 50%;
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.red-badge {
position: absolute;
@@ -283,7 +299,7 @@ const navTo = (page) => {
border-radius: 24rpx;
overflow: hidden;
margin-bottom: 40rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.02);
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}
.menu-group.mt-30 {
margin-top: 30rpx;
@@ -319,11 +335,26 @@ const navTo = (page) => {
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; }
.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;
@@ -332,7 +363,8 @@ const navTo = (page) => {
margin-right: 24rpx;
margin-left: 16rpx;
}
.share-icon, .help-icon {
.share-icon,
.help-icon {
font-size: 36rpx;
color: #666;
}
@@ -363,4 +395,4 @@ const navTo = (page) => {
font-size: 22rpx;
margin-top: 60rpx;
}
</style>
</style>