Compare commits
13 Commits
3bd65b0ae1
...
17b11a1df1
| Author | SHA1 | Date | |
|---|---|---|---|
|
17b11a1df1 | ||
|
|
78ef633b1b | ||
|
|
24d9bb1b01 | ||
|
|
2938ab2a9d | ||
|
|
fe0a755962 | ||
|
|
17f5b62ef0 | ||
|
|
adb5f00988 | ||
|
|
0dcd70d2f0 | ||
|
|
bad07da9ef | ||
|
|
154c038d1d | ||
|
|
30063429ba | ||
|
|
fb68e87624 | ||
|
|
c0a4423124 |
31
api/mine.js
31
api/mine.js
@@ -7,3 +7,34 @@ export const sendFeedback = async (data) => {
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyCard = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/card?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyWallpaper = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/wallpaper?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyAvatar = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/avatar?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const userAvatarChange = async (imageUrl) => {
|
||||
return request({
|
||||
url: "/api/blessing/user/avatar/change",
|
||||
method: "POST",
|
||||
data: {
|
||||
imageUrl,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
9
api/pay.js
Normal file
9
api/pay.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const createOrder = async (data) => {
|
||||
return request({
|
||||
url: "/api/pay/wechat/order/create",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
@@ -13,3 +13,10 @@ export const getWallpaperCategoryList = async () => {
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getWallpaperRecommendList = async () => {
|
||||
return request({
|
||||
url: `/api/blessing/wallpaper/recommend/list`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
48
pages.json
48
pages.json
@@ -17,6 +17,46 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/greeting",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的新春祝福",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/wallpaper",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的新春壁纸",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/avatar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的制作记录",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/help",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助中心",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/vip",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员中心",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
@@ -88,6 +128,14 @@
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wallpaper/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "壁纸详情",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -168,7 +168,6 @@ import {
|
||||
abilityCheck,
|
||||
} from "@/api/system.js";
|
||||
import {
|
||||
avatarDownloadRecord,
|
||||
getAvatarSystemList,
|
||||
getAvatarFrameList,
|
||||
getAvatarDecorList,
|
||||
@@ -671,11 +670,11 @@ onShareAppMessage(async () => {
|
||||
};
|
||||
}
|
||||
const id = createAvatarId();
|
||||
const shareTokenRes = {
|
||||
shareToken: "iFmK8WjRm6TK",
|
||||
};
|
||||
// const shareTokenRes = await getShareToken("avatar_download", id);
|
||||
// completeCardInfo(id);
|
||||
// const shareTokenRes = {
|
||||
// shareToken: "iFmK8WjRm6TK",
|
||||
// };
|
||||
const shareTokenRes = await getShareToken("avatar_download", id);
|
||||
completeCardInfo(id);
|
||||
return {
|
||||
title: "制作我的新春头像",
|
||||
path: `/pages/avatar/detail?shareToken=${shareTokenRes.shareToken}`,
|
||||
|
||||
@@ -439,6 +439,8 @@ onReachBottom(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const handleLogind = async () => {};
|
||||
|
||||
const createCard = () => {
|
||||
const id = generateObjectId();
|
||||
createCardTmp({ id });
|
||||
|
||||
563
pages/mine/avatar.vue
Normal file
563
pages/mine/avatar.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<view class="avatar-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<view class="title-wrap">
|
||||
<text class="title">我的制作记录</text>
|
||||
<view class="more-btn">•••</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Current Avatar Card -->
|
||||
<view class="current-card" v-if="currentAvatar">
|
||||
<view class="avatar-preview">
|
||||
<view class="ring-bg"></view>
|
||||
<image
|
||||
:src="currentAvatar.imageUrl"
|
||||
mode="aspectFill"
|
||||
class="avatar-img"
|
||||
/>
|
||||
<image
|
||||
v-if="currentAvatar.decorUrl"
|
||||
:src="currentAvatar.decorUrl"
|
||||
mode="widthFix"
|
||||
class="decor-img"
|
||||
/>
|
||||
</view>
|
||||
<view class="status-info">
|
||||
<view class="status-title">当前正在使用</view>
|
||||
<view class="decor-name">
|
||||
<text class="star-icon">✪</text>
|
||||
<text>{{ currentAvatar.decorName || "金马贺岁挂饰" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="change-btn" @tap="changeUserAvatar(currentAvatar.imageUrl)">
|
||||
<text>替换头像</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- History List Header -->
|
||||
<view class="list-header">
|
||||
<view class="title-block">
|
||||
<view class="red-line"></view>
|
||||
<text class="section-title">历史制作记录</text>
|
||||
</view>
|
||||
<text class="count-text">共 {{ totalCount }} 件作品</text>
|
||||
</view>
|
||||
|
||||
<!-- Grid List -->
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="grid-item"
|
||||
:class="{ active: item.id === currentAvatar?.id }"
|
||||
@tap="selectAvatar(item)"
|
||||
>
|
||||
<view class="img-box">
|
||||
<image :src="item.imageUrl" mode="aspectFill" class="item-img" />
|
||||
<view class="active-badge" v-if="item.id === currentAvatar?.id">
|
||||
<text class="check-icon">✔</text>
|
||||
<text>当前使用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-info">
|
||||
<text class="item-name">{{
|
||||
item.decorName || getDefaultName(item)
|
||||
}}</text>
|
||||
<text class="item-date">{{ formatDate(item.createdAt) }} 制作</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading State -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view class="empty-state" v-if="!loading && list.length === 0">
|
||||
<text>暂无头像记录</text>
|
||||
</view>
|
||||
<view class="no-more" v-if="!loading && !hasMore && list.length > 0">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Action -->
|
||||
<view class="bottom-action">
|
||||
<text class="explore-text">EXPLORE MORE STYLES</text>
|
||||
<view class="action-btn" @tap="goToMake">
|
||||
<view class="btn-icon">🧭</view>
|
||||
<text>去发现更多精美挂饰</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyAvatar, userAvatarChange } from "@/api/mine.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const isRefreshing = ref(false);
|
||||
const totalCount = ref(0);
|
||||
const currentAvatar = ref(null);
|
||||
|
||||
// Default names for fallback
|
||||
const names = [
|
||||
"金马贺岁",
|
||||
"同心如意",
|
||||
"爆竹一声",
|
||||
"红火灯笼",
|
||||
"财源滚滚",
|
||||
"锦鲤附体",
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
onRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
if (!hasMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyAvatar(page.value);
|
||||
const dataList = res?.list || [];
|
||||
totalCount.value = res?.totalCount || 0;
|
||||
|
||||
if (reset) {
|
||||
list.value = dataList;
|
||||
// Assume the first one is current for demo if not specified
|
||||
if (dataList.length > 0) {
|
||||
currentAvatar.value = dataList[0];
|
||||
}
|
||||
} else {
|
||||
list.value = [...list.value, ...dataList];
|
||||
}
|
||||
|
||||
hasMore.value = res.hasNext;
|
||||
if (hasMore.value) {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch avatar list", e);
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isRefreshing.value = false;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
const changeUserAvatar = async (imageUrl) => {
|
||||
const res = await userAvatarChange(imageUrl);
|
||||
if (res.success) {
|
||||
userStore.setUserInfo({
|
||||
...userStore.userInfo,
|
||||
avatarUrl: imageUrl,
|
||||
});
|
||||
uni.showToast({
|
||||
title: "头像更换成功",
|
||||
icon: "success",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
isRefreshing.value = true;
|
||||
fetchList(true);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const goToMake = () => {
|
||||
// Replace with actual route to avatar maker
|
||||
uni.navigateTo({
|
||||
url: "/pages/avatar/index",
|
||||
});
|
||||
};
|
||||
|
||||
const selectAvatar = async (item) => {
|
||||
currentAvatar.value = item;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
};
|
||||
|
||||
const getDefaultName = (item) => {
|
||||
// Simple deterministic name generation based on ID char code sum
|
||||
if (!item.id) return "新春头像";
|
||||
let sum = 0;
|
||||
for (let i = 0; i < item.id.length; i++) {
|
||||
sum += item.id.charCodeAt(i);
|
||||
}
|
||||
return names[sum % names.length];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; // Changed to space-between
|
||||
padding: 0 16px; // Added padding
|
||||
|
||||
.back-btn {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20px;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-right: 32px; // Balance the back button space
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
display: none; // Hide for now as per design mockup clean look
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.current-card {
|
||||
margin: 60px 20px 20px;
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Background decoration (faint glow)
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 59, 48, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
|
||||
.ring-bg {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.decor-img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-info {
|
||||
flex: 1;
|
||||
|
||||
.status-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.decor-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #ff3b30;
|
||||
|
||||
.star-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.change-btn {
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.red-line {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #ff3b30;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.count-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 0 0 2px #ff3b30;
|
||||
|
||||
.img-box {
|
||||
.active-badge {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: #f5f5f5;
|
||||
/* padding: 20px; Removed padding to make it full square */
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* border-radius: 8px; Removed border-radius */
|
||||
}
|
||||
|
||||
.active-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: #ffb300;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.check-icon {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state,
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.explore-text {
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: linear-gradient(135deg, #ff3b30, #ff2d55);
|
||||
color: #fff;
|
||||
padding: 14px 32px;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
.btn-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4px 10px rgba(255, 59, 48, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
587
pages/mine/greeting.vue
Normal file
587
pages/mine/greeting.vue
Normal file
@@ -0,0 +1,587 @@
|
||||
<template>
|
||||
<view class="greeting-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="title">我的新春祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Header Stats -->
|
||||
<view class="header-stats">
|
||||
<view class="stats-card">
|
||||
<view class="stats-left">
|
||||
<view class="icon-circle">
|
||||
<text>✨</text>
|
||||
</view>
|
||||
<view class="stats-info">
|
||||
<text class="label">已累计创作</text>
|
||||
<view class="value-wrap">
|
||||
<text class="value">{{ totalCount }}</text>
|
||||
<text class="unit">份祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="stats-right">
|
||||
<text class="label">马年运势</text>
|
||||
<text class="value red-text">一马当先</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- List Section -->
|
||||
<view class="list-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">祝福列表</text>
|
||||
<text class="section-tip">左滑删除记录</text>
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view v-for="item in list" :key="item.id" class="list-item-wrap">
|
||||
<view class="swipe-container">
|
||||
<!-- Delete Action (Behind) -->
|
||||
<view class="delete-action" @tap.stop="onDelete(item)">
|
||||
<text>删除</text>
|
||||
</view>
|
||||
|
||||
<!-- Card Content (Front) -->
|
||||
<view
|
||||
class="card-item"
|
||||
:style="{
|
||||
transform: `translateX(${item.translateX || 0}px)`,
|
||||
transition: item.useTransition ? 'transform 0.3s' : 'none',
|
||||
}"
|
||||
@touchstart="onTouchStart($event, item)"
|
||||
@touchmove="onTouchMove($event, item)"
|
||||
@touchend="onTouchEnd($event, item)"
|
||||
>
|
||||
<image :src="item.imageUrl" mode="aspectFill" class="card-img" />
|
||||
<view class="card-content">
|
||||
<view class="card-title"
|
||||
>{{ item.blessingTo
|
||||
}}{{
|
||||
item.blessingFrom ? item.blessingFrom : "好友"
|
||||
}}身体健康</view
|
||||
>
|
||||
<view class="card-date"
|
||||
>更新时间：{{ formatDate(item.updatedAt) }}</view
|
||||
>
|
||||
<view class="tags">
|
||||
<view class="tag yellow" v-if="item.festival">{{
|
||||
item.festival
|
||||
}}</view>
|
||||
<view class="tag red" v-if="item.year">{{ item.year }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-actions">
|
||||
<view class="action-btn" @tap.stop="onShare(item)">
|
||||
<text class="icon">🔗</text>
|
||||
</view>
|
||||
<view class="action-btn" @tap.stop="onEdit(item)">
|
||||
<text class="icon">✎</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading State -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view class="empty-state" v-if="!loading && list.length === 0">
|
||||
<text>暂无祝福记录</text>
|
||||
</view>
|
||||
<view class="no-more" v-if="!loading && !hasMore && list.length > 0">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyCard } from "@/api/mine.js";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const isRefreshing = ref(false);
|
||||
const totalCount = ref(0);
|
||||
|
||||
const deleteOptions = ref([
|
||||
{
|
||||
text: "删除",
|
||||
style: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
// Swipe Logic
|
||||
const startX = ref(0);
|
||||
const activeItem = ref(null);
|
||||
const MAX_SWIPE_WIDTH = 80;
|
||||
|
||||
const onTouchStart = (e, item) => {
|
||||
if (e.touches.length > 1) return;
|
||||
// Close other items
|
||||
if (activeItem.value && activeItem.value.id !== item.id) {
|
||||
activeItem.value.translateX = 0;
|
||||
activeItem.value.useTransition = true;
|
||||
}
|
||||
|
||||
startX.value = e.touches[0].clientX;
|
||||
item.useTransition = false;
|
||||
activeItem.value = item;
|
||||
};
|
||||
|
||||
const onTouchMove = (e, item) => {
|
||||
if (e.touches.length > 1) return;
|
||||
const currentX = e.touches[0].clientX;
|
||||
const deltaX = currentX - startX.value;
|
||||
|
||||
// Allow swiping left (negative) up to -MAX_SWIPE_WIDTH
|
||||
// If already open (translateX = -80), deltaX needs to be adjusted
|
||||
// But simpler: just use delta from 0 position.
|
||||
// Actually, standard swipe logic needs to account for current position.
|
||||
// For simplicity: assume always starting from 0 (closed) or -80 (open).
|
||||
// But if we start drag from open state, we need to handle it.
|
||||
|
||||
// Let's stick to "start from 0" logic for now, assuming auto-close.
|
||||
// If item is already open, and we swipe right, we close it.
|
||||
|
||||
// Re-calculate based on initial offset if we want to support dragging from open.
|
||||
// For now: simple close-on-touch-other logic covers most cases.
|
||||
// We assume startX is from a state where it is either 0 or -80.
|
||||
// But `item.translateX` might be -80.
|
||||
|
||||
let targetX = deltaX;
|
||||
if (item.translateX === -MAX_SWIPE_WIDTH) {
|
||||
targetX = -MAX_SWIPE_WIDTH + deltaX;
|
||||
}
|
||||
|
||||
if (targetX < -MAX_SWIPE_WIDTH) targetX = -MAX_SWIPE_WIDTH;
|
||||
if (targetX > 0) targetX = 0;
|
||||
|
||||
item.translateX = targetX;
|
||||
};
|
||||
|
||||
const onTouchEnd = (e, item) => {
|
||||
item.useTransition = true;
|
||||
if (item.translateX < -30) {
|
||||
item.translateX = -MAX_SWIPE_WIDTH;
|
||||
} else {
|
||||
item.translateX = 0;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
onRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
if (!hasMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyCard(page.value);
|
||||
const dataList = res?.list || [];
|
||||
totalCount.value = res?.totalCount || 0;
|
||||
|
||||
if (reset) {
|
||||
list.value = dataList;
|
||||
} else {
|
||||
list.value = [...list.value, ...dataList];
|
||||
}
|
||||
|
||||
hasMore.value = res.hasNext;
|
||||
if (hasMore.value) {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch greeting list", e);
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isRefreshing.value = false;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
isRefreshing.value = true;
|
||||
fetchList(true);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
};
|
||||
|
||||
const onDelete = (item) => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定要删除这条祝福吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// Implement delete API call here
|
||||
// For now just remove from list locally
|
||||
list.value = list.value.filter((i) => i.id !== item.id);
|
||||
totalCount.value = Math.max(0, totalCount.value - 1);
|
||||
uni.showToast({ title: "删除成功", icon: "none" });
|
||||
} else {
|
||||
// Reset swipe state if cancelled
|
||||
item.translateX = 0;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onShare = (item) => {
|
||||
// Implement share logic
|
||||
uni.showToast({ title: "分享功能开发中", icon: "none" });
|
||||
};
|
||||
|
||||
const onEdit = (item) => {
|
||||
// Implement edit logic
|
||||
uni.showToast({ title: "编辑功能开发中", icon: "none" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.greeting-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
margin-top: 44px; // Initial offset for fixed nav
|
||||
|
||||
.stats-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.stats-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #fff0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.stats-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 80px;
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
&.red-text {
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.section-tip {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-wrap {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.swipe-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #ff3b30; // Delete background color
|
||||
}
|
||||
|
||||
.delete-action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
margin-right: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
&.yellow {
|
||||
background: #fff8e1;
|
||||
color: #ffb300;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #ffebee;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: #e3f2fd;
|
||||
color: #2196f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state,
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
479
pages/mine/help.vue
Normal file
479
pages/mine/help.vue
Normal file
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<view class="help-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view class="nav-left" @click="goBack">
|
||||
<uni-icons type="left" size="24" color="#000" />
|
||||
</view>
|
||||
<text class="nav-title">帮助中心</text>
|
||||
</view>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<view class="search-box">
|
||||
<view class="search-input-box">
|
||||
<uni-icons type="search" size="18" color="#999" />
|
||||
<text class="placeholder">搜索你遇到的问题</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-scroll">
|
||||
<!-- Quick Start -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="red-bar"></view>
|
||||
<text class="section-title">快速上手</text>
|
||||
</view>
|
||||
<view class="steps-card">
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="email-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">制作贺卡</text>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<uni-icons type="arrowright" size="16" color="#ffccc7" />
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="person-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">佩戴挂饰</text>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<uni-icons type="arrowright" size="16" color="#ffccc7" />
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="gift-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">送出祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAQ -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="red-bar"></view>
|
||||
<text class="section-title">常见问题</text>
|
||||
</view>
|
||||
|
||||
<view class="faq-list">
|
||||
<view
|
||||
v-for="(category, index) in faqList"
|
||||
:key="index"
|
||||
class="faq-category"
|
||||
>
|
||||
<view class="category-header" @click="toggleCategory(index)">
|
||||
<view class="cat-left">
|
||||
<uni-icons
|
||||
:type="category.icon"
|
||||
size="20"
|
||||
color="#ff3b30"
|
||||
class="cat-icon"
|
||||
/>
|
||||
<text class="cat-title">{{ category.title }}</text>
|
||||
</view>
|
||||
<uni-icons
|
||||
:type="category.expanded ? 'bottom' : 'right'"
|
||||
size="16"
|
||||
color="#ccc"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-if="category.expanded" class="category-content">
|
||||
<view
|
||||
v-for="(item, idx) in category.items"
|
||||
:key="idx"
|
||||
class="faq-item"
|
||||
>
|
||||
<view class="question" @click="toggleQuestion(index, idx)">
|
||||
<text>{{ item.q }}</text>
|
||||
<uni-icons type="right" size="14" color="#ccc" />
|
||||
</view>
|
||||
<view class="answer">
|
||||
<text>{{ item.a }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Contact Support -->
|
||||
<view class="contact-section">
|
||||
<view class="contact-card">
|
||||
<view class="contact-title">没找到答案？</view>
|
||||
<view class="contact-btns">
|
||||
<button class="c-btn" open-type="contact">
|
||||
<uni-icons type="chatbubbles-filled" size="20" color="#fff" />
|
||||
<text>在线客服</text>
|
||||
</button>
|
||||
<button class="c-btn">
|
||||
<uni-icons type="world-filled" size="20" color="#fff" />
|
||||
<text>官方公众号</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="bg-decor">
|
||||
<uni-icons
|
||||
type="help-filled"
|
||||
size="120"
|
||||
color="rgba(255,255,255,0.1)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-blessing">
|
||||
<uni-icons type="vip-filled" size="14" color="#ff3b30" />
|
||||
<text>祝您2026新春大吉，万事如意</text>
|
||||
</view>
|
||||
<view class="footer-copy">2026 丙午马年 · 官方出品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const statusBarHeight = getStatusBarHeight();
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const faqList = ref([
|
||||
{
|
||||
title: "贺卡制作",
|
||||
icon: "compose",
|
||||
expanded: true,
|
||||
items: [
|
||||
{
|
||||
q: "如何分享给微信好友？",
|
||||
a: "制作完成后，点击右下角“分享给好友”按钮即可。您也可以保存为图片后在聊天对话框发送。",
|
||||
},
|
||||
{
|
||||
q: "生成速度太慢怎么办？",
|
||||
a: "生成速度受网络环境和服务器负载影响，请您耐心等待或尝试切换网络。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "头像定制",
|
||||
icon: "person",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "如何更换新的头像",
|
||||
a: "在头像定制页面，首先选择地图是微信头像或者系统头像，左边选择您喜欢的边框样式，右边选择头像挂饰，可移动位置，缩放大小，点击保存即可。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "运势抽取",
|
||||
icon: "calendar",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "每天可以抽取几次？",
|
||||
a: "每位用户每天有1次免费抽取机会，分享给好友可获得额外机会。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "壁纸保存",
|
||||
icon: "image",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "下载壁纸不清晰怎么办？",
|
||||
a: "请确保您下载的是原图。如果网络不稳定，可能会自动加载低清预览图，请等待加载完成后再保存。",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const toggleCategory = (index) => {
|
||||
faqList.value[index].expanded = !faqList.value[index].expanded;
|
||||
};
|
||||
|
||||
const toggleQuestion = (catIndex, itemIndex) => {
|
||||
// Simple expansion for question details not implemented in design but structure is there
|
||||
// The design shows the answer directly under the question for the first item
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-page {
|
||||
min-height: 100vh;
|
||||
background-color: #fcfcfc;
|
||||
padding-bottom: 40rpx;
|
||||
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: #fff;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
bottom: 0;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-input-box {
|
||||
background: #f5f5f5;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 30rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.red-bar {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ff3b30;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon-circle {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #fff6f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.faq-category {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.category-header {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.cat-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.cat-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-content {
|
||||
background: #fcfcfc;
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.faq-item {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
background: #f8f8f8;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: linear-gradient(135deg, #e52e2e 0%, #c61a1a 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
|
||||
.contact-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.contact-btns {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.c-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-decor {
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
bottom: -40rpx;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.footer-blessing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ff8888;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,6 +40,26 @@
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
|
||||
<!-- VIP Banner -->
|
||||
<view class="vip-banner" @tap="navTo('vip')">
|
||||
<view class="vip-left">
|
||||
<view class="vip-icon-box">
|
||||
<uni-icons type="vip-filled" size="32" color="#5d4037" />
|
||||
</view>
|
||||
<view class="vip-content">
|
||||
<view class="vip-title-row">
|
||||
<text class="vip-title">祥瑞会员中心</text>
|
||||
<view class="diamond-tag">DIAMOND</view>
|
||||
</view>
|
||||
<text class="vip-subtitle">开通永久会员解锁全部特权</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip-right">
|
||||
<text class="open-text">立即开通</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- My Creations -->
|
||||
<view class="section-title">我的创作</view>
|
||||
<view class="menu-group">
|
||||
@@ -53,14 +73,14 @@
|
||||
<text class="menu-text">我的新年运势</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" @tap="navTo('decorations')">
|
||||
<view class="menu-item" @tap="navTo('avatar')">
|
||||
<view class="icon-box pink-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('frames')">
|
||||
<view class="menu-item" @tap="navTo('wallpaper')">
|
||||
<view class="icon-box yellow-bg"><text>🖼</text></view>
|
||||
<text class="menu-text">我的马年头像框</text>
|
||||
<text class="menu-text">我的新春壁纸</text>
|
||||
<view class="new-badge">NEW</view>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
@@ -160,18 +180,54 @@ const handleLogind = async () => {
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
if (page === "help") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/help",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "vip") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/vip",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({ title: "功能开发中", icon: "none" });
|
||||
};
|
||||
</script>
|
||||
@@ -295,6 +351,84 @@ const navTo = (page) => {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* VIP Banner */
|
||||
.vip-banner {
|
||||
background: linear-gradient(135deg, #2e2424 0%, #1a1616 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.vip-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vip-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fceea9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
border: 4rpx solid #bfa46f;
|
||||
}
|
||||
|
||||
.vip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vip-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.vip-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fceea9;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.diamond-tag {
|
||||
background: rgba(252, 238, 169, 0.15);
|
||||
color: #fceea9;
|
||||
font-size: 18rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid rgba(252, 238, 169, 0.4);
|
||||
}
|
||||
|
||||
.vip-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(252, 238, 169, 0.6);
|
||||
}
|
||||
|
||||
.vip-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.open-text {
|
||||
font-size: 26rpx;
|
||||
color: #fceea9;
|
||||
margin-right: 4rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-banner .arrow {
|
||||
color: #fceea9;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.section-title {
|
||||
font-size: 26rpx;
|
||||
|
||||
533
pages/mine/vip.vue
Normal file
533
pages/mine/vip.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<view class="vip-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<view class="nav-left" @click="goBack">
|
||||
<uni-icons type="left" size="24" color="#000" />
|
||||
</view>
|
||||
<text class="nav-title">会员中心</text>
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<view class="content">
|
||||
<!-- User Info Card -->
|
||||
<view class="user-card">
|
||||
<view class="avatar-box">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="
|
||||
userInfo.avatarUrl ||
|
||||
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="fire-badge">
|
||||
<uni-icons type="fire-filled" size="14" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name-row">
|
||||
<text class="username">{{ userInfo.nickName || "微信用户" }}</text>
|
||||
<view class="vip-tag">VIP 祥瑞会员</view>
|
||||
</view>
|
||||
<text class="expiry-date">2026-02-15 到期</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Plans -->
|
||||
<view class="section-title">选择会员方案</view>
|
||||
<view class="plans-grid">
|
||||
<view
|
||||
v-for="(plan, index) in plans"
|
||||
:key="index"
|
||||
class="plan-card"
|
||||
:class="{ active: selectedPlanIndex === index }"
|
||||
@click="selectPlan(index)"
|
||||
>
|
||||
<view v-if="plan.badge" class="plan-badge" :class="plan.badgeType">
|
||||
{{ plan.badge }}
|
||||
</view>
|
||||
<text class="plan-duration">{{ plan.duration }}</text>
|
||||
<view class="plan-price">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ plan.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Benefits -->
|
||||
<view class="benefits-card">
|
||||
<view class="card-header">
|
||||
<uni-icons type="vip-filled" size="20" color="#ff3b30" />
|
||||
<text class="card-title">会员专属权益</text>
|
||||
</view>
|
||||
<view class="benefits-grid">
|
||||
<view
|
||||
v-for="(benefit, index) in benefits"
|
||||
:key="index"
|
||||
class="benefit-item"
|
||||
>
|
||||
<view class="benefit-icon-box" :style="{ background: benefit.bg }">
|
||||
<uni-icons
|
||||
:type="benefit.icon"
|
||||
size="24"
|
||||
:color="benefit.color"
|
||||
/>
|
||||
</view>
|
||||
<text class="benefit-name">{{ benefit.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Purchase Notes -->
|
||||
<view class="notes-section">
|
||||
<text class="notes-title">购买说明</text>
|
||||
<view class="notes-list">
|
||||
<view class="note-item" v-for="(note, index) in notes" :key="index">
|
||||
<text class="dot">•</text>
|
||||
<text class="note-text">{{ note }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<view class="bottom-bar safe-area-bottom">
|
||||
<button class="buy-btn" @click="handlePurchase">
|
||||
<text>立即开通</text>
|
||||
<uni-icons
|
||||
type="arrowright"
|
||||
size="18"
|
||||
color="#fff"
|
||||
style="margin-left: 4rpx"
|
||||
/>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
getBavBarHeight,
|
||||
getStatusBarHeight as getStatus,
|
||||
} from "@/utils/system";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { createOrder } from "@/api/pay.js";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const statusBarHeight = getStatus();
|
||||
const userStore = useUserStore();
|
||||
const userInfo = userStore.userInfo;
|
||||
|
||||
const selectedPlanIndex = ref(1);
|
||||
|
||||
const plans = [
|
||||
{ duration: "一个月", price: "8.8", total: 880 },
|
||||
{
|
||||
duration: "一个季度",
|
||||
price: "18",
|
||||
badge: "热销",
|
||||
badgeType: "hot",
|
||||
total: 18000,
|
||||
},
|
||||
{ duration: "一年", price: "48", total: 48000 },
|
||||
{
|
||||
duration: "永久会员",
|
||||
price: "88",
|
||||
badge: "最划算",
|
||||
badgeType: "best",
|
||||
total: 88000,
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
{ name: "高级模板", icon: "star-filled", color: "#ff3b30", bg: "#fff0f0" },
|
||||
{ name: "无限制下载", icon: "image-filled", color: "#ff6b00", bg: "#fff7e6" },
|
||||
{ name: "马年头像框", icon: "medal-filled", color: "#bfa46f", bg: "#fffbe6" },
|
||||
{ name: "高速渲染", icon: "upload-filled", color: "#ff3b30", bg: "#fff0f0" },
|
||||
{
|
||||
name: "数据永久保存",
|
||||
icon: "paperplane-filled",
|
||||
color: "#409eff",
|
||||
bg: "#ecf5ff",
|
||||
},
|
||||
{ name: "1对1服务", icon: "headphones", color: "#9053fa", bg: "#f5f0ff" },
|
||||
];
|
||||
|
||||
const notes = [
|
||||
"会员服务为虚拟产品，支付后立即生效，不支持退款。",
|
||||
"会员权益在有效期内全平台通用。",
|
||||
"如有疑问，请通过“我的-使用说明”联系客服处理。",
|
||||
"最终解释权归 2026 新春助手团队所有。",
|
||||
];
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const selectPlan = (index) => {
|
||||
selectedPlanIndex.value = index;
|
||||
};
|
||||
|
||||
const handlePurchase = async () => {
|
||||
const plan = plans[selectedPlanIndex.value || 0];
|
||||
console.log("plan", plan);
|
||||
const orderRes = await createOrder({
|
||||
description: `新春会员购买 ${plan.duration} ${plan.price}`,
|
||||
total: plan.total,
|
||||
});
|
||||
if (orderRes.payParams) {
|
||||
wx.requestPayment({
|
||||
...orderRes.payParams,
|
||||
success(res) {
|
||||
// 等后端回调，不要直接认为支付成功
|
||||
console.log(11111, res);
|
||||
},
|
||||
fail(res) {
|
||||
console.log(22222, res);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 200rpx; // Space for bottom bar
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 0;
|
||||
height: 44px; // Standard title bar height
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* User Card */
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 10rpx 40rpx rgba(255, 59, 48, 0.08);
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Decorative gradient background hint
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 59, 48, 0.1) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fire-badge {
|
||||
position: absolute;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
background: #ff3b30;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.vip-tag {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
color: #ff3b30;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.expiry-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Plans Grid */
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.plans-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
width: 330rpx; // (750 - 60 - 30 gap) / 2
|
||||
height: 180rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
border-color: #ff3b30;
|
||||
background: #fff5f5;
|
||||
|
||||
.plan-price {
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-badge {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -10rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.hot {
|
||||
background: #ff3b30;
|
||||
}
|
||||
|
||||
&.best {
|
||||
background: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-duration {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
/* Benefits Card */
|
||||
.benefits-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
&:nth-last-child(-n + 3) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.benefit-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Notes */
|
||||
.notes-section {
|
||||
padding: 0 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.notes-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Bottom Bar */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background: linear-gradient(90deg, #ff3b30 0%, #ff1a1a 100%);
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
317
pages/mine/wallpaper.vue
Normal file
317
pages/mine/wallpaper.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="wallpaper-page" :style="{ paddingTop: navBarTop + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', paddingTop: navBarTop + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back-btn" @tap="goBack">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="title">我的新春壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Header Stats -->
|
||||
<view class="header-stats">
|
||||
<view class="stats-card">
|
||||
<view class="stats-left">
|
||||
<text class="label">我的收藏</text>
|
||||
<view class="value-wrap">
|
||||
<text class="prefix">已保存</text>
|
||||
<text class="value">{{ totalCount }}</text>
|
||||
<text class="suffix">张壁纸</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stats-right">
|
||||
<view class="icon-circle">
|
||||
<text>🖼️</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- List Section -->
|
||||
<view class="list-section">
|
||||
<view class="list-container">
|
||||
<view v-for="item in list" :key="item.id" class="grid-item" @tap="onPreview(item)">
|
||||
<image :src="item.imageUrl" mode="aspectFill" class="wallpaper-img" />
|
||||
<view class="date-badge">
|
||||
<text>{{ formatDate(item.createdAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading State -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view class="empty-state" v-if="!loading && list.length === 0">
|
||||
<text>暂无壁纸记录</text>
|
||||
</view>
|
||||
<view class="no-more" v-if="!loading && !hasMore && list.length > 0">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyWallpaper } from "@/api/mine.js";
|
||||
|
||||
const navBarTop = ref(0);
|
||||
const navBarHeight = ref(44);
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const isRefreshing = ref(false);
|
||||
const totalCount = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
fetchList(true);
|
||||
});
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
onRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
}
|
||||
if (!hasMore.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyWallpaper(page.value);
|
||||
const dataList = res?.list || [];
|
||||
totalCount.value = res?.totalCount || 0;
|
||||
|
||||
if (reset) {
|
||||
list.value = dataList;
|
||||
} else {
|
||||
list.value = [...list.value, ...dataList];
|
||||
}
|
||||
|
||||
hasMore.value = res.hasNext;
|
||||
if (hasMore.value) {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch wallpaper list", e);
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
isRefreshing.value = false;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
isRefreshing.value = true;
|
||||
fetchList(true);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const date = new Date(dateStr);
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${m}-${d}`;
|
||||
};
|
||||
|
||||
const onPreview = (item) => {
|
||||
uni.previewImage({
|
||||
urls: [item.imageUrl],
|
||||
current: item.imageUrl
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallpaper-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
margin-top: 44px; // Initial offset for fixed nav
|
||||
|
||||
.stats-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.stats-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.value-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.prefix {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ff3b30;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-right {
|
||||
.icon-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: #fff8e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-section {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
|
||||
.list-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
aspect-ratio: 9/16; // Standard wallpaper ratio
|
||||
|
||||
.wallpaper-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state,
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
529
pages/wallpaper/detail.vue
Normal file
529
pages/wallpaper/detail.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<view class="detail-page" :style="{ paddingTop: navHeight + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back" @tap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="title">壁纸详情</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-container">
|
||||
<!-- Sharer Info -->
|
||||
<view class="sharer-info" v-if="detailData.from">
|
||||
<image
|
||||
:src="detailData.from.avatar || '/static/default-avatar.png'"
|
||||
class="avatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="info-text">
|
||||
<view class="nickname">{{
|
||||
detailData.from.nickname || "神秘好友"
|
||||
}}</view>
|
||||
<view class="action-text">给你分享了一张2026新春精美壁纸</view>
|
||||
<view class="sub-text">★ 2026 且马贺岁</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Wallpaper Preview -->
|
||||
<view class="preview-card">
|
||||
<view class="preview-badge">PREVIEW</view>
|
||||
<image
|
||||
:src="detailData.imageUrl"
|
||||
mode="widthFix"
|
||||
class="main-image"
|
||||
@tap="previewImage"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<view class="action-buttons">
|
||||
<button class="btn primary-btn" @tap="goToIndex">
|
||||
<text class="btn-icon">✨</text>
|
||||
<text>我也要领同款壁纸</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- More Wallpapers -->
|
||||
<view class="more-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">更多精美新春壁纸</text>
|
||||
<view class="more-link" @tap="goToIndex">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="more-scroll" :show-scrollbar="false">
|
||||
<view class="scroll-inner">
|
||||
<view
|
||||
v-for="(item, index) in recommendList"
|
||||
:key="index"
|
||||
class="scroll-item"
|
||||
@tap="onRecommendClick(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.imageUrl"
|
||||
mode="aspectFill"
|
||||
class="scroll-img"
|
||||
/>
|
||||
<text class="item-title">{{ item.title || "新春壁纸" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Fortune Banner -->
|
||||
<!-- Wallpaper Banner -->
|
||||
<view class="wallpaper-banner" @tap="goToFortune">
|
||||
<view class="banner-icon">
|
||||
<text>🏮</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去抽取新年运势</text>
|
||||
<text class="banner-desc">每日一签，开启你的新年好运</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToGreeting">
|
||||
<view class="banner-icon">
|
||||
<text>🧧</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去制作新年贺卡</text>
|
||||
<text class="banner-desc">定制专属祝福，传递浓浓年味</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToAvatar">
|
||||
<view class="banner-icon">
|
||||
<text>🖼</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去挑选新年头像</text>
|
||||
<text class="banner-desc">精选新年头像，让手机也过年</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-divider">
|
||||
<view class="line"></view>
|
||||
<text class="footer-text">2026 HAPPY NEW YEAR</text>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="footer-sub">新春祝福 · 传递温情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getPageDetail } from "@/api/system";
|
||||
import { getWallpaperRecommendList } from "@/api/wallpaper";
|
||||
import { saveViewRequest } from "@/utils/common.js";
|
||||
|
||||
const navHeight = getBavBarHeight();
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
const detailData = ref({
|
||||
imageUrl: "",
|
||||
from: null,
|
||||
});
|
||||
const recommendList = ref([]);
|
||||
const shareToken = ref("");
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.shareToken) {
|
||||
shareToken.value = options.shareToken;
|
||||
await fetchDetail();
|
||||
}
|
||||
fetchRecommend();
|
||||
});
|
||||
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const res = await getPageDetail(shareToken.value);
|
||||
saveViewRequest(shareToken.value, "wallpaper_download", res.id);
|
||||
if (res) {
|
||||
detailData.value = res;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch detail", e);
|
||||
uni.showToast({
|
||||
title: "获取详情失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRecommend = async () => {
|
||||
try {
|
||||
const res = await getWallpaperRecommendList();
|
||||
recommendList.value = res;
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch recommendations", e);
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const goToIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/wallpaper/index",
|
||||
});
|
||||
};
|
||||
|
||||
const goToFortune = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/fortune/index",
|
||||
});
|
||||
};
|
||||
|
||||
const previewImage = () => {
|
||||
// if (detailData.value.imageUrl) {
|
||||
// uni.previewImage({
|
||||
// urls: [detailData.value.imageUrl],
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const onRecommendClick = () => {
|
||||
goToIndex();
|
||||
};
|
||||
|
||||
const goToGreeting = () => {
|
||||
uni.switchTab({ url: "/pages/make/index" });
|
||||
};
|
||||
|
||||
const goToAvatar = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/avatar/index",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #ffffff;
|
||||
|
||||
.nav-content {
|
||||
height: 44px; // Standard nav height
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
.back-icon {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.sharer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
.nickname {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 12px;
|
||||
color: #ff3b30;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #f5f5f5;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.preview-badge {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
background-color: #fafafa; // Placeholder color
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border-radius: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.primary-btn {
|
||||
background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
|
||||
}
|
||||
|
||||
&.secondary-btn {
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.more-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #ff3b30;
|
||||
|
||||
.arrow {
|
||||
margin-left: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-inner {
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.scroll-img {
|
||||
width: 100%;
|
||||
height: 355rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fortune-banner-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.wallpaper-banner {
|
||||
background: #fafafa;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.banner-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.banner-icon text {
|
||||
font-size: 40rpx;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.banner-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.footer-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.line {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-sub {
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -54,9 +54,14 @@
|
||||
>
|
||||
<text class="icon">↓</text>
|
||||
</view>
|
||||
<view class="action-btn share" @tap.stop="shareWallpaper(item)">
|
||||
<button
|
||||
class="action-btn share"
|
||||
open-type="share"
|
||||
:data-item="item"
|
||||
@tap.stop="shareWallpaper(item)"
|
||||
>
|
||||
<text class="icon">➦</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -75,13 +80,28 @@
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getWallpaperList, getWallpaperCategoryList } from "@/api/wallpaper.js";
|
||||
import {
|
||||
saveRemoteImageToLocal,
|
||||
saveRecordRequest,
|
||||
getShareToken,
|
||||
} from "@/utils/common.js";
|
||||
import { onShareAppMessage } from "@dcloudio/uni-app";
|
||||
import { getShareReward, abilityCheck } from "@/api/system.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
|
||||
const categories = ref([]);
|
||||
const currentCategoryId = ref(null);
|
||||
@@ -91,6 +111,26 @@ const loading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const isRefreshing = ref(false);
|
||||
|
||||
onShareAppMessage(async (options) => {
|
||||
getShareReward({ scene: "wallpaper_download" });
|
||||
if (options.from === "button") {
|
||||
const shareTokenRes = await getShareToken(
|
||||
"wallpaper_download",
|
||||
options?.target?.dataset?.item?.id,
|
||||
);
|
||||
return {
|
||||
title: "分享精美壁纸",
|
||||
path: `/pages/wallpaper/detail?shareToken=${shareTokenRes.shareToken}`,
|
||||
};
|
||||
} else {
|
||||
const shareTokenRes = await getShareToken("wallpaper_download", "");
|
||||
return {
|
||||
title: "新春祝福",
|
||||
path: `/pages/index/index?shareToken=${shareTokenRes.shareToken}`,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchCategories();
|
||||
});
|
||||
@@ -157,6 +197,10 @@ const loadMore = () => {
|
||||
loadWallpapers();
|
||||
};
|
||||
|
||||
const handleLogind = async () => {
|
||||
// Logic after successful login if needed
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
isRefreshing.value = true;
|
||||
loadWallpapers(true);
|
||||
@@ -170,46 +214,37 @@ const previewImage = (index) => {
|
||||
});
|
||||
};
|
||||
|
||||
const downloadWallpaper = (item) => {
|
||||
uni.showLoading({ title: "下载中..." });
|
||||
uni.downloadFile({
|
||||
url: item.url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存成功", icon: "success" });
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
console.error(err);
|
||||
uni.showToast({ title: "保存失败", icon: "none" });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
const downloadWallpaper = async (item) => {
|
||||
if (!isLoggedIn.value) {
|
||||
loginPopupRef.value.open();
|
||||
return;
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
},
|
||||
|
||||
const abilityRes = await abilityCheck("wallpaper_download");
|
||||
if (!abilityRes.canUse) {
|
||||
if (
|
||||
abilityRes?.blockType === "need_share" &&
|
||||
abilityRes?.message === "分享可继续"
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "分享给好友即可下载",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: "您今日壁纸下载次数已用完，明日再试",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({ title: "下载中..." });
|
||||
await saveRemoteImageToLocal(item.imageUrl);
|
||||
saveRecordRequest("", item.id, "wallpaper_download", item.imageUrl);
|
||||
};
|
||||
|
||||
const shareWallpaper = (item) => {
|
||||
// uni.share is for App, specific provider.
|
||||
// For general sharing, we might just preview it or use button open-type="share" if it was a button component.
|
||||
// Since this is a custom UI, we can guide user to preview and long press, or just preview.
|
||||
// Or if on MP-Weixin, show share menu.
|
||||
uni.previewImage({
|
||||
urls: [item.url],
|
||||
});
|
||||
// uni.showToast({ title: '长按图片发送给朋友', icon: 'none' });
|
||||
};
|
||||
const shareWallpaper = (item) => {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// const BASE_URL = 'https://apis.lihailezzc.com'
|
||||
// const BASE_URL = "https://api.ai-meng.com";
|
||||
// const BASE_URL = 'http://127.0.0.1:3999'
|
||||
const BASE_URL = "http://192.168.1.3:3999";
|
||||
// const BASE_URL = "http://192.168.31.253:3999";
|
||||
|
||||
Reference in New Issue
Block a user