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>

src/pages/Setting.vue

@@ -1,5 +1,11 @@
 import { makeAction } from '../utils/actionTools'
 import * as types from './mutation-types'
+import { getNowWeather, getFutureWeather } from '@/network/getWeather'
+import { weatherhost, WEATHERKEY, WEATHERUID } from '@/network/api'
+import jsonp from '@/network/jsonp'
+import { base64 } from 'vux'
+const crypto = require('crypto')
+import querystring from 'querystring'
 
 export const loadCoordinates = ({ commit }) => { }
 
@@ -11,4 +17,65 @@ export const toggleCity = makeAction(types.TOGGLE_CITY)
 
 export const updateDirction = makeAction(types.UPDATE_DIRECTION)
 
-// export const getNowWeather = 
+export const loadNowWeather = ({commit}) => {
+    getNowWeather({
+        key:WEATHERKEY,
+        location: 'shenzhen',
+        language:'zh-Hans',
+        unit:'c',
+    }).then((res)=>{
+        commit('SET_NOW_WEATHER', res.data.results[0].now)
+    })
+}
+
+export const loadDailyWeather = ({commit}) => {
+    getFutureWeather({
+        key:WEATHERKEY,
+        location: 'shenzhen',
+        language:'zh-Hans',
+        unit:'c',
+        start:0,
+        days:5,
+    }).then((res)=>{
+        commit('SET_FUTURE_WEATHER', res.data.results[0].daily)
+    })
+}
+
+// export const loadNowWeather = ({ commit, state }) => {
+
+//     var params = {}
+//     params.ts = Math.floor((new Date()).getTime() / 1000); // 当前时间戳
+//     params.ttl = 300; // 过期时间
+//     params.uid = WEATHERUID; // 用户ID
+
+//     var str = querystring.encode(params); // 构造请求字符串
+
+//     // 使用 HMAC-SHA1 方式，以API密钥（key）对上一步生成的参数字符串进行加密
+//     params.sig = crypto.createHmac('sha1', WEATHERKEY)
+//         .update(str)
+//         .digest('base64'); // 将加密结果用 base64 编码，并做一个 urlencode，得到签名 sig
+
+
+//     params.language = 'zh-Hans'
+//     params.unit = 'c'
+//     params.location = state.now.cityName
+
+//     jsonp(weatherhost + '/now.json', params).then((res) => {
+//         commit('SET_NOW_WEATHER', res.data.results[0].now)
+//     })
+// }
+// export const loadDailyWeather = ({ commit, state }) => {
+//     const params = Object.assign({
+//         uid: WEATHERUID,
+//         ts: new Date().getTime(),
+//         sig: crypto.createHmac("sha1", WEATHERKEY).digest().toString('base64'),
+//         language: 'zh-Hans',
+//         unit: 'c',
+//         start: 0,
+//         days: 3
+//     }, { location: state.now.cityName })
+
+//     jsonp(weatherhost + '/daily.json', params).then((res) => {
+//         commit('SET_FUTURE_WEATHER', res.data.results[0].daily)
+//     })
+// }

src/pages/Weather.vue

@@ -34,10 +34,13 @@ export default {
   },
 
   [types.SET_NOW_WEATHER](state, now){
-    state.now = now
+    state.now = Object.assign(state.now, now)
   },
 
   [types.SET_FUTURE_WEATHER](state, future){
     state.future = future
+    state.future[0].day = '今日'
+    state.future[1].day = '明天'
+    state.future[2].day = '后天'
   }
 }

src/store/actions.js

@@ -30,26 +30,30 @@ const state = {
     cityName: 'Shenzhen',
     text: 'Sunny',
     temperature: 20,
+    code:'14',
   },
   future: [
     {
       day: '今日',
-      codeDay: '1',
-      codeNight: '2',
+      date: '2017-05-13',
+      code_day: '1',
+      code_night: '2',
       high: 25,
       low: 20,
     },
     {
       day: '明天',
-      codeDay: '1',
-      codeNight: '2',
+      date: '"2017-05-14"',
+      code_day: '1',
+      code_night: '2',
       high: 25,
       low: 20,
     },
     {
-      day: '后天',
-      codeDay: '1',
-      codeNight: '2',
+      day:'后天',
+      date: '"2017-05-15"',
+      code_day: '1',
+      code_night: '2',
       high: 25,
       low: 20,
     },

src/store/mutations.js

@@ -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.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>
+<!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.4991fa34f3c2b5f8f86172c9c2ae23e8.css rel=stylesheet></head><body ontouchstart><div id=app></div><script type=text/javascript src=static/js/manifest.e883c423124f145cf9eb.js></script><script type=text/javascript src=static/js/vendor.6ad37f95fe52935f074a.js></script><script type=text/javascript src=static/js/app.86e8f1bb15306bd55091.js></script></body></html>