663 lines
14 KiB
Vue
663 lines
14 KiB
Vue
<template>
|
||
<view class="page">
|
||
|
||
<!-- 幻灯片 -->
|
||
<view class="swiper">
|
||
<view v-show="swiperType == 'image'">
|
||
<u-swiper :list="swiperList" height="500rpx" :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 }}</text>
|
||
</view>
|
||
</u-swiper>
|
||
</view>
|
||
|
||
<view class="video-box" v-show="swiperType == 'video'">
|
||
<video loop class="swiper-video" muted :autoplay="true" :src="form.videoUrl"></video>
|
||
</view>
|
||
<view class="swiper-switch">
|
||
<view @click="swiperType = 'video'" :class="{active: swiperType == 'video'}" class="swiper-switch-item">视频</view>
|
||
<view @click="swiperType = 'image'" :class="{active: swiperType == 'image'}" class="swiper-switch-item">图片</view>
|
||
</view>
|
||
|
||
|
||
<!-- 房源参数 -->
|
||
<view class="house-info">
|
||
<view class="title">
|
||
{{ form.houseTitle || '' }}
|
||
<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
|
||
</view>
|
||
<scroll-view scroll-x class="">
|
||
<view class="label">
|
||
<view class="u-page__tag-item" :key="index" v-for="(tag, index) in form.houseLabel">
|
||
<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="dict">
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.videoUrl.monthlyRent || 0 }}元/月</text>
|
||
<text class="desc">月租</text>
|
||
</view>
|
||
<view class="dict-item">
|
||
<text class="title">{{ form.extent || 0 }}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 v-if="isManager" class="item col-2">
|
||
房号：{{ form.roomNumber || '' }}
|
||
</view>
|
||
<view v-if="isManager" class="item col-2">
|
||
密码：{{ form.password || '' }}
|
||
</view>
|
||
<view v-if="isManager" class="item col-2">业主电话：{{ form.phone || '' }}</view>
|
||
<view v-if="isManager" class="item col-2">物业费：{{ form.propertyFees || '' }}</view>
|
||
<view v-if="isManager" class="item col-2">租期：{{ form.tenancy || '' }}</view>
|
||
<view class="item col-2" v-if="isManager">
|
||
佣金：{{ form.commission || '' }}
|
||
</view>
|
||
<view class="item col-2" v-if="isManager">
|
||
是否可溢价：{{ form.premium || '' }}
|
||
</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="form.liked"></u-icon>
|
||
<u-icon name="heart" size="28" v-else></u-icon>
|
||
<text v-if="form.liked">已收藏</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(form.phone)">
|
||
<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'
|
||
import {
|
||
getAgentUser,
|
||
getUser
|
||
} from '@/api/user.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: [],
|
||
menu,
|
||
region,
|
||
price,
|
||
extent,
|
||
sort,
|
||
baseList,
|
||
currentNum: 0,
|
||
scrollTop: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
actionStyle: {
|
||
background: '#3f72f4',
|
||
color: '#ffffff',
|
||
padding: '12rpx 0',
|
||
borderRadius: '12rpx'
|
||
},
|
||
swiperType: 'video',
|
||
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'
|
||
}],
|
||
agentUser: {},
|
||
isManager: false
|
||
};
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.houseId = options.houseId
|
||
this.getHouseInfo()
|
||
|
||
if(options.user_id) {
|
||
getAgentUser(options.user_id).then(res => {
|
||
this.agentUser = res.data
|
||
})
|
||
}
|
||
getUser().then(res=>{
|
||
this.isManager = res.data.gradeId == 15
|
||
}).catch((err)=>{
|
||
console.log(err);
|
||
})
|
||
},
|
||
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.swiperList = app.form.files
|
||
app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
|
||
// app.form.supporting = JSON.parse(res.data.supporting) || []
|
||
|
||
uni.$u.mpShare = {
|
||
title: `${app.form.houseTitle} ${app.form.monthlyRent}元/月 ${app.form.houseType} ${app.form.extent}m²`,
|
||
path: `sub_pages/house/detail?houseId=${app.form.houseId}&user_id=${uni.getStorageSync('userId')}`
|
||
// path: '' + app.form.houseId + app.form.monthlyRent + '&user_id=' + uni.getStorageSync('userId')
|
||
}
|
||
}).catch(err => {
|
||
app.$error(err.message)
|
||
})
|
||
},
|
||
onHeart() {
|
||
const app = this;
|
||
HouseInfoApi.likeHouse({
|
||
houseId: this.form.houseId,
|
||
houseUserId: this.form.userId
|
||
}).then(res=>{
|
||
app.form.liked = res.data
|
||
})
|
||
},
|
||
onCall(phone) {
|
||
if (this.agentUser && this.agentUser.phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.agentUser.phone
|
||
})
|
||
}else if(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
.video-box{
|
||
width: 750rpx;
|
||
height: 500rpx;
|
||
text-align: center;
|
||
.swiper-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: auto;
|
||
}
|
||
}
|
||
.swiper-switch{
|
||
position: absolute;
|
||
display: flex;
|
||
border-radius: 20rpx;
|
||
height: 40rpx;
|
||
width: 200rpx;
|
||
background-color: rgba(0, 0, 0, 0.35);
|
||
left: 30rpx;
|
||
bottom: 100rpx;
|
||
&-item {
|
||
color: #FFFFFF;
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 20rpx;
|
||
&.active {
|
||
background-color: #FFFFFF;
|
||
color: #333333;
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |