<template>
<view id="shoppingCart">
<newHeader :title="‘购物车‘" :cont="cancel" @clickRight="del" :imgSrcRight="imgRight"></newHeader>
<view class="content_fot">
<view class="item fix" v-for="(item, key) in goods" :key="key">
<view class="item_checkbox fl">
<checkbox-group @change="e => checkChange(e, item)"><checkbox :checked="item.check" value="1" /></checkbox-group>
</view>
<view class="item_img fl"><image :src="item.goodsImage" mode=""></image></view>
<view class="item_txt fl">
<view class="tit fix">
<view class="tit_fl fl"><image src="@/static/productAtlas/pro05.png" mode=""></image></view>
<view class="tit_fr fl">{{ item.goodsName }}</view>
</view>
<view class="num">规格：{{ item.purchaseSpec }}{{ item.unitName }}</view>
<view class="money fix">
<span class="jiage fl">
€ {{ item.goodsPrice }}
<em>折后价</em>
</span>
<span v-show="num" class="shouchu fr">x{{ item.goodsNum }}</span>
<span class="fr jiajian" v-show="jiajian"><uni-number-box :min="1" v-model="item.goodsNum" @change="e => bindChange(e, item)"></uni-number-box></span>
</view>
</view>
</view>
</view>
<view style="height: 98upx;"></view>
<!-- -->
<view class="coFot fix" v-show="buyPop">
<view class="coFot_fl fl">
<label>
<checkbox-group style="display: inherit;" @change="selectAll"><checkbox :checked="checkAll" value="1" /></checkbox-group>
全选
</label>
</view>
<view class="coFot_fr fr cur" @click="jiezhang">结账({{ shuliang }})</view>
<view class="coFot_c fr">
合计：
<span>{{ heji }} €</span>
</view>
</view>
<view class="coFot fix" v-show="delFot">
<view class="coFot_fl fl">
<label>
<checkbox-group style="display: inherit;" @change="selectAll"><checkbox :checked="checkAll" value="1" /></checkbox-group>
全选
</label>
</view>
<view class="coFot_fr fr cur" @click="deletes">删除</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
buyPop: true,
imgRight: ‘/static/nav/s01.png‘,
cancel: ‘‘,
delFot: false,
num: true,
jiajian: false,
goods: [],
page: {
current: 1,
size: 1000000
},
status: ‘more‘,
contentText: {
contentdown: ‘查看更多‘,
contentrefresh: ‘加载中‘,
contentnomore: ‘到底了~‘
},
checkAll: false, // 是否全选
heji: 0,
shuliang: 0
};
},
onShow() {
this.getList();
},
methods: {
// 更改购物车数量
bindChange(num, item) {
this.request({
url: ‘/shop/app/shopCart/number?cartId=‘ + parseInt(item.cartId) + ‘&num=‘ + parseInt(num),
method: ‘post‘,
data: {}
}).then(res => {});
},
// 结账
jiezhang() {
let list = [];
this.goods.forEach(item => {
if (item.check) {
list.push(item.cartId);
}
});
let lists = JSON.stringify(list);
if (list.length > 0) {
uni.navigateTo({
url: ‘/pages/shoppingCart/confirmOrder/index?list=‘ + lists
});
}
},
// 删除
deletes() {
alert("删除")
let list = [];
this.goods.forEach(item => {
if (item.check) {
list.push(item.cartId);
console.log(list,"00000000000000")
}
});
return
if (list.length > 0) {
uni.showModal({
title: ‘温馨提示‘,
content: ‘是否删除所选商品‘,
success: res => {
if (res.confirm) {
this.request({
url: ‘/shop/app/shopCart/batch‘,
method: ‘delete‘,
data: list
}).then(res => {
this.getList(1);
});
} else if (res.cancel) {
}
}
});
}
},
selectAll(e) {
// 全选与否
// console.log(e.detail,"全选")
let checkCount = 0;
let hj = 0;
this.goods.forEach(item => {
item.check = e.detail.value.length > 0;
if (item.check) {
checkCount += item.goodsNum;
hj+=item.goodsPrice*item.goodsNum
}
});
this.shuliang = checkCount;
this.heji = hj;
this.checkAll = e.detail.value.length > 0;
},
checkChange(e, item) {
console.log(e.detail.value,"eee")
// 修改数据的选中状态
item.check = e.detail.value.length > 0;
console.log(item.check,"check")
console.log(item,"item")
let checkCount = 0;
let hj = 0;
this.goods.forEach(item => {
if (item.check) {
checkCount += item.goodsNum;
// hj +=item.goodsPrice;
hj+=item.goodsPrice*item.goodsNum
}
});
this.shuliang = checkCount;
this.heji = hj;
// 修改全选状态
this.goods.forEach(item => {
this.checkAll = checkCount === this.goods.length;
});
},
// 购物车列表
getList() {
this.request({
url: ‘/shop/app/shopCart/page‘,
method: ‘get‘,
data: {
current: this.page.current,
size: this.page.size
}
}).then(res => {
this.status = ‘more‘;
res.data.records.forEach(item => {
item.first = true;
item.check = false;
});
this.goods = res.data.records;
// console.log(this.goods)
});
},
del() {
this.goods.forEach(item => {
item.check = false;
});
this.checkCount = 0;
this.shuliang = 0;
this.heji = 0;
this.checkAll = false;
if (this.cancel) {
this.cancel = ‘‘;
this.imgRight = ‘/static/nav/s01.png‘;
} else {
this.cancel = ‘取消‘;
this.imgRight = ‘‘;
}
this.buyPop = !this.buyPop;
this.delFot = !this.delFot;
this.num = !this.num;
this.jiajian = !this.jiajian;
this.checkbox = !this.checkbox;
this.getList();
// 完成时取消所有选中状态
if (!this.checkbox) {
this.goods.forEach(item => {
item.check = false;
});
this.checkCount = 0;
this.checkAll = false;
}
}
}
};
</script>
<style lang="less" scoped>
.coFot {
position: fixed;
width: 100%;
height: 98upx;
background: #ffffff;
box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.1);
left: 0;
bottom: 50px;
padding-left: 24upx;
z-index: 10;
.coFot_fl {
height: 98upx;
padding-top: 28upx;
}
.coFot_c {
margin-right: 32upx;
line-height: 98upx;
font-size: 30upx;
font-weight: 500;
color: #333333;
span {
color: #d63036;
}
}
.coFot_fr {
width: 232upx;
height: 98upx;
line-height: 98upx;
background: #c6c6c6;
font-size: 36upx;
font-weight: 500;
text-align: center;
color: #ffffff;
&.cur {
background: #fd4933;
}
}
}
#shoppingCart {
/deep/uni-checkbox .uni-checkbox-input {
color: #fd4933 !important;
}
/deep/uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
border-color: #fd4933;
color: #fd4933 !important;
}
.content_fot {
.item {
height: 204upx;
background: #ffffff;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
margin-bottom: 10upx;
padding: 8upx 24upx;
.item_img {
width: 188upx;
height: 188upx;
position: relative;
image {
width: 188upx;
height: 188upx;
}
.new {
position: absolute;
width: 64upx;
height: 64upx;
left: 0;
top: 0;
z-index: 10;
image {
width: 64upx;
height: 64upx;
}
}
}
.item_txt {
margin-left: 20upx;
.tit {
width: 440upx;
font-size: 28upx;
font-weight: 500;
color: #333333;
line-height: 38upx;
.tit_fr {
width: 408upx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行
}
image {
width: 24upx;
height: 24upx;
margin-right: 8upx;
}
}
.num {
font-size: 24upx;
font-weight: 500;
color: #c6c6c6;
line-height: 46upx;
}
.money {
line-height: 46upx;
.jiage {
font-size: 30upx;
font-weight: 500;
text-align: left;
color: #d63036;
em {
font-size: 20upx;
font-weight: 500;
color: #d63036;
font-style: normal;
margin-left: 13upx;
}
}
.shouchu {
font-size: 24upx;
font-weight: 500;
color: #333;
}
.jiajian {
/deep/.uni-numbox__minus {
border: 1px solid #fd4933;
border-radius: 2px;
background: #fff;
}
/deep/.uni-numbox__plus {
border: 1px solid #fd4933;
border-radius: 2px;
background: #fff;
}
/deep/.uni-numbox--text {
color: #fd4933;
}
/deep/.uni-numbox__value {
border-color: #fd4933;
color: #fd4933;
}
}
}
.btn_xg {
width: 450upx;
height: 48upx;
margin-top: 14upx;
background: #ffffff;
border: 1px solid #fd4933;
border-radius: 24upx;
font-size: 24upx;
font-weight: 500;
text-align: center;
color: #fd4933;
line-height: 48upx;
}
.btn_lx {
width: 450upx;
height: 48upx;
margin-top: 14upx;
background: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 24upx;
font-size: 24upx;
font-weight: 500;
text-align: center;
color: #666666;
line-height: 48upx;
}
}
}
}
}
</style>
原文：https://www.cnblogs.com/xkyy/p/14812761.html