巡检点上传图片修正

2026-05-09 17:10:50 +08:00
parent e29e1c1346
commit b29e03ab4d
29 changed files with 2836 additions and 1189 deletions
--- a/wuye-manager-uniapp/pageSubPack/ticket/reportingRecord.vue
+++ b/wuye-manager-uniapp/pageSubPack/ticket/reportingRecord.vue
@@ -0,0 +1,415 @@
+<template>
+  <view class="report-record-page page_padding">
+    <!-- 顶部导航栏 -->
+    <navBar @clickLeft="navBack" title="上报记录"></navBar>
+    <view class="hall_body flex-1 flex flex-col">
+      <!-- 状态筛选标签 -->
+      <TabsComponents
+        :tabslist="statusTabs"
+        :options="{ label: 'label', value: 'value' }"
+        @update="switchStatus"
+      ></TabsComponents>
+
+      <!-- 类型筛选标签 -->
+      <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 flex-1"
+        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>
+        <!-- 记录卡片 -->
+        <view v-for="record in filteredRecords" :key="record.id" class="record-card">
+          <!-- 标题 + 状态标签 -->
+          <view class="card-header">
+            <text class="card-title">{{ record.title }}</text>
+            <view class="status-tag" :class="record.status">
+              {{ getStatusText(record.status) }}
+            </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.repairStatus !== 0" class="repairman"
+              >维修师傅：{{ record.repairman }}</text
+            >
+            <!--            <view class="share" v-if="record.repairStatus === 0">
+              <text>分配</text>
+            </view> -->
+          </view>
+        </view>
+      </scroll-view>
+    </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'
+
+// 导航栏/标签高度（适配不同设备）
+const navHeight = ref(44)
+const statusTabHeight = ref(88)
+const typeTabHeight = ref(88)
+
+// 筛选状态
+const activeStatus = ref('all') // 全部/待分配/待解决/已完成
+const activeType = ref('all') // 全部/公共报修/个人报修
+
+// 状态筛选选项
+const statusTabs = ref([
+  { label: '全部', value: 'all' },
+  { label: '待分配', value: 'pending' },
+  { label: '待解决', value: 'processing' },
+  { label: '已完成', value: 'completed' }
+])
+
+// 类型筛选选项
+const typeTabs = ref([
+  { label: '全部', value: 'all' },
+  { label: '公共报修', value: 'public' },
+  { label: '个人报修', value: 'private' }
+])
+
+// 模拟上报记录数据（实际项目替换为接口请求）
+const reportRecords = ref([
+  {
+    id: 1,
+    title: '标题巴拉巴拉巴拉',
+    status: 'pending', // pending/processing/completed
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: '',
+    repairStatus: 0 // 0 待分配，1待解决 2已完成
+  },
+  {
+    id: 2,
+    title: '标题巴拉巴拉巴拉',
+    status: 'processing',
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: '张三',
+    repairStatus: 1 // 0 待分配，1待解决 2已完成
+  },
+  {
+    id: 3,
+    title: '标题巴拉巴拉巴拉',
+    status: 'completed',
+    reportType: '公共报修',
+    category: '路灯',
+    content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
+    createTime: '2026-08-01 10:05:46',
+    repairman: '张三',
+    repairStatus: 2 // 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
+  })
+})
+
+// 切换状态（全部/待分配/待解决/已完成）筛选
+const switchStatus = value => {
+  activeStatus.value = value
+}
+
+// 切换类型（公共/个人）筛选
+const switchType = value => {
+  activeType.value = value
+}
+
+// 获取状态文本
+const getStatusText = status => {
+  const statusMap = {
+    pending: '待分配',
+    processing: '待解决',
+    completed: '已完成'
+  }
+  return statusMap[status] || ''
+}
+
+// 页面渲染完成后适配高度
+onReady(() => {
+  // 可根据实际设备调整高度
+  uni.getDeviceInfo({
+    success: res => {
+      if (res.platform === 'ios') {
+        navHeight.value = 44
+      } else {
+        navHeight.value = 48
+      }
+    }
+  })
+})
+// 返回上一页
+const navBack = () => {
+  uni.switchTab({
+    url: '/pages/my/my'
+  })
+}
+/*  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`
+      })
+    }
+  }
+}
+
+/* 预览图片 */
+function handlePrivew(imgs) {
+  // if (imgs.length > 0) {
+  //   uni.previewImage({
+  //     urls: imgs,
+  //     success(e) {
+  //       console.log(JSON.stringify(e))
+  //     }
+  //   })
+  // }
+}
+</script>
+
+<style scoped>
+.report-record-page {
+  width: 100%;
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
+}
+
+.hall_body {
+  padding: 0 40rpx;
+  overflow: hidden;
+  position: relative;
+}
+/* 状态筛选标签 */
+.status-tabs {
+  display: flex;
+  /* background-color: #fff; */
+  padding: 0 40rpx;
+  height: 88rpx;
+  align-items: center;
+}
+
+/* 类型筛选标签 */
+.type-tabs {
+  display: flex;
+  height: 48rpx;
+  /* background-color: #fff; */
+  margin: 20rpx 0;
+  justify-content: flex-start;
+  gap: 20rpx;
+}
+
+.type-tab-item {
+  width: 142rpx;
+  height: 48rpx;
+  border-radius: 24rpx;
+  border: 2rpx solid #999999;
+
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
+  line-height: 48rpx;
+  text-align: center;
+}
+
+.type-tab-item.active {
+  color: #4d5dfa;
+  border: 2rpx solid #4d5dfa;
+  border-radius: 24rpx;
+}
+
+/* 记录列表 */
+.record-list {
+  box-sizing: border-box;
+  padding-bottom: 40rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: #ccc;
+}
+
+.empty-text {
+  font-size: 32rpx;
+  color: #999;
+  margin-top: 20rpx;
+}
+
+/* 记录卡片 */
+.record-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 34rpx 32rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.card-title {
+  margin-right: 20rpx;
+  font-weight: 450;
+  font-size: 32rpx;
+  color: #222222;
+  line-height: 40rpx;
+}
+
+/* 状态标签 */
+.status-tag {
+  width: 82rpx;
+  height: 30rpx;
+  border-radius: 15rpx;
+
+  font-weight: 400;
+  font-size: 20rpx;
+  color: #ffffff;
+  line-height: 30rpx;
+  text-align: center;
+  line-height: 30rpx;
+}
+
+.status-tag.pending {
+  background-color: #e34d59; /* 待分配-红色 */
+}
+
+.status-tag.processing {
+  background-color: #09c2bd; /* 待解决-绿色 */
+}
+
+.status-tag.completed {
+  background-color: #4d5dfa; /* 已完成-蓝色 */
+}
+
+/* 类型标签组 */
+.tag-group {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.tag-item {
+  width: 112rpx;
+  height: 42rpx;
+  border-radius: 8rpx 8rpx 8rpx 8rpx;
+  border: 1rpx solid #999999;
+
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #999999;
+  line-height: 42rpx;
+  text-align: center;
+}
+
+/* 内容 */
+.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;
+  margin-bottom: 20rpx;
+}
+.images {
+  width: 186rpx;
+  height: 104rpx;
+}
+
+/* 底部信息 */
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 28rpx;
+  color: #999;
+}
+.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>