302 lines
10 KiB
Vue
302 lines
10 KiB
Vue
<template>
|
||
<view class="pad-x140">
|
||
<scroll-view scroll-y @scrolltolower="touchBottomEv" :style="{height: scrolViewheigh + 'px'}">
|
||
<view class="fon42 col0 mar-sx30">购物车</view>
|
||
<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>
|
||
</view>
|
||
<!-- 规格 -->
|
||
<view class="item-specs fc line-h50">
|
||
<view v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
|
||
</view>
|
||
<view class="display-between-center">
|
||
<!-- 价格 -->
|
||
<view class="item-price">￥{{item.price}}</view>
|
||
<!-- 加减按钮 -->
|
||
<view class="display-between-center">
|
||
<!-- 减 -->
|
||
<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> -->
|
||
<!-- 输入框 -->
|
||
<view class="input-box display-center-center">
|
||
<input type="text" @input="inputEv(index,$event)" @focus="inputFocus(index)" @blur="inputBlur(index,item.id)" v-model="item.num" />
|
||
</view>
|
||
<!-- 加 -->
|
||
<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>
|
||
<pitera v-if="total==dataList.length || dataList.length==0"></pitera>
|
||
</scroll-view>
|
||
<!-- 底部导航 -->
|
||
<view class="display-between-center cart-foot-box">
|
||
<!-- 全选 -->
|
||
<view @tap="chooseAll" class="display--center">
|
||
<view class="circle-check-all display-center-center"
|
||
:class="ifCheckAll ? 'circle-check-all-active' : ''"></view>
|
||
全选
|
||
</view>
|
||
<!-- 合计 -->
|
||
<view class="allprice-box">合计：{{totalPrice}}</view>
|
||
<!-- 立即结算 -->
|
||
<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=>{
|
||
if(item.isActive) totalPrice += item.reckonPrice*1 * item.num*1;
|
||
})
|
||
return this.$toolAll.tools.addXiaoShu(totalPrice);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataList:[],//数据列表
|
||
scrolViewheigh:uni.getSystemInfoSync().screenHeight - 141,
|
||
ifCheckAll:false,//是否全选
|
||
page:1, // 页数
|
||
size:20, // 数量
|
||
total:0, // 总数
|
||
tempraryData:'',//暂时储存input数据
|
||
unchangedData:''//不变的input数据
|
||
};
|
||
},
|
||
// 执行顺序 第一
|
||
beforeCreate(){
|
||
|
||
},
|
||
// 执行顺序 第四
|
||
mounted() {
|
||
// 查询购物车列表
|
||
this.checkList();
|
||
},
|
||
methods:{
|
||
touchBottomEv(){// scroll-view触底事件
|
||
if(this.total != this.dataList.length && this.dataList.length!=0){
|
||
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;
|
||
}
|
||
},
|
||
// 去商品详情
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
})
|
||
},
|
||
// 去结算、去购物事件
|
||
gopageEv(){
|
||
if(this.dataList.length){
|
||
if(this.totalPrice!='0.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,//商品名称
|
||
specs:item.specs,//商品规格
|
||
}
|
||
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){//减少数量
|
||
if(this.dataList[cur].num!=0){
|
||
this.dataList[cur].num--;
|
||
}
|
||
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 {//增加数量
|
||
this.dataList[cur].num++;
|
||
this.setShopNum(id,this.dataList[cur].num,'up');
|
||
}
|
||
// this.changeNum()//调用数量变更事件
|
||
},
|
||
checkList(){//查询购物车列表
|
||
this.$requst.post('/api/order/shopping-cart',{page:this.page,size:this.size}).then(res=>{
|
||
if(res.code==0){
|
||
this.total = res.data.total;
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
// let newspec = [];
|
||
// if(item.sku.spec_text.length){
|
||
// item.sku.spec_text.forEach(itemspec=>{
|
||
// for (let key in itemspec) {
|
||
// newspec.push(`${key}：${itemspec[key]}`);
|
||
// }
|
||
// })
|
||
// }
|
||
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);
|
||
}
|
||
})
|
||
this.dataList.concat(this.dataList);
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 删除购物车商品
|
||
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);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;}
|
||
.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;}
|
||
|
||
.input-box {width: 78rpx;height: 40rpx;border-radius: 10rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
|
||
input {text-align: center;}
|
||
.item-btn {width: 40rpx;height: 40rpx;border-radius: 10rpx;background-color: #000000;color: #FFFFFF;padding: 0rpx;}
|
||
.item-btn:first-child {padding-top: -12rpx!important;}
|
||
/* 底部导航 */
|
||
.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>
|