微信小程式 購物車布局以及邏輯

wxml：

<!-- 購物車 -->
<view wx:if="{{showPro}}">
  <view style='padding-bottom: 100rpx;'>
    <view wx:for="{{shopData}}" wx:key="shopData" class='pro'>
      <view style='width: 60rpx;' class='xuanzhong' bindtap='danxuan' data-index="{{index}}">
        <image src='/img/img/[email protected]' style='width: 36rpx; height: 36rpx;margin-top: 8rpx' wx:if="{{item.selected? true:false}}"></image>
        <image src='/img/img/[email protected]' style='width: 36rpx; height: 36rpx;margin-top: 8rpx;' wx:if="{{item.selected? false:true}}"></image>
      </view>
      <view class='tutu'>
        <image src='{{item.url}}' class='pro-image'></image>
      </view>
      <view class='wenzi'>
        <view class='goodsname'>
          <text class='te' style='font-weight: 600'>{{item.name}}</text>
          <image src='/img/img/[email protected]' style='width: 36rpx; height: 36rpx;' bindtap='deleteEve'></image>
        </view>
        <view class='zuixia'>
          <view class='price1'>￥{{item.price}}</view>
          <view class='add'>
            <image src='/img/img/btn_sku_[email protected]' class='num' style='margin-right: 4rpx;' wx:if="{{item.num == 1}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
            <image src='/img/img/[email protected]' class='num' style='margin-right: 4rpx;' wx:else data-index="{{index}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
            <text style='display: block; width: 80rpx; height: 60rpx; background: #eee; text-align: center;font-size: 28rpx;line-height: 60rpx;color:#333'>{{item.num}}</text>
            <image src='/img/img/[email protected]' class='num' style='margin-left: 4rpx;' bindtap='add' data-erji="{{proind}}" data-index="{{index}}"></image>
          </view>
        </view>
      </view>
    </view>
    <view style='clear:both'></view>
  </view>
  <!-- 底部 -->
  <view class='bottom'>
    <view>
      <text style='font-size: 28rpx;margin-right: 20rpx;color:#333'>合計</text>
      <text style='font-size: 36rpx; color: #F87039'>￥{{jiesuan}}</text>
    </view>
    <view style='width: 260rpx;height: 98rpx;'>
      <view bindtap='topay' class='topay'>去結算</view>
    </view>
  </view>
</view>
<view wx:else style='width: 100%; background: #fff; height: 100%'>
  <view class='img-s'>
    <image src='/img/img/[email protected]' style='width: 300rpx; height: 300rpx;'></image>
  </view>
  <view style='width: 100%;' class='ttx'>
    <text style='font-size: 26rpx; color: #999;display: block;'>去添加點東西吧~</text>
  </view>
  <view class='button' bindtap='toMall'>
    <button class='btn'>去商城逛逛</button>
  </view>
</view>
           

wxss：

page {
  width: 100%;
  height: 100%;
  background: #efefef;
}

/* 購物車商品 */

.pro {
  width: 100%;
  height: 200rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #fff;
  border-bottom: 1rpx solid #efefef;
}

.xuanzhong {
  height: 200rpx;
  margin-left: 30rpx;
  line-height: 200rpx;
}

.tutu {
  padding-top: 20rpx;
}

.pro-image {
  width: 160rpx;
  height: 160rpx;
}

.wenzi {
  margin-left: 20rpx;
  padding-top: 40rpx;
  width: 460rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-right: 30rpx;
}

.goodsname {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.te {
  font-size: 28rpx;
  color: #333;
}

.num {
  width: 60rpx;
  height: 60rpx;
}

.add {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.zuixia {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 60rpx;
}

.price1 {
  color: #F87039;
  font-size: 28rpx;
}


.bottom {
  width: 100%;
  height: 98rpx;
  border-top: 1rpx solid #efefef;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 30rpx;
  box-sizing: border-box;
}

button::after {
  border: none;
}

.topay {
  background-color: #F87039;
  color: #fff;
  width: 260rpx;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 32rpx;
  text-align: center;
}

.img-s {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 160rpx;
}

.ttx {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 60rpx;
}

.button {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 60rpx;
}

.button .btn {
  background-color: #F87039;
  width: 360rpx;
  height: 80rpx;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}
           

js：

import modals from '../../../class/base/modal.js'
import usual from '../../../class/base/usual.js'

Page({

  data: {
    shopData:[
      {
        name: '商品1',
        url: '/img/img/[email protected]',
        selected: true,
        num: 1,
        price: '484'
      },
      {
        name: '商品2',
        url: '/img/img/[email protected]',
        selected: true,
        num: 1,
        price: '404'
      },
      {
        name: '商品3',
        url: '/img/img/[email protected]',
        selected: true,
        num: 1,
        price: '10.56'
      },
      {
        name: '商品4',
        url: '/img/img/[email protected]',
        selected: true,
        num: 1,
        price: '100'
      },
      {
        name: '商品5',
        url: '/img/img/[email protected]',
        selected: true,
        num: 1,
        price: '0.5'
      }
    ],
    showPro:true,
    jiesuan: 0.00
  },
  //加減操作
  add(e) {
    var that = this
    let index = e.currentTarget.dataset.index
    console.log(index)
    let shopData = that.data.shopData
    shopData[index].num++
    usual.sum(shopData)
    let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
    that.setData({
      jiesuan: jiesuan,
      shopData: shopData
    })
  },
  // 加減
  subtraction(e) {
    var that = this
    let index = e.currentTarget.dataset.index
    let shopData = that.data.shopData
    console.log(index)
    if (shopData[index].num > 1) {
      shopData[index].num--
    }else {
      modals.hideLoading('不能再少了')
    }
    usual.sum(shopData)
    let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
    that.setData({
      jiesuan: jiesuan,
      shopData: shopData
    })
  },
  //單選
  danxuan(e) {
    var that = this
    let index = e.currentTarget.dataset.index
    console.log(index)
    let shopData = that.data.shopData
    shopData[index].selected = !shopData[index].selected
    usual.sum(shopData)
    let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
    that.setData({
      jiesuan: jiesuan,
      shopData: shopData
    })
  },
  //去結算
  topay() {
    let url = "../pay/pay?jsonStr="
    let str = JSON.stringify(this.data.shopData)
    modals.navigate(url,str)
  },
  onLoad: function (options) {
    let that = this
    let shopData = that.data.shopData
    usual.sum(shopData)
    let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
    that.setData({
      jiesuan: jiesuan
    })
  }
})
           

調用的方法：

const app = getApp()
export default class usual {
  static sum(shopData) {
    //計算總價
    new Promise((res, rej) => {
      var that = this
      let jiesuan = 0
      for (let i = 0; i < shopData.length; i++) {
        if (shopData[i].selected) {
          jiesuan += shopData[i].price * 1000 * shopData[i].num / 1000
        }
      }
      console.log(jiesuan)
      wx.setStorageSync('jiesuan', jiesuan)
    })
  }
  static selectAll(shopData) {
    return new Promise((res, rej) => {
      //一進頁面即全為選中狀态
      var that = this
      for (let i = 0; i < shopData.length; i++) {
        let datashop = shopData[i].pro
        for (let i in datashop) {
          datashop[i].selected = false
        }
      }
    })
  }
}