files_third/pages/index/index.vue

<template>
	<view class="begin">
		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="value in adv_list">
				<view class="swiper-item">
					<image :src="value[0]"></image>
				</view>
			</swiper-item>
		</swiper>
		<view>
			<view>
				<view>
					<image src="/static/定位.png"></image>
					<text>{{gps}}</text>
				</view>
				<view>
					<image src="/static/坐标.png"></image>
					<text>我的位置</text>
				</view>
			</view>
			<view>
				<view>
					<view>入住</view>
					<view>请选择</view>
				</view>
				<view>共{{}}晚</view>
				<view>
					<view>离店</view>
					<view>请选择</view>
				</view>
			</view>
			<view>
				<input type="text" placeholder="搜索民宿名称" />
			</view>
			<button style="background-color: orange;">开始搜索</button>
		</view>
		<view>
			<view>
				<image src="/static/民俗文化.png"></image>
				<text>民俗文化</text>
			</view>
			<view>
				<image src="/static/优惠促销.png"></image>
				<text>优惠促销</text>
			</view>
		</view>
		<view>
			<view>
				<view>旅游攻略</view>
				<view>旅游头条</view>
			</view>
			<view>
				<view>查看更多</view>
				<view>
					<image src="/static/联合 10.png"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view v-for="unit in footerlist">
				<image :src="unit[1]"></image>
				<text>{{unit[0]}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			const footerlist = ["首页", "数据分析", "民宿", "我的"].map((value, index) => [value,
				`/static/${["首页_首页.png","导航-攻略.png","导航-民宿.png","导航-我的.png"][index]}`
			])
			return {
				adv_list: null,
				footerlist,
				area_list: [
					[]
				],
				gps: []
			}
		},

		methods: {
			async request(method, path) {
				let text
				if (method == "post") {
					text = await fetch(`http://124.93.196.45:10091/Neusoft/homestay${path}`, {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
							// "Authorization":
						},
						body: JSON.stringify({
							"password": "0CYdq6Hn",
							"username": "6dOMIgIU"
						})
					})
				} else if (method == "get") {
					text = await fetch(`http://124.93.196.45:10091/Neusoft/homestay${path}`, {
						method: "GET",
						headers: {
							"Content-Type": "application/json",
							"Authorization": (await this.request("post", "/api/login")).token
						}
					})
				}
				const data = await text.json()
				console.log(data);
				return data
			}
		},
		async mounted() {
			this.adv_list = (await this.request("get", "/api/adv/list")).data.map(x => [
				`http://124.93.196.45:10091/Neusoft/homestay${x.image}`, x.id, x.title, x.createTime
			])
			this.area_list = (await this.request("get", "/api/location/area/list")).rows.map(x => [x.provinceName, x
				.cityName, x.name, x.id
			])
			this.gps = (await this.request("get", "/api/location/gps")).data.location
		}
	}
</script>

<style>
	swiper {
		height: 30vh;
	}

	swiper image {
		width: 100%;
	}

	.begin>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		height: 35vh;
		justify-content: space-evenly;
		box-shadow: 2px 2px 5px black;
		padding: 3%;
		margin: 3%;
		border-radius: 10px;
	}

	.begin>view:nth-child(2)>view:first-child {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #999;
		padding-bottom: 10px;
	}

	.begin>view:nth-child(2)>view>view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.begin>view:nth-child(2)>view:first-child>view image {
		width: 20px;
		height: 20px;
	}

	.begin>view:nth-child(2)>view:nth-child(2) {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #999;
	}

	.begin>view:nth-child(2)>view:nth-child(2)>view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0px;
	}

	.begin>view:nth-child(2)>view:nth-child(3) {
		padding: 15px;
		border-bottom: 1px solid #999;
		margin-bottom: 15px;
	}

	button {
		width: 95%;
	}

	.begin>view:nth-child(3) {
		height: 10vh;
		margin: 15px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0px 10px;
	}

	.begin>view:nth-child(3)>view {
		height: 7vh;
		display: flex;
		align-items: center;
		padding: 5px 15px;
		border-radius: 10px;
		box-shadow: 2px 2px 5px black;
	}

	.begin>view:nth-child(3) image {
		height: 30px;
		width: 30px;
	}

	.begin>view:nth-child(3)+view {
		display: flex;
		justify-content: space-between;
	}

	.begin>view:nth-child(3)+view>view:nth-child(1) {
		display: flex;
		align-items: flex-end;
	}

	.begin>view:nth-child(3)+view>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.begin>view:nth-child(3)+view>view:nth-child(2)>view:nth-child(2) image {
		display: block;
		height: 20px;
		width: 18px;
		line-height: 20px;
	}

	.begin>view:nth-child(3)+view>view:first-child>view:first-child {
		font-size: 1.4rem;
	}

	.footer {
		display: flex;
		justify-content: space-evenly;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.footer view {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.footer view image {
		width: 30px;
		height: 30px;
	}
</style>