3h16min

pages.json

@@ -16,6 +16,12 @@
 		"style": {
 			"navigationBarTitleText": ""
 		}
+	},
+	{
+		"path": "pages/index/house_list",
+		"style": {
+			"navigationBarTitleText": ""
+		}
 	}
 ],
 	"globalStyle": {

pages/index/house_list.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="begin">
+		<view>
+			<view class="serach">
+				<image src="/static/搜索.png" mode=""></image>
+				<input type="search" placeholder="搜索民宿" />
+			</view>
+		</view>
+
+		<view class="content">
+			<view v-for="(value,index) in house_list">
+				<image :src="value[0]"></image>
+				<view>
+					<view>
+						<image src="/static/定位.png"></image>
+						<text>{{value[1]}}</text>
+					</view>
+					<view>{{value[2]}}</view>
+					<view>{{value[4]}}居{{value[5]}}床·{{value[6]}}人·{{value[7]}}分</view>
+					<view>￥{{value[3]}}</view>
+				</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 {
+				house_list: null,
+				footerlist
+			}
+		},
+		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.house_list = (await this.request("get", "/api/house/list")).rows.map(x => [
+				`http://124.93.196.45:10091/Neusoft/homestay${x.cover}`, x.cityInfo, x.location, x.price, x
+				.roomNum, x.parlorNum, x.commentNum, x.score
+			])
+			console.log(this.house_list)
+		}
+	}
+</script>
+
+<style>
+	.begin+view {
+		background-color: white;
+
+	}
+
+	.serach {
+		display: flex;
+		background-color: #999;
+		align-items: center;
+		padding: 6px;
+		border-radius: 50px;
+		margin: 30px 13px 10px 13px;
+	}
+
+	.serach>image {
+		height: 20px;
+		width: 20px;
+	}
+
+	.content {
+		background-color: #e6e6e6;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 10px;
+		margin: 10px;
+	}
+
+	.content>view {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		background-color: white;
+	}
+
+	.content>view>image {
+		width: 100%;
+		height: 20vh;
+	}
+
+	.content>view>view {
+		margin: 10px;
+	}
+
+	.content>view>view>view {
+		margin: 1px;
+	}
+
+	.content>view>view>view:first-child {
+		display: flex;
+		align-items: center;
+		color: darkgray;
+	}
+
+	.content>view>view>view:first-child text {
+		font-size: 0.8rem;
+	}
+
+	.content>view>view>view:nth-child(3) {
+		color: darkgray;
+		font-size: 0.8rem;
+	}
+
+	.content>view>view>view:nth-child(4) {
+		color: blue;
+	}
+
+	.content>view>view>view>image {
+		height: 20px;
+		width: 20px;
+	}
+
+	.footer {
+		display: flex;
+		justify-content: space-evenly;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		background-color: white;
+	}
+
+	.footer view {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+	}
+
+	.footer view image {
+		width: 30px;
+		height: 30px;
+	}
+</style>

pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<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">
@@ -11,7 +11,7 @@
 			<view>
 				<view>
 					<image src="/static/定位.png"></image>
-					<text>{{}}</text>
+					<text>{{gps}}</text>
 				</view>
 				<view>
 					<image src="/static/坐标.png"></image>
@@ -30,24 +30,36 @@
 				</view>
 			</view>
 			<view>
-				<input type="search" placeholder="搜索民宿名称" />
+				<input type="text" placeholder="搜索民宿名称" />
 			</view>
 			<button style="background-color: orange;">开始搜索</button>
 		</view>
 		<view>
 			<view>
-				<!-- <image src=""></image> -->
+				<image src="/static/民俗文化.png"></image>
 				<text>民俗文化</text>
 			</view>
 			<view>
-				<image src=""></image>
+				<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[0]"></image>
+				<image :src="unit[1]"></image>
-				<text>{{unit[1]}}</text>
+				<text>{{unit[0]}}</text>
 			</view>
 		</view>
 	</view>
@@ -57,10 +69,16 @@
 <script>
 	export default {
 		data() {
-			const footerlist = ["首页", "数据分析", "民宿", "我的"].map((value, index) => [value,`/static${["首页_首页.png","导航-民宿.png","导航-攻略.png","导航-我的.png"][index]}`])
+			const footerlist = ["首页", "数据分析", "民宿", "我的"].map((value, index) => [value,
+				`/static/${["首页_首页.png","导航-攻略.png","导航-民宿.png","导航-我的.png"][index]}`
+			])
 			return {
 				adv_list: null,
-				footerlist
+				footerlist,
+				area_list: [
+					[]
+				],
+				gps: []
 			}
 		},
 
@@ -97,17 +115,142 @@
 			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
 			])
-			console.log(this.adv_list);
+			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: 25vh;
+		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>