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:
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