• 购物车
    • 1. 添加购物车 路由
    • 2. 添加查看购物车的vue页面
    • 3. 增加对应的组件
    • 看效果
    • 总结

    购物车

    购物车具备两个功能：

    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来做更加适合。