files_third/pages/index/house_list.vue

<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>