展示效果图
<template>
<view class="container">
<!-- 空白页 -->
<view v-if="empty===true || cartList =='' " class="empty">
<image src="/static/emptyCart.png" mode="aspectFit"></image>
<view v-if="hasLogin" class="empty-tips">
空空如也
<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
</view>
<view v-else class="empty-tips">
空空如也
<view class="navigator" @click="navToLogin">去购物吧></view>
</view>
</view>
<view v-else>
<!-- 列表 -->
<view class="cat_sp">
<text>已加入商品</text>
</view>
<view class="cart-list">
<block v-for="(item, index) in cartList" :key="item" >
<view
class="cart-item"
>
<view class="image-wrapper">
<view v-if="item.upperShelves == 0" class="upperShelves"
>
<image style="width: 40rpx;height: 40rpx;" src="../../static/select.png" mode=""></image>
</view>
<view v-else
class="yticon icon-xuanzhong2 checkbox"
:class="{checked: item.checked}"
@click="check('item', index,item)"
></view>
<view class="position_sp" v-if="item.upperShelves == 0">
<image :src="item.titlePicStr" @click="cats(item,index)"
mode="aspectFill"
lazy-load
@load="onImageLoad('cartList', index)"
@error="onImageError('cartList', index)"
>
</image>
<image class="LOVE_position_sp" src="../../static/xj.png" mode=""></image>
</view>
<image v-else :src="item.titlePicStr" @click="cats(item,index)"
mode="aspectFill"
lazy-load
@load="onImageLoad('cartList', index)"
@error="onImageError('cartList', index)"
></image>
</view>
<view class="item-right">
<text class="clamp title">{{item.productName}}</text>
<text class="attr" v-if="item.upperShelves == 0" style="color:red;">{{item.productSpecs}}</text>
<text class="attr" v-else>{{item.productSpecs}}</text>
<view class="sun-add">
<view class="sun-tetle">
<text class="price">¥{{item.productPrice}}</text>
</view>
<view class="purchase_sMn">
<view class="Purchase">
<text :class="minusStatus" @click="bindMinus(item)">-</text>
</view>
<!-- 数值 -->
<view class="purchase_1">
<text >{{item.productNum}}</text>
</view>
<!-- 加号 -->
<view class="Purchase">
<text class="purchase_sub" @click="bindPlus(item)">+</text>
</view>
<!-- <uni-number-box
class="step"
:min="1"
:max="item.productNum"
:value="item.productNum>item.productNum?item.productNum:item.productNum"
:isMax="item.productNum>=item.productNum?true:false"
:isMin="item.productNum===1"
:index="index"
@eventChange="numberChange"
></uni-number-box> -->
</view>
</view>
</view>
<text class="del-btn yticon icon-fork" @click="deleteCartItem(item)"></text>
</view>
</block>
</view>
<!-- 底部菜单栏 -->
<view class="action-section">
<view class="checkbox">
<image
:src="allChecked?'/static/selected.png':'/static/select.png'"
mode="aspectFit"
@click="check('all')"
></image>
<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
清空
</view>
</view>
<view class="total-box">
<text class="price">¥{{total}}</text>
<!-- <text class="coupon">
已优惠
<text>74.35</text>
元
</text> -->
</view>
<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
</view>
</view>
</view>
</template>
data() {
return {
minusStatus: 'disabled',
empty: false, //空白页现实 true|false
total: 0, //总价格
allChecked:false, //全选状态 true|false
cartList:[],
totalId:[] //商品结算的id
};
},
methods:{
//购物车跳转详情页面
cats(item){
let proId = item.productId
console.log(item)
uni.navigateTo({
url: '../category_detil/category_detil?id='+proId,
});
},
//购物车数据展示
createOrder(){ //结算方式
let _that = this
_that.totalId =[]
_that.cartList.forEach(function(item,index) {
if(item.upperShelves == 0){
uni.showToast({
title: '请先勾选去掉已下架商品',
icon: 'none'
})
return
}
if (item.checked){
_that.totalId.push(item.shopCatrId)
}
let types = Object.values(_that.totalId)
console.log(Object.values(_that.totalId))
})
// _that.enterData.forEach(item => {
// if(){}
// item.checked = false;
// });
if(_that.totalId.length == 0){
uni.showToast({
title: '请选择要结算的商品',
icon: 'none'
})
}else{
let data = {shopCartId:_that.totalId.join(',')}
_that.util.request({ url: '/api/order/getOrderParam',method: 'GET',data:data}).then(res => {
if(res.code == 200){
uni.navigateTo({
url: '../shpping_order/shpping_order?shopCartId='+_that.totalId
});
}
// _that.list = res.data.records
});
}
},
//数据显示
//监听image加载完成
onImageLoad(key, index) {
this.$set(this[key][index], 'loaded', 'loaded');
},
//监听image加载失败 显示加载图片失败
onImageError(key, index) {
console.log(key)
console.log(this[key][index].titlePicStr)
this[key][index].titlePicStr = '/static/errorImage.jpg';
},
navToLogin(){ //购物车空空跳转登录
uni.switchTab({
url: '/pages/category/category'
});
},
//选中状态处理
check(type, index,item){
console.log(item)
if(type === 'item'){
this.cartList[index].checked = !this.cartList[index].checked;
}else{
const checked = !this.allChecked
const list = this.cartList;
list.forEach(item=>{
item.checked = checked;
})
this.allChecked = checked;
}
this.calcTotal(type);
},
//数量
numberChange(item){
this.cartList[item.index].productNum = item.productNum;
this.calcTotal();
},
//删除
deleteCartItem(item){
console.log(item)
let _that = this
let data = {
shopCatrId:item.shopCatrId
}
console.log(item.shopCatrId)
_that.util.request({ url: '/api/sale/delShopCart',method: 'POST',data:data}).then(res => {
console.log(res)
if(res.code == 200){
uni.showToast({ title: '删除成功',icon: 'none', duration:1500});
}
_that.loadData();
// _that.list = res.data.records
});
},
clearCart(){
uni.showModal({
content: '清空购物车?',
success: (e)=>{
if(e.confirm){
let _that = this
let data = {customerId:uni.getStorageSync('userInfo').id}
_that.util.request({ url: '/api/sale/delAllShopCart',method: 'POST',data:data}).then(res => {
console.log(res)
if(res.code == 200){
uni.showToast({ title: '删除成功',icon: 'none', duration:1500});
}
_that.loadData();
// _that.list = res.data.records
});
}
}
})
},
//计算总价
calcTotal(){
let list = this.cartList;
if(list.length === 0){
this.empty = true;
return;
}
let total = 0;
let checked = true;
list.forEach(item=>{
if(item.checked === true){
total += item.productPrice * item.productNum;
}else if(checked === true){
checked = false;
}
})
this.allChecked = checked;
this.total = Number(total.toFixed(2));
},
//退出登录
//switch
}
拿个购物车的数据 在onLoad 初始化一下 上面改成自己的接口就行了