363 lines
8.7 KiB
Vue
363 lines
8.7 KiB
Vue
<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 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>
|
||
<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">
|
||
<view class="popup-content">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showAddPopup: false,
|
||
newMessageContent: '',
|
||
flowList: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
navbarStyle: {
|
||
isTransparent: true,
|
||
bgColor: '#ffffff',
|
||
textColor: '#000000',
|
||
opacity: 0
|
||
},
|
||
loadStatus: 'more',
|
||
isRefreshing: false,
|
||
scrollTop: 0,
|
||
showAssetPopup: false,
|
||
assetsList: [],
|
||
selectedAsset: null
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
this.updateNavbarStyle(e.scrollTop);
|
||
},
|
||
onLoad() {
|
||
// fetchFallback 移到 onShow 中，等 token 校验通过后再加载
|
||
},
|
||
async onShow() {
|
||
try {
|
||
await this.$checkToken(this.$getToken())
|
||
this.checkOaAuth()
|
||
this.fetchFallback()
|
||
} catch (e) {
|
||
return
|
||
}
|
||
},
|
||
methods: {
|
||
checkOaAuth() {
|
||
const token = this.$getToken()
|
||
if (!token) return
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
if (!userInfo || !userInfo.oaAuth) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未实名认证，请先完成实名认证',
|
||
showCancel: false,
|
||
confirmText: '去认证',
|
||
success: () => {
|
||
uni.redirectTo({ url: '/pages-biz/profile/profile' })
|
||
}
|
||
})
|
||
}
|
||
},
|
||
navigateToDetail(item) {
|
||
uni.navigateTo({
|
||
url: "/pages-assets/fallback/fallbackDetail?id=" + item.id
|
||
});
|
||
},
|
||
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 !== 'more') return;
|
||
this.loadStatus = 'loading';
|
||
this.$u.post('/fallback/queryPage', {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}, {
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
const rows = res.data.result || [];
|
||
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 = 'more';
|
||
}
|
||
}).catch(err => {
|
||
console.log("获取留言失败", err)
|
||
this.loadStatus = 'more';
|
||
})
|
||
},
|
||
loadMore() {
|
||
if (this.loadStatus !== 'more') return;
|
||
this.fetchFallback()
|
||
},
|
||
goToSubmit() {
|
||
this.showAddPopup = true;
|
||
this.selectedAsset = null;
|
||
this.newMessageContent = '';
|
||
},
|
||
addFallback() {
|
||
const content = this.newMessageContent.trim();
|
||
const token = this.$getToken()
|
||
if (!token) {
|
||
uni.showToast({ title: '请先登录', icon: 'none' });
|
||
return
|
||
}
|
||
let userInfo = uni.getStorageSync('userInfo');
|
||
if(!userInfo || !userInfo.cusNo) {
|
||
uni.showToast({ title: '您还未实名', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!this.selectedAsset) {
|
||
uni.showToast({ title: '请选择资产', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!content) {
|
||
uni.showToast({ title: '请输入留言内容', icon: 'none' });
|
||
return;
|
||
}
|
||
this.$u.post('/fallback/submit', {
|
||
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;
|
||
this.pageNo = 1;
|
||
this.flowList = [];
|
||
this.loadStatus = 'more';
|
||
this.fetchFallback();
|
||
setTimeout(()=>{
|
||
this.isRefreshing = false;
|
||
},800)
|
||
},
|
||
updateNavbarStyle(scrollTop) {
|
||
const threshold = 200;
|
||
let opacity = scrollTop / threshold;
|
||
opacity = Math.min(opacity, 1);
|
||
opacity = Math.max(opacity, 0);
|
||
this.navbarStyle.opacity = opacity;
|
||
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 - 175rpx - 140rpx);
|
||
padding: 5% 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.message-item {
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
padding: 32rpx;
|
||
padding-left: 95rpx;
|
||
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;
|
||
border-radius: 21rpx;
|
||
margin-right: 20rpx;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
left: 10rpx;
|
||
}
|
||
.status-tag.processed {
|
||
background: linear-gradient(90deg, #F34038 0%, #FF7C76 100%);
|
||
}
|
||
.status-tag.processing {
|
||
background: linear-gradient(90deg, #FEAF04 0%, #FFC145 100%);
|
||
}
|
||
.status-tag.pending {
|
||
background: linear-gradient(90deg, #6688FC 0%, #809BFB 100%);
|
||
}
|
||
.message-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #2D2B2C;
|
||
}
|
||
.content-text {
|
||
font-size: 24rpx;
|
||
color: #86868C;
|
||
line-height: 44rpx;
|
||
}
|
||
.message-time {
|
||
font-size: 24rpx;
|
||
color: #ADADB1;
|
||
}
|
||
|
||
/* 核心修复：弹窗宽度与排版 */
|
||
.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;
|
||
}
|
||
|
||
.add-btn-container {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 30rpx 40rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.add-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||
border-radius: 10rpx;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
}
|
||
</style> |