vue+axios按店铺排列的购物车功能

vue实现按店铺排列的购物车及相关功能

新手小白，日常记录，第一篇：购物车功能记录，此购物车包含了按店铺排列商品，数量、金额统计，单选商品，全选商品，店铺选择商品，多选删除，移入收藏夹，店铺优惠券展示及领取。

效果图：

页面代码：

前端vue代码：因为一开始想的很简单，商品遍历就直接用的el-table组件

<div class="shangpin">
                 <div class="shop" v-for="(val,k) in goodsList" :key="k">
               <input type="checkbox" name="selected"  @click="shopcheck(val.shoplist,k)">
                <span>店铺：{
   {
   val.shopname}}</span>

             <el-dropdown @command="changeCommand" trigger="click" placement="bottom-start" @click.native="loadData(k)">
                   <span class="el-dropdown-link" style="border:2px dashed red;border-radius:5px;margin-left:55px;color:red">
                    优惠券
                  <i class="el-icon-arrow-down el-icon--right" style="border-right:2px dashed red;border-radius:5px;color:red"></i>
                   </span>
            <el-dropdown-menu   slot="dropdown" class="menul">
                  <div  style="float:left;width:100%;margin-bottom:5px;" v-for="(item,id) in projectOption" :key="id" :command="item.id">
                   <span> {
   {
   item.name}}  {
   {
   item.desc}}减￥{
   {
   item.discount}}
                   </span>
                  <div style="float:right"  @click="coupon(id,item)">
                    <span v-if="acquirerArr.indexOf(item)==-1" style="border:1px solid gray;width:30px;padding:3px;" >领取</span>
                    <span v-if="acquirerArr.indexOf(item)>-1" style="font-color:lightgray;background-color:lightgray">领取成功</span>
                  </div>
                  </div>
              </el-dropdown-menu>
            </el-dropdown>

               <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="val.shoplist"  style="width: 100%; overflow:visible;" >
               <el-table-column  type="selection"  width="100" ></el-table-column>
                <el-table-column align="center"  label="图片">
                <template slot-scope="scope">
               <img :src="scope.row.picUrl" width="50" height="50px;" alt=''/>
               </template>
             </el-table-column>

               <el-table-column  prop="goodsName"  label="标题"  width="450"> </el-table-column>
               <el-table-column label="数量" width="200" style="align:center">
                <template slot-scope="scope" >
                    <el-input-number class="number" size="mini" :min="1"  v-model="scope.row.number" @change="handleChange"></el-input-number>
                </template>
            </el-table-column>
             <el-table-column prop="price" label="价格" > </el-table-column>
               <el-table-column label="金额">
                 <template slot-scope="scope" >
                    {
   {
   scope.row.number*scope.row.price}}
                </template>
               </el-table-column>
             </el-table>
          </div>
       </div>

因为后端查询返回了的只是一条条购物车内商品数据，并没有相关的对按店铺分类的处理所以就先得进行下数据的处理：
data需要的数据的结构

数据处理

             //购物车列表
        getCartDetail: function(){
   
          console.log(sessionStorage.getItem('token'),"tokentoekn")
          if(sessionStorage.getItem('token') == null|| sessionStorage.getItem('token') == undefined){
   
         this.$router.push({
   path:'/Login'});