CjyTravel/subPageC/weather/index.vue

<template>
	<view class="v-pages-weather" 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">
					<image :src="'https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/icons/'+item.iconDay+'-fill.svg'"
						class="img" mode="widthFix"></image>					
				</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 today = new Date()
				
				var arr = day.split("-");
				var year = parseInt(arr[0]);
				var month = parseInt(arr[1]) - 1; // 月份从0开始，需要减1
				var day = parseInt(arr[2]);
				var date = new Date();
				date.setFullYear(year, month, day);		
				
				if (date.getDate() == today.getDate()) {				
					return '今天'
				} else {
					console.log(day)
					const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
					const weekday = date.getDay();
				
					console.log('aa',weekday)
					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-weather {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		overflow: hidden;
		&.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('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/weather_sunny.png');
			background-repeat: no-repeat;
			background-size: contain;
		}

		&.cloudy {
			background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/weather_cloudy.png');
			background-repeat: no-repeat;
			background-size: contain;
		}

		&.rainy {
			background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/weather_rainy.png');
			background-repeat: no-repeat;
			background-size: contain;
		}

		&.smog {
			background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/weather_smog.png');
			background-repeat: no-repeat;
			background-size: contain;
		}

		&.snowy {
			background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/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;

				.img{width: 30rpx;height: 30rpx;}
			}

			.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: 150rpx;
				flex: 0 0 150rpx;
				color: #fff;
			}
		}
	}
</style>