实现步骤
文章目录
1. 静态页面准备
页面使用了 element-ui 的Icon 图标、el-checkbox、el-input-number、el-popover、el-button,所有在main.js需要引入element-ui。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
页面代码如下:
<template>
<div class="shoppingCart">
<!-- 购物车头部 -->
<div class="cart-header">
<div class="cart-header-content">
<p>
<i class="el-icon-shopping-cart-full" style="color:#ff6700; font-weight: 600;">
</i>
我的购物车
</p>
<span>温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</span>
</div>
</div>
<!-- 购物车头部END -->
<!-- 购物车主要内容区 -->
<div class="content" v-if="getShoppingCart.length>0">
<ul>
<!-- 购物车表头 -->
<li class="header">
<div class="pro-check">
<el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>
<div class="pro-img"></div>
<div class="pro-name">商品名称</div>
<div class="pro-price">单价</div>
<div class="pro-num">数量</div>
<div class="pro-total">小计</div>
<div class="pro-action">操作</div>
</li>
<!-- 购物车表头END -->
<!-- 购物车列表 -->
<li class="product-list" v-for="(item,index) in getShoppingCart" :key="item.id">
<div class="pro-check">
<el-checkbox :value="item.check" @change="checkChange($event,index)">
</el-checkbox>
</div>
<div class="pro-img">
<router-link :to="{
path: '/goods/details',
query: {
productID:item.productID}
}">
<img :src="$target + item.productImg" />
</router-link>
</div>
<div class="pro-name">
<router-link
:to="{ path: '/goods/details', query: {productID:item.productID} }"
>{
{
item.productName}}</router-link>
</div>
<div class="pro-price">{
{
item.price}}元</div>
<div class="pro-num">
<el-input-number
size="small"
:value="item.num"
@change="handleChange($event,index,item.productID)"
:min="1"
:max="item.maxNum"
></el-input-number>
</div>
<div class="pro-total pro-total-in">{
{
item.price*item.num}}元</div>
<div class="pro-action">
<el-popover placement="right">
<p>确定删除吗?</p>
<div style="text-align: right; margin: 10px 0 0">
<el-button
type="primary"
size="mini"
@click="deleteItem($event,item.id,item.productID)"
>确定</el-button>
</div>
<i class="el-icon-error" slot="reference" style="font-size: 18px;"></i>
</el-popover>
</div>
</li>
<!-- 购物车列表END -->
</ul>
<div style="height:20px;background-color: #f5f5f5"></div>
<!-- 购物车底部导航条 -->
<div class="cart-bar">
<div class="cart-bar-left">
<span>
<router-link to="/good