微信小程序商城购物车页 二维数组怎么做

微信小程序购物车 二维数组 不同商家不同商品版本

需求：电商平台内有众多不同商家，购物车页需要购买的产品以商家的类目作为分类，并满足基本的购物车需求:
http://www.kundonghui.com/index.php?controller=simple&action=cart
根据客户需要将此商城做成小程序

wxml

代码片.

<block wx:for='{
  {carts}}'>
<view class="cartList"  >
  <view class="cartList_Shop">
    <view class="cartList_Shop_top">
      <text>{
  {item.shopName}}</text>
    </view>
    
    <block wx:for='{
  {item.shopProlist}}' wx:for-item="ii">
    <view class="Shop_proList">
      <view class="Shop_proList_Select">
        <icon wx:if="{
  {ii.proSelecter}}" type="success" color="#0a4de6" data-shopid="{
  {ii.shopId}}" data-proid="{
  {ii.proId}}" class="cart-pro-select" bindtap="selectList" />
        <icon wx:else type="circle" class="cart-pro-select" data-shopid="{
  {ii.shopId}}" data-proid="{
  {ii.proId}}" bindtap="selectList" />
      </view>
      <view class="Shop_proList_Img">
        <image mode="scaleToFill" src="{
  {ii.imgSrc}}"></image>
      </view>
      <view class="Shop_proList_textList">
        <view class="Shop_proList_textListTop"> 
          <text class="proList_textListTopName">{
  {ii.proName}}</text>
          <text class="right">{
  {ii.proPrice}}元</text>
        </view>
        <view class="Shop_proList_textListCenter"> 
          <text class="left">单品重量：{
  {ii.proWeight}}克</text>
          <text class="right">￥{
  {ii.prototal}}</text>
        </view>
        <view class="Shop_proList_textListBottom"> 
          <view class="bottomLeft">
            <view class="border_Left" bindtap="minusCount" data-shopid="{
  {ii.shopId}}" data-proid="{
  {ii.proId}}">-</view>
            <view class="border_Cen">{
  {ii.proNum}}</view>
            <view class="border_Left" bindtap="addCount" data-shopid="{
  {ii.shopId}}" data-proid="{
  {ii.proId}}">+</view>
          </view>
          <view class="bottomRight">
            <image class="deleteIcon" src="https://www.kundonghui.com/views/mobile/img/rubish.png" bindtap='deleteList' data-shopid="{
  {ii.shopId}}" data-proid="{
  {ii.proId}}"></image>
          </view>
        </view>
      </view>
    </view>
    </block>

  </view>
</view>

</block>


<view class="cart-footer">
  <view class='cartIcon-grow'>
    <icon wx:if="{
  {selectAllStatus}}" type="success_circle" color="#0a4de6" class="total-select" bindtap="selectAll" />
    <icon wx:else type="circle" color="#0a4de6" class="total-select" bindtap="selectAll" />
    <text>全选</text>
  </view>
  <text class="cart-toatl-price" bindtap="getTotalPrice">合计：￥{
  {totalPrice}}</text>
  <button class='submit-cart' bindtap='submitCart'>结算</button>
</view>
<!-- <view wx:else>
    <view class="cart-no-data">购物车是空的哦~</view>
</view> -->

js

代码片.

Page({
   

  data: {
   
    carts: [], // 购物车列表
    hasList: false, // 列表是否有数据
    totalPrice: 0, // 总价，初始为0
    selectAllStatus: true // 全选状态，默认全选

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   
    this.setData({
   
      hasList: true, // 既然有数据了，那设为true吧
      carts: [
        {
   
          shopName: '鲲东自营',
          shopProlist: [
            {
   
              shopId:0,
              proId: 0,
              proName: '一瓶啤酒',
              proPrice: 1,
              prototal: 15,
              proNum: 1