多商铺，多商品，多规格购物车怎么做，仿淘宝,⽤uniapp 做，⾃⼰修改适合vue 今⽇做⼀个商城类的项⽬，遇到了多商铺展⽰和多商品展⽰，⼀个这样的功能。
看起来⾮常简单的⼀个功能，为了图个⽅便的来，下⾯上代码：<template> <view>  <view class="bianji" @tap='updateCar(updateFonts)'>  <view class="dianji">{{updateFonts }}</view>  </view>  <view class="itemMs" v-if="isHaveData" v-for="(s,s_idx) in dataList" :key="s_idx">  <view class="imMs im-store">    <view class="im-chose-icon" @click="choseStore(s)">    <image v-if="s.storeChose" src="../../static/icon/icon_xz_zylm.png" mode=""></image>    <image v-else src="../../static/icon/icon_wxz_zylm.png" mode=""></image>    </view>        <view class="is-store-name">    {{s.storeName }}    </view>  </view>  <view class="imMs im-goods" v-for="(g,g_idx) ds" :key="g_idx">    <view class="im-chose-icon" @click="choseGoods(s,g)">    <image v-if="g.goodsChose" src="../../static/icon/icon_xz_zylm.png" mode=""></image>    <image v-else src="../../static/icon/icon_wxz_zylm.png" mode=""></image>    </view>    <view class="ig-goods-image">    <image :src="g.image" mode="aspectFill"></image>    </view>    <view class="ig-goods-info">    <view class="igi-name hiddenFonts">      {{g.name }}    </view>
<view class="igi-price">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20text align center
21
22
23
24
25
26
<view class="igi-price">      <view class="ip-price">      ￥{{g.price }}      </view>            <view class="ip-nums">      <view class="onm-item" @click="changeCount(g,-1)">        -      </view>      <view class="onm-item onm-nums">        {{g.nums }}      </view>      <view class="onm-item" @click="changeCount(g,1)">        +      </view>      </view>    </view>    </view>  </view>  </view>  <view class="bomMsSpace"></view>  <view class="bomMs" v-if="isHaveData">  <view class="bm-main">    <view class="bm-left">    <view class="bl-icon" @click="checkAll()">      <image v-if="isCheckAll" src="/static/icon/icon_xz_zylm.png" mode=""></image>      <image v-else src="/static/icon/icon_wxz_zylm.png" mode=""></image>    </view>    <view class="bl-name">      全选    </view>    </view>    <view class="bm-middle" v-if="handleFonts === '结算'">    合计：<text class="bm-price">￥{{allPrice }}</text>    </view>    <view class="bm-right" @click="settlement(handleFonts)">    {{handleFonts }}    </view>  </view>  </view> </view></template><script> var _self ; export default  {  data() {  return  {    dataList: [    {      storeName: '王
⼩⼆旗舰店',      storeChose: false,      checkedCount: 0,      goods: [      {        image : '/static/images/img_14_sy.png',        name : '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',        price : 128,        nums : 1,        goodsChose : false        },      {        image : '/static/images/img_14_sy.png',        name : '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',        price : 128,        nums : 1,        goodsChose : false        }      ]    },    {
storeName: '王⼩⼆旗舰店',
262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
storeName: '王⼩⼆旗舰店',      storeChose: false,      checkedCount: 0,      goods: [      {        image : '/static/images/img_14_sy.png',        name : '新西兰皇家红苹果6个约135g/个90元包邮到家送货上门',        price : 128,        nums : 1,        goodsChose : false        }      ]    }    ],    url :'',    // 全选    isCheckAll : false,    // 店铺数量    allShops : 0,    // 总价格    allPrice : 0,    //被选中的产品数量    allCount : 0,    updateFonts  : '编辑',    handleFonts  : '结算',    isHaveData  : true    }  },  onLoad() {  _self = this ;  },  watch: {  dataList: {    deep: true,    handler(val, oldval) {    _self._totalPrice ()    _self._totalCount ()    }  }  },  methods: {  // 编辑  updateCar(fonts){    if(fonts === '编辑'){    _self.updateFonts = '完成'    _self.handleFonts = '删除'    }else {    _self.updateFonts = '编辑'    _self.handleFonts = '结算'    }  },  //
选择店铺  choseStore(list) {    console.log (list )    !list.storeChose ? _self._shopTrue (list ) : _self._shopFalse (list )  },  _shopTrue(list) {    console.ds)    ds.forEach((item) => {    dsChose === false ? _self._checkTrue (list, item ) : ''    });  },  _shopFalse(list) {    console.ds)    ds.forEach((item) => {    dsChose === true ? _self._checkFalse (list, item ) : ''
919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
m.nums --    }    }  },  // 总价格  _totalPrice() {    _self.allPrice = 0    _self.dataList.forEach((list) => {    ds.forEach((item) => {      if (dsChose) {      _self.allPrice += Number (item.price ) * Number (item.nums );      }    });    });  },  // 数量  _totalCount() {    _self.allCount = 0    _self.dataList.forEach((list) => {    _self.allCount += list.checkedCount    });  }  } }</script><style lang="scss"> .bianji {  width : 100%;
height : 60rpx ;156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
height : 60rpx ;  background-color : #FFFFFF ;  margin-bottom : 30rpx ;  .dianji {  width : 100rpx ;  height : 100%;  font-size : 30rpx ;  text-align : center ;  line-height : 60rpx ;  float : right ;    } } .htaMs  {  width : 100%;  height : 120rpx ;  background-color : #FFFFFF ;  position : fixed ;  top : 0;  z-index : 99;  // .hm-space  {  //  height : 30rpx ;  // }  .hm-all  {  display : flex ;  align-items : center ;  .ha-left  {    width : 10%;    height : 90rpx ;    text-align : center ;    image  {    width : 20rpx ;    height : 36rpx ;    margin-top : 30rpx ;    }  }  .ha-name  {    width : 80%;    height : 90rpx ;    text-align : center ;    font-size : 30rpx ;    color : #333333;    line-height : 100rpx ;  }  .ha-right  {    float : right ;    width : 10%;    height : 90rpx ;    line-height : 100rpx ;    font-size : 26rpx ;    color : #333333;  }  } } .headSpace  {  height : 120rpx ;  margin-bottom : 20rpx ; }
.guige {221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。