smart-tourism/smart-ui-app/pages/index/index2.vue

<template>
	<view>
		<view class="welcome" :style="{ marginTop: top + 'px' }">
			<image src="../../static/index.png" mode="widthFix" class="bq"></image>
			<view class="clear"></view>
		</view>
		<view class="top">
			<view class="wd">
				<view class="qw">{{ weather.tem }}°</view>
				<view class="xs">
					<view>{{ weather.wea }} {{ weather.win }} {{ weather.win_speed }}</view>
					<view>风速 {{ weather.win_meter }}</view>
				</view>
			</view>
			<view class="sos" @click="call()">
				<image src="../../static/qz.png" mode="widthFix" class="qiuzhu"></image>
				<view class="title">求助</view>
			</view>
			<image :src="ip + aboutUs.bgImg1" mode="scaleToFill" class="banner"></image>
		</view>
		<view class="page">
			<!--菜单-->
			<view class="flex menu">
				<view class="f" @click="navigate('/pages/travel/detail?id=43')">
					<image src="../../static/icon1.png" mode="widthFix" class="icon1"></image>
					<view class="title">谢通门介绍</view>
				</view>
				<view class="f" @click="navigate('/pages/travel/introduction')">
					<image src="../../static/icon2.png" mode="widthFix" class="icon1"></image>
					<view class="title">旅游攻略</view>
				</view>
				<view class="f" @click="navigate('/pages/government/activity')">
					<image src="../../static/icon3.png" mode="widthFix" class="icon1"></image>
					<view class="title">热门活动</view>
				</view>
				<view class="f" @click="navigate('/pages/government/index')">
					<image src="../../static/icon4.png" mode="widthFix" class="icon1"></image>
					<view class="title">党政服务</view>
				</view>
			</view>
			<!--图片-->
			<view class="flex mt15">
				<view class="f" style="padding-right:8px;"><image @click="detail(2)" :src="ip + aboutUs.bgImg3" mode="widthFix" class="tp"></image></view>
				<view class="f"><image @click="detail(3)" :src="ip + aboutUs.bgImg4" mode="widthFix" class="tp"></image></view>
			</view>
			<view style="margin-top: 10px;"><image @click="detail(4)" :src="ip + aboutUs.bgImg2" mode="widthFix" class="tp"></image></view>
			<!--热门景区-->
			<view class="item">
				<view class="lable">
					<view class="title">热门景区</view>
					<image src="../../static/lo2.png" mode="widthFix"></image>
					<view class="look" @click="tab('/pages/travel/index')">
						<text>更多</text>
						<text class="icon">&#xe62d;</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="rows">
					<view class="row" v-for="(item, index) in hot_list" :key="index" @click="detail(item)">
						<view class="out">
							<view class="int">
								<image :src="ip + item.showPictures" mode="aspectFill"></image>
								<view class="title omit">{{ item.title }}</view>
							</view>
						</view>
					</view>
					<view class="clear"></view>
				</view>
			</view>
			<!--攻略指南-->
			<view class="item" style="margin-top: 15px;">
				<view class="lable">
					<view class="title">攻略指南</view>
					<view class="look" @click="navigate('/pages/travel/introduction')">
						<text>更多</text>
						<text class="icon">&#xe62d;</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="card" v-for="(item, index) in zn_list" :key="index" @click="detail(item)">
					<image :src="ip + item.showPictures" mode="aspectFill"></image>
					<view class="cons">
						<view class="title omit">{{ item.title }}</view>
						<view class="desc omit">{{ item.briefContent }}</view>
					</view>
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
			<help ref="help"></help>
		</view>
	</view>
</template>

<script>
import help from "../../components/help.vue";
export default {
	components: {
		help
	},
	data() {
		return {
			ip: this.$http.urls.ip,
			top: 20,
			scrollTop: 0,
			hot_list: [],
			zn_list: [],
			aboutUs: {},
			weather: { tem: "0", wea: "晴", win: "北风", win_speed: "0级", win_meter: "0km/h" }
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(e) {
		this.getData();
		this.getWeather();
		uni.getSystemInfo({
			success: res => {
				this.top = parseInt(res.safeArea.top) + 5;
			},
			fail(err) {
				console.error(err);
			}
		});
	},
	onReady() {
		uni.setNavigationBarColor({
			frontColor: "#000000",
			backgroundColor: "#f8f8f8",
			fail(e) {
				console.log("aaa:" + JSON.stringify(e));
			}
		});
	},
	methods: {
		getWeather() {
			//天气接口
			uni.request({
				url: this.$http.urls.weather,
				success: res => {
					if (!res.data.errcode) {
						this.weather = res.data;
					}
				}
			});
		},
		getData() {
			this.$http.request({
				url: this.$http.urls.home,
				success: res => {
					this.hot_list = res.data.data.hot_list;
					this.zn_list = res.data.data.zn_list;
					this.aboutUs = res.data.data.aboutUs;
					uni.setStorageSync("aboutUs", this.aboutUs);
				}
			});
		},
		tab(url) {
			uni.switchTab({
				url: url
			});
		},
		//详情
		detail(item) {
			if (item.contentId) {
				uni.navigateTo({ url: "/pages/travel/detail?id=" + item.contentId });
			} else {
				//根据后台的选择跳转id跳转到指定文章
				let id;
				if (item == 1) {
					id = this.$http.getParam(this.aboutUs.briefText1, "?");
				}
				if (item == 2) {
					id = this.$http.getParam(this.aboutUs.briefText2, "?");
				}
				if (item == 3) {
					id = this.$http.getParam(this.aboutUs.briefText3, "?");
				}
				if (item == 4) {
					id = this.$http.getParam(this.aboutUs.briefText4, "?");
				}
				uni.navigateTo({ url: "/pages/travel/detail?id=" + id });
			}
		},
		navigate(url) {
			uni.navigateTo({ url: url });
		},
		//拨打求助电话
		call() {
			this.$refs.help.init();
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getData();
		}, 1000);
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.welcome {
	margin-top: 38px;
	padding-bottom: 5px;
	.icon {
		float: left;
		font-size: 27px;
	}
	.dw {
		float: left;
		width: 6.5%;
		height: 20px;
		margin: 3px 10px 0px 10px;
	}
	.bq {
		width: 45%;
		height: 34px;
		float: left;
		padding-left: 10px;
	}
}
.top {
	overflow: hidden;
	position: relative;
	.wd {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		padding-top: 10px;
		padding-left: 10px;
		z-index: 111111;
		color: #666666;
		background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
		.qw {
			font-size: 25px;
			float: left;
			font-weight: bold;
		}
		.xs {
			margin-left: 45px;
			width: 100%;
			font-size: 13px;
			line-height: 20px;
		}
	}
	.sos {
		position: absolute;
		right: 10px;
		top: 10px;
		background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.3) 100%);
		padding: 10px 10px 15px 10px;
		color: white;
		font-size: 15px;
		text-align: center;
		font-weight: normal;
		border-radius: 30px;
		z-index: 111112;
		.qiuzhu {
			width: 115%;
			height: 34px;
		}
		.title {
			color: #333333;
		}
	}
	.banner {
		width: 100%;
		height: 200px;
		background-color: white;
	}
}
.page {
	padding: 10px;
	overflow-x: hidden;
	margin-top: -50px;
	position: relative;
	.tp {
		height: 88px;
		width: 100%;
		background-color: white;
		border-radius: 10px;
	}
	.item {
		margin-top: 15px;
		.lable {
			margin-bottom: 13px;
			.title {
				float: left;
				font-size: 20px;
				font-weight: bold;
				color: #333;
			}
			image {
				float: left;
				width: 25%;
				margin-top: -3px;
			}
			.look {
				color: #999999;
				float: right;
				font-size: 15px;
			}
		}
		.rows {
			margin-left: -5px;
			margin-right: -5px;
			.row {
				float: left;
				width: 33.333%;
				overflow: hidden;
				height: 150px;
				.out {
					padding: 0px 3px 0px 3px;
					.int {
						position: relative;
						image {
							border-radius: 10px;
							height: 150px;
							width: 100%;
							background-color: white;
						}
						.title {
							position: absolute;
							bottom: 13px;
							left: 10px;
							width: 85%;
							color: white;
							font-size: 15px;
							font-weight: 400;
						}
					}
				}
			}
		}
		.card {
			background-color: white;
			overflow: hidden;
			border-radius: 10px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
			image {
				width: 100%;
				height: 150px;
			}
			.cons {
				padding: 12px;
				.title {
					color: #333333;
					font-weight: bold;
					font-size: 17px;
				}
				.desc {
					font-size: 14px;
					color: #999999;
					margin-top: 8px;
				}
			}
		}
	}
}
</style>