对接了热门城市和城市组的接口

Author: fanny

src/commitDetail.txt

@@ -20,4 +20,4 @@ d5c6d2bf873068e96234181d1afc507fce71a19a
 6f37a2e017ae903142b25db9a9e67b06e5138412
 *** 增加一个scroll事件的监听test.vue
 
-*** 完成通用组件 
+*** 新增alertTip.vue css rule

src/components/header/head.vue

@@ -33,9 +33,12 @@ export default {
   },
   mounted () {
     // 获取用户信息
-    this.$axios.get(urls.user + '?user_id=' + getStore('user_id')).then((res) => {
-      this.$store.commit('GET_USERINFO', res)
-    })
+    let userId = getStore('user_id')
+    if (userId) {
+      this.$axios.get(urls.user + '?user_id=' + userId).then((res) => {
+        this.$store.commit('GET_USERINFO', res)
+      })
+    }
   },
   props: ['signinUp', 'headTitle', 'goBack'],
   computed: {

src/config/env.js

@@ -9,7 +9,7 @@ let routerMode = 'hash'
 let imgBaseUrl = ''
 if (process.env.NODE_ENV === 'development') {
   imgBaseUrl = '/img/'
-  baseUrl = '//elm.cangdu.org'
+  baseUrl = '//localhost:8001'
 } else if (process.env.NODE_ENV === 'production') {
   baseUrl = '//elm.cangdu.org'
   imgBaseUrl = '//elm.cangdu.org/img/'

src/main.js

@@ -25,16 +25,10 @@ const axiosIns = axios.create()
 // 在main.js设置全局的请求次数，请求的间隙
 axiosIns.defaults.retry = 4
 axiosIns.defaults.retryDelay = 1000
-axiosIns.defaults.timeout = 5000
+axiosIns.defaults.timeout = 20000
 axiosIns.defaults.baseURL = baseUrl
 // 添加请求拦截器
 axiosIns.interceptors.request.use(function (config) {
-  // 在发送请求之前做些什么
-  // const token = window.localStorage.getItem('token')
-  // 把token放到header里面
-  // if (token) {
-  //   config.headers['token'] = token
-  // }
   return config
 }, function (error) {
   // 对请求错误做些什么
@@ -78,10 +72,10 @@ ajaxMethod.forEach((method) => {
   api[method] = function (uri, data, config) {
     return new Promise(function (resolve, reject) {
       axiosIns[method](uri, data, config).then((response) => {
-        if (response.data.code === 401) {
+        if (response.data.status === 401) {
           instance.$router.replace('/login')
-        } else if (response.data.code === 200) {
-          resolve(response)
+        } else if (response.data.status === 200) {
+          resolve(response.data.data)
         }
       }).catch(function (error) {
         console.log(error)

src/page/home/home.vue

@@ -3,6 +3,36 @@
     <head-top signin-up='home'>
       <span slot='logo' class="head_logo"  @click="reload">ele.me</span>
     </head-top>
+    <nav class="city_nav">
+      <div class="city_tip">
+        <span>当前定位城市：</span>
+        <span>定位不准确， 请在城市列表中选择</span>
+      </div>
+      <router-link :to="'/city/' + guessCityid" class="guess_city">
+        <span>{{guessCity}}</span>
+        <svg class="arrow_right">
+          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
+        </svg>
+      </router-link>
+      <section class="hot_city_container">
+        <h4 class="city_title">热门城市</h4>
+        <ul class="citylistul clear">
+          <router-link tag="li" v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">{{item.name}}</router-link>
+        </ul>
+      </section>
+      <section class="group_city_container">
+        <ul class="letter_classify">
+          <li class="letter_classify_li" v-for="(value, key, index) in sortgroupcity" :key="key">
+            <h4 class="city_title">{{key}}
+              <span v-if="index === 0">(按字母排序)</span>
+            </h4>
+            <ul class="groupcity_name_container citylistul clear">
+              <router-link tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">{{item.name}}</router-link>
+            </ul>
+          </li>
+        </ul>
+      </section>
+    </nav>
   </div>
 </template>
 <script>
@@ -18,16 +48,12 @@ export default {
     }
   },
   mounted () {
-    // 获取当前城市
     // 获取热门城市
-    let guessCityObj = this.getCity('guess')
-    this.hotcity = this.getCity('hot')
+    this.getHotCity('hot')
     // 获取所有城市
-    this.groupcity = this.getCity('group')
-    if (this.guessCity) {
-      this.guessCity = guessCityObj.name
-      this.guessCityid = guessCityObj.id
-    }
+    this.getGroupCity('group')
+    // 获取猜想城市
+    // this.getGuessCity('guess')
   },
   components: {
     headTop
@@ -44,11 +70,26 @@ export default {
       }
       return sortobj
     }
+
   },
   methods: {
-    getCity (typeValue) {
+    getGuessCity (typeValue) {
+      this.$axios.get(urls.city + '?type=' + typeValue).then((res) => {
+        this.guessCityObj = res
+        if (this.guessCityObj) {
+          this.guessCity = this.guessCityObj.name
+          this.guessCityid = this.guessCityObj.id
+        }
+      })
+    },
+    getGroupCity (typeValue) {
+      this.$axios.get(urls.city + '?type=' + typeValue).then((res) => {
+        this.groupcity = res
+      })
+    },
+    getHotCity (typeValue) {
       this.$axios.get(urls.city + '?type=' + typeValue).then((res) => {
-        return res
+        this.hotcity = res
       })
     },
     // 点击图标刷新页面

src/style/home.scss

@@ -5,4 +5,72 @@
     height: 1rem;
     @include sc(.7rem, $fc);
     font-weight: 400;
+}
+.city_nav {
+    padding-top: 2.35rem;
+    margin-bottom: .4rem;
+    border-top: 1px solid $bc;
+    .city_tip {
+        @include fj;
+        padding: 0 .45rem;
+        line-height: 1.45rem;
+        span:nth-of-type(1) {
+            @include sc(.55rem, #666);
+        }
+        span:nth-of-type(2) {
+            @include sc(.475rem, #9f9f9f);
+            font-weight: 900;
+        }
+    }
+    .guess_city {
+        @include fj;
+        padding: 0 .45rem;
+        border-top: 1px solid $bc;
+        border-bottom: 2px solid $bc;
+        height: 1.8rem;
+        @include font(0.75rem, 1.8rem);
+        span:nth-of-type(1) {
+            color:$blue;
+        }
+        .arrow_right {
+            @include wh(.6rem, 1.6rem);
+            fill: #999;
+        }
+    }
+}
+.hot_city_container {
+    margin-bottom: .4rem;
+    background-color: $fc;
+}
+.citylistul {
+    li {
+      float: left;
+      border-bottom: .025rem solid $bc;
+      border-right: .025rem solid $bc;
+      @include wh (25%, 1.75rem);
+      @include font(.6rem, 1.75rem);
+      text-align: center;
+      color: $blue; 
+    }
+    li:nth-of-type(4n){
+        border-right: none;
+    }
+}
+.city_title {
+    border-top: 2px solid $bc;
+    border-bottom: 1px solid $bc;
+    @include font(0.55rem, 1.45rem, "Helvetica Neue");
+    text-indent: 0.45rem;
+    color: #666;
+        font-weight: 400;
+}
+.letter_classify_li{
+    margin-bottom: 0.4rem;
+    border-bottom: 1px solid $bc;
+    background-color: $fc;
+    .groupcity_name_container{
+        li{
+            color: #666;
+        }
+    }
 }