first commit

wuye-manager-uniapp/pages/notice-list/notice-list.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="order-notice-page">
+    <!-- 列表 -->
+    <scroll-view class="order-list" scroll-y>
+      <!-- 单个工单项 -->
+      <view 
+        class="order-item" 
+        v-for="(item, index) in orderList" 
+        :key="index"
+        @click="goToDetail(item.id)"
+      >
+        <!-- 工单标题栏（含未读红点） -->
+        <view class="order-header">
+          <text class="order-title">你有新的维修工单</text>
+          <view class="unread-dot" v-if="item.unread"></view>
+        </view>
+
+        <!-- 工单内容 -->
+        <view class="order-content">
+          <text class="content-title">{{ item.title }}</text>
+          <text class="content-desc">{{ item.desc }}</text>
+        </view>
+		<view class="line-class"></view>
+
+        <!-- 详情入口 -->
+        <view class="order-detail">
+          <text class="detail-text">详情</text>
+          <uni-icons type="right" size="14" color="#999"></uni-icons>
+        </view>
+      </view>
+
+      <!-- 空数据占位 -->
+      <view class="empty-tip" v-if="orderList.length === 0">
+        <text>暂无新的维修工单</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 模拟工单数据（可替换为接口请求）
+const orderList = ref([
+  {
+    id: 1,
+    unread: true, // 是否未读（显示红点）
+    title: '标题巴拉巴拉',
+    desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。'
+  },
+  {
+    id: 2,
+    unread: false, // 已读（无红点）
+    title: '标题巴拉巴拉',
+    desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。'
+  }
+])
+
+// 点击跳转工单详情页
+const goToDetail = (orderId) => {
+  uni.navigateTo({
+    url: `/pages/repair-detail/repair-detail?id=${orderId}` // 替换为你的详情页路径
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.order-notice-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+// 工单列表
+.order-list {
+  padding: 10px 0px;
+  height: calc(100vh - 44px);
+
+  // 单个工单项
+  .order-item {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 10px;
+    position: relative;
+
+    // 工单标题栏（含未读红点）
+    .order-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .order-title {
+        font-size: 15px;
+        color: #333;
+        font-weight: 500;
+      }
+
+      // 未读红点
+      .unread-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #ff3b30;
+      }
+    }
+
+    // 工单内容
+    .order-content {
+      margin-bottom: 12px;
+
+      .content-title {
+        font-size: 14px;
+        color: #666;
+        display: block;
+        margin-bottom: 6px;
+      }
+
+      .content-desc {
+        font-size: 13px;
+        color: #999;
+        line-height: 1.5;
+        display: block;
+      }
+    }
+	.line-class{
+		border: 1px solid #d4d4d4;
+	}
+
+    // 详情入口
+    .order-detail {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+	  margin-top: 20rpx;
+
+      .detail-text {
+        font-size: 13px;
+        color: #999;
+        margin-right: 4px;
+      }
+    }
+  }
+
+  // 空数据提示
+  .empty-tip {
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+    margin-top: 50px;
+  }
+}
+</style>