feats

src/pages/index.vue

@@ -10,25 +10,21 @@
             <span>农历{{currentChineseDate}}</span>
           </div>
           <div class="weatherDetail flex-h">
-            <div class="imgData">
-              <img src="../assets/images/icon-1.png" width="100%" alt>
-              <span>3°C ~ 14°C</span>
+            <div class="imgData" v-if="weatherDetail">
+              <img :src="weatherIcon(weatherDetail.dayweather)" width="100%" alt>
+              <span>{{tempRange}}</span>
             </div>
             <div class="flex-item">
-              <div>
-                <span>今日降雨概率60%，请做好防雨措施</span>
+              <div v-if="weatherDetail">
+                <span>今日 {{ weatherDetail.dayweather }}</span>
                 <ul>
                   <li>
-                    <span>北风2级</span>
-                    <span>空气湿度: 96%</span>
-                  </li>
-                  <li>
-                    <span>北风2级</span>
-                    <span>空气湿度: 96%</span>
+                    <span>白天</span>
+                    <span>{{weatherDetail.daywind}} 风 {{weatherDetail.daypower}}</span>
                   </li>
                   <li>
-                    <span>北风2级</span>
-                    <span>空气湿度: 96%</span>
+                    <span>晚上</span>
+                    <span>{{weatherDetail.nightwind}} 风 {{weatherDetail.nightpower}}</span>
                   </li>
                 </ul>
               </div>
@@ -65,7 +61,7 @@
             :src="'api' + showPage.showContent"
             alt
           >
-          <video v-if="showPage.showType === 'video'" width="100%" height="100%" controls="controls" autoplay muted loop>
+          <video v-if="showPage.showType === 'video'" width="100%" height="100%" controls="controls" autoplay loop>
             <source :src="'api' + showPage.showContent" type="video/mp4" />
           </video>
         </div>
@@ -139,6 +135,21 @@ export default {
     },
     isDay () {
       return new Date(this.currentTimeTamp).getHours() <= 17 && new Date(this.currentTimeTamp).getHours() >= 6
+    },
+    weatherDetail () {
+      return this.weatherInfo.forecasts[0].casts[0]
+    },
+    tempRange () {
+      if (!this.weatherDetail) return ''
+      let min, max
+
+      // 这么复杂是为了避免 eslint 错误
+      const f = () => this.weatherDetail.daytemp > this.weatherDetail.nighttemp
+        ? ((min = this.weatherDetail.nighttemp) | (max = this.weatherDetail.daytemp))
+        : ((max = this.weatherDetail.nighttemp) | (min = this.weatherDetail.daytemp))
+      f()
+
+      return `${min}℃ ~ ${max}℃`
     }
   },
   components: {
@@ -210,6 +221,7 @@ export default {
         pageNum: 1,
         pageSize: 100
       })
+      this.getWeatherInfo()
     },
     getPersonList () {
       this.getPerson().then(res => {
@@ -260,90 +272,85 @@ export default {
       this.currentTime = `${new Date(currentTime).getHours().toString().padStart(2, '0')} : ${new Date(currentTime).getMinutes().toString().padStart(2, '0')} : ${new Date(currentTime).getSeconds().toString().padStart(2, '0')}`
       this.currentDate = `${new Date(currentTime).getFullYear()}年${(new Date(currentTime).getMonth() + 1).toString().padStart(2, '0')}月${new Date(currentTime).getDate().toString().padStart(2, '0')}日`
       this.currentChineseDate = `${ChineseDate.monthCn}${ChineseDate.dayCn}`
+    },
+    weatherIcon (target) { // 返回天气图标
+      switch (target) {
+        case '晴':
+          return require('../assets/images/icon-6.png')
+        case '少云':
+        case '晴间多云':
+        case '多云':
+          return require('../assets/images/icon-4.png')
+        case '阴':
+        case '平静':
+          return require('../assets/images/icon-9.png')
+        case '有风':
+        case '微风':
+        case '和风':
+        case '清风':
+        case '强风/劲风':
+        case '疾风':
+        case '大风':
+        case '烈风':
+        case '风暴':
+        case '狂爆风':
+        case '飓风':
+        case '热带风暴':
+        case '浮尘':
+        case '扬沙':
+          return require('../assets/images/icon-1.png')
+        case '阵雨':
+        case '大雨':
+        case '中雨-大雨':
+        case '大雨-暴雨':
+        case '暴雨-大暴雨':
+        case '大暴雨-特大暴雨':
+        case '暴雨':
+        case '大暴雨':
+        case '特大暴雨':
+        case '强阵雨':
+        case '极端降雨':
+        case '雷阵雨':
+        case '雷阵雨并伴有冰雹':
+          return require('../assets/images/icon-5.png')
+        case '毛毛雨/细雨':
+        case '小雨':
+        case '雨':
+        case '中雨':
+        case '小雨-中雨':
+          return require('../assets/images/icon-3.png')
+        case '雨夹雪':
+        case '阵雨夹雪':
+        case '雨雪天气':
+        case '冻雨':
+          return require('../assets/images/icon-10.png')
+        case '阵雪':
+        case '小雪':
+        case '中雪':
+        case '大雪':
+        case '暴雪':
+        case '小雪-中雪':
+        case '中雪-大雪':
+        case '大雪-暴雪':
+        case '雪':
+          return require('../assets/images/icon-2.png')
+        case '沙尘暴':
+        case '强沙尘暴':
+        case '龙卷风':
+        case '雾':
+        case '浓雾':
+        case '强浓雾':
+        case '轻雾':
+        case '大雾':
+        case '特强浓雾':
+        case '霾':
+        case '中度霾':
+        case '重度霾':
+        case '严重霾':
+        default:
+          return require('../assets/images/icon-1.png')
+      }
     }
-    // weatherIcon (target) { // 返回天气图标
-    //   switch (target) {
-    //     case '晴':
-    //       return require('../assets/images/icon-2.png')
-    //     case '少云':
-    //     case '晴间多云':
-    //     case '多云':
-    //       return require('../assets/images/icon-1.png')
-    //     case '阴':
-    //     case '平静':
-    //       return require('../assets/images/icon-3.png')
-    //     case '有风':
-    //     case '微风':
-    //     case '和风':
-    //     case '清风':
-    //     case '强风/劲风':
-    //     case '疾风':
-    //     case '大风':
-    //     case '烈风':
-    //     case '风暴':
-    //     case '狂爆风':
-    //     case '飓风':
-    //     case '热带风暴':
-    //     case '浮尘':
-    //     case '扬沙':
-    //       return require('../assets/images/icon-19.png')
-    //     case '阵雨':
-    //     case '大雨':
-    //     case '中雨-大雨':
-    //     case '大雨-暴雨':
-    //     case '暴雨-大暴雨':
-    //     case '大暴雨-特大暴雨':
-    //     case '暴雨':
-    //     case '大暴雨':
-    //     case '特大暴雨':
-    //     case '强阵雨':
-    //     case '极端降雨':
-    //       return require('../assets/images/icon-6.png')
-    //     case '雷阵雨':
-    //     case '雷阵雨并伴有冰雹':
-    //       return require('../assets/images/icon-7.png')
-    //     case '毛毛雨/细雨':
-    //     case '小雨':
-    //       return require('../assets/images/icon-4.png')
-    //     case '雨':
-    //     case '中雨':
-    //     case '小雨-中雨':
-    //       return require('../assets/images/icon-5.png')
-    //     case '雨夹雪':
-    //     case '阵雨夹雪':
-    //     case '雨雪天气':
-    //     case '冻雨':
-    //       return require('../assets/images/icon-21.png')
-    //     case '阵雪':
-    //     case '小雪':
-    //     case '中雪':
-    //     case '大雪':
-    //     case '暴雪':
-    //     case '小雪-中雪':
-    //     case '中雪-大雪':
-    //     case '大雪-暴雪':
-    //     case '雪':
-    //       return require('../assets/images/icon-14.png')
-    //     case '沙尘暴':
-    //     case '强沙尘暴':
-    //     case '龙卷风':
-    //       return require('../assets/images/icon-20.png')
-    //     case '雾':
-    //     case '浓雾':
-    //     case '强浓雾':
-    //     case '轻雾':
-    //     case '大雾':
-    //     case '特强浓雾':
-    //       return require('../assets/images/icon-22.png')
-    //     case '霾':
-    //     case '中度霾':
-    //     case '重度霾':
-    //     case '严重霾':
-    //       return require('../assets/images/icon-23.png')
-    //     default:
-    //       return require('../assets/images/icon-24.png')
-    //   }
-    // }
   }
 }
 </script>

src/store/user/index.js

@@ -71,8 +71,7 @@ export default {
     getWeatherInfo (context, payload) { // 获取天气信息
       return new Promise((resolve, reject) => {
         Ajax(api.getWeatherInfo.url, {
-          method: api.getWeatherInfo.method,
-          queryData: { ...payload }
+          method: api.getWeatherInfo.method
         }).then(res => {
           context.commit('setWeatherInfo', res)
           resolve(res)

src/util/api.js

@@ -2,7 +2,7 @@
 const $api = {
   getWeatherInfo: { // 获取天气信息
     method: 'get',
-    url: `https://restapi.amap.com/v3/weather/weatherInfo?parameters`
+    url: `/api/weather`
   },
   news: {
     method: 'get',