mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-08 01:42:28 +08:00
完成大体功能和样式
This commit is contained in:
514
pages-assets/assets/assetsDetail.vue
Normal file
514
pages-assets/assets/assetsDetail.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<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' }">
|
||||
<Carousel :list="swiperList" boxHeight="740rpx"
|
||||
:vrIcon="staticHost + '/public/static/icon/vr.png'"
|
||||
vrViewPage="/pages-biz/vr/vr"
|
||||
:vr-list="vrList"/>
|
||||
</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">{{asset.rent || '未知'}}/月</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>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 地图位置 -->
|
||||
<view class="map-container">
|
||||
<map :latitude="asset.lat||'0'" :longitude="asset.lng|| '0'" :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">{{asset.area || '未知'}}㎡</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 && asset.value) || 0) }}</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 === '闲置中'"
|
||||
:assetId="assetId"
|
||||
:phone="managerPhone"
|
||||
@reserve="showReserve = true"
|
||||
btn-title="预约看资产"
|
||||
shareBtnTitle="分享资产"
|
||||
page-path="/pages-assets/assets/detail/assetsDetail"
|
||||
minicode-api="/pages-assets/assets/detail/assetsDetail"
|
||||
btnColor="#FF2F31"
|
||||
:query="assetId"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import assetBottomBar from '../../components/bottom/assetBottomBar.vue';
|
||||
import CarouselVue from '../../components/Carousel/Carousel.vue';
|
||||
export default {
|
||||
components: {
|
||||
assetBottomBar,
|
||||
CarouselVue
|
||||
},
|
||||
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: null,
|
||||
managerPhone:null,
|
||||
// 根据静态数据初始化标记
|
||||
vrList:[],
|
||||
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.assetsNo;
|
||||
// 静态数据初始化
|
||||
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);
|
||||
},
|
||||
computed: {
|
||||
staticHost() {
|
||||
return this.$config.staticUrl
|
||||
},
|
||||
swiperList(){
|
||||
let list = [];
|
||||
if(this.asset && this.asset.vrImgs && this.asset.vrImgs.length > 0) {
|
||||
this.asset.vrImgs.forEach(img=> {
|
||||
list.push({
|
||||
src: this.$config.staticUrl + img,
|
||||
mediaType:'vr',
|
||||
bizType:'vr'
|
||||
})
|
||||
})
|
||||
}
|
||||
// if(this.asset && this.asset.detailImgs && this.asset.detailImgs.length > 0) {
|
||||
// this.asset.detailImgs.forEach(img=> {
|
||||
// list.push({
|
||||
// src: this.$config.staticUrl + img,
|
||||
// mediaType:'vr',
|
||||
// bizType:'vr'
|
||||
// })
|
||||
// this.vrList.push(this.$config.staticUrl + img)
|
||||
// })
|
||||
// }
|
||||
|
||||
if(this.asset && this.asset.detailImgs && this.asset.detailImgs.length > 0) {
|
||||
this.asset.detailImgs.forEach(img=> {
|
||||
list.push({
|
||||
src: this.$config.staticUrl + img,
|
||||
mediaType:'image',
|
||||
bizType:'详细图片'
|
||||
})
|
||||
})
|
||||
}
|
||||
return list;
|
||||
}
|
||||
},
|
||||
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() {
|
||||
let url = `/assets/detail?id=${this.assetId}`
|
||||
this.$u.get(url).then(result => {
|
||||
const data = result.data
|
||||
console.log(data)
|
||||
this.asset = {
|
||||
name: data.assetsName,
|
||||
community: data.community,
|
||||
code: data.assetsNo,
|
||||
category: data.assetsType,
|
||||
area: data.footPrint,
|
||||
value: data.assetsValue,
|
||||
rent: data.rentFee,
|
||||
owner: data.owner,
|
||||
address: data.assetsAddress,
|
||||
lat: data.latitude,
|
||||
lng: data.longitude,
|
||||
roomNo: data.roomNo,
|
||||
floorNo: data.floorNo,
|
||||
description: data.assetsDesc,
|
||||
detailImgs: data.detailImgs,
|
||||
vrImgs: data.vrImgs,
|
||||
remark: data.assetsDesc,
|
||||
status: data.assetsStatus
|
||||
};
|
||||
this.managerPhone = data.managerPhone
|
||||
this.markers = [
|
||||
{
|
||||
id: 1,
|
||||
latitude: this.asset.lat,
|
||||
longitude: this.asset.lng,
|
||||
title: this.asset.name,
|
||||
},
|
||||
];
|
||||
}).catch(err => {
|
||||
console.log("获取资产信息失败：", err)
|
||||
})
|
||||
},
|
||||
formatMoney(num) {
|
||||
return Number(num).toLocaleString();
|
||||
},
|
||||
toggleFavorite() {
|
||||
this.asset.isFavorite = !this.asset.isFavorite;
|
||||
uni.showToast({
|
||||
title: this.asset.isFavorite ? '已收藏' : '取消收藏',
|
||||
icon: 'success',
|
||||
});
|
||||
},
|
||||
validatePhoneNumber(phone) {
|
||||
const regex = /^1[3-9]\d{9}$/;
|
||||
return regex.test(phone);
|
||||
},
|
||||
submitReserve() {
|
||||
console.log('提交预约看房申请')
|
||||
// 身份证校验
|
||||
if (this.validatePhoneNumber(this.reservePhone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let url = '/reservate/submit'
|
||||
this.$u.post(url,{
|
||||
reserveName: this.reserveName,
|
||||
assetsNo: this.assetId,
|
||||
assetsName: this.asset.name,
|
||||
phone: this.reservePhone
|
||||
},{
|
||||
WT: this.$getToken()
|
||||
}).then(res=>{
|
||||
if(res.flag) {
|
||||
this.$mytip.toast('提交预约成功成功')
|
||||
}else{
|
||||
|
||||
this.$mytip.toast('预约提交失败，请重试')
|
||||
}
|
||||
})
|
||||
this.showReserve = false;
|
||||
},
|
||||
recordView(assetId) {
|
||||
let token = this.$getToken()
|
||||
if(token){
|
||||
let url = "/potential/add";
|
||||
this.$u.get(url, {
|
||||
assetId: this.assetId
|
||||
}, {
|
||||
'WT': this.$getToken()
|
||||
}).then(obj => {
|
||||
|
||||
}).catch(err => {
|
||||
console.log("记录客户浏览记录失败", err)
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
|
||||
/* 地图容器 */
|
||||
.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;
|
||||
|
||||
&::v-deep .u-btn {
|
||||
background: #ff3b30;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user