usky-web-mobile/src/components/oa-weather/index.vue

<template>
  <!-- 天气 -->
  <view class="app-common-window bg-white radius shadow-default" v-if="state.weatherData.length != 0">
    <view class="weather radius">
      <view class="weather-header">
        <view class="iconfont oaIcon-address"></view>
        <view class="weather-header-location">{{ state.weatherData[0].location || "上海" }}</view>
        <view class="weather-header-day">今天</view>
        <view class="weather-header-text">{{ state.weatherData[0].text || "未知" }}</view>
      </view>
      <view class="weather-center">
        <view class="weather-center-temperature">{{ state.weatherData[0].today.low + "/" + state.weatherData[0].today.high || "0℃" }}</view>
        <image class="weather-center-image" :src="`${'/static/icons/white/' + state.weatherData[0].code.now + '.png'}`" mode="heightFix"></image>
      </view>
    </view>
  </view>
</template>
<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs, toRef, watch } from "vue";

const emit = defineEmits(["load", "refresh"]);
const props = defineProps({});

const state = reactive({
  weatherData: [],
});

/**
 * @获取天气信息
 */
function getWeather(string) {
  uni.request({
    url: `https://widget-v3.seniverse.com/api/weather/7b8a7d89-f01d-4b14-bdec-5ae0b82c857f?unit=c&language=zh-Hans&location=${string}`,
    success: (res) => {
      if (res.statusCode == 200) {
        state.weatherData = res.data.results[0].data;
      } else {
        console.log("获取天气信息失败");
      }
    },
    fail: (err) => {
      console.log("获取天气信息失败", err);
    },
  });
}

onLoad((option) => {});

onShow(() => {});

// 暴露变量
defineExpose({
  getWeather,
});
</script>

<style lang="scss" scoped>
.app-common-window {
  position: relative;
  margin-top: -20px;
  margin: -20px 20upx 20upx 20upx;
  z-index: 50;

  .weather {
    padding: 10px;
    background-image: url("@/static/images/index/weather.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    .weather-header {
      display: flex;
      margin-bottom: 10px;
      font-size: 14px;

      &-location {
        margin-right: 15px;
      }

      &-day {
        margin: 0 auto 0 0;
      }

      &-text {
        margin: 0;
      }

      .iconfont {
        margin: auto 5px auto 0;
        color: #0c83fa;
      }
    }

    .weather-center {
      display: flex;

      &-temperature {
        margin: auto auto auto 0;
        font-size: 18px;
        font-weight: 600;
      }

      &-image {
        margin: 0 0 0 0;
        height: 30px !important;
      }
    }
  }
}
</style>