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

<template>
	<view class="page">
		<view class="sos" @click="call()">
			<view class="icon">&#xe6d1;</view>
			SOS
		</view>
		<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="ms">
			<text class="icon">&#xe64a;</text>
			<text>谢通门县欢迎您</text>
		</view>
		<view class="top"><image :src="aboutUs.bgImg1 ? ip + aboutUs.bgImg1 : '../../static/loading.gif'" mode="aspectFill"></image></view>
		<view class="flex menu">
			<view class="f" @click="tab('/pages/travel/index')">
				<image src="../../static/icon3.png" mode="widthFix" class="icon1"></image>
				<view class="title">景区介绍</view>
			</view>
			<view class="f" @click="navigate('/pages/travel/introduction')">
				<image src="../../static/icon1.png" mode="widthFix" class="icon1"></image>
				<view class="title">旅游攻略</view>
			</view>
			<view class="f" @click="navigate('/pages/government/activity')">
				<image src="../../static/icon2.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" style="margin-top: 10px;">
			<view class="f" style="padding-right:8px;">
				<image
					@click="navigate('/pages/travel/detail?id=41')"
					:src="aboutUs.bgImg1 ? ip + aboutUs.bgImg2 : '../../static/loading.gif'"
					style="height: 164px;width: 100%;border-radius: 5px;"
					mode="aspectFill"
				/></image>
			</view>
			<view class="f">
				<image
					@click="navigate('/pages/travel/detail?id=42')"
					:src="aboutUs.bgImg1 ? ip + aboutUs.bgImg3 : '../../static/loading.gif'"
					style="height: 77px;width: 100%;border-radius: 5px;"
					mode="aspectFill"
				></image>
				<image
					@click="navigate('/pages/other/feedback')"
					:src="aboutUs.bgImg1 ? ip + aboutUs.bgImg4 : '../../static/loading.gif'"
					style="height: 77px;width: 100%;margin-top: 5px;border-radius: 5px;"
					mode="aspectFill"
				></image>
			</view>
		</view>
		<view class="it">
			<view class="v_title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">热门景区</view>
				<view class="more" @click="tab('/pages/travel/index')">
					更多
					<text class="arrow icon">&#xe62d;</text>
				</view>
				<view class="clear"></view>
			</view>
			<view class="jq_item" v-for="(item, index) in hot_list" :key="index" @click="detail(item)">
				<image :src="ip + item.showPictures" class="bmg" mode="aspectFill"></image>
				<view class="cons">
					<view class="tit omit">{{ item.title }}</view>
					<view class="desc omit">{{ item.briefContent }}</view>
				</view>
			</view>
		</view>
		<view class="it">
			<view class="v_title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">攻略指南</view>
				<view class="more" @click="navigate('/pages/travel/introduction')">
					更多
					<text class="arrow icon">&#xe62d;</text>
				</view>
				<view class="clear"></view>
			</view>
			<view class="jq_item flex" v-for="(item, index) in zn_list" :key="index" @click="detail(item)">
				<view class="f" style="height: 213px;border-radius: 5px 0px 0px 5px;"><image :src="ip + item.showPictures" mode="aspectFill"></image></view>
				<view class="f" style="padding: 10px;">
					<view class="cons">
						<view class="tit omit">{{ item.title }}</view>
						<view class="str-summery">{{ item.briefContent }}</view>
						<view class="lx">浏览</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			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.setStorageSync("user",{"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"memberId":27,"name":"wx_1011223213","mobile":"","email":null,"registerTime":"2021-11-23 21:39:27","lastLoginTime":"2021-11-23 21:53:20","lastLoginIp":"127.0.0.1","loginNum":2,"unionid":null,"openid":"ok3qt5FMehpGy6aOtqPd9pnPLC_Q","nickName":"西域男孩","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLeSLQBtiavUU0ByFbXtND7iaricbNU81HSdaV9bQLTfciaMV604u5TNIdjLiaarL7MIZQXIrWFZfNiaZIQ/132","gender":"0","province":"","city":"","country":"","language":"zh_CN","lastLat":null,"lastLng":null,"isShop":0,"apiToken":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIyNyIsImlhdCI6MTYzNzY3NTYwMCwiZXhwIjoxNjM4MjgwNDAwfQ.vRPuNnLrUH1T8_qOL6Ti4TT2Akw29Set18kiavbjJynol52cxHXqeRoStyF4afdcsiipELdVW9G8-zh52voOFg"})
	},
	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) {
			uni.navigateTo({ url: '/pages/travel/detail?id=' + item.contentId });
		},
		navigate(url) {
			uni.navigateTo({ url: url });
		},
		//拨打求助电话
		call() {
			this.$http.call(this.aboutUs);
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getData();
		}, 1000);
	}
};
</script>

<style lang="scss">
.page {
	padding: 10px;
	overflow-x: hidden;
}
.wd {
	margin-top: 28px;
	z-index: 111111;
	.qw {
		font-size: 25px;
		float: left;
		font-weight: bold;
	}
	.xs {
		margin-left: 45px;
		width: 100%;
		font-size: 13px;
		line-height: 20px;
	}
}
.ms {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	margin-top: 10px;
	.jb {
		float: right;
		font-size: 13px;
		font-weight: normal;
		margin-top: 6px;
	}
}
.top {
	image {
		width: 100%;
		height: 150px;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
}
.a1 {
	border-radius: 3px;
}
.it {
	margin-top: 15px;
}
.v_title {
	.hd {
		left: 25px;
	}
}
</style>