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

<template>
	<view class="page">
		<view class="wd">
			<view class="qw">28°</view>
			<view class="xs">
				<view>中雨 东风2级</view>
				<view>空气优23</view>
			</view>
		</view>
		<view class="ms">
			<text class="icon">&#xe64a;</text>
			<text>谢通门县欢迎您</text>
			<navigator url="/pages/index/index" class="jb">旧版首页</navigator>
		</view>
		<view class="top"><image src="../../static/bjt.jpg" mode="widthFix"></image></view>
		<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="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 class="f" @click="tab('/pages/government/index')">
				<view class="icon" style="background-color: #e23e33;">&#xe695;</view>
				<view class="title">党政服务</view>
			</view>
		</view>
		<view class="flex" style="margin-top: 10px;">
			<view class="f a1"><image src="../../static/img11.jpg" style="height: 170px;width: 93%;"></image></view>
			<view class="f a1">
				<image src="../../static/aa2.jpg" style="height: 80px;width: 100%;"></image>
				<image src="../../static/aa3.jpg" style="height: 80px;width: 100%;margin-top: 5px;position: relative;">
					<button class="feedback" open-type="feedback">我要投诉</button>
				</image>
			</view>
		</view>
		<view class="it">
			<view class="title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">热门景区</view>
				<view class="more">更多 <text class="arrow icon">&#xe62d;</text></view>
				<view class="clear"></view>
			</view>
			<view class="item">
				<image src="../../static/a15.jpg" class="bmg"></image>
				<view class="tit">2021年谢通门“文化旅游节”开幕</view>
				<view class="desc omit">
					谢通门是藏族独具特色的传统节日，至今已有600多年的历史。 “达玛文化旅游节”是谢通门县一年一度的传统节日，是历史民族文化的传承，该活动的举办将实现民族、经贸的交往交
					流交融，为期五天的“达玛节”，除进行群众文艺演出、物交会外，还将进行赛马、赛牦牛、跑马射箭、抱石头等传统 民族体育活动。
				</view>
			</view>
		</view>
		<view class="it">
			<view class="title">
				<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
				<view class="hd">攻略指南</view>
				<view class="more">更多 <text class="arrow icon">&#xe62d;</text></view>
				<view class="clear"></view>
			</view>
			<view class="item flex">
				<view class="f" style="overflow: hidden;"><image src="../../static/img2.jpg" class="img"></image></view>
				<view class="f" style="padding: 10px;">
					<view class="tit">日喀则的绝色风光</view>
					<view class="str-summery">日喀则绝美的自然风光，历史悠久的古城古韵、青山绿水、蓝天白云......如此震撼人心的独特景致！</view>
					<view class="lx">浏览</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();
		//uni.setStorageSync("user",{"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"memberId":2,"name":"wx_5259072147","mobile":"13097850972","email":null,"registerTime":"2021-09-30","lastLoginTime":"2021-11-04","lastLoginIp":"127.0.0.1","loginNum":2,"unionid":null,"openid":"oHYRz5QirxH4-tmZWP0D84HDCv1Q","nickName":"西域男孩","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJCNYUsTpmibmbGAJa6icVT1RZ5uNmusrtibIBgFu112ibe4f0jEvicZlWf0DkeS3l0YlnYkq178W2h8fw/132","gender":"1","province":"广西","city":"玉林","country":"中国","language":"zh_CN","lastLat":null,"lastLng":null,"isShop":2,"apiToken":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIyIiwiaWF0IjoxNjM2NjE4Mjc2LCJleHAiOjE2MzcyMjMwNzZ9.c4reK2ce_SfKOaWuaK8CdWv2kLQl4xl92-HLfWuvLySaRNp1oBrW51KToxggbvOcFgRS0bBpl7UCSOMKIkff5A"})
	},
	methods: {
		init() {
			this.$http.request({
				url: this.$http.urls.getAboutUs,
				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">
.page {
	padding: 10px;
}
.wd {
	margin-top: 25px;
	z-index: 111111;
	.qw {
		font-size: 25px;
		float: left;
		font-weight: bold;
	}
	.xs {
		margin-left: 45px;
		width: 100%;
		margin-top: 6px;
		font-size: 13px;
	}
}
.ms {
	font-size: 22px;
	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%;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
}
.a1 {
	padding: 5px 0px 5px 0px;
	image {
		border-radius: 5px;
	}
}
.it {
	margin-top: 15px;
	.title {
		font-size: 20px;
		margin-bottom: -15px;
		font-weight: bold;
		color: #333;
		.lo {
			width: 150px;
		}
		.hd {
			position: absolute;
			left: 20px;
			margin-top: -35px;
		}
	}
	.item {
		margin-top: 10px;
		padding: 10px;
		.bmg {
			width: 100%;
			height: 150px;
		}
		.tit {
			font-size: 17px;
			font-weight: bold;
		}
		.desc {
			font-size: 13px;
			color: $dar;
			padding-top: 3px;
		}
		.img {
			height: 200px;
			border-radius: 5px;
		}
		.str-summery {
			font-size: 13px;
			color: $dar;
			padding-top: 10px;
			text-align: left;
			line-height: 20px;
		}
		.lx {
			width: 150px;
			color: #fff;
			background: #d72424;
			border-radius: 20px;
			padding: 5px 12px;
			font-size: 13px;
			color: white;
			font-weight: bold;
			line-height: 23px;
			margin-top: 20px;
			.icon {
				padding-right: 5px;
				font-size: 20px;
			}
		}
	}
}
</style>