From 3a24f0fc5b45a6b1f93af5c7933ca6e5ffa141cc Mon Sep 17 00:00:00 2001
From: yindong999 <1015182017@qq.com>
Date: Mon, 10 Jun 2019 17:03:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8D=87=E7=BA=A7---yindong?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   1 -
 src/main.js                             |   9 +-
 src/store/actions.js                    |  90 +++---
 src/store/const.js                      |   6 +-
 src/store/getters.js                    |  22 +-
 src/store/index.js                      |  15 -
 src/store/mutations.js                  |  13 +-
 src/store/state.js                      |   1 +
 src/store/store.js                      |  14 +
 src/views/category/detailCategory.vue   |   1 -
 src/views/category/moreCategoryList.vue |  34 +--
 src/views/eat/index.vue                 |   2 +-
 src/views/home/index.vue                |  14 +-
 src/views/shoppingCart/index.vue        | 363 +++++++++++-------------
 14 files changed, 301 insertions(+), 284 deletions(-)
 delete mode 100644 src/store/index.js
 create mode 100644 src/store/store.js

diff --git a/package.json b/package.json
index ce3b980..fa6ffe1 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "axios": "^0.19.0",
     "babel-plugin-component": "^1.1.1",
     "core-js": "^2.6.5",
-    "mint-ui": "^2.2.13",
     "swiper": "^4.5.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
diff --git a/src/main.js b/src/main.js
index 96daf40..d35ce4c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,21 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './store/store'
 import "./modules/rem.js"
 import "@/stylesheets/main.scss"
 import "swiper/dist/css/swiper.min.css"
 import axios from "axios"
 import SIdentify from './views/login/identify.vue'
-import { Navbar, TabItem,Lazyload,InfiniteScroll,Cell,Popup} from 'mint-ui'
- 
+import {Checklist, Navbar, TabItem,Lazyload,InfiniteScroll,Cell,Popup,Button} from 'mint-ui'
+
+Vue.component("my-checklist", Checklist);
 
 Vue.component("mt-popup", Popup);
 Vue.component("mt-navbar", Navbar);
 Vue.component("mt-tab-item", TabItem); 
+Vue.component("my-button", Button); 
+ 
 
 Vue.use(Lazyload);
 Vue.use(SIdentify);
diff --git a/src/store/actions.js b/src/store/actions.js
index bb67e73..94f6329 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,41 +1,55 @@
-import { SYNC_UPDATE } from "./const"
+import {SYNC_UPDATE,REDUCENUM} from './const'
+
 export default {
-	transfer(store,obj){
+    transfer(store,obj){
 		store.commit('transfer',obj)
 	},
-	initCar(store){
-		let cars = getCar();
-		store.commit(SYNC_UPDATE,cars)
-	},
-	addGoodInCar(store,goodInfo){
-		let cars = getCar();
-		let isHas = cars.some(item=>{
-			if (item._id === goodInfo._id){
-				item.num++;
-				return true;
-			}
-		});
-		if(!isHas){
-			goodInfo.num = 1;
-			cars.push(goodInfo);
-		};
-		localStorage.cars = JSON.stringify(cars);
-		store.commit(SYNC_UPDATE,cars)
-	},
-	reduceGoodIncar(store,goodInfo){
-		let cars =getCar();
-		cars = cars.filter(item=>{
-			if(item._id == goodInfo._id){
-				item.num--;
-				if(item.num <= 0) return false;
-			}
-			return true;
-		})
-		localStorage.cars = JSON.stringify(cars)
-        store.commit(SYNC_UPDATE, cars)
-	},
-	deleteGoodInCar(store,goodInfo){
-		let cars =getCar();
+    initCar(store){
+        let cars = getData()
+        store.commit(SYNC_UPDATE,cars)
+    },
+    /* 减少 */
+    reduceNum(store,reduceInfor){
+        // 使用定时器操作；
+       
+            let reduceCars = getData() ;// 从locaStorage中获取数据
+            let newArr = reduceCars.filter(item=>{
+                if(item.CommodityId === reduceInfor.CommodityId){
+                    item.num --
+                    if(item.num<=0)
+                    return false
+                }
+               return true
+            })
+             localStorage.setItem('cars',JSON.stringify(newArr))  // 通知模拟的后台去更改数据
+             store.commit(SYNC_UPDATE,newArr)
+       
+    },
+    /* 添加物品到购物车的方法 */
+    addGoodsToCar(store,goodsInfor){
+        console.log(localStorage.getItem('cars'))
+         
+         setTimeout(()=>{
+            let cars = getData()
+            let res =  cars.some(item=>{
+                 if(item.CommodityId === goodsInfor.CommodityId){
+                     item.num ++  // 如果相等说明已经存在了要添加的数据；把数量加1就可以了；
+                     return true
+                 }
+                 return false 
+             })
+             if(!res){ // 如果res为false；说明没有要添加的数据；
+                goodsInfor.num = 1
+                cars.push(goodsInfor)
+                
+             }
+             store.commit(SYNC_UPDATE,cars) // 通知mutations中的相关方法更改state中的数据
+             localStorage.setItem('cars',JSON.stringify(cars))  // 通知模拟的后台去更改数据
+         },1)
+
+     },
+     deleteGoodInCar(store,goodInfo){
+		let cars =getData();
 		cars = cars.filter(item=>{
 			if(item._id == goodInfo._id){
 				return false;
@@ -46,6 +60,8 @@ export default {
         store.commit(SYNC_UPDATE, cars)
 	}
 }
-function getCar(){
-	return JSON.parse(localStorage.cars?localStorage.cars:"[]");
+
+// 依靠localStorage模拟后台
+function getData(){
+    return JSON.parse(localStorage.getItem('cars')?localStorage.getItem('cars'):'[]')
 }
\ No newline at end of file
diff --git a/src/store/const.js b/src/store/const.js
index 10b30ed..77dd506 100644
--- a/src/store/const.js
+++ b/src/store/const.js
@@ -1,2 +1,4 @@
-const SYNC_UPDATE = "SYNC_UPDATE"
-export { SYNC_UPDATE}
\ No newline at end of file
+const SYNC_UPDATE = 'SYNC_UPDATE'
+const REDUCENUM = 'REDUCENUM'
+
+export {SYNC_UPDATE,REDUCENUM}
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index 7e79dd4..661e36e 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,12 +1,14 @@
 export default {
-   computeTotal(state){
-        let cars = state.cars;
-        let total = { price: 0, num: 0 }
-        cars.forEach(item=>{
-            total.price += item.commoditysComponentList[0].commodityPrice * item.num;
-            total.num += item.num
-        })
-        total.price = total.price.toFixed(2);//保留2位小数 3.45
-        return total
-   }
+    computeTotal(state){
+        let arr = state.cars
+        var total = {price:0,num:0}
+       
+            arr.forEach(item=>{
+                total.num += item.num
+               
+                total.price += Number(item.SellPrice) * item.num
+            })
+            total.price = total.price.toFixed(2)
+            return total
+    }
 }
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index db3a1f8..0000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-import state from "./state"
-import mutations from "./mutations"
-import actions from "./actions"
-import getters from "./getters"
-export default new Vuex.Store({
-    getters,
-    mutations,
-    actions,
-    state
-})
\ No newline at end of file
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 1cb961b..e20154a 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,9 +1,10 @@
-import {SYNC_UPDATE} from "./const"
-export default {
-    [SYNC_UPDATE](state,newCar){
-        state.cars = newCar;
-    },
-    transfer(state,obj){
+import {SYNC_UPDATE,REDUCENUM} from './const'
+
+export default{
+     [SYNC_UPDATE](state,newCar){
+         state.cars = newCar
+     } ,
+     transfer(state,obj){
         state.obj = obj
     }
 }
\ No newline at end of file
diff --git a/src/store/state.js b/src/store/state.js
index 54c680b..05b5a86 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -1,4 +1,5 @@
 export default {
+    msg:1,
     cars:[],
     city:'北京',
     obj:Object
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..3ad0172
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// 引入state.js getters.js mutations.js actions.js 模块
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+import actions from './actions'
+
+export default new Vuex.Store({
+  state,getters,mutations,actions 
+})
diff --git a/src/views/category/detailCategory.vue b/src/views/category/detailCategory.vue
index 442d216..b61bd82 100644
--- a/src/views/category/detailCategory.vue
+++ b/src/views/category/detailCategory.vue
@@ -65,7 +65,6 @@ export default {
     obj:{
       handler(n,o){
         this.url = this.obj.interf
-        
       }
     }
   } 
diff --git a/src/views/category/moreCategoryList.vue b/src/views/category/moreCategoryList.vue
index 0223cc2..faf8e6b 100644
--- a/src/views/category/moreCategoryList.vue
+++ b/src/views/category/moreCategoryList.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+   
     <div class="header">
       <mt-navbar v-model="selected">
         <mt-tab-item id="1" @click.native="sortSell">销量</mt-tab-item>
@@ -25,7 +26,7 @@
             <span>￥{{f.SellPrice}}</span>
             <span>{{f.Spec}}</span>
             <span>
-              <i class="fa fa-plus-circle"></i>
+              <i class="fa fa-plus-circle" @click='addGoodsToCar(f)'></i>
             </span>
           </div>
         </div>
@@ -41,7 +42,13 @@
 </template>
 <script>
 import axios from 'axios'
+import {mapState} from 'vuex'
+import { Toast } from 'mint-ui';
 export default {
+  computed:{
+    ...mapState(['cars'])
+     
+  },
   data() {
     return {
       selected: "1",
@@ -59,6 +66,14 @@ export default {
     };
   },
   methods: {
+    addGoodsToCar(val){
+      // console.log(val)
+				this.$store.dispatch('addGoodsToCar',val)
+				Toast({
+					message: '加入购物车成功',
+					duration: 1000
+					});
+			},
     getMsg(url,likeName){
         this.$http.get(url).then(res => {
       // console.log(res.data.data.object_list);
@@ -143,16 +158,14 @@ export default {
        this.topp = topo
       
     });
-    console.log(this.$route.params.id, this.$route.params.name);
+    // console.log(this.$route.params.id, this.$route.params.name);
     var url = this.$route.params.id;
     var likeName = this.$route.params.name;
    
     /* 用于存放结果的数据 */
     if (url == undefined) {
-   
        this.$http.get("/api/yg/allCategoryData").then(res => {
       // console.log(res.data.data.object_list);
-        // console.log(res)
         var arrFruit = res.data.data.object_list;
           var resFruit = arrFruit.filter(item => {
           if (item.CommodityName.indexOf(likeName) !== -1) {
@@ -161,27 +174,14 @@ export default {
             return false;
           }
         });
-        // console.log(resFruit)
         this.fruits = resFruit
       }
     );
-  
-   
     }else{
       this.getMsg(url,likeName)
     }
-    
     // 加载完数据执行  按销量排序的方法
     this.sortSell();
-  },
-  
-  beforeRouteEnter: (to, from, next) => {
-    if (from.name === "category") {
-      //  this.$http.get(this.url).then(res=>{
-      //     console.log(res)
-      //  })
-    }
-    next();
   }
 };
 </script>
diff --git a/src/views/eat/index.vue b/src/views/eat/index.vue
index 64a93f2..a7b64e8 100644
--- a/src/views/eat/index.vue
+++ b/src/views/eat/index.vue
@@ -6,7 +6,7 @@
     >
         <mt-cell
             title="返回"
-            href="home"
+            to="/home"
         >
         </mt-cell>
         <router-link 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e78584e..bb7dfe5 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -62,6 +62,7 @@
 	</div>
 </template>
 <script>
+import { Toast } from 'mint-ui';
 	import {mapActions} from "vuex"
 	import homeHeader from "@/components/header"
 	import homeBanner from "@/components/banner"
@@ -90,7 +91,14 @@
 			}
 		},
 		methods:{
-			...mapActions(["addGoodInCar"])
+			// ...mapActions(["addGoodInCar"])
+			addGoodInCar(val){
+				this.$store.dispatch('addGoodInCar',val)
+				Toast({
+					message: '加入购物车成功',
+					duration: 1000
+					});
+			}
 		},
 		created(){
 			this.$http.get("/api/yg/dataBanner").then(res=>{
@@ -102,6 +110,10 @@
 			this.$http.get("/api/yg/dataSort").then(res=>{
 				this.dataSort = res.data.data.object_list;
 			})
+		},
+		beforeRouteEnter (to, from, next) {
+			 console.log(to.name)
+			 next()
 		}
 	}
 </script>
diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
index 619ba92..aa9ecb1 100644
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -1,197 +1,180 @@
 <template>
-	<div class="shoppingCart">
-		<!-- 购物车顶部 -->
-		<div class="top">
-			<p>登录可同步购物车内商品</p>
-			<router-link to="login" tag="div">登录</router-link>
-		</div>
+  <div class="shoppingCart">
+    <!-- 购物车顶部 -->
+    <div class="top">
+      <p>登录可同步购物车内商品</p>
+      <router-link to="login" tag="div">登录</router-link>
+    </div>
 
-		<!-- 空购物车提示信息 -->
-		<div class="imgBox" v-if="!cars.length">
-			<img src="/shoppingCart.png" alt="">
-			<span>购物车空空的，快去逛逛吧！</span>
-			<router-link to="home" tag="p">去逛逛</router-link>
-		</div>
-		<!-- 购物车商品信息 -->	
-		<div class="goodInfo" v-for="data in cars">
-			<img :src="data.commoditysComponentList[0].pictureUrl" alt="">
-			<div class="div1">
-				<p class="title">{{data.commoditysComponentList[0].commodityName}}</p>
-				<i class="fa fa-trash-o" @click="deleteGoodInCar(data)"></i>
-				<div class="div2">
-					<p>￥{{data.commoditysComponentList[0].commodityPrice}}</p>
-					<div class="changeNum">
-						<input type="button" @click="reduceGoodIncar(data)" value="-">
-						<p class="num">{{data.num}}</p>
-						<input type="button" @click="addGoodInCar(data)" value="+">
-					</div>
-				</div>
-			</div>
-		</div>		
-		<!-- 购物车底部 -->
-		<footer>
-			<p class="p1">全选</p>
-			<p class="p2">
-				<span>合计(不含运费)：￥{{computeTotal.price}}</span>
-			</p>
-			<div class="pay" :class="{active:cars.length}">去结算({{computeTotal.num}})</div>
-		</footer>
-	</div>
+    <!-- 空购物车提示信息 -->
+    <div class="imgBox" v-if="!carsList.length">
+      <img src="/shoppingCart.png" alt>
+      <span>购物车空空的，快去逛逛吧！</span>
+      <router-link to="home" tag="p">去逛逛</router-link>
+    </div>
+    <!-- 购物车商品信息 -->
+    <div class="goodInfo">
+      <div v-for="cl in carsList">
+        <div class="item">
+          <div class='left'>
+            <img style="height:1rem;width:1rem;" :src="cl.SmallPic" alt>
+          </div>
+          <div class="right">
+            <p class='fp'>{{cl.CommodityName}}</p>
+            <p class='fp'>{{cl.PromotionTag}}</p>
+            <p class='fp'>单价：￥{{cl.SellPrice}}</p>
+            <span style="margin-left:10px;">数量：</span>
+            <my-button @click.prevent="addGoodsToCar(cl)">+</my-button>
+            {{cl.num}}
+            <my-button @click.prevent="reduceNum(cl)">-</my-button>
+            <i class="fa fa-trash-o" @click="deleteGoodInCar(cl)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 购物车底部 -->
+    <footer>
+      <p class="p1">全选</p>
+      <p class="p2">
+        <span>合计(不含运费)：￥{{computeTotal.price}}</span>
+      </p>
+      <div class="pay" :class="{active:carsList.length}">去结算({{computeTotal.num}})</div>
+    </footer>
+  </div>
 </template>
 <script>
-	import {mapState,mapActions,mapGetters} from "vuex"
-	export default{
-		computed:{
-			...mapState({
-				cars:state=>state.cars
-			}),
-			...mapGetters(["computeTotal"])
-		},
-		methods:{
-		      ...mapActions(["addGoodInCar","reduceGoodIncar","deleteGoodInCar"]),
-		}	
-	}
+import { mapState, mapActions, mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapState({
+      carsList: state => state.cars
+    }),
+    ...mapGetters(["computeTotal"])
+  },
+  methods: {
+    ...mapActions(["addGoodsToCar", "reduceNum", "deleteGoodInCar"])
+  },
+  created() {
+    // console.log(this.carsList);
+  }
+};
 </script>
 <style lang="scss" scoped>
-	.shoppingCart{
-		padding-bottom: 0.4rem;
-		.top{
-			width:3.2rem;
-			height:0.3rem;
-			display:flex;
-			justify-content: space-around;
-			align-items: center;
-			padding:0 0.5rem;
-			p{
-				font-size: 0.12rem;
-				color:#999;
-			};
-			div{
-				width:0.5rem;
-				height:0.2rem;
-				font-size: 0.12rem;
-				border:1px solid #ccc;
-				border-radius: 0.05rem;
-				line-height: 0.2rem;
-				text-align: center;
-			}
-		};
-		.imgBox{
-			margin-top: 0.5rem;
-			width:3.2rem;
-			height:2rem;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: space-around;
-			img{
-				width: 1.5rem;
-				height:1rem;
-			};
-			span{
-				font-size: 0.12rem;
-				color:#999;
-			};
-			p{
-				width:1.2rem;
-				height:0.3rem;
-				border:1px solid #11b57c;
-				text-align: center;
-				line-height: 0.3rem;
-				color:#11b57c;
-				border-radius: 0.1rem;
-			}
-		};
-		.goodInfo{
-			width:100%;
-			height:0.8rem;
-			display: flex;
-			img{
-				width:0.8rem;
-				height:0.8rem;
-			};
-			.div1{
-				width:2.2rem;
-				display: flex;
-				flex-direction: column;
-			};
-			.div2{
-				display: flex;
-				height:0.2rem;
-				margin-top: 0.1rem;
-				justify-content: space-between;
-				p{
-					font-size: 0.12rem;
-					color:#f00;
-				}
-				.changeNum{
-					width:0.66rem;
-					input{
-						text-align: center;
-						height:0.18rem;
-					}
-					input:nth-child(1),input:nth-child(3){
-						width:0.18rem;
-						border:1px solid #ccc;
-						color:#666;
-					};
-					.num{
-						width:0.3rem;
-						height:0.18rem;
-						display: inline-block;
-						border-top: 1px solid #ccc;
-						border-bottom: 1px solid #ccc;
-						color:#000;
-						text-align: center;
-					}
-				}
-			};
-			.fa{
-				display: flex;
-				justify-content: flex-end;
-			};
-			.title{
-				height:0.2rem;
-				font-size: 0.1rem;
-				line-height: 0.3rem;
-				color:#000;
-			};	
-		}
-		footer{
-			display:flex;
-			width:100%;
-			height:0.4rem;
-			position:fixed;
-			bottom:0.4rem;
-			background:#fff;
-			.p1{
-				width:0.5rem;
-				text-align: center;
-				font-size: 0.1rem;
-				color:#000;
-				line-height: 0.4rem;
-			}
-			.p2{
-				width:1.7rem;
-				display:flex;
-				flex-direction: column;
-				align-items: flex-end;
-				font-size: 0.1rem;
-				color:#000;
-				justify-content: center;
-				padding-right: 0.1rem;
-			};
-			.pay{
-				width:1rem;
-				height:0.4rem;
-				background: #ccc;
-				color:#fff;
-				line-height: 0.4rem;
-				text-align: center;
-				&.active{
-					background: #fb3d3d;
-				}
-			}
-		}
-	}
+.shoppingCart {
+  padding-bottom: 0.4rem;
+  .top {
+    width: 3.2rem;
+    height: 0.3rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 0.5rem;
+    p {
+      font-size: 0.12rem;
+      color: #999;
+    }
+    div {
+      width: 0.5rem;
+      height: 0.2rem;
+      font-size: 0.12rem;
+      border: 1px solid #ccc;
+      border-radius: 0.05rem;
+      line-height: 0.2rem;
+      text-align: center;
+    }
+  }
+  .imgBox {
+    margin-top: 0.5rem;
+    width: 3.2rem;
+    height: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    img {
+      width: 1.5rem;
+      height: 1rem;
+    }
+    span {
+      font-size: 0.12rem;
+      color: #999;
+    }
+    p {
+      width: 1.2rem;
+      height: 0.3rem;
+      border: 1px solid #11b57c;
+      text-align: center;
+      line-height: 0.3rem;
+      color: #11b57c;
+      border-radius: 0.1rem;
+    }
+  }
+ 
+    .item {
+      border-bottom: 1px solid #ccc;
+      background: #fff;
+      display:flex;
+      flex-direction:row;
+      justify-content:flex-start;
+      .left {
+        
+      }
+
+      .right {
+       width: 2rem;
+        color: #000;
+        font-size: 0.12rem;
+        .fp {
+          margin: 0;
+          padding: 0;
+		      font-size:0.12rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        i{
+          width:0.3rem;height:0.3rem;
+          margin-left:0.3rem;
+          font-size:0.3rem;
+        }
+      }
+    
+  }
+  footer {
+    display: flex;
+    width: 100%;
+    height: 0.4rem;
+    position: fixed;
+    bottom: 0.4rem;
+    background: #fff;
+    .p1 {
+      width: 0.5rem;
+      text-align: center;
+      font-size: 0.1rem;
+      color: #000;
+      line-height: 0.4rem;
+    }
+    .p2 {
+      width: 1.7rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      font-size: 0.1rem;
+      color: #000;
+      justify-content: center;
+      padding-right: 0.1rem;
+    }
+    .pay {
+      width: 1rem;
+      height: 0.4rem;
+      background: #ccc;
+      color: #fff;
+      line-height: 0.4rem;
+      text-align: center;
+      &.active {
+        background: #fb3d3d;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file