From a92f75730de247c963f58ae32d1676a813862867 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E8=AF=9A?= <1009578407@qq.com> Date: Tue, 1 Sep 2026 15:04:19 +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=EF=BC=8C=E6=88=91=E7=9A=84=E7=A6=8F=E5=88=A9?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9=E7=A6=8F=E5=88=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../platform/zhghh5/welfare/mine/list.html | 199 +---- .../platform/zhghh5/welfare/select/index.html | 722 ++++++++++++++++-- .../platform/zhghh5/welfare/select/list.html | 34 - .../zhghh5/welfare/userChoose/index.html | 1 - 4 files changed, 681 insertions(+), 275 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 2e9605f4..dfa3f092 100644 --- a/src/main/resources/views/platform/zhghh5/welfare/mine/list.html +++ b/src/main/resources/views/platform/zhghh5/welfare/mine/list.html @@ -278,11 +278,6 @@ layout("/layouts/platform_h5.html"){ .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, @@ -446,32 +441,6 @@ 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; @@ -486,76 +455,6 @@ layout("/layouts/platform_h5.html"){ font-size: 17px; } - .welfare-list-card__expanded { - padding: 12px; - border-top: 1px solid #edf1f6; - background-color: #f8fbff; - } - - .welfare-inline-card { - margin-bottom: 10px; - padding: 0 12px; - overflow: hidden; - border-radius: 10px; - background-color: #fff; - box-shadow: 0 4px 14px rgba(55, 85, 126, .06); - } - - .welfare-inline-card:last-child { - margin-bottom: 0; - } - - .welfare-inline-card__title { - position: relative; - height: 42px; - padding-left: 8px; - border-bottom: 1px solid #edf1f6; - color: #263548; - font-size: 14px; - font-weight: 600; - line-height: 42px; - } - - .welfare-inline-card__title::before { - position: absolute; - top: 14px; - bottom: 14px; - left: 0; - width: 3px; - border-radius: 2px; - background-color: #1989fa; - content: ''; - } - - .welfare-inline-row { - display: flex; - min-height: 40px; - padding: 6px 0; - align-items: center; - border-bottom: 1px solid #edf1f6; - box-sizing: border-box; - } - - .welfare-inline-row:last-child { - border-bottom: 0; - } - - .welfare-inline-row__label { - width: 72px; - flex: none; - color: #7f8da1; - font-size: 12px; - } - - .welfare-inline-row__value { - min-width: 0; - flex: 1; - color: #263548; - font-size: 13px; - line-height: 19px; - word-break: break-word; - } - .welfare-inline-selection { display: flex; min-height: 72px; @@ -780,8 +679,10 @@ layout("/layouts/platform_h5.html"){ v-for="row in tableData" :key="row.id" class="welfare-list-card" + role="button" + @click="modifySelection(row)" > -
+
{{ row.name }}
@@ -812,66 +713,9 @@ layout("/layouts/platform_h5.html"){
暂无福利选择记录
- +
- -
-
- 加载中... -
- -
@@ -928,10 +772,8 @@ layout("/layouts/platform_h5.html"){ if (res.code !== 0 || !res.data) return const list = (res.data.list || []).map((row) => ({ ...row, - expanded: false, detailLoading: false, detailLoaded: false, - projectInfo: null, selections: [] })) this.tableData = this.tableData.concat(list) @@ -993,7 +835,6 @@ layout("/layouts/platform_h5.html"){ description: option.description } }) : [] - this.$set(row, "projectInfo", projectInfo) this.$set(row, "selections", selections) this.$set(row, "detailLoaded", true) } finally { @@ -1001,36 +842,8 @@ layout("/layouts/platform_h5.html"){ } }, - /** - * 展开或收起当前福利卡片的内容详情。 - * @param row 当前福利项目 - */ - toggleRow(row) { - row.expanded = !row.expanded - }, - - previewSelectionImage(imageUrl) { - if (imageUrl) vant.ImagePreview([imageUrl]) - }, - - /** - * 获取当前福利的首条选择记录，用于展示联系电话和收货地址。 - * @param row 当前福利项目 - * @return {Object} 首条选择记录；无记录时返回空对象 - */ - firstSelection(row) { - return row.selections && row.selections.length > 0 ? row.selections[0] : {} - }, - - /** - * 格式化项目起止时间。 - * @param startTime 开始时间 - * @param endTime 结束时间 - * @return {string} 起止时间文本 - */ - formatRange(startTime, endTime) { - if (!startTime || !endTime) return "暂无" - return this.$moment(startTime).format("YYYY-MM-DD HH:mm") + " 至 " + this.$moment(endTime).format("YYYY-MM-DD HH:mm") + modifySelection(row) { + this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + (row.projectId || row.id) + "&from=mine") }, /** diff --git a/src/main/resources/views/platform/zhghh5/welfare/select/index.html b/src/main/resources/views/platform/zhghh5/welfare/select/index.html index 185ac32d..3812c97e 100644 --- a/src/main/resources/views/platform/zhghh5/welfare/select/index.html +++ b/src/main/resources/views/platform/zhghh5/welfare/select/index.html @@ -26,6 +26,10 @@ layout("/layouts/platform_h5.html"){ background: var(--bg-color); } + .page-container.has-footer-contact { + padding-bottom: calc(126px + env(safe-area-inset-bottom)); + } + .page-container .van-nav-bar { background-color: #fff; } @@ -383,27 +387,6 @@ layout("/layouts/platform_h5.html"){ text-align: center; } - .welfare-option-selected-mark { - position: absolute; - right: 0; - top: 0; - z-index: 2; - display: flex; - width: 32px; - height: 32px; - padding: 0 0 4px 4px; - align-items: center; - justify-content: center; - border-radius: 0 11px 0 18px; - color: #fff; - background: #35b878; - box-shadow: none; - box-sizing: border-box; - font-size: 14px; - line-height: 32px; - text-align: center; - } - .welfare-deadline { margin: 0 12px 8px; padding: 9px 11px; @@ -742,10 +725,6 @@ layout("/layouts/platform_h5.html"){ backdrop-filter: blur(8px); } - .van-sticky--fixed .welfare-section-title { - margin-top: 8px; - } - .welfare-section-title .title-text { position: relative; display: flex; @@ -773,10 +752,482 @@ layout("/layouts/platform_h5.html"){ font-weight: 600; } + /* 项目封面保持单图全宽展示，下拉时通过动态高度逐步露出完整画面。 */ + .welfare-header { + height: 232px; + margin: 0; + overflow: hidden; + border-radius: 0; + box-shadow: none; + transition: height .28s ease-out; + } + + .welfare-header.is-pulling { + transition: none; + } + + .welfare-header.is-expanded { + background-color: #f3f7fd; + } + + .welfare-header-img .van-image__img { + object-position: center; + } + + .welfare-cover-pull-hint { + position: absolute; + right: 0; + bottom: 28px; + left: 0; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + color: rgba(255, 255, 255, .92); + font-size: 12px; + line-height: 18px; + text-shadow: 0 1px 5px rgba(20, 50, 88, .5); + pointer-events: none; + } + + .welfare-cover-pull-hint::before { + position: absolute; + right: 0; + bottom: -28px; + left: 0; + z-index: -1; + height: 76px; + background: linear-gradient(180deg, rgba(18, 45, 82, 0), rgba(18, 45, 82, .42)); + content: ""; + } + + .welfare-cover-pull-hint .van-icon { + margin-right: 6px; + font-size: 16px; + } + + .main-content { + z-index: 3; + } + + .welfare-project-card { + margin: -20px 12px 12px; + padding: 16px; + border-radius: 14px; + background-color: #fff; + box-shadow: 0 8px 24px rgba(50, 83, 126, .12); + box-sizing: border-box; + } + + .welfare-project-card__head { + display: flex; + min-width: 0; + align-items: center; + } + + .welfare-project-card__title-wrap { + display: flex; + min-width: 0; + flex: 1; + align-items: center; + flex-wrap: wrap; + } + + .welfare-project-card__title { + min-width: 0; + overflow: hidden; + color: var(--text-primary); + font-size: 18px; + line-height: 25px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .welfare-project-card__festival { + height: 22px; + margin-left: 8px; + padding: 0 7px; + flex: none; + border: 1px solid #acd3ff; + border-radius: 5px; + color: #1989fa; + background-color: #f4f9ff; + font-size: 12px; + line-height: 20px; + box-sizing: border-box; + } + + .welfare-project-card__status { + display: flex; + margin-top: 8px; + align-items: center; + color: #1989fa; + font-size: 12px; + line-height: 18px; + } + + .welfare-project-card__status::before { + width: 6px; + height: 6px; + margin-right: 5px; + border-radius: 50%; + background-color: currentColor; + content: ""; + } + + .welfare-project-card__status.is-ended { + color: #a8b0bc; + } + + .welfare-project-card__facts { + display: grid; + margin-top: 12px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + } + + .welfare-project-fact { + display: flex; + min-width: 0; + padding: 10px; + align-items: center; + border-radius: 8px; + background: #f7faff; + box-sizing: border-box; + } + + .welfare-project-fact__icon { + display: flex; + width: 32px; + height: 32px; + margin-right: 9px; + flex: none; + align-items: center; + justify-content: center; + border-radius: 8px; + color: #fff; + background: #4c9cff; + box-shadow: 0 4px 10px rgba(25, 137, 250, .18); + font-size: 18px; + } + + .welfare-project-fact__content { + min-width: 0; + } + + .welfare-project-fact__label { + color: #8491a5; + font-size: 11px; + line-height: 17px; + } + + .welfare-project-fact__value { + margin-top: 2px; + overflow: hidden; + color: #1989fa; + font-size: 13px; + font-weight: 600; + line-height: 19px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .welfare-project-card__meta { + display: flex; + min-width: 0; + margin-top: 10px; + align-items: center; + } + + .welfare-project-card__address { + display: flex; + min-width: 0; + flex: 1; + align-items: center; + overflow: hidden; + color: #4c596b; + font-size: 13px; + line-height: 20px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .welfare-project-card__address .van-icon { + margin-right: 5px; + flex: none; + color: #66758a; + font-size: 15px; + } + + .welfare-project-card__tags { + display: flex; + margin-top: 8px; + flex-wrap: wrap; + column-gap: 5px; + row-gap: 5px; + } + + .welfare-project-card__tag { + height: 22px; + padding: 0 7px; + border: 1px solid #b8d9ff; + border-radius: 4px; + color: #1989fa; + background-color: #f7fbff; + font-size: 11px; + line-height: 20px; + box-sizing: border-box; + } + + .welfare-deadline { + margin-top: 0; + } + + .welfare-section-title { + min-height: 42px; + margin: 0 12px 8px; + padding: 7px 0; + border-radius: 0; + background: rgba(243, 247, 253, .96); + box-shadow: none; + } + + .welfare-section-title .title-text { + align-self: stretch; + } + + .welfare-section-title .title-label { + color: var(--text-primary); + font-size: 16px; + line-height: 28px; + } + + .welfare-section-title .title-count { + margin-left: 5px; + color: #7d899b; + font-size: 13px; + } + + .welfare-option { + border-color: #e2eaf4; + box-shadow: none; + } + + .welfare-option.selected { + border-color: #c5dfff; + background: linear-gradient(90deg, #f5faff 0%, #fff 100%); + box-shadow: none; + } + + .welfare-option-main { + min-height: 128px; + } + + .welfare-option-image { + width: 94px; + height: 94px; + margin: 16px 0 16px 14px; + } + + .welfare-option-content { + padding: 14px 12px 10px; + } + + .welfare-option-title { + margin-bottom: 4px; + } + + .welfare-option-supplier { + overflow: hidden; + margin-bottom: 4px; + color: #7a8799; + font-size: 11px; + line-height: 17px; + text-overflow: ellipsis; + white-space: nowrap; + } + + .welfare-option-rank { + margin-bottom: 5px; + } + + .welfare-option-desc { + -webkit-line-clamp: 1; + } + + .welfare-option-meta { + display: flex; + min-width: 0; + margin-top: 7px; + align-items: center; + overflow: hidden; + } + + .welfare-option-meta__tags { + display: flex; + min-width: 0; + flex: 1; + column-gap: 5px; + overflow: hidden; + } + + .welfare-option-meta__tag { + height: 19px; + padding: 0 5px; + flex: none; + border: 1px solid #b8d9ff; + border-radius: 3px; + color: #1989fa; + background-color: #f7fbff; + font-size: 10px; + line-height: 17px; + box-sizing: border-box; + } + + .welfare-option-meta__total { + margin-left: 6px; + flex: none; + color: #8a96a8; + font-size: 10px; + line-height: 18px; + } + + .welfare-option-select-row { + min-height: 44px; + padding: 7px 12px; + justify-content: space-between; + background: transparent; + } + + .welfare-footer { + display: block; + } + + .welfare-footer.has-contact { + padding-top: 8px; + padding-bottom: calc(8px + env(safe-area-inset-bottom)); + } + + .welfare-footer__actions { + display: flex; + align-items: center; + column-gap: 12px; + } + + .welfare-footer__selection { + min-width: 92px; + color: #66758a; + font-size: 13px; + white-space: nowrap; + } + + .welfare-footer__selection strong { + margin-left: 3px; + color: #1989fa; + font-size: 20px; + font-weight: 600; + } + + .welfare-footer__contact { + display: flex; + min-width: 0; + min-height: 50px; + margin-bottom: 8px; + padding: 5px 8px; + align-items: center; + color: #66758a; + background-color: #fff; + font-size: 12px; + line-height: 18px; + box-sizing: border-box; + } + + .welfare-footer__contact-icon { + display: flex; + width: 36px; + height: 36px; + margin-right: 10px; + flex: none; + align-items: center; + justify-content: center; + border-radius: 8px; + color: #1989fa; + background-color: #edf5ff; + font-size: 20px; + } + + .welfare-footer__contact-info { + min-width: 0; + flex: 1; + } + + .welfare-footer__contact-primary, + .welfare-footer__contact-address { + display: flex; + min-width: 0; + align-items: baseline; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .welfare-footer__contact-primary { + color: #1f2937; + font-size: 12px; + line-height: 20px; + } + + .welfare-footer__contact-address { + margin-top: 2px; + font-size: 11px; + line-height: 16px; + } + + .welfare-footer__contact-label { + margin-right: 3px; + flex: none; + color: #929cab; + } + + .welfare-footer__contact-name, + .welfare-footer__contact-mobile, + .welfare-footer__contact-address-value { + min-width: 0; + overflow: hidden; + color: #1f2937; + font-weight: 500; + text-overflow: ellipsis; + } + + .welfare-footer__contact-name { + flex: none; + } + + .welfare-footer__contact-mobile { + margin-left: 12px; + flex: none; + } + + .welfare-footer__contact-address-value { + flex: 1; + } + + .welfare-submit-btn { + width: auto; + flex: 1; + } + + .welfare-submit-btn.is-deadline-passed.van-button--disabled { + color: #a8b0bc; + background: #edf0f4; + border-color: #edf0f4; + opacity: 1; + } +
-
+
@@ -794,8 +1245,17 @@ layout("/layouts/platform_h5.html"){ -
- +
+