html
<view class="container">
<view class="goods-item" v-for="(item,index) of cartList" :key="index">
<uni-swipe-action :options="option" @click="cancel(item.id)">
<view class="goods-list">
<!-- 是否选中 -->
<view class="checkbox-box" @click="select(item)">
<view class="checkbox">
<view :class="item.select==1?'select':''"></view>
</view>
</view>
<!--商品信息 -->
<view class="goods">
<view class="goods-img">
<image class="goods-img-size" :src="item.goods.img" mode=""></image>
</view>
<view class="goods-info">
<view class="goods-info-title">{{item.goods.title}}</view>
<view class="goods-info-np">
<view class="goods-info-price">￥{{item.goods.price}}</view>
<view class="goods-info-num">
<i class="iconfont cut" @click="cut(item)" :style="{color:setting.backgroundcolor}"></i>
<view class="number">{{item.num}}</view>
<i class="iconfont add" @click="add(item)" :style="{color:setting.backgroundcolor}"></i>
</view>
</view>
</view>
</view>
</view>
</uni-swipe-action>
</view>
<!-- 底部 -->
<view class="cart-footer" :style="{bottom:footerbottom + 'px'}">
<view class="checkbox-all-box" @click="selectAll">
<view class="checkbox-all">
<view :class="selectAllStatus==1?'select':''"></view>
</view>
<view>全选</view>
<view class="deleteAll" v-if="selectAllStatus==1" @click="cancelAll">删除</view>
</view>
<view class="account">
<view class="account-info">合计：￥{{totalPrice}}</view>
<view class="account-btn" @click="account">结算</view>
</view>
</view>
</view><script>
import uniSwipeAction from '../../component/uni-swipe-action/uni-swipe-action.vue'
import app from '../../common/config.js';
import { mapState, mapMutations } from 'vuex';
export default {
data() {
return {
cartList: [] ,// 购物车列表
footerbottom: 50,
option:[{text: '删除',style: { backgroundColor: '#dd524d'}}],
selectAllStatus:0 ,//是否全选 1是 0否
totalPrice: 0 ,// 结算金额
cartid:[] //选中的购物车id
};
},
components: {
uniSwipeAction
},
computed: mapState({
setting: state => state.setting,
userinfo: state => state.userinfo
}),
onLoad () {
this.judgeIphone()
},
onShow() {
this.getCartInfo()
},
onHide() {
this.cartid = []
this.selectAllStatus = 0
this.totalPrice = 0
},
methods: {
// 判断是否是iphonex
judgeIphone() {
var that = this
uni.getSystemInfo({
success: function (res) {
let name = 'iPhone X'
if(res.model.indexOf(name) > -1){
that.footerbottom = 70
}
}
});
},
// 获取购物车列表
getCartInfo() {
app.vipidRequest({
url:'Index/cartinfo',
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success:(res) => {
if(res.data.status) {
this.cartList = res.data.cartlist
for(let i=0; i<this.cartList.length;i++) {
this.$set(this.cartList[i],'select',0)
}
}
}
})
},
// 添加删减
add(item) {
this.add_cut(item.id,1) // 调接口
// 恢复默认值
this.cartid = []
this.selectAllStatus = 0
this.totalPrice = 0
},
cut(item) {
this.add_cut(item.id,2)
this.cartid = []
this.selectAllStatus = 0
this.totalPrice = 0
},
// 添加删减接口
add_cut(id,status) {
uni.request({
url:app.appUrl + 'Index/cartup',
data: {
id,
status
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
if(res.data.status) {
this.getCartInfo()
}else {
uni.showToast({
title:res.data.msg,
duration:2000,
icon:'none'
})
}
}
})
},
// 单选
select(item) {
if(item.select) {
item.select = 0
this.totalPrice = this.totalPrice - (item.num*item.goods.price)
// 表示取消选择，则选中的购物车id中需要删除掉改点击的id
this.cartid.splice(this.cartid.indexOf(item.id),1)
}else {
item.select = 1
this.totalPrice = this.totalPrice + (item.num*item.goods.price)
// 表示添加选择，则需要往cartid添加点击的id
this.cartid.push(item.id)
}
// 判断cartid的长度是否等于购物车列表长度，是的话就是全选
if(this.cartid.length == this.cartList.length) {
this.selectAllStatus = 1
}else {
this.selectAllStatus = 0
}
// console.log(this.cartid)
},
// 全选
selectAll() {
if(this.selectAllStatus==1) {
this.selectAllStatus = 0
for(let i=0; i<this.cartList.length;i++) {
this.$set(this.cartList[i],'select',0)
}
this.totalPrice = 0
this.cartid = []
}else{
this.selectAllStatus = 1
for(let i=0; i<this.cartList.length;i++) {
this.$set(this.cartList[i],'select',1)
this.totalPrice = this.totalPrice+(this.cartList[i].num*this.cartList[i].goods.price)
if(!this.cartid.includes(this.cartList[i].id)) {
this.cartid.push(this.cartList[i].id)
}
}
}
// console.log(this.cartid)
},
// 删除购物车
cancel(id) {
uni.request({
url:app.appUrl + 'Index/cartdelete',
data: {
id
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
if(res.data.status) {
this.getCartInfo()
}else {
uni.showToast({
title:res.data.msg,
duration:2000,
icon:'none'
})
}
}
})
},
// 全选删除
cancelAll() {
uni.request({
url:app.appUrl + 'Index/cartdelete',
data: {
id: this.cartid.join(',')
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (res) => {
if(res.data.status) {
this.getCartInfo()
}else {
uni.showToast({
title:res.data.msg,
duration:2000,
icon:'none'
})
}
}
})
},
// 结算
account() {
if(this.cartid.length==0) {
uni.showToast({
title:'请选择商品',
duration:2000,
icon:'none'
})
}else {
uni.navigateTo({
url:'../comfirmOrder/comfirmOrder?cartid='+this.cartid.join(',')
})
}
}
}
};
</script>这样的写法不是最简单，交互上也有瑕疵，希望大神有更完美的方法可以与我交流
