312 lines
10 KiB
Vue
312 lines
10 KiB
Vue
<template>
|
||
<view class="pad-x140" :class="dataList.length ? '' : 'display-center-center'">
|
||
<scroll-view scroll-y v-if="dataList.length" @scrolltolower="touchBottomEv">
|
||
<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 class="item-specs">
|
||
<view>{{item.specs1}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="display-between-center">
|
||
<!-- 价格 -->
|
||
<view class="item-price">￥{{item.price}}</view>
|
||
<!-- 加减按钮 -->
|
||
<view class="display-between-center">
|
||
<!-- 减 -->
|
||
<button @tap="deladdEvent( item.id , index , 0)" :disabled="item.num==1" class="item-btn display-center-center">-</button>
|
||
<!-- 输入框 -->
|
||
<view class="input-box display-center-center">
|
||
<input type="text" v-model="item.num" />
|
||
</view>
|
||
<!-- 加 -->
|
||
<button @tap="deladdEvent( item.id , index , 1)" class="item-btn display-center-center">+</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<pitera v-else></pitera>
|
||
<!-- 底部导航 -->
|
||
<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 totalPrice;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataList:[],
|
||
// dataList:[
|
||
// {
|
||
// id:1,
|
||
// isActive:true,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:2,
|
||
// isActive:true,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:2
|
||
// },
|
||
// {
|
||
// id:3,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:4,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:5,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:6,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:7,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:2000,
|
||
// num:1
|
||
// },
|
||
// {
|
||
// id:8,
|
||
// isActive:false,
|
||
// imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
// title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
|
||
// specs1:'颜色：白色',
|
||
// price:3000,
|
||
// num:1
|
||
// }
|
||
// ],
|
||
ifCheckAll:false,
|
||
page:1, // 第几页
|
||
size:10, // 数量
|
||
total:0, // 总数
|
||
pitera:false, // 是否显示暂无数据
|
||
};
|
||
},
|
||
// 执行顺序 第一
|
||
beforeCreate(){
|
||
|
||
},
|
||
// 执行顺序 第四
|
||
mounted() {
|
||
// 查询购物车列表
|
||
this.checkList();
|
||
},
|
||
methods:{
|
||
// 去商品详情
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
})
|
||
},
|
||
// 去结算、去购物事件
|
||
gopageEv(){
|
||
if(this.dataList.length){
|
||
if(this.totalPrice){
|
||
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,//商品名称
|
||
}
|
||
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);
|
||
})
|
||
},
|
||
touchBottomEv(){// scroll-view触底事件
|
||
console.log(169);
|
||
},
|
||
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){//减少数量
|
||
this.dataList[cur].num--;
|
||
this.setShopNum(id,this.dataList[cur].num,'down');
|
||
} 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){
|
||
if(res.data.length){
|
||
res.data.forEach(item=>{
|
||
let obj = {
|
||
id:item.id,
|
||
coding:item.sku.coding,
|
||
isActive:false,
|
||
imgSrc:item.spu.spu_cover,
|
||
title:item.spu_name,
|
||
specs1:'',
|
||
price:this.$toolAll.tools.changeNum(item.price*1),
|
||
reckonPrice:item.price,
|
||
num:item.num
|
||
}
|
||
this.dataList.push(obj);
|
||
})
|
||
} else {
|
||
this.dataList = [];
|
||
}
|
||
} 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;}
|
||
|
||
/* 底部导航 */
|
||
.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>
|