You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
7.9 KiB
375 lines
7.9 KiB
<template>
|
|
<view class="v-pages-bg" v-if="today_data" :class="TodayClass">
|
|
<view class="v-weather-bg" :class="TodayClass"></view>
|
|
<uni-nav-bar dark statusBar :fixed="true" background-color="transparent" :border="false" left-icon="left"
|
|
title="鹿泉天气" @clickLeft="gotoBack" />
|
|
<!-- 今日天气 -->
|
|
<view class="v-pages-weather_top container-fluid" v-if="today_data">
|
|
<view class="today-temp">{{today_data.temp}}°</view>
|
|
<view class="today-info"><text class="text">{{today_data.text}}</text><text class="temp"
|
|
v-if="days_data.length>0">{{days_data[0].tempMin}}°/{{days_data[0].tempMax}}°</text></view>
|
|
<view class="row today-other">
|
|
<view class="col-8 other_item">
|
|
<view class="content">{{today_data.windScale}}级</view>
|
|
<view class="text">{{today_data.windDir}}</view>
|
|
</view>
|
|
<view class="col-8 other_item">
|
|
<view class="content">{{today_data.humidity}}%</view>
|
|
<view class="text">相对湿度</view>
|
|
</view>
|
|
<view class="col-8 other_item">
|
|
<view class="content">{{today_data.feelsLike}}°</view>
|
|
<view class="text">体感温度</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 7日天气 -->
|
|
<view class="v-pages-weather_list container-fluid" v-if="days_data.length>0">
|
|
<view class="list_title">七日天气预报</view>
|
|
<view class="list_item row" v-for="(item,index) in days_data" :key="index">
|
|
<view class="data">{{item.week}}</view>
|
|
<view class="text">
|
|
<text class="icon" :class="'qi-'+item.iconDay+'-fill'"></text>
|
|
</view>
|
|
<view class="temp col row flex-align-center">
|
|
<view class="min">{{item.tempMin}}°</view>
|
|
<view class="bar col">
|
|
<view class="bar-inner" :style="[getTempBar(item.tempMin,item.tempMax)]"></view>
|
|
</view>
|
|
<view class="max">{{item.tempMax}}°</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
data
|
|
} from '../../uni_modules/uview-ui/libs/mixin/mixin';
|
|
|
|
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
|
|
export default {
|
|
components: {
|
|
uniNavBar
|
|
},
|
|
data() {
|
|
return {
|
|
today_data: undefined,
|
|
days_data: [],
|
|
tempMax: undefined,
|
|
tempMin: undefined,
|
|
tempTotal: undefined,
|
|
};
|
|
},
|
|
computed: {
|
|
TodayClass() {
|
|
switch (true) {
|
|
case this.today_data.text.includes("晴"):
|
|
return "sunny"
|
|
break;
|
|
case this.today_data.text.includes("阴"):
|
|
return "rainy"
|
|
break;
|
|
case this.today_data.text.includes("雨"):
|
|
return "rainy"
|
|
break;
|
|
case this.today_data.text.includes("雪"):
|
|
return "snowy"
|
|
break;
|
|
case this.today_data.text.includes("云"):
|
|
return "cloudy"
|
|
break;
|
|
case this.today_data.text.includes("雾"):
|
|
return "smog"
|
|
break;
|
|
default:
|
|
return "sunny"
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initPages()
|
|
},
|
|
methods: {
|
|
initPages() {
|
|
this.$Request.get(this.$config.getWeatherForecast, null, null, null, false, true)
|
|
.then(res => {
|
|
let data = res.data
|
|
this.tempMax = Math.max.apply(Math, data.map(item => {
|
|
return item.tempMax
|
|
}))
|
|
this.tempMin = Math.min.apply(Math, data.map(item => {
|
|
return item.tempMin
|
|
}))
|
|
this.tempTotal = this.tempMax - this.tempMin
|
|
data.forEach((item, index, arr) => {
|
|
let data = {
|
|
week: this.getWeekday(item.fxDate[0] + '-' + item.fxDate[1] +
|
|
'-' +
|
|
item.fxDate[2]),
|
|
iconDay: item.iconDay,
|
|
tempMin: item.tempMin,
|
|
tempMax: item.tempMax,
|
|
}
|
|
this.days_data.push(data);
|
|
})
|
|
});
|
|
this.$Request.get(this.$config.getRealTimeWeather, null, null, null, false, true)
|
|
.then(res => {
|
|
let data = res.data
|
|
this.today_data = data
|
|
});
|
|
},
|
|
getTempBar(Min, Max) {
|
|
let left = ((Min - this.tempMin) / this.tempTotal) * 100
|
|
let right = (1 - (Max - this.tempMin) / this.tempTotal) * 100
|
|
return {
|
|
left: left + '%',
|
|
right: right + '%'
|
|
}
|
|
},
|
|
gotoBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
},
|
|
getWeekday(day) {
|
|
const date = new Date(day); //字符串转日期
|
|
const today = new Date()
|
|
if (date.getDate() == today.getDate()) {
|
|
return '今天'
|
|
} else {
|
|
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
|
const weekday = new Date(date).getDay();
|
|
return weekdays[weekday];
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import url("fonts/qweather-icons.css");
|
|
|
|
.v-weather-bar {
|
|
position: relative;
|
|
top: 88rpx;
|
|
z-index: 9;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
|
|
.img {
|
|
width: 50rpx;
|
|
}
|
|
}
|
|
|
|
.v-pages-bg {
|
|
height: 100vh;
|
|
|
|
&.sunny {
|
|
background: linear-gradient(to bottom, #5f8ff0, #98c5fa);
|
|
}
|
|
|
|
&.cloudy {
|
|
background: linear-gradient(to bottom, #5f8ff0, #98c5fa);
|
|
}
|
|
|
|
&.rainy {
|
|
background: linear-gradient(to bottom, #3f699c, #6a9dc0);
|
|
}
|
|
|
|
&.smog {
|
|
background: linear-gradient(to bottom, #6b7c8f, #a9b3c4);
|
|
}
|
|
|
|
&.snowy {
|
|
background: linear-gradient(to bottom, #617cb1, #9ab7d8);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.v-weather-bg {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 100vh;
|
|
|
|
&.sunny {
|
|
background: url('@/static/test/weather_sunny.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
&.cloudy {
|
|
background: url('@/static/test/weather_cloudy.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
&.rainy {
|
|
background: url('@/static/test/weather_rainy.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
&.smog {
|
|
background: url('@/static/test/weather_smog.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
&.snowy {
|
|
background: url('@/static/test/weather_snowy.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
.v-pages-weather_top {
|
|
position: relative;
|
|
z-index: 9;
|
|
|
|
.today-temp {
|
|
padding-top: 5vh;
|
|
text-align: center;
|
|
font-size: 180rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.today-info {
|
|
text-align: center;
|
|
color: #fff;
|
|
|
|
.text {
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.temp {
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
|
|
.today-other {
|
|
margin-top: 24rpx;
|
|
padding: 20rpx;
|
|
background-color: rgba(#000, .2);
|
|
border-radius: 16rpx;
|
|
|
|
.other_item {
|
|
position: relative;
|
|
|
|
&:not(:last-child) {
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 16rpx;
|
|
width: 1rpx;
|
|
height: 50rpx;
|
|
background-color: rgba(#fff, 0.2);
|
|
}
|
|
}
|
|
|
|
|
|
.content {
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-pages-weather_list {
|
|
position: relative;
|
|
z-index: 9;
|
|
margin-top: 40rpx;
|
|
padding: 20rpx;
|
|
background-color: rgba(#000, .2);
|
|
border-radius: 16rpx;
|
|
|
|
.list_title {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border-bottom: 1rpx solid rgba(#fff, 0.1);
|
|
}
|
|
|
|
.list_item {
|
|
margin: 16rpx 0;
|
|
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid rgba(#fff, .05);
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.text {
|
|
width: 150rpx;
|
|
flex: 0 0 150rpx;
|
|
|
|
.icon {
|
|
|
|
&:before {
|
|
background-image: linear-gradient(to bottom, #feaa2a, #feb51e);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.temp {
|
|
|
|
.min,
|
|
.max {
|
|
width: 50rpx;
|
|
flex: 0 0 50rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.min {
|
|
text-align: right;
|
|
color: #fff;
|
|
}
|
|
|
|
.bar {
|
|
position: relative;
|
|
margin: 0 12rpx;
|
|
height: 6rpx;
|
|
border-radius: 6rpx;
|
|
background-color: rgba(#000, .05);
|
|
|
|
.bar-inner {
|
|
|
|
position: absolute;
|
|
height: 6rpx;
|
|
border-radius: 6rpx;
|
|
background-image: linear-gradient(to bottom, #79c6f1, #7ecddc);
|
|
}
|
|
}
|
|
}
|
|
|
|
.data {
|
|
width: 200rpx;
|
|
flex: 0 0 200rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |