我的收藏：成功接入
This commit is contained in:
WindowBird
parent
87af146096
commit
62f77290e3
|
|
@ -10,7 +10,7 @@
|
|||
:search-icon="CommonEnum.SEARCH"
|
||||
:width="'682rpx'"
|
||||
btn-text="搜索"
|
||||
placeholder="请输入姓名或分区进行查找"
|
||||
placeholder="请输入姓名"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,54 +3,67 @@
|
|||
<base-background />
|
||||
<custom-navbar ref="customNavbar" title="我的收藏" />
|
||||
<view class="header">
|
||||
<template>
|
||||
<view class="blessing-container">
|
||||
<!-- 标题区域 -->
|
||||
|
||||
<!-- 祈福卡片列表 -->
|
||||
<view class="blessing-list">
|
||||
<view>
|
||||
<view class="container">
|
||||
<!-- 滚动内容区域 -->
|
||||
<scroll-view class="scroll-content">
|
||||
<!-- 动态渲染往生者信息 -->
|
||||
<view
|
||||
v-for="(item, index) in winB_List"
|
||||
:key="index"
|
||||
class="blessing-card"
|
||||
@click="goToMemorialHall(item.memorialId)"
|
||||
:key="item.id"
|
||||
class="memorial-text"
|
||||
>
|
||||
<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 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="wish-content">
|
||||
<text class="wish-label">心愿内容</text>
|
||||
<text class="wish-text">{{ item.content }}</text>
|
||||
</view>
|
||||
<!-- 刻铭标题 -->
|
||||
<view class="title">刻铭</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view
|
||||
v-if="index < winB_List.length - 1"
|
||||
class="card-divider"
|
||||
></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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 捐赠弹窗 -->
|
||||
<!-- 捐赠弹窗 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -96,10 +109,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f5f0e7;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -108,195 +117,164 @@ page {
|
|||
|
||||
.header {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding: 30rpx 30rpx 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.blessing-container {
|
||||
padding: 30rpx;
|
||||
//background-color: #faf8f5; // 浅米色背景
|
||||
min-height: 100vh;
|
||||
.container {
|
||||
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 {
|
||||
//border: 1px red solid;
|
||||
height: 862rpx;
|
||||
//padding: 34rpx 32rpx 0 32rpx;
|
||||
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 {
|
||||
.memorial-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
//border: 1px red solid;
|
||||
padding-left: 2rpx;
|
||||
height: 54rpx;
|
||||
margin-bottom: 26rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.location {
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #522510;
|
||||
line-height: 54rpx;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
.title {
|
||||
margin-bottom: 22rpx;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 40rpx;
|
||||
color: #522510;
|
||||
line-height: 54rpx;
|
||||
text-align: left;
|
||||
//border: 1px red solid;
|
||||
}
|
||||
}
|
||||
|
||||
.wish-content {
|
||||
.wish-label {
|
||||
.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: #666;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
color: #522510;
|
||||
}
|
||||
|
||||
.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;
|
||||
.empty-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.blessing-card {
|
||||
padding: 24rpx;
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.blessing-time {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-size: 26rpx !important;
|
||||
padding: 6rpx 16rpx !important;
|
||||
.time {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
.contact-info {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #4c382e;
|
||||
line-height: 38rpx;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import debounce from "uview-ui/libs/function/debounce";
|
|||
const ENV_CONFIG = {
|
||||
release: {
|
||||
// 正式版
|
||||
// baseUrl: "http://192.168.2.158:4501",
|
||||
baseUrl: "https://tech-ape.top/prod-api",
|
||||
baseUrl: "http://192.168.2.158:4501",
|
||||
// baseUrl: "https://tech-ape.top/prod-api",
|
||||
appId: 1,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user