153 lines
3.9 KiB
Vue
153 lines
3.9 KiB
Vue
<template>
|
|
<view class="flex border-box w-full">
|
|
<view class="flex flex-col flex-full min-width-0 mr-12">
|
|
<view class="flex flex-row flex-items-center flex-justify-between min-width-0">
|
|
<text class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
|
|
<text class="flex-shrink-0 font-size-20 font-500 color-white mt-4"> {{ weatherText }} </text>
|
|
</view>
|
|
|
|
<NoticeMessage :sceneName="props.mainPageDataModel.sceneName" />
|
|
</view>
|
|
|
|
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
|
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
|
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import { defineProps, computed } from "vue";
|
|
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
|
|
import NoticeMessage from "../NoticeMessage/index.vue";
|
|
import { getLocalWeather } from "@/request/api/MainPageDataApi";
|
|
|
|
const weatherText = ref('');
|
|
|
|
const props = defineProps({
|
|
mainPageDataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
initPageImages: {
|
|
backgroundImageUrl: "",
|
|
logoImageUrl: "",
|
|
welcomeImageUrl: "",
|
|
}
|
|
};
|
|
},
|
|
},
|
|
});
|
|
|
|
const initPageImages = computed(() => {
|
|
return props.mainPageDataModel?.initPageImages || {};
|
|
});
|
|
|
|
const spriteStyle = computed(() => {
|
|
const images = initPageImages.value;
|
|
return {
|
|
backgroundImageUrl: images.backgroundImageUrl,
|
|
ipLargeImage: images.ipLargeImage,
|
|
frameWidth: images.ipLargeImageWidth,
|
|
frameHeight: images.ipLargeImageHeight,
|
|
totalFrames: images.ipLargeTotalFrames,
|
|
columns: images.ipLargeColumns,
|
|
displayWidth: 105,
|
|
};
|
|
});
|
|
|
|
const getLocalWeatherData = async () => {
|
|
const res = await getLocalWeather();
|
|
if (res && res.code === 0) {
|
|
const { temperature, weather } = res.data;
|
|
weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getLocalWeatherData();
|
|
});
|
|
|
|
const getWeatherEmoji = (text) => {
|
|
if (weatherTextMap[text]) return weatherTextMap[text];
|
|
if (text.includes("晴")) return "☀️";
|
|
if (text.includes("云")) return "☁️";
|
|
if (text.includes("雨")) return "🌧️";
|
|
if (text.includes("雷")) return "⛈️";
|
|
if (text.includes("雪")) return "🌨️";
|
|
if (text.includes("雾") || text.includes("霾")) return "🌫️";
|
|
if (text.includes("风")) return "🌬️";
|
|
if (text.includes("沙")) return "🌪️";
|
|
return "❓";
|
|
}
|
|
|
|
const weatherTextMap = {
|
|
// 晴 / 云
|
|
"晴": "☀️",
|
|
"少云": "🌤️",
|
|
"晴间多云": "⛅",
|
|
"多云": "☁️",
|
|
"阴": "☁️",
|
|
|
|
// 风
|
|
"有风": "🌬️",
|
|
"平静": "🍃",
|
|
"微风": "🌬️",
|
|
"和风": "🌬️",
|
|
"清风": "🌬️",
|
|
"强风/劲风": "💨",
|
|
"疾风": "💨",
|
|
"大风": "💨",
|
|
"烈风": "💨",
|
|
"风暴": "🌪️",
|
|
"狂爆风": "🌪️",
|
|
"飓风": "🌀",
|
|
"龙卷风": "🌪️",
|
|
|
|
// 雨
|
|
"阵雨": "🌦️",
|
|
"雷阵雨": "⛈️",
|
|
"雷阵雨并伴有冰雹": "⛈️",
|
|
"小雨": "🌧️",
|
|
"中雨": "🌧️",
|
|
"大雨": "🌧️",
|
|
"暴雨": "🌧️",
|
|
"大暴雨": "🌧️",
|
|
"特大暴雨": "🌧️",
|
|
"强阵雨": "🌦️",
|
|
"毛毛雨/细雨": "🌦️",
|
|
|
|
// 雪
|
|
"小雪": "🌨️",
|
|
"中雪": "🌨️",
|
|
"大雪": "❄️",
|
|
"暴雪": "❄️",
|
|
"雨夹雪": "🌨️",
|
|
"阵雪": "🌨️",
|
|
|
|
// 雾霾 / 沙尘
|
|
"雾": "🌫️",
|
|
"浓雾": "🌫️",
|
|
"强浓雾": "🌫️",
|
|
"轻雾": "🌫️",
|
|
"大雾": "🌫️",
|
|
"特强浓雾": "🌫️",
|
|
|
|
"霾": "🌫️",
|
|
"中度霾": "🌫️",
|
|
"重度霾": "🌫️",
|
|
"严重霾": "🌫️",
|
|
|
|
"扬沙": "🌪️",
|
|
"浮尘": "🌪️",
|
|
"沙尘暴": "🌪️",
|
|
"强沙尘暴": "🌪️",
|
|
|
|
// 特殊
|
|
"热": "🔥",
|
|
"冷": "🥶"
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped></style>
|