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

<template>
	<view class="page">
		<view class="sos" @click="call()">
			<view class="icon">&#xe6d1;</view>
			SOS
		</view>
		<view class="top">
			<view class="wz">
				<text class="icon">&#xe64a;</text>
				<text>谢通门县欢迎您！</text>
			</view>
			<view class="wd">
				<view class="qw">28°</view>
				<view class="xs">
					<view>中雨 东风2级</view>
					<view>空气优23</view>
				</view>
			</view>
			<view class="ms">城市后花园·温泉养生地·胜境谢通门</view>
			<image :src="item.showPictures[0] ? ip + item.showPictures[0] : '../../static/bg.jpg'" mode="aspectFill"></image>
		</view>
		<view class="main">
			<view class="flex menu">
				<view class="f" @click="tab('/pages/travel/index')">
					<view class="icon" style="background-color: #0f0b51;">&#xe605;</view>
					<view class="title">景区介绍</view>
				</view>
				<view class="f" @click="tab('/pages/government/index')">
					<view class="icon" style="background-color: #e23e33;">&#xe695;</view>
					<view class="title">党政服务</view>
				</view>
				<view class="f" @click="navigate('/pages/travel/introduction')">
					<view class="icon" style="background-color: #2cc937;">&#xe647;</view>
					<view class="title">旅游攻略</view>
				</view>
				<view class="f" @click="navigate('/pages/government/activity')">
					<view class="icon" style="background-color: #e23e33;">&#xe645;</view>
					<view class="title">热门活动</view>
				</view>
			</view>
			<view class="flex mt10">
				<view class="item" @click="tab('/pages/travel/index')">
					<view class="tag">景区介绍</view>
					<image :src="item.bgImg1 ? ip + item.bgImg1 : '../../static/img77.jpg'" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
				<view class="item" @click="tab('/pages/government/index')">
					<view class="tag">党政服务</view>
					<image :src="item.bgImg2 ? ip + item.bgImg2 : '../../static/img3.jpg'" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
			</view>
			<view class="flex">
				<view class="item" @click="navigate('/pages/travel/introduction')">
					<view class="tag">旅游攻略</view>
					<image :src="item.bgImg3 ? ip + item.bgImg3 : '../../static/img3.jpg'" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</view>
				</view>
				<view class="item" @click="navigate('/pages/government/activity')">
					<view class="tag">热门活动</view>
					<image :src="item.bgImg4 ? ip + item.bgImg4 : '../../static/img3.jpg'" mode="aspectFill" class="gray"></image>
					<view class="more">点击显示更多</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,
			item: { showPictures: [] }
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(e) {
		this.init();
	},
	methods: {
		init() {
			this.$http.request({
				url: this.$http.urls.home,
				success: res => {
					this.item = res.data.data.aboutUs;
					if (this.item.showPictures) {
						this.item.showPictures = this.item.showPictures.split(',');
					}
					uni.setStorageSync('aboutUs', this.item);
				}
			});
		},
		//拨打sos
		call() {
			if (!this.$hasLogin()) {
				uni.showModal({ content: '登陆才能使用该功能', showCancel: false });
				return;
			}
			//获取拨打人位置
			uni.authorize({
				scope: 'scope.userLocation',
				success: s => {
					uni.getLocation({
						type: 'wgs84',
						success: res => {
							uni.showModal({
								title: '提示',
								content: '是否拨打' + this.item.helpPhone + '求援电话?',
								success: c => {
									if (c.confirm) {
										//上传拨打救援记录
										this.$http.request({
											method: 'POST',
											url: this.$http.urls.pushHelp,
											data: {
												memberId: this.$getUser().memberId,
												lat: res.latitude,
												lng: res.longitude,
												phone: this.item.helpPhone,
												memberPhone: this.$getUser().mobile
											},
											success: r => {
												uni.makePhoneCall({
													phoneNumber: this.item.helpPhone
												});
											}
										});
									}
								}
							});
						}
					});
				},
				fail(res) {
					//1.2 拒绝授权
					console.log(JSON.stringify(res));
				}
			});
		},
		tab(url) {
			uni.switchTab({
				url: url
			});
		},
		navigate(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
.top {
	position: relative;
	height: 300px;
	color: white;
	.wz {
		position: absolute;
		top: 45px;
		left: 20px;
		z-index: 111;
		.icon {
			padding-right: 5px;
		}
	}
	.wd {
		position: absolute;
		top: 80px;
		left: 20px;
		z-index: 111111;
		.qw {
			font-size: 40px;
			float: left;
			font-weight: bold;
		}
		.xs {
			margin-left: 75px;
			width: 100%;
			font-weight: bold;
			margin-top: 6px;
		}
	}
	.ms {
		position: absolute;
		top: 155px;
		left: 20px;
		z-index: 111111;
		font-size: 17px;
		font-weight: bold;
	}
	image {
		width: 100%;
		height: 300px;
		position: absolute;
	}
}
.main {
	padding: 15px 15px 50px 15px;
	width: 100%;
	margin-top: -50px;
	overflow: hidden;
	position: absolute;
	.menu {
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		width: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.icon {
			font-size: 30px;
			background-color: #48a5ff;
			width: 38px;
			height: 38px;
			border-radius: 5px;
			margin: 0 auto;
			color: white;
			padding: 3px;
		}
		.title {
			padding-top: 4px;
			font-size: 13px;
		}
	}
	.item {
		flex: 1;
		overflow: hidden;
		padding: 5px;
		position: relative;
		image {
			border-radius: 5px;
			width: 100%;
			height: 180px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.tag {
			position: absolute;
			left: 10px;
			top: 10px;
			z-index: 11111;
			font-weight: bold;
			color: white;
			font-size: 16px;
		}
		.more {
			position: absolute;
			width: 70%;
			background: #e23e33;
			opacity: 0.78;
			color: white;
			bottom: 20px;
			border-radius: 5px;
			left: 16%;
			padding: 5px 7px;
			font-size: 13px;
		}
	}
}
.gray {
	-webkit-filter: grayscale(30%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(30%);
	filter: black;
}
</style>