499 lines
10 KiB
Vue
499 lines
10 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<custom-navbar ref="customNavbar" title="祈福记录" />
|
||
<view class="search-filter-row">
|
||
<search-box
|
||
v-model="filterOptions.name"
|
||
:width="'100%'"
|
||
btn-text="搜索"
|
||
placeholder="请输入搜索关键词"
|
||
@search="onSearch()"
|
||
/>
|
||
<view class="filter-btn" @click="show = true">
|
||
<image :src="CommonEnum.FILTER" class="filter-icon" mode="aspectFit" />
|
||
<text class="filter-text">筛选</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
v-if="filterOptions.isOthers || filterOptions.type"
|
||
class="filter-tips"
|
||
>
|
||
{{ filterOptions.isOthers | prayerIsOthersFilter
|
||
}}{{ filterOptions.type | prayerTypeFilter }}
|
||
</view>
|
||
<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 class="blessing-type">
|
||
<text class="type-text"
|
||
>{{ item.type | prayerTypeFilter }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 祈福人信息 -->
|
||
<view class="blessing-info">
|
||
<view class="info-item">
|
||
<text class="info-label">祈福人姓名</text>
|
||
<text class="info-value">{{ item.name }}</text>
|
||
</view>
|
||
|
||
<view class="info-item">
|
||
<text class="info-label">是否为他人祈福</text>
|
||
<text class="info-value"
|
||
>{{ item.isOthers === "1" ? "是" : "否" }}
|
||
</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>
|
||
<template>
|
||
<u-select
|
||
v-model="show"
|
||
:list="list"
|
||
confirm-color="#BFA16B"
|
||
confirm-text="筛选"
|
||
mode="mutil-column"
|
||
@confirm="confirm"
|
||
></u-select>
|
||
</template>
|
||
<!-- <u-popup-->
|
||
<!-- v-model="show"-->
|
||
<!-- border-radius="30"-->
|
||
<!-- height="880rpx"-->
|
||
<!-- mode="bottom"-->
|
||
<!-- width="750rpx"-->
|
||
<!-- z-index="9999"-->
|
||
<!-- >-->
|
||
<!-- <view style="flex-direction: column; display: flex">-->
|
||
<!-- <view-->
|
||
<!-- style="-->
|
||
<!-- display: flex;-->
|
||
<!-- justify-content: space-around;-->
|
||
<!-- align-items: center;-->
|
||
<!-- "-->
|
||
<!-- >-->
|
||
<!-- <text> 是否为他人祈福</text>-->
|
||
<!-- <u-switch-->
|
||
<!-- v-model="filterOptions.isOthers"-->
|
||
<!-- activeColor="#C7A26D"-->
|
||
<!-- ></u-switch>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <!– methods –>-->
|
||
<!-- </u-popup>-->
|
||
|
||
<!-- 捐赠弹窗 -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { createPagination } from "../../composables/winB_Pagination";
|
||
import { getUserPrayerList } from "../../api/pray/pray";
|
||
import CommonEnum from "../../enum/common";
|
||
import SearchBox from "../../components/search-box/search-box.vue";
|
||
|
||
export default {
|
||
components: { SearchBox },
|
||
computed: {
|
||
CommonEnum() {
|
||
return CommonEnum;
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
show1: false,
|
||
filterOptions: {
|
||
isOthers: "",
|
||
type: "",
|
||
name: "",
|
||
},
|
||
list: [
|
||
[
|
||
{
|
||
value: "0",
|
||
label: "所有",
|
||
},
|
||
{
|
||
value: "1",
|
||
label: "为他人",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "为自己",
|
||
},
|
||
],
|
||
[
|
||
{ value: 0, label: "所有" },
|
||
{ value: 1, label: "学业" },
|
||
{ value: 2, label: "健康" },
|
||
{ value: 3, label: "姻缘" },
|
||
{ value: 4, label: "财运" },
|
||
{ value: 5, label: "消灾" },
|
||
],
|
||
],
|
||
};
|
||
},
|
||
filters: {
|
||
prayerTypeFilter(value) {
|
||
const types = {
|
||
1: "学业",
|
||
2: "健康",
|
||
3: "姻缘",
|
||
4: "财运",
|
||
5: "消灾",
|
||
};
|
||
return types[value] || "";
|
||
},
|
||
prayerIsOthersFilter(value) {
|
||
const types = {
|
||
1: "为他人",
|
||
2: "为自己",
|
||
};
|
||
return types[value] || "";
|
||
},
|
||
},
|
||
|
||
mixins: [
|
||
createPagination({
|
||
fetchData: getUserPrayerList,
|
||
mode: "loadMore",
|
||
pageSize: 5,
|
||
autoLoad: false, // 设置为 false，不自动加载
|
||
}),
|
||
],
|
||
onLoad() {
|
||
// 页面加载时获取数据
|
||
this.winB_GetList();
|
||
},
|
||
methods: {
|
||
onSearch() {
|
||
this.winB_UpdateParams(this.filterOptions);
|
||
},
|
||
// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
|
||
confirm(e) {
|
||
if (e[0].value === "0") {
|
||
this.filterOptions.isOthers = "";
|
||
} else {
|
||
this.filterOptions.isOthers = e[0].value;
|
||
}
|
||
if (e[1].value === 0) {
|
||
this.filterOptions.type = "";
|
||
} else {
|
||
this.filterOptions.type = e[1].value;
|
||
}
|
||
|
||
this.onSearch();
|
||
},
|
||
|
||
// 加载页面数据
|
||
async loadPageData() {
|
||
this.loading = true;
|
||
try {
|
||
// TODO: 调用页面数据API
|
||
// const response = await getPageData()
|
||
// 模拟加载
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 1000);
|
||
} catch (error) {
|
||
console.error("获取页面数据失败:", error);
|
||
this.loading = false;
|
||
}
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
this.winB_LoadMore();
|
||
console.log("加载更多");
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #f5f0e7;
|
||
}
|
||
|
||
.page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 0 15rpx;
|
||
}
|
||
|
||
.filter-tips {
|
||
justify-content: center;
|
||
display: flex;
|
||
width: 680rpx;
|
||
margin: 0 auto;
|
||
background-color: #8b4513; // 深棕色背景
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.search-filter-row {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 10rpx 0 10rpx 0;
|
||
padding: 0 35rpx;
|
||
|
||
.search-filter-row search-box {
|
||
flex: 1;
|
||
}
|
||
|
||
.filter-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
//padding: 0 16rpx;
|
||
height: 70rpx;
|
||
border-radius: 10rpx;
|
||
cursor: pointer;
|
||
|
||
.filter-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.filter-text {
|
||
color: #6b4a1b;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|