first commit
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="地址管理"></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<van-address-list
|
||||
:list="addressList"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
add-button-text="新增地址"
|
||||
default-tag-text="默认"
|
||||
v-if="addressList && addressList.length>0"
|
||||
v-model="chosenAddressId"
|
||||
></van-address-list>
|
||||
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据" v-else>
|
||||
<van-button @click="onAdd" class="mt10" round type="primary">新增地址</van-button>
|
||||
</van-empty>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" :title="title" v-model="editActionSheet">
|
||||
<van-address-edit
|
||||
:address-info="addressInfo"
|
||||
:area-columns-placeholder="['请选择', '请选择', '请选择']"
|
||||
:area-list="areaList"
|
||||
:show-delete="showDelete"
|
||||
@delete="onDelete"
|
||||
@save="onSave"
|
||||
ref="address"
|
||||
show-search-result
|
||||
show-set-default
|
||||
tel-maxlengtfals
|
||||
></van-address-edit>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
areaList: areaList,
|
||||
addressInfo: {},
|
||||
addressList: [],
|
||||
editActionSheet: false,
|
||||
showDelete: "",
|
||||
title: "",
|
||||
chosenAddressId: "",
|
||||
projectId: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async selectUserAddress() {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
|
||||
resp.data.map((r) => {
|
||||
r.name = r.userName
|
||||
r.default = r.isDefault
|
||||
r.address = "收货地址:" + r.province + r.city + r.county + r.addressDetail
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.addressList = resp.data
|
||||
loading.close()
|
||||
}, 500)
|
||||
},
|
||||
back() {
|
||||
this.historyBack()
|
||||
},
|
||||
onEdit(row) {
|
||||
this.title = "编辑地址"
|
||||
const data = JSON.parse(JSON.stringify(row))
|
||||
this.showDelete = !!data.id
|
||||
this.addressInfo = data
|
||||
this.editActionSheet = true
|
||||
},
|
||||
onAdd() {
|
||||
this.title = "新增地址"
|
||||
this.addressInfo = {}
|
||||
this.editActionSheet = true
|
||||
},
|
||||
async onSave(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
row.userName = row.name
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", { data: JSON.stringify(row) })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
async onDelete(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/deleteAddress", { id: row.id })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.projectId = GetQueryString("projectId")
|
||||
this.selectUserAddress()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,167 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
/* 列表卡片样式 */
|
||||
.wf-welfare-list {
|
||||
padding: 10px;
|
||||
}
|
||||
.wf-welfare-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.wf-card-img-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
/* 右侧信息容器 */
|
||||
.wf-card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.wf-time-label {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="我的福利"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="wf-welfare-list">
|
||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openView(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="wf-card-layout">
|
||||
<div class="wf-card-img-container">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="wf-card-content">
|
||||
<div class="wf-card-heading">{{row.name}}</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">开始时间:</span>
|
||||
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">结束时间:</span>
|
||||
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
<select-view ref="selectViewRef"></select-view>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('selectView.js'){}#-->
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"select-view": selectView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear()
|
||||
},
|
||||
yearList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
async getUserSelection(projectId) {
|
||||
const resp = await this.$axios.post("/platform/welfare/mine/getUserSelection", {
|
||||
projectId: projectId,
|
||||
userId: this.$store.state.user.id
|
||||
})
|
||||
return resp
|
||||
},
|
||||
async openView(item) {
|
||||
this.$refs.selectViewRef.onOpen(item.id)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,541 @@
|
||||
const selectView = {
|
||||
template: /*language=HTML*/ `
|
||||
<van-action-sheet
|
||||
v-model="visible"
|
||||
:title="'我的福利选择'"
|
||||
close-icon="close"
|
||||
safe-area-inset-bottom
|
||||
@close="handleClose"
|
||||
:overlay-class="detailVisible ? 'no-overlay' : ''"
|
||||
>
|
||||
<div class="welfare-view">
|
||||
<!-- 内容区域 -->
|
||||
<div class="welfare-view__content">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-skeleton title :row="6" :loading="loading" animated>
|
||||
<!-- 项目基本信息 -->
|
||||
|
||||
<div class="welfare-card">
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<template #title>
|
||||
<div class="welfare-card__header">
|
||||
<i class="el-icon-s-flag"></i>
|
||||
<span>项目基本信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="welfare-card__content">
|
||||
<div class="info-row">
|
||||
<div class="info-row__label">项目名称</div>
|
||||
<div class="info-row__value">{{ projectInfo.name }}</div>
|
||||
</div>
|
||||
<div class="info-row info-row--time">
|
||||
<div class="info-row__label">选择时间</div>
|
||||
<div class="info-row__value">
|
||||
<div class="time-item time-item--start">{{
|
||||
$moment(projectInfo.choiceTimeStart).format('YYYY-MM-DD HH:mm')
|
||||
}}
|
||||
</div>
|
||||
<div class="time-item time-item--end">{{
|
||||
$moment(projectInfo.choiceTimeEnd).format('YYYY-MM-DD HH:mm') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row info-row--time">
|
||||
<div class="info-row__label">发放时间</div>
|
||||
<div class="info-row__value">
|
||||
<div class="time-item time-item--start">{{
|
||||
$moment(projectInfo.provideTimeStart).format('YYYY-MM-DD HH:mm')
|
||||
}}
|
||||
</div>
|
||||
<div class="time-item time-item--end">{{
|
||||
$moment(projectInfo.provideTimeEnd).format('YYYY-MM-DD HH:mm')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-row__label">发放地点</div>
|
||||
<div class="info-row__value">{{ projectInfo.provideAddress || '暂无'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="welfare-card">
|
||||
<div class="welfare-card__header">
|
||||
<i class="el-icon-user"></i>
|
||||
<span>联系信息</span>
|
||||
</div>
|
||||
<div class="welfare-card__content">
|
||||
<div class="info-row">
|
||||
<div class="info-row__label">联系电话</div>
|
||||
<div class="info-row__value">{{ mergedSelections[0]?.mobile || '暂无' }}</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-row__label">收货地址</div>
|
||||
<div class="info-row__value">{{ mergedSelections[0]?.receiveAddress || '暂无'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的选择 -->
|
||||
<div class="selections-container">
|
||||
<div class="welfare-card">
|
||||
<div class="welfare-card__header">
|
||||
<i class="el-icon-shopping-cart-full"></i>
|
||||
<span>我的选择</span>
|
||||
</div>
|
||||
|
||||
<div v-if="mergedSelections.length > 0" class="selection-list">
|
||||
<div class="selection-item"
|
||||
v-for="item in mergedSelections"
|
||||
:key="item.id"
|
||||
@click="showOptionDetail(item)">
|
||||
<div class="selection-item__image">
|
||||
<img :src="item.imgUrl"
|
||||
alt="福利图片"
|
||||
@error="handleImageError">
|
||||
</div>
|
||||
<div class="selection-item__content">
|
||||
<div class="selection-item__name">{{ item.optionName }}</div>
|
||||
<div class="selection-item__meta">
|
||||
<div class="selection-item__count">
|
||||
<i class="el-icon-shopping-cart-2"></i> {{ item.selectNum }}
|
||||
</div>
|
||||
<div class="selection-item__time">
|
||||
<i class="el-icon-time"></i> {{ formatDate(item.selectTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-item__arrow">
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<span>您还未选择任何福利项目</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-skeleton>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
|
||||
<!-- 选项详情弹窗 -->
|
||||
<van-action-sheet
|
||||
v-model="detailVisible"
|
||||
:title="currentOption?.optionName || '福利详情'"
|
||||
close-icon="close"
|
||||
safe-area-inset-bottom
|
||||
@close="closeDetail"
|
||||
:z-index="2001"
|
||||
>
|
||||
<div class="welfare-detail" v-if="currentOption">
|
||||
<van-skeleton title :row="10" :loading="descLoading" animated>
|
||||
<div class="welfare-detail__content rich-text"
|
||||
v-html="currentOption.description || '暂无详细说明'"></div>
|
||||
</van-skeleton>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
projectId: null,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
descLoading: false,
|
||||
projectInfo: {
|
||||
name: "",
|
||||
choiceTimeStart: "",
|
||||
choiceTimeEnd: "",
|
||||
provideTimeStart: "",
|
||||
provideTimeEnd: "",
|
||||
provideAddress: "",
|
||||
options: []
|
||||
},
|
||||
selectedOptions: [],
|
||||
detailVisible: false,
|
||||
currentOption: null,
|
||||
activeNames:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mergedSelections() {
|
||||
return this.selectedOptions.map((item) => {
|
||||
const option = this.projectInfo.options?.find((opt) => opt.id === item.selectOptionId) || {}
|
||||
return {
|
||||
...item,
|
||||
optionName: option.optionName || "未知选项",
|
||||
imgUrl: option.imgUrl,
|
||||
description: option.description
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(id) {
|
||||
this.projectId = id
|
||||
this.visible = true
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
// 如果详情弹窗打开，先关闭详情弹窗
|
||||
if (this.detailVisible) {
|
||||
this.closeDetail()
|
||||
return
|
||||
}
|
||||
// 否则关闭整个组件
|
||||
this.$emit("close")
|
||||
},
|
||||
|
||||
async onRefresh() {
|
||||
try {
|
||||
await this.loadData()
|
||||
} finally {
|
||||
this.refreshing = false
|
||||
}
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
try {
|
||||
this.loading = true
|
||||
await Promise.all([this.getProjectInfo(), this.getUserSelections()])
|
||||
} catch (error) {
|
||||
console.error("加载数据失败:", error)
|
||||
this.$toast && this.$toast("加载数据失败，请稍后重试")
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async getProjectInfo() {
|
||||
try {
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/common/projectInfo", {
|
||||
id: this.projectId
|
||||
})
|
||||
if (code === 0) {
|
||||
this.projectInfo = data || this.projectInfo
|
||||
} else {
|
||||
console.warn("获取项目信息失败:", msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取项目信息异常:", error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
async getUserSelections() {
|
||||
try {
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/userSelect/getUserSelection", { projectId: this.projectId })
|
||||
if (code === 0) {
|
||||
this.selectedOptions = data || []
|
||||
} else {
|
||||
console.warn("获取用户选择失败:", msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取用户选择异常:", error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
showOptionDetail(option) {
|
||||
this.descLoading = true
|
||||
this.currentOption = option
|
||||
this.detailVisible = true
|
||||
// 短暂延迟后关闭加载状态，给内容渲染留出时间
|
||||
setTimeout(() => {
|
||||
this.descLoading = false
|
||||
}, 300)
|
||||
},
|
||||
|
||||
closeDetail() {
|
||||
this.detailVisible = false
|
||||
},
|
||||
|
||||
handleImageError(e) {
|
||||
e.target.src = "/static/images/default-welfare.png"
|
||||
},
|
||||
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return ""
|
||||
try {
|
||||
// 简化日期显示，只保留月-日 时:分
|
||||
const date = new Date(dateStr.replace(/-/g, "/"))
|
||||
return date.getMonth() + 1 + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes().toString().padStart(2, "0")
|
||||
} catch (e) {
|
||||
console.error("日期格式化错误:", e)
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .welfare-view {
|
||||
background: #f7f8fa;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 内容区域样式 */
|
||||
/deep/ .welfare-view__content {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
/deep/ .welfare-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: #f5f5f5;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header i {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 信息行样式 */
|
||||
/deep/ .info-row {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/ .info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ .info-row__label {
|
||||
width: 70px;
|
||||
color: #969799;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/deep/ .info-row__value {
|
||||
flex: 1;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/deep/ .info-row--time {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/deep/ .info-row--time .info-row__value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/deep/ .time-item {
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/deep/ .time-item--start::before {
|
||||
content: "开始：";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/deep/ .time-item--end::before {
|
||||
content: "结束：";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 选择列表样式 */
|
||||
/deep/ .selections-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/deep/ .selection-list {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/deep/ .selection-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/deep/ .selection-item:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/deep/ .selection-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #f5f6f7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #969799;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16px;
|
||||
background: #f7f8fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f7f8fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__meta i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .selection-item__arrow {
|
||||
color: #c8c9cc;
|
||||
font-size: 16px;
|
||||
padding: 0 0 0 12px;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
/deep/ .empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px 16px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
/deep/ .empty-state__icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
/deep/ .welfare-detail {
|
||||
padding: 20px 16px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/deep/ .welfare-detail__content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
/deep/ .rich-text {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/deep/ .rich-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 8px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .rich-text p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* 阻止嵌套 action-sheet 时的背景重叠 */
|
||||
/deep/ .no-overlay {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
`
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,154 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
/* 列表卡片样式 */
|
||||
.wf-welfare-list {
|
||||
padding: 10px;
|
||||
}
|
||||
.wf-welfare-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.wf-card-img-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
/* 右侧信息容器 */
|
||||
.wf-card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.wf-time-label {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="wf-welfare-list">
|
||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="wf-card-layout">
|
||||
<div class="wf-card-img-container">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="wf-card-content">
|
||||
<div class="wf-card-heading">{{row.name}}</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">开始时间:</span>
|
||||
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">结束时间:</span>
|
||||
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
async openChoose(row) {
|
||||
this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,109 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.success-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
margin-top: 80px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 60px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(25, 137, 250, 0.15);
|
||||
}
|
||||
|
||||
.success-icon .van-icon {
|
||||
font-size: 60px;
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
margin-top: 30px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
margin-top: 16px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="success-container">
|
||||
<div class="success-icon">
|
||||
<van-icon name="checked" />
|
||||
</div>
|
||||
<div class="success-title">选择成功</div>
|
||||
<div class="success-desc">
|
||||
您的福利选择已提交成功！
|
||||
<br />
|
||||
请在选择时间截止前，您仍可以重新选择并修改。
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<van-button type="primary" class="back-btn" @click="goToList">查看我的福利</van-button>
|
||||
<van-button type="default" class="home-btn" @click="goToHome">返回首页</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
goToList() {
|
||||
this.$pjaxReplace("/platform/h5/welfare/mine/list")
|
||||
},
|
||||
goToHome() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,562 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.selection:not(:last-child) {
|
||||
border-bottom: 1px dashed lightgrey;
|
||||
}
|
||||
|
||||
.selection .van-checkbox-group .van-cell,
|
||||
.selection .van-radio-group .van-cell {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.selection .van-checkbox-group .van-cell .van-cell__title,
|
||||
.selection .van-radio-group .van-cell .van-cell__title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.selection .van-radio {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.selection .van-cell__label {
|
||||
max-height: 80px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.confirmWelfareCell .van-cell__label {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.selection .van-cell__label .welfare_img {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.right_content {
|
||||
width: calc(100% - 150px);
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.optionDesc {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13px;
|
||||
color: #868282;
|
||||
}
|
||||
|
||||
.desc img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.desc td {
|
||||
border: 1pt solid #000000 !important;
|
||||
}
|
||||
|
||||
.van-cell-group--inset {
|
||||
margin: 10px 16px !important;
|
||||
overflow: hidden;
|
||||
/*border-radius: 8px;*/
|
||||
}
|
||||
|
||||
.submitBar .van-info {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 25px;
|
||||
top: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.address-manage-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: calc(100% - 20px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.addressClass .van-action-sheet__content {
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div>
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
@click-left="()=>this.$pjaxReplace('/platform/h5/welfare/userChoose/list')"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
placeholder
|
||||
title="福利详情"
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div v-if="projectInfo">
|
||||
<van-image :src="projectInfo.cover" fit="cover" style="width: 100%; height: 150px"></van-image>
|
||||
<!--基本信息-->
|
||||
<van-cell-group class="van-cell-group--inset">
|
||||
<van-cell>
|
||||
<div style="font-weight: bold; font-size: 15px; display: flex; align-items: center">福利信息</div>
|
||||
</van-cell>
|
||||
<van-cell :border="false" :value="projectInfo.name" title="福利名称"></van-cell>
|
||||
<van-cell :border="false" :value="projectInfo.festival" title="发放节日"></van-cell>
|
||||
<van-cell :border="false" :value="projectInfo.gift" title="福利礼品" v-if="!projectInfo.flexible"></van-cell>
|
||||
<van-cell :border="false" title="选择形式">{{projectInfo.isCheckBox==='checkBox'?'多选':'单选'}}</van-cell>
|
||||
<van-cell
|
||||
:border="false"
|
||||
:value="projectInfo.multiSelectNum"
|
||||
title="最多选几个"
|
||||
v-if="projectInfo.isCheckBox==='checkBox'"
|
||||
></van-cell>
|
||||
<van-cell :border="false" title="发放形式">
|
||||
<template>
|
||||
{{welfareProvideMode.find(v=>v.code==projectInfo.provideMode) &&
|
||||
welfareProvideMode.find(v=>v.code==projectInfo.provideMode).name}}
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell :border="false" title="签收形式">
|
||||
<template>
|
||||
{{welfareSignMode.find(v=>v.code==projectInfo.signMode) && welfareSignMode.find(v=>v.code==projectInfo.signMode).name}}
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell :border="false" title="选择时间">
|
||||
<template #label>{{projectInfo.choiceTimeStart + ' 至 ' + projectInfo.choiceTimeEnd}}</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!--礼品套餐-->
|
||||
<div
|
||||
class="van-cell-group--inset"
|
||||
style="margin: 10px auto"
|
||||
v-if="projectInfo.flexible && [2,3].includes(projectInfo.provideMode)
|
||||
&& projectInfo.options
|
||||
&& projectInfo.options.length>0"
|
||||
>
|
||||
<van-cell>
|
||||
<div style="font-weight: bold; font-size: 15px; display: flex; align-items: center">选择套餐</div>
|
||||
</van-cell>
|
||||
|
||||
<div style="margin-bottom: 30px">
|
||||
<div>
|
||||
<van-text-box
|
||||
:content="option.supplier"
|
||||
:cover="option.imgUrl"
|
||||
:key="option.id"
|
||||
:title="option.optionName"
|
||||
sub-title=" "
|
||||
type="5"
|
||||
v-for="(option, optionIndex) in projectInfo.options"
|
||||
>
|
||||
<template #tip>
|
||||
<span @click="openViewDesc(option.description)">查看详情</span>
|
||||
</template>
|
||||
<template>
|
||||
<van-divider dashed />
|
||||
<van-row class="padding10X padding-right14" justify="end" type="flex">
|
||||
<van-stepper
|
||||
:default-value="0"
|
||||
:disabled="confirmButtonInfo.disabled"
|
||||
:min="0"
|
||||
@change="(value)=>{numChange(value,option,optionIndex)}"
|
||||
async-change
|
||||
button-size="20"
|
||||
disable-input
|
||||
integer
|
||||
theme="round"
|
||||
v-model="option.selectNum"
|
||||
></van-stepper>
|
||||
</van-row>
|
||||
</template>
|
||||
</van-text-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-submit-bar
|
||||
:button-text="confirmButtonInfo.text"
|
||||
@submit="confirmSelect"
|
||||
class="submitBar"
|
||||
tip="您可以在福利选择截至时间之前修改福利套餐"
|
||||
tip-icon="info-o"
|
||||
>
|
||||
<van-icon :info="sumSelectNum" name="department" size="30" slot="left"></van-icon>
|
||||
</van-submit-bar>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{ height: '100%',width: '100%'}" position="right" safe-area-inset-bottom v-model="descPopup">
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="descPopup=false" fixed left-arrow left-text="返回" placeholder title="详情"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div style="margin-top: 45px">
|
||||
<div @click="descImgClick" class="desc" v-html="desc"></div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="确认福利套餐" v-model="confirmPopup">
|
||||
<div>
|
||||
<!--选择的信息-->
|
||||
<van-cell>
|
||||
<van-icon class="van-cell__left-icon" color="red" name="info" slot="icon"></van-icon>
|
||||
<div slot="title" style="font-weight: bold; font-size: 15px">已选福利</div>
|
||||
</van-cell>
|
||||
<van-cell style="padding: 0">
|
||||
<van-card
|
||||
:key="item.id"
|
||||
:num="item.selectNum"
|
||||
:thumb="item.imgUrl"
|
||||
:title="item.optionName"
|
||||
center
|
||||
desc=""
|
||||
style="border-radius: 8px; background: #ffffff"
|
||||
v-for="item in selectedOptions"
|
||||
></van-card>
|
||||
</van-cell>
|
||||
|
||||
<!--邮寄到家 填写收货地址-->
|
||||
<van-cell @click="selectAddressPopup = true" class="confirmWelfareCell" is-link v-if="projectInfo.provideMode===3">
|
||||
<van-icon class="van-cell__left-icon" color="red" name="info" slot="icon"></van-icon>
|
||||
<div slot="title" style="font-weight: bold; font-size: 15px">收货地址</div>
|
||||
<template #label>
|
||||
<span v-if="isEmptyObject(selectAddress)">请选择地址</span>
|
||||
<span v-else>{{selectAddress}}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<!--电子签字-->
|
||||
<van-cell v-if="projectInfo.signMode===2">
|
||||
<van-icon class="van-cell__left-icon" color="red" name="info" slot="icon"></van-icon>
|
||||
<div slot="title" style="font-weight: bold; font-size: 15px">电子签名</div>
|
||||
<template #label>
|
||||
<h5-signature v-model="userSign"></h5-signature>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<div style="padding: 10px 16px; left: 0; right: 0; bottom: 0; background: #ffffff">
|
||||
<van-button @click="submitSelect" round style="width: 100%" type="primary">提交</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="确认地址" v-model="selectAddressPopup" class="addressClass">
|
||||
<div style="position: relative; height: 500px; overflow-y: auto">
|
||||
<template v-if="addressList && addressList.length>0">
|
||||
<van-cell
|
||||
:key="item.id"
|
||||
@click="addressClick(item);selectAddressPopup=false"
|
||||
clickable
|
||||
icon="location-o"
|
||||
v-for="item in addressList"
|
||||
>
|
||||
<template #title>{{item.address}}</template>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据" v-else></van-empty>
|
||||
</div>
|
||||
<van-button @click="openAddressManage" block class="address-manage-button" round type="primary">地址管理</van-button>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
projectInfo: {},
|
||||
userSelection: [],
|
||||
welfareProvideMode: [],
|
||||
welfareSignMode: [],
|
||||
desc: null,
|
||||
descPopup: false,
|
||||
confirmPopup: false,
|
||||
selectAddressPopup: false,
|
||||
selectAddress: null,
|
||||
addressList: [],
|
||||
userSign: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sumSelectNum() {
|
||||
if (this.projectInfo && this.projectInfo.welfareProjectSubjects) {
|
||||
return this.projectInfo.welfareProjectSubjects[0].options
|
||||
.map((v) => v.selectNum)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
}
|
||||
return 0
|
||||
},
|
||||
isSelect() {
|
||||
if (this.userSelection && this.userSelection.length > 0) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
selectTime() {
|
||||
if (this.userSelection && this.userSelection.length > 0) {
|
||||
return this.userSelection[0].selectTime
|
||||
}
|
||||
return null
|
||||
},
|
||||
confirmButtonInfo() {
|
||||
if (this.projectInfo) {
|
||||
const { choiceTimeEnd, choiceTimeStart, overdueChoiceTimeEnd } = this.projectInfo
|
||||
const now = moment().valueOf()
|
||||
|
||||
if (overdueChoiceTimeEnd == null || overdueChoiceTimeEnd === "") {
|
||||
if (now > moment(choiceTimeStart).valueOf() && now < moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: this.isSelect ? "确定修改" : "确定选择", disabled: false }
|
||||
} else if (now > moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
} else {
|
||||
//已选择了不能再动了
|
||||
if (this.isSelect) {
|
||||
if (moment(this.selectTime).valueOf() > moment(choiceTimeEnd).valueOf() && now < moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: "确定修改", disabled: false }
|
||||
}
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else {
|
||||
if (now > moment(choiceTimeStart).valueOf() && now < moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: this.isSelect ? "确定修改" : "确定选择", disabled: false }
|
||||
} else if (now > moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return { text: "", disabled: true }
|
||||
},
|
||||
selectedOptions() {
|
||||
if (this.projectInfo && this.projectInfo.welfareProjectSubjects) {
|
||||
return this.projectInfo.welfareProjectSubjects[0].options.filter((v) => v.selectNum >= 1)
|
||||
}
|
||||
return []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isEmptyObject(obj) {
|
||||
for (let key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
getWelfareInfo() {
|
||||
this.$axios.post("/platform/welfare/project/mange/findOne", { id: this.projectId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.projectInfo = res.data
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取用户选择的数据
|
||||
getUserSelection() {
|
||||
this.$axios.post("/platform/welfare/userChoose/getUserSelection", { projectId: this.projectInfo.id }).then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.userSelection = resp.data
|
||||
this.echoUserSelection()
|
||||
} else {
|
||||
this.$toast(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
//回显用户选择的数据
|
||||
echoUserSelection() {
|
||||
//获取用户当前选择的数量
|
||||
// this.projectInfo.welfareProjectSubjects[0].options.forEach((v) => {
|
||||
// const option = this.userSelection.find((x) => x.selectOptionId === v.id)
|
||||
// if (option) {
|
||||
// v.selectNum = option.selectNum
|
||||
// } else {
|
||||
// v.selectNum = 0
|
||||
// }
|
||||
// })
|
||||
},
|
||||
//查看详情
|
||||
openViewDesc(desc) {
|
||||
if (desc == null || desc.length === 0) {
|
||||
this.$toast("没有更多了")
|
||||
return
|
||||
}
|
||||
this.desc = desc
|
||||
this.descPopup = true
|
||||
},
|
||||
descImgClick(e) {
|
||||
if (e.target.tagName === "IMG") {
|
||||
vant.ImagePreview([e.target.src])
|
||||
}
|
||||
},
|
||||
//确定选择
|
||||
async confirmSelect() {
|
||||
if (this.confirmButtonInfo.disabled) {
|
||||
this.$toast("当前时间段无法选择")
|
||||
return
|
||||
}
|
||||
|
||||
const { isCheckBox, multiSelectNum, singleOptionSupportMultipleSelection } = this.projectInfo
|
||||
if (isCheckBox === "checkBox") {
|
||||
if (this.sumSelectNum < multiSelectNum) {
|
||||
//用户没有选择完
|
||||
this.$toast("一共可以选择" + multiSelectNum + "份,您目前只选择了" + this.sumSelectNum + "份，快去选择吧！")
|
||||
return
|
||||
}
|
||||
}
|
||||
this.confirmPopup = true
|
||||
|
||||
//回显用户的地址
|
||||
if (this.projectInfo.provideMode === 3 && this.isSelect && this.userSelection) {
|
||||
this.selectAddress = this.userSelection[0].receiveAddress
|
||||
}
|
||||
|
||||
//回显用户签名
|
||||
if (this.projectInfo.signMode === 2 && this.isSelect && this.userSelection) {
|
||||
this.userSign = this.userSelection[0].userSign
|
||||
}
|
||||
await this.selectUserAddress()
|
||||
if (this.projectInfo.provideMode === 3 && !this.isSelect) {
|
||||
const address = this.addressList.find((a) => a.isDefault)
|
||||
if (address) {
|
||||
const { province, city, county, addressDetail, name, tel } = address
|
||||
this.selectAddress =
|
||||
"收货地址:" + province + city + county + addressDetail + "," + "收件人：" + name + "," + "联系方式：" + tel
|
||||
}
|
||||
}
|
||||
},
|
||||
//数量更改
|
||||
numChange(value, option, optionIndex) {
|
||||
const { isCheckBox, multiSelectNum, singleOptionSupportMultipleSelection } = this.projectInfo
|
||||
if (isCheckBox === "checkBox") {
|
||||
//判断是否支持单个多选
|
||||
if (!singleOptionSupportMultipleSelection && value > 1) {
|
||||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", 1)
|
||||
this.$toast("此套餐最多只能选择1份")
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
//获取用户当前选择的数量
|
||||
const selectNums = this.projectInfo.welfareProjectSubjects[0].options.map((v) => v.selectNum)
|
||||
const sum = selectNums.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
if (sum > multiSelectNum) {
|
||||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", value - 1)
|
||||
this.$toast("此次福利最多只能选择" + multiSelectNum + "份")
|
||||
}
|
||||
},
|
||||
//提交选择
|
||||
async submitSelect() {
|
||||
if (this.projectInfo.provideMode === 3) {
|
||||
if (this.selectAddress == null || this.selectAddress === "") {
|
||||
this.$toast("请填写您的收货地址")
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.projectInfo.signMode === 2) {
|
||||
if (this.userSign == null || this.userSign === "") {
|
||||
this.$toast("请签名")
|
||||
return
|
||||
}
|
||||
}
|
||||
const loading = this.$toast.loading({
|
||||
message: "提交中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const formData = this.projectInfo.welfareProjectSubjects[0].options
|
||||
.filter((v) => v.selectNum >= 1)
|
||||
.map((v) => {
|
||||
return {
|
||||
welfareId: this.projectInfo.id,
|
||||
subjectId: v.subjectId,
|
||||
selectOptionId: v.id,
|
||||
receiveAddress: this.selectAddress,
|
||||
selectNum: v.selectNum,
|
||||
userSign: this.userSign
|
||||
}
|
||||
})
|
||||
const { code, msg, data } = await $.post("/platform/welfare/userChoose/confirmSelect", {
|
||||
welfareUserSelections: JSON.stringify(formData),
|
||||
projectId: this.projectInfo.id
|
||||
})
|
||||
if (code === 0) {
|
||||
setTimeout(() => {
|
||||
this.getUserSelection(this.projectId)
|
||||
this.$toast.success(msg)
|
||||
loading.close()
|
||||
this.confirmPopup = false
|
||||
}, 500)
|
||||
} else {
|
||||
this.$toast.fail(msg)
|
||||
loading.close()
|
||||
}
|
||||
},
|
||||
//地址列表点击
|
||||
addressClick(item) {
|
||||
const { province, city, county, addressDetail, name, tel } = item
|
||||
this.selectAddress = "收货地址:" + province + city + county + addressDetail + "," + "收件人：" + name + "," + "联系方式：" + tel
|
||||
},
|
||||
async selectUserAddress() {
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
|
||||
resp.data.map((r) => {
|
||||
r.name = r.userName
|
||||
r.address =
|
||||
"收货地址:" +
|
||||
r.province +
|
||||
r.city +
|
||||
r.county +
|
||||
r.addressDetail +
|
||||
"," +
|
||||
"收件人：" +
|
||||
r.name +
|
||||
"," +
|
||||
"联系方式：" +
|
||||
r.tel +
|
||||
(r.isDefault ? "【默认地址】" : "")
|
||||
})
|
||||
this.addressList = resp.data
|
||||
},
|
||||
//地址管理
|
||||
openAddressManage() {
|
||||
this.$pjaxReplace("/platform/h5/welfare/address/list?projectId=" + this.projectInfo.id)
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.projectId = GetQueryString("id")
|
||||
if (this.projectId) {
|
||||
this.getWelfareInfo()
|
||||
this.getUserSelection()
|
||||
|
||||
this.welfareProvideMode = await this.$businessTool.getDictOptions("welfareProvideMode")
|
||||
this.welfareProvideMode.map((v) => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
this.welfareSignMode = await this.$businessTool.getDictOptions("welfareSignMode")
|
||||
this.welfareSignMode.map((v) => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,140 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.table-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.card-content {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.card-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
/* 右侧信息容器 */
|
||||
.card-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.time-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.time-label {
|
||||
color: #999;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="table-list">
|
||||
<div class="table-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="card-content">
|
||||
<div class="card-image">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">{{row.name}}</div>
|
||||
<div class="time-info">
|
||||
<span class="time-label">开始时间：</span>
|
||||
{{row.choiceTimeStart}}
|
||||
</div>
|
||||
<div class="time-info">
|
||||
<span class="time-label">结束时间：</span>
|
||||
{{row.choiceTimeEnd}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/userChoose/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
async openChoose(row) {
|
||||
this.$pjaxReplace("/platform/h5/welfare/userChoose/index?id=" + row.id)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user