houserent-front/pages_subpack/detail/index.vue

<template>
	<view>
		<view class="se-w-vw-100 se-h-500">
			<uv-swiper :radius="0" :list="list" :height="250" keyName="url" :autoplay="false"></uv-swiper>
		</view>
		<view class="se-py-20 se-flex se-bgc-white">
			<view class="se-w-vw-90 se-pl-30">
				<view class=" se-c-black se-fw-6 se-fs-32">
					{{detail.title}}
				</view>
				<view class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5">
					{{detail.iconTitle}}
				</view>
			</view>
			<view class="se-w-vw-10 se-pr-30 se-flex se-flex-v-c">
				<uv-icon name="photo"></uv-icon>
				<text class="se-c-black se-fs-20">分享</text>
			</view>
		</view>
		<view class="se-mt-30 se-bgc-white se-py-30 se-flex se-flex-h-fs">
			<view class="se-flex-1 se-flex-v-sa">
				<text class="se-c-66 se-fw-5">价格</text>
				<text class="se-c-red se-fw-6 se-mt-20">{{detail.price}}元/月</text>
			</view>
			<view class="se-flex-1 se-flex-v-sa">
				<text class="se-c-66 se-fw-5">户型</text>
				<text class="se-c-red se-fw-6 se-mt-20">{{detail.homeType}}</text>
			</view>
			<view class="se-flex-1 se-flex-v-sa">
				<text class="se-c-66 se-fw-5">面积</text>
				<text class="se-c-red se-fw-6 se-mt-20">{{detail.homeMi}}平方米</text>
			</view>
		</view>
		<view class="se-mt-30 se-p-40 se-bgc-white">
			<view class="se-flex se-flex-ai-c se-pb-10">
				<view class="line-green"></view>
				<view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
					房源信息
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">编号</text>
					<text class="se-c-black">{{detail.classId}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">房屋结构</text>
					<text class="se-c-black">{{detail.homeJg}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-2 se-py-20">
					<text class="se-c-66 se-mr-20">房屋地址</text>
					<text class="se-c-black se-fw-6">{{detail.address}}</text>
				</view>
			</view>
			<!-- <view class="se-flex bgc-active-lg se-py-20 se-br-10">
				<view class="se-w-p-85 se-pl-30">
					<view class=" se-c-black se-fw-6 se-fs-24">
						具体地址：{{detail.address}}
					</view>
					<view class="se-fs-22 se-py-5">
						距离你1.4km  骑行9分钟 步行18分钟
					</view>
				</view>
				<view class="se-w-p-15 se-pr-30 se-flex se-flex-v-c">
					<uv-icon name="photo"></uv-icon>
					<text class="se-c-black se-fs-20 se-mt-10">导航</text>
				</view>
			</view> -->
			<view class="se-flex se-fs-24">
				<view class="se-flex-2 se-py-20">
					<text class="se-c-66 se-mr-20">房屋周边</text>
					<text class="se-c-black se-fw-6">{{detail.homeBian}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">房间数量</text>
					<text class="se-c-black">{{detail.homeNum}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">菜地</text>
					<text class="se-c-black">{{detail.homeCai}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">距离场镇距离</text>
					<text class="se-c-black">{{detail.homeJl}}km</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">距离成都西三环</text>
					<text class="se-c-black">{{detail.homeShjl}}km</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">房屋主体是否改造</text>
					<text class="se-c-black">{{detail.homeGz}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">房屋面积</text>
					<text class="se-c-black">{{detail.homeMj}}㎡</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">院子总面积</text>
					<text class="se-c-black">{{detail.homeYzmj}}㎡</text>
				</view>
				<view class="se-flex-2 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">房屋朝向及海拔</text>
					<text class="se-c-black">{{detail.homeHb}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">是否经过安置</text>
					<text class="se-c-black">{{detail.homeAz}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">交通</text>
					<text class="se-c-black">{{detail.homeJt}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">坟包及电塔 工厂噪音</text>
					<text class="se-c-black">{{detail.homeZy}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">水电气网</text>
					<text class="se-c-black">{{detail.homeSd}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">停车</text>
					<text class="se-c-black">{{detail.homeCat}}</text>
				</view>
				<view class="se-flex-2 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">付款方式及押金</text>
					<text class="se-c-black">{{detail.homePay}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">租期</text>
					<text class="se-c-black">{{detail.homeTime}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">非正常死亡</text>
					<text class="se-c-black">{{detail.homeSw}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">邻居对房东评价</text>
					<text class="se-c-black">{{detail.homePj}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">佣金</text>
					<text class="se-c-black">{{detail.homeMoney}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">钥匙</text>
					<text class="se-c-black">{{detail.homeYs}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">户主家庭职业</text>
					<text class="se-c-black">{{detail.homeJtzy}}</text>
				</view>
			</view>
			<view class="se-flex se-fs-24">
				<view class="se-flex-1 se-py-20">
					<text class="se-c-66 se-mr-20">报建手续</text>
					<text class="se-c-black">{{detail.homeBjsx}}</text>
				</view>
				<view class="se-flex-1 se-py-20 se-flex se-flex-h-fe">
					<text class="se-c-66 se-mr-20">户主年龄</text>
					<text class="se-c-black">{{detail.homeAge}}岁</text>
				</view>
			</view>
		</view>
		<view class="se-mt-30 se-p-40 se-bgc-white">
			<view class="se-flex se-flex-ai-c se-pb-10">
				<view class="line-green"></view>
				<view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
					产权证照片
				</view>
			</view>
			<view class="se-flex se-mt-20">
				<image class="se-w-320 se-h-180 se-br-5" :src="detail.homeTf" mode=""></image>
				<image class="se-w-320 se-h-180 se-br-5 se-ml-10" :src="detail.image" mode=""></image>
			</view>
		</view>
		<!-- <view class="se-mt-30 se-p-40 se-bgc-white">
			<view class="se-flex se-flex-ai-c se-pb-10">
				<view class="line-green"></view>
				<view class="se-ml-10 se-fs-32 se-c-black se-fw-6">
					房东评价
				</view>
			</view>
			<view class="se-mt-30" v-for="(items,indexs) in 1" :key="indexs">
				<view class="se-flex se-w-p-100">
					<view class="se-flex se-flex-1">
						<image class="se-a-80 se-br-p-50" src="../../static/image/6588.png" mode=""></image>
						<view class="se-flex se-flex-v-sa se-flex-ai-fs se-ml-10">
							<text class="se-c-33 se-fs-26">IYU466930948</text>
							<text class="se-c-66 se-fs-22">2024.04.18</text>
						</view>
					</view>
					<view class="se-flex se-flex-1 se-flex-h-fe">
						<uv-rate :count="5" activeColor="#FCD618" v-model="rate"></uv-rate>
					</view>
				</view>
				<view class="se-lh-40 se-mt-10 se-fs-24 se-c-33">
					房东人很不错，当时疫情没在房子里面住，直接给我免了一个月房租，真的很感动，平时有什么需要维修的地方联系他也会很快处理☺☺☺
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { houseDetail } from "@/common/api.js"
	
	export default{
		data(){
			return{
				id:null,
				detail:{},
				rate:3,
				list:[],
				// list: [{
				// 	url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				// 	poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				// }, {
				// 	url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// }, {
				// 	url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }]
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.onHouseDetail()
		},
		methods:{
			onHouseDetail(){
				let that = this
				houseDetail({houseId:that.id}).then(response=>{
					let items = response.result
					console.info('response',response.result)
					if(items.image){
						console.info('items.image.split()',items.image.split(','))
						items.image.split(',').forEach(items=>{
							that.list.push({
								url: items
							})
						})
					}
					
					
					that.detail = items
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
	.line-green {
		width: 8rpx;
		height: 32rpx;
		background: #20CD7D;
		border-radius: 4rpx;
	}
	.bgc-active-lg{
		background-color: #F1FFF9;
	}
</style>