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.
678 lines
14 KiB
678 lines
14 KiB
<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="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
|
|
} 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;
|
|
// for (var i = 0; i < this.cartList.length; i++) {
|
|
// if (this.cartList[i].whetherCheck) {
|
|
// str += this.cartList[i].num * this.cartList[i].price;
|
|
// }
|
|
// }
|
|
|
|
if (this.cartList.length > 0) {
|
|
this.cartList.map(item => {
|
|
if (item.whetherCheck) {
|
|
|
|
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.allCheckInit();
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
editDelete() {
|
|
this.isEdit = !this.isEdit;
|
|
if (!this.isEdit) { //退出编辑
|
|
this.cartList.map(item => {
|
|
if (item.whetherCheck && item.loseEfficacy) {
|
|
item.whetherCheck = false;
|
|
}
|
|
})
|
|
} else { //进入编辑
|
|
if (this.allCheck.whetherCheck) {
|
|
this.cartList.map(item => {
|
|
item.whetherCheck = true;
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
// 全选的点击事件
|
|
checkAllClick(e) {
|
|
this.allCheck.whetherCheck = !this.allCheck.whetherCheck;
|
|
if (this.allCheck.whetherCheck) {
|
|
this.cartList.map(item => {
|
|
if (!this.isEdit) { //商品的全选事件,loseEfficacy商品的失效，默认undefined
|
|
if (!item.loseEfficacy) {
|
|
item.whetherCheck = true
|
|
}
|
|
} else { //编辑的全选事件
|
|
item.whetherCheck = true
|
|
}
|
|
|
|
})
|
|
} else {
|
|
this.cartList.map(item => {
|
|
item.whetherCheck = false
|
|
})
|
|
}
|
|
},
|
|
|
|
// 单个商品的选择
|
|
checkClick(item) {
|
|
item.whetherCheck = !item.whetherCheck;
|
|
|
|
if (!item.whetherCheck) {
|
|
if (!this.isEdit && !item.loseEfficacy) { //商品
|
|
this.allCheck.whetherCheck = false;
|
|
} else if (this.isEdit) {
|
|
this.allCheck.whetherCheck = false;
|
|
}
|
|
|
|
} else {
|
|
// // 判断每一个商品是否是被选择的状态
|
|
// const goods = this.cartList.every(item => {
|
|
// if(!this.isEdit){//商品
|
|
// if(item.loseEfficacy){
|
|
// return true;
|
|
// }
|
|
// }
|
|
|
|
|
|
// return item.whetherCheck === true
|
|
// })
|
|
// if (goods) {
|
|
// this.allCheck.whetherCheck = true
|
|
// } else {
|
|
// this.allCheck.whetherCheck = false
|
|
// }
|
|
|
|
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 == 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(){
|
|
uni.reLaunch({
|
|
url:'/pages/tabBar/classify/classify'
|
|
})
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</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>
|
|
|