一、熟悉购物车
- 所谓熟悉购物车,是指对购物车的所有商品的操作熟知。如:商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数,实现的时候才会轻而易举。
- UI图
二、具体购物车功能
- 在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化,还有商品的管理和失效商品的处理。
三、具体代码
<!--pages/shoppingMall/ShoppingCart/ShoppingCart.wxml-->
<import src="../../../template/template.wxml" />
<template is="tabBar" data="{{tabBar:bindData.tabBar}}" />
<view>
<view wx:if="{{!CartNum}}">
<view class="emptyShop">
<image src="/res/shopImg/empty.png" class="emptyShop_img"></image>
<view class="emptyShop_btn flex_c_m" bindtap="go">
<text class="emptyShop_btn_words">去逛逛</text>
</view>
<view class="emptyShop_more">更多人都在看的</view>
<view class="moreTime">
<view class="Recommend dib">
<image src="http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg" class="Recommend_img"></image>
<view class="RecommendOne">
<text class="iconfont iconhot"></text>
<text class="RecommendName">年货全坚果大礼包</text>
</view>
<text class="Specifications">【1598g/10袋】</text>
<view>
<text class="PresentPrice">¥158.00</text>
<text class="OriginalPrice">¥288.00</text>
</view>
</view>
<view class="Recommend dib">
<image src="https://i1.fuimg.com/715052/988442728e0350fc.jpg" class="Recommend_img"></image>
<view class="RecommendOne">
<text class="iconfont iconhot"></text>
<text class="RecommendName">年货全坚果大礼包</text>
</view>
<text class="Specifications">【1598g/10袋】</text>
<view>
<text class="PresentPrice">¥158.00</text>
<text class="OriginalPrice">¥288.00</text>
</view>
</view>
</view>
</view>
</view>
<!-- 购物车界面 -->
<view class="Interface" wx:else>
<view class="Total">您的
<text class="Total_os">商翼大卖场</text>购物车当前共{{CartNum}}件宝贝</view>
<text class="Tips">虚拟物品、实物商品、优惠券不能一起结算哦</text>
<view class="Administration" hidden="{{!saveHidden}}" bindtap="editTap">管理</view>
<view class="Administration" hidden="{{saveHidden}}" bindtap="editTap">完成</view>
<view style="height:40rpx;"></view>
<!-- 店铺列表 -->
<view class="cart">
<scroll-view scroll-y='true' style='height: {{scrollViewHeight + "px"}}'>
<!-- 店铺循环 -->
<block wx:for="{{shoplists}}" wx:key="index" wx:for-index="groupIndex">
<block wx:if="{{item.StoreId}}">
<view class="shop">
<view class="check_icon">
<text class="iconfont {{item.checkeedAll ? 'iconwancheng' : 'iconyuanxingweixuanzhong'}} ss" bindtap="checkall" data-index="{{groupIndex}}"></text>
<text class="iconfont iconmendian"></text>
<text class="shopName">{{item.StoreName}}</text>
<text class="iconfont iconxiangshang-copy"></text>
</view>
<view wx:for="{{item.ShoppingCartGoods}}" data-kc="{{item}}" wx:key="index" class="cartList">
<!-- 优惠券订单 -->
<view class="shopList_1 flex_m">
<view class="dib check" bindtap="Checks1" data-groupIndex="{{groupIndex}}" data-index="{{item.index}}">
<text class="iconfont {{item.checked ? 'iconwancheng' : 'iconyuanxingweixuanzhong'}}"></text>
</view>
<image src="{{item.GoodImage}}" class="shop_img"></image>
<view class="shopText">
<view class="shopText_txt">{{item.SellPoint}}</view>
<block wx:if="{{item.ComboOrCouponInfo}}">
<view class="fictitious">
<text class="fictitious_time">有效期:{{item.ComboOrCouponInfo['有效期']}}</text>
<text class="db fictitious_type">券类型:{{item.ComboOrCouponInfo['类型']}}</text>
<text class="fictitious_mo">面值:{{item.ComboOrCouponInfo['面值']}}</text>
</view>
</block>
<block wx:if="{{item.FormatName}}">
<view class="shopText_selct" bindtap="chose" data-id="{{item.GoodId}}" data-formid="{{item.GoodFormatId}}" data-groupIndex="{{groupIndex}}" data-index="{{item.index}}">
<text class="shopText_selct_Company">{{item.FormatName}}</text>
<text class="iconfont iconxiangxia2"></text>
</view>
</block>
<view class="flex_lr shopList_pecirs">
<view>
<text class="price">{{item.SaleScore > '0' ? item.SaleScore + '积分' : ''}}{{item.SaleScore > '0'&& item.SalePrice > '0' ? '+' : ''}}{{item.SalePrice > '0' ? '¥' + item.SalePrice : ''}}</text>
</view>
<view class="btn_num flex_m">
<view class="dib btn_sub" bindtap='subNum' data-groupIndex="{{groupIndex}}" data-index="{{item.index}}">
<text class="iconfont iconjianhao"></text>
</view>
<view class="dib btn_number">
<text class="num">{{item.num}}</text>
</view>
<view class="dib btn_add" bindtap='addNum' data-groupIndex="{{groupIndex}}" data-index="{{item.index}}">
<text class="iconfont iconjiahao"></text>
</view>
</view>
</view>
</view>
</view>
<block wx:if="{{item.QuantityState}}">
<view class="quantityState">
<text class="quantityState_price">库存紧缺</text>
</view>
</block>
</view>
</view>
<view style="height:40rpx;"></view>
</block>
<!-- 失效 -->
</block>
<!-- 失效商品 -->
<block wx:if="{{count && clearStae}}">
<view class="shop">
<view class="flex_lr_m bag">
<text class="Invalid_bag">失效宝贝{{count}}件</text>
<text class="empty_bag" bindtap="clearAll">清空失效宝贝</text>
</view>
<block wx:for="{{cartList}}" wx:key="index">
<view data-index="{{index}}" animation="{{item.animationData}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" style="margin-bottom:20rpx;">
<view class="shopList_1">
<view class="dib check Invalid_r">
<text class=" check_icon Invalid">失效</text>
</view>
<image src="{{item.GoodImage}}" class="shop_img"></image>
<view class="shopText1">
<text class="shopText_txt">{{item.SellPoint}}</text>
</view>
</view>
<view class="del" bindtap="deleteProduct" data-index="{{index}}" data-id="{{item.Id}}">删除</view>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
<!-- 合计 -->
<view class="cart-bar">
<!-- bindtap="check" -->
<block wx:if="{{!saveHidden}}">
<view class="allselect" bindtap="AllTap" data-index="{{index}}">
<text class="iconfont {{checkedAll ? 'iconwancheng' : 'iconyuanxingweixuanzhong'}}"></text> 全选
</view>
<view class="Favorites">
<text class="Favorites_txt">移入收藏夹</text>
</view>
<view class="delete" bindtap="delBtn">
<text class="delete_txt">删除</text>
</view>
</block>
<block wx:else>
<view class="totalPrice {{scoreAll || priceAll ? '' : 'ishow'}}">
<text class="totalPrice_yun">不含运费</text>
<text class="totalPrice_he">合计:</text>
<text class="totalPrice_mo">{{scoreAll > 0 ? scoreAll + '积分' : ''}}{{scoreAll > 0 && priceAll > 0 ? '+' : ''}}{{priceAll > '0' ? '¥' + priceAll : ''}}
</text>
</view>
<view class="Settlement {{scoreAll || priceAll ? 'isSettlement' : ''}}" bindtap="settl">
<text class="Settlement_txt">结算</text>
</view>
</block>
</view>
</view>
</view>
<SpecificationSelector shopInfo='{{shopInfo}}' btnType='{{btnType}}' SalePrice='{{infoObj.SalePrice}}' SaleScore='{{infoObj.SaleScore}}' Quantity='{{infoObj.Quantity}}' AllFormatValue='{{infoObj.FormatName}}' GoodImg='{{infoObj.GoodImage}}' Id="{{infoObj.Id}}"
bind:compontpass="compontpass">
</SpecificationSelector>
page {
width: 100%;
height: 100%;
background: #f5f6f7;
}
.emptyShop_img {
display: block;
width: 400rpx;
height: 444rpx;
background: #f5f5f5;
margin-top: 31rpx;
margin: 0 auto;
}
.emptyShop_btn {
width: 184rpx;
height: 72rpx;
border: 1rpx solid #fc7297;
margin-left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
margin-top: 48rpx;
border-radius: 36rpx;
background: #fff;
}
.emptyShop_btn_words {
color: #fc7297;
}
.emptyShop_more {
width: 192rpx;
height: 27rpx;
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: center;
color: #cdcdcd;
margin-left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
margin-top: 44rpx;
}
.moreTime {
display: flex;
justify-content: space-around;
margin-top: 22rpx;
}
.Recommend {
width: 323rpx;
height: 448rpx;
background: #fff;
border: 1pt solid #f5f6f7;
border-radius: 10rpx;
padding: 10rpx 14rpx;
}
.Recommend_img {
display: block;
width: 296rpx;
height: 268rpx;
margin: 0 auto;
}
.RecommendOne {
display: flex;
align-items: center;
margin-left: 8rpx;
margin-top: 30rpx;
margin-bottom: 12rpx;
}
.iconhot {
font-size: 21rpx;
color: #e75b5b;
margin-right: 8rpx;
}
.iconhot2 {
font-size: 21rpx;
color: #e75b5b;
margin-right: 8rpx;
}
.RecommendName {
width: 190rpx;
height: 22rpx;
font-size: 24rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: left;
color: #333;
line-height: 30rpx;
}
.Specifications {
width: 120rpx;
height: 22rpx;
font-size: 20rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: left;
color: #666;
line-height: 30rpx;
margin-bottom: 12rpx;
}
.PresentPrice {
width: 139rpx;
height: 28rpx;
font-size: 36rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: left;
color: red;
line-height: 30rpx;
}
.OriginalPrice {
width: 83rpx;
height: 16rpx;
font-size: 20rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-decoration: line-through;
text-align: left;
color: #999;
line-height: 30rpx;
margin-left: 12rpx;
}
.Interface {
padding: 0 32rpx;
}
.Total {
font-size: 24rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #666;
}
.Total_os {
font-size: 24rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
color: #fc7297;
}
.Tips {
font-size: 24rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #cdcdcd;
}
.Administration {
width: 100%;
height: 28rpx;
font-size: 28rpx;
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
font-weight: 400;
text-align: right;
color: #666;
line-height: 69prpx;
margin-top: -68rpx;
}
.cart {
height: calc(100% - 76rpx - 84rpx);
font-size: 28rpx;
margin-top: 15rpx;
}
.cart scroll-view {
}
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
color: transparent;
}
.shop {
width: 691rpx;
background: #fff;
border-radius: 20rpx;
padding: 16rpx 23rpx;
}
.check {
width: 30rpx;
margin-right: 20rpx;
margin-top: -88rpx;
}
.iconyuanxingweixuanzhong {
font-size: 40rpx;
color: #cdcdcd;
}
.iconwancheng {
font-size: 40rpx;
color: #fc7297;
}
.check_icon {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.iconmendian {
font-size: 28rpx;
margin-left: 14rpx;
margin-right: 11rpx;
}
.shopName {
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: bold;
color: #333;
}
.iconxiangshang-copy {
color: #cdcdcd;
font-size: 22rpx;
margin-left: 21rpx;
}
.shop_img {
width: 160rpx;
height: 158rpx;
border-radius: 10rpx;
margin-top: -88rpx;
}
.cartList {
padding-bottom: 20rpx;
position: relative;
}
.shopList_1 {
width: 100%;
height: 248rpx;
}
.shopText {
display: inline-block;
width: 418rpx;
height: 248rpx;
margin-left: 17rpx;
}
.shopText_txt {
width: 418rpx;
height: 68rpx;
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.shopText_selct {
display: inline-block;
height: 48rpx;
background: #f5f6f7;
border-radius: 10rpx;
padding: 0 10rpx;
margin-top: 10rpx;
}
.shopText_selct_Company {
height: 21rpx;
font-size: 22rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #9c9c9c;
line-height: 48rpx;
}
.iconxiangxia2 {
font-size: 20rpx;
color: #999;
margin-left: 15rpx;
}
.shopList_pecir {
width: 418rpx;
margin-left: 224rpx;
margin-bottom: 20rpx;
margin-top: 10rpx;
}
.quantityState {
position: absolute;
top: 80%;
left: 35%;
}
.quantityState_price {
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
color: #fc7297;
}
.price {
height: 22rpx;
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: bold;
text-align: left;
color: #fc7297;
line-height: 36rpx;
}
.iconjianhao {
font-size: 24rpx;
color: #cdcdcd;
}
.iconjiahao {
font-size: 24rpx;
color: #cdcdcd;
}
.btn_num {
width: 185rpx;
height: 48rpx;
background: #fff;
border: 1rpx solid rgba(205, 205, 205, 0.5);
border-radius: 10rpx;
}
.btn_number {
width: 85rpx;
height: 48rpx;
border-left: 1rpx solid rgba(205, 205, 205, 0.5);
border-right: 1rpx solid rgba(205, 205, 205, 0.5);
text-align: center;
}
.btn_sub {
margin: 0 14rpx;
}
.btn_add {
margin: 0 14rpx;
}
.num {
width: 9rpx;
height: 21rpx;
font-size: 28rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #333;
line-height: 48rpx;
}
.Invalid {
width: 54rpx;
height: 30rpx;
background: #cdcdcd;
border-radius: 15rpx;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(3, 0, 6, 0.1);
font-size: 20rpx;
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
font-weight: bold;
color: #fff;
text-align: center;
}
.Invalid_r {
width: 50rpx;
margin-right: 10rpx;
}
.shopText1 {
display: inline-block;
margin-left: 17rpx;
}
.bag {
margin-bottom: 35rpx;
}
.Invalid_bag {
width: 138rpx;
height: 24rpx;
font-size: 24rpx;
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
font-weight: bold;
color: #333;
}
.empty_bag {
width: 143rpx;
height: 24rpx;
font-size: 24rpx;
font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
font-weight: 400;
color: #fc7297;
}
.fictitious {
}
.fictitious_time {
font-size: 22rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #9c9c9c;
}
.fictitious_type {
font-size: 22rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #9c9c9c;
}
.fictitious_mo {
font-size: 22rpx;
font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
font-weight: R;
text-align: left;
color: #9c9c9c;
}
.cart-bar {
width: 749rpx;
height: 103rpx;
background: #fff;
position: fixed;
bottom: 109rpx;
left: 0;
display: flex;
align-items: center;
}
.allselect {
margin-left: 53rpx;
}
.totalPrice {
margin-left: 32rpx;
position: relative;
}
.ishow {
display: none;
}
.totalPrice_yun {
width: 55rpx;
height: 14rpx;
font-size: 14rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: left;
color: #999;
line-height: 13rpx;
}
.totalPrice_he {
width: 64rpx;
height: 26rpx;
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
text-align: left;
color: #333;
line-height: 13rpx;
}
.totalPrice_mo {
height: 22rpx;
font-size: 22rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
text-align: left;
color: red;
line-height: 28rpx;
}
.Settlement {
width: 184rpx;
height: 72rpx;
background: #cdcdcd;
border-radius: 36rpx;
display: flex;
justify-content: center;
position: absolute;
right: 2%;
}
.isSettlement {
background: #fc7297;
}
.Settlement_txt {
height: 28rpx;
font-size: 30rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
color: #fff;
line-height: 72rpx;
}
.Favorites {
width: 184rpx;
height: 72rpx;
background: #fff;
border: 1rpx solid #cdcdcd;
border-radius: 36rpx;
display: flex;
justify-content: center;
margin-left: 189rpx;
}
.Favorites_txt {
width: 148rpx;
height: 28prx;
font-size: 30rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
color: #999;
line-height: 72rpx;
}
.delete {
width: 184rpx;
height: 72rpx;
background: #fff;
border: 1rpx solid #fc7297;
border-radius: 36rpx;
display: flex;
justify-content: center;
margin-left: 11rpx;
}
.delete_txt {
width: 59rpx;
height: 28rpx;
font-size: 30rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
color: #fc7297;
line-height: 72rpx;
}
.del {
position: absolute;
width: 100rpx;
height: 100%;
top: 0;
right: -120rpx;
text-align: center;
background: #b4282d;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.shopList_pecirs {
width: 418rpx;
margin-top: 20rpx;
}
.shopText_txts {
width: 418rpx;
font-size: 28rpx;
font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
font-weight: 400;
color: #333;
}
const http = require('../../../server/request.js');
var template = require('../../../template/template.js');
var app = require('../../../utils/uselogn.js');
var startX = 0;
var endX = 0;
var offsetX = 0;
Page({
data: {
windowHeight: 0,
scrollViewHeight: 0,
shopData: false,
saveHidden: true,
number: 1,
isCheck: false,
delBtnWidth: 180,
cartList: [],
shoplists: [],
checkedAll: false,
count: 0,
priceAll: 0.0,
scoreAll: 0,
CartNum: 0,
delList: [],
setList: [],
clearStae: true,
goodType: null,
goodType2: [],
goodType3: [],
btnType: '',
shopInfo: '',
infoObj: {},
cache: {
num: '',
listI: ''
}
},
onLogin: app.userLogin,
onLoad: function(options) {
template.tabbar("tabBar", 2, this);
let that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
windowHeight: res.windowHeight
});
console.log(res.windowHeight)
}
});
let scrollViewHeight = this.data.windowHeight - 52 - 105;
this.setData({
scrollViewHeight: scrollViewHeight
});
console.log(scrollViewHeight)
},
onReady: function() {
},
onShow: function() {
this.onLogin(this.authCallback);
},
authCallback: function() {
this.getShoppingCart();
this.getShoppingCartNum();
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
getShoppingCart() {
http.requestLoading('api/services/app/ShopShoppingCartServicee/getShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', '', '', 'GET').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
let list = res.data.Result.Data;
let num = 0;
list.forEach(item => {
if (!item.StoreId) {
num = item['ShoppingCartGoods'].length;
item['ShoppingCartGoods'].forEach((item, index) => {
item.animationData = null;
})
this.setData({
cartList: item['ShoppingCartGoods']
})
console.log(item['ShoppingCartGoods'])
}
item.checkeedAll = false;
item['ShoppingCartGoods'].forEach((item, index) => {
item.checked = false;
item.index = index;
if (item.ComboOrCouponInfo) {
let reCat = /\\\\/gi;
let comdata = item.ComboOrCouponInfo.replace(reCat, '');
item.ComboOrCouponInfo = JSON.parse(comdata);
}
})
})
this.setData({
shoplists: list,
count: num
})
console.log(list)
}
})
},
getShoppingCartNum() {
http.requestLoading('api/services/app/ShopShoppingCartServicee/getShoppingCartNum?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', '', '', 'GET').then(res => {
if (res.data.Result.Code === 0) {
this.setData({
CartNum: res.data.Result.Data
})
}
})
},
editTap: function() {
this.setData({
saveHidden: !this.data.saveHidden
})
if (this.data.saveHidden) {
var checkedAlls = this.data.checkedAll;
var list1 = this.data.shoplists;
for (var i = 0; i < list1.length; i++) {
list1[i].checkeedAll = false;
var list2 = this.data.shoplists[i].ShoppingCartGoods;
for (var a = 0; a < list2.length; a++) {
list2[a].checked = false;
}
}
this.setData({
checkedAll: false,
shoplists: list1
});
console.log(list1)
}
},
subNum: function(e) {
let that = this;
var groupIndex = e.currentTarget.dataset.groupindex;
var index = e.currentTarget.dataset.index;
var list = that.data.shoplists[groupIndex].ShoppingCartGoods;
var list2 = that.data.shoplists[groupIndex].ShoppingCartGoods[index].num;
var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].num';
console.log(list)
let Id = that.data.shoplists[groupIndex].ShoppingCartGoods[index].Id;
let body = {
"Id": that.data.shoplists[groupIndex].ShoppingCartGoods[index].Id,
"GoodFormatId": that.data.shoplists[groupIndex].ShoppingCartGoods[index].GoodFormatId,
"Score": that.data.shoplists[groupIndex].ShoppingCartGoods[index].SaleScore,
"Price": that.data.shoplists[groupIndex].ShoppingCartGoods[index].SalePrice,
"Num": that.data.shoplists[groupIndex].ShoppingCartGoods[index].num
}
let num = list2 - 1;
if (num > 0) {
http.requestLoading('api/services/app/ShopShoppingCartServicee/UpdateShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', body, '', 'PUT').then(res => {
})
this.setData({
[dataIndexchecked]: num
});
} else {
wx.showModal({
title: '确定删除吗',
content: '真的舍得让人家离开嘛',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
http.requestLoading('api/services/app/ShopShoppingCartServicee/deleteShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17&ids=' + Id, '', '', 'DELETE').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
console.log(res.data.Result.Data)
wx.showToast({
title: res.data.Result.Message,
icon: 'none'
})
that.getShoppingCart();
that.getShoppingCartNum();
}
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
},
addNum: function(e) {
var groupIndex = e.currentTarget.dataset.groupindex;
var index = e.currentTarget.dataset.index;
var list = this.data.shoplists[groupIndex].ShoppingCartGoods;
var list2 = this.data.shoplists[groupIndex].ShoppingCartGoods[index].num;
var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].num';
let num = list2 + 1;
let body = {
"Id": this.data.shoplists[groupIndex].ShoppingCartGoods[index].Id,
"GoodFormatId": this.data.shoplists[groupIndex].ShoppingCartGoods[index].GoodFormatId,
"Score": this.data.shoplists[groupIndex].ShoppingCartGoods[index].SaleScore,
"Price": this.data.shoplists[groupIndex].ShoppingCartGoods[index].SalePrice,
"Num": this.data.shoplists[groupIndex].ShoppingCartGoods[index].num
}
http.requestLoading('api/services/app/ShopShoppingCartServicee/UpdateShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', body, '', 'PUT').then(res => {})
this.setData({
[dataIndexchecked]: num
});
},
chenkSelect: function() {
this.setData({
isCheck: !this.data.isCheck
})
},
touchStart(event) {
startX = event.touches[0].clientX
},
touchMove(event) {
endX = event.touches[0].clientX
},
touchEnd(event) {
var mywidth = 0;
const query = wx.createSelectorQuery()
query.select('.del').boundingClientRect()
query.exec((res) => {
mywidth = res[0].width
var index = event.currentTarget.dataset.index;
var list = this.data.cartList
offsetX = startX - endX;
if (offsetX > 50) {
this.rightAnimation();
wx.nextTick(() => {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animation.translateX(-(mywidth)).step()
list[index].animationData = animation.export()
this.setData({
cartList: list
})
})
} else if (offsetX < -50) {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animation.translateX(0).step()
list[index].animationData = animation.export()
this.setData({
cartList: list
})
}
})
},
rightAnimation() {
var list = this.data.cartList
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animation.translateX(0).step()
list.forEach((item) => {
item.animationData = animation
})
this.setData({
cartList: list
})
},
deleteProduct(event) {
var that = this
var index = event.currentTarget.dataset.index
var pid = event.currentTarget.dataset.id
var list = that.data.cartList
wx.showModal({
title: '确定删除吗',
content: '真的舍得让人家离开嘛',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
http.requestLoading('api/services/app/ShopShoppingCartServicee/deleteShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17&ids=' + pid, '', '', 'DELETE').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
console.log(res.data.Result.Data)
wx.showToast({
title: res.data.Result.Message,
icon: 'none'
})
list.splice(index, 1)
if (list.length) {
that.setData({
cartList: list
})
} else {
that.setData({
cartList: list,
clearStae: false
})
}
}
})
}
}
})
},
checkall: function(e) {
var index = e.target.dataset.index;
var list = this.data.shoplists[index].ShoppingCartGoods;
var status = this.data.shoplists[index].checkeedAll;
let type = []
let types = this.data.goodType2
if (!status) {
types.push(index)
let tLength = types.length
for (let i = 0; i < tLength - 1; i++) {
for (let j = 0; j < tLength - 1 - i; j++) {
if (types[j] == types[j + 1]) {
} else {
wx.showToast({
title: '不可选择多个店铺',
icon: 'none'
})
console.log(types, i, j)
types.splice(tLength - 1, 1)
this.setData({
goodType2: types
})
console.log(types)
return
}
}
}
console.log(types)
} else {
this.setData({
goodType2: []
})
}
for (var i = 0; i < list.length; i++) {
type.push(list[i].GoodType)
var len = type.length;
if (this.data.saveHidden) {
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (type[j] == type[j + 1]) {
} else {
wx.showToast({
title: '拥有不同类型的商品,不可全选',
icon: 'none'
})
return
}
}
}
}
list[i].checked = !status;
};
var dataIndex = 'shoplists[' + index + '].ShoppingCartGoods';
var dataStatus = 'shoplists[' + index + '].checkeedAll';
this.setData({
[dataIndex]: list,
[dataStatus]: !status,
});
var data = this.data.shoplists;
var datarr = [];
for (var a = 0; a < data.length; a++) {
if (data[a].checkeedAll == true) {
datarr.push(data[a]);
}
}
if (data.length === datarr.length) {
this.setData({
checkedAll: true
});
} else {
this.setData({
checkedAll: false
});
}
var count = [];
var delL = [];
let obj = {
StoreId: this.data.shoplists[index].StoreId,
StoreName: this.data.shoplists[index].StoreName
}
let ShopConsumptionOrderDetails = [];
var priceAll = 0;
var scoreAll = 0;
for (var b = 0; b < data.length; b++) {
var datacount = data[b].ShoppingCartGoods;
for (var c = 0; c < datacount.length; c++) {
if (datacount[c].checked == true) {
let obj1 = {
ShopCartId: datacount[c].Id,
GoodFormatId: datacount[c].GoodFormatId,
Num: datacount[c].num,
GoodType: datacount[c].GoodType
}
ShopConsumptionOrderDetails.push(obj1);
count.push(datacount[c]);
delL.push(datacount[c].Id);
priceAll += datacount[c].SalePrice * datacount[c].num;
scoreAll += datacount[c].SaleScore * datacount[c].num;
}
}
}
obj.ShopConsumptionOrderDetails = ShopConsumptionOrderDetails;
let setL = [];
setL.push(obj);
var price = Number(priceAll).toFixed(2);
var score = Number(scoreAll).toFixed(2);
this.setData({
priceAll: price,
scoreAll: score,
delList: delL,
setList: setL
});
console.log(price, score, obj)
},
Checks1: function(e) {
var groupIndex = e.currentTarget.dataset.groupindex;
var index = e.currentTarget.dataset.index;
var list = this.data.shoplists[groupIndex].ShoppingCartGoods;
var list2 = this.data.shoplists[groupIndex].ShoppingCartGoods[index].checked;
var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].checked';
var type2 = this.data.shoplists[groupIndex].ShoppingCartGoods[index].GoodType;
let types = this.data.goodType3
if (!list2) {
types.push(groupIndex)
let tLength = types.length
for (let i = 0; i < tLength - 1; i++) {
for (let j = 0; j < tLength - 1 - i; j++) {
if (types[j] == types[j + 1]) {
} else {
wx.showToast({
title: '不可选择多个店铺',
icon: 'none'
})
console.log(types, i, j)
types.splice(tLength - 1, 1)
this.setData({
goodType3: types
})
console.log(types)
return
}
}
}
console.log(types)
} else {
this.setData({
goodType3: []
})
}
if (this.data.saveHidden) {
if (this.data.goodType != null) {
if (this.data.goodType != type2) {
wx.showToast({
title: '商品类型不同,不可同时选中',
icon: 'none'
})
return;
} else {}
} else {
this.setData({
goodType: type2
})
}
}
var dataStatus = 'shoplists[' + groupIndex + '].checkeedAll';
this.setData({
[dataIndexchecked]: !list2,
});
var listcheckedarr = []
for (var i = 0; i < list.length; i++) {
if (list[i].checked == true) {
listcheckedarr.push(list[i]);
}
}
console.log(listcheckedarr)
if (!listcheckedarr.length) {
this.setData({
goodType: null
})
}
if (list.length === listcheckedarr.length) {
this.setData({
[dataStatus]: true
});
} else {
this.setData({
[dataStatus]: false,
});
}
var data = this.data.shoplists;
var datarr = [];
for (var a = 0; a < data.length; a++) {
if (data[a].checkeedAll == true) {
datarr.push(data[a]);
}
}
if (data.length === datarr.length) {
this.setData({
checkedAll: true
});
} else {
this.setData({
checkedAll: false
});
}
var count = [];
var delL = [];
let obj = {
StoreId: this.data.shoplists[groupIndex].StoreId,
StoreName: this.data.shoplists[groupIndex].StoreName
}
let ShopConsumptionOrderDetails = [];
var priceAll = 0;
var scoreAll = 0;
for (var b = 0; b < data.length; b++) {
var datacount = data[b].ShoppingCartGoods;
for (var c = 0; c < datacount.length; c++) {
if (datacount[c].checked == true) {
let obj1 = {
ShopCartId: datacount[c].Id,
GoodFormatId: datacount[c].GoodFormatId,
Num: datacount[c].num,
GoodType: datacount[c].GoodType
}
ShopConsumptionOrderDetails.push(obj1);
count.push(datacount[c]);
delL.push(datacount[c].Id);
priceAll += datacount[c].SalePrice * datacount[c].num;
scoreAll += datacount[c].SaleScore * datacount[c].num;
}
}
}
obj.ShopConsumptionOrderDetails = ShopConsumptionOrderDetails;
let setL = [];
setL.push(obj);
var price = Number(priceAll).toFixed(2);
var score = Number(scoreAll).toFixed(2);
this.setData({
priceAll: price,
scoreAll: score,
delList: delL,
setList: setL
});
console.log(price, score, obj)
},
AllTap: function(e) {
var checkedAlls = this.data.checkedAll;
console.log(checkedAlls)
var list1 = this.data.shoplists;
console.log(list1)
for (var i = 0; i < list1.length; i++) {
list1[i].checkeedAll = !checkedAlls;
var list2 = this.data.shoplists[i].ShoppingCartGoods;
for (var a = 0; a < list2.length; a++) {
list2[a].checked = !checkedAlls;
}
}
var count = [];
var delL = [];
var priceAll = 0;
var scoreAll = 0;
for (var b = 0; b < list1.length; b++) {
var datacount = list1[b].ShoppingCartGoods;
for (var c = 0; c < datacount.length; c++) {
if (datacount[c].checked == true) {
count.push(datacount[c]);
delL.push(datacount[c].Id);
priceAll += datacount[c].SalePrice * datacount[c].num;
scoreAll += datacount[c].SaleScore * datacount[c].num;
}
}
}
var price = Number(priceAll).toFixed(2);
var score = Number(scoreAll).toFixed(2);
this.setData({
checkedAll: (!checkedAlls),
shoplists: list1,
priceAll: price,
scoreAll: score,
delList: delL
});
console.log(score, price, delL)
},
delBtn: function() {
let data = this.data.delList;
let str = '';
data.forEach(item => {
str += item + ',';
})
let ids = str.substring(0, str.length - 1);
http.requestLoading('api/services/app/ShopShoppingCartServicee/deleteShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17&ids=' + ids, '', '', 'DELETE').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
console.log(res.data.Result.Data)
wx.showToast({
title: res.data.Result.Message,
icon: 'none'
})
this.getShoppingCart();
this.getShoppingCartNum();
}
})
},
settl() {
let list = this.data.setList;
if (list.length) {
let goodId = list[0].ShopConsumptionOrderDetails[0].GoodType;
console.log(goodId)
let oId = ''
if (goodId == '0') {
oId = 0
} else if (goodId == '1') {
oId = 1
} else {
oId = 2
}
console.log(goodId, list[0])
let goodid = list[0]
list[0].OrderType = oId;
console.log(JSON.stringify(list[0]))
http.requestLoading('api/services/app/ShopConsumptionOrderService/SettlementConsumptionOrder?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', list[0], '', 'POST').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
res.data.Result.Data.OrderType = oId
var obj = JSON.stringify(res.data.Result.Data);
wx.navigateTo({
url: '/pages/shoppingMall/OrderSettlement/OrderSettlement?data=' + encodeURIComponent(obj),
})
}
})
} else {
wx.showToast({
title: '请选中商品',
icon: 'none'
})
}
},
clearAll() {
let list = this.data.cartList;
let delL = [];
list.forEach(item => {
delL.push(item.Id);
})
let str = '';
delL.forEach(item => {
str += item + ',';
})
let ids = str.substring(0, str.length - 1);
http.requestLoading('api/services/app/ShopShoppingCartServicee/deleteShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17&ids=' + ids, '', '', 'DELETE').then(res => {
console.log(res)
if (res.data.Result.Code === 0) {
this.setData({
cartList: [],
clearStae: false
})
}
})
},
go() {
wx.navigateTo({
url: '/pages/shoppingMall/decorateIndex/decorateIndex',
})
},
chose(e) {
let that = this;
let groupIndex = e.currentTarget.dataset.groupindex;
let index = e.currentTarget.dataset.index;
let list2 = that.data.shoplists[groupIndex].ShoppingCartGoods[index].num;
let listI = that.data.shoplists[groupIndex].ShoppingCartGoods[index].Id;
let formid = e.currentTarget.dataset.formid
let id = e.currentTarget.dataset.id
let cache = {
num: list2,
listI: listI
}
let obj = {
GoodId: id,
Lon: '',
Lat: ''
}
http.requestLoading('/api/services/app/ShopOrgGoodsService/GetShopOrgGoodDetail?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', obj, '', 'GET').then(res => {
console.log(res)
if (res.data.Result.Code == 0) {
let GoodFormat = res.data.Result.Data.GoodFormat
let GoodFormatDetail = res.data.Result.Data.GoodFormatDetail
let ary
let info
GoodFormatDetail.forEach((item, index) => {
if (item.Id == formid) {
ary = item.FormatName
info = index
}
})
let arry = ary.trim().split(/\s+/)
console.log(ary.trim().split(/\s+/))
console.log(arry)
for (var i = 0; i < GoodFormat.length; i++) {
for (var a = 0; a < GoodFormat[i].GoodFormatValue.length; a++) {
GoodFormat[i].GoodFormatValue[a].active = false
}
GoodFormat[i].GoodFormatValue.forEach(item => {
console.log(arry[i])
if (item.FormatValue == arry[i]) {
item.active = true
}
})
console.log(GoodFormat[i].GoodFormatValue)
}
console.log(res.data.Result.Data.GoodFormatDetail[info])
that.setData({
shopInfo: res.data.Result.Data,
btnType: '4',
infoObj: res.data.Result.Data.GoodFormatDetail[info],
cache: cache
})
}
})
},
compontpass(e) {
console.log(e, this.data.cache)
let body = {
"Id": this.data.cache.listI,
"GoodFormatId": e.detail.GoodFormatId,
"Score": e.detail.SaleScore,
"Price": e.detail.SalePrice,
"Num": this.data.cache.num
}
http.requestLoading('api/services/app/ShopShoppingCartServicee/UpdateShopShoppingCart?__shop__=08d789d7-132b-8a6f-4b1e-36c954f43b17', body, '', 'PUT').then(res => {
if (res.data.Result.Code == 0) {
wx.showToast({
title: '规格选择成功',
icon: 'none'
})
this.getShoppingCart()
}
})
}
})
四、写在最后的话
- 到此,整个购物车的功能是全部实现(除了移入收藏夹功能),在刚开始做这个功能的时候有些问题也是研究了许久。不过最后都解决了,大家有疑问的话可以私信我,我们一起讨论进步。