完成大体功能和样式
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>
|
||||
268
pages-assets/discharge/leaseCancel.vue
Normal file
268
pages-assets/discharge/leaseCancel.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view class="lease-cancel-page">
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<customNavbar title="退租申请" />
|
||||
|
||||
<!-- 表单内容 -->
|
||||
<view class="form-section">
|
||||
<!-- 关联合同 -->
|
||||
<view class="form-item">
|
||||
<text class="label">关联合同</text>
|
||||
<picker :range="contracts" range-key="name" @change="onContractChange">
|
||||
<view class="picker-value">
|
||||
{{ selectedContract ? selectedContract.name : '请选择合同' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 关联资产 -->
|
||||
<view class="form-item">
|
||||
<text class="label">关联资产</text>
|
||||
<view class="picker-value" @click="openAssetsPopup">
|
||||
{{ selectedAssetsList.length
|
||||
? selectedAssetsList.map(a => a.name).join('，')
|
||||
: '请选择资产' }}
|
||||
<text v-if="selectedAssetsList.length">（{{ selectedAssetsList.length }}）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退租日期 -->
|
||||
<view class="form-item">
|
||||
<text class="label">退租日期</text>
|
||||
<picker mode="date" @change="onDateChange">
|
||||
<view class="picker-value">
|
||||
{{ cancelDate || '请选择退租日期' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 退租原因 -->
|
||||
<view class="form-item">
|
||||
<text class="label">退租原因</text>
|
||||
<textarea v-model="reason" placeholder="请输入退租原因" class="textarea" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<button class="submit-btn" @click="submitForm">提交申请</button>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗多选资产 -->
|
||||
<u-popup v-model="showAssetsPopup" mode="bottom">
|
||||
<view class="popup-header">
|
||||
<input v-model="assetSearch" placeholder="搜索资产" class="search-input" />
|
||||
</view>
|
||||
<scroll-view scroll-y style="height:500rpx;">
|
||||
<checkbox-group v-model="selectedAssetsKeys">
|
||||
<label v-for="asset in filteredAssets" :key="asset.assetsNo"
|
||||
style="display:block;padding:12rpx 20rpx;border-bottom:1rpx solid #f0f0f0;">
|
||||
<checkbox :value="asset.assetsNo" /> {{ asset.name }}
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</scroll-view>
|
||||
<button class="popup-btn" @click="confirmAssets">确定</button>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
contracts: [],
|
||||
selectedContract: null,
|
||||
assetsList: [],
|
||||
assetSearch: '',
|
||||
showAssetsPopup: false,
|
||||
selectedAssetsKeys: [], // 存储选中的资产编号
|
||||
selectedAssetsList: [], // 存储选中的资产对象
|
||||
cancelDate: '',
|
||||
reason: '',
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchContractList();
|
||||
},
|
||||
onShow() {
|
||||
this.$checkToken(this.$getToken());
|
||||
},
|
||||
computed: {
|
||||
filteredAssets() {
|
||||
if (!this.assetSearch) return this.assetsList;
|
||||
return this.assetsList.filter(a =>
|
||||
a.name.toLowerCase().includes(this.assetSearch.toLowerCase())
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onContractChange(e) {
|
||||
const index = e.detail.value;
|
||||
this.selectedContract = this.contracts[index];
|
||||
this.assetsList = this.contracts[index].assets || [];
|
||||
// 清空之前选择
|
||||
this.selectedAssetsKeys = [];
|
||||
this.selectedAssetsList = [];
|
||||
},
|
||||
openAssetsPopup() {
|
||||
if (!this.selectedContract) {
|
||||
uni.showToast({
|
||||
title: '请先选择合同',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.showAssetsPopup = true;
|
||||
},
|
||||
confirmAssets() {
|
||||
this.selectedAssetsList = this.assetsList.filter(a =>
|
||||
this.selectedAssetsKeys.includes(a.assetsNo)
|
||||
);
|
||||
this.showAssetsPopup = false;
|
||||
},
|
||||
onDateChange(e) {
|
||||
this.cancelDate = e.detail.value;
|
||||
},
|
||||
fetchContractList() {
|
||||
const url = '/contract/queryAll';
|
||||
this.$u.get(
|
||||
url, {
|
||||
}, {
|
||||
WT: this.$getToken()
|
||||
}
|
||||
)
|
||||
.then(res => {
|
||||
this.contracts = res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取合同信息失败：', err);
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
if (
|
||||
!this.selectedContract ||
|
||||
!this.cancelDate ||
|
||||
!this.reason ||
|
||||
!this.selectedAssetsList.length
|
||||
) {
|
||||
uni.showToast({
|
||||
title: '请填写完整信息',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
contractNo: this.selectedContract.contractNo,
|
||||
cancelDate: this.cancelDate,
|
||||
reason: this.reason,
|
||||
assetsNoList: this.selectedAssetsList.map(a => a.assetsNo),
|
||||
};
|
||||
|
||||
this.$u.post('/discharge/apply', data, {
|
||||
WT: this.$getToken()
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.flag) {
|
||||
this.$mytip.toast('提交退租申请成功')
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$mytip.toast('提交退租申请失败')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$mytip.toast('提交退租申请失败')
|
||||
console.error('提交退租申请失败：', err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lease-cancel-page {
|
||||
background-color: #f6f8fa;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
padding-top: 160rpx;
|
||||
padding-bottom: 120rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
padding: 14rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
padding: 14rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||||
border-radius: 10rpx;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-header {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
margin: 20rpx;
|
||||
height: 60rpx;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
255
pages-assets/discharge/leaseCancelList.vue
Normal file
255
pages-assets/discharge/leaseCancelList.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="reserve-records">
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="退租申请" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
|
||||
:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" :show-home="true" />
|
||||
<!-- 内容部分 -->
|
||||
<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" @refresherrefresh="refresh"
|
||||
:refresher-enabled="true" :refresher-triggered="isRefreshing">
|
||||
<view v-if="flowList.length > 0" class="record-list">
|
||||
<view v-for="item in flowList" :key="item.id" class="record-card" @click="goDetail(item)">
|
||||
<!-- 合同名称和状态 -->
|
||||
<view class="card-header">
|
||||
<text class="contract-name">{{ item.contractName }}</text>
|
||||
<text :class="['record-status', item.status]">
|
||||
{{ statusText(item.status) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 内容部分 -->
|
||||
<view class="card-content">
|
||||
<!-- 预约时间 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">申请时间：</text>
|
||||
<text class="info-value"> {{item.applyTime}} </text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">退租资产：</text>
|
||||
<text class="info-value"> {{item.dischargeItem}} </text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
|
||||
<view v-else class="empty">
|
||||
<u-empty mode="list" text="暂无退租申请记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 底部新增留言按钮 -->
|
||||
<view class="add-btn-container">
|
||||
<button class="add-btn" @click="toApply()">新增退租申请</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
flowList: [],
|
||||
loadStatus: 'loadmore',
|
||||
isRefreshing: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
statusText(status) {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待确认';
|
||||
case 'done':
|
||||
return '已完成';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
// 格式化日期，例如：2025-11-10 周五 09:00
|
||||
const date = new Date(dateStr);
|
||||
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const weekday = weekdays[date.getDay()];
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
|
||||
},
|
||||
fetchApplys() {
|
||||
if (this.loadStatus !== 'loadmore') return;
|
||||
this.loadStatus = 'loading';
|
||||
let url = '/discharge/queryPage'
|
||||
this.$u.post(url, {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
}, {
|
||||
WT: this.$getToken()
|
||||
}).then(res => {
|
||||
const rows = res.data.result || [];
|
||||
console.log(rows)
|
||||
if (this.pageNo === 1) this.flowList = [];
|
||||
this.flowList = this.flowList.concat(rows);
|
||||
if (rows.length < this.pageSize) {
|
||||
this.loadStatus = 'nomore';
|
||||
} else {
|
||||
this.pageNo++;
|
||||
this.loadStatus = 'loadmore';
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log("获取退租申请信息失败：", err)
|
||||
this.loadStatus = 'loadmore';
|
||||
})
|
||||
},
|
||||
toApply() {
|
||||
this.$u.route({
|
||||
url: '/pages-assets/discharge/leaseCancel'
|
||||
})
|
||||
},
|
||||
viewLocation(item) {
|
||||
uni.openLocation({
|
||||
latitude: item.lat,
|
||||
longitude: item.lng,
|
||||
name: item.assetName,
|
||||
address: item.assetAddress
|
||||
});
|
||||
},
|
||||
callManager(phone) {
|
||||
if (!phone) return;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
loadMore() {
|
||||
this.fetchApplys();
|
||||
},
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
setTimeout(() => {
|
||||
this.isRefreshing = false;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$checkToken(this.$getToken())
|
||||
this.refresh()
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchApplys()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reserve-records {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-top: 175rpx;
|
||||
/* 给导航栏留空间 */
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
height: calc(100vh - 120rpx);
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.contract-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #2D2B2C;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.done {
|
||||
background: #FCE5E0;
|
||||
color: #ED7748;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: #F2F3F7;
|
||||
color: #86868C;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.add-btn-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx 40rpx;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||||
border-radius: 10rpx;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
296
pages-assets/fallback/fallback.vue
Normal file
296
pages-assets/fallback/fallback.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="page-view">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="留言板" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
|
||||
:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" :show-home="true" />
|
||||
|
||||
<!-- 留言列表 -->
|
||||
<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="loadMore" @refresherrefresh="refresh"
|
||||
:refresher-enabled="true" :refresher-triggered="isRefreshing">
|
||||
<view class="message-item" v-for="(item, index) in flowList" :key="index" @click="navigateToDetail(item)">
|
||||
<view class="message-header">
|
||||
<text :class="['status-tag', item.status]">{{ item.statusText }}</text>
|
||||
<text class="message-title">留言内容</text>
|
||||
</view>
|
||||
<view class="message-content">
|
||||
<text class="content-text">{{ item.content }}</text>
|
||||
</view>
|
||||
<view class="message-footer">
|
||||
<text class="message-time">留言时间：{{ item.summitDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部新增留言按钮 -->
|
||||
<view class="add-btn-container">
|
||||
<button class="add-btn" @click="goToSubmit()">新增留言</button>
|
||||
</view>
|
||||
<!-- 新增留言弹窗 -->
|
||||
<u-popup v-model="showAddPopup" mode="center" length="60%">
|
||||
<view class="popup-content">
|
||||
<textarea v-model="newMessageContent" placeholder="请输入留言内容" class="textarea" />
|
||||
<button class="popup-btn" @click="addFallback()">提交留言</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showAddPopup: false,
|
||||
newMessageContent: '',
|
||||
flowList: [],
|
||||
// 导航栏样式控制
|
||||
navbarStyle: {
|
||||
isTransparent: true,
|
||||
bgColor: '#ffffff',
|
||||
textColor: '#000000',
|
||||
opacity: 0
|
||||
},
|
||||
loadStatus: 'loadmore',
|
||||
isRefreshing: false,
|
||||
// 滚动距离
|
||||
scrollTop: 0
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
// 计算导航栏透明度和样式
|
||||
this.updateNavbarStyle(e.scrollTop);
|
||||
},
|
||||
onShow() {
|
||||
this.$checkToken(this.$getToken())
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchFallback();
|
||||
},
|
||||
methods: {
|
||||
// 点击留言项跳转到详情页
|
||||
navigateToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages-assets/fallback/fallbackDetail?id=${item.id}`,
|
||||
});
|
||||
},
|
||||
fetchFallback() {
|
||||
if (this.loadStatus !== 'loadmore') return;
|
||||
this.loadStatus = 'loading';
|
||||
let token = this.$getToken()
|
||||
let url = '/fallback/queryPage'
|
||||
this.$u.post(url, {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize
|
||||
}, {
|
||||
WT: token
|
||||
}).then(res => {
|
||||
const rows = res.data.result || [];
|
||||
console.log(rows)
|
||||
if (this.pageNo === 1) this.flowList = [];
|
||||
this.flowList = this.flowList.concat(rows)
|
||||
if (rows.length < this.pageSize) {
|
||||
this.loadStatus = 'nomore';
|
||||
} else {
|
||||
this.pageNo++;
|
||||
this.loadStatus = 'loadmore';
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log("获取留言信息失败：", err)
|
||||
this.loadStatus = 'loadmore';
|
||||
})
|
||||
},
|
||||
loadMore() {
|
||||
// 只有在 loadStatus 为 'loadmore' 时才触发
|
||||
if (this.loadStatus !== 'loadmore') return;
|
||||
this.fetchReserve()
|
||||
},
|
||||
goToSubmit() {
|
||||
this.showAddPopup = true;
|
||||
},
|
||||
addFallback() {
|
||||
const content = this.newMessageContent.trim();
|
||||
if (!content) {
|
||||
uni.showToast({
|
||||
title: '请输入留言内容',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
const token = this.$getToken();
|
||||
this.$u.post('/fallback/submit', {
|
||||
content
|
||||
}, {
|
||||
WT: token
|
||||
})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: '留言成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.showAddPopup = false;
|
||||
this.newMessageContent = '';
|
||||
this.refresh();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('新增留言失败：', err);
|
||||
uni.showToast({
|
||||
title: '留言失败',
|
||||
icon: 'none'
|
||||
});
|
||||
this.showAddPopup = false;
|
||||
});
|
||||
},
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
setTimeout(() => {
|
||||
this.isRefreshing = false;
|
||||
}, 1000);
|
||||
},
|
||||
// 根据滚动距离更新导航栏样式
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-view {
|
||||
/* 给导航栏留空间 */
|
||||
padding-top: 175rpx;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: calc(100vh - 120rpx - 120rpx);
|
||||
padding: 5% 0;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 32rpx;
|
||||
padding-left: 95rpx;
|
||||
width: 92%;
|
||||
margin: auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 21rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.status-tag.processed {
|
||||
background: linear-gradient(90deg, #F34038 0%, #FF7C76 100%);
|
||||
box-shadow: 0rpx 0rpx 7rpx 0rpx #FB392A;
|
||||
}
|
||||
|
||||
.status-tag.processing {
|
||||
background: linear-gradient(90deg, #FEAF04 0%, #FFC145 100%);
|
||||
box-shadow: 0rpx 0rpx 7rpx 0rpx #FFBF41;
|
||||
}
|
||||
|
||||
.status-tag.pending {
|
||||
background: linear-gradient(90deg, #6688FC 0%, #809BFB 100%);
|
||||
box-shadow: 0rpx 0rpx 7rpx 0rpx #7E99FB;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #2D2B2C;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 24rpx;
|
||||
color: #86868C;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 24rpx;
|
||||
color: #ADADB1;
|
||||
}
|
||||
|
||||
.add-btn-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx 40rpx;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||||
border-radius: 10rpx;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-content {
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.popup-content .textarea {
|
||||
width: 100%;
|
||||
min-height: 400rpx;
|
||||
padding: 14rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
background: #FF6F63;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
170
pages-assets/fallback/fallbackDetail.vue
Normal file
170
pages-assets/fallback/fallbackDetail.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="page-view">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="留言详情" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
|
||||
:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" :extra-icons="navbarStyle.extraIcons"
|
||||
:show-home="false" />
|
||||
|
||||
<!-- 留言详情内容 -->
|
||||
<view class="detail-container">
|
||||
<view class="detail-card">
|
||||
<!-- 反馈内容标题 -->
|
||||
<view class="content-title">{{messageDetail.title}}</view>
|
||||
|
||||
<!-- 反馈内容文本 -->
|
||||
<view class="content-text">
|
||||
{{messageDetail.content}}
|
||||
</view>
|
||||
|
||||
<!-- 底部信息：时间和状态 -->
|
||||
<view class="bottom-info">
|
||||
<text class="detail-time">2023年10-26 14:30</text>
|
||||
<view class="status-tag">
|
||||
<text class="status-dot"></text>
|
||||
<text class="status-text">待处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 导航栏样式控制
|
||||
id: null,
|
||||
navbarStyle: {
|
||||
isTransparent: true,
|
||||
bgColor: '#ffffff',
|
||||
textColor: '#000000',
|
||||
opacity: 0,
|
||||
extraIcons: ['ellipsis', 'eye'] // 右侧额外图标
|
||||
},
|
||||
// 滚动距离
|
||||
scrollTop: 0,
|
||||
// 留言详情数据
|
||||
messageDetail: null
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
// 计算导航栏透明度和样式
|
||||
this.updateNavbarStyle(e.scrollTop);
|
||||
},
|
||||
onShow(){
|
||||
this.$checkToken(this.$getToken())
|
||||
},
|
||||
onLoad(options) {
|
||||
// 从路由参数中获取留言ID
|
||||
this.id = options.id;
|
||||
// 调用接口获取留言详情
|
||||
this.getFallbackDetail();
|
||||
},
|
||||
methods: {
|
||||
getFallbackDetail() {
|
||||
let token = this.$getToken();
|
||||
let url = `/fallback/detail?id=${this.id}`
|
||||
this.$u.get(url,{}, {
|
||||
WT: token
|
||||
}).then(result => {
|
||||
this.messageDetail = result.data;
|
||||
}).catch(err => {
|
||||
console.log("获取留言详情信息失败：", err)
|
||||
})
|
||||
},
|
||||
// 根据滚动距离更新导航栏样式
|
||||
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;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-view {
|
||||
/* 给导航栏留空间 */
|
||||
padding-top: 175rpx;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #2D2B2C;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 30rpx;
|
||||
color: #585858;
|
||||
line-height: 44rpx;
|
||||
padding: 24rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.bottom-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
font-size: 30rpx;
|
||||
color: #86868C;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 31rpx;
|
||||
height: 31rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
border: 10rpx solid #6688FC;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 30rpx;
|
||||
color: #6688FC;
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user