mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
458 lines
9.8 KiB
Vue
458 lines
9.8 KiB
Vue
<template>
|
||
<view class="asset-detail">
|
||
<!-- 顶部导航栏 -->
|
||
<customNavbar
|
||
title="资产详情"
|
||
ref="navbar"
|
||
:is-transparent="navbarStyle.isTransparent"
|
||
:bg-color="navbarStyle.bgColor"
|
||
:text-color="navbarStyle.textColor"
|
||
:opacity="navbarStyle.opacity"
|
||
:extra-icons="navbarStyle.extraIcons"
|
||
:show-home="false"
|
||
/>
|
||
|
||
<!-- 图片展示区 -->
|
||
<view class="image-section" :style="{ paddingTop: navTotalHeight + 'px' }">
|
||
<image src="/static/30091712.jpg"></image>
|
||
<!-- <AssetGallery
|
||
:insideImages="asset.images"
|
||
:vrImage="asset.vrImage"
|
||
:vrSrc="asset.vr"
|
||
:videos="asset.videos"
|
||
:plans="asset.plans"
|
||
:adImage="asset.adImage"
|
||
@vr-click="viewVR"
|
||
@video-play="playVideo"
|
||
@ad-click="onAdClick"
|
||
/> -->
|
||
</view>
|
||
|
||
<!-- 资产基本信息 -->
|
||
<view class="container">
|
||
<view class="basic-info">
|
||
<view class="info-header">
|
||
<view class="category-tag">{{ asset.category }}</view>
|
||
<view class="asset-name">{{ asset.name }}</view>
|
||
</view>
|
||
<view class="rent-price">¥1500/月</view>
|
||
<view class="community-info">
|
||
<text class="label">所属小区：</text>
|
||
<text>{{ asset.community }}</text>
|
||
</view>
|
||
<view class="address-info">
|
||
<text class="label">地址：</text>
|
||
<text>{{ asset.address }}</text>
|
||
</view>
|
||
<button class="vr-btn" @click="viewVR">查看VR图</button>
|
||
</view>
|
||
|
||
<!-- 地图位置 -->
|
||
<view class="map-container">
|
||
<map :latitude="asset.lat" :longitude="asset.lng" :markers="markers"
|
||
style="width: 92%; height: 300rpx;"></map>
|
||
</view>
|
||
|
||
<!-- 资产信息表格 -->
|
||
<view class="asset-info-table">
|
||
<view class="table-title">资产信息</view>
|
||
<view class="table-content">
|
||
<view class="table-row">
|
||
<view class="row-item">
|
||
<view class="item-label">编号</view>
|
||
<view class="item-value">{{ asset.code }}</view>
|
||
</view>
|
||
<view class="row-item">
|
||
<view class="item-label">面积</view>
|
||
<view class="item-value">105㎡</view>
|
||
</view>
|
||
</view>
|
||
<view class="table-row">
|
||
<view class="row-item">
|
||
<view class="item-label">类别</view>
|
||
<view class="item-value">{{ asset.category }}</view>
|
||
</view>
|
||
<view class="row-item">
|
||
<view class="item-label">价值</view>
|
||
<view class="item-value">¥{{ formatMoney(asset.value) }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="table-row">
|
||
<view class="row-item full-width">
|
||
<view class="item-label">权属</view>
|
||
<view class="item-value">{{ asset.owner }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预约弹窗 -->
|
||
<u-popup v-model="showReserve" mode="bottom" border-radius="20">
|
||
<view class="popup-content">
|
||
<text class="popup-title">预约看房</text>
|
||
<u-input v-model="reserveName" placeholder="请输入姓名" />
|
||
<u-input v-model="reservePhone" placeholder="请输入电话" />
|
||
<u-button type="primary" @click="submitReserve">提交预约</u-button>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 底部导航栏 -->
|
||
<assetBottomBar v-if="asset.status === 0" :phone="asset.contact" @reserve="showReserve = true" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mycard from '../../components/card/mycard.vue';
|
||
import assetBottomBar from '../../components/bottom/assetBottomBar.vue';
|
||
import AssetGallery from '../../components/gallery/AssetGallery.vue'
|
||
export default {
|
||
components: {
|
||
mycard,
|
||
assetBottomBar,
|
||
AssetGallery
|
||
},
|
||
data() {
|
||
// 静态资产数据
|
||
const staticAsset = {
|
||
name: '',
|
||
community: '',
|
||
code: '',
|
||
category: '',
|
||
area: 0,
|
||
value: 0,
|
||
rent: 0,
|
||
owner: '',
|
||
address: '',
|
||
lat: 0,
|
||
lng: 0,
|
||
images: [],
|
||
vrImage: '',
|
||
vr: '',
|
||
videos: [],
|
||
plans: [],
|
||
adImage: '',
|
||
remark: '',
|
||
isFavorite: false,
|
||
status: 0,
|
||
contact: ''
|
||
};
|
||
|
||
return {
|
||
// 控制预约弹窗显示
|
||
showReserve: false,
|
||
navTotalHeight: 0,
|
||
// 预约表单数据
|
||
reserveName: '',
|
||
reservePhone: '',
|
||
assetId: null,
|
||
// 直接使用静态数据
|
||
asset: staticAsset,
|
||
// 根据静态数据初始化标记
|
||
markers: [{
|
||
id: 1,
|
||
latitude: staticAsset.lat,
|
||
longitude: staticAsset.lng,
|
||
title: staticAsset.name,
|
||
}, ],
|
||
background: {
|
||
backgroundColor: '#ffffff',
|
||
// 渐变色
|
||
// backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
|
||
},
|
||
|
||
// 导航栏样式控制
|
||
navbarStyle: {
|
||
isTransparent: true,
|
||
bgColor: '#ffffff',
|
||
textColor: '#000000',
|
||
opacity: 0,
|
||
extraIcons: ['ellipsis', 'eye'] // 右侧额外图标
|
||
},
|
||
|
||
// 滚动距离
|
||
scrollTop: 0
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.assetId = options.id || 'A001';
|
||
// 静态数据初始化
|
||
this.loadAssetDetail();
|
||
// this.recordView();
|
||
},
|
||
mounted() {
|
||
const navbar = this.$refs.navbar;
|
||
const navHeight = navbar.navContentHeight; // 直接拿子组件 data
|
||
this.navTotalHeight = navHeight; // 加上额外间距
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
// 计算导航栏透明度和样式
|
||
this.updateNavbarStyle(e.scrollTop);
|
||
},
|
||
methods: {
|
||
// 根据滚动距离更新导航栏样式
|
||
updateNavbarStyle(scrollTop) {
|
||
// 定义滚动阈值，超过此值导航栏变为不透明
|
||
const threshold = 200;
|
||
|
||
// 计算透明度
|
||
let opacity = scrollTop / threshold;
|
||
opacity = Math.min(opacity, 1);
|
||
opacity = Math.max(opacity, 0);
|
||
|
||
// 更新导航栏样式
|
||
this.navbarStyle.opacity = opacity;
|
||
|
||
if (opacity > 0.5) {
|
||
this.navbarStyle.isTransparent = false;
|
||
} else {
|
||
this.navbarStyle.isTransparent = true;
|
||
}
|
||
},
|
||
|
||
// 模拟接口请求
|
||
loadAssetDetail() {
|
||
setTimeout(() => {
|
||
console.log("fork数据")
|
||
this.asset = {
|
||
name: '广州市中心写字楼A栋',
|
||
community: '天河国际商务区',
|
||
code: 'GDZC2025001',
|
||
category: '商业用房',
|
||
area: 1250.5,
|
||
value: 28000000,
|
||
rent: 88000,
|
||
owner: '广州市国资委',
|
||
address: '广州市天河区体育西路88号',
|
||
lat: 23.135,
|
||
lng: 113.327,
|
||
images: [
|
||
{
|
||
image:'/static/img/index/swiper/swiper3.jpg'
|
||
}
|
||
|
||
],
|
||
remark: '该资产目前用于办公出租，维护状态良好。',
|
||
isFavorite: false,
|
||
status: 0
|
||
};
|
||
this.markers = [
|
||
{
|
||
id: 1,
|
||
latitude: this.asset.lat,
|
||
longitude: this.asset.lng,
|
||
title: this.asset.name,
|
||
},
|
||
];
|
||
}, 300);
|
||
},
|
||
formatMoney(num) {
|
||
return Number(num).toLocaleString();
|
||
},
|
||
toggleFavorite() {
|
||
this.asset.isFavorite = !this.asset.isFavorite;
|
||
uni.showToast({
|
||
title: this.asset.isFavorite ? '已收藏' : '取消收藏',
|
||
icon: 'success',
|
||
});
|
||
},
|
||
contactManager() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '400-123-4567',
|
||
});
|
||
},
|
||
viewVR() {
|
||
uni.showToast({
|
||
title: '打开卫星图...',
|
||
icon: 'none',
|
||
});
|
||
// 可扩展：跳转到 VR 页面或调用地图 API
|
||
},
|
||
submitReserve() {
|
||
console.log('提交预约看房申请')
|
||
this.showReserve = false;
|
||
},
|
||
recordView(assetId) {
|
||
let lifeData = uni.getStorageSync('lifeData');
|
||
let token = lifeData.vuex_token
|
||
let url = "/assets/viewRecord";
|
||
this.$u.get(url, {}, {
|
||
'WT': token
|
||
}).then(obj => {
|
||
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.asset-detail {
|
||
background-color: #f7f8fa;
|
||
min-height: 100vh;
|
||
padding-bottom: 120rpx;
|
||
padding-top: 0;
|
||
/* 不再需要固定的顶部内边距，由动态计算的 navTotalHeight 控制 */
|
||
}
|
||
|
||
/* 图片展示区 */
|
||
.image-section {
|
||
width: 100%;
|
||
background-color: #000;
|
||
}
|
||
|
||
.image-section image {
|
||
width: 100%;
|
||
height: 740rpx;
|
||
}
|
||
|
||
/* 基本信息区 */
|
||
.container {
|
||
width: 100%;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
background-color: #ffffff;
|
||
margin-top: -50rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.basic-info {
|
||
padding: 20rpx 30rpx;
|
||
padding-top: 50rpx;
|
||
}
|
||
|
||
.info-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.category-tag {
|
||
background-color: #FCF2F3;
|
||
color: #E9353C;
|
||
font-size: 24rpx;
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 4rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.asset-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.rent-price {
|
||
font-size: 36rpx;
|
||
color: #FF2F31;
|
||
margin: 15rpx 0;
|
||
}
|
||
|
||
.community-info,
|
||
.address-info {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.label {
|
||
color: #999;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.vr-btn {
|
||
background-color: #F34038;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 0 14rpx;
|
||
border-radius: 6rpx;
|
||
font-size: 24rpx;
|
||
margin-top: -90rpx;
|
||
float: right;
|
||
}
|
||
|
||
/* 地图容器 */
|
||
.map-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 资产信息表格 */
|
||
.asset-info-table {
|
||
padding: 20rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
.table-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.table-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.row-item {
|
||
flex: 1;
|
||
min-width: 45%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5rpx;
|
||
}
|
||
|
||
.row-item.full-width {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.item-label {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.item-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 预约弹窗 */
|
||
.popup-content {
|
||
padding: 40rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
|
||
.popup-title {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.u-input {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.u-button {
|
||
margin-top: 20rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
</style> |