Vue-elementUI实现PC端商城购物车计算

Vue-elementUI实现PC端商城购物车计算，最重要的就是【computed】里面的计算，用来算出勾选的商品的总价

---

---

前言

商城购物车价格计算也算是商城里面比较重要的一部分了，主要就是勾选的哪些商品，商品的数量加减计算

---

提示：以下是本篇文章正文内容

一、实现效果

具体就是勾选之后，右下角有勾选的商品总价

二、使用步骤

1.数据结构部分

这是后台返回的数据结构

2.HTML部分

<el-table class=""
              ref="multipleTable" border stripe
              :data="cartList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="cartSelectionChange">
      <el-table-column
        align="center"
        label="全选"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="图片" width="80" align="center">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            trigger="hover"
          >
            <el-image
              slot="reference"
              style="width: 50px; height: 50px"
              :src="scope.row.slide_list.img"
              fit="cover"
            />
            <el-image
              style="width: 220px; height: 220px"
              :src="scope.row.slide_list.img"
              fit="cover"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="title"/>
      <el-table-column label="单价" prop="price" width="90" header-align="center" align="right">
        <template slot-scope="scope">
          <div>￥{{ scope.row.price }}</div>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="sku" width="130"/>
      <el-table-column label="数量" prop="title" width="100">
        <template slot-scope="scope">
          <div class="amount-warp">
            <input class="border" @input="cartGoodsAmountChange($event,scope.row)" v-model="scope.row.amount"/>
            <div class="quick-button">
              <i class="border el-icon-arrow-up" @click="addAmountCount(scope.row)"></i>
              <i class="border el-icon-arrow-down" @click="subtractAmountCount(scope.row)"></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="90" header-align="center" align="right">
        <template slot-scope="scope">
          <div>￥{{ (scope.row.price * scope.row.amount).toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteCartGoods(scope.row)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="cart-option">
      <div class="delete" @click="batchDeleteCartGoods">删除选中的商品</div>
      <div class="other-info">
        <div class="common">已选择<span class="total-num">{{selectGoodsList.length}}</span>件商品</div>
        <div class="common">总价(不含运费)：<span class="total-price">￥{{cartTotalPrice}}</span></div>
        <el-button type="danger">去支付</el-button>
      </div>
    </div>

3.部分CSS样式

这里的样式用了less，如果复制到项目里面报错的话，表格里面文本框，还有底部的那些样式建议自己来写

  .amount-warp {
    display: flex;

    input {
      width: 31px;
      height: 31px;
      line-height: 30px;
      padding-left: 10px;
      outline: none;
    }

    .quick-button {
      i {
        display: block;
        width: 30px;
        height: 16px;
        border-left: none;
        text-align: center;
        line-height: 16px;
        cursor: pointer;
      }

      .el-icon-arrow-up {
        border-bottom: none;
      }

      .el-icon-arrow-down {
      }
    }

    .quick-button i:hover {
      color: #EF001C;
    }
  }

  .cart-option {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #999999;

    .delete {
      margin-left: 20px;
      cursor: pointer;
    }

    .common {
      margin-right: 30px;

      .total-num {
        margin: 0 5px;
      }

      .total-price {
        font-size: 24px;
        font-weight: 700;
        vertical-align: bottom;
      }
    }
  }

4.JS中的data

  data () {
    return {
      cartList: [],
      selectGoodsList: [],
    }
  },

5.JS中的method

// 获取购物车列表（这个要在created里面调用）
async getCartList () {
  const { data: res } = await this.$http.get(getCartListUrl)
  if (res.code !== 200) return this.$message.error(res.msg)
  this.cartList = res.data.list
  this.cartList.forEach(item => {
  	// 因为后台接口返回的商品SKU是对象的格式，我们取它的值，然后重新赋值使用
    if (item.skuJson) {
      item.sku = []
      for (let i in item.skuJson) {
        item.sku.push(item.skuJson[i])
      }
      item.sku = item.sku.join('，')
    }
  })
},
// 购物车选择事件（elemenUI表格勾选保存的值）
cartSelectionChange (val) {
  this.selectGoodsList = val
},
// 商品数量文本框改变事件
cartGoodsAmountChange (e, orderInfo) {
  if (e.target.value <= 0) {
    orderInfo.amount = 1
    return this.$message.error('商品数量不能小于0')
  }
},
// 商品数量加1
addAmountCount (orderInfo) {
  ++orderInfo.amount
},
// 商品数量减1
subtractAmountCount (orderInfo) {
  if (orderInfo.amount <= 1) {
    return this.$message.error('商品数量不能小于0')
  }
  --orderInfo.amount
},
// 单个删除购物车商品
deleteCartGoods (orderInfo) {
  this.$confirm('此操作将移除购物车的商品, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 这里调用接口删除的方法
  }).catch((e) => {
    console.log(e)
    this.$message.info('已取消删除')
  })
},
// 批量删除购物车商品
batchDeleteCartGoods () {
  if (this.selectGoodsList.length > 0) {
  } else {
    return this.$message.error('请勾选要移除购物车的商品')
  }
  this.$confirm('此操作将移除勾选的购物车的商品, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 这里调用接口删除的方法
  }).catch((e) => {
    console.log(e)
    this.$message.info('已取消删除')
  })
},

6.JS中的computed（计算最终勾选的价格）

cartTotalPrice () {
  let sum = 0
  this.selectGoodsList.forEach(item => {
    sum += item.price * item.amount
  })
  // 因为要保留小数点后面两位，所以要toFixed(2)
  return sum.toFixed(2)
}

---

总结

以上就是这篇文章要讲的内容，Vue-elementUI实现PC端商城购物车计算，主要就是用到了计算属性【computed】。多对一的计算，要是遇到什么问题，欢迎下方评论留言