first commit
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
let ADDRESS = {
|
||||
template: `
|
||||
<div>
|
||||
<van-address-list
|
||||
:list="addressList"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
add-button-text="新增地址"
|
||||
:switchable="false"
|
||||
default-tag-text="默认"
|
||||
@click-item="onClick"
|
||||
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>
|
||||
`,
|
||||
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/benefit/address/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
|
||||
/* for (let i = 0; i < this.addressList.length; i++) {
|
||||
if (this.addressList[i].default==1) {
|
||||
this.chosenAddressId = this.addressList[i].id
|
||||
}
|
||||
}*/
|
||||
loading.close()
|
||||
}, 500)
|
||||
}
|
||||
/*back() {
|
||||
if (this.projectId) {
|
||||
this.$pjaxReplace("/platform/h5/benefit/userChoose/index?id=" + this.projectId)
|
||||
} else {
|
||||
/!*this.$pjaxReplace("/platform/h5/home")*!/
|
||||
window.history.go(-1)
|
||||
}
|
||||
}*/,
|
||||
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/benefit/address/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/benefit/address/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)
|
||||
}
|
||||
},
|
||||
onClick(row, index) {
|
||||
this.$emit("address_click", row)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.projectId = GetQueryString("projectId")
|
||||
this.selectUserAddress()
|
||||
}
|
||||
}
|
||||
<!--#include("/platform/zhghh5/benefit/include/areaList.js"){}#-->
|
||||
@@ -0,0 +1,31 @@
|
||||
<!--#
|
||||
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>
|
||||
<benefit-address ref="address"></benefit-address>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("address.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
components: {
|
||||
"benefit-address": ADDRESS
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.projectId) {
|
||||
this.$pjaxReplace("/platform/h5/benefit/userChoose/index?id=" + this.projectId)
|
||||
} else {
|
||||
/*this.$pjaxReplace("/platform/h5/home")*/
|
||||
window.history.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,153 @@
|
||||
<!--#
|
||||
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-cell
|
||||
is-link
|
||||
@click="toAddress"
|
||||
v-for="(address,index) in 1"
|
||||
size="large"
|
||||
:value="addressList[index].name+addressList[index].tel"
|
||||
:label="addressList[index].address"
|
||||
>
|
||||
<!-- 使用 title 插槽来自定义标题 -->
|
||||
<template #title>
|
||||
<span class="custom-title">{{addressList[index].title}}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-swipe-cell v-for="(goods,index) in cartGoodsList">
|
||||
<van-card
|
||||
:price="goods.benefitGoodsSpecifications.points"
|
||||
:desc="goods.benefitGoods.simpleDesc"
|
||||
:title="goods.benefitGoodsSpecifications.name"
|
||||
:thumb="goods.benefitGoodsSpecifications.imgUrl[0].url"
|
||||
></van-card>
|
||||
<template #right>
|
||||
<van-button square text="删除" type="danger" @click="delGoods(index)" class="delete-button" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
|
||||
<van-submit-bar :price="checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
cartGoodsList: [],
|
||||
addressList: [],
|
||||
checkedGoodsAmount: 0,
|
||||
goodsId: ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.goodsId = window.location.search.substring(4)
|
||||
|
||||
if (this.goodsId != "") {
|
||||
this.initGoods()
|
||||
} else {
|
||||
this.getCartGoods()
|
||||
}
|
||||
this.getAddress()
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop")
|
||||
},
|
||||
toAddress() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/address")
|
||||
},
|
||||
getCartGoods() {
|
||||
this.$axios.post("/platform/benefit/shop/getCartList").then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
const goods = []
|
||||
for (let i = 0; i < resp.data.length; i++) {
|
||||
if (resp.data[i].isChecked == true) {
|
||||
goods.push(resp.data[i])
|
||||
this.checkedGoodsAmount += resp.data[i].benefitGoodsSpecifications.points
|
||||
}
|
||||
}
|
||||
this.cartGoodsList = goods
|
||||
}
|
||||
})
|
||||
},
|
||||
initGoods() {
|
||||
this.$axios.post("/platform/benefit/shop/findOneBySpecId", { id: this.goodsId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
res.data.imgUrl = JSON.parse(res.data.imgUrl)
|
||||
res.data = {
|
||||
benefitGoods: {
|
||||
id: res.data.goodsId,
|
||||
name: res.data.goodsName,
|
||||
simpleDesc: res.data.simpleDesc
|
||||
},
|
||||
benefitGoodsSpecifications: res.data,
|
||||
id: ""
|
||||
}
|
||||
|
||||
const goods = []
|
||||
goods.push(res.data)
|
||||
this.checkedGoodsAmount = res.data.benefitGoodsSpecifications.points
|
||||
this.cartGoodsList = goods
|
||||
}
|
||||
})
|
||||
},
|
||||
async getAddress() {
|
||||
const resp = await this.$axios.post("/platform/benefit/address/selectUserAddress", { userId: this.$store.state.user.id })
|
||||
resp.data.map((r) => {
|
||||
r.name = r.userName
|
||||
r.default = r.isDefault
|
||||
r.address = r.addressDetail
|
||||
r.title = r.province + r.city + r.county
|
||||
})
|
||||
this.addressList = resp.data
|
||||
},
|
||||
onSubmit() {
|
||||
//获取所有的购物车id
|
||||
const cartId = []
|
||||
for (let i = 0; i < this.cartGoodsList.length; i++) {
|
||||
cartId.push(this.cartGoodsList[i].id)
|
||||
}
|
||||
|
||||
//获取所有的规格
|
||||
const goodsSpecifications = []
|
||||
for (let i = 0; i < this.cartGoodsList.length; i++) {
|
||||
goodsSpecifications.push(this.cartGoodsList[i].benefitGoodsSpecifications)
|
||||
}
|
||||
|
||||
const benefitBuyGoodsVo = {
|
||||
list: JSON.stringify(goodsSpecifications),
|
||||
addressId: this.addressList[0].id,
|
||||
cartId: JSON.stringify(cartId)
|
||||
}
|
||||
this.$axios.post("/platform/benefit/shop/buyGoodsList", benefitBuyGoodsVo).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success("购买成功！")
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/order")
|
||||
}
|
||||
})
|
||||
},
|
||||
delGoods(index) {
|
||||
this.cartGoodsList.slice(index)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.delete-button {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
background-color: #ee0a24;
|
||||
border: 1px solid #ee0a24;
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,193 @@
|
||||
<!--#
|
||||
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>
|
||||
<div class="cart-box">
|
||||
<div v-for="item in cartList" :key="item.id" class="cart-item">
|
||||
<!-- 每个商品前的按钮 -->
|
||||
<van-checkbox :name="item.id" @click="onEdit(item)" class="checkbox-btn" v-model="item.isChecked"></van-checkbox>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<van-card :price="item.benefitGoodsSpecifications.points" :thumb="item.benefitGoodsSpecifications.imgUrl[0].url">
|
||||
<!-- 自定义标题，删除按钮 -->
|
||||
<template #title>
|
||||
<span>{{ item.benefitGoods.name }}</span>
|
||||
<van-icon name="delete-o" class="delete-icon" @click="onDelete(item)" />
|
||||
</template>
|
||||
<!-- 自定义备注 -->
|
||||
<template #desc>
|
||||
<div style="color: #a2a2a2">{{ item.benefitGoods.simpleDesc }}</div>
|
||||
</template>
|
||||
</van-card>
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
|
||||
<!-- 下方结算 -->
|
||||
<!-- vant显示的数字不对，9999元会显示成99.99元，所以需要乘以100 -->
|
||||
<van-submit-bar :price="checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
|
||||
<van-checkbox @click="onClickCheckAll" v-model="checkedAll">全选</van-checkbox>
|
||||
</van-submit-bar>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
cartList: [], //商品总列表
|
||||
cartTotal: {}, //购物车数据
|
||||
// price: 0,
|
||||
goodsId: "",
|
||||
number: "",
|
||||
productId: "",
|
||||
id_: "",
|
||||
isChecked: "1",
|
||||
// productIdsList:[],
|
||||
checkedGoodsAmount: 0, //选中的商品的总金额
|
||||
checkedAll: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCart()
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop")
|
||||
},
|
||||
// 获取数据
|
||||
getCart() {
|
||||
this.$axios.post("/platform/benefit/shop/getCartList").then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.cartList = resp.data
|
||||
for (let i = 0; i < this.cartList.length; i++) {
|
||||
const item = this.cartList[i]
|
||||
if (item.isChecked == true) {
|
||||
this.checkedGoodsAmount += item.benefitGoodsSpecifications.points
|
||||
} else {
|
||||
this.checkedAll = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除单个商品的时候，发送删除商品的请求
|
||||
async onDelete(item) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/benefit/shop/deleteCart", { id: item.id })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.getCart()
|
||||
loading.close()
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
|
||||
// 购物车商品步进器功能接口 按下商品+1或者-1按钮，
|
||||
updateCartData() {
|
||||
// 直接发送更新数据请求，将当前的商品数量带着
|
||||
UpdateCartData({
|
||||
goodsId: this.goodsId,
|
||||
id: this.id_,
|
||||
number: this.number,
|
||||
productId: this.productId
|
||||
}).then((res) => {
|
||||
console.log(999, res)
|
||||
if (res.errno === 0) {
|
||||
this.getData() //重新请求购物车商品数据，渲染
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换购物车商品选中状态，发送请求
|
||||
async onEdit(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/benefit/shop/editCart", row)
|
||||
if (resp.code === 0) {
|
||||
await this.getCart()
|
||||
loading.close()
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
|
||||
// 点击全选，切换购物车商品选中状态，发送请求
|
||||
onClickCheckAll() {
|
||||
let productIdAllList = []
|
||||
|
||||
this.cartList.forEach((item) => {
|
||||
productIdAllList.push(item.id.toString())
|
||||
})
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = this.$axios
|
||||
.post("/platform/benefit/shop/editCartList", {
|
||||
ids: JSON.stringify(productIdAllList),
|
||||
isChecked: this.checkedAll
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.getCart()
|
||||
loading.close()
|
||||
}
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/buy")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/.van-checkbox__label {
|
||||
flex: 1;
|
||||
}
|
||||
/deep/.van-checkbox {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
/deep/.van-submit-bar {
|
||||
bottom: 50px;
|
||||
}
|
||||
.cart-box {
|
||||
padding-bottom: 150px;
|
||||
box-sizing: border-box;
|
||||
.van-card {
|
||||
position: relative;
|
||||
}
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.cart-item {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
.checkbox-btn {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,103 @@
|
||||
<!--#
|
||||
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>
|
||||
<div class="channel-box">
|
||||
<van-tabs @click="changeFn">
|
||||
<van-tab v-for="item in goodsCategoryList" :key="item.id" :title="item.name">
|
||||
<!-- 产品列表 -->
|
||||
<van-card
|
||||
v-for="item in goodsList"
|
||||
:key="item.id"
|
||||
@click="clickFn(item.id)"
|
||||
:price="item.money"
|
||||
:desc="item.simpleDesc"
|
||||
:title="item.name"
|
||||
:thumb="item.imgUrl!=null?item.imgUrl[0].url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fhttps%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01PfO15Z1d0jv9XS9cD_%21%21980613674-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1744168614&t=d8ddb01b1cd4b7d289e491913950b215'"
|
||||
></van-card>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
id_: "0", // 当前类别的id
|
||||
goodsCategoryList: [], // 分类数组
|
||||
goodsList: [], //当前类别对应的商品列表
|
||||
front_desc: ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initGoodsCategory() //获取所有分类数据
|
||||
this.id_ = this.goodsCategoryList.length > 0 ? this.goodsCategoryList[0].id : ""
|
||||
this.getCategoryListData()
|
||||
},
|
||||
methods: {
|
||||
//获取商品类型
|
||||
initGoodsCategory() {
|
||||
this.$axios.post("/platform/benefit/shop/getCategoryTree").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.goodsCategoryList = res.data
|
||||
this.goodsCategoryList.unshift({
|
||||
id: "",
|
||||
name: "全部",
|
||||
parentId: "",
|
||||
weight: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//获取当前类别对应的产品数组
|
||||
getCategoryListData() {
|
||||
this.$axios.post("/platform/benefit/goods/getGoodsListByType", { id: this.id_ }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.goodsList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// / 切换分类
|
||||
changeFn(title, name) {
|
||||
console.log(this.goodsCategoryList)
|
||||
// title 下标
|
||||
// name: 分类标题
|
||||
this.goodsList = []
|
||||
this.id_ = ""
|
||||
|
||||
this.goodsCategoryList.forEach((item) => {
|
||||
if (item.name === name) {
|
||||
this.id_ = item.id
|
||||
}
|
||||
})
|
||||
|
||||
this.getCategoryListData()
|
||||
},
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop")
|
||||
},
|
||||
clickFn(id) {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/detail?id=" + id)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.channel-box {
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
p {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,249 @@
|
||||
<!--#
|
||||
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>
|
||||
<div class="product-detail-box">
|
||||
<van-swipe :autoplay="3000" v-if="formData.imgUrl!=null">
|
||||
<van-swipe-item v-for="item in formData.imgUrl" :key="item.uid">
|
||||
<img :src="item.url" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<div v-else class="swipe-img">
|
||||
<img
|
||||
style="height: 390px"
|
||||
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fhttps%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01PfO15Z1d0jv9XS9cD_%21%21980613674-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1744168614&t=d8ddb01b1cd4b7d289e491913950b215"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="info-name">{{ formData.name }}</p>
|
||||
<p class="info-brief">{{ formData.simpleDesc }}</p>
|
||||
<p class="info-price">￥{{ formData.money }}</p>
|
||||
</div>
|
||||
|
||||
<div class="attribute">
|
||||
<div class="mytitle">
|
||||
<span></span>
|
||||
<h3>商品参数</h3>
|
||||
</div>
|
||||
<ul v-if="formData.benefitGoodsSpecificationsList.length>0">
|
||||
<li v-for="(item,index) in formData.benefitGoodsSpecificationsList" :key="item.id">
|
||||
<span class="attribute-name"></span>
|
||||
<span class="attribute-value">规格{{chineseNum(index+1)}}：{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-else>
|
||||
<li>
|
||||
<span class="attribute-name"></span>
|
||||
<span class="attribute-value">该暂无规格</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 产品详情 -->
|
||||
<div class="mytitle">
|
||||
<span></span>
|
||||
<h3>产品详情</h3>
|
||||
</div>
|
||||
<!-- 产品描述信息 -->
|
||||
<div class="goods_desc" v-html="formData.description"></div>
|
||||
|
||||
<!-- 下方购物车 -->
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" :badge="badge" @click="goCart"></van-goods-action-icon>
|
||||
<van-goods-action-button type="warning" text="加入购物车" @click="addCar"></van-goods-action-button>
|
||||
<van-goods-action-button type="danger" text="立即购买" @click="addCar"></van-goods-action-button>
|
||||
</van-goods-action>
|
||||
|
||||
<!-- 添加购物车面板 -->
|
||||
<van-sku v-model="show" ref="sku" :sku="sku" :goods="goods" @add-cart="onAddCartClicked" @buy-clicked="toBuy"></van-sku>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
gallery: [],
|
||||
info: {},
|
||||
attribute: [], //参数
|
||||
show: false,
|
||||
sku: {},
|
||||
goods: {
|
||||
// 默认商品 sku 缩略图
|
||||
picture: ""
|
||||
},
|
||||
productList: [], // 当前产品信息
|
||||
badge: 0,
|
||||
id: "",
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = window.location.search.substring(4)
|
||||
this.initGoods()
|
||||
this.getCartData()
|
||||
},
|
||||
methods: {
|
||||
chineseNum(num) {
|
||||
const numMap = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"]
|
||||
return numMap[num]
|
||||
},
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop")
|
||||
},
|
||||
goCart() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/cart")
|
||||
},
|
||||
addCar() {
|
||||
const spec = []
|
||||
const list = []
|
||||
for (let i = 0; i < this.formData.benefitGoodsSpecificationsList.length; i++) {
|
||||
item = this.formData.benefitGoodsSpecificationsList[i]
|
||||
spec.push({
|
||||
id: item.id, // skuValueId：规格值 id
|
||||
name: item.name, // skuValueName：规格值名称
|
||||
imgUrl: item.imgUrl[0].url, // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
previewImgUrl: item.imgUrl[0].url // 用于预览显示的规格类目图片
|
||||
})
|
||||
list.push({
|
||||
id: 2259 + i, // skuId
|
||||
s1: item.id, // 规格类目 k_s 为 s1 的对应规格值 id
|
||||
s2: item.id, // 规格类目 k_s 为 s1 的对应规格值 id
|
||||
price: item.points * 100, // 价格（单位分）
|
||||
stock_num: 110 // 当前 sku 组合对应的库存
|
||||
})
|
||||
}
|
||||
|
||||
this.sku = {
|
||||
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
|
||||
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
|
||||
tree: [
|
||||
{
|
||||
k: "规格", // skuKeyName：规格类目名称
|
||||
k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
|
||||
v: spec,
|
||||
largeImageMode: true // 是否展示大图模式
|
||||
}
|
||||
],
|
||||
list: list,
|
||||
price: this.formData.money, // 默认价格（单位元）
|
||||
stock_num: 999, // 商品总库存
|
||||
none_sku: this.formData.benefitGoodsSpecificationsList.length == 0 ? true : false, // 是否无规格商品
|
||||
hide_stock: true // 是否隐藏剩余库存
|
||||
}
|
||||
this.goods = {
|
||||
// 默认商品 sku 缩略图
|
||||
picture: this.formData.imgUrl[0].url
|
||||
}
|
||||
this.show = true
|
||||
},
|
||||
// 加入购物车
|
||||
onAddCartClicked() {
|
||||
const cart = {
|
||||
goodsId: this.formData.id,
|
||||
specificationsId: this.$refs.sku.getSkuData().selectedSkuComb.s1
|
||||
}
|
||||
this.$axios.post("/platform/benefit/shop/addCart", cart).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success("添加成功")
|
||||
// 隐藏 商品规格面板
|
||||
this.show = false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取购物车商品数量
|
||||
getCartData() {
|
||||
this.$axios.post("/platform/benefit/shop/getCartList").then((resp) => {
|
||||
if (resp.code === 0) {
|
||||
this.badge = resp.data.length
|
||||
}
|
||||
})
|
||||
},
|
||||
initGoods() {
|
||||
this.$axios.post("/platform/benefit/shop/findOne", { id: this.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.formData = res.data
|
||||
this.formData.imgUrl = JSON.parse(this.formData.imgUrl)
|
||||
}
|
||||
})
|
||||
},
|
||||
toBuy() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/buy?id=" + this.$refs.sku.getSkuData().selectedSkuComb.s1)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.product-detail-box {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.info {
|
||||
text-align: center;
|
||||
|
||||
.info-brief {
|
||||
color: #666;
|
||||
}
|
||||
.info-price {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.attribute {
|
||||
ul {
|
||||
li {
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
.attribute-name {
|
||||
width: 10%;
|
||||
}
|
||||
.attribute-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mytitle {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
span {
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: #ccc;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
h3 {
|
||||
width: 30%;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.goods_desc {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,196 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<div id="app" v-cloak>
|
||||
<template>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="福利商城"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div class="home">
|
||||
<!-- 轮播图 -->
|
||||
<div class="swiper-com">
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item v-for="item in banner" :key="item.id">
|
||||
<img v-if="item.imgUrl.length>0" @click="clickFn(item.id)" :src="item.imgUrl[0].url" alt="" />
|
||||
<img
|
||||
v-else
|
||||
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fhttps%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01PfO15Z1d0jv9XS9cD_%21%21980613674-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1744168614&t=d8ddb01b1cd4b7d289e491913950b215"
|
||||
alt=""
|
||||
/>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<div class="gird">
|
||||
<van-grid :column-num="channel.length">
|
||||
<van-grid-item v-for="item in channel" :key="item.id" :icon="item.icon_url" :text="item.name" @click="btn(item.id)" />
|
||||
</van-grid>
|
||||
</div>
|
||||
<!-- 分类商品 -->
|
||||
<div v-if="item.goodsList.length>0" class="week-product" v-for="item in categoryList" :key="item.id">
|
||||
<div class="mytitle">
|
||||
<span></span>
|
||||
<h3>{{ item.name }}</h3>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="good in item.goodsList" :key="good.id" @click="clickFn(good.id)">
|
||||
<img style="height: 180px" :src="good.imgUrl[0].url" alt="" />
|
||||
<p>{{ good.name }}</p>
|
||||
<p>￥{{ good.money }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="week-product">
|
||||
<div class="mytitle">
|
||||
<span></span>
|
||||
<h3>福利活动</h3>
|
||||
</div>
|
||||
<div v-if="projectList.length > 0" class="table-list">
|
||||
<div @click="clickFl" :key="row.id" class="table-card" v-for="row in projectList">
|
||||
<van-image :src="row.cover" fit="cover" height="200" width="100%"></van-image>
|
||||
<div style="margin: 10px">
|
||||
<div style="font-size: 15px">开始时间：{{$moment(row.startChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
<div style="font-size: 15px">结束时间：{{$moment(row.endChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table-list">
|
||||
<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="暂无福利活动"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
banner: [], //轮播图
|
||||
channel: [
|
||||
{ id: "category", name: "分类", icon_url: "apps-o" },
|
||||
{ id: "cart", name: "购物车", icon_url: "shopping-cart-o" },
|
||||
{ id: "order", name: "我的订单", icon_url: "orders-o" }
|
||||
], //居家-志趣数据
|
||||
projectList: [],
|
||||
hotGoodsList: [],
|
||||
topicList: [],
|
||||
categoryList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取轮播图
|
||||
initGoodsImg() {
|
||||
this.$axios.post("/platform/benefit/shop/getGoodsList").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.banner = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
btn(id) {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/" + id)
|
||||
},
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
},
|
||||
clickFn(id) {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop/detail?id=" + id)
|
||||
},
|
||||
//获取福利商品
|
||||
initGoods() {
|
||||
this.$axios.post("/platform/benefit/shop/getGoodsListByType").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.categoryList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取福利项目
|
||||
initProject() {
|
||||
this.$axios.post("/platform/benefit/shop/getProjectGoodsList").then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (res.data.length > 0) {
|
||||
this.projectList = [res.data[0]]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
clickFl() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/userSelection")
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initGoodsImg()
|
||||
this.initProject()
|
||||
this.initGoods()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.home {
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.swiper-com {
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.week-product {
|
||||
.mytitle {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
span {
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: #ccc;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
h3 {
|
||||
width: 30%;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 49%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-box {
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,125 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="我的订单"></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.goodsName"
|
||||
placeholder="请输入商品名称进行查询"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
</van-sticky>
|
||||
<van-list v-model="tableLoading" :finished="tableFinished" finished-text="没有更多了" @load="pageData">
|
||||
<van-swipe-cell v-for="(order,index) in tableData">
|
||||
<van-card
|
||||
@click="detail(order)"
|
||||
:price="order.points"
|
||||
:desc="order.specName"
|
||||
:title="order.goodsName"
|
||||
:thumb="order.imgUrl[0].url"
|
||||
></van-card>
|
||||
<template #right>
|
||||
<van-button square text="删除" @click="deleteOrder(order.id)" type="danger" class="delete-button" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</van-list>
|
||||
|
||||
<van-action-sheet v-model="show" title="详情">
|
||||
<div class="content">
|
||||
<van-cell-group>
|
||||
<van-cell title="商品名称" :value="formData.goodsName"></van-cell>
|
||||
<van-cell title="商品规格" :value="formData.specName"></van-cell>
|
||||
<van-cell title="下单时间" :value="formData.orderTime"></van-cell>
|
||||
<van-cell title="收货信息" :value="formData.userAddress"></van-cell>
|
||||
<van-cell title="收货地址" :value="formData.receiveAddress"></van-cell>
|
||||
<van-cell title="商品详情" :label="formData.simpleDesc"></van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
tableLoading: false,
|
||||
tableFinished: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
goodsName: ""
|
||||
},
|
||||
tableData: [],
|
||||
show: false,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$pjaxReplace("/platform/h5/benefit/shop")
|
||||
},
|
||||
doSearch() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.tableFinished = false
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios.post("/platform/benefit/order/pageData", this.pageForm).then((resp) => {
|
||||
this.tableData = this.tableData.concat(resp.data.list)
|
||||
for (let i = 0; i < this.tableData.length; i++) {
|
||||
this.tableData[i].imgUrl = JSON.parse(this.tableData[i].imgUrl)
|
||||
}
|
||||
this.pageForm.totalCount = resp.data.totalCount
|
||||
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||
this.tableFinished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
async deleteOrder(id) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/benefit/address/deleteAddress", { id: id })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.doSearch()
|
||||
loading.close()
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
detail(order) {
|
||||
this.formData = order
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.delete-button {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
background-color: #ee0a24;
|
||||
border: 1px solid #ee0a24;
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,557 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
.table-list .collapse .van-cell__left-icon {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.table-list .table-card .goodsPm {
|
||||
font-size: 13px;
|
||||
background-color: rgb(253, 247, 229);
|
||||
color: rgb(202, 156, 108);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.table-list .table-card .goodsYxz {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
@click-left="()=>this.$pjaxReplace('/platform/h5/benefit/userSelection')"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
placeholder
|
||||
title="商品列表"
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div>
|
||||
<div class="table-list">
|
||||
<div class="table-card">
|
||||
<van-collapse class="collapse" v-model="benefitViews">
|
||||
<van-collapse-item icon="star" name="1" title="福利信息">
|
||||
<div>
|
||||
<van-cell-group>
|
||||
<van-cell :value="viewData.name" title="福利名称"></van-cell>
|
||||
<van-cell title="是否电子签字">
|
||||
<dict-tag :options="dict.type.BENEFIT_SIGN_MODE"
|
||||
:value="viewData.signMode"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="发放形式">
|
||||
<dict-tag :options="dict.type.BENEFIT_PROVIDE_MODE"
|
||||
:value="viewData.provideMode"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="选择开始时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
{{$moment(viewData.startChoiceTime).format("YYYY-MM-DD HH:mm")}}
|
||||
</van-cell>
|
||||
<van-cell title="选择结束时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
{{$moment(viewData.endChoiceTime).format("YYYY-MM-DD HH:mm")}}
|
||||
</van-cell>
|
||||
<van-cell title="逾期选择时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
<span v-if="viewData.endOverdueChoiceTime">
|
||||
{{ $moment(viewData.endOverdueChoiceTime).format("YYYY-MM-DD HH:mm") }}
|
||||
</span>
|
||||
<span v-else>暂无</span>
|
||||
</van-cell>
|
||||
<van-cell title="福利总积分" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
{{viewData.totalMoney}}
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</div>
|
||||
<!-- 如果是统一发放并且需要签字-->
|
||||
<div v-if="viewData.signMode==='BENEFIT_SIGN_MODE_ONE'&&viewData.provideMode === 'BENEFIT_PROVIDE_MODE_ONE'">
|
||||
<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>
|
||||
<template #label>
|
||||
<div>
|
||||
<h5-signature v-model="formData.userSign"></h5-signature>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 10px 16px; left: 0; right: 0; bottom: 0; background: #ffffff">
|
||||
<van-button @click="submit" round style="width: 100%" type="primary">提交</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 如果是意向选择-->
|
||||
<div v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
<div class="table-card" v-for="(item,index) in viewData.benefitGoodsList">
|
||||
<div>
|
||||
<van-row gutter="5">
|
||||
<van-col span="2">
|
||||
<van-image height="30" src="/assets/mobile/img/benefit/1.png" width="30"></van-image>
|
||||
</van-col>
|
||||
<van-col span="14">
|
||||
<div class="goodsPm">此套餐在本次福利排行第{{index+1}}名</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="goodsYxz">已选择{{item.choiceNum}}件</div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<van-card :price="item.money.toFixed(2)" tag="">
|
||||
<template #title>
|
||||
<div
|
||||
@click="openViewDesc(item.description)"
|
||||
style="font-weight: bold; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||||
>
|
||||
{{item.name}}
|
||||
</div>
|
||||
</template>
|
||||
<template #desc>
|
||||
<div @click="openViewDesc(item.description)" style="margin: 5px">{{item.simpleDesc}}</div>
|
||||
</template>
|
||||
<template #thumb>
|
||||
<van-image :src="item.imgUrl[0].url" @click="openViewDesc(item.description)" height="80"
|
||||
width="80" v-if="item.imgUrl&&item.imgUrl.length>0"></van-image>
|
||||
<van-image
|
||||
src="/assets/mobile/img/benefit/2.png"
|
||||
@click="openViewDesc(item.description)" height="80"
|
||||
width="80" v-else></van-image>
|
||||
</template>
|
||||
<template #num>
|
||||
<van-stepper
|
||||
:default-value="0"
|
||||
:min="0"
|
||||
async-change
|
||||
button-size="20"
|
||||
disable-input
|
||||
integer
|
||||
theme="round"
|
||||
v-model="item.selectNum"
|
||||
></van-stepper>
|
||||
</template>
|
||||
</van-card>
|
||||
</div>
|
||||
<div style="padding-top: 100px">
|
||||
<van-submit-bar
|
||||
:button-text="confirmButtonInfo.text"
|
||||
:price="sumSelectMoney"
|
||||
@submit="openSubmit"
|
||||
class="submitBar"
|
||||
tip="您可以在福利选择截至时间之前修改福利套餐"
|
||||
tip-icon="info-o"
|
||||
></van-submit-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="description"></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" v-for="(item,index) in formData.benefitGoodsList">
|
||||
<van-card
|
||||
:key="item.id"
|
||||
:num="item.selectNum"
|
||||
:thumb="(item.imgUrl&&item.imgUrl.length>0)?item.imgUrl[0].url:'/assets/mobile/img/benefit/2.png'"
|
||||
:title="item.name"
|
||||
center
|
||||
desc=""
|
||||
style="border-radius: 8px; background: #ffffff"
|
||||
></van-card>
|
||||
|
||||
<!-- 有规格时出现-->
|
||||
<van-radio-group v-model="item.specificationsId">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
:key="index"
|
||||
:title="specifications.name"
|
||||
@click="specificationsClick(specifications,index)"
|
||||
clickable
|
||||
v-for="(specifications,index) in item.benefitGoodsSpecificationsList"
|
||||
>
|
||||
<template #right-icon>
|
||||
<van-radio :name="specifications.id" :ref="'radio'+specifications.id"></van-radio>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
<!--邮寄到家 填写收货地址-->
|
||||
<div v-if="item.goodsProvideMode==='GOODS_PROVIDE_MODE_POST'">
|
||||
<van-cell @click="goodsAddressClick(item,index)" class="confirmWelfareCell" is-link>
|
||||
<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="!item.receiveAddress">请选择地址</span>
|
||||
<span v-else>{{item.receiveAddress}}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</div>
|
||||
|
||||
<!--收货门店-->
|
||||
<div v-if="item.goodsProvideMode==='GOODS_PROVIDE_MODE_SHOP'">
|
||||
<van-cell @click="goodsShopAddressClick(item,index)" class="confirmWelfareCell" is-link>
|
||||
<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="!item.shopAddress">请选择收货门店</span>
|
||||
<span v-else>{{item.shopAddress}}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</div>
|
||||
</van-cell>
|
||||
<!--电子签字-->
|
||||
<van-cell v-if="viewData.signMode==='BENEFIT_SIGN_MODE_ONE'">
|
||||
<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>
|
||||
<div>
|
||||
<h5-signature v-model="formData.userSign"></h5-signature>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="padding: 10px 16px; left: 0; right: 0; bottom: 0; background: #ffffff">
|
||||
<van-button @click="submit" round style="width: 100%" type="primary">提交</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="确认收货门店" v-model="shopAddressPopup">
|
||||
<div style="position: relative; height: 500px; overflow-y: auto">
|
||||
<van-cell :key="index" @click="shopAddressClick(item)" clickable icon="location-o"
|
||||
v-for="(item,index) in goodsData.shopAddressList">
|
||||
<template #title>{{item.name}}</template>
|
||||
</van-cell>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="地址管理" v-model="editAddressPopup">
|
||||
<benefit-address @address_click="addressClick" ref="address"></benefit-address>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../address/address.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
dicts: ["BENEFIT_FESTIVAL", "BENEFIT_SIGN_MODE", "BENEFIT_PROVIDE_MODE", "BENEFIT_GOODS_PROVIDE_MODE"],
|
||||
data() {
|
||||
return {
|
||||
benefitId: GetQueryString("benefitId"),
|
||||
benefitViews: [],
|
||||
viewData: {
|
||||
benefitGoodsList: []
|
||||
},
|
||||
description: "",
|
||||
descPopup: false,
|
||||
confirmPopup: false,
|
||||
isChoice: false,
|
||||
selectTime: false,
|
||||
formData: {
|
||||
benefitGoodsList: []
|
||||
},
|
||||
selectAddressPopup: false,
|
||||
addressOptions: [],
|
||||
goodsData: {},
|
||||
goodsDataIndex: 0,
|
||||
shopAddressPopup: false,
|
||||
editAddressPopup: false,
|
||||
userSelection: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"benefit-address": ADDRESS
|
||||
},
|
||||
computed: {
|
||||
sumSelectMoney() {
|
||||
if (this.viewData && this.viewData.benefitGoodsList) {
|
||||
let totalMoney = 0
|
||||
const benefitGoodsList = this.viewData.benefitGoodsList.filter((b) => b.selectNum > 0)
|
||||
benefitGoodsList.map((b) => {
|
||||
totalMoney = totalMoney + b.selectNum * b.money
|
||||
})
|
||||
return totalMoney * 100
|
||||
}
|
||||
return 0
|
||||
},
|
||||
confirmButtonInfo() {
|
||||
if (this.viewData) {
|
||||
const {startChoiceTime, endChoiceTime, endOverdueChoiceTime} = this.viewData
|
||||
const now = moment().valueOf()
|
||||
|
||||
if (endOverdueChoiceTime == null || endOverdueChoiceTime === "") {
|
||||
if (now > moment(startChoiceTime).valueOf() && now < moment(endChoiceTime).valueOf()) {
|
||||
return {
|
||||
text: "提交商品",
|
||||
disabled: false
|
||||
}
|
||||
} else if (now > moment(endChoiceTime).valueOf()) {
|
||||
return {text: "选择已结束", disabled: true}
|
||||
} else if (now < moment(startChoiceTime).valueOf()) {
|
||||
return {text: "选择未开始", disabled: true}
|
||||
}
|
||||
} else {
|
||||
//已选择了不能再动了
|
||||
if (this.isChoice) {
|
||||
if (moment(this.selectTime).valueOf() > moment(endChoiceTime).valueOf() && now < moment(endOverdueChoiceTime).valueOf()) {
|
||||
return {text: "提交商品", disabled: false}
|
||||
}
|
||||
return {text: "选择已结束", disabled: true}
|
||||
} else {
|
||||
if (now > moment(startChoiceTime).valueOf() && now < moment(endOverdueChoiceTime).valueOf()) {
|
||||
return {
|
||||
text: "提交商品",
|
||||
disabled: false
|
||||
}
|
||||
} else if (now > moment(endOverdueChoiceTime).valueOf()) {
|
||||
return {text: "选择已结束", disabled: true}
|
||||
} else if (now < moment(startChoiceTime).valueOf()) {
|
||||
return {text: "选择未开始", disabled: true}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {text: "", disabled: true}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
*如果福利项目发放形式是统一发放true
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getBenefitProvideMode() {
|
||||
console.log(this.viewData.provideMode === "BENEFIT_PROVIDE_MODE_ONE")
|
||||
return this.viewData.provideMode === "BENEFIT_PROVIDE_MODE_ONE"
|
||||
},
|
||||
/**
|
||||
* 查询单个福利
|
||||
* @param id
|
||||
* @returns {Promise<*>}
|
||||
*/
|
||||
async findOneBenefit() {
|
||||
const res = await this.$axios.post("/platform/benefit/userSelection/findOneBenefit", {id: this.benefitId})
|
||||
if (res.code === 0) {
|
||||
this.viewData = res.data
|
||||
}
|
||||
},
|
||||
//查看详情
|
||||
openViewDesc(description) {
|
||||
if (description == null || description.length === 0) {
|
||||
this.$toast("没有更多了")
|
||||
return
|
||||
}
|
||||
this.description = description
|
||||
this.descPopup = true
|
||||
},
|
||||
descImgClick(e) {
|
||||
if (e.target.tagName === "IMG") {
|
||||
vant.ImagePreview([e.target.src])
|
||||
}
|
||||
},
|
||||
async openSubmit() {
|
||||
let totalMoney = 0
|
||||
const benefitGoodsList = this.viewData.benefitGoodsList.filter((b) => b.selectNum > 0)
|
||||
benefitGoodsList.map((b) => {
|
||||
totalMoney = totalMoney + b.selectNum * b.money
|
||||
})
|
||||
|
||||
if (totalMoney === 0) {
|
||||
this.$toast("请选择后再提交！")
|
||||
return
|
||||
}
|
||||
if (totalMoney !== this.viewData.totalMoney) {
|
||||
this.$toast("本次福利积分【" + this.viewData.totalMoney + "】请检查商品数量！")
|
||||
return
|
||||
}
|
||||
this.formData.benefitGoodsList = benefitGoodsList
|
||||
this.formData.benefitGoodsList.forEach((b) => {
|
||||
if (b.goodsProvideMode === "GOODS_PROVIDE_MODE_POST" && !b.receiveAddress) {
|
||||
//如果是邮寄商品，并且有默认地址，并且是第一次进来没有选择，则默认地址为收货地址
|
||||
const defaultAddress = this.addressOptions.find((a) => a.isDefault)
|
||||
b.receiveAddress = defaultAddress.name
|
||||
if (b.postProvideConfig.choiceMunicipality || b.postProvideConfig.choiceProvince) {
|
||||
//如果有地址限制
|
||||
b.receiveAddress = ""
|
||||
}
|
||||
}
|
||||
})
|
||||
this.confirmPopup = true
|
||||
},
|
||||
submit() {
|
||||
if (this.viewData.signMode === "BENEFIT_SIGN_MODE_ONE" && !this.formData.userSign) {
|
||||
this.$toast("请签字后再提交！")
|
||||
return
|
||||
}
|
||||
let flag = false
|
||||
let msg = ""
|
||||
this.formData.benefitGoodsList.some((b) => {
|
||||
if (b.goodsProvideMode === "GOODS_PROVIDE_MODE_POST" && !b.receiveAddress) {
|
||||
flag = true
|
||||
msg = "商品中存在未填写的收货地址，请检查！"
|
||||
return true
|
||||
}
|
||||
if (b.benefitGoodsSpecificationsList && b.benefitGoodsSpecificationsList.length > 0 && !b.specificationsId) {
|
||||
flag = true
|
||||
msg = "商品中存在未填写的规格，请检查！"
|
||||
return true
|
||||
}
|
||||
if (b.shopAddressList && b.shopAddressList.length > 0 && !b.shopAddress) {
|
||||
flag = true
|
||||
msg = "商品中存在未填写的门店地址，请检查！"
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (flag) {
|
||||
this.$toast(msg)
|
||||
return
|
||||
}
|
||||
const loading = this.$toast.loading({
|
||||
message: "提交中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const benefitUserSelection = this.formData.benefitGoodsList.map((b) => {
|
||||
let data = {
|
||||
specificationsId: b.specificationsId,
|
||||
receiveAddress: b.receiveAddress,
|
||||
shopAddress: b.shopAddress,
|
||||
selectNum: b.selectNum,
|
||||
benefitId: this.viewData.id,
|
||||
goodsId: b.id,
|
||||
selectUserId: b.selectUserId,
|
||||
userSign: this.formData.userSign
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.$axios
|
||||
.post("/platform/benefit/userSelection/submit", {
|
||||
benefitUserSelection: JSON.stringify(benefitUserSelection),
|
||||
benefitId: this.viewData.id,
|
||||
userId: this.$store.state.user.id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
setTimeout(() => {
|
||||
this.selectSelectionBenefit()
|
||||
this.$toast.success(res.msg)
|
||||
loading.close()
|
||||
this.confirmPopup = false
|
||||
}, 500)
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
loading.close()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
*查询用户选择的商品
|
||||
* @param benefitId
|
||||
* @param userId
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async selectSelectionBenefit() {
|
||||
const res = await this.$axios.post("/platform/benefit/userSelection/selectSelectionBenefit", {
|
||||
benefitId: this.benefitId,
|
||||
userId: this.$store.state.user.id
|
||||
})
|
||||
if (res.code === 0) {
|
||||
this.userSelection = res.data
|
||||
}
|
||||
},
|
||||
addressClick(item) {
|
||||
const address = this.addressOptions.find((a) => a.id === item.id)
|
||||
const {province, city, county, name, tel} = address
|
||||
if (this.goodsData.postProvideConfig.choiceMunicipality && city !== this.goodsData.postProvideConfig.choiceMunicipality) {
|
||||
this.$toast("当前福利限制只能邮寄" + this.goodsData.postProvideConfig.choiceMunicipality + "！")
|
||||
return
|
||||
}
|
||||
if (this.goodsData.postProvideConfig.choiceProvince && province !== this.goodsData.postProvideConfig.choiceProvince) {
|
||||
this.$toast("当前福利限制只能邮寄" + this.goodsData.postProvideConfig.choiceProvince + "！")
|
||||
return
|
||||
}
|
||||
if (address) {
|
||||
this.$set(this.formData.benefitGoodsList[this.goodsDataIndex], "receiveAddress", address.name)
|
||||
}
|
||||
this.editAddressPopup = false
|
||||
},
|
||||
|
||||
goodsAddressClick(goods, index) {
|
||||
this.goodsData = goods
|
||||
this.goodsDataIndex = index
|
||||
this.editAddressPopup = true
|
||||
},
|
||||
goodsShopAddressClick(goods, index) {
|
||||
this.goodsData = goods
|
||||
this.goodsDataIndex = index
|
||||
this.shopAddressPopup = true
|
||||
},
|
||||
shopAddressClick(item) {
|
||||
if (item) {
|
||||
this.$set(this.formData.benefitGoodsList[this.goodsDataIndex], "shopAddress", item.name)
|
||||
}
|
||||
this.shopAddressPopup = false
|
||||
},
|
||||
/**
|
||||
* 回显用户选择的数据
|
||||
* @param benefitId
|
||||
* @param userId
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async echoUserSelection() {
|
||||
await this.selectSelectionBenefit()
|
||||
//获取用户当前选择的数量
|
||||
this.viewData.benefitGoodsList.map((v) => {
|
||||
const goods = this.userSelection.find((x) => x.goodsId === v.id)
|
||||
if (goods) {
|
||||
v.selectNum = goods.selectNum
|
||||
v.selectUserId = goods.selectUserId
|
||||
v.receiveAddress = goods.receiveAddress
|
||||
v.specificationsId = goods.specificationsId
|
||||
v.shopAddress = goods.shopAddress
|
||||
this.formData.userSign = goods.userSign
|
||||
} else {
|
||||
v.selectNum = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
specificationsClick(item, index) {
|
||||
this.$set(this.viewData.benefitGoodsList[index], "specificationsId", item.specificationsId)
|
||||
this.$refs["radio" + item.id][0].toggle()
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.findOneBenefit()
|
||||
await this.echoUserSelection()
|
||||
if (this.viewData.signMode === "BENEFIT_SIGN_MODE_ONE" && this.viewData.provideMode === "BENEFIT_PROVIDE_MODE_ONE") {
|
||||
this.benefitViews = ["1"]
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,94 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
.table-card .van-image__img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.benefitName {
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</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="table-list">
|
||||
<div :key="row.id" @click="openChoose(row)" class="table-card" v-for="row in tableData">
|
||||
<van-image :src="row.cover" fit="cover" height="200" width="100%"></van-image>
|
||||
<div style="margin: 10px">
|
||||
<div class="benefitName">{{row.benefitName}}</div>
|
||||
<div style="font-size: 15px">选择开始时间：{{$moment(row.startChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
<div style="font-size: 15px">选择结束时间：{{$moment(row.endChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
<div style="display: flex; justify-content: flex-end">{{row.isChoice?'已选择':'未选择'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty description="暂无数据" image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" v-else></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
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/benefit/userSelection/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/benefit/userSelection/goodsSelection?benefitId=" + row.benefitId)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,217 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
.table-card .van-image__img {
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.benefitName {
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.collapse .van-cell__left-icon {
|
||||
color: red;
|
||||
}
|
||||
</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="table-list">
|
||||
<div :key="row.id" class="table-card" v-for="row in tableData">
|
||||
<van-image :src="row.cover" fit="cover" height="200" width="100%"></van-image>
|
||||
<div style="margin: 10px">
|
||||
<div class="benefitName">{{row.benefitName}}</div>
|
||||
<div style="font-size: 15px">选择开始时间：{{$moment(row.startChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
<div style="font-size: 15px">选择结束时间：{{$moment(row.endChoiceTime).format('YYYY-MM-DD HH:mm')}}</div>
|
||||
<div style="display: flex; justify-content: flex-end">{{row.isChoice?'已选择':'未选择'}}</div>
|
||||
<div class="van-hairline--bottom"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
|
||||
<van-button @click="openView(row.benefitId)" round size="small" type="primary">查看详情</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty description="暂无数据" image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" v-else></van-empty>
|
||||
</div>
|
||||
<van-action-sheet title="查看详情" v-model="descPopup">
|
||||
<van-collapse class="collapse" v-model="benefitViews">
|
||||
<van-collapse-item icon="star" name="1" title="福利信息">
|
||||
<div>
|
||||
<van-cell-group>
|
||||
<van-cell :value="viewData.name" title="福利名称"></van-cell>
|
||||
<van-cell title="是否电子签字">
|
||||
<dict-tag :options="dict.type.BENEFIT_SIGN_MODE" :value="viewData.signMode"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="发放形式">
|
||||
<dict-tag :options="dict.type.BENEFIT_PROVIDE_MODE" :value="viewData.provideMode"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="选择开始时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
{{$moment(viewData.startChoiceTime).format("YYYY-MM-DD HH:mm")}}
|
||||
</van-cell>
|
||||
<van-cell title="选择结束时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
{{$moment(viewData.endChoiceTime).format("YYYY-MM-DD HH:mm")}}
|
||||
</van-cell>
|
||||
<van-cell title="逾期选择时间" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">
|
||||
<span v-if="viewData.endOverdueChoiceTime">{{ $moment(viewData.endOverdueChoiceTime).format("YYYY-MM-DD HH:mm") }}</span>
|
||||
<span v-else>暂无</span>
|
||||
</van-cell>
|
||||
<van-cell title="福利总积分" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_TWO'">{{viewData.totalMoney}}</van-cell>
|
||||
<van-cell title="福利名称" v-if="viewData.provideMode==='BENEFIT_PROVIDE_MODE_ONE'">{{viewData.giftName}}</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
<div class="van-cell-group--inset">
|
||||
<div v-if="userSelection&&userSelection.length>0">
|
||||
<van-cell>
|
||||
<template #title>
|
||||
<div style="font-weight: bold; font-size: 15px">已选福利</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div :key="item.id" v-for="item in userSelection">
|
||||
<van-card
|
||||
:num="item.selectNum"
|
||||
:thumb="item.goods.imgUrl[0].url"
|
||||
style="border-radius: 8px; background: #ffffff"
|
||||
v-if="item.goods"
|
||||
>
|
||||
<template #title>
|
||||
<div style="font-weight: bold; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
||||
{{item.goods.name}}
|
||||
</div>
|
||||
</template>
|
||||
<template #desc>
|
||||
<div>{{item.goods.simpleDesc}}</div>
|
||||
</template>
|
||||
</van-card>
|
||||
<div style="margin: 5px 20px 5px 20px">
|
||||
<div v-if="item.specificationsName">所选规格：{{item.specificationsName}}</div>
|
||||
<div class="van-hairline--bottom"></div>
|
||||
<div v-if="item.receiveAddress">{{item.receiveAddress}}</div>
|
||||
<div class="van-hairline--bottom"></div>
|
||||
<div v-if="item.shopAddress">收货门店：{{item.shopAddress}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-cell>
|
||||
<template #title>
|
||||
<div style="font-weight: bold; font-size: 15px">电子签名</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="">
|
||||
<template #label>
|
||||
<van-image :src="userSign" style="width: 100%; height: 150px; border: 1px dashed"></van-image>
|
||||
</template>
|
||||
</van-cell>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
dicts: ["BENEFIT_FESTIVAL", "BENEFIT_SIGN_MODE", "BENEFIT_PROVIDE_MODE", "BENEFIT_GOODS_PROVIDE_MODE"],
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear()
|
||||
},
|
||||
yearList: [],
|
||||
descPopup: false,
|
||||
benefitViews: [],
|
||||
viewData: {},
|
||||
userSelection: [],
|
||||
userSign: ""
|
||||
}
|
||||
},
|
||||
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/benefit/userSelection/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 findOneBenefit(id) {
|
||||
const res = await this.$axios.post("/platform/benefit/userSelection/findOneBenefit", { id })
|
||||
if (res.code === 0) {
|
||||
this.viewData = res.data
|
||||
}
|
||||
},
|
||||
async selectSelectionBenefit(benefitId) {
|
||||
const res = await this.$axios.post("/platform/benefit/userSelection/selectSelectionBenefit", { benefitId })
|
||||
if (res.code === 0) {
|
||||
this.userSelection = res.data
|
||||
}
|
||||
},
|
||||
async getUserSelectionSign(benefitId) {
|
||||
const res = await this.$axios.post("/platform/h5/benefit/userSelection/getUserSelectionSign", { benefitId })
|
||||
if (res.code === 0) {
|
||||
this.userSign = res.data.userSign
|
||||
}
|
||||
},
|
||||
async openView(id) {
|
||||
await this.findOneBenefit(id)
|
||||
if (this.viewData.provideMode === "BENEFIT_PROVIDE_MODE_ONE") {
|
||||
this.benefitViews = ["1"]
|
||||
this.userSelection = []
|
||||
await this.getUserSelectionSign(id)
|
||||
} else {
|
||||
this.benefitViews = []
|
||||
await this.selectSelectionBenefit(id)
|
||||
this.userSelection.map((v) => {
|
||||
const data = this.viewData.benefitGoodsList.find((b) => b.id === v.goodsId)
|
||||
v.goods = data
|
||||
if (v.specificationsId) {
|
||||
const specifications = data.benefitGoodsSpecificationsList.find((x) => x.id === v.specificationsId)
|
||||
v.specificationsName = specifications.name
|
||||
}
|
||||
this.userSign = v.userSign
|
||||
})
|
||||
}
|
||||
this.descPopup = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user