我的收藏：等待接口
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() {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -214,6 +214,12 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personalCenter/myCollection",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/pieChart/pieChart",
|
||||
"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