From ccc9b518da3491c128df26996a71bd0ff4b5f296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E8=AF=9A?= <1009578407@qq.com> Date: Wed, 26 Aug 2026 15:01:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=81=8C=E5=B7=A5=E7=A6=8F=E5=88=A9ui?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../platform/zhghh5/welfare/mine/list.html | 269 +++++++++++++++--- 1 file changed, 227 insertions(+), 42 deletions(-) diff --git a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html index 2fe646ca..63039c7e 100644 --- a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html +++ b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html @@ -167,9 +167,136 @@ layout("/layouts/platform_h5.html"){ } .welfare-list-card__summary { - display: flex; - min-height: 120px; padding: 14px; + box-sizing: border-box; + } + + .welfare-list-card__choices-wrap { + display: flex; + min-width: 0; + margin-top: 10px; + padding-top: 2px; + align-items: center; + border-top: 1px solid #edf1f6; + } + + .welfare-list-card__choices { + display: flex; + min-width: 0; + flex: 1; + gap: 10px; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + } + + .welfare-list-card__choices::-webkit-scrollbar { + display: none; + } + + .welfare-list-card__choices .welfare-inline-selection { + width: 82px; + min-width: 82px; + min-height: 112px; + padding: 8px 0; + flex-direction: column; + align-items: stretch; + border-bottom: 0; + } + + .welfare-list-card__choices .welfare-inline-selection__image { + width: 82px; + height: 64px; + margin-right: 0; + } + + .welfare-list-card__choices .welfare-inline-selection__image--name { + display: flex; + padding: 8px; + align-items: center; + justify-content: center; + color: #9aa7b8; + background: linear-gradient(145deg, #f7faff 0%, #edf4fc 100%); + font-size: 12px; + line-height: 17px; + text-align: center; + box-sizing: border-box; + } + + .welfare-list-card__choices .welfare-inline-selection__image--name span { + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .welfare-list-card__choices .welfare-inline-selection__content { + margin-top: 6px; + } + + .welfare-list-card__choices .welfare-inline-selection__name { + font-weight: 400; + } + + .welfare-list-card__choices .welfare-inline-selection__meta { + margin-top: 5px; + } + + .welfare-list-card__order-head { + display: flex; + min-width: 0; + align-items: center; + } + + .welfare-list-card__order-info { + min-width: 0; + flex: 1; + } + + .welfare-list-card__select-time { + display: flex; + margin-top: 5px; + align-items: center; + color: #8491a6; + font-size: 12px; + line-height: 18px; + } + + .welfare-list-card__select-time .van-icon { + margin-right: 5px; + color: #8da2bd; + font-size: 13px; + } + + .welfare-list-card__order-status { + margin-left: 10px; + flex: none; + color: #1989fa; + font-size: 13px; + } + + .welfare-list-card__choices-arrow { + margin-left: 10px; + flex: none; + transition: transform .2s ease; + } + + .welfare-list-card__choices-arrow.is-expanded { + transform: rotate(90deg); + } + + .welfare-list-card__choices > .welfare-inline-loading, + .welfare-list-card__choices > .welfare-inline-empty { + width: 100%; + flex: none; + } + + .welfare-list-card__product { + display: flex; + min-width: 0; + margin-top: 12px; + padding: 0; align-items: center; box-sizing: border-box; } @@ -231,7 +358,7 @@ layout("/layouts/platform_h5.html"){ .welfare-list-card__body { position: relative; min-width: 0; - padding: 4px 0 4px 14px; + padding-left: 12px; flex: 1; box-sizing: border-box; } @@ -250,11 +377,29 @@ layout("/layouts/platform_h5.html"){ color: #202938; font-size: 16px; line-height: 23px; - font-weight: 600; + font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } + .welfare-list-card__selection-title { + display: -webkit-box; + overflow: hidden; + color: #263548; + font-size: 14px; + line-height: 20px; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .welfare-list-card__selection-count { + margin-top: 12px; + color: #8491a6; + font-size: 13px; + text-align: right; + } + .welfare-list-card__status { display: inline-flex; min-width: 54px; @@ -302,6 +447,32 @@ layout("/layouts/platform_h5.html"){ white-space: nowrap; } + .welfare-list-card__actions { + display: flex; + min-height: 42px; + margin-top: 10px; + padding-top: 10px; + align-items: center; + justify-content: flex-end; + border-top: 1px solid #edf1f6; + box-sizing: border-box; + } + + .welfare-list-card__detail-button { + display: inline-flex; + height: 30px; + padding: 0 14px; + align-items: center; + justify-content: center; + border: 1px solid #1989fa; + border-radius: 16px; + color: #1989fa; + background-color: #fff; + font-size: 13px; + line-height: 28px; + box-sizing: border-box; + } + .welfare-list-card__time .van-icon { margin-right: 5px; flex: none; @@ -612,42 +783,37 @@ layout("/layouts/platform_h5.html"){ class="welfare-list-card" >
- - - - -
-
- - 暂无图片
-
-
-
{{ row.name }}
- -
-
- - 选择时间：{{ $moment(row.selectTime).format('YYYY-MM-DD HH:mm') }} -
-
- - 选择时间：暂无记录 +
+
+
+ 加载中... +
+ +
暂无福利选择记录
+
@@ -692,14 +858,13 @@ layout("/layouts/platform_h5.html"){
我的选择
- +
{{ item.optionName || '未知选项' }}
× {{ item.selectNum || 0 }} - {{ formatDate(item.selectTime) }}
@@ -771,6 +936,7 @@ layout("/layouts/platform_h5.html"){ selections: [] })) this.tableData = this.tableData.concat(list) + list.forEach((row) => this.loadRowSelections(row)) this.pageForm.totalCount = res.data.totalCount || 0 if (this.tableData.length >= this.pageForm.totalCount) { this.finished = true @@ -790,6 +956,14 @@ layout("/layouts/platform_h5.html"){ return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId}) }, + /** + * 根据列表接口返回的福利选择摘要计算卡片展示项数，不额外请求接口。 + */ + getSelectionCount(row) { + const gist = row.gist_list || row.gistList || "" + return gist ? gist.split(",").filter(Boolean).length : 1 + }, + /** * 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。 */ @@ -798,12 +972,11 @@ layout("/layouts/platform_h5.html"){ }, /** - * 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。 + * 加载福利项目及用户选择数据，供卡片直接展示已选择的福利明细。 * @param row 当前福利项目 */ - async toggleRow(row) { - row.expanded = !row.expanded - if (!row.expanded || row.detailLoaded || row.detailLoading) return + async loadRowSelections(row) { + if (row.detailLoaded || row.detailLoading) return this.$set(row, "detailLoading", true) try { const [projectRes, selectionRes] = await Promise.all([ @@ -829,6 +1002,18 @@ layout("/layouts/platform_h5.html"){ } }, + /** + * 展开或收起当前福利卡片的内容详情。 + * @param row 当前福利项目 + */ + toggleRow(row) { + row.expanded = !row.expanded + }, + + previewSelectionImage(imageUrl) { + if (imageUrl) vant.ImagePreview([imageUrl]) + }, + /** * 获取当前福利的首条选择记录，用于展示联系电话和收货地址。 * @param row 当前福利项目 @@ -855,7 +1040,7 @@ layout("/layouts/platform_h5.html"){ * @return {string} 选择时间文本 */ formatDate(dateTime) { - return dateTime ? this.$moment(dateTime).format("MM-DD HH:mm") : "时间未知" + return dateTime ? this.$moment(dateTime).format("YYYY-MM-DD HH:mm") : "时间未知" }, /**