Merge branch 'refs/heads/feature_主分支合并UI优化'
This commit is contained in:
@@ -167,9 +167,136 @@ layout("/layouts/platform_h5.html"){
|
|||||||
}
|
}
|
||||||
|
|
||||||
.welfare-list-card__summary {
|
.welfare-list-card__summary {
|
||||||
display: flex;
|
|
||||||
min-height: 120px;
|
|
||||||
padding: 14px;
|
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;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@@ -231,7 +358,7 @@ layout("/layouts/platform_h5.html"){
|
|||||||
.welfare-list-card__body {
|
.welfare-list-card__body {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 4px 0 4px 14px;
|
padding-left: 12px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@@ -250,11 +377,29 @@ layout("/layouts/platform_h5.html"){
|
|||||||
color: #202938;
|
color: #202938;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
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 {
|
.welfare-list-card__status {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
min-width: 54px;
|
min-width: 54px;
|
||||||
@@ -302,6 +447,32 @@ layout("/layouts/platform_h5.html"){
|
|||||||
white-space: nowrap;
|
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 {
|
.welfare-list-card__time .van-icon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
flex: none;
|
flex: none;
|
||||||
@@ -612,42 +783,37 @@ layout("/layouts/platform_h5.html"){
|
|||||||
class="welfare-list-card"
|
class="welfare-list-card"
|
||||||
>
|
>
|
||||||
<div class="welfare-list-card__summary" @click="toggleRow(row)">
|
<div class="welfare-list-card__summary" @click="toggleRow(row)">
|
||||||
<van-image
|
<div class="welfare-list-card__order-head">
|
||||||
v-if="hasCoverImage(row.cover)"
|
<div class="welfare-list-card__order-info">
|
||||||
class="welfare-list-card__cover"
|
<div class="welfare-list-card__title">{{ row.name }}</div>
|
||||||
:src="row.cover"
|
<div class="welfare-list-card__select-time">
|
||||||
:alt="row.name"
|
<van-icon name="clock-o"></van-icon>
|
||||||
>
|
<span>选择时间：{{ formatDate(row.selectTime) }}</span>
|
||||||
<template #loading>
|
|
||||||
<van-loading type="spinner" size="22"></van-loading>
|
|
||||||
</template>
|
|
||||||
<template #error>
|
|
||||||
<div class="welfare-list-card__image-empty">
|
|
||||||
<van-icon name="photo-o"></van-icon>
|
|
||||||
<span>暂无图片</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</van-image>
|
|
||||||
<div v-else class="welfare-list-card__cover welfare-list-card__cover--empty">
|
|
||||||
<div class="welfare-list-card__image-empty">
|
|
||||||
<van-icon name="photo-o"></van-icon>
|
|
||||||
<span>暂无图片</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="welfare-list-card__body">
|
<div class="welfare-list-card__choices-wrap">
|
||||||
<div class="welfare-list-card__head">
|
<div class="welfare-list-card__choices">
|
||||||
<div class="welfare-list-card__title">{{ row.name }}</div>
|
<div class="welfare-inline-loading" v-if="row.detailLoading">
|
||||||
<van-icon class="welfare-list-card__arrow" :name="row.expanded ? 'arrow-up' : 'arrow-down'"></van-icon>
|
<van-loading size="20" color="#1989fa">加载中...</van-loading>
|
||||||
</div>
|
</div>
|
||||||
<div class="welfare-list-card__time" v-if="row.selectTime">
|
<template v-else-if="row.selections.length > 0">
|
||||||
<van-icon name="clock-o"></van-icon>
|
<div class="welfare-inline-selection" v-for="item in row.selections" :key="item.id">
|
||||||
<span>选择时间：{{ $moment(row.selectTime).format('YYYY-MM-DD HH:mm') }}</span>
|
<van-image v-if="item.imgUrl" class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
|
||||||
</div>
|
<template #error><van-icon name="photo-o" size="24"></van-icon></template>
|
||||||
<div class="welfare-list-card__time" v-else>
|
</van-image>
|
||||||
<van-icon name="clock-o"></van-icon>
|
<div v-else class="welfare-inline-selection__image welfare-inline-selection__image--name">
|
||||||
<span>选择时间：暂无记录</span>
|
<span>{{ item.optionName || '未知选项' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="welfare-inline-selection__content">
|
||||||
|
<div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-else class="welfare-inline-empty">暂无福利选择记录</div>
|
||||||
</div>
|
</div>
|
||||||
|
<van-icon class="welfare-list-card__arrow welfare-list-card__choices-arrow" :class="{'is-expanded': row.expanded}" name="arrow"></van-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -692,14 +858,13 @@ layout("/layouts/platform_h5.html"){
|
|||||||
<div class="welfare-inline-card__title">我的选择</div>
|
<div class="welfare-inline-card__title">我的选择</div>
|
||||||
<div v-if="row.selections.length > 0">
|
<div v-if="row.selections.length > 0">
|
||||||
<div class="welfare-inline-selection" v-for="item in row.selections" :key="item.selectId || item.id">
|
<div class="welfare-inline-selection" v-for="item in row.selections" :key="item.selectId || item.id">
|
||||||
<van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover">
|
<van-image class="welfare-inline-selection__image" :src="item.imgUrl" fit="cover" @click.stop="previewSelectionImage(item.imgUrl)">
|
||||||
<template #error><van-icon name="photo-o" size="24"></van-icon></template>
|
<template #error><van-icon name="photo-o" size="24"></van-icon></template>
|
||||||
</van-image>
|
</van-image>
|
||||||
<div class="welfare-inline-selection__content">
|
<div class="welfare-inline-selection__content">
|
||||||
<div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
|
<div class="welfare-inline-selection__name">{{ item.optionName || '未知选项' }}</div>
|
||||||
<div class="welfare-inline-selection__meta">
|
<div class="welfare-inline-selection__meta">
|
||||||
<span class="welfare-inline-selection__tag">× {{ item.selectNum || 0 }}</span>
|
<span class="welfare-inline-selection__tag">× {{ item.selectNum || 0 }}</span>
|
||||||
<span>{{ formatDate(item.selectTime) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -771,6 +936,7 @@ layout("/layouts/platform_h5.html"){
|
|||||||
selections: []
|
selections: []
|
||||||
}))
|
}))
|
||||||
this.tableData = this.tableData.concat(list)
|
this.tableData = this.tableData.concat(list)
|
||||||
|
list.forEach((row) => this.loadRowSelections(row))
|
||||||
this.pageForm.totalCount = res.data.totalCount || 0
|
this.pageForm.totalCount = res.data.totalCount || 0
|
||||||
if (this.tableData.length >= this.pageForm.totalCount) {
|
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||||
this.finished = true
|
this.finished = true
|
||||||
@@ -790,6 +956,14 @@ layout("/layouts/platform_h5.html"){
|
|||||||
return this.$axios.post("/platform/welfare/userSelect/getUserSelection", {projectId: projectId})
|
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 时展示“暂无图片”占位。
|
* 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
|
||||||
*/
|
*/
|
||||||
@@ -798,12 +972,11 @@ layout("/layouts/platform_h5.html"){
|
|||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 展开或收起福利详情；首次展开时加载项目及用户选择数据，后续直接复用已加载内容。
|
* 加载福利项目及用户选择数据，供卡片直接展示已选择的福利明细。
|
||||||
* @param row 当前福利项目
|
* @param row 当前福利项目
|
||||||
*/
|
*/
|
||||||
async toggleRow(row) {
|
async loadRowSelections(row) {
|
||||||
row.expanded = !row.expanded
|
if (row.detailLoaded || row.detailLoading) return
|
||||||
if (!row.expanded || row.detailLoaded || row.detailLoading) return
|
|
||||||
this.$set(row, "detailLoading", true)
|
this.$set(row, "detailLoading", true)
|
||||||
try {
|
try {
|
||||||
const [projectRes, selectionRes] = await Promise.all([
|
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 当前福利项目
|
* @param row 当前福利项目
|
||||||
@@ -855,7 +1040,7 @@ layout("/layouts/platform_h5.html"){
|
|||||||
* @return {string} 选择时间文本
|
* @return {string} 选择时间文本
|
||||||
*/
|
*/
|
||||||
formatDate(dateTime) {
|
formatDate(dateTime) {
|
||||||
return dateTime ? this.$moment(dateTime).format("MM-DD HH:mm") : "时间未知"
|
return dateTime ? this.$moment(dateTime).format("YYYY-MM-DD HH:mm") : "时间未知"
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user