带你快速实现购物车功能

最新推荐文章于 2022-06-18 14:52:18 发布
最新推荐文章于 2022-06-18 14:52:18 发布
阅读量2.7k 收藏 12
点赞数 7
分类专栏： 项目开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40665861/article/details/105343612
版权

一、熟悉购物车

  • 所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。
  • UI图
    在这里插入图片描述在这里插入图片描述在这里插入图片描述

二、具体购物车功能

  • 在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还有商品的管理和失效商品的处理。

三、具体代码

  • html代码
<!--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>
  • css代码
/* pages/shoppingMall/ShoppingCart/ShoppingCart.wxss */

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 {
  /* height: 882rpx; */
}

::-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 {
  /* position: absolute;
  top: 43%; */
  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;
  /* position: relative; */
}

.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;
  /* position: absolute;
  top: 0; */
  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;
  /* position: absolute;
  top: 45%; */
  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;
  /* line-height: 48rpx; */
}

.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;
}

/* end */

.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;
  /* box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(3, 0, 6, 0.1); */
}

.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 {
  /* position: absolute;
  top: 40%; */
}

.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 {
  /* width: 197rpx; */
  height: 22rpx;
  font-size: 22rpx;
  font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
  /* font-weight: 400; */
  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 {
  /* width: 58rpx; */
  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 {
  /* transform: translateX(-42px); */
  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;
}

/* new cart */

.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;
}
  • JS逻辑代码
// pages/shoppingMall/ShoppingCart/ShoppingCart.js
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,
    // scroll-view的高度
    scrollViewHeight: 0,
    shopData: false,//购物车状态
    saveHidden: true,//管理商品
    number: 1,//总计
    isCheck: false,//是否选中
    delBtnWidth: 180, //删除按钮宽度单位（rpx）
    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: ''
    } //缓存商品ID，数量
  },
  onLogin: app.userLogin,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    template.tabbar("tabBar", 2, this);
    let that = this;
    // 先取出页面高度 windowHeight
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowHeight: res.windowHeight
        });
        console.log(res.windowHeight)
      }
    });
    // 然后就是做个减法
    let scrollViewHeight = this.data.windowHeight - 52 - 105;
    // 算出来之后存到data对象里面
    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) {
        // console.log(res.data.Result.Data)
        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;
          // console.log(item['ShoppingCartGoods'])
          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);
            }
            // console.log(item.ComboOrCouponInfo)
          })
        })
        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; // 拿到店铺的index
    var index = e.currentTarget.dataset.index; // 拿到当前商品 的index
    var list = that.data.shoplists[groupIndex].ShoppingCartGoods; //获取到了 当前店铺元素的 下的所有商品
    var list2 = that.data.shoplists[groupIndex].ShoppingCartGoods[index].num; //获取到了 当前店铺元素的 下的所有商品的某一个index 的checked 值
    var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].num'; //这个可以拿到 data 中 index的店铺下的所有商品  数据
    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 => {
        // console.log(res)
        // if (res.data.Result.Code === 0) {
        //   wx.showToast({
        //     title: res.data.Result.Message,
        //     icon: 'none'
        //   })
        // }
      })
      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; // 拿到店铺的index
    var index = e.currentTarget.dataset.index; // 拿到当前商品 的index
    var list = this.data.shoplists[groupIndex].ShoppingCartGoods; //获取到了 当前店铺元素的 下的所有商品
    var list2 = this.data.shoplists[groupIndex].ShoppingCartGoods[index].num; //获取到了 当前店铺元素的 下的所有商品的某一个index 的checked 值
    var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].num'; //这个可以拿到 data 中 index的店铺下的所有商品  数据
    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) {
    // console.log(event.touchs[0].clientX)
    startX = event.touches[0].clientX
  },
  touchMove(event) {
    // move是连续触发的动作
    endX = event.touches[0].clientX
  },
  touchEnd(event) {
    // 获取元素宽度（小程序不能改变元素的属性或者值，只能获取）
    var mywidth = 0;
    const query = wx.createSelectorQuery()
    query.select('.del').boundingClientRect()
    query.exec((res) => {
      // console.log(res)
      mywidth = res[0].width
      //1。获取索引值
      // target 
      var index = event.currentTarget.dataset.index;
      var list = this.data.cartList
      // 计算出来偏移量
      offsetX = startX - endX;
      // 阈值
      if (offsetX > 50) {
        // 让其他所有的元素都右滑
        this.rightAnimation();
        wx.nextTick(() => {
          // 就让整个item进行左移动
          // 创建动画进行移动item
          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
        })
      }
    })
  },
  // 所有的item进行右滑动
  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; //获取店铺下的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; //将当前店铺元素下的所有商品 的checked都为 false  或者是  true
    };
    var dataIndex = 'shoplists[' + index + '].ShoppingCartGoods'; //这个可以拿到 data 中 index的店铺下的所有商品  数据
    var dataStatus = 'shoplists[' + index + '].checkeedAll'; //当前店铺元素下checkeedAll的属性 
    this.setData({
      [dataIndex]: list,
      [dataStatus]: !status,
    });
    //只有所有单选的 都选中了  当前单选的这块的的父级就会 选中 ，将选中的 父级 添加在一个数组当中 如果过 它本身的数据的length == 它被选中的length 就让  三级的全选 选中
    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({
      // count: (count.length),
      priceAll: price,
      scoreAll: score,
      delList: delL,
      setList: setL
    });
    console.log(price, score, obj)
  },
  //点击商品上的 checkbox
  Checks1: function(e) {
    var groupIndex = e.currentTarget.dataset.groupindex; // 拿到店铺的index
    var index = e.currentTarget.dataset.index; // 拿到当前商品 的index
    var list = this.data.shoplists[groupIndex].ShoppingCartGoods; //获取到了 当前店铺元素的 下的所有商品
    var list2 = this.data.shoplists[groupIndex].ShoppingCartGoods[index].checked; //获取到了 当前店铺元素的 下的所有商品的某一个index 的checked 值
    var dataIndexchecked = 'shoplists[' + groupIndex + '].ShoppingCartGoods[' + index + '].checked'; //这个可以拿到 data 中 index的店铺下的所有商品  数据
    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'; //当前店铺元素下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,
      });
    }
    //只有所有单选的 都选中了  当前单选的这块的的父级就会 选中 ，将选中的 父级 添加在一个数组当中 如果过 它本身的数据的length == 它被选中的length 就让  三级的全选 选中
    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({
      // count: (count.length),
      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,
      // count: (count.length),
      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; // 拿到店铺的index
    let index = e.currentTarget.dataset.index; // 拿到当前商品 的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()
      }
    })
  }
})

四、写在最后的话

  • 到此，整个购物车的功能是全部实现（除了移入收藏夹功能），在刚开始做这个功能的时候有些问题也是研究了许久。不过最后都解决了，大家有疑问的话可以私信我，我们一起讨论进步。
寂寞花如雪
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
购物车的实现原理
weixin_34019929的博客
10-20 199
       购物车相当于现实中超市的购物车，不同的是一个是实体车，一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转，以选购自己喜爱的商品，点击购买时，该商品就自动保存到你的购物车中，重复选购后，最后将选中的所有商品放在购物车中统一到付款台结账，这也是尽量让客户体验到现实生活中购物的感觉。服务器通过追踪每个用户的行动，以保证在结账时每件商品都物有其主。      购物车的功能包括以下几项...
简易购物车实现
热门推荐
dream_s_a的博客
04-12 1万+
将购物车实现分成三部分分别实现： 第一部分：简单购物车功能实现； 第二部分：将商品序号改为勾选框； 第三部分：添加商店对商品进行分类。
购物车如何实现
qq_45418677的博客
10-27 5260
购物车的功能包括： 把商品添加到购物车 删除购物车中的商品 修改购物车中某一商品的订购数量 清空购物车 显示购物车中商品清单及数量、价格 如何实现 前端功能：对用户的操作实时响应，在未登录的情况下也能添加到购物车，登录之后数据跟已有的购物车数据进行合并展示。 后端功能：数据存储、数据合并（登录后跟前端存储的cookie数据进行合并）、统计商品总价、价格优惠计算、商品下架处理、商品降价提醒..... 查询购物车消息：点击购物车就将商品的 ID 等相关的数据发送给后端，同时更新购物车中的 DOM 显示已经添
购物车功能实现
u012994320的博客
03-24 7519
购物车功能的实现： 一、创建购物车类： 框架： 1. 购物车可以有很多不同种类的商品，可以将购物车传入泛型； 2. 定义一个Map类型 Map carMap; public Car(){ //创建的hashMap应为有序的，键不重复值可重复的部分,所以使用LinkedHashMap carMap=new LinkedHashMap(); } //获取购物车 public Ma
angular和BootStrap3实现购物车功能
12-10
一、页面搭建 ...采用BootStrap3来快速创建一个购物车表单样式。 主要功能： A：列表数据所示 B：增加删除端口 C：清空购物车 D：商品数量的增减 E：动态计算商品价格以及总价 <!DOCTYPE html> <...
基于CI(CodeIgniter)框架实现购物车功能的方法
10-18
主要介绍了基于CI(CodeIgniter)框架实现购物车功能的方法,结合实例形式分析了CodeIgniter框架购物车功能类的定义及数据库建立相关sql命令,需要的朋友可以参考下
Android购物车项目快速开发
01-05
购物车项目，业务需要实现了一个购物车的项目，简单的了解下实现逻辑：数据计算等是在Adapter中计算出来的，通过在Adapter中计算出来的数据就可以回调到Activity中进行订单操作等功能业务逻辑，每一个店铺产生的数据...
jq实现购物车的思路和方法（看一遍以后都会懂）
06-17
主要实现参照淘宝购物车功能，有开发思路以及源码，帮助新手同学快速掌握购物车或者jq语法
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
Xamarin-Forms-Shopping-Cart：Xamarin通过替换工具栏项来形成购物车
02-06
Xamarin-表格-购物车 Xamarin通过替换工具栏项目形成购物车。 建立状态 平台 建造状态 Android版 iOS版 描述 此代码说明了如何使用xamarin表单为工具栏项添加徽章。 在这里，它遵循MVVM模式。 持久性存储是通过使用完成的。 nuget。 这里默认的导航栏是隐藏的，并且使用了自定义导航栏，有关更多信息，请参考。 Xamarin表格消息传递中心用于呈现和隐藏​​导航抽屉。 用于图像兑现和图像加载占位符。 此代码还说明了简单的聊天用户界面。 这里的购物车页面使用持久性存储，第二页显示从Web服务获取数据并将其显示在列表视图中，第三页使用本地SQLite数据库插入
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
案例补充、购物车基本功能的实现
飞翔的企鹅的博客
06-18 595
商品的基本属性：价格、名称、购物车编号、购买数量 二、定义购物车对象 由于购物车中存放的是商品类，并且不清楚购物车中到底有多少商品，因此我们需要创建一个商品类的数组来存放商品对象，将商品对象进行封装然后存储在购物车数组(商品类数组)中。当前知识有限，只能定义一个数组存储并且规定商品数不超过100。 三、搭建用户架构，询问用户操作 因为用户可能进行的不止一种操作，所以系统需要不断询问用户的操作，所以需要将操作放在死循环中进行。按照用户输入的指令进行相应操作。 依次询问用户要添加商品的属性信
实现购物车功能
www_chinese_com的博客
03-31 3610
本篇博客所完成的购物车应用重点主要落在页面之间的转换和数据的传递，对于前端界面设计并不多加分析。属于初学 Web 编程阶段。 该购物车应用主要有四个功能：查看商品列表、查看商品详情、将商品加入购物车、显示购物车信息、将商品从购物车中移除。 目录 准备工作 设置映射即每个功能对应方法 查看商品列表 查看商品详情 将商品加入购物车 显示购物车信息 将商品从购物车中移除 准备工...
小程序的开发之使用SVG
qq_40665861的博客
01-29 7708
昨天突然提出要在小程序中使用SVG，因为我们的小程序项目是有主题色的。不同的主题色时有些图片一直是固定的，显的有些格格不入，所以打算使用SVG来实现根据主题色的颜色进行变化。 什么是SVG SVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。 SVG有哪些优势 与其他图像格式相比，使用SVG的优势在于： SV
微信小程序中实现车牌输入功能
qq_40665861的博客
10-24 6398
一、成品展示与介绍 在点击输入框的时候会弹出车牌输入键盘 二、相关思路解析 首先车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码。其中的八位数的车牌号码为新能源车的车牌号码。 再次是对于输入键盘的设计。这里设计了两个键盘一个是有31位汉字组成的，第二个是数字加英文字母。 最后是对交互的设计，在本次的设计中是从第一位开始输入。从最后一位进行删除，这样做的好处是
小程序中的商品分类
qq_40665861的博客
12-03 3549
一、左右布局分类效果图 二、实现逻辑 页面布局 <!--pages/member/brand/brand.wxml--> <view class="box"> <view class="b_top"> <view class="b_Search"> <text class="iconfont iconsousuo...
springboot购物车功能怎么实现
最新发布
04-27
在Spring Boot中实现购物车功能，可以使用Session来存储用户的购物车信息。具体步骤如下： 1. 创建一个CartItem类，用于存储购物车中的商品信息，包括商品ID、商品名称、商品数量和商品单价等属性。 2. 创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值