diff --git a/src/App.vue b/src/App.vue
index 55b88d2c8b543ba44a4428cd571fa62f86826b90..8514fa92b2828034859b575cf03a609b55725d7e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@
     </div>
     <div class="tabbar">
       <router-view name="tabbar"></router-view>
-      <router-view name="detailstabbar"></router-view>
+      <!-- <router-view name="carttabbar"></router-view> -->
     </div>
   </div>
 </template>
diff --git a/src/components/CartTabbar.vue b/src/components/CartTabbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0926585ad1d713b3650f972db0bc69bae112fc7
--- /dev/null
+++ b/src/components/CartTabbar.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="cart-tabbar">
+    <div class="total">
+      <input type="checkbox">全选
+      <span class="totalprice">合计：￥{{cartCheckedPrice}}</span>
+      <button class="computBtn">去结算（{{cartCheckedCount}}）</button>
+    </div>
+    <div class="b-tabbar">
+      <router-link v-for="route in navData"
+                   :key="route.name"
+                   :to="route.path"
+                   tag="div"
+                   class="b-tabbar-item">
+        <div class="icon">
+          <i class="iconfont"
+             v-html="route.icon"></i>
+        </div>
+        <div class="title">{{route.title}}</div>
+      </router-link>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import routes from '@/router/routes'
+import {
+  mapState,
+  mapGetters,
+  mapMutations
+} from 'vuex'
+import * as mutationTypes from '../store/mutationTypes'
+
+export default {
+  name: 'carttabbar',
+  data () {
+    return {
+      navData: routes.filter(route => route.isTabbar === true)
+    }
+  },
+  computed: {
+    ...mapState(['cart']),
+    ...mapGetters([
+      'cartIsNotEmpty',
+      'cartCheckedCount',
+      'cartCheckedPrice'
+    ])
+  },
+  methods: {
+    ...mapMutations([
+      mutationTypes.addCartItemCount,
+      mutationTypes.reduceCartItemCount
+    ])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+  font-family: 'iconfont'; /* project id 976663 */
+  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot');
+  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot?#iefix')
+      format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.woff') format('woff'),
+    url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.svg#iconfont') format('svg');
+}
+.b-tabbar {
+  height: 45px;
+  border-top: 1px solid #dddddd;
+  background-color: #f2f2f2;
+  padding-top: 1vh;
+  display: flex;
+  &-item {
+    flex: 1;
+    text-align: center;
+    color: #4f545e;
+    font-weight: 600;
+
+    &.router-link-exact-active {
+      color: #ff483e;
+      .icon {
+        .iconfont {
+          color: #ff483e;
+        }
+      }
+    }
+
+    > .icon {
+      height: 28px;
+      > .iconfont {
+        font-family: 'iconfont';
+        font-size: 24px;
+        color: #bfbfbf;
+      }
+    }
+    > .title {
+      height: 18px;
+      font-size: 12px;
+    }
+  }
+}
+.total {
+  position: absolute;
+  height: 12vw;
+  line-height: 12vw;
+  background: #ffffff;
+  padding: 2vw 2vw;
+  .computBtn {
+    float: right;
+    padding: 3vw 5vw;
+    border: none;
+    border-radius: 20px;
+    background: #fb4741;
+    color: #ffffff;
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/components/DetailsTabbar.vue b/src/components/DetailsTabbar.vue
deleted file mode 100644
index a78560f1040a5c11076b88d55182bc8133893948..0000000000000000000000000000000000000000
--- a/src/components/DetailsTabbar.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="b-tabbar">
-        <router-link
-        v-for="route in navData"
-        :key="route.name"
-        :to ="route.path"
-        tag="div"
-        class="b-tabbar-item">
-            <div class="icon">
-                <i class="iconfont" v-html="route.icon"></i>
-            </div>
-            <div class="title">{{route.title}}</div>
-        </router-link>
-    </div>
-</template>
-
-<script>
-import routes from '@/router/routes'
-export default {
-  name: 'detailstabbar',
-  data () {
-    return {
-      navData: routes.filter(route => route.isTabbar === true)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@font-face {
-  font-family: 'iconfont';  /* project id 976663 */
-  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot');
-  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.woff') format('woff'),
-  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.svg#iconfont') format('svg');
-}
-.b-tabbar{
-    height: 45px;
-    border-top: 1px solid #dddddd;
-    background-color: #f2f2f2;
-    padding-top: 1vh;
-    display: flex;
-    &-item {
-        flex: 1;
-        text-align: center;
-        color: #4f545e;
-        font-weight: 600;
-
-        &.router-link-exact-active{
-            color: #ff483e;
-            .icon {
-              .iconfont{
-                  color: #ff483e;
-                }
-            }
-        }
-
-        >.icon{
-            height: 28px;
-          > .iconfont{
-            font-family:  'iconfont';
-            font-size: 24px;
-            color: #bfbfbf;
-          }
-        }
-        >.title{
-            height: 18px;
-            font-size: 12px;
-        }
-    }
-}
-</style>
diff --git a/src/pages/Cart.vue b/src/pages/Cart.vue
index 7fcb5fa5dda5cae93b45fa474144e33592704a32..0f715aa8193a45e56e458ed7da622dfe8fe87228 100644
--- a/src/pages/Cart.vue
+++ b/src/pages/Cart.vue
@@ -6,7 +6,9 @@
     </div>
     <div class="c-main">
       <div class="tableTitle">
-        <input type="checkbox">
+        <input :checked="isAllCartItemChecked"
+               @change="cartAllcheckedHeadler"
+               type="checkbox">
         <i>icon</i>
         <span>当当网</span>
       </div>
@@ -16,7 +18,8 @@
              v-for="item in cart"
              :key="item.id">
           <input type="checkbox"
-                 :checked='item.ischecked'>
+                 :checked='item.isChecked'
+                 @change="singCheckedHandler(item.id)">
           <img :src="item.img">
           <div class="product-list-right">
             <p>{{item.title}}</p>
@@ -55,6 +58,13 @@
         </div>
       </div>
     </div>
+    <div class="total">
+      <input :checked="isAllCartItemChecked"
+             @change="cartAllcheckedHeadler"
+             type="checkbox">全选
+      <span class="totalprice">合计：￥{{cartCheckedPrice}}</span>
+      <button class="computBtn">去结算（{{cartCheckedCount}}）</button>
+    </div>
   </div>
 </template>
 
@@ -72,7 +82,12 @@ export default {
   component: CHeader,
   computed: {
     ...mapState(['cart']),
-    ...mapGetters(['cartIsNotEmpty'])
+    ...mapGetters([
+      'cartIsNotEmpty',
+      'cartCheckedCount',
+      'cartCheckedPrice',
+      'isAllCartItemChecked'
+    ])
   },
   data: function () {
     return {
@@ -104,7 +119,9 @@ export default {
     // },
     ...mapMutations([
       mutationTypes.addCartItemCount,
-      mutationTypes.reduceCartItemCount
+      mutationTypes.reduceCartItemCount,
+      mutationTypes.singCheckedHandler,
+      mutationTypes.cartAllcheckedHeadler
     ])
     // downHandler (id) {
     //   this.itemList = this.itemList.map(item => {
@@ -172,6 +189,24 @@ export default {
     padding: 1vw;
   }
 }
+.total {
+  width: 100%;
+  position: absolute;
+  bottom: 14vw;
+  height: 12vw;
+  line-height: 12vw;
+  background: #ffffff;
+  padding: 2vw 0vw;
+  .computBtn {
+    float: right;
+    padding: 3vw 5vw;
+    border: none;
+    border-radius: 20px;
+    background: #fb4741;
+    color: #ffffff;
+    font-size: 16px;
+  }
+}
 .c-main {
   overflow: hidden;
   .tableTitle {
diff --git a/src/router/routes.js b/src/router/routes.js
index 4171c11d2ac136a8604b6345f2c56734ec6c121b..660c8721d38e27c345c8c9a91e6a3b210305515d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,5 +1,5 @@
 import Tabbar from '@/components/Tabbar'
-import DetailsTabbar from '@/components/DetailsTabbar'
+// import CartTabbar from '@/components/CartTabbar'
 import MallHead from '@/components/MallHead'
 import CHeader from '@/components/CHeader'
 import MHeader from '@/components/MHeader'
@@ -55,8 +55,7 @@ const routes = [
     name: 'details',
     components: {
       default: Details,
-      detailsheader: DetailHeader,
-      detailstabbar: DetailsTabbar
+      detailsheader: DetailHeader
     },
     props: true
   },
@@ -77,8 +76,8 @@ const routes = [
     isTabbar: true,
     components: {
       default: Cart,
-      tabbar: Tabbar,
-      cheader: CHeader
+      cheader: CHeader,
+      tabbar: Tabbar
     }
   },
   {
diff --git a/src/store/getters.js b/src/store/getters.js
index 6ad5520d404f92d131740d2bbc57c4f854439839..462e760174ee4414ddcc641ad7df91848adb6af1 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,5 +1,24 @@
 export default {
   cartIsNotEmpty (state) {
     return Array.isArray(state.cart) && state.cart.length !== 0
+  },
+  cartCheckedCount (state) {
+    return state.cart.reduce((total, item) => {
+      if (item.isChecked === true) {
+        total += item.count
+      }
+      return total
+    }, 0)
+  },
+  cartCheckedPrice (state) {
+    return state.cart.reduce((total, item) => {
+      if (item.isChecked === true) {
+        total += item.count * item.price
+      }
+      return total
+    }, 0.0)
+  },
+  isAllCartItemChecked (state) {
+    return state.cart.every(item => item.isChecked === true)
   }
 }
diff --git a/src/store/mutationTypes.js b/src/store/mutationTypes.js
index 82940d3acfbf425187e3f37957c8a1fc07db23e9..752582186926ae264851efc2f1a92fa981eb1755 100644
--- a/src/store/mutationTypes.js
+++ b/src/store/mutationTypes.js
@@ -1,2 +1,4 @@
 export const addCartItemCount = 'addCartItemCount'
 export const reduceCartItemCount = 'reduceCartItemCount'
+export const singCheckedHandler = 'singCheckedHandler'
+export const cartAllcheckedHeadler = 'cartAllcheckedHeadler'
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 595bde363ddd7f2a1f076ae17a91c8348a67e02c..64b5ddfa6bd51573c5f2e7125b43eb0e06bd6bec 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -15,5 +15,24 @@ export default {
       }
       return item
     })
+  },
+  [mutationTypes.singCheckedHandler] (state, id) {
+    state.cart = state.cart.map(item => {
+      if (item.id === id) {
+        item.isChecked = !item.isChecked
+      }
+      return item
+    })
+  },
+  [mutationTypes.cartAllcheckedHeadler] (state, e) {
+    console.log(e.target.checked)
+    state.cart = state.cart.map(item => {
+      if (e.target.checked) {
+        item.isChecked = true
+      } else {
+        item.isChecked = false
+      }
+      return item
+    })
   }
 }
diff --git a/src/store/state.js b/src/store/state.js
index b92fa801865bc98fa365d701e71732a9fce08583..ceb7dbee5f5e9b8b593f5a23f0421980696b94a6 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -3,7 +3,7 @@ export default {
     {
       id: 1,
       img: '',
-      ischecked: true,
+      isChecked: true,
       price: 44.07,
       priced: 57.8,
       title: '打发撒打发',
@@ -11,7 +11,8 @@ export default {
     },
     {
       id: 2,
-      ischecked: false,
+      img: '',
+      isChecked: false,
       price: 44.07,
       priced: 57.8,
       title: '打发撒打发',
@@ -19,7 +20,8 @@ export default {
     },
     {
       id: 3,
-      ischecked: false,
+      img: '',
+      isChecked: false,
       price: 44.07,
       priced: 57.8,
       title: '打发撒打发',