商品列表链接到商品详情

yindong999 · Jun 11, 2019 · c07a4ee · c07a4ee
1 parent 3a24f0f
commit c07a4ee
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 105 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -13,7 +13,8 @@
 		},
 		components:{
 			tabBar
-		}
+		},
+		
 	}
 </script>
 <style lang="scss" scoped>

diff --git a/src/components/tabBar/index.vue b/src/components/tabBar/index.vue
@@ -28,26 +28,31 @@
 		created(){
         //全局前置路由钩子
         router.beforeEach((to,from,next)=>{
-            switch (to.name) {
-                case "home":
-                    this.isShow = true
-                    break;
-                case "category":
-                    this.isShow = true
-                    break;
-                case "shoppingCart":                  
-                    this.isShow = true
-                    break;
-                case "moreCategoryList":                  
-                    this.isShow = true
-                    break;
-                case "mine":                   
-                    this.isShow = true
-                    break;
-                default:
-                    this.isShow = false
-                    break;
-            }
+			console.log(to.name)
+			console.log(this)
+
+            // switch (to.name) {
+
+                // case "home":
+				// 	this.isShow = true
+					
+                //     break;
+                // case "category":
+                //     this.isShow = true
+                //     break;
+                // case "shoppingCart":                  
+                //     this.isShow = true
+                //     break;
+                // case "moreCategoryList":                  
+                //     this.isShow = true
+                //     break;
+                // case "mine":                   
+                //     this.isShow = true
+                //     break;
+                // default:
+                //     this.isShow = false
+                //     break;
+            // }
             next();
         })
     }

diff --git a/src/store/state.js b/src/store/state.js
@@ -2,5 +2,6 @@ export default {
     msg:1,
     cars:[],
     city:'北京',
-    obj:Object
+    obj:Object,
+    url:''
 }
diff --git a/src/views/category/moreCategoryList.vue b/src/views/category/moreCategoryList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-
+       
     <div class="header">
       <mt-navbar v-model="selected">
         <mt-tab-item id="1" @click.native="sortSell">销量</mt-tab-item>
@@ -16,81 +16,90 @@
         </mt-tab-item>
       </mt-navbar>
     </div>
-    <div class="content" >
-      <div class="eveFruit" v-for="f in fruits" :key="f._id">
-        <img :src="f.SmallPic" alt>
-        <div class="txt">
-          <p>{{f.CommodityName}}</p>
-          <p>{{f.SubTitle}}</p>
-          <div class="bott">
-            <span>￥{{f.SellPrice}}</span>
-            <span>{{f.Spec}}</span>
-            <span>
-              <i class="fa fa-plus-circle" @click='addGoodsToCar(f)'></i>
-            </span>
+    <div class="content">
+
+        <div class="eveFruit" v-for="f in fruits" :key="f._id" @click="toDetail(f.CommodityId)">
+          <img :src="f.SmallPic" alt>
+          <div class="txt">
+            <p>{{f.CommodityName}}</p>
+            <p>{{f.SubTitle}}</p>
+            <div class="bott">
+              <span>￥{{f.SellPrice}}</span>
+              <span>{{f.Spec}}</span>
+              <span>
+                <i class="fa fa-plus-circle" @click.stop="addGoodsToCar(f)"></i>
+              </span>
+            </div>
           </div>
         </div>
-      </div>
+
     </div>
-    <router-link tag='div' to='/shoppingCart'  class="cart">
+    <router-link tag="div" to="/shoppingCart" class="cart">
       <i class="fa fa-shopping-cart"></i>
-   </router-link>
+    </router-link>
     <div class="backTop" @click="backTop" v-if="backFlag">
-      <i class="fa fa-arrow-up"></i> 
+      <i class="fa fa-arrow-up"></i>
     </div>
+
+
   </div>
+
 </template>
 <script>
-import axios from 'axios'
-import {mapState} from 'vuex'
-import { Toast } from 'mint-ui';
+import axios from "axios";
+import { mapState } from "vuex";
+import { Toast } from "mint-ui";
 export default {
-  computed:{
-    ...mapState(['cars'])
-     
+  computed: {
+    ...mapState(["cars"])
   },
   data() {
     return {
       selected: "1",
       fruits: [],
-      resultFruit:[],
+      resultFruit: [],
       flag: true,
       num: 1,
       backFlag: true,
       url: "",
-       limit: 6,
-       topp:0,
+      limit: 6,
+      topp: 0,
       page: 1,
-      hasMore:true, // 判断是否有更多数据的标志
+      hasMore: true, // 判断是否有更多数据的标志
       loading: false // 默认是false, 触发无限滚动
     };
   },
   methods: {
-    addGoodsToCar(val){
+    toDetail(val) {
+      console.log("val:" + val);
+      this.$router.push({ path: "/detail", query: { CommodityId: val } });
+    },
+    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);
-      if (likeName === "全部") {
-        this.fruits = res.data.data.object_list;
-      } else {
-        var arrFruit = res.data.data.object_list;
-        var resFruit = arrFruit.filter(item => {
-          if (item.CommodityName.indexOf(likeName) !== -1) {
-            return true;
-          } else {
-            return false;
-          }
-        });
-        this.fruits = resFruit;
-      }
-    });
+      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);
+        if (likeName === "全部") {
+          this.fruits = res.data.data.object_list;
+        } else {
+          var arrFruit = res.data.data.object_list;
+          var resFruit = arrFruit.filter(item => {
+            if (item.CommodityName.indexOf(likeName) !== -1) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          this.fruits = resFruit;
+        }
+      });
     },
     backTop() {
       window.scrollTo(0, 0);
@@ -151,34 +160,31 @@ export default {
     }
   },
   created() {
-    
     /* 添加窗口滚动事件监听 */
     window.addEventListener("scroll", function() {
       var topo = document.documentElement.scrollTop;
-       this.topp = topo
-      
+      this.topp = topo;
     });
     // 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);
+      this.$http.get("/api/yg/allCategoryData").then(res => {
+        // console.log(res.data.data.object_list);
         var arrFruit = res.data.data.object_list;
-          var resFruit = arrFruit.filter(item => {
+        var resFruit = arrFruit.filter(item => {
           if (item.CommodityName.indexOf(likeName) !== -1) {
             return true;
           } else {
             return false;
           }
         });
-        this.fruits = resFruit
-      }
-    );
-    }else{
-      this.getMsg(url,likeName)
+        this.fruits = resFruit;
+      });
+    } else {
+      this.getMsg(url, likeName);
     }
     // 加载完数据执行  按销量排序的方法
     this.sortSell();
@@ -289,10 +295,10 @@ export default {
     font-size: 0.2rem;
   }
 }
-.show{
-  display:block;
+.show {
+  display: block;
 }
-.appear{
-  display:none;
+.appear {
+  display: none;
 }
 </style>
diff --git a/src/views/detail/index.vue b/src/views/detail/index.vue
@@ -1,16 +1,18 @@
 <template>
 	<div class="detail">
-		<router-link to="home" tag="div" class="back"><i class="fa fa-arrow-left"></i></router-link> 
-		<img :src="goodInfo.pictureUrl" alt="">
-		<p class="p1">{{goodInfo.commodityName}}</p>
-		<p class="p2">{{goodInfo.subTitle}}</p>
-		<p class="p3">￥{{goodInfo.commodityPrice}}</p> 
+		<div @click="goBack"  class="back"><i class="fa fa-arrow-left"></i></div> 
+		<img :src="goodInfo.SmallPic" alt="">
+		<p class="p1">{{goodInfo.CommodityName}}</p>
+		<p class="p2">{{goodInfo.SubTitle}}</p>
+		<p class="p3">￥{{goodInfo.SellPrice}}</p> 
 		<p class="p5">不支持七天无理由退货</p>
 		<span class="span1">规格</span>
 		<p class="p4">
-			<span>{{goodInfo.commodityUnit}}</span>
-			<span>{{goodInfo.commoditySpec}}</span>
+			<span>{{goodInfo.Spec}}</span>
 		</p>
+
+			<span>{{goodInfo.PromotionTag}}</span>
+
 		<div class="num">
 			<span>数量</span>
 			<div class="changeNum">
@@ -27,11 +29,15 @@
 	</div>
 </template>
 <script>
+import {mapState} from 'vuex'
+
 	export default {
 		data(){
 			return{
 				num:1,
-				goodInfo:Object
+				goodInfo:Object,
+				path:''
+				
 			}
 		},
 		methods:{
@@ -42,17 +48,22 @@
 				if(this.num > 1){
 					this.num--;
 				}
+			},
+			getDetailData(){
+				var url = this.$route.query.CommodityId
+				console.log(url)
+				this.$http.get("/api/yg/allCategoryList/" + url).then(res=>{
+				console.log(res)
+				this.goodInfo = res.data.data.object_list[0]
+			})
+			},
+			goBack(){
+				this.$router.push({path:this.path})
 			}
 		},
 		created(){
-			this.$http.get("/api/yg/" + this.$route.params.api).then(res=>{
-                for(var i in res.data.data.object_list){
-                	if(res.data.data.object_list[i]._id == this.$route.params.id){
-                		 this.goodInfo = Object.assign({},res.data.data.object_list[i].commoditysComponentList[0])
-                	}
-                }
-			})	
-		}
+				this.getDetailData();
+		} 
 	}
 </script>
 <style lang="scss" scoped>
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,8 @@ @@
     		},
     		components:{
     			tabBar
-    		}
+    		},
     	}
     </script>
     <style lang="scss" scoped>
@@ Expand Down @@