购物车

购物车具备两个功能：

  1. 保存用户需要的数据
  2. 清空

所以，我们使用vuex来实现购物车

1. 添加购物车 路由

向 文件 src/router/index.js 中增加内容： 

  1. import Cart from '@/components/Cart'
  3. Vue.use(Router)
  5. export default new Router({
  6.   routes: [
  7.     { path: '/cart',
  8.       name: 'Cart',
  9.       component: Cart
  10.     },
  11.   ]
  12. })

2. 添加查看购物车的vue页面

新增 src/components/Car.vue 文件，内容如下： 

  1. <template>
  2.   <div class="background">
  3.     <div id="my_cart">
  4.       <CartHeaderView></CartHeaderView>
  5.       <CartMainView></CartMainView>
  6.       <NavBottomView :is_cart="is_cart"></NavBottomView>
  7.     </div>
  8.   </div>
  9. </template>
  11. <script>
  13.  import CartHeaderView from './CartHeader.vue';
  14.  import CartMainView from './CartMain.vue';
  15.  import NavBottomView from './NavBottom.vue';
  17.  export default{
  18.    data () {
  19.      return {
  20.        is_cart: true
  21.      }
  22.    },
  23.    mounted(){
  24.    },
  25.    components:{
  26.      CartHeaderView,
  27.      CartMainView,
  28.      NavBottomView
  29.    }
  30.  }
  31. </script>

3. 增加对应的组件

3.1 新增购物车的头部文件 src/components/CartHeader.vue: 

  1. <template>
  2.     <div id="carttp">
  3.         <header class="top_bar">
  4.         <a onclick="window.history.go(-1)" class="icon_back"></a>
  5.         <h3 class="cartname">购物车</h3>
  6.     </header>
  7.     </div>
  8. </template>

3.2 新增购物车的主体内容 src/components/CartMain.vue: 

  1. <template>
  2.     <main class="cart_box">
  3.     <p v-show="!products.length"><i>请选择商品加入到购物车</i></p>
  4.         <div class="cart_content clearfix" v-for="item in products" style="position: relative;">
  5.             <div class="cart_shop clearfix">
  6.                 <div class="cart_check_box">
  7.                     <div class="check_box" checked>
  8.                     </div>
  9.                 </div>
  10.                 <div class="shop_info clearfix">
  11.                     <span class="shop_name" style="font-size: 14px;">丝路乐购新疆商城</span>
  12.                 </div>
  13.             </div>
  15.             <div @click="find_item_id(item)" class="cart_del clearfix" style="display: inline-block; position: absolute; top: 10px; right: 10px;">
  16.               <div class="del_top">
  17.               </div>
  18.               <div class="del_bottom">
  19.               </div>
  20.             </div>
  21.             <div class="cart_item">
  22.                 <div class="cart_item_box">
  23.                     <div class="check_box">
  24.                     </div>
  25.                 </div>
  26.                 <div class="cart_detial_box clearfix">
  27.                     <a class="cart_product_link">
  28.                         <img :src="item.image" alt="">
  29.                     </a>
  30.                     <div class="item_names">
  31.                         <a>
  32.                             <span>{{item.title}}</span>
  33.                         </a>
  34.                     </div>
  35.                     <div class="cart_weight">
  36.                         <span class="my_color" style="color: #979292;">{{item.title}}</span>
  37.                     </div>
  38.                     <div class="cart_product_sell">
  39.                         <span class="product_money">￥<strong class="real_money">{{item.price}}</strong></span>
  40.                         <div class="cart_add clearfix">
  41.                             <span @click="minus(item.id)" class="my_jian">-</span>
  42.                             <input type="tel" class="my_count" :value="item.quantity">
  43.                             <span @click="add(item.id)" class="my_add">+</span>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  50.         <div class="pop" style="display: none">
  51.           <div class="pop_box">
  52.             <div class="del_info">
  53.               确定要删除该商品吗？
  54.             </div>
  55.             <div class="del_cancel">
  56.               取消
  57.             </div>
  58.             <div @click="deleteItem" class="del_ok">
  59.               确定
  60.             </div>
  61.           </div>
  62.         </div>
  64.         <div class="cart_fo">
  65.           <footer class="cart_footer">
  66.             <div class="count_money_box">
  67.               <div class="heji">
  68.                 <strong>合计:</strong>
  69.                 <strong style="color: #ff621a; font-size: 18px;">\{\{ total | currency }}</strong>
  70.               </div>
  71.               <a :disabled="!products.length" @click="checkout(products)" class="go_pay">
  72.                 <span style="color: #f5f5f5; font-weight: 600;">结算</span>
  73.               </a>
  74.             </div>
  75.           </footer>
  76.         </div>
  77.     </main>
  78. </template>
  79. <script>
  80.  import { mapGetters } from 'vuex'
  81.  import { go } from '../libs/router'
  82.  import {check,animatDelBox} from '../assets/js/cart.js'
  84.     export default{
  85.       data(){
  86.         return{
  87.           need_delete_item: {},
  88.           cartDatas:[ ],
  89.         }
  90.       },
  91.     mounted(){
  92.       check();
  93.       animatDelBox();
  94.     },
  95.     computed: {
  96.       ...mapGetters({
  97.         products: 'cartProducts',
  98.         checkoutStatus: 'checkoutStatus'
  99.       }),
  100.       total () {
  101.         return this.products.reduce((total, item) => {
  102.           return total + item.price * item.quantity
  103.         }, 0)
  104.       }
  105.     },
  106.     methods: {
  108.       // 跳转到支付页面
  109.       checkout (products) {
  110.         go("/shops/dingdanzhifu", this.$router)
  111.       },
  113.       // 对于商品的数量进行增加
  114.       add (id) {
  115.         this.$store.dispatch('changeItemNumber', {id, type: 'add'})
  116.       },
  118.       // 对于商品的数量进行减少
  119.       minus (id) {
  120.         this.$store.dispatch('changeItemNumber', {id, type: 'minus'})
  121.       },
  123.       // 删除某个商品
  124.       deleteItem () {
  125.         this.$store.dispatch('deleteItem', this.need_delete_item.id)
  126.       },
  127.       find_item_id (item) {
  128.         this.need_delete_item = item
  129.       }
  130.     },
  131.     }
  132. </script>

3.3 修改Vuex的函数

把下面代码添加到 src/vuex/actions.js 文件中: 

  1. export const deleteItem = ({ commit }, id) => {
  2.   commit(types.DELETE_ITEM, {
  3.     id: parseInt(id)
  4.   })
  5. }
  7. export const changeItemNumber = ({ commit }, {id, type}) => {
  8.   console.info(id)
  9.   commit(types.CHANGE_ONE_QUANTITY, {
  10.     id: parseInt(id),
  11.     type
  12.   })
  13. }

上面的代码， 实现了购物车的若干功能：

  • 对于商品数量的增减
  • 实现了当商品数量改变时，商品总价也跟着修改。

看效果

购物车做好后，点击打开，如下图所示：

购物车页面

总结

  • 购物车的数据， 是通过Vuex来保存的
  • 购物车中数量的加减，是需要直接影响到商品总价的。 这个角度来看，用Vuex来做更加适合。