优化,完善代码

This commit is contained in:
2026-05-14 14:42:51 +08:00
parent 79a21ff0a5
commit 16c91facac
26 changed files with 1792 additions and 1322 deletions

View File

@@ -1,11 +1,9 @@
<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"
<scroll-view scroll-y 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">
@@ -19,40 +17,37 @@
<text class="message-time">留言时间{{ item.summitDate }}</text>
</view>
</view>
<u-loadmore :status="loadStatus" />
</scroll-view>
<!-- 底部新增留言按钮 -->
<view class="add-btn-container">
<button class="add-btn" @click="goToSubmit()">新增留言</button>
</view>
<!-- 新增留言弹窗 -->
<u-popup v-model="showAddPopup" mode="center" length="60%">
<!-- 修复后的弹窗 -->
<u-popup v-model="showAddPopup" mode="center">
<view class="popup-content">
<view class="asset-select" @click="showAssetsPopup = true">
<text v-if="!selectedAsset" class="placeholder">
请选择资产
</text>
<text v-else class="asset-text">
{{ selectedAsset.assetsName }}
</text>
<view class="asset-select" @click="openAssetPopup">
<text class="select-text">{{selectedAsset.assetsName || '请选择资产'}}</text>
<u-icon name="arrow-right" size="26" color="#999"></u-icon>
</view>
<textarea v-model="newMessageContent" placeholder="请输入留言内容" class="textarea" />
<button class="popup-btn" @click="addFallback()">提交留言</button>
</view>
</u-popup>
<checkbox-group @change="onAssetChange">
<label
v-for="asset in filteredAssets"
:key="asset.assetsNo"
class="asset-item"
>
<checkbox
:value="asset.assetsNo"
:checked="selectedAssetKey === asset.assetsNo"
/>
{{ asset.assetsName }}
</label>
</checkbox-group>
<u-popup v-model="showAssetPopup" mode="bottom">
<view class="asset-popup-wrap">
<view class="popup-title">选择资产</view>
<scroll-view scroll-y class="asset-list">
<view class="asset-item" v-for="item in assetsList" :key="item.assetsNo" @click="selectAsset(item)">
{{ item.assetsName }}
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
@@ -63,27 +58,24 @@
showAddPopup: false,
newMessageContent: '',
flowList: [],
// 导航栏样式控制
pageNo: 1,
pageSize: 10,
navbarStyle: {
isTransparent: true,
bgColor: '#ffffff',
textColor: '#000000',
opacity: 0
},
loadStatus: 'loadmore',
loadStatus: 'more',
isRefreshing: false,
// 滚动距离
scrollTop: 0,
showAssetsPopup: false,
assetSearch: '',
showAssetPopup: false,
assetsList: [],
selectedAssetKey: '', // 单个 assetsNo
selectedAsset: null // 单个资产对象
selectedAsset: null
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
// 计算导航栏透明度和样式
this.updateNavbarStyle(e.scrollTop);
},
onShow() {
@@ -93,150 +85,127 @@
this.fetchFallback();
},
methods: {
// 点击留言项跳转到详情页
navigateToDetail(item) {
uni.navigateTo({
url: `/pages-assets/fallback/fallbackDetail?id=${item.id}`,
url: "/pages-assets/fallback/fallbackDetail?id=" + item.id
});
},
onAssetChange(e) {
const val = e.detail.value;
// 只取最后一个
this.selectedAssetKey = val.length ? val[val.length - 1] : '';
},
confirmAssets() {
this.selectedAsset =
this.assetsList.find(a => a.assetsNo === this.selectedAssetKey) || null;
this.showAssetsPopup = false;
},
openAssetPopup() {
this.showAssetPopup = true;
this.getAssetsList();
},
getAssetsList() {
this.$u.post('/assets/queryPage', {
pageNo: 1,
pageSize: 100
}, {
WT: this.$getToken()
}).then(res => {
this.assetsList = res.data.result || [];
}).catch(err => {
console.log("获取资产失败", err);
})
},
selectAsset(item) {
this.selectedAsset = item;
this.showAssetPopup = false;
},
fetchFallback() {
if (this.loadStatus !== 'loadmore') return;
if (this.loadStatus !== 'more') return;
this.loadStatus = 'loading';
let token = this.$getToken()
let url = '/fallback/queryPage'
this.$u.post(url, {
this.$u.post('/fallback/queryPage', {
pageNo: this.pageNo,
pageSize: this.pageSize
}, {
WT: token
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';
this.loadStatus = 'more';
}
}).catch(err => {
console.log("获取留言信息失败", err)
this.loadStatus = 'loadmore';
console.log("获取留言失败", err)
this.loadStatus = 'more';
})
},
loadMore() {
// 只有在 loadStatus 为 'loadmore' 时才触发
if (this.loadStatus !== 'loadmore') return;
this.fetchReserve()
if (this.loadStatus !== 'more') return;
this.fetchFallback()
},
goToSubmit() {
this.showAddPopup = true;
this.selectedAsset = null;
this.newMessageContent = '';
},
addFallback() {
const content = this.newMessageContent.trim();
let userInfo = uni.getStorageSync('userInfo');
if(!userInfo.cusNo) {
uni.showToast({
title: '您还未实名',
icon: 'none'
});
this.showAddPopup = false;
uni.showToast({ title: '您还未实名', icon: 'none' });
return;
}
if (!this.selectedAsset) {
uni.showToast({ title: '请选择资产', icon: 'none' });
return;
}
if (!content) {
uni.showToast({
title: '请输入留言内容',
icon: 'none'
});
uni.showToast({ title: '请输入留言内容', icon: 'none' });
return;
}
const token = this.$getToken();
this.$u.post('/fallback/submit', {
content
}, {
WT: token
})
.then(res => {
if(res.flag){
uni.showToast({
title: '留言成功',
icon: 'success'
});
}else{
uni.showToast({
title: res.message,
icon: 'none'
});
}
this.showAddPopup = false;
this.newMessageContent = '';
this.refresh();
})
.catch(err => {
console.error('新增留言失败:', err);
uni.showToast({
title: '留言失败',
icon: 'none'
});
this.showAddPopup = false;
});
content: content,
assetsNo: this.selectedAsset.assetsNo
}, {
WT: this.$getToken()
}).then(res => {
uni.showToast({ title: '留言成功', icon: 'success' });
this.showAddPopup = false;
this.refresh();
}).catch(err => {
uni.showToast({ title: '提交失败', icon: 'none' });
this.showAddPopup = false;
});
},
refresh() {
this.isRefreshing = true;
setTimeout(() => {
this.pageNo = 1;
this.flowList = [];
this.loadStatus = 'more';
this.fetchFallback();
setTimeout(()=>{
this.isRefreshing = false;
}, 1000);
},800)
},
// 根据滚动距离更新导航栏样式
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;
}
this.navbarStyle.isTransparent = opacity <= 0.5;
}
}
}
</script>
<style scoped>
.page-view {
/* 给导航栏留空间 */
padding-top: 175rpx;
min-height: 100vh;
position: relative;
background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
box-sizing: border-box;
}
.scroll-view {
height: calc(100vh - 120rpx - 120rpx);
height: calc(100vh - 175rpx - 140rpx);
padding: 5% 0;
box-sizing: border-box;
}
.message-item {
background-color: #ffffff;
border-radius: 10rpx;
@@ -245,14 +214,13 @@
width: 92%;
margin: auto;
margin-bottom: 20rpx;
position: relative;
}
.message-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.status-tag {
font-size: 24rpx;
padding: 6rpx 16rpx;
@@ -262,65 +230,92 @@
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;
}
/* 资产选择入口 */
.asset-select {
margin-top: 20rpx;
padding: 20rpx 24rpx;
background: #ffffff;
border-radius: 8rpx;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: space-between;
border: 1rpx solid #eee;
}
/* 未选择时的占位文字 */
.asset-select .placeholder {
color: #999;
}
/* 核心修复:弹窗宽度与排版 */
.popup-content {
background: #fff;
padding: 30rpx;
border-radius: 8rpx;
width: 70%; /* 扩大弹窗宽度,避免文字竖排 */
min-width: 400rpx;
}
.asset-select {
padding: 20rpx;
background: #f7f7f7;
border-radius: 8rpx;
font-size: 28rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap; /* 强制文字不换行 */
}
.select-text {
color: #999;
}
.textarea {
width: 100%;
min-height: 200rpx;
padding: 20rpx;
background: #f7f7f7;
border-radius: 8rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.popup-btn {
margin-top: 20rpx;
width: 100%;
height: 80rpx;
background: #FF6F63;
color: #fff;
border-radius: 8rpx;
font-size: 30rpx;
border: none;
white-space: nowrap; /* 按钮文字不换行 */
}
.asset-popup-wrap {
padding: 30rpx;
background: #fff;
}
.popup-title {
font-size: 32rpx;
font-weight: 500;
text-align: center;
margin-bottom: 20rpx;
}
.asset-list {
max-height: 400rpx;
}
.asset-item {
padding: 24rpx;
font-size: 28rpx;
border-bottom: 1rpx solid #f0f0f0;
}
/* 已选择资产文字 */
.asset-select .asset-text {
color: #333;
font-weight: 500;
}
.add-btn-container {
position: fixed;
bottom: 0;
@@ -328,9 +323,7 @@
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;
@@ -339,33 +332,5 @@
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>