weather pages

package.json

@@ -9,6 +9,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.16.1",
     "fastclick": "^1.0.6",
     "leaflet": "^1.0.2",
     "leaflet.locatecontrol": "^0.60.0",

src/App.vue

@@ -3,7 +3,8 @@
     <view-box ref="viewBox">
       <x-header :left-options="{showBack: false}">
         {{title}}
-        <a v-show="rightOption.show" slot="right" :href="'#/'+rightOption.link">{{rightOption.name}}</a>
+        <router-link v-if="rightOption.show" slot="right"
+         :to="rightOption.link">{{rightOption.name}}</router-link>
       </x-header>
       <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
         <router-view class="router-view"></router-view>

src/network/api.js

@@ -0,0 +1,4 @@
+export const WEATHERKEY = '5wetuvenll5qucca'
+export const AMAPKEY = 'ea889682997a181fd6678d9aaf23693a'
+export const weatherhost = 'https://api.thinkpage.cn/v3/weather'
+export const amaphost = 'https://restapi.amap.com/v3/geocode/regeo'

src/network/getNowWeather.js

@@ -0,0 +1,2 @@
+import {weatherhost} from './api'
+

src/pages/Weather.vue

@@ -20,40 +20,12 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, mapGetters} from 'vuex'
 
 export default {
-    data() {
-        return {
-            now: {
-                cityName: 'Shenzhen',
-                text: 'Sunny',
-                temperature: 20,
-            },
-            future: [
-                {
-                    day: '今日',
-                    codeDay: '1',
-                    codeNight: '2',
-                    high: 25,
-                    low: 20,
-                },
-                {
-                    day: '明天',
-                    codeDay: '1',
-                    codeNight: '2',
-                    high: 25,
-                    low: 20,
-                },
-                {
-                    day: '后天',
-                    codeDay: '1',
-                    codeNight: '2',
-                    high: 25,
-                    low: 20,
-                },
-            ]
-        }
+
+    computed:{
+        ...mapGetters(['now', 'future'])
     },
 
     mounted() {

src/router/index.js

@@ -74,6 +74,6 @@ else {
 }
 
 
-const router = new VueRouter({ routes })
+const router = new VueRouter({mode:'history', routes })
 
 export default router

src/store/actions.js

@@ -10,3 +10,5 @@ export const deleteCity = makeAction(types.DELETE_CITY)
 export const toggleCity = makeAction(types.TOGGLE_CITY)
 
 export const updateDirction = makeAction(types.UPDATE_DIRECTION)
+
+// export const getNowWeather = 

src/store/getters.js

@@ -10,4 +10,8 @@ export const selectedCities =  (state) => state.cities.filter(city => state.map.
 
 export const cities = state => state.cities
 
-export const rightOption = state => state.rightOption
+export const rightOption = state => state.rightOption
+
+export const now = state => state.now
+
+export const future = state => state.future

src/store/mutation-types.js

@@ -8,4 +8,8 @@ export const UPDATE_DIRECTION = "UPDATE_DIRECTION"
 
 export const SET_TITLE = "SET_TITLE"
 
-export const SET_RIGHT_OPTION = 'SET_RIGHT_OPTION'
+export const SET_RIGHT_OPTION = 'SET_RIGHT_OPTION'
+
+export const SET_NOW_WEATHER = 'SET_NOW_WEATHER'
+
+export const SET_FUTURE_WEATHER = 'SET_FUTURE_WEATHER'

src/store/mutations.js

@@ -30,5 +30,13 @@ export default {
 
   [types.SET_RIGHT_OPTION](state, rightOption){
     state.rightOption = rightOption
+  },
+
+  [types.SET_NOW_WEATHER](state, now){
+    state.now = now
+  },
+
+  [types.SET_FUTURE_WEATHER](state, future){
+    state.future = future
   }
 }

src/store/store.js

@@ -3,17 +3,17 @@ import * as getters from './getters'
 import * as actions from './actions'
 
 const state = {
-  title:'地图',
+  title: '地图',
   direction: 'forward',
-  map:{
+  map: {
     cityName: 'Shenzhen',
     coordinate: [22.5455537937, 114.0544373601],
-    selectedNames: ['Shenzhen', 'Beijing','Shanghai'],
+    selectedNames: ['Shenzhen', 'Beijing', 'Shanghai'],
   },
-  rightOption:{
+  rightOption: {
     show: true,
-    name:'城市',
-    link:'cities',
+    name: '城市',
+    link: 'cities',
   },
   cities: [
     { name: 'Shenzhen', coordinates: [22.5455537937, 114.0544373601] },
@@ -26,7 +26,34 @@ const state = {
     { name: 'Xian', coordinates: [34.3427473471, 108.9351962803] },
     { name: 'Wuhan', coordinates: [30.5951668577, 114.2998018195] }
   ],
-
+  now: {
+    cityName: 'Shenzhen',
+    text: 'Sunny',
+    temperature: 20,
+  },
+  future: [
+    {
+      day: '今日',
+      codeDay: '1',
+      codeNight: '2',
+      high: 25,
+      low: 20,
+    },
+    {
+      day: '明天',
+      codeDay: '1',
+      codeNight: '2',
+      high: 25,
+      low: 20,
+    },
+    {
+      day: '后天',
+      codeDay: '1',
+      codeNight: '2',
+      high: 25,
+      low: 20,
+    },
+  ]
 };
 
 export default {

www/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><title></title><meta name=format-detection content="telephone=no"><meta name=format-detection content="email=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><link href=static/css/app.4b470795bb1a0aac2231ab236694e52d.css rel=stylesheet></head><body ontouchstart><div id=app></div><script type=text/javascript src=static/js/manifest.d4656fd9bedf3bc9ea40.js></script><script type=text/javascript src=static/js/vendor.bec7213b16d754ec4d4a.js></script><script type=text/javascript src=static/js/app.931a6ae2c3fcf70dd9f4.js></script></body></html>
+<!DOCTYPE html><html><head><title></title><meta name=format-detection content="telephone=no"><meta name=format-detection content="email=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><link href=static/css/app.c6cd963247f10bcd2bc803ef623e0506.css rel=stylesheet></head><body ontouchstart><div id=app></div><script type=text/javascript src=static/js/manifest.bfe82b42cf8a38e31fe7.js></script><script type=text/javascript src=static/js/vendor.e0d3a0d1c4d6e0fcae0e.js></script><script type=text/javascript src=static/js/app.39248fcefdfe65656f6a.js></script></body></html>