219 lines
8.7 KiB
Vue
219 lines
8.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="disac shopping-cart-item animated " :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifAnimation ? 'flex' : 'none'}" v-for="(item,index) in dataList" :key="index">
|
||
<!-- 选择 -->
|
||
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||
<!-- 商品图片 -->
|
||
<view class="shopp-img mar-zy20 flexs" @tap="chooseEv(index)">
|
||
<image class="shopp-img imgH" :src="item.imgsrc" mode="aspectFill" lazy-load></image>
|
||
</view>
|
||
<view class="disjb fc imgH width100">
|
||
<view @tap="goDetail(item.id)">
|
||
<!-- 商品标题 -->
|
||
<view class="fon28 bold clips1">{{item.title}}</view>
|
||
<!-- 商品描述 -->
|
||
<view class="fon24 clips2">{{item.content}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<!-- 商品价格 -->
|
||
<view class="fon24">￥：<span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
|
||
<!-- 商品数量 -->
|
||
<view class="disac">
|
||
<!-- 减数量 -->
|
||
<i class="icon icon-cut countBtn disjcac" @tap="addCutEv(index,0)" :style="{backgroundColor: item.num==1 ? '#cccccc' : '#000000'}"></i>
|
||
<!-- 实际数量 -->
|
||
<input type="digit" class="fon24 tcenter countInput" v-model="item.num">
|
||
<!-- 加数量 -->
|
||
<i class="icon icon-add countBtn disjcac" @tap="addCutEv(index,1)" :style="{backgroundColor: item.num==10 ? '#cccccc' : '#000000'}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 管理 -->
|
||
<view class="shopping-manage" :style="{backgroundColor: ifManage ? 'rgba(0,0,0,.6)' : 'rgba(255,0,0,1)'}" @tap="manageEv">{{ifManage ? '管理' : '取消'}}</view>
|
||
<!-- 底部导航 -->
|
||
<view class="disjbac cart-foot-box fon24">
|
||
<view class="" v-if="ifManage">合计：<span class="fon38 colf8 bold">{{allPrice}}</span></view>
|
||
<view class="disac mar-z10" v-else @tap="chooseAllEv">
|
||
<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||
<span>全选</span>
|
||
</view>
|
||
<view class="fon38 cart-submit-btn"
|
||
:style="{backgroundColor: allPrice=='0.00' ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{ifManage ? `${allPrice=='0.00' ? '去购物' : '去结算'}` : `删除 (${delNum})`}}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:"cart-one",
|
||
props:{
|
||
list:{
|
||
type:Array,
|
||
default:()=>{
|
||
return [
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题商品标题商品标题商品标题商品标题商品标题',content:'商品描述商品描述',price:199.13,num:1,ifcheck:true},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
|
||
]
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataList:[],
|
||
ifManage:true,//是否显示管理按钮
|
||
ifSelectAll:false//是否全选
|
||
};
|
||
},
|
||
computed:{
|
||
// 总价及合计
|
||
allPrice() {
|
||
let allPrice = 0;
|
||
this.dataList.forEach(item=>{
|
||
if(item.ifcheck) {
|
||
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||
}
|
||
})
|
||
return this.$toolAll.tools.addXiaoShu(allPrice);
|
||
},
|
||
// 要删除的数量
|
||
delNum() {
|
||
let delNum = 0;
|
||
this.dataList.forEach(item=>{
|
||
if(item.ifcheck) {
|
||
delNum += 1;
|
||
}
|
||
})
|
||
return delNum;
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.dataList = this.list;
|
||
this.list.forEach((item,index)=>{
|
||
let obj = {
|
||
id:index,
|
||
imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||
title:'商品标题'+index,
|
||
content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
|
||
price:199,
|
||
num:1,
|
||
ifcheck:false,
|
||
ifExit:true,
|
||
ifAnimation:true
|
||
}
|
||
this.dataList.push(obj);
|
||
})
|
||
},
|
||
methods:{
|
||
// 去购物、去结算、删除
|
||
submitEv(){
|
||
if(this.ifManage) {
|
||
if(this.allPrice=='0.00') {
|
||
// 去购物
|
||
} else {
|
||
// 去结算
|
||
}
|
||
} else {
|
||
// 进入删除
|
||
this.dataList.forEach((item,index)=>{
|
||
if(item.ifcheck) {
|
||
this.dataList[index].ifExit = false;
|
||
this.dataList[index].ifcheck = false;
|
||
setTimeout(()=>{
|
||
this.dataList[index].ifAnimation = false;
|
||
},1000)
|
||
}
|
||
})
|
||
this.judgeSelectAllEv();
|
||
}
|
||
},
|
||
// 全选事件
|
||
chooseAllEv(){
|
||
this.ifSelectAll = !this.ifSelectAll;
|
||
this.dataList.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
|
||
},
|
||
// 选中事件
|
||
chooseEv(index) {
|
||
this.dataList[index].ifcheck = !this.dataList[index].ifcheck;
|
||
this.judgeSelectAllEv();
|
||
},
|
||
// 判断全选中是否被选中
|
||
judgeSelectAllEv() {
|
||
let exit = this.dataList.findIndex(item=>item.ifcheck==false);
|
||
if(exit!=-1) {
|
||
this.ifSelectAll = false
|
||
} else {
|
||
this.ifSelectAll = true;
|
||
}
|
||
},
|
||
// 去商品详情事件
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:''
|
||
})
|
||
},
|
||
// 数量加减事件
|
||
addCutEv(index,num) {
|
||
if(num) {
|
||
// 加
|
||
if(this.dataList[index].num!=10) {
|
||
this.dataList[index].num++;
|
||
}
|
||
} else {
|
||
// 减
|
||
if(this.dataList[index].num>1) {
|
||
this.dataList[index].num--;
|
||
}
|
||
}
|
||
console.log(this.allPrice,'总价');
|
||
},
|
||
// 管理点击事件
|
||
manageEv(){
|
||
this.dataList.forEach(item=>item.ifcheck=false)
|
||
this.ifManage = !this.ifManage;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.mo-item{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 100%;
|
||
border: 2rpx solid #000000;
|
||
box-sizing: border-box;
|
||
}
|
||
.active-item{
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 2rpx solid #FF0000;
|
||
}
|
||
.active-item::before{
|
||
content: '';
|
||
display: block;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 100%;
|
||
background-color: #FF0000;
|
||
}
|
||
.imgH{height: 180rpx;}
|
||
.shopping-cart-item{background-color: #FFFFFF;border-radius: 10rpx;margin-bottom: 20rpx;padding: 20rpx;}
|
||
.shopp-img{width: 180rpx;border-radius: 10rpx;}
|
||
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
|
||
.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}
|
||
|
||
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF;padding: 20rpx 30rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
|
||
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
|
||
|
||
.shopping-manage{position: fixed;right: 20rpx;bottom: 340rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
|
||
|
||
</style> |