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.
790 lines
17 KiB
790 lines
17 KiB
<template>
|
|
<view class="bg">
|
|
<view class="guanli" v-if="list && list.length > 0" @click="guanli">{{
|
|
operate
|
|
}}</view>
|
|
<view>
|
|
<view class="goodBox" v-if="list.length">
|
|
<!-- <view class="title" v-if="item.data.some((v) => v.flag == 1)">{{ item.merchant_name }}<uni-icons
|
|
size="16" color="#000000" type="arrowright" /></view> -->
|
|
<view class="goodItem" v-for="(goodItem, goodIndex) in list" :key="goodIndex" v-if="goodItem.flag != 0">
|
|
<view class="noSelect" v-if="!goodItem.is_select" @click="changeSelect(goodItem)"></view>
|
|
<view class="selectBox flex-around" v-else @click="changeSelect(goodItem)">
|
|
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" />
|
|
</view>
|
|
<image :src="showImg(goodItem.specUrl)" mode="aspectFill"
|
|
@click="goDetails(goodItem.goodsId)"></image>
|
|
<view class="contentBox">
|
|
<view class="title text-overflow">{{ goodItem.goodsName }}</view>
|
|
<view class="subTitle text-overflow">{{
|
|
goodItem.specValueOne
|
|
}}-{{
|
|
goodItem.specValueTwo
|
|
}}</view>
|
|
<view class="priceBox flex-between">
|
|
<view class="price">{{
|
|
goodItem.salePrice
|
|
}}</view>
|
|
<view class="quantity-control">
|
|
<view :class="[
|
|
'quantity-btn',
|
|
'minus-btn',
|
|
goodItem.quantity == 1 ? 'disabled' : '',
|
|
]" @click="delNum(goodItem)">
|
|
-
|
|
</view>
|
|
<view class="quantity-input">{{ goodItem.quantity }}</view>
|
|
<view class="quantity-btn plus-btn" @click="addNum(goodItem)">
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loseGood" v-if="loseList && loseList.length > 0">
|
|
<view class="title flex-between">失效商品<span @click="delLoseGood('', 1)">清空失效商品</span></view>
|
|
<view class="goodItem" v-for="(goodItem, goodIndex) in loseList" :key="goodIndex">
|
|
<view class="noSelect"></view>
|
|
<image :src="showImg(goodItem.specifications_image)" mode="aspectFill"></image>
|
|
<view class="contentBox">
|
|
<view class="title text-overflow">{{ goodItem.good_name }}</view>
|
|
<view class="subTitle text-overflow">{{
|
|
goodItem.Specifications_name
|
|
}}</view>
|
|
<view class="priceBox flex-between">
|
|
<view class="price">{{ goodItem.salePrice }}</view>
|
|
<view class="btn" @click="delLoseGood(goodItem.id, 0)">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预定按钮 -->
|
|
<view class="orderBox flex-between">
|
|
<view class="priceBox">
|
|
<!-- <view class="selectBox flex-around" v-if="allSelect" @click="changeAllSelect">
|
|
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" alt="">
|
|
</view>
|
|
<view class="noSelect" v-else @click="changeAllSelect"></view>全选 -->
|
|
<span v-if="operate == '管理'">在线付:</span>
|
|
<p v-if="operate == '管理'">￥{{ getAllPrice() }}</p>
|
|
</view>
|
|
<view class="btn" @click="order" v-if="operate == '管理'">提交订单</view>
|
|
<view class="btn" @click="delGood" v-else>删除</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-if="list.length == 0 && loseList.length == 0">
|
|
<image class="empty-icon" :src="showImg('/uploads/20250826/empty-cart.png')" mode="aspectFit"></image>
|
|
<text class="empty-title">购物车空空如也</text>
|
|
<text class="empty-desc">快去挑选心仪的商品吧</text>
|
|
<view class="empty-btn" @click="goShopping">去逛逛</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
operate: "管理",
|
|
list: [],
|
|
loseList: [],
|
|
allSelect: false,
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getShoppingList();
|
|
this.allSelect = false;
|
|
},
|
|
methods: {
|
|
getShoppingList() {
|
|
this.Post({},
|
|
"/framework/cart/list", "DES"
|
|
)
|
|
.then((res) => {
|
|
this.list = res.data || [];
|
|
this.loseList = [];
|
|
this.list.forEach((item) => {
|
|
if (item.effectStatus == 1) {
|
|
this.loseList.push(item);
|
|
}
|
|
});
|
|
console.log("购物车数据更新:", this.list);
|
|
console.log("失效商品:", this.loseList);
|
|
})
|
|
.catch((err) => {
|
|
console.error("获取购物车数据失败:", err);
|
|
this.list = [];
|
|
this.loseList = [];
|
|
});
|
|
},
|
|
// 管理
|
|
guanli() {
|
|
if (this.operate == "管理") {
|
|
this.operate = "退出管理";
|
|
} else {
|
|
this.operate = "管理";
|
|
}
|
|
console.log(this.operate);
|
|
},
|
|
delNum(item) {
|
|
if (item.quantity <= 1) {
|
|
item.quantity = 1;
|
|
uni.showToast({
|
|
title: "已经最少了，不能再减了",
|
|
icon: "none",
|
|
});
|
|
} else {
|
|
item.quantity -= 1;
|
|
this.updateCart(item);
|
|
}
|
|
},
|
|
addNum(item) {
|
|
item.quantity += 1;
|
|
this.updateCart(item);
|
|
},
|
|
updateCart(item) {
|
|
let that = this;
|
|
that
|
|
.Post({
|
|
cartId: item.id,
|
|
quantity: item.quantity,
|
|
},
|
|
"/framework/cart/updateQuantity","DES"
|
|
)
|
|
.then(function(res) {
|
|
if (res) {
|
|
// that.$toast.clear()
|
|
}
|
|
});
|
|
},
|
|
// 更改选中状态
|
|
changeSelect(item) {
|
|
item.is_select = !item.is_select;
|
|
let checkAll = this.list.findIndex((items) => {
|
|
return !items.is_select;
|
|
});
|
|
if (checkAll == -1) {
|
|
this.allSelect = true;
|
|
} else {
|
|
this.allSelect = false;
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
// 去商品详情
|
|
goDetails(id) {
|
|
uni.navigateTo({
|
|
url: "/subPackages/techan/detail?id=" + id,
|
|
});
|
|
},
|
|
|
|
// 去购物
|
|
goShopping() {
|
|
uni.switchTab({
|
|
url: "/pages/index/timeShopBank",
|
|
});
|
|
},
|
|
// 改变所有选中
|
|
changeAllSelect() {
|
|
this.allSelect = !this.allSelect;
|
|
this.list.forEach((item) => {
|
|
item.data.forEach((items) => {
|
|
if (this.allSelect) items.is_select = true;
|
|
else items.is_select = false;
|
|
});
|
|
});
|
|
},
|
|
// 删除失效商品
|
|
delLoseGood(id, index) {
|
|
if (index == 0) {
|
|
// 删除单个失效商品
|
|
uni.showModal({
|
|
title: "确认删除",
|
|
content: "确定要删除这个失效商品吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.Post({
|
|
s_id: id,
|
|
},
|
|
`/framework/cart/remove/${id}`,
|
|
|
|
"DES"
|
|
)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "success",
|
|
});
|
|
// 强制刷新数据
|
|
setTimeout(() => {
|
|
this.getShoppingList();
|
|
}, 100);
|
|
})
|
|
.catch((err) => {
|
|
console.error("删除失效商品失败:", err);
|
|
uni.showToast({
|
|
title: "删除失败",
|
|
icon: "none",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
// 清空所有失效商品
|
|
uni.showModal({
|
|
title: "确认清空",
|
|
content: `确定要清空所有失效商品吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
let ids = [];
|
|
this.loseList.forEach((item) => {
|
|
ids.push(item.id);
|
|
});
|
|
this.Post({
|
|
s_id: ids.toString(),
|
|
},
|
|
"/api/shopping/delShopping",
|
|
"DES"
|
|
)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
title: "清空成功",
|
|
icon: "success",
|
|
});
|
|
// 强制刷新数据
|
|
setTimeout(() => {
|
|
this.getShoppingList();
|
|
}, 100);
|
|
})
|
|
.catch((err) => {
|
|
console.error("清空失效商品失败:", err);
|
|
uni.showToast({
|
|
title: "清空失败",
|
|
icon: "none",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
// 删除商品
|
|
delGood() {
|
|
let ids = [];
|
|
this.list.forEach((items) => {
|
|
if (items.is_select == true) {
|
|
ids.push(items.id);
|
|
}
|
|
});
|
|
|
|
if (ids.length === 0) {
|
|
uni.showToast({
|
|
title: "请选择要删除的商品",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.showModal({
|
|
title: "确认删除",
|
|
content: `确定要删除选中的${ids.length}件商品吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.Post({
|
|
s_id: ids.toString(),
|
|
method:'delete'
|
|
},
|
|
`/framework/cart/remove/${ids.toString()}`,
|
|
"DES"
|
|
)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "success",
|
|
});
|
|
// 强制刷新数据
|
|
setTimeout(() => {
|
|
this.getShoppingList();
|
|
}, 100);
|
|
this.operate = "管理"; // 删除后退出管理模式
|
|
})
|
|
.catch((err) => {
|
|
console.error("删除失败:", err);
|
|
uni.showToast({
|
|
title: "删除失败",
|
|
icon: "none",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 获取总价
|
|
getAllPrice() {
|
|
let allPrice = 0;
|
|
this.list.forEach((item) => {
|
|
if (item.is_select == true) {
|
|
allPrice += item.salePrice * item.quantity;
|
|
}
|
|
});
|
|
return allPrice.toFixed(2);
|
|
},
|
|
// 结算
|
|
order() {
|
|
let list = [];
|
|
let ids = [];
|
|
this.list.forEach((item) => {
|
|
if (item.is_select == true) {
|
|
ids.push(item.merchant_id);
|
|
list.push(item);
|
|
}
|
|
});
|
|
// if (Array.from(new Set(ids)).length > 1) {
|
|
// uni.showToast({
|
|
// title: '请选择同一商户下的商品',
|
|
// icon: 'none'
|
|
// })
|
|
// return;
|
|
// }
|
|
if (list.length == 0) {
|
|
uni.showToast({
|
|
title: "请选择商品",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
console.log("list参数", list);
|
|
this.$store.commit("changeOrderSCart", list);
|
|
// this.gotoPath('/subPackages/order/eCartOrder')
|
|
this.gotoPath("/subPackages/order/gwcOrder");
|
|
// this.gotoPath('/subPackages/goods/goodsOrder')
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bg {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding: 0 27rpx 200rpx;
|
|
box-sizing: border-box;
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.guanli {
|
|
height: 76rpx;
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #6ca5aa;
|
|
line-height: 76rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 20rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: rgba(108, 165, 170, 0.1);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
.goodBox {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto 27rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.goodItem {
|
|
width: 100%;
|
|
height: 173rpx;
|
|
margin-top: 46rpx;
|
|
display: flex;
|
|
|
|
.noSelect {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #666666;
|
|
box-sizing: border-box;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
}
|
|
|
|
.selectBox {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
// background: linear-gradient(90deg, #FA2B66, #FF9834);
|
|
// border-radius: 50%;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.contentBox {
|
|
width: 400rpx;
|
|
height: 173rpx;
|
|
margin-left: 23rpx;
|
|
|
|
.title {
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.subTitle {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #7c7c7c;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.priceBox {
|
|
margin-top: 35rpx;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ff2d3b;
|
|
}
|
|
|
|
.price:before {
|
|
content: "￥";
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.quantity-control {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 2rpx solid #e5e5e5;
|
|
border-radius: 25rpx;
|
|
overflow: hidden;
|
|
|
|
.quantity-btn {
|
|
width: 60rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f8f9fa;
|
|
transition: all 0.3s ease;
|
|
|
|
&.minus-btn {
|
|
border-right: 1rpx solid #e5e5e5;
|
|
}
|
|
|
|
&.plus-btn {
|
|
border-left: 1rpx solid #e5e5e5;
|
|
}
|
|
|
|
&.disabled {
|
|
background: #f1f1f1;
|
|
color: #ccc;
|
|
}
|
|
|
|
&:not(.disabled):active {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
font-size: 50rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
|
|
.btn-text {}
|
|
}
|
|
|
|
.quantity-input {
|
|
width: 80rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loseGood {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto 27rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
|
|
span {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #2791f7;
|
|
}
|
|
}
|
|
|
|
.goodItem {
|
|
width: 100%;
|
|
height: 173rpx;
|
|
margin-top: 46rpx;
|
|
display: flex;
|
|
color: #999999;
|
|
|
|
.noSelect {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #cccccc;
|
|
background: #f1f1f1;
|
|
box-sizing: border-box;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
}
|
|
|
|
image {
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
border-radius: 13rpx;
|
|
margin-right: 23rpx;
|
|
}
|
|
|
|
.contentBox {
|
|
width: 421rpx;
|
|
height: 173rpx;
|
|
|
|
.title {
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subTitle {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.priceBox {
|
|
margin-top: 35rpx;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price:before {
|
|
content: "￥";
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 125rpx;
|
|
height: 53rpx;
|
|
background: #999999;
|
|
border-radius: 13rpx;
|
|
text-align: center;
|
|
line-height: 53rpx;
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 空状态样式 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 200rpx 0;
|
|
|
|
.empty-icon {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 40rpx;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.empty-btn {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
background: #6ca5aa;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
box-shadow: 0 8rpx 20rpx rgba(108, 165, 170, 0.3);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 4rpx 10rpx rgba(108, 165, 170, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.orderBox {
|
|
width: 750rpx;
|
|
height: 151rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
|
|
padding: 0 27rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
.priceBox {
|
|
display: flex;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
|
|
span {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
p {
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ff2d3b;
|
|
margin-top: -5rpx;
|
|
}
|
|
|
|
.noSelect {
|
|
width: 41rpx;
|
|
height: 41rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #666666;
|
|
box-sizing: border-box;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.selectBox {
|
|
width: 41rpx;
|
|
height: 41rpx;
|
|
// background: linear-gradient(90deg, #FA2B66, #FF9834);
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 219rpx;
|
|
height: 77rpx;
|
|
background: #6ca5aa;
|
|
border-radius: 39rpx;
|
|
text-align: center;
|
|
line-height: 77rpx;
|
|
font-size: 33rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* 移除旧的样式 */
|
|
.zhihui {
|
|
background: #e8e8e8 !important;
|
|
color: #999999 !important;
|
|
}
|
|
|
|
/* 优化商品卡片样式 */
|
|
.goodBox {
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2rpx);
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
|
|
}
|
|
}
|
|
|
|
/* 优化选择框样式 */
|
|
.noSelect {
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
.selectBox {
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
</style>
|