购物车优化

static-project
Lee 2022-09-26 10:35:33 +08:00
parent 15d62e14ad
commit 839262c25e
2 changed files with 435 additions and 23 deletions

View File

@ -19,11 +19,11 @@
<!-- 商品数量 -->
<view class="disac">
<!-- 减数量 -->
<i class="icon icon-cut countBtn disjcac" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#cccccc' : '#ff3673'}"></i>
<i class="icon icon-cut countBtn disjcac" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#cccccc': '#ff3673'}"></i>
<!-- 实际数量 -->
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput borbot-cc" :disabled="item.slide_x!=0" v-model="item.num">
<!-- 加数量 -->
<i class="icon icon-add countBtn disjcac" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#cccccc' : '#ff3673'}"></i>
<i class="icon icon-add countBtn disjcac" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#cccccc': '#ff3673'}"></i>
</view>
</view>
</view>
@ -35,7 +35,7 @@
<label class="disac" @tap="chooseAll"><radio :checked="allChoose" color="#ff3673" style="transform: scale(.8);"/><text>全选</text></label>
<view class="disac">
<view class="fon24 mar-y30">合计<span>{{allPrice}}</span></view>
<view class="fon32 cart-submit-btn" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '' : ` (${buyNum})`}}</view>
<view class="fon32" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '' : ` (${buyNum})`}}</view>
</view>
</view>
<view class="" v-if="listData.length!=0 && total==listData.length"><pitera textStr="—— 到底啦 ——"></pitera></view>

View File

@ -1,44 +1,456 @@
<template>
<view class="pad-x160">
<status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'>
<view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;">
<cart-slide ref="cart" :skuId='skuId'></cart-slide>
<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
<view class="cart-content">
<!-- <view class="cart-admin" v-if="listData.length>0" @tap="showDel=!showDel"><text>购物车信息</text>{{showDel?'取消':'管理'}}</view> -->
<view class="slide-list">
<view class="slide-item" v-for="(item, index) in listData" :key="index">
<view class="slide-item-li" @click="clickItemMethod(item)">
<label class="radio"><radio :checked="item.ifcheck" @tap.stop="chooseEv(index)" color="#ff3673"/></label>
<view class="shop-img" @tap="goDetail(item.spuId,item.is_series)">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="shop-txt">
<view class="shop-txt-top" @tap="goDetail(item.spuId,item.is_series)">
<view class="fon28 bold clips2">{{item.title}}</view>
<view class="fon24 clips2 line-h40">单位{{item.content}}</view>
</view>
<view class="shop-txt-bottom">
<!-- 商品价格 -->
<view class="fon24 textc bold"><span class="fon28 ">{{item.price}}</span></view>
<!-- 商品数量 -->
<view class="num">
<!-- 减数量 -->
<i class="icon icon-cut count-btn" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#d3d3d3' : '#ff3673'}"></i>
<!-- 实际数量 -->
<input class="input" type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" :disabled="item.slide_x!=0" v-model="item.num">
<!-- 加数量 -->
<i class="icon icon-add count-btn" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#d3d3d3' : '#ff3673'}"></i>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 全选 -->
<view class="change-all">
<label class="label" @tap="chooseAll"><radio :checked="allChoose" color="#ff3673" style="transform: scale(.8);margin-left: -6rpx;"/><text>全选</text></label>
<view class="all-price" v-if="showDel">
<view class="btn" style="background-color: #ff3673;" @tap="delShopEv"></view>
</view>
<view class="all-price" v-else>
<view class="price">合计<span>{{allPrice}}</span></view>
<view class="btn cart-submit-btn" :style="{background: !buyNum?'#cccccc':'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '' : ` (${buyNum})`}}</view>
</view>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt" v-if="listData.length!==0 && noMore"><pitera textStr="—— 到底啦 ——"></pitera></view>
<nothing-page v-if="isLoading && listData.length==0" content="您的购物车,空空如也(*^▽^*)"></nothing-page>
</view>
</status-container>
<!-- 底部tab -->
<view class="foot-box"><foot-tab current="2"></foot-tab></view>
</view>
</template>
<script>
//
import footTab from '@/components/foot-tabs/foot-tab.vue';
import cartSlide from '@/components/shopping-carts/cart-slide';
import statusNav from '@/components/status-navs/status-nav.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import pitera from '@/components/nothing/pitera';
import {mapState} from 'vuex'//mapState
export default {
components:{
'foot-tab' :footTab,
cartSlide
statusNav,
pitera
},
data() {
return {
skuId:''
statusHeight:uni.getSystemInfoSync().statusBarHeight,
originalNum:0,//
maxNum:99999,//
minNum:1,//
skuId:'',
listData: [],
page:1,
size:10,
total:0,
delIds:'', //ids
noMore:false, //
isLoading:true,
flag:true,
showDel:false,
}
},
onReachBottom() {
this.$refs.cart.getList();
},
onShow() {
uni.removeStorageSync('buyList');
this.listData = [];
//
this.getList();
},
onReachBottom() {
if(!this.noMore){
this.page++;
//
this.getList();
}
},
computed: {
//
windowWidth() {
return uni.getSystemInfoSync().windowWidth;
},
//
allPrice() {
let allPrice = 0;
this.listData.forEach(item=>{
if(item.ifcheck) {
allPrice += item.price*item.num;
}
})
return this.$toolAll.tools.addXiaoShu(allPrice);
// return allPrice;
},
//
buyNum() {
let buyNum = 0;
this.listData.forEach(item=>{
if(item.ifcheck) {
buyNum += 1;
}
})
return buyNum;
},
//
allChoose() {
let ifAll = false;
if(this.listData.length) {
let temparr = this.listData.filter(item=>{return item.ifcheck==false})
temparr.length==0 ? ifAll = true : ifAll = false;
let delTemparr = this.listData.filter(item=>{return item.ifcheck==true})
let delArr = [];
delTemparr.forEach(item=>{
delArr.push(item.id)
})
//
this.delIds = delArr.join(',');
}
return ifAll
},
onLoad(op) {
if(op.skuId) this.skuId = op.skuId;
},
methods: {
//
getList(){
uni.showLoading();
this.total = 0;
let params = {
page:this.page,
size:this.size
}
this.$requst.post('/api/order/shopping-cart',params).then(res=>{
if(res.code==0){
console.log(res,'购物车列表');
this.total = res.data.total;
let cartArr = [];
res.data.list.forEach(item=>{
let obj = {
id: item.id,
spuId:item.spu.id,
skuId:item.sku_id,
coding:item.sku.coding,
image: item.spu.spu_cover,
title: item.spu.spu_name,
content: item.spu.unit,
slide_x: 0,
price:item.spu.original_price,
num:item.num,
ifcheck:this.skuId==item.sku_id ? true : false,
ifExit:true,
ifShow:true,
}
cartArr.push(obj);
})
this.listData = this.listData.concat(cartArr);
if(this.listData.length == this.total){
this.noMore = true;
}
}
uni.hideLoading();
this.isLoading = true;
})
},
//
chooseEv(index) {
this.listData[index].ifcheck = !this.listData[index].ifcheck;
},
//
chooseAll(){
let exit = this.listData.filter(item=>item.ifcheck==false);
if(exit.length){
this.listData.forEach(item=>item.ifcheck = true);
} else {
this.listData.forEach(item=>{item.ifcheck = false});
}
},
//
submitEv(){
if(this.allPrice==0) {
//
uni.reLaunch({
url:`/pages/tabbar/cate/cate?index=0`
})
} else {
//
let buyList = [];
this.listData.forEach(item=>{
if(item.ifcheck) {
let obj = {
sku_coding: item.coding,
num: item.num
}
buyList.push(obj);
}
})
uni.setStorageSync('buyList',buyList);
uni.navigateTo({
url:'/pagesB/settlement/settlement'
})
}
},
//
addCutEv(index,num) {
if(this.listData[index].slide_x==0){
if(num) {
//
if(this.listData[index].num != this.maxNum) {
this.listData[index].num++;
}
} else {
//
if(this.listData[index].num > this.minNum) {
this.listData[index].num--;
}else{
//
uni.showModal({
title: '提示',
content: '是否将该商品移除购物车?',
success: (res)=> {
if (res.confirm) {
this.delShopEv(this.listData[index].id);
}
}
});
}
}
this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
if(res.code!=0){
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
//
delShopEv(id){
this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
if(res.code==0){
this.listData = this.listData.filter(item => item.id !== id);
this.$toolAll.tools.showToast('删除成功');
// this.getList();
}else{
this.$toolAll.tools.showToast(res.msg)
}
})
},
//
// delShopEv(){
// if(this.delIds!==''){
// uni.showModal({
// title: '',
// content: '',
// success: (res)=> {
// if (res.confirm) {
// //
// this.confirmDel();
// } else if (res.cancel) {
// console.log('');
// }
// }
// });
// }
// },
//
// confirmDel(){
// this.$requst.post('/api/order/shopping-cart-del',{id:this.delIds.toString()}).then(res=>{
// if(res.code==0){
// this.listData = this.listData.filter(item=>item.ifcheck==false)
// this.$toolAll.tools.showToast('');
// }else{
// this.$toolAll.tools.showToast(res.msg)
// }
// })
// },
//
goDetail(id) {
uni.navigateTo({
url:'/pagesB/shop-detail/shop-detail?id='+id
})
},
//
focusEv(num) {
//
this.originalNum = num;
},
//
blurEv(index,e) {
//
let currentNum = e.detail.value*1;
// 0 =
this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
},
}
};
</script>
<style>
<style scoped>
.cart-admin{
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 20rpx 30rpx;
font-size: 30rpx;
background-color: #FFFFFF;
border-bottom: 2rpx solid #eaeaea;
margin-top: 20rpx;
color: #666666;
}
.cart-admin>text{
color: #000000;
}
.slide-item{
margin-top: 25rpx;
}
.slide-item-li{
box-sizing: border-box;
display: flex;
align-items: center;
padding: 20rpx 30rpx;
background-color: #FFFFFF;
}
.slide-item-li .radio>radio{
transform: scale(.8);
margin-left: -6rpx;
}
.slide-item-li .shop-img{
width: 230rpx;
height: 150rpx;
border-radius: 10rpx;
margin: 0 24rpx 0 6rpx;
overflow: hidden;
}
.slide-item-li .shop-img image{
width: 230rpx;
min-height: 150rpx;
}
.slide-item-li .shop-txt{
width: calc(100% - 300rpx);
}
.shop-txt-top{
min-height: 100rpx;
}
.shop-txt-top .title{
font-size: 30rpx;
line-height: 1.5;
color: #000000;
font-weight: bold;
}
.shop-txt-top .specs{
font-size: 24rpx;
line-height: 1.5;
color: #8c8c9b;
margin: 3rpx;
}
.shop-txt-bottom{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50rpx;
}
.shop-txt-bottom .price{
font-size: 30rpx;
line-height: 1.5;
color: #f81c1c;
}
.shop-txt-bottom .num{
display: flex;
justify-content: space-between;
align-items: center;
width: 170rpx;
font-size: 24rpx;
}
.shop-txt-bottom .num>.count-btn{
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
width: 40rpx;
height: 40rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 10rpx;
}
.shop-txt-bottom .num>.input{
box-sizing: border-box;
width: 78rpx;
height: 40rpx;
border: 2rpx solid #d3d3d3;
border-radius: 10rpx;
text-align: center;
}
.change-all{
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 130rpx;
padding: 0 30rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
background-color: #FFFFFF;
}
.change-all .label{
display: flex;
align-items: center;
font-size: 24rpx;
}
.all-price{
display: flex;
align-items: center;
}
.all-price .price{
font-size: 24rpx;
margin-right: 25rpx;
color: #000000;
}
.all-price .btn{
line-height: 84rpx;
padding: 0 30rpx;
border-radius: 10rpx;
font-size: 32rpx;
color: #FFFFFF;
}
</style>