4.gif

    1. <template>
    2.   <div>
    3.     <p class="name">热门城市</p>
    4.       <router-link
    5.         to="/home/nowplaying"
    6.          v-for="vas of hotcities"
    7.         :key="vas.id"
    8.         @click.native="handleClick(vas.name)"
    9.       >
    10.         <span class="city">{{vas.name}}</span>
    11.       </router-link>
    12.     <van-index-bar v-for="(item,index) of cities" :key="index">
    13.       <van-index-anchor :index="index" />
    14.       <router-link
    15.         to="/home/nowplaying"
    16.         @click.native="handleClick(value.name)"
    17.         v-for="value of item"
    18.         :key="value.id"
    19.       >
    20.         <van-cell :title="value.name" />
    21.       </router-link>
    22.     </van-index-bar>
    23.   </div>
    24. </template>
    26. <script>
    27. export default {
    28.   name: "location",
    29.   data() {
    30.     return {
    31.       hotcities: [],
    32.       cities: []
    33.     };
    34.   },
    35.   mounted() {
    36.     this.axios.get("/api/city").then(res => {
    37.       this.hotcities = res.data.data.hotCities;
    38.       console.log(this.hotcities);
    39.       this.cities = res.data.data.cities;
    40.       console.log(this.cities);
    41.     });
    42.   },
    43.   methods: {
    44.     handleClick(city) {
    45.       this.$store.dispatch("changeCity", city);
    46.       console.log(city);
    47.     }
    48.   }
    49. };
    50. </script>
    52. <style scoped>
    53. .city{
    54.     font-size: 15px;
    55.     color: black;
    56.     padding-left: 10px;
    57. }
    58. </style>
    1.  <router-link class="btn" to="/location">{{this.$store.state.city}}</router-link>
    2. <van-swipe class="pic-wrap">
    5. .btn{
    6.   position: absolute;
    7.   left: 10px;
    8.   top: 10px;
    9.   z-index: 500;
    10.   padding-left: 20px;
    11.   padding-right: 20px;
    12.   line-height: 30px;
    13.   border-radius: 30px;
    14.   font-size: 15px;
    15.   color: #fff;
    16.   background-color:rgba(15, 15, 15, 0.3);
    17. }
    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    4. Vue.use(Vuex)
    5. function getCity(){
    6.   let defaultCity = "武汉";
    7.   if(localStorage.getItem("city")){
    8.     defaultCity = localStorage.getItem("city")
    9.   }
    10.   return defaultCity
    11. }
    12. export default new Vuex.Store({
    13.   state: {
    14.     isLoading:true,
    15.     city:getCity()
    16.   },
    17.   mutations: {
    18.     toggleCity(state,city){
    19.       state.city = city;
    20.     }
    21.   },
    22.   actions: {
    23.     changeCity(ctx,city){
    24.       ctx.commit("toggleCity",city)
    25.       localStorage.setItem("city",city)
    26.     }
    27.   },
    28.   modules: {
    29.   }
    30. })