设置和消息对接口改回上报记录页面

2026-05-15 17:55:31 +08:00
parent 856f36455c
commit eb7d4da5e3
4 changed files with 268 additions and 318 deletions
--- a/wuye-manager-uniapp/pageSubPack/report-record/report-record.vue
+++ b/wuye-manager-uniapp/pageSubPack/report-record/report-record.vue
@@ -1,111 +1,99 @@
 <template>
-  <view class="report-record-page page_padding">
+  <view class="report-record-page">
+	  <view class="status-bar"></view>
    <!-- 顶部导航栏 -->
-    <navBar @clickLeft="navBack" title="上报记录"></navBar>
-    <view class="hall_body flex-1 flex flex-col">
-      <view class="bgaction"> </view>
-      <!-- 状态筛选标签 -->
-      <TabsComponents
-        :tabslist="statusTabs"
-        :options="{ label: 'label', value: 'value' }"
-        @update="switchStatus"
-      ></TabsComponents>
+    <uni-nav-bar
+      left-icon="back"
+      title="上报记录"
+	  backgroundColor="transparent"
+	  :border= "false"
+      @clickLeft="navBack"/>

-      <!-- 类型筛选标签 -->
-      <view class="type-tabs">
-        <view
-          v-for="item in typeTabs"
-          :key="item.value"
-          class="type-tab-item"
-          :class="{ active: activeType === item.value }"
-          @tap="switchType(item.value)"
-        >
-          {{ item.label }}
-        </view>
+    <!-- 状态筛选标签 -->
+    <view class="status-tabs">
+      <view
+        v-for="item in statusTabs"
+        :key="item.value"
+        class="status-tab-item"
+        :class="{ active: activeStatus === item.value }"
+        @tap="switchStatus(item.value)"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+
+    <!-- 类型筛选标签 -->
+    <view class="type-tabs">
+      <view
+        v-for="item in typeTabs"
+        :key="item.value"
+        class="type-tab-item"
+        :class="{ active: activeType === item.value }"
+        @tap="switchType(item.value)"
+      >
+        {{ item.label }}
+      </view>
+    </view>
+
+    <!-- 上报记录列表 -->
+    <scroll-view
+      class="record-list"
+      scroll-y
+      :style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
+    >
+      <!-- 空状态 -->
+      <view v-if="filteredRecords.length === 0" class="empty-state">
+        <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
+        <text class="empty-text">暂无上报记录</text>
      </view>

-      <!-- 上报记录列表 -->
-      <scroll-view
-        class="record-list flex-1"
-        scroll-y
-        lower-threshold="60"
-        @scrolltolower="scrolltolower"
+      <!-- 记录卡片 -->
+      <view
+        v-for="record in filteredRecords"
+        :key="record.id"
+        class="record-card"
      >
-        <!-- 空状态 -->
-        <view v-if="reportRecords.length === 0" class="empty-state">
-          <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
-          <text class="empty-text">暂无上报记录</text>
-        </view>
-        <!-- 记录卡片 -->
-        <view
-          v-for="(record, index) in reportRecords"
-          :key="index"
-          class="record-card"
-          @tap="handleMain(record.id)"
-        >
-          <!-- 标题 + 状态标签 -->
-          <view class="card-header">
-            <text class="card-title">{{ record.title }}</text>
-            <view
-              class="status-tag"
-              :class="{
-                pending: record.repairStatus === 0,
-                processing: record.repairStatus === 1,
-                completed: record.repairStatus === 2
-              }"
-            >
-              {{ getStatusText(record.repairStatus) }}
-            </view>
-          </view>
-
-          <!-- 类型标签 -->
-          <view class="tag-group">
-            <view class="tag-item">{{ record.reportType }}</view>
-            <view class="tag-item">{{ record.category }}</view>
-          </view>
-
-          <!-- 内容 -->
-          <view class="card-content">
-            {{ record.content }}
-          </view>
-          <!-- 工单图片 -->
-          <!--         <view class="card-image">
-            <image
-              v-for="(item, index) in record.images"
-              :key="index"
-              lazy-load
-              :src="item"
-              class="images"
-              mode="scaleToFill"
-              @tap="handlePrivew(record.images)"
-            ></image>
-          </view> -->
-
-          <!-- 底部信息 -->
-          <view class="card-footer">
-            <text class="create-time">{{ record.createTime }}</text>
-            <text v-if="record.repairStatus !== 0" class="repairman"
-              >维修师傅：{{ record.repairman }}</text
-            >
-            <!-- <view class="share" v-if="record.repairStatus === 0">
-              <text>分配</text>
-            </view> -->
+        <!-- 标题 + 状态标签 -->
+        <view class="card-header">
+          <text class="card-title">{{ record.title }}</text>
+          <view class="status-tag" :class="record.status">
+            {{ getStatusText(record.status) }}
          </view>
        </view>
-      </scroll-view>
-    </view>
+
+        <!-- 类型标签 -->
+        <view class="tag-group">
+          <view class="tag-item">{{ record.reportType }}</view>
+          <view class="tag-item">{{ record.category }}</view>
+        </view>
+
+        <!-- 内容 -->
+        <view class="card-content">
+          {{ record.content }}
+        </view>
+
+        <!-- 底部信息 -->
+        <view class="card-footer">
+          <text class="create-time">{{ record.createTime }}</text>
+          <text v-if="record.repairman" class="repairman">维修师傅：{{ record.repairman }}</text>
+        </view>
+      </view>
+    </scroll-view>
  </view>
 </template>

 <script setup>
 import { ref, computed } from 'vue'
-import { onReady } from '@dcloudio/uni-app'
-import TabsComponents from '@/components/tabs/tabs.vue'
-import NavBar from '@/components/navbar/navbar.vue'
+import {onReady} from "@dcloudio/uni-app"
+
+// 导航栏/标签高度（适配不同设备）
+const navHeight = ref(44)
+const statusTabHeight = ref(88)
+const typeTabHeight = ref(88)

 // 筛选状态
 const activeStatus = ref('all') // 全部/待分配/待解决/已完成
-const activeType = ref('all') // 全部/公共报修/个人报修
+const activeType = ref('all')   // 全部/公共报修/个人报修

 // 状态筛选选项
 const statusTabs = ref([
@@ -123,144 +111,101 @@ const typeTabs = ref([
 ])

 // 模拟上报记录数据（实际项目替换为接口请求）
-const reportRecords = ref([])
-
-const queryParmas = ref({
-  pageNum: 1,
-  pageSize: 5,
-  value: ''
-})
-const isLoading = ref(false) // 加载锁
-const hasMore = ref(true) // 是否还有更多数据
-const total = ref(21)
-function scrolltolower() {
-  // 必须加这两个判断！
-  if (isLoading.value || !hasMore.value) {
-    return
+const reportRecords = ref([
+  {
+    id: 1,
+    title: '标题巴拉巴拉巴拉',
+    status: 'pending', // pending/processing/completed
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: ''
+  },
+  {
+    id: 2,
+    title: '标题巴拉巴拉巴拉',
+    status: 'processing',
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: '张三'
+  },
+  {
+    id: 3,
+    title: '标题巴拉巴拉巴拉',
+    status: 'completed',
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: '张三'
  }
-  queryParmas.value.pageNum += 1
-  getlist()
-}
-function getlist() {
-  // 1. 如果正在加载或没有更多数据，直接返回
-  if (isLoading.value || !hasMore.value) return
-  // 2. 开启锁
-  isLoading.value = true
-  uni.showLoading({
-    title: '加载中',
-    mask: true
-  })
-  const { pageNum, pageSize } = queryParmas.value
+])

-  const startId = (pageNum - 1) * pageSize + 1
-  const arr = Array.from({ length: pageSize }).map((_, index) => {
-    const realId = startId + index
-    const randomStatus = Math.floor(Math.random() * 3)
-    return {
-      id: realId,
-      title: '标题巴拉巴拉巴拉',
-      status: 'pending', // pending/processing/completed
-      reportType: '公共报修',
-      category: '路灯',
-      content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
-      createTime: '2026-08-01 10:05:46',
-      repairman: '张三' + realId,
-      images: [
-        'https://picsum.photos/93',
-        'https://picsum.photos/93',
-        'https://picsum.photos/93',
-        'https://picsum.photos/93',
-        'https://picsum.photos/93'
-      ],
-      repairStatus: randomStatus // 0 待分配，1待解决 2已完成
-    }
+// 筛选后的记录
+const filteredRecords = computed(() => {
+  return reportRecords.value.filter(record => {
+    // 状态筛选
+    const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
+    // 类型筛选
+    const typeMatch = activeType.value === 'all' || record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
+    return statusMatch && typeMatch
  })
-  // 追加数据（正确方式）
-  reportRecords.value = [...reportRecords.value, ...arr]
-  // 判断是否还有更多
-  hasMore.value = reportRecords.value.length < total.value
-  isLoading.value = false
-  uni.hideLoading()
-}
-getlist()
-function resetList() {
-  reportRecords.value = []
-  queryParmas.value.pageNum = 1
-  hasMore.value = true
-  getlist()
-}
+})

-// 0-------------------------------
 // 切换状态（全部/待分配/待解决/已完成）筛选
-const switchStatus = value => {
+const switchStatus = (value) => {
  activeStatus.value = value
 }

 // 切换类型（公共/个人）筛选
-const switchType = value => {
+const switchType = (value) => {
  activeType.value = value
 }

-const statusMap = ['待分配', '待解决', '已完成']
-// 获取状态文本
-const getStatusText = status => {
-  return statusMap[status] || ''
-}
 // 返回上一页
 const navBack = () => {
-  uni.switchTab({
-    url: '/pages/my/my'
+  uni.navigateBack({
+  	 delta: 1
  })
 }
-/*  0 待分配，1待解决 2已完成*/
-function handleMain(id) {
-  const find = reportRecords.value.find(item => item.id === id)
-  if (find) {
-    const status = find.repairStatus
-    if (status === 2) {
-      uni.navigateTo({
-        url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
-      })
-    } else {
-      uni.navigateTo({
-        url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
-      })
-    }
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const statusMap = {
+    pending: '待分配',
+    processing: '待解决',
+    completed: '已完成'
  }
+  return statusMap[status] || ''
 }

-/* 预览图片 */
-function handlePrivew(imgs) {
-  // if (imgs.length > 0) {
-  //   uni.previewImage({
-  //     urls: imgs,
-  //     success(e) {
-  //       console.log(JSON.stringify(e))
-  //     }
-  //   })
-  // }
-}
+// 页面渲染完成后适配高度
+onReady(() => {
+  // 可根据实际设备调整高度
+  uni.getSystemInfo({
+    success: (res) => {
+      if (res.platform === 'ios') {
+        navHeight.value = 44
+      } else {
+        navHeight.value = 48
+      }
+    }
+  })
+})
 </script>

 <style scoped>
-.bgaction {
-  position: absolute;
-  right: 0;
-  top: 20%;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25%);
-}
 .report-record-page {
+  width: 100%;
  height: 100vh;
-  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
+  background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%)
 }
-
-.hall_body {
-  padding: 0 40rpx;
-  overflow: hidden;
-  position: relative;
+.status-bar{
+	width: 100%;
+	height: 46px;
 }
 /* 状态筛选标签 */
 .status-tabs {
@@ -271,40 +216,66 @@ function handlePrivew(imgs) {
  align-items: center;
 }

+.status-tab-item {
+  /* flex: 1; */
+  display: flex;
+  justify-content: flex-start;
+  margin-right: 60rpx;
+  text-align: left;
+  font-size: 32rpx;
+  color: #666;
+  height: 100%;
+  line-height: 88rpx;
+  position: relative;
+}
+
+.status-tab-item.active {
+  color: #4D5DFA;
+  font-weight: 500;
+}
+
+.status-tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80rpx;
+  height: 8rpx;
+  background: linear-gradient(to bottom, #4D5DFA, #BAC0FA);
+  border-radius: 6rpx;
+}
+
 /* 类型筛选标签 */
 .type-tabs {
  display: flex;
-  height: 48rpx;
  /* background-color: #fff; */
-  margin: 20rpx 0;
+  padding: 20rpx 0rpx;
+  margin-top: 10rpx;
  justify-content: flex-start;
  gap: 20rpx;
+  margin: 0rpx 40rpx;
 }

 .type-tab-item {
-  width: 142rpx;
-  height: 48rpx;
-  border-radius: 24rpx;
-  border: 2rpx solid #999999;
-
-  font-weight: 400;
+  padding: 7rpx 14rpx;
  font-size: 28rpx;
-  color: #999999;
-  line-height: 48rpx;
-  text-align: center;
+  color: #999;
+  border: 2rpx solid #999;
+  border-radius: 198rpx;
 }

 .type-tab-item.active {
-  color: #4d5dfa;
-  border: 2rpx solid #4d5dfa;
-  border-radius: 24rpx;
+  color: #4D5DFA;
+  border: 2rpx solid #4D5DFA;
+  border-radius: 198rpx;
+  /* background-color: #007AFF; */
 }

 /* 记录列表 */
 .record-list {
+  padding: 20rpx 40rpx;
  box-sizing: border-box;
-  padding-bottom: 40rpx;
-  overflow: auto;
 }

 /* 空状态 */
@@ -327,7 +298,7 @@ function handlePrivew(imgs) {
 .record-card {
  background-color: #fff;
  border-radius: 16rpx;
-  padding: 34rpx 32rpx;
+  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
@@ -340,81 +311,55 @@ function handlePrivew(imgs) {
 }

 .card-title {
-  margin-right: 20rpx;
-  font-weight: 450;
  font-size: 32rpx;
-  color: #222222;
-  line-height: 40rpx;
+  font-weight: 500;
+  color: #333;
+  margin-right: 20rpx;
 }

 /* 状态标签 */
 .status-tag {
-  width: 82rpx;
-  height: 30rpx;
-  border-radius: 15rpx;
-
-  font-weight: 400;
+  padding: 6rpx 16rpx;
  font-size: 20rpx;
-  color: #ffffff;
-  line-height: 30rpx;
-  text-align: center;
-  line-height: 30rpx;
+  border-radius: 12rpx;
+  color: #fff;
+  border-radius: 198rpx;
 }

 .status-tag.pending {
-  background-color: #e34d59; /* 待分配-红色 */
+  background-color: #E34D59; /* 待分配-红色 */
 }

 .status-tag.processing {
-  background-color: #09c2bd; /* 待解决-绿色 */
+  background-color: #09C2BD; /* 待解决-绿色 */
 }

 .status-tag.completed {
-  background-color: #4d5dfa; /* 已完成-蓝色 */
+  background-color: #4D5DFA; /* 已完成-蓝色 */
 }

 /* 类型标签组 */
 .tag-group {
  display: flex;
-  gap: 20rpx;
+  gap: 15rpx;
  margin-bottom: 20rpx;
 }

 .tag-item {
-  width: 112rpx;
-  height: 42rpx;
-  border-radius: 8rpx 8rpx 8rpx 8rpx;
-  border: 1rpx solid #999999;
-
-  font-weight: 400;
+  padding: 6rpx 20rpx;
  font-size: 24rpx;
-  color: #999999;
-  line-height: 42rpx;
-  text-align: center;
+  color: #666;
+  border: 1rpx solid #999;
+  border-radius: 8rpx;
 }

 /* 内容 */
 .card-content {
-  margin-bottom: 20rpx;
-  font-weight: 450;
  font-size: 28rpx;
-  color: #666666;
-  line-height: 40rpx;
-  letter-spacing: 2rpx;
-}
-/* 图片  */
-.card-image {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
-  min-width: 186rpx;
-  min-height: 104rpx;
+  color: #666;
+  line-height: 1.6;
  margin-bottom: 20rpx;
 }
-.images {
-  width: 186rpx;
-  height: 104rpx;
-}

 /* 底部信息 */
 .card-footer {
@@ -423,21 +368,9 @@ function handlePrivew(imgs) {
  align-items: center;
  font-size: 28rpx;
  color: #999;
-
-  font-weight: 400;
-  font-size: 28rpx;
-  line-height: 40rpx;
 }
-.share {
-  width: 127rpx;
-  height: 44rpx;
-  background: #4d5dfa;
-  border-radius: 22rpx;

-  font-weight: 400;
-  font-size: 28rpx;
-  color: #ffffff;
-  line-height: 44rpx;
-  text-align: center;
+.repairman {
+  color: #999;
 }
 </style>