perry-mall/components/cart-subgroup/cart.vue

302 lines
10 KiB
Vue
Raw Normal View History

<template>
2022-02-25 09:24:06 +00:00
<view class="pad-x140">
<scroll-view scroll-y @scrolltolower="touchBottomEv" :style="{height: scrolViewheigh + 'px'}">
2022-02-28 07:31:39 +00:00
<view class="fon42 col0 mar-sx30">购物车</view>
2022-02-23 11:08:25 +00:00
<view v-for="(item,index) in dataList" :key="index"
class="item-box display-between-center">
<view @tap="chooseItem(index)" class="display-center-center flex-shrink">
<!-- 勾选按钮 -->
<view class="circle-box display-center-center flex-shrink" :class="item.isActive ? 'circle-box-active' : ''"></view>
<!-- 商品图片 -->
<image class="shop-img" :src="item.imgSrc" mode="aspectFill"></image>
</view>
<view class="item-right-box display-between-column width100">
<view @tap="goDetail(item.id)">
<!-- 商品标题 -->
<view class="clips2 item-title">{{item.title}}</view>
2022-02-25 09:24:06 +00:00
</view>
<!-- 规格 -->
<view class="item-specs fc line-h50">
<view v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
2022-02-23 11:08:25 +00:00
</view>
<view class="display-between-center">
<!-- 价格 -->
<view class="item-price">{{item.price}}</view>
<!-- 加减按钮 -->
<view class="display-between-center">
2022-02-23 11:08:25 +00:00
<!-- -->
2022-02-25 09:24:06 +00:00
<image @tap="deladdEvent( item.id , index , 0)" src="/static/public/icon-delnum.png" class="item-btn display-center-center" mode="widthFix"></image>
<!-- <view @tap="deladdEvent( item.id , index , 0)" :disabled="item.num==1" class="item-btn display-center-center">­­­­­­­­­­­­-</view> -->
2022-02-23 11:08:25 +00:00
<!-- 输入框 -->
<view class="input-box display-center-center">
2022-02-25 09:24:06 +00:00
<input type="text" @input="inputEv(index,$event)" @focus="inputFocus(index)" @blur="inputBlur(index,item.id)" v-model="item.num" />
</view>
2022-02-23 11:08:25 +00:00
<!-- -->
2022-02-25 09:24:06 +00:00
<image @tap="deladdEvent( item.id , index , 1)" src="/static/public/icon-addnum.png" class="item-btn display-center-center" mode="widthFix"></image>
<!-- <view @tap="deladdEvent( item.id , index , 1)" class="item-btn display-center-center">+</view> -->
</view>
</view>
</view>
</view>
2022-03-01 06:29:24 +00:00
<pitera v-if="total==dataList.length || dataList.length==0"></pitera>
</scroll-view>
<!-- 底部导航 -->
<view class="display-between-center cart-foot-box">
<!-- 全选 -->
2022-02-23 11:08:25 +00:00
<view @tap="chooseAll" class="display--center">
<view class="circle-check-all display-center-center"
:class="ifCheckAll ? 'circle-check-all-active' : ''"></view>
全选
</view>
<!-- 合计 -->
2022-02-23 11:08:25 +00:00
<view class="allprice-box">合计{{totalPrice}}</view>
<!-- 立即结算 -->
2022-02-23 11:08:25 +00:00
<view class="cart-settlement" @tap="gopageEv">{{dataList.length ? '' : ''}}</view>
</view>
</view>
</template>
<script>
import pitera from '@/components/nothing/pitera.vue';
export default {
components:{
pitera
},
name:"cart",
computed:{
totalPrice(){
let totalPrice = 0;
this.dataList.forEach(item=>{
2022-02-23 11:08:25 +00:00
if(item.isActive) totalPrice += item.reckonPrice*1 * item.num*1;
})
2022-02-25 09:24:06 +00:00
return this.$toolAll.tools.addXiaoShu(totalPrice);
}
},
data() {
return {
2022-03-01 07:23:56 +00:00
dataList:[],//数据列表
2022-02-25 09:24:06 +00:00
scrolViewheigh:uni.getSystemInfoSync().screenHeight - 141,
2022-03-01 07:23:56 +00:00
ifCheckAll:false,//是否全选
page:1, // 页数
2022-02-25 09:24:06 +00:00
size:20, // 数量
2022-02-23 11:08:25 +00:00
total:0, // 总数
2022-02-25 09:24:06 +00:00
tempraryData:'',//暂时储存input数据
unchangedData:''//不变的input数据
};
},
2022-02-23 11:08:25 +00:00
// 执行顺序 第一
beforeCreate(){
},
// 执行顺序 第四
mounted() {
// 查询购物车列表
this.checkList();
},
methods:{
2022-02-25 09:24:06 +00:00
touchBottomEv(){// scroll-view触底事件
2022-03-01 06:29:24 +00:00
if(this.total != this.dataList.length && this.dataList.length!=0){
2022-02-25 09:24:06 +00:00
this.page++;
this.checkList();
}
},
// 输入框获取焦点
inputFocus(index){
this.tempraryData = this.dataList[index].num;
this.unchangedData = this.dataList[index].num;
},
// 输入框失去焦点
inputBlur(index,id){
this.dataList[index].num = this.tempraryData;
// 如果改变后的数据大于初始数据,就调用加数据方法
if(this.unchangedData < this.tempraryData){
this.setShopNum(id,this.tempraryData,'up');
} else if(this.unchangedData > this.tempraryData){
this.setShopNum(id,this.tempraryData,'down');
}
},
// 输入框改变事件
inputEv(index,e){
let val = e.detail.value;
if(val!=0 && val!=''){
this.tempraryData = val;
}
},
2022-02-23 11:08:25 +00:00
// 去商品详情
goDetail(id){
uni.navigateTo({
url:`/pagesB/shopDetail/shopDetail?id=${id}`
})
},
// 去结算、去购物事件
gopageEv(){
if(this.dataList.length){
2022-02-25 09:24:06 +00:00
if(this.totalPrice!='0.00'){
2022-02-23 11:08:25 +00:00
let newList = [];
this.dataList.forEach(item=>{
if(item.isActive){
let obj = {
id:item.id,//商品id
imgSrc:item.imgSrc,//商品图片
coding:item.coding,//商品coding
price:item.reckonPrice,//商品价格
num:item.num,//商品数量
title:item.title,//商品名称
2022-02-25 09:24:06 +00:00
specs:item.specs,//商品规格
2022-02-23 11:08:25 +00:00
}
newList.push(obj);
}
})
uni.setStorageSync('orderList',newList);
uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
} else {
this.$toolAll.tools.showToast('请选择要购买的商品');
}
} else {
uni.navigateTo({url:'/pages/tabbar/cate/cate'});
}
},
// 商品数量变更
setShopNum(id,num,type){
let parmas = {
id,// id:商品id
num,// num:商品数量
type// type:变更方式down减up加
}
this.$requst.post('/api/order/shopping-cart-change-num',parmas).then(res=>{
if(res.code==0){} else {
this.$toolAll.tools.showToast(res.msg);
}
}).catch(err=>{
this.$toolAll.tools.showToast(err.msg);
})
},
chooseItem(index){// 商品选择
this.dataList[index].isActive = !this.dataList[index].isActive
let one = this.dataList.filter(function(item){
return item.isActive == false;
})
one.length==0 ? this.ifCheckAll = true : this.ifCheckAll = false
},
chooseAll(){// 全选
if(this.dataList.length){
this.ifCheckAll = !this.ifCheckAll
this.dataList.forEach((item,index)=>{
this.ifCheckAll ? item.isActive = true : item.isActive = false
})
} else this.$toolAll.tools.showToast('亲,购物车空空的哟','',3000)
},
deladdEvent(id,cur,index){//数量加减事件
if(index==0){//减少数量
2022-02-25 09:35:07 +00:00
if(this.dataList[cur].num!=0){
this.dataList[cur].num--;
}
2022-02-25 09:24:06 +00:00
if(this.dataList[cur].num > 1){
this.setShopNum(id,this.dataList[cur].num,'down');
}
if(this.dataList[cur].num==0){
this.delShop(id,cur);
}
} else {//增加数量
2022-02-23 11:08:25 +00:00
this.dataList[cur].num++;
this.setShopNum(id,this.dataList[cur].num,'up');
}
// this.changeNum()//调用数量变更事件
},
2022-02-23 11:08:25 +00:00
checkList(){//查询购物车列表
this.$requst.post('/api/order/shopping-cart',{page:this.page,size:this.size}).then(res=>{
if(res.code==0){
2022-02-25 09:24:06 +00:00
this.total = res.data.total;
if(res.data.list.length){
res.data.list.forEach(item=>{
2022-02-28 07:31:39 +00:00
// let newspec = [];
// if(item.sku.spec_text.length){
// item.sku.spec_text.forEach(itemspec=>{
// for (let key in itemspec) {
// newspec.push(`${key}${itemspec[key]}`);
// }
// })
// }
2022-03-01 06:29:24 +00:00
if(item.sku!=null){
let obj = {
id:item.id,
coding:item.sku.coding,
isActive:false,
imgSrc:item.spu.spu_cover,
title:item.spu_name,
specs:item.sku.spec_info,
// price:this.$toolAll.tools.changeNum(item.price*1),
price:item.price,
reckonPrice:item.price,
num:item.num
}
this.dataList.push(obj);
2022-02-23 11:08:25 +00:00
}
})
2022-02-28 07:31:39 +00:00
this.dataList.concat(this.dataList);
2022-02-23 11:08:25 +00:00
}
} else {
this.$toolAll.tools.showToast(res.msg);
}
}).catch(err=>{
this.$toolAll.tools.showToast(err.msg);
})
2022-02-25 09:24:06 +00:00
},
// 删除购物车商品
delShop(id,index){
this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
if(res.code==0){
this.$toolAll.tools.showToast('删除成功');
setTimeout(()=>{
this.dataList.splice(index,1);
},1000)
} else {
this.$toolAll.tools.showToast(res.msg);
}
}).catch(err=>{
this.$toolAll.tools.showToast(err.msg);
})
2022-02-23 11:08:25 +00:00
}
}
}
</script>
<style scoped>
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.flex-shrink{flex-shrink: 0;}
.display-between-center {display: flex;justify-content: space-between;align-items: center;}
.display--center {display: flex;align-items: center;}
.display-center-center {display: flex;justify-content: center;align-items: center;}
.display-between-column {display: flex;justify-content: space-between;flex-direction: column;}
.item-box {border-bottom: 1rpx solid #d3d3d3;padding: 40rpx 0;}
.item-box:last-child{border-bottom: none;}
.circle-box,.circle-check-all{width: 32rpx;height: 32rpx;border: 1rpx solid #8c8c9b;box-sizing: border-box;border-radius: 100%;}
.circle-box-active,.circle-check-all-active {
border: 1rpx solid #000000;
}
.circle-box-active::after,.circle-check-all-active::after{
content: '';
display: block;
width: 18rpx;height: 18rpx;background-color: #000000;border-radius: 100%;
}
.shop-img {width: 223rpx;height: 223rpx;border-radius: 30rpx;margin: 0 20rpx;}
2022-02-23 11:08:25 +00:00
.allprice-box{width: 30%;}
.item-right-box{font-size: 24rpx;height: 223rpx;}
.item-title {color: #000000;}
.item-specs{color: #8c8c9b;}
.item-price{font-size: 30rpx;}
2022-02-23 11:08:25 +00:00
.input-box {width: 78rpx;height: 40rpx;border-radius: 10rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
input {text-align: center;}
2022-02-23 11:08:25 +00:00
.item-btn {width: 40rpx;height: 40rpx;border-radius: 10rpx;background-color: #000000;color: #FFFFFF;padding: 0rpx;}
2022-02-25 09:24:06 +00:00
.item-btn:first-child {padding-top: -12rpx!important;}
/* 底部导航 */
2022-02-23 11:08:25 +00:00
.cart-foot-box{position: fixed;bottom: 0;left: 0;right: 0;z-index: 2; height: 130rpx;background-color: #efefef;font-size: 30rpx;}
.circle-check-all {width: 33rpx;height: 33rpx;margin: 0 10rpx 0 30rpx;}
.circle-check-all-active::after{
width: 19rpx;height: 19rpx;
}
.cart-settlement{width: 242rpx;height: 130rpx;background-color: #f81c1c;color: #FFFFFF;font-size: 36rpx;text-align: center;line-height: 130rpx;}
</style>