new discovery

Author: brandonxiang

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.16.1",
     "fastclick": "^1.0.6",
+    "jsonp": "^0.2.1",
     "leaflet": "^1.0.2",
     "leaflet.locatecontrol": "^0.60.0",
     "object-assign": "^4.1.1",

src/components/GridLink.vue

@@ -0,0 +1,49 @@
+<template>
+  <card :header="{title:'更多服务'}">
+  <grid slot="content">
+    <grid-item v-for="item in items" :label="item.label" :link="item.link">
+      <img slot="icon" :src="item.img">
+    </grid-item>
+  </grid>
+  </card>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { Grid, GridItem, Card } from 'vux'
+
+export default {
+  data() {
+    return {
+      items: [{
+        label: "百度",
+        link: "https://www.baidu.com",
+        img: require("../assets/vux_logo.png"),
+      }, {
+        label: "滴滴",
+        link: "https://common.diditaxi.com.cn/general/webEntry?code=031RcUHP1bDB5717NpHP1U6KHP1RcUHV&state=123#/",
+        img: require("../assets/vux_logo.png"),
+      }, {
+        label: "美团外卖",
+        link: "https://takeaway.dianping.com/waimai/wxwallet#!index/source=redir",
+        img: require("../assets/vux_logo.png"),
+      }]
+    }
+  },
+
+  components: {
+    Grid,
+    GridItem,
+    Card
+  },
+
+  mounted() {
+    this.SET_TITLE(this.$t('Discovery'))
+    this.SET_RIGHT_OPTION({show:false})
+  },
+
+  methods: {
+    ...mapMutations(['SET_TITLE','SET_RIGHT_OPTION'])
+  }
+}
+</script>

src/network/api.js

@@ -1,3 +1,4 @@
+export const WEATHERUID = 'U4B4E3B9B9'
 export const WEATHERKEY = '5wetuvenll5qucca'
 export const AMAPKEY = 'ea889682997a181fd6678d9aaf23693a'
 export const weatherhost = 'https://api.thinkpage.cn/v3/weather'

src/network/getFutureWeather.js

@@ -0,0 +1,6 @@
+import axios from 'axios'
+import { weatherhost } from './api'
+
+export const getFutureWeather = (params) => axios.get(weatherhost + '/daily.json', {params})
+
+export const getNowWeather = (params) => axios.get(weatherhost + '/now.json', {params})

src/network/getNowWeather.js

@@ -0,0 +1,17 @@
+import jsonp from 'jsonp'
+import querystring from 'querystring'
+
+export default function(url, data, params) {
+  return new Promise((resolve, reject) => {
+    if (data) url += "?" + querystring.stringify(data)
+    params = params || {timeout: 15000}
+    if (!params.timeout) params.timeout = 15000
+    jsonp(url, params, (err, data) => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve(data)
+      }
+    })
+  })  
+}

src/network/getWeather.js

@@ -1,46 +1,37 @@
 <template>
-  <grid>
-    <grid-item v-for="item in items" :label="item.label" :link="item.link">
-      <img slot="icon" :src="item.img">
-    </grid-item>
-  </grid>
+  <panel header="我的博客" :footer="footer" :list="list" :type="type"></panel>
 </template>
 
 <script>
-import {mapMutations} from 'vuex'
-import { Grid, GridItem } from 'vux'
+   import {Panel} from 'vux'
+    
+    export default {
+        components:{
+            Panel,
+        },
 
-export default {
-  data() {
-    return {
-      items: [{
-        label: "百度",
-        link: "https://www.baidu.com",
-        img: require("../assets/vux_logo.png"),
-      }, {
-        label: "滴滴",
-        link: "https://common.diditaxi.com.cn/general/webEntry?code=031RcUHP1bDB5717NpHP1U6KHP1RcUHV&state=123#/",
-        img: require("../assets/vux_logo.png"),
-      }, {
-        label: "美团外卖",
-        link: "https://takeaway.dianping.com/waimai/wxwallet#!index/source=redir",
-        img: require("../assets/vux_logo.png"),
-      }]
+        data(){
+            return {
+                type:'1',
+                list: [{
+                    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
+                    title: '标题一',
+                    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
+                    url: '/component/cell'
+                }, {
+                    src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
+                    title: '标题二',
+                    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
+                    url: {
+                    path: '/component/radio',
+                    replace: false
+                    }
+                }],
+                footer: {
+                    title: '查看更多',
+                    url: 'http://vux.li'
+                }
+            }
+        }
     }
-  },
-
-  components: {
-    Grid,
-    GridItem,
-  },
-
-  mounted() {
-    this.SET_TITLE(this.$t('Discovery'))
-    this.SET_RIGHT_OPTION({show:false})
-  },
-
-  methods: {
-    ...mapMutations(['SET_TITLE','SET_RIGHT_OPTION'])
-  }
-}
 </script>

src/network/jsonp.js

@@ -9,19 +9,22 @@
       <popup-picker :title="$t('Language')" :data="langs" v-model="currentLang" @on-change="onChange"></popup-picker>
       <cell :title="$t('About')" link="/about" is-link></cell>
     </group>
+    <grid-link></grid-link>
   </div>
 </template>
 
 <script>
 import { mapMutations } from 'vuex'
 import { Group, Cell, Blur, PopupPicker } from 'vux'
+import GridLink from '../components/GridLink'
 
 export default {
   components: {
     Group,
     Cell,
     Blur,
     PopupPicker,
+    GridLink,
   },
 
   computed: {

src/pages/Discovery.vue

@@ -9,9 +9,9 @@
             <div class="vux-1px-t vux-1px-b future-box" v-for="item in future">
                 <span class="future-text">{{item.day}}</span>
                 <span class="future-text">日</span>
-                <img class="future-img" :src="require(`../assets/weather/${item.codeDay}.png`)">
+                <img class="future-img" :src="require(`../assets/weather/${item.code_day}.png`)">
                 <span class="future-text">夜</span>
-                <img class="future-img" :src="require(`../assets/weather/${item.codeNight}.png`)">
+                <img class="future-img" :src="require(`../assets/weather/${item.code_night}.png`)">
                 <span class="future-text">{{item.high}}</span>
                 <span class="future-text">{{item.low}}</span>
             </div>
@@ -20,21 +20,28 @@
 </template>
 
 <script>
-import { mapMutations, mapGetters} from 'vuex'
+
+import { mapMutations, mapGetters, mapActions} from 'vuex'
 
 export default {
 
     computed:{
         ...mapGetters(['now', 'future'])
     },
 
+    created(){
+        const fetch = [this.loadNowWeather(), this.loadDailyWeather()]
+        Promise.all(fetch)
+    },
+
     mounted() {
         this.SET_TITLE('天气')
         this.SET_RIGHT_OPTION({show:true,name:'城市',link:'cities'})
     },
 
     methods: {
-        ...mapMutations(['SET_TITLE','SET_RIGHT_OPTION'])
+        ...mapMutations(['SET_TITLE','SET_RIGHT_OPTION']),
+        ...mapActions(['loadNowWeather','loadDailyWeather'])
     }
 }
 </script>