我的收藏：等待接口
This commit is contained in:
WindowBird
parent
143aab3230
commit
7f24fe6918
|
|
@ -51,6 +51,12 @@ export function checkIsCollected(memorialId) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getUserCollection() {
|
||||||
|
return request({
|
||||||
|
url: "/app/collect",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 获取套餐列表
|
// 获取套餐列表
|
||||||
export function getPackageList() {
|
export function getPackageList() {
|
||||||
return request({
|
return request({
|
||||||
|
|
|
||||||
|
|
@ -214,6 +214,12 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/personalCenter/myCollection",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/pieChart/pieChart",
|
"path": "pages/pieChart/pieChart",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
295
pages/personalCenter/myCollection.vue
Normal file
295
pages/personalCenter/myCollection.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<base-background />
|
||||||
|
<custom-navbar ref="customNavbar" title="我的收藏" />
|
||||||
|
<view class="header">
|
||||||
|
<template>
|
||||||
|
<view class="blessing-container">
|
||||||
|
<!-- 标题区域 -->
|
||||||
|
|
||||||
|
<!-- 祈福卡片列表 -->
|
||||||
|
<view class="blessing-list">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in winB_List"
|
||||||
|
:key="index"
|
||||||
|
class="blessing-card"
|
||||||
|
>
|
||||||
|
<view class="blessing-time-type">
|
||||||
|
<!-- 时间 -->
|
||||||
|
<text class="blessing-time">{{ item.prayTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 祈福人信息 -->
|
||||||
|
<view class="blessing-info">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">称谓</text>
|
||||||
|
<text class="info-value">{{ item.memorialName }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">编号</text>
|
||||||
|
<text class="info-value">{{ item.memorialCode }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 心愿内容 -->
|
||||||
|
<view class="wish-content">
|
||||||
|
<text class="wish-label">心愿内容</text>
|
||||||
|
<text class="wish-text">{{ item.content }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<view
|
||||||
|
v-if="index < winB_List.length - 1"
|
||||||
|
class="card-divider"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 捐赠弹窗 -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createPagination } from "../../composables/winB_Pagination";
|
||||||
|
import CommonEnum from "../../enum/common";
|
||||||
|
import { getUserCollection } from "../../api/memorial/memorial";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
CommonEnum() {
|
||||||
|
return CommonEnum;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [
|
||||||
|
createPagination({
|
||||||
|
fetchData: getUserCollection,
|
||||||
|
mode: "loadMore",
|
||||||
|
pageSize: 5,
|
||||||
|
autoLoad: false, // 设置为 false，不自动加载
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时获取数据
|
||||||
|
this.winB_GetList();
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
onReachBottom() {
|
||||||
|
this.winB_LoadMore();
|
||||||
|
console.log("加载更多");
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background: #f5f0e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-container {
|
||||||
|
padding: 30rpx;
|
||||||
|
//background-color: #faf8f5; // 浅米色背景
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-header {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-subtitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #c7a26d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-time-type {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 2px solid #f8f8f8;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-type {
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
|
||||||
|
.type-text {
|
||||||
|
background-color: #8b4513; // 深棕色背景
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-info {
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-content {
|
||||||
|
.wish-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: #eee;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.blessing-container {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-card {
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-text {
|
||||||
|
font-size: 26rpx !important;
|
||||||
|
padding: 6rpx 16rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label,
|
||||||
|
.info-value {
|
||||||
|
font-size: 26rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-text {
|
||||||
|
font-size: 28rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色模式支持 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.blessing-container {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-card {
|
||||||
|
background-color: #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blessing-time {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-label {
|
||||||
|
color: #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wish-text {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-divider {
|
||||||
|
background-color: #555 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user