3h16min

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>