第一次提交
This commit is contained in:
gxwebsoft
577
sub_pages/house/detail.vue
Normal file
577
sub_pages/house/detail.vue
Normal file
@@ -0,0 +1,577 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- 幻灯片 -->
|
||||
<view class="swiper">
|
||||
<u-swiper :list="form.files" :height="250" :radius="0" @change="e => currentNum = e.current"
|
||||
indicatorStyle="right: 20px; bottom: 50px" @click="click">
|
||||
<view slot="indicator" class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length + 1 }}</text>
|
||||
</view>
|
||||
</u-swiper>
|
||||
|
||||
<!-- 房源参数 -->
|
||||
<view class="house-info">
|
||||
<view class="title">
|
||||
{{ form.houseTitle }}
|
||||
<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="u-page__tag-item" v-for="tag in form.houseLabel">
|
||||
<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dict">
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.monthlyRent }}元/月</text>
|
||||
<text class="desc">月租</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.extent }}m²</text>
|
||||
<text class="desc">建筑面积</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.houseType }}</text>
|
||||
<text class="desc">户型</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.floor }}</text>
|
||||
<text class="desc">楼层</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源介绍 -->
|
||||
<u-gap height="124"></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源介绍
|
||||
</view>
|
||||
<view class="field-list">
|
||||
<view class="item col-2">
|
||||
城市：{{ form.city }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
区/县：{{ form.region }}
|
||||
</view>
|
||||
<view class="item col-1">
|
||||
详细地址：{{ form.address }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
租金(元/m²)：{{ form.rent }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
房号：{{ form.roomNumber }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
密码：{{ form.password }}
|
||||
</view>
|
||||
<view class="item col-2">业主电话：{{ form.phone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 办公室配套 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
办公室配套
|
||||
</view>
|
||||
<view class="field-list">
|
||||
<u-grid :border="false" col="5" @click="click">
|
||||
<u-grid-item v-for="(baseListItem,baseListIndex) in form.supporting" :key="baseListIndex">
|
||||
<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
|
||||
<text class="grid-text">{{baseListItem.title}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源介绍 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源介绍
|
||||
</view>
|
||||
<view class="about">
|
||||
<mp-html :content="form.content" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源位置 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源位置
|
||||
</view>
|
||||
<view class="position">
|
||||
<map style="width: 100%; height: 200px;" :latitude="form.latitude" :longitude="form.longitude"
|
||||
:markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房产经纪人 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="user-card">
|
||||
<u-cell :title="`${form.nickname}`" :label="`发布房源10套`" :border="false">
|
||||
<u-avatar slot="icon" size="50"
|
||||
:src="form.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text style="color: #666666;">{{ form.gradeName }}</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<u-gap height="100"></u-gap>
|
||||
<view class="pay-tools">
|
||||
<view class="item" @click="onHeart">
|
||||
<u-icon name="heart-fill" size="28" color="#ff0000" v-if="heart"></u-icon>
|
||||
<u-icon name="heart" size="28" v-else></u-icon>
|
||||
<text v-if="heart">已收藏</text>
|
||||
<text v-else>收藏</text>
|
||||
</view>
|
||||
<view class="item" @click="$push('sub_pages/checkout/checkout?id=' + form.houseId)">
|
||||
<u-button icon="map" type="error" text="预约看房"></u-button>
|
||||
</view>
|
||||
<view class="item" @click="onCall">
|
||||
<u-button icon="phone" type="primary" text="电话咨询"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Util from '@/utils/util.js'
|
||||
import store from '@/store'
|
||||
import storage from '@/utils/storage'
|
||||
import * as HouseInfoApi from '@/api/house-info.js'
|
||||
|
||||
const menu = [{
|
||||
name: '推荐',
|
||||
reset: true
|
||||
},
|
||||
{
|
||||
name: '必看房源',
|
||||
reset: false
|
||||
}
|
||||
];
|
||||
const region = [{
|
||||
value: 0,
|
||||
text: "青秀区"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "兴宁区"
|
||||
}
|
||||
];
|
||||
const price = [{
|
||||
value: 0,
|
||||
text: "3000"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "4000"
|
||||
}
|
||||
];
|
||||
const extent = [{
|
||||
value: 0,
|
||||
text: "200平"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "300平"
|
||||
}
|
||||
];
|
||||
const sort = [{
|
||||
value: 0,
|
||||
text: "升序"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "降序"
|
||||
}
|
||||
];
|
||||
const baseList = [{
|
||||
name: 'star',
|
||||
title: '价格低'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '间隔'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '工区大'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向东'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向西'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向南'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向北'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '中间楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '高楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '低楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '落地窗'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '通上下水'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '可做厨房'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '中央空调'
|
||||
},
|
||||
]
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
houseId: 0,
|
||||
form: {
|
||||
|
||||
},
|
||||
swiperList: [
|
||||
'https://file.wsdns.cn/20230802/f33f5ac239c843438b36f40941d946ef.png',
|
||||
'https://file.wsdns.cn/20230802/1116a02b07904991b2ebdc2c3da4a691.png',
|
||||
],
|
||||
menu,
|
||||
region,
|
||||
price,
|
||||
extent,
|
||||
sort,
|
||||
baseList,
|
||||
currentNum: 0,
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
},
|
||||
actionStyle: {
|
||||
background: '#3f72f4',
|
||||
color: '#ffffff',
|
||||
padding: '12rpx 0',
|
||||
borderRadius: '12rpx'
|
||||
},
|
||||
heart: false,
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: 'https://oss.wsdns.cn/20230803/49fe9c001370488caf29c3decb34f6c7.png?x-oss-process=image/resize,w_750/quality,Q_90'
|
||||
}]
|
||||
};
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
this.houseId = options.houseId
|
||||
this.getHouseInfo()
|
||||
},
|
||||
onShow() {},
|
||||
onBackPress() {},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
getHouseInfo() {
|
||||
const app = this
|
||||
const {
|
||||
houseId
|
||||
} = this
|
||||
HouseInfoApi.getHouseInfo(houseId).then(res => {
|
||||
app.form = res.data
|
||||
app.form.files = JSON.parse(res.data.files) || []
|
||||
app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
|
||||
// app.form.supporting = JSON.parse(res.data.supporting) || []
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onHeart() {
|
||||
this.heart = !this.heart
|
||||
},
|
||||
onCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '15878179339'
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.search-fix {
|
||||
width: 750rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
|
||||
.search {
|
||||
width: 690rpx;
|
||||
margin: 15rpx auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search-tools {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.region {
|
||||
width: 170rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 300rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.no-fixed {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
position: relative;
|
||||
|
||||
.house-info {
|
||||
width: 660rpx;
|
||||
height: 240rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
position: absolute;
|
||||
bottom: -200rpx;
|
||||
left: 25rpx;
|
||||
z-index: 100;
|
||||
|
||||
.label {
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dict {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.dict-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 26rpx;
|
||||
|
||||
.title {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 660rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.house-card {
|
||||
width: 660rpx;
|
||||
min-height: 240rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
z-index: 100;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 320rpx;
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 640rpx !important;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.about {
|
||||
color: #4b4b4b;
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.house-list {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
// box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||||
background-color: #ffffff;
|
||||
width: 338rpx;
|
||||
|
||||
image {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 420rpx;
|
||||
width: 338rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-tools {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 120rpx;
|
||||
width: 750rpx;
|
||||
border-top: 1rpx solid #f3f3f3;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-num {
|
||||
padding: 2px 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 100px;
|
||||
width: 35px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-layout {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user