From a5af18227889b370e22a071781b31e20f36928a1 Mon Sep 17 00:00:00 2001
From: Blueeast <1464827646@qq.com>
Date: Sun, 23 Dec 2018 18:54:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE1.0=E7=89=88=E6=AD=A3?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8A=E7=BA=BF=EF=BC=8C=E5=9F=BA=E6=9C=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=A3=E5=91=8A=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Category.vue     | 278 ++++++++++++++++++-------------------
 src/pages/Details.vue      |  15 +-
 src/store/mutationTypes.js |   1 +
 src/store/mutations.js     |  19 +++
 src/store/state.js         |  27 ----
 5 files changed, 166 insertions(+), 174 deletions(-)

diff --git a/src/pages/Category.vue b/src/pages/Category.vue
index 0be04ce..e9c36cd 100644
--- a/src/pages/Category.vue
+++ b/src/pages/Category.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="category">
-    <!-- 主体图片 -->
-    <div class="img">
-      <img :src="lists.headImg"
-           alt="">
-    </div>
-    <!-- 进入书城 -->
-    <div class="bookStore">
-      <div>
-        <p>进入{{lists.storeTitle}}书城</p>
-        <span>低至{{lists.storeDiscount}}折</span>
-        <i>></i>
+      <!-- 主体图片 -->
+      <div class="img">
+          <img :src="lists.headImg" alt="">
       </div>
       <!-- 进入书城 -->
       <div class="bookStore">
@@ -54,7 +46,6 @@
           </ul>
       </router-link>
   </div>
-</div>
 </template>
 
 <script>
@@ -79,155 +70,154 @@ export default {
       }
   },
   beforeRouteEnter (to, from, next) {
-    next(vm => {
-      vm.$http.getLists()
-        .then(resp => {
-          vm.lists = resp
-        })
-    })
+      next(vm => {
+          vm.$http.getLists()
+            .then(resp => {
+                vm.lists = resp
+            })
+      })
   },
   beforeRouteUpdate (to, from, next) {
     //  console.log(to.params.categoryID)
     this.$http.getLists(to.params.categoryID)
-      .then(resp => {
-        this.lists = resp
-      })
-    next()
+        .then(resp => {
+            this.lists = resp
+        })
+        next()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.category {
-  padding-left: 1vh;
-  .img {
-    > img {
-      width: 43.06vh;
-      height: 14.93vh;
-    }
-  }
-  .bookStore {
-    display: flex;
-    justify-content: space-between;
-    > div {
-      background-color: #fff;
-      width: 20.53vh;
-      height: 8.4vh;
-      position: relative;
-      > p {
-        margin: 1.73vh 0 0 1.73vh;
-        font-size: 14px;
-        font-weight: 900;
-        padding: 0.5vh;
-        color: #333;
-      }
-      > span {
-        font-size: 12px;
-        color: #a6a6a6;
-        margin-left: 2vh;
-      }
-      > i {
-        font-style: normal;
-        position: absolute;
-        top: 2.4vh;
-        right: 2.4vh;
+.category{
+    padding-left: 1vh;
+    .img{
+      > img{
+        width: 43.06vh;
+        height: 14.93vh;
       }
     }
-  }
-  // 图书榜单
-  .bookList {
-    background: #fff;
-    margin-top: 1.05vh;
-    height: 22.4vh;
-    > h3 {
-      padding-left: 2vh;
-      padding-top: 1vh;
-      font-weight: 900;
-    }
-    > ul {
-      display: flex;
-      margin-top: 2vh;
-      justify-content: space-around;
-      > li {
+    .bookStore{
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        > img {
-          width: 10vh;
-          height: 10vh;
-        }
-        > span {
-          margin-top: 2vh;
-          text-align: center;
-          color: #4d525d;
-          font-size: 12px;
+        justify-content: space-between;
+        > div{
+            background-color: #fff;
+            width: 20.53vh;
+            height: 8.4vh;
+            position:relative;
+            > p{
+                margin: 1.73vh 0 0 1.73vh;
+                font-size: 14px;
+                font-weight: 900;
+                padding: 0.5vh;
+                color: #333;
+            }
+            > span{
+                font-size: 12px;
+                color: #a6a6a6;
+                margin-left: 2vh;
+            }
+            > i{
+                font-style: normal;
+                position: absolute;
+                top: 2.4vh;
+                right: 2.4vh;
+            }
         }
-      }
     }
-  }
-  // 分类
-  .type {
-    height: 17.73vh;
-    margin-top: 1.05vh;
-    background: #fff;
-    > h3 {
-      padding-left: 2vh;
-      padding-top: 1vh;
-      position: relative;
-      > a {
-        text-decoration: none;
-        color: #1e1e1e;
-        display: inline-block;
-      }
-      > b {
-        position: absolute;
-        top: 0.8vh;
-        height: 3.2vh;
-        line-height: 3.2vh;
-        width: 13.33vh;
-        padding-right: 1.54vh;
-        font-size: 12px;
-        color: #969696;
-        background: url(../img/ddcategory_more_icon.png) right center no-repeat;
-        background-size: 5px;
-        right: 1vh;
-        text-align: right;
-      }
+    // 图书榜单
+    .bookList{
+        background: #fff;
+        margin-top: 1.05vh;
+        height: 22.4vh;
+        > h3{
+            padding-left: 2vh;
+            padding-top: 1vh;
+            font-weight: 900;
+        }
+        > ul{
+            display: flex;
+            margin-top: 2vh;
+            justify-content: space-around;
+            > li{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                > img{
+                    width: 10vh;
+                    height: 10vh;
+                }
+                > span{
+                    margin-top: 2vh;
+                    text-align: center;
+                    color: #4d525d;
+                    font-size: 12px;
+                }
+            }
+        }
     }
-    > ul {
-      padding: 0 2vh;
-      > li {
-        float: left;
-        width: 33.3%;
-        border-bottom: 1px solid #f0f0f0;
-        text-align: center;
-        height: 5.86vh;
-        line-height: 5.86vh;
-        > span {
-          text-align: center;
-          display: block;
-          width: 100%;
-          margin-top: 2vh;
-          border-right: 1px solid #e1e1e1;
-          text-align: center;
-          line-height: 13px;
-          font-size: 12px;
-          text-overflow: ellipsis;
+    // 分类
+    .type{
+        height: 17.73vh;
+        margin-top: 1.05vh;
+        background: #fff;
+        > h3{
+            padding-left: 2vh;
+            padding-top: 1vh;
+            position: relative;
+            > a{
+                text-decoration: none;
+                color: #1e1e1e;
+                display: inline-block;
+            }
+            > b{
+                position: absolute;
+                top: 0.8vh;
+                height: 3.2vh;
+                line-height: 3.2vh;
+                width: 13.33vh;
+                padding-right: 1.54vh;
+                font-size: 12px;
+                color: #969696;
+                background: url(../img/ddcategory_more_icon.png) right center no-repeat;
+                background-size: 5px;
+                right: 1vh;
+                text-align: right;
+            }
         }
-        > i {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          margin-top: -7.5vh;
-          overflow: hidden;
-          margin-left: 6vh;
-          background: url(../img/ddcategory_arrow-new.png?v=20180205) center
-            center no-repeat;
-          background-size: 12px;
-          vertical-align: middle;
+        > ul {
+            padding: 0 2vh;
+            > li{
+                float: left;
+                width: 33.3%;
+                border-bottom: 1px solid #f0f0f0;
+                text-align: center;
+                height: 5.86vh;
+                line-height: 5.86vh;
+                > span{
+                    text-align: center;
+                    display: block;
+                    width: 100%;
+                    margin-top: 2vh;
+                    border-right: 1px solid #e1e1e1;
+                    text-align: center;
+                    line-height: 13px;
+                    font-size: 12px;
+                    text-overflow: ellipsis;
+                }
+                > i{
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin-top: -7.5vh;
+                    overflow: hidden;
+                    margin-left: 6vh;
+                    background: url(../img/ddcategory_arrow-new.png?v=20180205) center center no-repeat;
+                    background-size: 12px;
+                    vertical-align: middle;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 552d0f7..4c056bb 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -15,7 +15,7 @@
       <div class="details-item-information">
         <div class="details-item-information-title">{{ product.title }}</div>
         <div class="details-item-information-price">￥ {{ product.price }}</div>
-        <mt-button type="primary">加入购物车</mt-button>
+        <mt-button type="primary" @click="addToCart(product)">加入购物车</mt-button>
       </div>
       <div class="details-item-shop">
         <ul class="j_product_info">
@@ -47,7 +47,9 @@
         }"
         tag="button"
       >
-      <button class="btn">去结算</button>
+      <router-link class="btn" :to="{
+          name: 'cart'
+      }">去结算</router-link>
       </router-link>
     </div>
   </div>
@@ -55,7 +57,12 @@
 
 <script>
 import Swiper from 'swiper';
-
+import {
+  mapState,
+  mapGetters,
+  mapMutations
+} from 'vuex'
+import * as mutationTypes from '../store/mutationTypes'
 export default {
   name: 'cart',
   data () {
@@ -64,7 +71,9 @@ export default {
       product: []
     };
   },
+
   methods: {
+    ...mapMutations(['addToCart']),
     initSwiper () {
       this.mySwiper = new Swiper(this.$refs.bigWrap, {
         loop: true, // 循环模式选项
diff --git a/src/store/mutationTypes.js b/src/store/mutationTypes.js
index 7525821..3d5fd88 100644
--- a/src/store/mutationTypes.js
+++ b/src/store/mutationTypes.js
@@ -2,3 +2,4 @@ export const addCartItemCount = 'addCartItemCount'
 export const reduceCartItemCount = 'reduceCartItemCount'
 export const singCheckedHandler = 'singCheckedHandler'
 export const cartAllcheckedHeadler = 'cartAllcheckedHeadler'
+export const addToCart = 'addToCart'
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 64b5ddf..77c8202 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -34,5 +34,24 @@ export default {
       }
       return item
     })
+  },
+  [mutationTypes.addToCart] (state, product) {
+    console.log(product)
+    const isInCart = state.cart.some(item => item.id === product.id)
+    if (isInCart) {
+      state.cart = state.cart.map(item => {
+        if (item.id === product.id) {
+          item.count += 1
+        }
+        return item
+      })
+    } else {
+      state.cart.push({
+        ...product,
+        count: 1,
+        isChecked: false
+      })
+    }
+    console.log(state.cart)
   }
 }
diff --git a/src/store/state.js b/src/store/state.js
index ceb7dbe..bd1ab45 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -1,31 +1,4 @@
 export default {
   cart: [
-    {
-      id: 1,
-      img: '',
-      isChecked: true,
-      price: 44.07,
-      priced: 57.8,
-      title: '打发撒打发',
-      count: 5
-    },
-    {
-      id: 2,
-      img: '',
-      isChecked: false,
-      price: 44.07,
-      priced: 57.8,
-      title: '打发撒打发',
-      count: 3
-    },
-    {
-      id: 3,
-      img: '',
-      isChecked: false,
-      price: 44.07,
-      priced: 57.8,
-      title: '打发撒打发',
-      count: 1
-    }
   ]
 }
-- 
Gitee