修改bug\优化内容、加上公区收益和巡检记录页面
This commit is contained in:
zhouyanli
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view scroll-y class="scroll">
|
||||
<!-- 第一块信息卡片 -->
|
||||
<view class="card">
|
||||
<view class="row-title">
|
||||
<text>幸福苑小区1号楼1单元电梯间</text>
|
||||
<text class="status">已巡检</text>
|
||||
</view>
|
||||
<view class="text-item">巡检项目：设备巡检</view>
|
||||
<view class="text-item">巡检时间：07:00:00 –09:00:00</view>
|
||||
<view class="text-item">巡检小区：幸福苑小区</view>
|
||||
<view class="text-item">巡检路线：常规巡检路线1</view>
|
||||
<view class="text-item">巡检点：安全出口1号；巡检点2；巡检点3</view>
|
||||
</view>
|
||||
|
||||
<!-- 第二块巡检结果卡片 -->
|
||||
<view class="card">
|
||||
<view class="card-subtitle">巡检结果</view>
|
||||
<view class="text-item">巡检人：李祥龙</view>
|
||||
<view class="text-item">手机号码：13013001300</view>
|
||||
<view class="text-item">巡检时间：2026-10-25 08:10:10</view>
|
||||
<view class="text-item">巡检结果：</view>
|
||||
<view class="result-desc">
|
||||
<text>1.设备正常，无任何异动和意向</text>
|
||||
<text>2.电力系统正常、无故障提示</text>
|
||||
<text>3.设备使用正常，无异常提示</text>
|
||||
</view>
|
||||
<view class="text-item">巡检照片：</view>
|
||||
<!-- 图片区域 flex自动换行 -->
|
||||
<view class="img-wrap">
|
||||
<view
|
||||
class="img-box"
|
||||
v-for="(img, idx) in imgList"
|
||||
:key="idx"
|
||||
>
|
||||
<image
|
||||
class="img"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 图片列表，空图片占位，真实环境替换成接口图片地址
|
||||
const imgList = ref([
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
''
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
.page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.scroll {
|
||||
height: 100vh;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.row-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32rpx;
|
||||
color: #222;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
}
|
||||
.card-subtitle {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.text-item {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
}
|
||||
.result-desc {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.8;
|
||||
margin: 12rpx 0;
|
||||
}
|
||||
/* 图片容器 flex-wrap换行 */
|
||||
.img-wrap {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.img-box {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
background-color: #d8d9db;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="contentStyle">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="巡检记录" backgroundColor="transparent" :border="false" left-icon="left" @click-left="goBack" />
|
||||
<view class="content-wrap">
|
||||
<!-- 时间选择器 -->
|
||||
<view class="timebox">
|
||||
<view class="daybox flex ">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" @change="handleChangeTime" v-model="datetime">
|
||||
<view class="inner-date-box">
|
||||
<view class="day">{{ showDate }}</view>
|
||||
<view class="searchiconbox">
|
||||
<view class="arrow"> </view>
|
||||
<view class="arrow1"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 巡检列表 -->
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view class="list-container" @click="goToInspectionDetail">
|
||||
<view class="card-item" v-for="(item, index) in listData" :key="index">
|
||||
<view class="card-head">
|
||||
<text class="address">{{ item.address }}</text>
|
||||
<text class="status">{{ item.status }}</text>
|
||||
</view>
|
||||
<view class="tag-label">{{ item.type }}</view>
|
||||
<view class="text-row">巡检时间：{{ item.time }}</view>
|
||||
<view class="text-row">巡检人：{{ item.inspector }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
const datetime = ref('')
|
||||
const showDate = ref('选择日期')
|
||||
const listData = ref([
|
||||
{
|
||||
address: '幸福苑小区1号楼1单元电梯间',
|
||||
status: '已巡检',
|
||||
type: '设备巡检',
|
||||
time: '07:00:00 –09:00:00',
|
||||
inspector: '李祥龙'
|
||||
},
|
||||
{
|
||||
address: '幸福苑小区1号楼1单元电梯间',
|
||||
status: '已巡检',
|
||||
type: '设备巡检',
|
||||
time: '07:00:00 –09:00:00',
|
||||
inspector: '李祥龙'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
const handleChangeTime = (e) => {
|
||||
if (e) {
|
||||
// e 格式为 YYYY-MM-DD，只取 MM-DD
|
||||
showDate.value = e.slice(5)
|
||||
} else {
|
||||
showDate.value = '选择日期'
|
||||
}
|
||||
}
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex'
|
||||
})
|
||||
}
|
||||
// 跳转详情
|
||||
const goToInspectionDetail = () =>{
|
||||
uni.navigateTo({
|
||||
url: `/pageSubPack/inspection-revenue/inspection-details`
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
flex: 1;
|
||||
padding: 20rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.timebox {
|
||||
width: 188rpx;
|
||||
height: 48rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
text-align: center;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.daybox {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.inner-date-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.searchiconbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38rpx;
|
||||
height: 48rpx;
|
||||
padding-right: 10rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
|
||||
.arrow,
|
||||
.arrow1 {
|
||||
border: 1rpx solid #ccc;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
transform: rotateZ(135deg);
|
||||
}
|
||||
|
||||
.arrow1 {
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: rotateZ(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//滚动容器 App重点：高度自适应 \*/
|
||||
.scroll-view {
|
||||
height: calc(100vh - 140rpx);
|
||||
}
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
//卡片 \*/
|
||||
.card-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.address {
|
||||
font-size: 32rpx;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
// 标签 蓝色边框 \*/
|
||||
.tag-label {
|
||||
display: inline-block;
|
||||
border: 2rpx solid #2F77FD;
|
||||
color: #222;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.text-row {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 内容区域 -->
|
||||
<!-- <scroll-view class="content-scroll" scroll-y> -->
|
||||
<!-- 文章标题 -->
|
||||
<view class="article-header">
|
||||
<view class="article-title">
|
||||
{{noticeDetail.noticeTitle}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 作者和日期 -->
|
||||
<view class="notice-meta">
|
||||
<view class="notice-author">
|
||||
<text class="author-name">{{noticeDetail.author}}</text>
|
||||
<text class="separator">·</text>
|
||||
<text class="publish-time">{{noticeDetail.publishTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<view class="article-content">
|
||||
<view class="paragraph" v-html="noticeDetail.noticeContent"></view>
|
||||
<view class="articleimg">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import {getNoticeDetails} from '../api/api.js'
|
||||
|
||||
const isLoading = ref(false)
|
||||
const noticeDetail = ref({})
|
||||
const currentNoticeId = ref('') // 接收公告跳转的id
|
||||
|
||||
// =====方法====
|
||||
onLoad((options) =>{
|
||||
currentNoticeId.value = options?.id
|
||||
// console.log('currentNoticeId',currentNoticeId.value)
|
||||
if(currentNoticeId.value){
|
||||
getDetailsData(currentNoticeId.value)
|
||||
}
|
||||
|
||||
// console.log('currentNoticeId',currentNoticeId.value)
|
||||
})
|
||||
// 获取详情数据
|
||||
const getDetailsData = async (noticeId) =>{
|
||||
|
||||
try{
|
||||
const res = await getNoticeDetails(noticeId)
|
||||
if(res.code === 200){
|
||||
noticeDetail.value = res.data || {}
|
||||
uni.$emit('noticeRead',{
|
||||
noticeId:noticeId,
|
||||
readStatus:noticeDetail.value.readStatus
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}catch(err){
|
||||
uni.showToast({
|
||||
title: res.msg ||"网络异常",
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 内容滚动区域 */
|
||||
.content-scroll {
|
||||
padding-top: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 文章头部 */
|
||||
.article-header {
|
||||
// padding: 24px 20px 20px;
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.article-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.meta-icon {
|
||||
font-size: 14px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-divider {
|
||||
margin: 0 12px;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 元信息 */
|
||||
.notice-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-bottom: 12px;
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
margin: 0 30rpx;
|
||||
|
||||
.notice-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.author-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 6px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.publish-time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.date-text {
|
||||
margin-left: 4px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章内容 */
|
||||
.article-content {
|
||||
padding: 20px;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
font-size: 28rpx;
|
||||
.articleimg{
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
text-indent: 2em;
|
||||
|
||||
/* 富文本里的图片不超出屏幕 */
|
||||
:deep(img),
|
||||
:deep(image) {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-list {
|
||||
margin: 20px 0 20px 2em;
|
||||
|
||||
.bullet-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.bullet-dot {
|
||||
color: #666666;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bullet-text {
|
||||
flex: 1;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 附件区域 */
|
||||
.attachments-section {
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-top: 20px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments-list {
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.attachment-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.file-icon {
|
||||
font-size: 24px;
|
||||
margin-right: 12px;
|
||||
|
||||
&.doc-icon {
|
||||
color: #2b579a; /* Word文档蓝色 */
|
||||
}
|
||||
|
||||
&.pdf-icon {
|
||||
color: #e74c3c; /* PDF红色 */
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
.file-name {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.download-icon {
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面底部 */
|
||||
.page-footer {
|
||||
padding: 30px 20px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.footer-text {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
.info-item {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.info-divider {
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-header,
|
||||
.article-content,
|
||||
.attachments-section,
|
||||
.page-footer {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.container {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
background-color: #1a1a1a;
|
||||
border-bottom-color: #333333;
|
||||
|
||||
.nav-back,
|
||||
.nav-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-actions .action-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.article-header {
|
||||
border-bottom-color: #333333;
|
||||
|
||||
.article-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
color: #e0e0e0;
|
||||
|
||||
.bullet-item .bullet-text {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments-section {
|
||||
background-color: #2a2a2a;
|
||||
border-top-color: #333333;
|
||||
border-bottom-color: #333333;
|
||||
|
||||
.section-title .title-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
background-color: #2a2a2a;
|
||||
border-color: #333333;
|
||||
|
||||
&:active {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.file-info .file-name {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.file-info .file-size {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
.footer-text,
|
||||
.footer-info {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="status_bar"></view>
|
||||
<!-- 固定导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="公区收益"
|
||||
background-color="#F9F9F9"
|
||||
@clickLeft="narBack"
|
||||
/>
|
||||
|
||||
<!-- 滚动区域 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-box"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view class="list-wrap">
|
||||
<!-- 下拉刷新 -->
|
||||
<view class="refresh" v-if="refreshing">
|
||||
<uni-icons type="spinner-cycle" class="spin"/> 刷新中...
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view
|
||||
v-for="revenue in revenueList"
|
||||
:key="revenue.noticeId"
|
||||
class="item">
|
||||
<view class="title-box">
|
||||
<view class="title">{{ revenue.title }}</view>
|
||||
<view class="dot" v-if="revenue.readStatus === '0'"></view>
|
||||
</view>
|
||||
<view class="info">{{ revenue.author }} · {{ revenue.publishTime }}</view>
|
||||
<view class="content" v-html="revenue.content"></view>
|
||||
<view class="detail" @click="goToDetail(revenue)">
|
||||
<text style="color:#2F77FD;font-size: 24rpx;">详情</text>
|
||||
<uni-icons type="right" size="13" color="#007AFF"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 / 无更多 / 空布局 -->
|
||||
<view class="load-more" v-if="loadingMore">加载中...</view>
|
||||
<view class="no-more" v-if="noMoreData && revenueList.length">没有更多通知了</view>
|
||||
<view v-if="revenueList.length === 0 && !loading" class="empty-state">
|
||||
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">暂无通知</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad ,onShow,onUnload} from '@dcloudio/uni-app'
|
||||
// import { getRevenueList } from '../api/api.js'
|
||||
|
||||
const revenueList = ref([
|
||||
{title:'公区收益告知书',author:'张三',publishTime:'2026-7-15',content:'费用明细'},
|
||||
{title:'公区收益告知书',author:'张三',publishTime:'2026-7-15'},
|
||||
])
|
||||
const refreshing = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const noMoreData = ref(false)
|
||||
const loading = ref(false)
|
||||
const pageNum = ref(1)
|
||||
const pageSize = 10
|
||||
const isFirstShow = ref(true) // 详情返回列表刷新状态
|
||||
|
||||
const goToDetail = (notice) => {
|
||||
uni.navigateTo({
|
||||
url: `/pageSubPack/inspection-revenue/public-revenue-details`
|
||||
})
|
||||
}
|
||||
|
||||
const loadRevenue = async (isRefresh = false) => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
if (isRefresh) {
|
||||
pageNum.value = 1
|
||||
noMoreData.value = false
|
||||
}
|
||||
try {
|
||||
const res = await getRevenueList({ pageNum: pageNum.value, pageSize })
|
||||
if (res.code === 200) {
|
||||
const list = res.data.rows || []
|
||||
revenueList.value = isRefresh ? list : [...revenueList.value, ...list]
|
||||
if (list.length < pageSize) noMoreData.value = true
|
||||
}
|
||||
} catch (e) {}
|
||||
finally {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
// 更新单条已读状态
|
||||
const updateReadStatus = ({ revenueId, readStatus }) => {
|
||||
const item = revenueList.value.find(n => String(n.revenueId) === revenueId)
|
||||
if (item) {
|
||||
item.readStatus = readStatus
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() =>{
|
||||
if(isFirstShow.value) return
|
||||
// loadRevenue(true)
|
||||
})
|
||||
|
||||
const onRefresh = () => {
|
||||
refreshing.value = true
|
||||
// loadRevenue(true)
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
if (noMoreData.value || loadingMore.value) return
|
||||
loadingMore.value = true
|
||||
pageNum.value++
|
||||
// loadRevenue()
|
||||
}
|
||||
|
||||
const narBack = () => {
|
||||
uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
isFirstShow.value = false
|
||||
uni.$on('noticeRead',updateReadStatus)
|
||||
loadRevenue(true)
|
||||
})
|
||||
onUnload(()=>{
|
||||
uni.$off('noticeRead',updateReadStatus)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status_bar {
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-box {
|
||||
flex: 1;
|
||||
height: 0; /* 让滚动区域生效 */
|
||||
}
|
||||
.list-wrap {
|
||||
padding: 40rpx;
|
||||
}
|
||||
.item {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.title-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.content {
|
||||
color: #222;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
margin: 20rpx 0;
|
||||
background-color: #f9f9f9;
|
||||
padding: 24rpx;
|
||||
word-break: break-all;
|
||||
/* 按高度截断，避免 line-clamp 导致文字重叠 */
|
||||
max-height: 160rpx;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
/* 富文本里的图片不超出屏幕 */
|
||||
:deep(img),
|
||||
:deep(image) {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.refresh, .load-more, .no-more {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.refresh-btn {
|
||||
background: #007AFF;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.spin {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@@ -20,7 +20,7 @@
|
||||
<view class="title-box">
|
||||
<text class="tag-default" v-if="item.isDefault==1">默认</text>
|
||||
<text
|
||||
class="house-name">{{ item.villageName+item.buildingName+item.unitNo+'单元'+item.floorNo+'楼' }}</text>
|
||||
class="house-name">{{ item.villageName+"-"+item.buildingName+"-"+item.unitNo }}</text>
|
||||
</view>
|
||||
<text class="status-tag"
|
||||
:class="item.certificationStatus=='0'?'pending':item.certificationStatus=='1'?'success':item.certificationStatus=='2'?'fail':''">{{ item.certificationStatus=='0'?'未认证':item.certificationStatus=='1'?'认证成功':item.certificationStatus=='2'?'认证失败':'' }}</text>
|
||||
|
||||
@@ -146,6 +146,7 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { addQueryRepair, uploadFile } from '../api/api.js'
|
||||
import { getUserProfile } from '../api/apiSub.js'
|
||||
import moment from 'moment/moment'
|
||||
|
||||
// 选中的房屋/项目名称
|
||||
@@ -282,6 +283,14 @@ onLoad(() => {
|
||||
uni.$on('selectProject', (data) => {
|
||||
projectName.value = data.name
|
||||
projectId.value = data.id
|
||||
form.value.title = data.name
|
||||
})
|
||||
|
||||
// 自动获取当前登录用户手机号
|
||||
getUserProfile().then(res => {
|
||||
if (res.code === 200 && res.data && res.data.phone) {
|
||||
form.value.phone = res.data.phone
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -350,9 +359,9 @@ const submitForm = async () => {
|
||||
if (!houseName.value) return uni.showToast({ title: '请选择报修房屋', icon: 'none' })
|
||||
if (!projectName.value) return uni.showToast({ title: '请选择维修项目', icon: 'none' })
|
||||
if (!form.value.title) return uni.showToast({ title: '请输入标题', icon: 'none' })
|
||||
if (!form.value.desc) return uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
// if (!form.value.desc) return uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) return uni.showToast({ title: '手机号不正确', icon: 'none' })
|
||||
if (!form.value.datetime) return uni.showToast({ title: '请选择预约时间', icon: 'none' })
|
||||
// if (!form.value.datetime) return uni.showToast({ title: '请选择预约时间', icon: 'none' })
|
||||
|
||||
const villageId = uni.getStorageSync('currentVillageId')
|
||||
if (!villageId || villageId === '0') return uni.showToast({ title: '请先选择小区', icon: 'none' })
|
||||
|
||||
@@ -15,14 +15,12 @@
|
||||
<!-- 标题输入 -->
|
||||
<view class="form-item">
|
||||
<text class="label">标题</text>
|
||||
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
|
||||
<uni-easyinput v-model="form.title" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
<!-- 问题描述 -->
|
||||
<view class="form-item-wenti">
|
||||
<text class="label">问题描述</text>
|
||||
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
|
||||
<uni-easyinput v-model="form.desc" placeholder="请描述你的问题" type="textarea"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
@@ -59,6 +57,7 @@
|
||||
import { ref } from 'vue'
|
||||
import{onLoad,onUnload} from "@dcloudio/uni-app"
|
||||
import { addQueryRepair, uploadFile } from '../api/api.js'
|
||||
import { getUserProfile } from '../api/apiSub.js'
|
||||
|
||||
// 接收上个页面传的维修项目
|
||||
const repairProject = ref('')
|
||||
@@ -79,12 +78,21 @@ onLoad((options) => {
|
||||
if (options.category && options.project) {
|
||||
repairProject.value = `${options.category}-${options.project}`
|
||||
projectId.value = options.projectId
|
||||
form.value.title = `${options.category}-${options.project}`
|
||||
}
|
||||
|
||||
// ✅ 监听返回选择的项目
|
||||
uni.$on('selectRepairProject', (data) => {
|
||||
repairProject.value = `${data.category}-${data.project}`
|
||||
projectId.value = data.projectId
|
||||
form.value.title = `${data.category}-${data.project}`
|
||||
})
|
||||
|
||||
// 自动获取当前登录用户手机号
|
||||
getUserProfile().then(res => {
|
||||
if (res.code === 200 && res.data && res.data.phone) {
|
||||
form.value.phone = res.data.phone
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -163,10 +171,10 @@ const submitForm = async () => {
|
||||
uni.showToast({ title: '请输入问题标题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!form.value.desc) {
|
||||
uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
// if (!form.value.desc) {
|
||||
// uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
// return
|
||||
// }
|
||||
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||||
return
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
<view class="bill-info">
|
||||
<view class="bill-title">{{item.type}}
|
||||
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
|
||||
<text :class="item.balance<0 ? 'balance-debt' : 'balance-normal'">(余额：{{item.balance|| 0.00}}元)</text>
|
||||
</view>
|
||||
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
|
||||
</view>
|
||||
@@ -456,6 +457,15 @@
|
||||
margin-left: 10rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.balance-normal {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.balance-debt {
|
||||
font-size: 28rpx;
|
||||
color: #E34D59;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
|
||||
@@ -472,6 +472,36 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pageSubPack/inspection-revenue",
|
||||
"pages": [{
|
||||
"path": "inspection",
|
||||
"style": {
|
||||
"navigationBarTitleText": "巡检记录",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "inspection-details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "巡检详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "public-revenue",
|
||||
"style": {
|
||||
"navigationBarTitleText": "公区收益",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "public-revenue-details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收益详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
@@ -111,18 +111,16 @@
|
||||
<!-- 活动列表 -->
|
||||
<uni-card class="activity-card">
|
||||
<view class="eventListClass">
|
||||
<view>
|
||||
<text class="activity-name">活动列表</text>
|
||||
<!-- <u-title>活动列表</u-title> -->
|
||||
</view>
|
||||
<view class="nav-more">
|
||||
<!-- <up-button type="primary" shape="circle" size="small" text="查看更多" @click="moreClick"></up-button> -->
|
||||
<text class="look-more-title" @click="moreClick">查看更多</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="activity-name">活动列表</text>
|
||||
</view>
|
||||
<view class="nav-more">
|
||||
<text class="look-more-title" @click="moreClick">查看更多</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 活动列表内容（去掉内层 scroll-view，由外层统一滚动） -->
|
||||
<view class="activity-list">
|
||||
<view class="eventListCard" v-for="(activity, index) in activityList" :key="activity.id">
|
||||
<view class="eventListCard" v-for="(activity, index) in activityList" :key="activity.id" @click="moreClick">
|
||||
<view class="u-demo-block__content ">
|
||||
<up-row justify="space-between" customStyle="margin-bottom: 10px">
|
||||
<up-col span="4">
|
||||
|
||||
@@ -123,6 +123,16 @@
|
||||
name: "联系物业",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-contact.png",
|
||||
path: "/pageSubPack/service-list/contactProperty"
|
||||
},
|
||||
{
|
||||
name: "巡检记录",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-contact.png",
|
||||
path: "/pageSubPack/inspection-revenue/inspection"
|
||||
},
|
||||
{
|
||||
name: "公区收益",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-contact.png",
|
||||
path: "/pageSubPack/inspection-revenue/public-revenue"
|
||||
}
|
||||
])
|
||||
const loginName = ref("wangh")
|
||||
@@ -273,13 +283,17 @@
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 智慧社区网格（适配9个图标，最后一个左对齐） */
|
||||
.community-grid .func-item {
|
||||
width: 22%;
|
||||
/* 智慧社区网格 */
|
||||
.community-grid {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.community-grid .func-item:nth-child(9) {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
.community-grid .func-item {
|
||||
width: 22%;
|
||||
margin-right: calc((100% - 22% * 4) / 3);
|
||||
}
|
||||
|
||||
.community-grid .func-item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user