<template> <view class=""> <view class="cart-container backcor9" @touchmove.stop> <scroll-view v-if="cartList.length>0" :scroll-y="true" class="cart-list"> <uni-swipe-action> <!-- 从这里开始遍历--> <view v-for="(item,index) in cartList" :class="(item.loseEfficacy?' loseEfficacy ':' ')+'marb10 border-8r backcolorfff pdtlb'" :key="item.id" @click="goGoodsDetail(item.goodsId)"> <!-- :disabled="item.loseEfficacy" --> <uni-swipe-action-item :auto-close="autoClose" :right-options="swipe_options" @click="swipe_opt_event($event,item.id)" @change="swipe_change($event, item.id)"> <view class="cart-container2"> <checkbox-group @change="checkClick(item)"> <checkbox @click.stop class="mycheck checkContainer" :disabled="!isEdit&&item.loseEfficacy" color="#FFC71E" value="item.id" :checked="!isEdit&&item.loseEfficacy?false:item.whetherCheck" /> </checkbox-group> <view class="cart-detail"> <view class="cart-img"> <image :src="imageUrl+item.img" class="img border-8r" mode="aspectFill"></image> </view> <view class="cart-msg"> <view class=""> <view class="cart-msg-title font16 marb10 mart5">{{item.title}}</view> <view class="cart-msg-parm font13 marb10 fcor777">{{item.skuName|| ''}} </view> </view> <view class="cart-msg-price"> <view class="dis-flex"> <view class="cart-price font18 fcorred"> <!-- ¥ <text class="font20">18 </text>.8 --> ¥{{item.price}} </view> <!-- <view class="fcor666 margle10 font14 text-lt"> ¥{{item.originalPrice}} </view> --> </view> <view @click.stop :class="'cart-num'+(item.loseEfficacy?' pont-event ':' ')"> <uni-number-box v-model="item.num" :min="1" @noMoreLess="noMoreLess(item.id+'')" @change="changeNumValue($event,item.id)" :max="999999999" /> </view> </view> </view> </view> </view> </uni-swipe-action-item> </view> </uni-swipe-action> <noMore ></noMore> </scroll-view> <view v-else class="empy-cart fcor666 fotct cart-list backcor9"> <view class="icon cart fcor666 font48"></view> <view class=" mart30"> 购物车内暂无商品,快去逛逛吧 </view> <view @click="goClassify" class="btn-go mart20"> 去逛逛 </view> </view> <view class="cart-tool bg-white font16"> <view class="select-all dis-flex height100"> <checkbox-group @change="checkAllClick"> <label class="dis-flex"> <!-- :disabled="cartList.length == 0" --> <checkbox class="mycheck" color="#FFC71E" :value="allCheck.value" :checked="allCheck.whetherCheck" style="transform: scale(1.1);"/> <view class="paddleft5 fcor777">全选</view> </label> <!-- --> </checkbox-group> <view v-if="!isEdit" class="paddleft5 fcorred " @click="editDelete">编辑</view> <view v-if="isEdit" class="icon-ymt delete paddleft5 fcorred font16" @click="deleteCart">删除</view> </view> <view v-if="isEdit" class="tool-right paddleft5 fcorred " @click="editDelete">退出编辑</view> <view v-if="!isEdit" class="tool-right "> <view class="tool-jiesuan marRight10 dis-flex"> <!-- <text v-if="priceOrigin > 0" class="fcor666 margle10 marRight10 font14 text-lt">¥{{priceOrigin}}</text> --> <text>合计:</text> <text v-if="priceAll>0" class="fcorred font20">¥{{priceAll | numFormat}}</text> <text v-if="priceAll==0" class="fcorred">¥{{priceAll}}</text> </view> <view class="jiesuan-btn fcorfff " @click="settleAccount"> 结算 </view> </view> </view> </view> </view> </template> <script> import noMore from '@/components/no-more/no-more.vue' import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue' import { getShoppingCartList, goodsEditNum, deleteShoppingCart, whetherCheckUpdate } from '@/Utils/physicalObject.js' const app = getApp(); export default { data() { return { imageUrl: app.globalData.imgUrl, //图片地址 cartList: [], checkList: [], allCheck: { name: '全选', whetherCheck: false, value: 'all' }, // swipe_options: [{ text: '删除', icon: ' delete ', style: { backgroundColor: '#E64340' } }, // { // isCheck: false, // text: "收藏", // icon: ' shoucang32 ', // style: { // backgroundColor: '#f6c133' // } // }, ], swipe_item_index: null, numberValue: 0, cartList: [], autoClose: false, // listSelect:[], isEdit: false, showAction: 'none' } }, components: { // cartList, noMore, "uni-number-box": uniNumberBox }, computed: { //现价金额 priceAll() { let str = 0; if (this.cartList.length > 0) { this.cartList.map(item => { if (item.whetherCheck&&!item.loseEfficacy) { str =parseFloat((str + (item.num*item.price)).toFixed(2)) } }) return str; } else { return 0; } }, // 原价 // priceOrigin(){ // var str = 0; // for (var i = 0; i < this.cartList.length; i++) { // if (this.cartList[i].whetherCheck) { // str += this.cartList[i].num * this.cartList[i].originalPrice; // } // } // return str; // } }, onShow(){ this.initData(); }, methods: { initData(status) { if(!status){ uni.showLoading({ title: '加载中', mask:true, duration:2000 }); // console.log(20) } getShoppingCartList().then(res => { if(!status){ uni.hideLoading(); } if (res.return_code == '000000') { this.allCheck.whetherCheck = false; this.cartList = res.return_data; // 测试失效数据 this.cartList[0].loseEfficacy=true; this.allCheckInit(); //全选是否勾中判断 } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, editDelete() { this.isEdit = !this.isEdit; // if (!this.isEdit) { //退出编辑 // this.allCheck.whetherCheck = false; // this.cartList.map(item => { // if (item.whetherCheck && item.loseEfficacy) { // item.whetherCheck = false; // } // }) // } else { //进入编辑 // this.allCheck.whetherCheck = false; // if (this.allCheck.whetherCheck) { // this.cartList.map(item => { // item.whetherCheck = true; // }) // } // } this.allCheckInit(); // this.allCheck.whetherCheck = false; // this.checkAllClickChildMethod() }, // 全选的点击事件 checkAllClick(e) { this.allCheck.whetherCheck = !this.allCheck.whetherCheck; this.checkAllClickChildMethod() }, checkAllClickChildMethod(){ // if (this.allCheck.whetherCheck) { // this.cartList.map(item => { // if (!this.isEdit) { //商品的全选事件,loseEfficacy商品的失效,默认undefined // if (!item.loseEfficacy) { //无失效的商品 // item.whetherCheck = true // }else{ //有失效的商品 // item.whetherCheck = false // } // } else { //编辑的全选事件 // item.whetherCheck = true // } // }) // } else { // this.cartList.map(item => { // item.whetherCheck = false // }) // } var select = []; for (var i = 0; i < this.cartList.length; i++) { // if (this.cartList[i].whetherCheck) { select.push(this.cartList[i].id) // } } let id=select.join() this.whetherCheckUpdate(id,this.allCheck.whetherCheck) }, whetherCheckUpdate(id,whetherCheck){ let params = { ids:id, whetherCheck:whetherCheck } whetherCheckUpdate(params).then(res=>{ if(res.return_code == "000000"){ }else{ uni.showToast({title:res.return_msg,icon:'none'}); } this.initData();//刷新购物车 }) }, // 单个商品的选择 checkClick(item) { item.whetherCheck = !item.whetherCheck; this.whetherCheckUpdate(String(item.id),item.whetherCheck) // if (!item.whetherCheck) { // if (!this.isEdit && !item.loseEfficacy) { //商品 // this.allCheck.whetherCheck = false; // } else if (this.isEdit) { // this.allCheck.whetherCheck = false; // } // } else { // this.allCheckInit() // } }, allCheckInit() { if (this.cartList.length == 0) { this.allCheck.whetherCheck = false; return } // 判断每一个商品是否是被选择的状态 const goods = this.cartList.every(item => { if (!this.isEdit&&item.loseEfficacy) { //商品 return true; } return item.whetherCheck === true }) if (goods) { this.allCheck.whetherCheck = true } else { this.allCheck.whetherCheck = false } }, // 判断购物车内是否有商品 isHaveGoods() { if (this.cartList.length == 0) { uni.showToast({ title: '购物车内暂无商品喔', duration: 1000, icon: 'none' }); return false } return true; }, // 购物车删除 deleteCart() { if (!this.isHaveGoods()) return; var select = []; for (var i = 0; i < this.cartList.length; i++) { if (this.cartList[i].whetherCheck) { select.push(this.cartList[i].id) } } if (select.length == 0) { uni.showToast({ title: '请勾选要移除购物车的商品', duration: 1000, icon: 'none' }); return } else { // console.log(select.join(), "要移除的商品id") let str = select.join(); this.noMoreLess(str) } }, // 结算 settleAccount() { if (!this.isHaveGoods()) return; if (this.priceAll > 0) { let selestArr = this.cartList.filter(item => (item.whetherCheck&&!item.loseEfficacy) == true) selestArr = JSON.stringify(selestArr) // console.log(selestArr,"选择的商品") uni.navigateTo({ url: '/physical-merchants/settleAccounts/settleAccounts?goodsList=' + selestArr }) } else { uni.showToast({ title: '请勾选要购买的商品', duration: 1000, icon: 'none' }); } }, // 滑动点击 swipe_opt_event(e, id) { // console.log(e, "dianji") if (e.index == 1) { //收藏 // console.log(e.content.isCheck) // e.content.isCheck=!e.content.isCheck // if(e.content.isCheck){ // e.content.icon=" shoucang32-select " // }else{ // e.content.icon=" shoucang32 " // } this.showAction = 'right' return } if (e.index == 0) { //删除 this.noMoreLess(id + "") return } }, // 滑动事件 swipe_change(e, id) { // console.log(e, id) // this.swipe_item_index= (e == 'none') ? null : v }, noMoreLess(ids) { let _this = this; uni.showModal({ title: '提示', content: '确定把该商品移除购物车吗?', success: function(res) { if (res.confirm) { // console.log('用户点击确定,要删除的id', ids); let params = { ids: ids }; deleteShoppingCart(params).then(res => { let title; if (res.return_code == '000000') { title = res.return_data; } else { title = res.return_msg; } uni.showToast({ title: title, icon: 'none', duration: 2000 }) _this.initData(); }) } else if (res.cancel) { // console.log('用户点击取消'); } } }); }, // 点击去商品详情 goGoodsDetail(goodsId){ uni.navigateTo({ url: '/physical-merchants/classify/goodsDetail/goodsDetail?goodsId=' + goodsId }) }, changeNumValue(v, id) { let params = { id: id, num: v } goodsEditNum(params).then(res => { if (res.return_code == '000000') { //重新刷新数据 this.initData(); } else { //增加数量失败 uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) //重新刷新数据 this.initData(2); } }) }, goClassify(){ var pages = getCurrentPages(); pages.reverse() let index = -1; pages.map((item,ind)=>{ if(item.route == 'pages/tabBar/classify/classify'){ index = ind ; return } }) if(index == -1){ uni.navigateTo({ url:'/pages/tabBar/classify/classify' }) return } uni.navigateBack({ delta:index }) }, } } </script> <style lang="scss" scoped> .pdtlb{ padding: 10px 10px 10px 0; } .empy-cart{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .btn-go{ width: 40%; height: 40px; line-height: 40px; border-radius: 20px; border:1px solid #FF8F19; color: #FF8F19; /* #FFCC1E, #FF8F19 */ } .bg-white { background-color: #fff; } .cart-container { height:calc(100vh - var(--window-top)) ; padding: 10px 20rpx 0px; box-sizing: border-box; position: relative; } .cart-list { height: calc(100% - 80px); } // 列表 .cart-container2 { display: flex; align-items: center; .mycheck { // margin:0 20rpx; } .checkContainer{ height: 200rpx; line-height: 200rpx; padding-left: 10px; } .cart-detail { flex: 1; display: flex; align-items: center; padding: 0 10rpx; .cart-img { .img { vertical-align: middle; width: 200rpx; height: 200rpx; } } .cart-msg { flex: 1; align-self: flex-start; padding-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; .cart-msg-title {} .cart-msg-parm {} .cart-msg-price { display: flex; align-items: center; justify-content: space-between; .cart-price {} .cart-num {} } } } } .pont-event { pointer-events: none; } // 失效 .loseEfficacy { .cart-img { position: relative; :before { content: '商品失效'; display: block; height: 20rpx; width: 120rpx; line-height: 20rpx; padding: 20rpx; border-radius: 20rpx; background-color: #E6E6E6; position: absolute; top: calc(50% - 30rpx); left: 20rpx; z-index: 10; font-size: 28rpx; text-align: center; } } background-color: #ffffff; opacity: 0.8; } // 底部 .cart-tool { position: absolute; // bottom: 0; bottom:var(--window-bottom); left: 0; right: 0; box-sizing: border-box; padding: 10px; height: 80px; // line-height: 60px; display: flex; justify-content: space-between; align-items: center; .select-all { display: flex; align-items: center; } .tool-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; .tool-jiesuan {} .jiesuan-btn { width: 240rpx; height: 50px; line-height: 50px; text-align: center; border-radius: 25px; background: linear-gradient(to right, #FFCC1E, #FF8F19); } } } </style>