Homepage-imsyy/src/components/Weather.vue

<template>
  <div class="weather" v-if="weatherData.adCode.city && weatherData.weather.weather">
    <span>{{ weatherData.adCode.city }}&nbsp;</span>
    <span>{{ weatherData.weather.weather }}&nbsp;</span>
    <span>{{ weatherData.weather.temperature }}℃</span>
    <span class="sm-hidden">
      &nbsp;{{
        weatherData.weather.winddirection?.endsWith('风')
          ? weatherData.weather.winddirection
          : weatherData.weather.winddirection + '风'
      }}&nbsp;
    </span>
    <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
  </div>
  <div class="weather" v-else>
    <span>天气数据获取失败</span>
  </div>
</template>

<script setup>
import { getAdcode, getWeather, getOtherWeather } from '@/api';
import { Error } from '@icon-park/vue-next';

// 高德开发者 Key
const mainKey = import.meta.env.VITE_WEATHER_KEY;

// 天气数据
const weatherData = reactive({
  adCode: {
    city: null, // 城市
    adcode: null, // 城市编码
  },
  weather: {
    weather: null, // 天气现象
    temperature: null, // 实时气温
    winddirection: null, // 风向描述
    windpower: null, // 风力级别
  },
});

// 获取天气数据
const getWeatherData = () => {
  // 获取地理位置信息
  if (!mainKey) {
    getOtherWeather()
      .then((res) => {
        console.log(res);
        const data = res.result;
        weatherData.adCode = {
          city: data.city.name,
          adcode: data.city.cityId,
        };
        weatherData.weather = {
          weather: data.condition.condition,
          temperature: data.condition.temp,
          winddirection: data.condition.windDir,
          windpower: data.condition.windLevel,
        };
      })
      .catch((err) => {
        console.error('天气信息获取失败:' + err);
        onError('天气信息获取失败');
      });
  } else {
    getAdcode(mainKey)
      .then((res) => {
        weatherData.adCode = {
          city: res.city,
          adcode: res.adcode,
        };
        // 获取天气信息
        getWeather(mainKey, weatherData.adCode.adcode)
          .then((res) => {
            weatherData.weather = {
              weather: res.lives[0].weather,
              temperature: res.lives[0].temperature,
              winddirection: res.lives[0].winddirection,
              windpower: res.lives[0].windpower,
            };
          })
          .catch((err) => {
            console.error('天气信息获取失败:' + err);
            onError('天气信息获取失败');
          });
      })
      .catch((err) => {
        console.error('地理位置获取失败:' + err);
        onError('地理位置获取失败');
      });
  }
};

// 报错信息
const onError = (message) => {
  ElMessage({
    message,
    icon: h(Error, {
      theme: 'filled',
      fill: '#efefef',
    }),
  });
  console.error(message);
};

onMounted(() => {
  // 调用获取天气
  getWeatherData();
});
</script>