|
|
|
@ -1,5 +1,73 @@ |
|
|
|
<template> |
|
|
|
<view class="bg bg-padding"> |
|
|
|
<view class="del-all" @click="delAll()">全部删除</view> |
|
|
|
<uni-swipe-action> |
|
|
|
<view class="cart-container" v-for="(item,i) in cartList" :key="i"> |
|
|
|
<view class="flex" style="align-items: center;padding: 20rpx;"> |
|
|
|
<view class="no-select" v-show="!item.is_seld" @click="changeShopSelect(item,true)"></view> |
|
|
|
<image class="select-img" v-show="item.is_seld" @click="changeShopSelect(item,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image> |
|
|
|
<view class="shop-name">{{item.shop_name}} <uni-icons type="right" size="12"></uni-icons></view> |
|
|
|
<view style="font-size: 27rpx;color: #7C7C7C;" @click="delCartByShop(item,index)">删除</view> |
|
|
|
</view> |
|
|
|
<uni-swipe-action-item v-for="(goods,goodsIndex) in item.goods" :key="goodsIndex"> |
|
|
|
<view class="cart-item" :style="{'padding-bottom':goods.product.type=='hotel'?'60rpx':'20rpx'}"> |
|
|
|
<view class="flex-between"> |
|
|
|
<view class="no-select" v-show="!goods.is_seld" @click="changeGoodsSelect(goods,true)"></view> |
|
|
|
<image class="select-img" v-show="goods.is_seld" @click="changeGoodsSelect(goods,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image> |
|
|
|
<image class="cart-img" :src="goods.sku.headimg"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="cart-content"> |
|
|
|
<view> |
|
|
|
<view class="title text-overflow">{{goods.product.title}}</view> |
|
|
|
<view class="sku-name text-overflow">{{goods.sku.sku_name}}</view> |
|
|
|
</view> |
|
|
|
<view class="flex-between"> |
|
|
|
<view class="price">{{goods.sku.price/100}}</view> |
|
|
|
<view class="flex-between"> |
|
|
|
<view :class="['ctrl',goods.num<=1?'disabled':'']" @click="addBuyNum(goods,-1)">-</view> |
|
|
|
<view style="padding: 0 20rpx;">{{goods.num}}</view> |
|
|
|
<view class="ctrl" @click="addBuyNum(goods,1)">+</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="time-select" v-if="goods.product.type=='hotel'"> |
|
|
|
<view v-if="goods.start_time&&goods.end_time"></view> |
|
|
|
<view v-else>请选择时间</view> |
|
|
|
>> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="off-cover" v-if="goods.sku.flag == 'off'" @click="delItem(goods)"> |
|
|
|
<view>商品已失效</view> |
|
|
|
<view class="off-btn">删除</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<template v-if="goods.sku.flag != 'off'" v-slot:right> |
|
|
|
<view class="cart-item-del" @click="delItem(goods)"> |
|
|
|
<uni-icons type="trash" size="16" color="#fff"></uni-icons> |
|
|
|
<view>删除</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</uni-swipe-action-item> |
|
|
|
|
|
|
|
</view> |
|
|
|
</uni-swipe-action> |
|
|
|
<view style="width: 1rpx;height: 250rpx;"></view> |
|
|
|
|
|
|
|
<view class="bottom-btn"> |
|
|
|
<view class="flex" style="align-items: center;"> |
|
|
|
<view @click="selectAllData(true)" class="no-select" v-show="!selectAll" style="margin-right: 12rpx;"></view> |
|
|
|
<image @click="selectAllData(false)" class="select-img" v-show="selectAll" style="margin-right: 12rpx;" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image> |
|
|
|
<text>全选</text> |
|
|
|
|
|
|
|
<text style="padding-left: 20rpx;">合计</text> |
|
|
|
<text class="price">{{total()}}</text> |
|
|
|
</view> |
|
|
|
<view class="btn" @click="goOrder()">去下单</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<CustomTabBar :currentTab="3" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -12,28 +80,423 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
cartList: [], |
|
|
|
allPrice: 0, |
|
|
|
selectAll: false, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
|
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
|
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getShoppingList () { |
|
|
|
getList () { |
|
|
|
this.Post({},"/api/cart/get_list").then(res=>{ |
|
|
|
let resData = (res.data ||[]) |
|
|
|
let shopSelectIds = [] |
|
|
|
let skuSelectIds = [] |
|
|
|
this.cartList.forEach(v=>{ |
|
|
|
if (v.is_seld) {shopSelectIds.push(v.id)} |
|
|
|
v.goods.forEach(x=>{ |
|
|
|
if(x.is_seld) {skuSelectIds.push(x.sku_id)} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
resData.forEach(v=>{ |
|
|
|
v.is_seld = shopSelectIds.includes(v.id) |
|
|
|
// v.show = true |
|
|
|
v.goods.forEach(x=>{ |
|
|
|
x.is_seld = skuSelectIds.includes(x.sku_id) |
|
|
|
// v.show = true |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.cartList = resData |
|
|
|
this.judgeSelectAll() |
|
|
|
}).finally(()=>{ |
|
|
|
uni.hideLoading() |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 单个增加/减少 |
|
|
|
addBuyNum(item,num,index){ |
|
|
|
console.log(item) |
|
|
|
if (num == -1 && item.num == 1) { |
|
|
|
return // 单独走删除 |
|
|
|
this.delItem(item) |
|
|
|
} else { |
|
|
|
let numData = item.num + num |
|
|
|
this.Post({sku_id: item.sku_id, num: numData},'/api/cart/update_sku').then(res =>{ |
|
|
|
item.num += num |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 单个删除 |
|
|
|
delItem(item){ |
|
|
|
this.Post({sku_id: item.sku_id},'/api/cart/del_sku').then(res =>{ |
|
|
|
// this.cartData.splice(index,1) |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
// 把店铺下的所有商品删除 |
|
|
|
delCartByShop (item, index) { |
|
|
|
let goods = item.goods.map(v=>v.sku_id) |
|
|
|
this.Post({sku_id: goods.join(',')},'/api/cart/del_sku').then(res =>{ |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 删除全部 |
|
|
|
delAll () { |
|
|
|
let goods = [] |
|
|
|
this.cartList.forEach(v=>{ |
|
|
|
v.goods.forEach(x=>{goods.push(x.sku_id)}) |
|
|
|
}) |
|
|
|
this.Post({sku_id: goods.join(',')},'/api/cart/del_sku').then(res =>{ |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 全选 |
|
|
|
selectAllData (flag) { |
|
|
|
this.selectAll = flag |
|
|
|
if (flag) { |
|
|
|
this.cartList.forEach(t=>{ |
|
|
|
t.goods.forEach(v=>{ |
|
|
|
if (v && v.product &&v.sku) { |
|
|
|
if (v.sku.flag== "off") { |
|
|
|
v.is_seld = false |
|
|
|
} else { |
|
|
|
if (v.product.type == 'hotel'&&(!v.strat_time||!v.end_time)) { |
|
|
|
v.is_seld = false |
|
|
|
} else { |
|
|
|
v.is_seld = true |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.cartList.forEach(v=>{ |
|
|
|
v.is_seld = false |
|
|
|
}) |
|
|
|
} |
|
|
|
this.judgeSelectAll() |
|
|
|
}, |
|
|
|
// 店铺选中 |
|
|
|
changeShopSelect(item, flag) { |
|
|
|
if (flag) { |
|
|
|
item.goods.forEach(v=>{ |
|
|
|
if (v.sku.flag== "off") { |
|
|
|
v.is_seld = false |
|
|
|
} else { |
|
|
|
if (v.product.type == 'hotel'&&(!v.strat_time||!v.end_time)) { |
|
|
|
v.is_seld = false |
|
|
|
} else { |
|
|
|
v.is_seld = true |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
item.is_seld = true |
|
|
|
} else { |
|
|
|
item.goods.forEach(v=>{ |
|
|
|
v.is_seld = false |
|
|
|
}) |
|
|
|
item.is_seld = false |
|
|
|
} |
|
|
|
this.judgeSelectAll() |
|
|
|
}, |
|
|
|
// 单个选中 |
|
|
|
changeGoodsSelect(item,flag) { |
|
|
|
if (flag) { |
|
|
|
if (item.sku.flag== "off") { |
|
|
|
item.is_seld = false |
|
|
|
} else { |
|
|
|
if (item.product.type == 'hotel'&&(!item.strat_time||!item.end_time)) { |
|
|
|
item.is_seld = false |
|
|
|
uni.showToast({ |
|
|
|
title:'酒店产品需要选择时间', |
|
|
|
icon:'none' |
|
|
|
}) |
|
|
|
} else { |
|
|
|
item.is_seld = true |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
item.is_seld = false |
|
|
|
} |
|
|
|
this.judgeSelectAll() |
|
|
|
}, |
|
|
|
// 判断全选 |
|
|
|
judgeSelectAll () { |
|
|
|
this.cartList.forEach(v=>{ |
|
|
|
if(v.goods.some(x=>x.sku&& x.sku.flag!= "off"&&!x.is_seld)) { |
|
|
|
v.is_seld = false; |
|
|
|
} else { |
|
|
|
v.is_seld = true; |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
if (this.cartList.every(v=>v.is_seld)) { |
|
|
|
this.selectAll = true |
|
|
|
} else { |
|
|
|
this.selectAll = false |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 去下单 |
|
|
|
goOrder () { |
|
|
|
let buyGoods = this.cartList.filter(v=>v.is_seld) |
|
|
|
if (buyGoods.length<=0) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请选择要购买的产品', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
let ticketOrderList = [] // 门票类下单 |
|
|
|
let foodOrderList = [] // 农家烟火下单 |
|
|
|
let techanOrderList = [] // 邮寄自提下单 |
|
|
|
let hotelOrderList = [] // 酒店下单 |
|
|
|
|
|
|
|
buyGoods.forEach(v=>{ |
|
|
|
if (v.product.is_package == 1) { |
|
|
|
foodOrderList.push({ |
|
|
|
pInfo: v.product, |
|
|
|
sInfo: {...v.sku, buyNum: v.num} |
|
|
|
}) |
|
|
|
} else if (v.product.type == "ticket") { |
|
|
|
ticketOrderList.push({ |
|
|
|
pInfo: v.product, |
|
|
|
sInfo: {...v.sku, buyNum: v.num} |
|
|
|
}) |
|
|
|
} else if (v.product.type == "post") { |
|
|
|
techanOrderList.push({ |
|
|
|
pInfo: v.product, |
|
|
|
sInfo: {...v.sku, buyNum: v.num} |
|
|
|
}) |
|
|
|
} else if (v.product.type == "hotel") { |
|
|
|
hotelOrderList.push(v) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// 数据储存 todo |
|
|
|
this.$store.commit("changeTechanOrderList", techanOrderList); |
|
|
|
this.$store.commit("changeTicketOrderList", ticketOrderList); |
|
|
|
this.$store.commit("changeFoodOrderList", foodOrderList); |
|
|
|
this.$store.commit("changeHotelOrderList", hotelOrderList); |
|
|
|
// 邮寄 > 门票 > 农家乐 > 酒店 |
|
|
|
this.goCartNextPage(0) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
total () { |
|
|
|
return 0 |
|
|
|
}, |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.bg { |
|
|
|
min-height: 100vh; |
|
|
|
padding: 26rpx 26rpx 0; |
|
|
|
} |
|
|
|
.cart-container{ |
|
|
|
width: 100%; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-bottom: 26rpx; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
.shop-name{ |
|
|
|
font-weight: 500; |
|
|
|
font-size: 35rpx; |
|
|
|
color: #000000; |
|
|
|
flex: 1; |
|
|
|
width: 1rpx; |
|
|
|
line-height: 57rpx; |
|
|
|
padding-right: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.no-select{ |
|
|
|
width: 37rpx; |
|
|
|
height: 37rpx; |
|
|
|
border-radius: 50%; |
|
|
|
border: 1px solid #666666; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 24rpx; |
|
|
|
} |
|
|
|
.select-img{ |
|
|
|
width: 37rpx; |
|
|
|
height: 37rpx; |
|
|
|
border-radius: 50%; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.cart-item{ |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
position: relative; |
|
|
|
padding: 20rpx; |
|
|
|
.cart-img{ |
|
|
|
width: 173rpx; |
|
|
|
height: 173rpx; |
|
|
|
border-radius: 13rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.cart-content{ |
|
|
|
flex: 1; |
|
|
|
min-height: 173rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
width: 1rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
font-weight: normal; |
|
|
|
font-size: 31rpx; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
.sku-name{ |
|
|
|
font-weight: 500; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #7C7C7C; |
|
|
|
} |
|
|
|
.price{ |
|
|
|
font-size: 37rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #C3282E; |
|
|
|
&::before{ |
|
|
|
content: '￥'; |
|
|
|
font-size: 27rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.ctrl{ |
|
|
|
width: 47rpx; |
|
|
|
height: 47rpx; |
|
|
|
background: #6A8A27; |
|
|
|
border-radius: 50%; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 34rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 47rpx; |
|
|
|
&.disabled{ |
|
|
|
background: #E8E8E8; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.off-cover{ |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(0,0,0,0.3); |
|
|
|
font-weight: 400; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.off-btn{ |
|
|
|
width: 67rpx; |
|
|
|
height: 67rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 50%; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #000000; |
|
|
|
text-align: center; |
|
|
|
line-height: 67rpx; |
|
|
|
margin-left: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.cart-item-del{ |
|
|
|
width: 80rpx; |
|
|
|
height: 100%; |
|
|
|
background: #FF0505; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-weight: normal; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-btn{ |
|
|
|
width: 100%; |
|
|
|
height: 125rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
position: fixed; |
|
|
|
justify-content: space-between; |
|
|
|
padding:0 26rpx; |
|
|
|
bottom: 133rpx; |
|
|
|
left: 0; |
|
|
|
z-index: 50; |
|
|
|
border-bottom: 1px solid #F7F7F7; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #393B3E; |
|
|
|
.price{ |
|
|
|
font-size: 44rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #C3282E; |
|
|
|
padding-left: 33rpx; |
|
|
|
line-height: 0; |
|
|
|
&::before{ |
|
|
|
content: "￥"; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
width: 300rpx; |
|
|
|
height: 80rpx; |
|
|
|
background: #6A8A27; |
|
|
|
border-radius: 13rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 80rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.time-select{ |
|
|
|
height: 43rpx; |
|
|
|
background: rgba(106,138,39,0.2); |
|
|
|
border-radius: 8rpx; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #6A8A27; |
|
|
|
text-align: center; |
|
|
|
line-height: 43rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 0 20rpx; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
right: 20rpx; |
|
|
|
} |
|
|
|
.del-all{ |
|
|
|
font-weight: normal; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #000000; |
|
|
|
text-align: right; |
|
|
|
padding-bottom: 25rpx; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
jiazhipeng
4 months ago