From 322041059e7bbabd32c5a881d42d80be313c9f78 Mon Sep 17 00:00:00 2001 From: 542634 <1322755174@qq.com> Date: Sun, 23 Dec 2018 16:49:42 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=E8=B4=AD=E7=89=A9=E8=BD=A6=E7=BB=93?= =?UTF-8?q?=E7=AE=97=E9=83=A8=E5=88=86=E7=9A=84=E6=90=AD=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/components/CartTabbar.vue | 118 +++++++++++++++++++++++++++++++ src/components/DetailsTabbar.vue | 73 ------------------- src/router/routes.js | 9 ++- src/store/getters.js | 16 +++++ 5 files changed, 139 insertions(+), 79 deletions(-) create mode 100644 src/components/CartTabbar.vue delete mode 100644 src/components/DetailsTabbar.vue diff --git a/src/App.vue b/src/App.vue index 55b88d2..608cdfe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,7 @@
- +
diff --git a/src/components/CartTabbar.vue b/src/components/CartTabbar.vue new file mode 100644 index 0000000..e903d81 --- /dev/null +++ b/src/components/CartTabbar.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/src/components/DetailsTabbar.vue b/src/components/DetailsTabbar.vue deleted file mode 100644 index a78560f..0000000 --- a/src/components/DetailsTabbar.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - - - diff --git a/src/router/routes.js b/src/router/routes.js index 4171c11..fc7a17b 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, + carttabbar: CartTabbar } }, { diff --git a/src/store/getters.js b/src/store/getters.js index 6ad5520..cd99374 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,5 +1,21 @@ 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) } } -- Gitee From c91b15a5ac8b1fb1864abffb908363e0c97b5957 Mon Sep 17 00:00:00 2001 From: 542634 <1322755174@qq.com> Date: Sun, 23 Dec 2018 17:12:13 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=93=E7=AE=97?= =?UTF-8?q?=E8=AE=A1=E7=AE=97=E5=92=8C=E9=80=89=E4=B8=AD=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/components/CartTabbar.vue | 1 + src/pages/Cart.vue | 31 +++++++++++++++++++++++++++++-- src/router/routes.js | 4 ++-- src/store/state.js | 6 +++--- 5 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/App.vue b/src/App.vue index 608cdfe..8514fa9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,7 @@
- +
diff --git a/src/components/CartTabbar.vue b/src/components/CartTabbar.vue index e903d81..e092658 100644 --- a/src/components/CartTabbar.vue +++ b/src/components/CartTabbar.vue @@ -101,6 +101,7 @@ export default { } } .total { + position: absolute; height: 12vw; line-height: 12vw; background: #ffffff; diff --git a/src/pages/Cart.vue b/src/pages/Cart.vue index 7fcb5fa..c9082ef 100644 --- a/src/pages/Cart.vue +++ b/src/pages/Cart.vue @@ -16,7 +16,7 @@ v-for="item in cart" :key="item.id"> + :checked='item.isChecked'>

{{item.title}}

@@ -55,6 +55,11 @@
+
+ 全选 + 合计：￥{{cartCheckedPrice}} + +
@@ -72,7 +77,11 @@ export default { component: CHeader, computed: { ...mapState(['cart']), - ...mapGetters(['cartIsNotEmpty']) + ...mapGetters([ + 'cartIsNotEmpty', + 'cartCheckedCount', + 'cartCheckedPrice' + ]) }, data: function () { return { @@ -172,6 +181,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 fc7a17b..660c872 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -1,5 +1,5 @@ import Tabbar from '@/components/Tabbar' -import CartTabbar from '@/components/CartTabbar' +// import CartTabbar from '@/components/CartTabbar' import MallHead from '@/components/MallHead' import CHeader from '@/components/CHeader' import MHeader from '@/components/MHeader' @@ -77,7 +77,7 @@ const routes = [ components: { default: Cart, cheader: CHeader, - carttabbar: CartTabbar + tabbar: Tabbar } }, { diff --git a/src/store/state.js b/src/store/state.js index b92fa80..6dbaed0 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,7 @@ export default { }, { id: 2, - ischecked: false, + isChecked: false, price: 44.07, priced: 57.8, title: '打发撒打发', @@ -19,7 +19,7 @@ export default { }, { id: 3, - ischecked: false, + isChecked: false, price: 44.07, priced: 57.8, title: '打发撒打发', -- Gitee From 11bd532235105e580505639c29372e601c71ff91 Mon Sep 17 00:00:00 2001 From: 542634 <1322755174@qq.com> Date: Sun, 23 Dec 2018 17:52:28 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Cart.vue | 18 +++++++++++++----- src/store/getters.js | 3 +++ src/store/mutationTypes.js | 2 ++ src/store/mutations.js | 19 +++++++++++++++++++ src/store/state.js | 2 ++ 5 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/pages/Cart.vue b/src/pages/Cart.vue index c9082ef..0f715aa 100644 --- a/src/pages/Cart.vue +++ b/src/pages/Cart.vue @@ -6,7 +6,9 @@
- + icon 当当网
@@ -16,7 +18,8 @@ v-for="item in cart" :key="item.id"> + :checked='item.isChecked' + @change="singCheckedHandler(item.id)">

{{item.title}}

@@ -56,7 +59,9 @@
- 全选 + 全选 合计：￥{{cartCheckedPrice}}
@@ -80,7 +85,8 @@ export default { ...mapGetters([ 'cartIsNotEmpty', 'cartCheckedCount', - 'cartCheckedPrice' + 'cartCheckedPrice', + 'isAllCartItemChecked' ]) }, data: function () { @@ -113,7 +119,9 @@ export default { // }, ...mapMutations([ mutationTypes.addCartItemCount, - mutationTypes.reduceCartItemCount + mutationTypes.reduceCartItemCount, + mutationTypes.singCheckedHandler, + mutationTypes.cartAllcheckedHeadler ]) // downHandler (id) { // this.itemList = this.itemList.map(item => { diff --git a/src/store/getters.js b/src/store/getters.js index cd99374..462e760 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -17,5 +17,8 @@ export default { } 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 82940d3..7525821 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 595bde3..64b5ddf 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 6dbaed0..ceb7dbe 100644 --- a/src/store/state.js +++ b/src/store/state.js @@ -11,6 +11,7 @@ export default { }, { id: 2, + img: '', isChecked: false, price: 44.07, priced: 57.8, @@ -19,6 +20,7 @@ export default { }, { id: 3, + img: '', isChecked: false, price: 44.07, priced: 57.8, -- Gitee