添加城市页面

src/components/header/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="header">
-		<span>北京</span>
+		<router-link tag='span' to='/city' :AreaId='obj.AreaId'>{{obj.AreaName==null?'北京':obj.AreaName}}</router-link> 
 		<i class="fa fa-sort-down"></i>
 		<div>
 			<i class="fa fa-search"></i>
@@ -9,8 +9,13 @@
 	</div>
 </template>
 <script>
+import {mapState} from "vuex"
 	export default{
-		
+		 computed:{
+			 ...mapState({
+				 obj:state=>state.obj
+			 })
+		 }
 	}
 </script>
 <style lang="scss" scoped>

src/main.js

@@ -7,10 +7,13 @@ 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} from 'mint-ui'
+import { Navbar, TabItem,Lazyload,InfiniteScroll,Cell,Popup} from 'mint-ui'
+
 
+Vue.component("mt-popup", Popup);
 Vue.component("mt-navbar", Navbar);
 Vue.component("mt-tab-item", TabItem); 
+
 Vue.use(Lazyload);
 Vue.use(SIdentify);
 Vue.use(InfiniteScroll );

src/router/city.js

@@ -0,0 +1,5 @@
+export default {
+    path:'/city',
+    name:'city',
+    component:()=>import('@/views/home/city')
+}

src/router/index.js

@@ -14,14 +14,16 @@ import headerDetail from './headerDetail'
 import setcontent from './setcontent'
 import AboutUs from './AboutUs'
 import business from './business'
+import city from './city'
 import RegistrationAgreement from './RegistrationAgreement'
 
+
 Vue.use(Router)
 
 export default new Router({
 	routes: [
 		{path:"/",redirect:"/home"},
-		home,shoppingCart,detail,category,moreCategoryList,mine,login,eat,eatdetail,register,headerDetail,setcontent,AboutUs,business,RegistrationAgreement
+		home,city,shoppingCart,detail,category,moreCategoryList,mine,login,eat,eatdetail,register,headerDetail,setcontent,AboutUs,business,RegistrationAgreement
 	]
 })
 

src/store/actions.js

@@ -1,5 +1,8 @@
 import { SYNC_UPDATE } from "./const"
 export default {
+	transfer(store,obj){
+		store.commit('transfer',obj)
+	},
 	initCar(store){
 		let cars = getCar();
 		store.commit(SYNC_UPDATE,cars)

src/store/mutations.js

@@ -2,5 +2,8 @@ import {SYNC_UPDATE} from "./const"
 export default {
     [SYNC_UPDATE](state,newCar){
         state.cars = newCar;
+    },
+    transfer(state,obj){
+        state.obj = obj
     }
 }

src/store/state.js

@@ -1,3 +1,5 @@
 export default {
-    cars:[]
+    cars:[],
+    city:'北京',
+    obj:Object
 }

src/views/category/moreCategoryList.vue

@@ -146,39 +146,26 @@ export default {
     console.log(this.$route.params.id, this.$route.params.name);
     var url = this.$route.params.id;
     var likeName = this.$route.params.name;
-    /* 接口数组 */
-    var arrInter = [
-      "/api/yg/allFruit_list",
-      "/api/yg/allMeat_list",
-      "/api/yg/fastFood_list",
-      "/api/yg/homeFruit_list",
-      "/api/yg/milkCake_list",
-      "/api/yg/oil_list",
-      "/api/yg/seaFood_list",
-      "/api/yg/vegetables_list",
-      "/api/yg/wine_list",
-      "/api/yg/niceFood_list",
-      "/api/yg/egg_list"
-    ];
+   
     /* 用于存放结果的数据 */
     if (url == undefined) {
-     
-       this.$http.get("/api/yg/allFruit_list").then(res => {
+   
+       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 => {
+          var resFruit = arrFruit.filter(item => {
           if (item.CommodityName.indexOf(likeName) !== -1) {
             return true;
           } else {
             return false;
           }
         });
-        this.resultFruit = resFruit;
+        // console.log(resFruit)
+        this.fruits = resFruit
       }
     );
-   this.fruits = this.resultFruit
- 
+  
    
     }else{
       this.getMsg(url,likeName)

src/views/home/city.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <div class="hotCity">
+      <p>热门城市</p>
+      <div
+        class="oneCity"
+        v-for="hotCity in hotCitys"
+        :key="hotCity.AreaId"
+        :FirstLetter="hotCity.FirstLetter"
+        :AreaCode="hotCity.AreaCode"
+        @click="getArea(hotCity)"
+      >{{hotCity.AreaName}}</div>
+    </div>
+    <div class="moreCity">
+      <div class="everyCity" v-for="cl in cityLists" :key="cl.FirstLetter">
+        <p>{{cl.FirstLetter}}</p>
+        <div>
+          <span
+            v-for="detail in cl.CityList"
+            :key="detail.AreaId"
+            :AreaCode="detail.AreaCode"
+            :FirstLetter="detail.FirstLetter"
+            @click="getArea(detail)"
+          >{{detail.AreaName}}</span>
+        </div>
+      </div>
+    </div>
+    <mt-popup v-model="popupVisible" position="bottom" class="bottom">
+      <p class="oneP">{{haveName}}</p>
+      <p class="twoP" v-for="hc in haveCity"
+       :key="hc.AreaId"
+        @click="transfer(hc)">
+        {{hc.AreaName}}</p>
+    </mt-popup>
+  </div>
+</template>
+<script>
+ 
+export default {
+  data() {
+    return {
+      popupVisible: false,
+      hotCitys: [],
+      cityLists: [],
+      haveCity: [],
+      haveName: ""
+    };
+  },
+  created() {
+    this.$http.get("/api/yg/city_list").then(res => {
+      this.hotCitys = res.data.data.object_list[0].HotCityList[0].CityList;
+      this.cityLists = res.data.data.object_list[0].CityList;
+    });
+  },
+  methods: {
+     transfer(obj){
+       console.log("===================")
+        this.$store.dispatch('transfer',obj)
+        this.popupVisible = false
+        this.$router.push("/")
+     },
+    getArea(detail) {
+      console.log(detail);
+      this.$http.get("/api/yg/detailCity").then(res => {
+        console.log(res);
+        var res = res.data.data.object_list;
+        var arr = res.filter(item => {
+          if (item.AreaCode === detail.AreaCode) {
+            return true;
+          } else {
+            return false;
+          }
+        });
+        this.haveName = detail.AreaName;
+        this.haveCity = arr;
+        this.popupVisible = true;
+      });
+    },
+   
+  }
+};
+</script>
+<style lang='scss' scoped>
+/* 定义公共样式1 */
+.publicOne {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+/* 定义公共样式2 */
+.publicTwo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  width: 0.6rem;
+  height: 0.2rem;
+  margin: 0.05rem 0.2rem;
+  border: 1px solid #ccc;
+  border-radius: 0.3rem;
+  font-size:0.12rem;
+}
+.bottom {
+  width: 100%;
+  p {
+    border-bottom: 1px solid #ccc;
+    width: 100%;
+    height: 0.22rem;
+  }
+  .oneP {
+    padding-left: 0.1rem;
+  }
+  .twoP {
+    padding-left: 0.2rem;
+  }
+}
+.hotCity {
+  @extend .publicOne;
+  height: 2.1rem;
+  width: 100%;
+  background: #f4f4f4;
+
+  p {
+    width: 100%;
+    padding: 0.1rem 0 0 0.1rem;
+  }
+  .oneCity {
+    @extend .publicTwo;
+  }
+}
+.moreCity {
+  .everyCity {
+    p {
+      width: 100%;
+      height: 0.2rem;
+      background: #f4f4f4;
+      padding-left: 0.1rem;
+      line-height: 0.2rem;
+    }
+    div {
+      @extend .publicOne;
+      span {
+        @extend .publicTwo;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -86,6 +86,7 @@
 				dataBanners:[],
 				dataList:[],
 				dataSort:[]
+				
 			}
 		},
 		methods:{