时味苏州
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

558 lines
14 KiB

4 months ago
<template>
7 days ago
<view class="cartData-bg">
4 months ago
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"
:safe-area="true" @change="popChange">
<view class="cart-container" v-if="showCart">
<view class="header-container">
<view class="select-area flex flex-items-center" @click.stop="selectAllGoods">
<view class="select-cycle" v-show="!selectAll"></view>
<view class="select-cycle selected" v-show="selectAll">
4 months ago
<image src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png">
4 months ago
</view>
<view style="padding-left: 26rpx;" >全选</view>
</view>
<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods">
4 months ago
<!-- <image src="https://cgc.js-dyyj.com/uploads/20241104/50900c9a5fa5fbdbdee526abc9af4a40.png"></image> -->
4 months ago
<view style="padding-left: 8rpx;" >清空</view>
</view>
</view>
<view class="content-container">
2 months ago
<view class="content-item" v-for="(item,i) in cartData" :key="i" :model="cartData" style="position: relative;">
<view class="flex flex-items-center" @tap.stop="setItemSelect(item)" >
4 months ago
<view class="select-cycle" v-show="!item.isSelected"></view>
<view class="select-cycle selected" v-show="item.isSelected">
4 months ago
<image src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png">
4 months ago
</view>
<view style="padding-left: 26rpx;flex:1">
4 months ago
<view class="commodity box" v-if="item.sku">
2 months ago
<view class="img" style="position: relative;">
<image class="img" :src="showImg(item.sku.headimg)" mode="aspectFill"></image>
<view class="hover-use-type">
{{item.sku.user_select_type==1?"邮寄":item.sku.user_select_type==2?"自提":
item.sku.user_select_type==3?"配送":"核销"}}
</view>
</view>
4 months ago
<view class="title goods-text-area">
<view class="commodity-info">
4 months ago
<view class="text-overflowRows" style="font-weight: bold;">{{ item.product.title }}</view>
<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.sku.sku_name }}</view>
4 months ago
</view>
<view class="flex flex-between">
<view class="commodity-price">
4 months ago
<view style="font-size: 40rpx;">{{item.sku.price/100}}</view>
4 months ago
</view>
<view class="add-num-area">
<view :class="['ctrl',item.num>1?'':'disabled']" @click.stop="addBuyNum(item,-1,i)" >-</view>
<view>{{item.num}}</view>
<view :class="['ctrl']" @click.stop="addBuyNum(item,1,i)">+</view>
</view>
</view>
</view>
</view>
</view>
2 months ago
<view class="off-cover" v-if="item.sku.flag == 'off'">
<view>商品已失效</view>
<!-- <view class="off-btn">删除</view> -->
</view>
<view class="off-cover" v-else-if="!item.sku.isInTimeRange">
<view>商品暂不配送服务时间 {{item.product.supplier_bsamecity_delivery_start_time}}{{item.product.supplier_bsamecity_delivery_end_time}}</view>
</view>
4 months ago
</view>
</view>
4 months ago
<view class="no-data-zhanwei" v-if="cartData.length<=0">
<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
<view style="padding:50rpx 0 67rpx">暂无数据</view>
</view>
4 months ago
<view style="height: 140rpx;width: 1rpx;"></view>
4 months ago
</view>
4 months ago
4 months ago
</view>
</uni-popup>
<slot name="content"></slot>
</view>
</template>
<script>
export default {
name: "cartData",
data() {
return {
cartData: [],
showCart: false,
selectAll: false,
canOpenpop: true,
allPrice: {allPrice:0, iNum:0, fNum:'00'},
}
},
props:{
paramData: {
type: Object,
},
},
mounted() {
this.canOpenpop = true
this.refreshData()
uni.$on("updateDataByConnect",this.getDataByConnect)
},
beforeUnmount () {
console.log('触发off')
uni.$off("updateDataByConnect",this.getDataByConnect)
},
beforeDestroy () {
console.log('触发off')
uni.$off("updateDataByConnect",this.getDataByConnect)
},
methods: {
calNum () {
let res = 0
this.cartData.forEach(v=>{
res += v.num
})
return res
},
closePopup() {
this.$refs.popup.close()
this.paramData.showCart = this.showCart
this.$emit('changeParamData', this.paramData)
},
openPop(){
this.$refs.popup.open()
this.paramData.showCart = this.showCart
this.$emit('changeParamData', this.paramData)
},
popChange (e) {
this.showCart = e.show
this.paramData.showCart = this.showCart
this.$emit('changeParamData', this.paramData)
},
getDataByConnect(data) {
if (data.msgType == "updateCartDataInfo") {
this.refreshData(data)
}
},
refreshData (data) {
let selectedData = []
try {
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo'));
} catch(e) {
selectedData = []
}
if (Array.isArray(data) && data.length>0) {
this.cartData = data
this.setAllSelect()
} else {
this.Post({noForceLogin: true},'/api/cart/get_post_list').then(res => {
4 months ago
if (res) {
2 months ago
this.cartData = (res.data || []).map(v=>{
if (v.delivery_method) {
v.sku.user_select_type = v.delivery_method
} else {
// 邮寄
if (v.sku.use_type === 0 || v.sku.use_type === 3) {v.sku.user_select_type=1}
// 配送(3)
else if (v.sku.is_delivery) {v.sku.user_select_type=3}
// 自提(2)
else if (v.sku.use_type === 1) {v.sku.user_select_type=2}
else{
// 此时 use——type 是2 强制变4 核销
v.sku.user_select_type = 4
}
}
// 如果是自提 判断是否在配送时间内
if (v.sku.user_select_type==3) {
if (v.product.supplier_bsamecity_delivery_start_time && v.product.supplier_bsamecity_delivery_end_time) {
v.sku.isInTimeRange = this.isInTimeRange(v.product.supplier_bsamecity_delivery_start_time, v.product.supplier_bsamecity_delivery_end_time)
} else {
v.sku.isInTimeRange = false
}
} else {
v.sku.isInTimeRange = true
}
return {
...v, isSelected:selectedData.includes(v.specifications_id)
}
})
4 months ago
this.setAllSelect()
}
})
}
},
// 购物车操作
setItemSelect(item) {
item.isSelected = !item.isSelected
// uni.setStorageSync('cartDataInfo', JSON.stringify(this.cartData));
this.setAllSelect()
},
selectAllGoods(){
let goods = this.cartData
if (this.selectAll) {
goods.forEach(v => v.isSelected = false)
this.selectAll = false
} else {
2 months ago
goods.forEach(v => {
if (v.sku.flag=="on"&&v.sku.isInTimeRange) {
v.isSelected = true
}
})
4 months ago
this.selectAll = true
}
this.setAllSelect()
},
clearAllGoods(){
2 months ago
let ids = this.cartData.map(v=>v.id)
4 months ago
if (ids.length>0) {
2 months ago
this.Post({id:ids.join(',')},'/api/cart/del_sku').then(res=>{
4 months ago
this.cartData = []
this.setAllSelect()
})
}
4 months ago
},
setAllSelect() {
let goods = this.cartData
2 months ago
if(goods.length>0){
if (goods.some(v=>v.sku.flag=="on"&&v.sku.isInTimeRange&&!v.isSelected)) {
this.selectAll = false
} else {
this.selectAll = true
}
4 months ago
} else {
this.selectAll = false
}
let selectedData = goods.filter(v=>v.isSelected).map(v=>v.specifications_id)
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData));
this.calAllPrice()
},
addBuyNum(item, num,index){
if (num == -1 && item.num == 1) {
2 months ago
this.Post({id: item.id, num: 0},'/api/cart/del_sku').then(res =>{
4 months ago
this.cartData.splice(index,1)
this.setAllSelect()
})
} else {
let numData = item.num + num
2 months ago
this.Post({id: item.id, num: numData},'/api/cart/update_sku').then(res =>{
4 months ago
item.num += num
this.setAllSelect()
})
}
},
calAllPrice () {
let selectedGoods = this.cartData.filter(v=>v.isSelected)
let totalPrice = 0
selectedGoods.forEach(v=>{
4 months ago
totalPrice += v.sku.price/100 * v.num
4 months ago
})
totalPrice = totalPrice.toFixed(2)
console.log(totalPrice)
this.allPrice = {allPrice: totalPrice, iNum: totalPrice.split('.')[0], fNum: totalPrice.split('.')[1]}
this.paramData.allPrice = totalPrice
this.paramData.iNum = this.allPrice.iNum
this.paramData.fNum = this.allPrice.fNum
this.paramData.num = this.calNum()
this.$emit('changeParamData', this.paramData)
},
goCartOrder () {
if(this.cartData.every(v => !v.isSelected)){
uni.showToast({
title:'请先选中要购买的商品',
icon:'none',
})
return
}
4 months ago
2 months ago
let techanOrderList = {
list1: [], // 邮寄
list2: [], // 自提
list3: [], //配送
}; // 邮寄自提下单
let groups = {};
let dataList = this.cartData.filter(v=>v.isSelected);
dataList.forEach(v=>{
let data = {
4 months ago
pInfo: v.product,
sInfo: {...v.sku, buyNum: v.num},
2 months ago
user_select_type: v.sku.user_select_type,
// user_select_type: 3,
}
// techanOrderList.list3.push(data)
if (v.sku.user_select_type == 1) {techanOrderList.list1.push(data)}
if (v.sku.user_select_type == 2) {techanOrderList.list2.push(data)}
// 配送要带上店铺
if (v.sku.user_select_type == 3) {
let shopInfo = {
id: data.pInfo.supplier_id,
shop_name: data.pInfo.supplier_name,
goods: data // 这里不用数组,下面可以直接push
}
if (groups[shopInfo.id]) {
// 如果已存在,将data添加到数组中
groups[shopInfo.id].goods.push(shopInfo.goods);
} else {
// 如果不存在,创建新的分组对象,并将data初始化为数组
groups[shopInfo.id] = {
...shopInfo,
goods: [shopInfo.goods]
};
}
4 months ago
}
})
2 months ago
techanOrderList.list3 = Object.values(groups);
4 months ago
// 数据储存 todo
this.$store.commit("changeTechanOrderList", techanOrderList);
// 邮寄 > 门票 > 农家乐 > 酒店
this.goCartNextPage(0)
4 months ago
},
},
}
</script>
<style scoped lang="scss">
*{
box-sizing: border-box;
}
7 days ago
.cartData-bg{
4 months ago
width: 100%;
height: 100%;
7 days ago
.cart-container{
4 months ago
display: flex;
flex-direction: column;
7 days ago
background-color: white;
height: 933rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
4 months ago
display: flex;
7 days ago
flex-direction: column;
position: absolute;
width: 100%;
bottom: 0;
z-index: 20;
.header-container{
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 26rpx;
.select-area{
font-family: PingFang SC;
font-weight: bold;
font-size: 37rpx;
color: #000000;
}
.delete-area{
font-family: PingFang SC;
font-weight: bold;
font-size: 27rpx;
color: #999999;
image{
width: 26rpx;
height: 26rpx;
}
}
}
4 months ago
}
7 days ago
.content-container{
4 months ago
flex: 1;
7 days ago
height: 10rpx;
overflow-y: auto;
padding:0 0rpx 0rpx;
.content-item{
padding: 24rpx 26rpx;
// margin-bottom: 48rpx;
}
.commodity {
4 months ago
display: flex;
7 days ago
.add-num-area{
display: flex;
justify-content: space-between;
align-items: center;
width: 160rpx;
image{
width: 49rpx;
height: 49rpx;
4 months ago
}
7 days ago
4 months ago
}
7 days ago
.goods-text-area{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.commodity-price{
font-weight: 500;
4 months ago
font-size: 24rpx;
7 days ago
color: #F84A56;
display: flex;
align-items: baseline;
}
.commodity-info{
font-family: PingFangSC;
font-weight: 500;
font-size: 32rpx;
color: #2C2C2C;
}
// align-items: center;
.img {
width: 217rpx;
height: 179rpx;
border-radius: 13rpx;
flex-shrink: 0;
}
.title {
flex: 1;
margin-left: 20rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
.price-list {
display: flex;
margin-top: 18rpx;
align-items: center;
.price-r {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fc5109;
&:before {
content: '¥';
display: inline-block;
color: #fc5109;
font-size: 24rpx;
}
}
.price-g {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #b5bcc9;
text-decoration: line-through;
margin-left: 10rpx;
}
}
}
.num-box {
display: flex;
align-items: center;
margin-left: 20rpx;
width: 160rpx;
justify-content: space-between;
.num {
text-align: center;
width: 50rpx;
}
.ctrl {
width: 46rpx;
height: 46rpx;
}
4 months ago
}
}
7 days ago
4 months ago
}
7 days ago
.select-cycle{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 1px solid #999999;
image{
width: 100%;
height: 100%;
4 months ago
}
7 days ago
}
.select-cycle.selected {
border: none;
image{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
4 months ago
}
}
7 days ago
.ctrl {
width: 47rpx;
height: 47rpx;
background: #6A8A2D;
border-radius: 50%;
font-family: PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #FFFFFF;
line-height: 47rpx;
text-align: center;
}
.ctrl.disabled{
background: #E8E8E8;
color: #999999;
}
.off-cover{
position: absolute;
top: 0;
left: 0;
right: 0;
4 months ago
width: 100%;
height: 100%;
7 days ago
background: rgba(0,0,0,0.3);
2 months ago
font-weight: 400;
font-size: 27rpx;
7 days ago
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;
}
2 months ago
}
7 days ago
2 months ago
}
7 days ago
4 months ago
</style>