购物车优化

master
Lee-1203 2022-08-03 12:00:01 +08:00
parent 80f8d21dcb
commit 214eb8b551
10 changed files with 28 additions and 52 deletions

View File

@ -9,13 +9,13 @@
</view>
<view class="slide-list">
<view class="slide-item" v-for="(item, index) in listData" :key="index">
<view class="slide-item-li border-box background-white flex" @tap.stop="goDetail(item.spuId)">
<view class="slide-item-li border-box background-white flex">
<label class="radio" @tap.stop="chooseEv(index)"><radio :checked="item.ifcheck" color="#febf00"/></label>
<view class="shop-img radius30">
<view class="shop-img radius30" @tap.stop="goDetail(item.spuId)">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="shop-txt">
<view class="shop-txt-top">
<view class="shop-txt-top" @tap.stop="goDetail(item.spuId)">
<view class="title font30 clips1">{{item.title}}</view>
<view class="specs font24 color-66 mar-sx10 clips2">规格{{item.skuName}}</view>
</view>
@ -65,7 +65,7 @@
skuId:'',
listData: [],
page:1,
size:100,
size:15,
total:0,
delIds:'', //ids
noMore:false, //
@ -182,9 +182,7 @@
if(exit.length){
this.listData.forEach(item=>item.ifcheck = true);
} else {
this.$nextTick(()=>{
this.listData.forEach(item=>{item.ifcheck = false});
})
}
},

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -269,7 +269,7 @@ var _publicApi = __webpack_require__(/*! @/jsFile/public-api.js */ 24); //
var _default = { data: function data() {return { statusHeight: uni.getSystemInfoSync().statusBarHeight, originalNum: 0, //当前输入框原值
maxNum: 99999, //最大可输入数量
minNum: 1, //最小可输入数量
skuId: '', listData: [], page: 1, size: 100, total: 0, delIds: '', //删除ids
skuId: '', listData: [], page: 1, size: 15, total: 0, delIds: '', //删除ids
noMore: false, //没有更多
isLoading: true, flag: true };}, onShow: function onShow() {uni.removeStorageSync('buyList');this.listData = []; // 查询购物车列表
this.getList();}, onReachBottom: function onReachBottom() {if (!this.noMore) {this.page++; // 获取商品列表
@ -334,19 +334,17 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
},
// 全选事件
chooseAll: function chooseAll() {var _this2 = this;
chooseAll: function chooseAll() {
var exit = this.listData.filter(function (item) {return item.ifcheck == false;});
if (exit.length) {
this.listData.forEach(function (item) {return item.ifcheck = true;});
} else {
this.$nextTick(function () {
_this2.listData.forEach(function (item) {item.ifcheck = false;});
});
this.listData.forEach(function (item) {item.ifcheck = false;});
}
},
// 去购物、去结算、删除
submitEv: function submitEv() {var _this3 = this;
submitEv: function submitEv() {var _this2 = this;
if (this.allPrice == 0) {
// 去购物
uni.reLaunch({
@ -371,7 +369,7 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
url: '/pages/cart/settlement' });
setTimeout(function () {
_this3.flag = true;
_this2.flag = true;
}, 1500);
}
}
@ -383,7 +381,7 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
},
// 数量加减事件
addCutEv: function addCutEv(index, num) {var _this4 = this;
addCutEv: function addCutEv(index, num) {var _this3 = this;
if (this.listData[index].slide_x == 0) {
if (num) {
// 加 ,如果当前商品数量不等于最大值
@ -398,14 +396,14 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
}
this.$requst.post('/api/order/shopping-cart-change-num', { id: this.listData[index].id, num: this.listData[index].num }).then(function (res) {
if (res.code != 0) {
_this4.$toolAll.tools.showToast(res.msg);
_this3.$toolAll.tools.showToast(res.msg);
}
});
}
},
// 删除商品
delShopEv: function delShopEv() {var _this5 = this;
delShopEv: function delShopEv() {var _this4 = this;
if (this.delIds !== '') {
uni.showModal({
title: '提示',
@ -413,7 +411,7 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
success: function success(res) {
if (res.confirm) {
// 确认删除
_this5.confirmDel();
_this4.confirmDel();
} else if (res.cancel) {
console.log('用户点击取消');
}
@ -423,17 +421,17 @@ var _default = { data: function data() {return { statusHeight: uni.getSystemInfo
},
// 确认删除
confirmDel: function confirmDel() {var _this6 = this;
confirmDel: function confirmDel() {var _this5 = this;
this.$requst.post('/api/order/shopping-cart-del', { ids: this.delIds.toString() }).then(function (res) {
if (res.code == 0) {
_this6.$toolAll.tools.showToast('删除成功');
_this6.listData.forEach(function (item, index) {
_this5.$toolAll.tools.showToast('删除成功');
_this5.listData.forEach(function (item, index) {
if (item.ifcheck) {
_this6.listData.splice(index, 1);
_this5.listData.splice(index, 1);
}
});
} else {
_this6.$toolAll.tools.showToast(res.msg);
_this5.$toolAll.tools.showToast(res.msg);
}
});
},

View File

@ -1 +1 @@
<block wx:if="{{isLoading}}"><view class="pad-x170 data-v-0f00adf4"><status-nav vue-id="1775f8c0-1" ifReturn="{{true}}" navBarTitle="购物车" marginBottom="{{0}}" class="data-v-0f00adf4" bind:__l="__l"></status-nav><view class="cart-content data-v-0f00adf4"><view class="change-all border-box background-white font26 flex data-v-0f00adf4" style="{{'top:'+(statusHeight+50+'px')+';'}}"><label data-event-opts="{{[['tap',[['chooseAll',['$event']]]]]}}" class="label flex data-v-0f00adf4" bindtap="__e"><radio style="transform:scale(.8);" checked="{{allChoose}}" color="#febf00" class="data-v-0f00adf4"></radio><text class="data-v-0f00adf4">全选</text></label><view data-event-opts="{{[['tap',[['delShopEv',['$event']]]]]}}" class="del-cart data-v-0f00adf4" bindtap="__e">删除</view></view><view class="slide-list data-v-0f00adf4"><block wx:for="{{listData}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="slide-item data-v-0f00adf4"><view data-event-opts="{{[['tap',[['goDetail',['$0'],[[['listData','',index,'spuId']]]]]]]}}" class="slide-item-li border-box background-white flex data-v-0f00adf4" catchtap="__e"><label data-event-opts="{{[['tap',[['chooseEv',[index]]]]]}}" class="radio data-v-0f00adf4" catchtap="__e"><radio checked="{{item.ifcheck}}" color="#febf00" class="data-v-0f00adf4"></radio></label><view class="shop-img radius30 data-v-0f00adf4"><image src="{{item.image}}" mode="widthFix" class="data-v-0f00adf4"></image></view><view class="shop-txt data-v-0f00adf4"><view class="shop-txt-top data-v-0f00adf4"><view class="title font30 clips1 data-v-0f00adf4">{{item.title}}</view><view class="specs font24 color-66 mar-sx10 clips2 data-v-0f00adf4">{{"规格:"+item.skuName}}</view></view><view class="shop-txt-bottom flex data-v-0f00adf4"><view class="price font30 color-red data-v-0f00adf4">{{"¥"+item.price}}</view><view class="num font24 flex data-v-0f00adf4"><view data-event-opts="{{[['tap',[['addCutEv',[index,0]]]]]}}" class="icon icon-cut count-btn fon24 color-ff radius10 flex _i data-v-0f00adf4" style="{{'background-color:'+(item.num==minNum||item.slide_x!=0?'#d3d3d3':'#febf00')+';'}}" catchtap="__e"></view><input class="input border-box radius10 data-v-0f00adf4" type="digit" disabled="{{item.slide_x!=0}}" data-event-opts="{{[['blur',[['blurEv',[index,'$event']]]],['focus',[['focusEv',['$0'],[[['listData','',index,'num']]]]]],['input',[['__set_model',['$0','num','$event',[]],[[['listData','',index]]]]]]]}}" value="{{item.num}}" bindblur="__e" bindfocus="__e" bindinput="__e"/><view data-event-opts="{{[['tap',[['addCutEv',[index,1]]]]]}}" class="icon icon-add count-btn fon24 color-ff radius10 flex _i data-v-0f00adf4" style="{{'background-color:'+(item.num==maxNum||item.slide_x!=0?'#d3d3d3':'#febf00')+';'}}" catchtap="__e"></view></view></view></view></view></view></block></view><view class="pull-footer-bg background-white pad-all20 radius30 border-box data-v-0f00adf4"><view class="pull-footer background-grey radius30 pad-all20 border-box flex data-v-0f00adf4"><view class="price color-ff data-v-0f00adf4"><view class="font36 data-v-0f00adf4">{{"合计:"+(allPrice>0?'¥'+allPrice:'0')}}</view></view><view data-event-opts="{{[['tap',[['submitEv',['$event']]]]]}}" class="btn font36 color-48 radius30 flex data-v-0f00adf4" style="{{'background:'+(!buyNum?'#cccccc':'#febf00')+';'}}" bindtap="__e">{{allPrice==0?'去购物':'立即购买'}}</view></view></view><block wx:if="{{listData.length!==0&&noMore}}"><view class="no-more font24 pad-sx25 data-v-0f00adf4" style="margin:0;"><text class="data-v-0f00adf4">—— 到底啦 ——</text></view></block><block wx:if="{{listData.length==0}}"><nothing-page vue-id="1775f8c0-2" content="您的购物车,空空如也(*^▽^*)" class="data-v-0f00adf4" bind:__l="__l"></nothing-page></block></view></view></block>
<block wx:if="{{isLoading}}"><view class="pad-x170 data-v-0f00adf4"><status-nav vue-id="1775f8c0-1" ifReturn="{{true}}" navBarTitle="购物车" marginBottom="{{0}}" class="data-v-0f00adf4" bind:__l="__l"></status-nav><view class="cart-content data-v-0f00adf4"><view class="change-all border-box background-white font26 flex data-v-0f00adf4" style="{{'top:'+(statusHeight+50+'px')+';'}}"><label data-event-opts="{{[['tap',[['chooseAll',['$event']]]]]}}" class="label flex data-v-0f00adf4" bindtap="__e"><radio style="transform:scale(.8);" checked="{{allChoose}}" color="#febf00" class="data-v-0f00adf4"></radio><text class="data-v-0f00adf4">全选</text></label><view data-event-opts="{{[['tap',[['delShopEv',['$event']]]]]}}" class="del-cart data-v-0f00adf4" bindtap="__e">删除</view></view><view class="slide-list data-v-0f00adf4"><block wx:for="{{listData}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="slide-item data-v-0f00adf4"><view class="slide-item-li border-box background-white flex data-v-0f00adf4"><label data-event-opts="{{[['tap',[['chooseEv',[index]]]]]}}" class="radio data-v-0f00adf4" catchtap="__e"><radio checked="{{item.ifcheck}}" color="#febf00" class="data-v-0f00adf4"></radio></label><view data-event-opts="{{[['tap',[['goDetail',['$0'],[[['listData','',index,'spuId']]]]]]]}}" class="shop-img radius30 data-v-0f00adf4" catchtap="__e"><image src="{{item.image}}" mode="widthFix" class="data-v-0f00adf4"></image></view><view class="shop-txt data-v-0f00adf4"><view data-event-opts="{{[['tap',[['goDetail',['$0'],[[['listData','',index,'spuId']]]]]]]}}" class="shop-txt-top data-v-0f00adf4" catchtap="__e"><view class="title font30 clips1 data-v-0f00adf4">{{item.title}}</view><view class="specs font24 color-66 mar-sx10 clips2 data-v-0f00adf4">{{"规格:"+item.skuName}}</view></view><view class="shop-txt-bottom flex data-v-0f00adf4"><view class="price font30 color-red data-v-0f00adf4">{{"¥"+item.price}}</view><view class="num font24 flex data-v-0f00adf4"><view data-event-opts="{{[['tap',[['addCutEv',[index,0]]]]]}}" class="icon icon-cut count-btn fon24 color-ff radius10 flex _i data-v-0f00adf4" style="{{'background-color:'+(item.num==minNum||item.slide_x!=0?'#d3d3d3':'#febf00')+';'}}" catchtap="__e"></view><input class="input border-box radius10 data-v-0f00adf4" type="digit" disabled="{{item.slide_x!=0}}" data-event-opts="{{[['blur',[['blurEv',[index,'$event']]]],['focus',[['focusEv',['$0'],[[['listData','',index,'num']]]]]],['input',[['__set_model',['$0','num','$event',[]],[[['listData','',index]]]]]]]}}" value="{{item.num}}" bindblur="__e" bindfocus="__e" bindinput="__e"/><view data-event-opts="{{[['tap',[['addCutEv',[index,1]]]]]}}" class="icon icon-add count-btn fon24 color-ff radius10 flex _i data-v-0f00adf4" style="{{'background-color:'+(item.num==maxNum||item.slide_x!=0?'#d3d3d3':'#febf00')+';'}}" catchtap="__e"></view></view></view></view></view></view></block></view><view class="pull-footer-bg background-white pad-all20 radius30 border-box data-v-0f00adf4"><view class="pull-footer background-grey radius30 pad-all20 border-box flex data-v-0f00adf4"><view class="price color-ff data-v-0f00adf4"><view class="font36 data-v-0f00adf4">{{"合计:"+(allPrice>0?'¥'+allPrice:'0')}}</view></view><view data-event-opts="{{[['tap',[['submitEv',['$event']]]]]}}" class="btn font36 color-48 radius30 flex data-v-0f00adf4" style="{{'background:'+(!buyNum?'#cccccc':'#febf00')+';'}}" bindtap="__e">{{allPrice==0?'去购物':'立即购买'}}</view></view></view><block wx:if="{{listData.length!==0&&noMore}}"><view class="no-more font24 pad-sx25 data-v-0f00adf4" style="margin:0;"><text class="data-v-0f00adf4">—— 到底啦 ——</text></view></block><block wx:if="{{listData.length==0}}"><nothing-page vue-id="1775f8c0-2" content="您的购物车,空空如也(*^▽^*)" class="data-v-0f00adf4" bind:__l="__l"></nothing-page></block></view></view></block>

View File

@ -31,33 +31,13 @@
"outputPath": ""
},
"disableUseStrict": false,
"useCompilerPlugins": false,
"minifyWXML": true
"useCompilerPlugins": false
},
"compileType": "miniprogram",
"libVersion": "2.25.2",
"appid": "wxa02e44170bc722cd",
"projectname": "app适配微信小程序",
"condition": {
"miniprogram": {
"list": [
{
"name": "",
"pathName": "pages/login/login",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pagesB/distributor/distributor",
"query": "invite_code=4e4b5fbbbb602b6d35bea8460aa8f8e5&invite_name=Lee",
"launchMode": "default",
"scene": null
}
]
}
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 4