You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
526 lines
16 KiB
526 lines
16 KiB
<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-pr-30 se-flex se-flex-v-c">
|
|
<button style="justify-content: center;" class="se-w-140 se-flex se-flex-ai-c se-h-60 se-lh-60 se-fs-22 se-bgc-green se-c-white se-py-0 se-br-30 se-px-20 se-m-0" open-type="share">
|
|
<uv-icon name="share" color="#fff"></uv-icon>
|
|
<text class="se-fs-20 se-pl-5">分享</text>
|
|
</button>
|
|
</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"
|
|
v-if="userInfo.isPay == 1">
|
|
<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"
|
|
v-if="userInfo.isPay == 1">
|
|
<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>
|
|
<button class="default-btn se-w-p-15 se-pr-30 se-flex se-flex-v-c" open-type="getUserInfo" @click="openMap">
|
|
<uv-icon name="map-fill"></uv-icon>
|
|
<text class="se-c-black se-fs-20 se-mt-10">导航</text>
|
|
</button>
|
|
<!-- <view class="se-w-p-15 se-pr-30 se-flex se-flex-v-c" @click="onDaoHang">
|
|
<uv-icon name="map-fill"></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 @click="previewImage(detail.homeImages, items)" v-for="(items,indexs) in detail.homeImages" :key="indexs" class="se-w-320 se-h-180 se-br-5 se-mr-10" :src="items" 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 v-if="rateList.length>0">
|
|
<view class="se-mt-30" v-for="(items,indexs) in rateList" :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 se-bgc-f5" style="min-width: 80rpx;" :src="items.userHead" 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">{{items.userName}}</text>
|
|
<text class="se-c-66 se-fs-22">{{items.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="se-flex se-flex-h-fe">
|
|
<uv-rate :count="5" :readonly="true" activeColor="#FCD618" v-model="items.num"></uv-rate>
|
|
</view>
|
|
</view>
|
|
<view class="se-lh-40 se-mt-10 se-fs-24 se-c-33">
|
|
{{items.userValue}}
|
|
</view>
|
|
<view class="se-mt-10 se-flex">
|
|
<image @click="previewImage(items.userImages, item)" v-for="(item,index) in items.userImages" :key="index" class="se-a-200 se-br-10 se-mr-10" :src="item" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="se-py-30">
|
|
<uv-empty mode="list" text="快来留言哦"></uv-empty>
|
|
</view>
|
|
</view>
|
|
<view class="se-pb-160"></view>
|
|
<view class="content-box">
|
|
<view class="se-flex se-w-p-90 se-px-20" @click="show=true">
|
|
<uv-input :disabled="true" class="se-br-p-50" placeholder="请输入评论信息" v-model="content"></uv-input>
|
|
</view>
|
|
</view>
|
|
<view v-if="show" @click="show=false" style="z-index: 98;width: 750rpx;height:100vh; position: fixed;top: 0rpx;left:0rpx;background-color: rgba(0,0,0,0.4);"></view>
|
|
<view v-if="show" class="se-b-t se-b-ts" style="z-index: 99;width: 750rpx;padding: 20rpx 0rpx 120rpx 0rpx; position: fixed;bottom: 0rpx;left:0rpx;background-color: #fff;">
|
|
<view class="se-bgc-white se-px-40">
|
|
<view class="se-flex se-flex-v se-fs-26 se-mt-20">
|
|
<text class="se-pb-20">评论评分</text>
|
|
<uv-rate :count="5" activeColor="#FCD618" v-model="rate"></uv-rate>
|
|
</view>
|
|
<view class="se-flex se-flex-v se-fs-26 se-mt-20">
|
|
<text class="se-pb-20">评论内容</text>
|
|
<uv-textarea v-model="userValue" placeholder="请输入评论内容"></uv-textarea>
|
|
</view>
|
|
<view class="se-lh-40 se-mt-20 se-fs-24 se-c-99">
|
|
<text class="se-pb-20">评论图片</text>
|
|
<uv-upload customStyle="margin-top:20rpx;" :fileList="userImages" @afterRead="afterImageRead" @delete="deleteImagePic" name="1"
|
|
multiple :maxCount="10"></uv-upload>
|
|
</view>
|
|
<view class="se-flex se-flex-h-sb se-mt-40">
|
|
<view @click="onSubmit" class="se-br-20 se-ml-20 se-flex-1 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-32 se-c-white se-bgc-green">
|
|
<text class="se-ml-10">发布</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { houseDetail,saveComment,commentPageList } from "@/common/api.js"
|
|
import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
|
|
export default{
|
|
data(){
|
|
return{
|
|
show:false,
|
|
content:"",
|
|
id:null,
|
|
address:"",
|
|
detail:{},
|
|
|
|
list:[],
|
|
|
|
rate:0,
|
|
userImages:[],
|
|
userImage:"",
|
|
userValue:"",
|
|
|
|
pageNo:1,
|
|
pageSize:10,
|
|
rateList:[]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
//#ifdef MP-WEIXIN
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
});
|
|
//#endif
|
|
this.id = options.id;
|
|
if(options.userId){
|
|
uni.setStorageSync('userId',options.userId)
|
|
}
|
|
this.getLocation()
|
|
this.onHouseDetail()
|
|
this.onCommentPageList()
|
|
},
|
|
onShareTimeline(){
|
|
let share = {
|
|
title:this.detail.title,
|
|
path:"/pages_subpack/detail/index?id="+this.id+"&userId="+uni.getStorageSync('userInfo').id,
|
|
imageUrl:this.list[0].url,
|
|
success:(res) => {
|
|
console.info(res)
|
|
},
|
|
fail:(err)=>{
|
|
console.info(err)
|
|
}
|
|
}
|
|
console.info(share)
|
|
return share
|
|
},
|
|
onShareAppMessage() {
|
|
let share = {
|
|
title:this.detail.title,
|
|
path:"/pages_subpack/detail/index?id="+this.id+"&userId="+uni.getStorageSync('userInfo').id,
|
|
imageUrl:this.list[0].url,
|
|
success:(res) => {
|
|
console.info(res)
|
|
},
|
|
fail:(err)=>{
|
|
console.info(err)
|
|
}
|
|
}
|
|
console.info(share)
|
|
return share
|
|
},
|
|
methods:{
|
|
openMap() {
|
|
var that = this;
|
|
uni.openLocation({
|
|
longitude: parseFloat(that.detail.longitude),
|
|
latitude: parseFloat(that.detail.latitude),
|
|
scale: 18,
|
|
name: that.detail.title,
|
|
address: that.detail.address,
|
|
success: function () {
|
|
console.log('success');
|
|
}
|
|
})
|
|
},
|
|
getLocation(){
|
|
const that = this;
|
|
wx.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
const qqmapsdk = new QQMapWX({
|
|
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
|
|
});
|
|
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: function(response) {
|
|
that.address = response.result.address
|
|
console.log('逆地理编码结果：', response);
|
|
|
|
},
|
|
fail: function(error) {
|
|
console.error('逆地理编码失败：', error);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
previewImage(urls, current) {
|
|
uni.previewImage({
|
|
urls: urls, // 需要预览的图片 HTTP 链接列表
|
|
current: current // 当前显示图片的链接，不填则默认为 urls 的第一张
|
|
});
|
|
},
|
|
onCommentPageList(){
|
|
let that = this
|
|
let params ={
|
|
houseId:that.id,
|
|
pageNo:that.pageNo,
|
|
pageSize:that.pageSize
|
|
}
|
|
commentPageList(params).then(response=>{
|
|
console.info('response',response)
|
|
response.result.records.forEach(items=>{
|
|
if(items.userImage){
|
|
items.userImages=items.userImage.split(',')
|
|
}
|
|
console.info(items.userImages)
|
|
// items.userImages=items.userImage.split(',')
|
|
})
|
|
that.rateList = that.rateList.concat(response.result.records)
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
onSubmit(){
|
|
let that = this
|
|
if(that.userValue&&that.rate){
|
|
let params={
|
|
title:that.detail.title,
|
|
num:that.rate,
|
|
homeId:that.detail.id,
|
|
userId:uni.getStorageSync('userInfo').id,
|
|
userHead:uni.getStorageSync('userInfo').headImage,
|
|
userName:uni.getStorageSync('userInfo').nickName,
|
|
userValue: that.userValue,
|
|
userImage:that.userImages.map(item => item.url).join(','),
|
|
}
|
|
saveComment(params).then(response=>{
|
|
that.show = false
|
|
that.pageNo=1
|
|
that.rate = 0
|
|
that.userImages = []
|
|
that.userValue =''
|
|
that.rateList=[]
|
|
that.onCommentPageList()
|
|
}).catch(error=>{
|
|
|
|
})
|
|
}else{
|
|
return uni.showToast({
|
|
icon:"none",
|
|
title:"评分和内容不能为空！"
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
deleteImagePic(event) {
|
|
this.userImages.splice(event.index, 1)
|
|
},
|
|
async afterImageRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.userImages.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
onHouseDetail(){
|
|
let that = this
|
|
houseDetail({houseId:that.id}).then(response=>{
|
|
let items = response.result
|
|
console.info('response',response.result)
|
|
if(items.homeMp4){
|
|
that.list.push({
|
|
url: items.homeMp4,
|
|
type: 'video'
|
|
})
|
|
}
|
|
if(items.image){
|
|
console.info('items.image.split()',items.image.split(','))
|
|
items.image.split(',').forEach(item=>{
|
|
that.list.push({
|
|
url: item,
|
|
type: 'image'
|
|
})
|
|
})
|
|
|
|
}
|
|
if(items.homeImage){
|
|
items.homeImages=[]
|
|
items.homeImage.split(',').forEach(item=>{
|
|
items.homeImages.push(item)
|
|
})
|
|
}else{
|
|
items.homeImages=[]
|
|
}
|
|
|
|
|
|
that.detail = items
|
|
}).catch(error=>{
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.default-btn{
|
|
background-color: transparent;
|
|
}
|
|
.default-btn::after{
|
|
content: "";
|
|
border: none;
|
|
}
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
.line-green {
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
background: #20CD7D;
|
|
border-radius: 4rpx;
|
|
}
|
|
.bgc-active-lg{
|
|
background-color: #F1FFF9;
|
|
}
|
|
.content-box{
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 120rpx;
|
|
background: #fff;
|
|
width: 100%;
|
|
padding: 20rpx 0rpx;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
</style>
|