buddhism/pages/personalCenter/myCollection.vue

<template>
  <view class="page">
    <base-background />
    <custom-navbar ref="customNavbar" title="我的收藏" />
    <view class="header">
      <view>
        <view class="container">
          <!-- 滚动内容区域 -->
          <scroll-view class="scroll-content">
            <!-- 动态渲染往生者信息 -->
            <view
              v-for="(item, index) in winB_List"
              :key="item.id"
              class="memorial-text"
            >
              <!-- 顶部信息 -->
              <view class="memorial-header">
                <view class="location">{{ item.memorialCode }}</view>
                <view
                  style="color: #522510"
                  @click="goToMemorialHall(item.memorialId)"
                  >查看详细
                  <u-icon name="arrow-right"></u-icon>
                </view>
              </view>

              <!-- 刻铭标题 -->
              <view class="title">刻铭</view>

              <view class="flex-row">
                <view class="name">
                  <view class="honorific"
                    >{{ item.deceasedVOList.honorific }}
                  </view>
                  <view class="fullName"
                    >{{ item.deceasedVOList.fullName }}
                  </view>
                </view>
                <view class="date">
                  <view class="bornDate">
                    <view>生</view>
                    <view>{{ item.deceasedVOList.bornYear }}</view>
                    <view class="time">年</view>
                    <view>{{ item.deceasedVOList.bornMonths }}</view>
                    <view class="time">月</view>
                    <view>{{ item.deceasedVOList.bornDay }}</view>
                    <view class="time">日</view>
                  </view>
                  <view class="diedDate">
                    <view>卒</view>
                    <view>{{ item.deceasedVOList.diedYear || "吉" }}</view>
                    <view class="time">年</view>
                    <view>{{ item.deceasedVOList.diedMonths || "吉利" }}</view>
                    <view class="time">月</view>
                    <view>{{ item.deceasedVOList.diedDay || "吉" }}</view>
                    <view class="time">日</view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 捐赠弹窗 -->
    </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: {
    goToMemorialHall(id) {
      uni.navigateTo({
        url: `/pages/memorial/memorialHall?id=${id}`,
      });
    },
  },
  onReachBottom() {
    this.winB_LoadMore();
    console.log("加载更多");
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30rpx 30rpx 0;
  min-height: 100%;
}

.container {
  width: 100%;
  //border: 1px  red solid;
  height: 862rpx;
  //padding: 34rpx 32rpx 0 32rpx;
  display: flex;
  flex-direction: column;

  .memorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //border: 1px  red solid;
    padding-left: 2rpx;
    height: 54rpx;
    margin-bottom: 26rpx;

    .location {
      font-weight: 500;
      font-size: 40rpx;
      color: #522510;
      line-height: 54rpx;
      text-align: left;
    }
  }

  .title {
    margin-bottom: 22rpx;
    font-weight: 500;
    font-size: 40rpx;
    color: #522510;
    line-height: 54rpx;
    text-align: left;
    //border: 1px  red solid;
  }

  .scroll-content {
  }

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx; /* Adjust height as needed */
    margin-bottom: 22rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #522510;
  }

  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    margin-bottom: 22rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }

  .memorial-text {
    background: #fffbf5;
    display: flex;
    margin-bottom: 38rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4c382e;
    line-height: 32rpx;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #c7a26d;
    border-radius: 15rpx;
    padding: 20rpx;

    .flex-row {
      display: flex;
      flex-direction: row;
    }

    .name {
      margin-top: 4rpx;
      display: flex;
      margin-right: 34rpx;

      .honorific {
        font-weight: 400;
        font-size: 24rpx;
        color: #4c382e;
        line-height: 32rpx;
        letter-spacing: 1px;
        text-align: left;
        margin-right: 16rpx;
      }

      .fullName {
        font-weight: 400;
        font-size: 28rpx;
        color: #4c382e;
        line-height: 32rpx;
        letter-spacing: 1px;
        text-align: left;
      }
    }

    .date {
      color: #522510;

      .bornDate {
        gap: 16rpx;
        display: flex;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 38rpx;
        letter-spacing: 1px;
        text-align: left;
      }

      .diedDate {
        gap: 16rpx;
        display: flex;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 38rpx;
        letter-spacing: 1px;
        text-align: left;
      }
    }
  }

  .time {
    font-weight: 500;
    font-size: 32rpx;
  }

  .contact-info {
    font-weight: 400;
    font-size: 28rpx;
    color: #4c382e;
    line-height: 38rpx;
    letter-spacing: 1px;
    text-align: left;
    padding-bottom: 32rpx;
  }
}
</style>