Feat(AI):天气和日历对接

aiChat/views/index.vue

@@ -51,38 +51,53 @@
         </view>
         <view v-if="weatherData.city && holidayData.suit" class="weather-holiday-wrap">
           <view class="weather-data data-wrap">
-            <!-- 各种天气对应的图标
+            <block v-if="!weatherDataLoading">
-            https://yikeapi.com/help/wea
+              <view v-if="weatherIsLoad">
-            https://yikeapi.com/help/tianqiimg -->
+                <!-- 各种天气对应的图标
-            <view class="title">
+                https://yikeapi.com/help/wea
-              <image
+                https://yikeapi.com/help/tianqiimg -->
-                :src="webUrl + '/aiChat/weather/' + weatherData.wea_img +'.png'"
+                <view class="title">
-                class="icon"
+                  <image
-                mode="widthFix"
+                    :src="webUrl + '/aiChat/weather/' + weatherData.wea_img +'.png'"
-              />
+                    class="icon"
-              <view class="tem-wrap">
+                    mode="widthFix"
-                <view class="tem">{{ weatherData.tem }}</view>
+                  />
-                <view class="unit">℃</view>
+                  <view class="tem-wrap">
+                    <view class="tem">{{ weatherData.tem }}</view>
+                    <view class="unit">℃</view>
+                  </view>
+                </view>
+                <view class="loca">
+                  <view class="addr">
+                    <image
+                      :src="webUrl + '/aiChat/addr.png'"
+                      class="icon"
+                      mode="widthFix"
+                    />
+                    {{ weatherData.city }}
+                  </view>
+                  <view class="tem-range">
+                    {{ weatherData.wea }}&nbsp;&nbsp;{{ weatherData.tem2 }}℃~{{ weatherData.tem1 }}℃
+                  </view>
+                </view>
+                <view class="content">今日风向：{{ weatherData.win }}</view>
               </view>
-            </view>
+              <view v-else class="no-weather">
-            <view class="loca">
-              <view class="addr">
                 <image
-                  :src="webUrl + '/aiChat/addr.png'"
+                  :src="webUrl + '/aiChat/weather/no-weather.png'"
-                  class="icon"
+                  class="img"
                   mode="widthFix"
                 />
-                {{ weatherData.city }}
+                <view>无法获取天气信息</view>
               </view>
-              <view class="tem-range">
+            </block>
-                {{ weatherData.wea }}&nbsp;&nbsp;{{ weatherData.tem2 }}℃~{{ weatherData.tem1 }}℃
+            <block v-else>
-              </view>
+              <view class="txt-loading">加载中...</view>
-            </view>
+            </block>
-            <view class="content">今日风向：{{ weatherData.win }}</view>
           </view>
-          <view class="holiday-data data-wrap">
+          <view v-if="holidayData.suit" class="holiday-data data-wrap">
             <view class="title">
-              <view class="day">农历{{ holidayData.lunarCalendar }}</view>
+              <view class="day">{{ holidayData.lunarCalendar }}</view>
               <view>{{ holidayData.date.substr(5).replace('-', '/') }}&nbsp;{{ weekDayArr[holidayData.weekDay] }}</view>
             </view>
             <view class="desc">{{ holidayData.yearTips }}年/{{ holidayData.chineseZodiac }}</view>
@@ -363,7 +378,11 @@
             </view>
           </view>
         </view>
-        <view id="bottom_postion" class="bottom-postion" />
+        <view
+          v-if="chatNumber"
+          id="bottom_postion"
+          class="bottom-postion"
+        />
       </view>
     </view>
     <view
@@ -430,6 +449,8 @@ export default {
   data() {
     return {
       cityName: '',
+      weatherDataLoading: false,
+      weatherIsLoad: true,
       weatherData: {},
       holidayData: {},
       weekDayArr: Object.freeze(['', '周一', '周二', '周三', '周四', '周五', '周六', '周日']),
@@ -466,28 +487,37 @@ export default {
             this.animationStr = `TranslateXSwiper-${data.systemTopicDivMaxWidth * 10} ${data.systemTopicDivScrollDuration}s infinite linear alternate`
           }
         })
-        getAiSystemInfoTopic().then(res => {
+        this.loadData()
-          const { success, data } = res
+      })
-          if (success) {
+    },
-            this.topicList = data || []
+    loadData() {
-          }
+      getAiSystemInfoTopic().then(res => {
-        })
+        const { success, data } = res
-        if (this.cityName) {
+        if (success) {
-          getWeatherData({
+          this.topicList = data || []
-            cityName: '桂林'
-          }).then(res => {
-            const { success, data } = res
-            if (success) {
-              this.weatherData = data
-            }
-          })
         }
-        getHolidayData().then(res => {
+      })
+      if (this.cityName) {
+        this.weatherDataLoading = true
+        getWeatherData({
+          cityName: this.cityName
+        }).then(res => {
           const { success, data } = res
           if (success) {
-            this.holidayData = data
+            this.weatherData = data
           }
+          this.weatherIsLoad = true
+          this.weatherDataLoading = false
+        }).catch(() => {
+          this.weatherDataLoading = false
+          this.weatherIsLoad = false
         })
+      }
+      getHolidayData().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.holidayData = data
+        }
       })
     },
     // 创建新会话
@@ -499,6 +529,7 @@ export default {
       this.loading = false
       this.getConfigLoading = false
       this.chatMessageList = []
+      this.loadData()
     },
     clickBackHandle() {
       if (!this.chatNumber) {

assets/css/aiChat.less

@@ -1039,12 +1039,12 @@ page {
 }
 .weather-holiday-wrap {
 	display: flex;
-	align-items: center;
+	align-items: stretch;
 	justify-content: space-between;
+	gap: 12px;
 	padding: 0 24rpx 48rpx 24rpx;
 	.data-wrap {
-		width: calc(50% - 12rpx);
+		flex: 1;
-		height: 288rpx;
 		padding: 20rpx;
 		border-radius: 20rpx;
 		box-sizing: border-box;
@@ -1101,6 +1101,29 @@ page {
 			font-size: 26rpx;
 			line-height: 36rpx;
 		}
+		.txt-loading {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+			min-height: 200rpx;
+		}
+		.no-weather {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			font-size: 26rpx;
+			color: #999;
+			line-height: 38rpx;
+			.img {
+				display: block;
+				width: 226rpx;
+				height: 130rpx;
+				margin: 0 0 12rpx 0;
+			}
+		}
 	}
 	.holiday-data {
 		.title {