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

最新推荐文章于 2025-06-08 09:00:12 发布

原创

最新推荐文章于 2025-06-08 09:00:12 发布 · 置顶 · 847 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端vue

这篇博客介绍了如何使用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'});
      }
          var userId = sessionStorage.getItem('userId')
          // if(userId == null ||userId==undefined){
   
   
          //    this.$Message.error('用户ID不能为空')
          //