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.
629 lines
13 KiB
629 lines
13 KiB
<template>
|
|
<view class="info" v-if="info">
|
|
<u-navbar :title="info.pagodaName" title-width="400" :title-bold="true"></u-navbar>
|
|
<view class="imgs">
|
|
<!-- 轮播图 -->
|
|
<view class="swiper">
|
|
<u-swiper :list="info.pagodaImgs" height="360 " @click="showImgs" border-radius="0">
|
|
</u-swiper>
|
|
</view>
|
|
|
|
<!-- <u-image width="750rpx" height="480rpx" :src="src" @click="showImgs"></u-image> -->
|
|
<view class="adjunct" v-if="info.pagodaImgs && info.pagodaImgs.length > 0" @click="showImgs(0)">
|
|
周边环境
|
|
({{info.pagodaImgs.length}})
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="container">
|
|
<!-- 简介 -->
|
|
<view class="introduce">
|
|
<view class="title">
|
|
{{info.pagodaName}}
|
|
</view>
|
|
<view class="content">
|
|
{{info.cemeteryIntroduce }}
|
|
</view>
|
|
<view class="location">
|
|
<view class="icon">
|
|
|
|
</view>
|
|
<view class="text" @click="toMap">
|
|
{{info.address}}
|
|
</view>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 基本信息 -->
|
|
<view class="message">
|
|
<view class="title">
|
|
基本信息
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">面积：</text> {{info.pagodaArea}}m(使用面积)
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">朝向：</text>{{info.towards}}
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">户型：</text>{{info.graveNum}}
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">楼层：</text>{{info.floor}}
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">年代：</text>{{info.years}}建成
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">公司：</text>{{info.developersName}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 租约信息 -->
|
|
<view class="leaseInfo" v-if="info.leaseInfo">
|
|
<view class="title">
|
|
租约信息
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">可使用期限：</text> {{info.leaseInfo.employType}}
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">签约时间：</text>{{info.leaseInfo.contractDate}}
|
|
</view>
|
|
<view class="item">
|
|
<text class="text">注意事项：</text>{{info.leaseInfo.attention}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 神塔简介 -->
|
|
<view class="cemeteryInfo">
|
|
<view class="title">
|
|
神塔简介
|
|
</view>
|
|
<view class="text">
|
|
{{info.cemeteryContent}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 神塔产权信息 -->
|
|
<view class="property">
|
|
<view class="title">
|
|
神塔产权2信息
|
|
</view>
|
|
<u-image width="750rpx" height="480rpx" :src="info.titleCertificatePath" mode="scaleToFill"></u-image>
|
|
</view>
|
|
|
|
<!-- 神塔墓穴 -->
|
|
<view class="annunciate" id="map" v-if="info.annunciate">
|
|
<view class="title">
|
|
神塔墓穴
|
|
</view>
|
|
<view class="left">
|
|
<view class="head">
|
|
<u-image width="48rpx" height="48rpx" :src="info.annunciate.head" mode="scaleToFill"></u-image>
|
|
</view>
|
|
<view class="name">
|
|
{{info.annunciate.name}}
|
|
</view>
|
|
<view class="message">
|
|
{{info.annunciate.message}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right">
|
|
刚刚预约 <u-icon name="arrow-right" color="#909399" size="28"
|
|
style="margin-left: 8rpx;transform: translateY( 3rpx);"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 陵园介绍 -->
|
|
<view class="cemeteryInfo">
|
|
<view class="title">
|
|
陵园介绍
|
|
</view>
|
|
<cemeteryCart width="280rpx" height="210rpx" :info="info" />
|
|
</view>
|
|
|
|
<!-- 周边及交通 -->
|
|
<view class="ambitus">
|
|
<view class="title">
|
|
<view class="text">
|
|
周边及交通
|
|
</view>
|
|
<view class="right" @click="toMap">
|
|
周边详情 <u-icon name="arrow-right" color="#909399" size="28"
|
|
style="margin-left: 8rpx;transform: translateY( 3rpx);"></u-icon>
|
|
</view>
|
|
</view>
|
|
<map style="width:100%;height:300rpx;" :latitude="+info.cemeteryLatitude"
|
|
:longitude="+info.cemeteryLongitude" :markers="covers" @tap="toMap">
|
|
</map>
|
|
<!--
|
|
<map style="width:100%;height:300rpx;" :latitude="latitude"
|
|
:longitude="longitude" :markers="covers" @tap="toMap">
|
|
</map> -->
|
|
<view class="hint">
|
|
数据来自百度地图，仅供参考
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 其他推荐 -->
|
|
<view class="recommend">
|
|
<view class="title">
|
|
其他推荐
|
|
</view>
|
|
<scroll-view class="list" scroll-x="true" scroll-left="0">
|
|
<Cart width="328rpx" height="246rpx" :info="item" class="u-p-r-20" v-for="(item,index) in rentingList"
|
|
@click.native="toInfo(item,'renting')" @toLink="toLinkInfo(item)" :class="{'u-p-l-20': index === 0 }" />
|
|
<Cart width="328rpx" height="246rpx" :info="item" class="u-p-r-20" v-for="(item,index) in resellingList"
|
|
:class="{'u-p-l-20': index === 0 }" @toLink="toLinkInfo(item)" @click.native="toInfo(item,'renting')" />
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 提示 -->
|
|
<view class="warning">
|
|
<text class="text">自如承诺真实资源，如有疑议，请点击</text> <text class="link">资源纠纷</text>
|
|
</view>
|
|
|
|
<!-- 空 -->
|
|
<view style="height: 2rpx;">
|
|
</view>
|
|
<!-- 底部 -->
|
|
<view class="bottom">
|
|
<view class="heart" @click="addCollect">
|
|
<u-icon name="heart" size="36" style="margin-right: 12rpx; transform: translateY(4rpx);"></u-icon>收藏
|
|
</view>
|
|
<view class="link btn" @click="toLinkInfo">
|
|
链上查看
|
|
</view>
|
|
|
|
<view class="subscribe btn" @click="toSubscribe">
|
|
预约了解
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Cart from '../../../components/cart.vue'
|
|
import cemeteryCart from './components/listItem'
|
|
import Map from '../../../components/ms-openMap/openMap.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
info: null,
|
|
type: '', // 购买 | 出租
|
|
queryData: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pagodaName: '', // 模糊查询
|
|
pagodaStatus: '', // 神塔状态reselling售卖中，renting出租中
|
|
isRecommend: true,
|
|
},
|
|
total: 0,
|
|
latitude: 22.671563,
|
|
longitude:113.881745,
|
|
covers: [{
|
|
id: 1,
|
|
width: 42,
|
|
height: 47,
|
|
rotate: 0,
|
|
latitude: 22.671563,
|
|
longitude: 113.881745,
|
|
iconPath: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1661148976,2067231542&fm=26&gp=0.jpg',
|
|
}],
|
|
|
|
// 租赁列表
|
|
rentingList: [],
|
|
// 出售列表
|
|
resellingList: [],
|
|
}
|
|
},
|
|
methods: {
|
|
infoDatawww() {
|
|
console.log('000000')
|
|
uni.$emit('infoData', {
|
|
isCollection: true
|
|
})
|
|
},
|
|
toInfo(info, type) {
|
|
uni.navigateTo({
|
|
url: 'cemeteryInfo?id=' + info.pagodaId + '&type=' + type
|
|
})
|
|
},
|
|
|
|
// 其他推荐
|
|
async getRecommendList(type) {
|
|
// 出租响应
|
|
console.log(type , 99)
|
|
if (type === 'renting') {
|
|
this.queryData.pagodaStatus = type
|
|
let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
|
|
this.rentingList = res.data.rows
|
|
console.log(res, 8880099)
|
|
} else {
|
|
// 出售响应
|
|
this.queryData.pagodaStatus = type
|
|
let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
|
|
this.resellingList = res.data.rows
|
|
console.log(res, 8880099)
|
|
}
|
|
|
|
},
|
|
async addCollect() {
|
|
let res = await this.$u.api.pagoda.addBrowseService({
|
|
pagodaId: this.info.pagodaId,
|
|
browseType: 'collection'
|
|
})
|
|
this.$u.toast('添加成功');
|
|
},
|
|
async getPagodaInfo(id) {
|
|
let res = await this.$u.api.pagoda.getPagodaDetails({
|
|
pagodaId: id
|
|
})
|
|
this.info = res.data
|
|
this.covers[0].latitude = this.info.cemeteryLatitude
|
|
this.covers[0].longitude = this.info.cemeteryLongitude
|
|
console.log(this.info, 99622)
|
|
|
|
// #ifdef APP-PLUS
|
|
setTimeout(() => {
|
|
uni.$emit('infoData', {
|
|
isCollection: this.info.isCollection
|
|
})
|
|
}, 300)
|
|
// #endif
|
|
|
|
// 添加预览
|
|
let res2 = await this.$u.api.pagoda.addBrowseService({
|
|
pagodaId: this.info.pagodaId,
|
|
browseType: 'browse'
|
|
})
|
|
},
|
|
toMap() {
|
|
|
|
Map.openMap(+this.info.cemeteryLatitude, +this.info.cemeteryLongitude, this.info.cemeteryName )
|
|
},
|
|
// 创建原生控件 弃用
|
|
createBtn() {
|
|
// const mapNvue = uni.getSubNVueById('map');
|
|
// // 获取节点
|
|
// const query = uni.createSelectorQuery().in(this);
|
|
// query.select('#map').boundingClientRect(data => {
|
|
// console.log("得到布局位置信息" + JSON.stringify(data));
|
|
// console.log("节点离页面顶部的距离为" + data.bottom);
|
|
// mapNvue.setStyle({
|
|
// "top": data.top + 30 + 'px'
|
|
// })
|
|
// }).exec();
|
|
},
|
|
|
|
showImgs(index) {
|
|
console.log(index, 99)
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: this.info.imgList,
|
|
longPressActions: {
|
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
success: function(data) {
|
|
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
},
|
|
fail: function(err) {
|
|
console.log(err.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
toSubscribe() {
|
|
// 数据缓存
|
|
this.$u.vuex('vuex_cemeteryData', this.info)
|
|
uni.navigateTo({
|
|
url: '../subscribe/subscribe'
|
|
})
|
|
},
|
|
toLinkInfo() {
|
|
console.log('0000000009999999999999999999999999999999')
|
|
uni.navigateTo({
|
|
url: '../linkInfo/linkInfo'
|
|
})
|
|
},
|
|
async cancelCollect() {
|
|
console.log('---------')
|
|
let res = await this.$u.api.pagoda.delBrowseService({
|
|
pagodaId: this.info.pagodaId
|
|
})
|
|
this.$u.toast('已经取消');
|
|
}
|
|
},
|
|
onLoad(data) {
|
|
console.log(data)
|
|
if (data?.id) {
|
|
this.getPagodaInfo(data.id)
|
|
}
|
|
|
|
if (data?.type) {
|
|
this.type = data.type
|
|
// 其他推荐
|
|
this.getRecommendList(this.type)
|
|
}else {
|
|
this.getRecommendList()
|
|
}
|
|
|
|
// 按钮事件侦听
|
|
// #ifdef APP-PLUS
|
|
// 链上查看
|
|
uni.$on('toLinkInfo', () => {
|
|
this.toLinkInfo()
|
|
})
|
|
// 预约
|
|
uni.$on('toSubscribe', () => {
|
|
this.toSubscribe()
|
|
})
|
|
// 收藏
|
|
uni.$on('addCollect', () => {
|
|
this.addCollect()
|
|
})
|
|
// 取消收藏
|
|
uni.$on('cancelCollect', () => {
|
|
this.cancelCollect()
|
|
})
|
|
// #endif
|
|
|
|
},
|
|
onUnload(){
|
|
uni.$off(['addCollect','toLinkInfo','toSubscribe','cancelCollect'])
|
|
},
|
|
components: {
|
|
Cart,
|
|
cemeteryCart
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 顶部图片
|
|
.imgs {
|
|
position: relative;
|
|
|
|
.adjunct {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
right: 24rpx;
|
|
width: 160rpx;
|
|
height: 50rpx;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 8rpx;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
}
|
|
}
|
|
|
|
// 容器
|
|
.container {
|
|
padding: 0 36rpx;
|
|
|
|
// 介绍
|
|
.introduce {
|
|
padding: 36rpx 0;
|
|
border-bottom: 2rpx solid #F7F9FCFF;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.content {
|
|
color: #606060;
|
|
}
|
|
|
|
.location {
|
|
margin-top: 38rpx;
|
|
color: #909399;
|
|
display: flex;
|
|
width: 100%;
|
|
|
|
.icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-image: url(../../../static/pos.png);
|
|
background-size: 100% 100%;
|
|
transform: translateY(8rpx);
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
overflow: hidden;
|
|
/*文本超出隐藏*/
|
|
text-overflow: ellipsis;
|
|
/*文本超出显示省略号*/
|
|
white-space: nowrap;
|
|
/*超出的空白区域不换行*/
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 基本信息
|
|
.message,
|
|
.leaseInfo,
|
|
.cemeteryInfo,
|
|
.property,
|
|
.annunciate,
|
|
.ambitus,
|
|
.recommend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 48rpx 0;
|
|
border-bottom: 2rpx solid #F7F9FCFF;
|
|
|
|
.title {
|
|
width: 100%;
|
|
margin-bottom: 24rpx;
|
|
font-size: 32rpx;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.item {
|
|
min-width: 50%;
|
|
margin-bottom: 8rpx;
|
|
|
|
.text {
|
|
color: #999ca2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 覆盖
|
|
|
|
|
|
|
|
.leaseInfo {
|
|
.item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.cemeteryInfo {
|
|
.text {
|
|
color: #606060;
|
|
line-height: 42rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.annunciate {
|
|
.left {
|
|
float: left;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 75%;
|
|
font-size: 28rpx;
|
|
flex: 1;
|
|
|
|
.name {
|
|
color: #5173B9;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
.message {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #909399;
|
|
line-height: 20rpx;
|
|
}
|
|
}
|
|
|
|
.property,
|
|
.ambitus {
|
|
.title {
|
|
display: flex;
|
|
|
|
.text {
|
|
flex: 1;
|
|
}
|
|
|
|
.right {
|
|
color: #909399;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ambitus {
|
|
.hint {
|
|
margin-top: 24rpx;
|
|
color: #909399;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.recommend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 48rpx 0;
|
|
border-bottom: 2rpx solid #F7F9FCFF;
|
|
|
|
.title {
|
|
padding: 0 36rpx;
|
|
width: 100%;
|
|
margin-bottom: 24rpx;
|
|
font-size: 32rpx;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/deep/ .uni-scroll-view-content {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
padding: 72rpx 36rpx;
|
|
border-bottom: 2rpx solid #F7F9FCFF;
|
|
margin-bottom: 130rpx;
|
|
|
|
.text {
|
|
color: #909399;
|
|
}
|
|
|
|
.link {
|
|
color: #5173b9;
|
|
margin-left: 5rpx;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 128rpx;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 36rpx;
|
|
z-index: 999;
|
|
|
|
.heart {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn {
|
|
width: 208rpx;
|
|
height: 80rpx;
|
|
background-color: #e67d29;
|
|
border-radius: 12rpx;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.link {
|
|
margin-right: 24rpx;
|
|
background-color: #5173b9;
|
|
}
|
|
}
|
|
</style>
|
|
|