feat: 工单列表调整

pages/workbench/workbench.vue

@@ -5,15 +5,18 @@
       <me-top title="工作台"></me-top>
       <view class="filter flex-sb line-after">
         <view v-for="(item, type) in filterType" :key="type" class="filter-item flex-c" @click="filter(type)">
-          <view :class="['title', 'flex-c', data.type == type ? 'title-active' : '']">{{item.name}}({{ countOrderByType(type) }})</view>
-          <view class="select-style" v-if="data.type == type"></view>
+          <view :class="['title', 'flex-c', data.type === type ? 'title-active' : '']">{{item.name}}({{ countOrderByType(type) }})</view>
+          <view class="select-style" v-if="data.type === type"></view>
         </view>
       </view>
+      <view class="date flex-l" v-if="data.type === 'need_visit'">
+        <view :class="['item', 'flex-c', data.need_visit_type === type ? 'item-selected' : '']" v-for="(item, type) in needVisitType" :key="type">{{item.name}}(1)</view>
+      </view>
     </view>
 
     <me-empty-space :height="listMarginTop"></me-empty-space>
 
-    <view class="list" v-if="data.list.length > 0">
+    <view class="list" :style="{ transform: data.type === 'need_visit' ? 'translateY(100rpx)' : 'translateY(0)' }" v-if="data.list.length > 0">
       <view class="order-item" v-for="(item, index) in data.list" :key="index">
         <view class="top flex-sb" @click="toDetail(item.id)">
           <view class="type flex-l">{{item.order_info.item_title}}</view>
@@ -164,7 +167,8 @@ const countOrderByType = (type) => {
 }
 
 const data = reactive({
-  type: 'ongoing',
+  type: 'pending',
+  need_visit_type: 'today',
   page: 1,
   page_size: 10,
   last_page: 0,
@@ -197,29 +201,48 @@ const getList = () => {
 
 const listMarginTop = computed(() => {
   let globalData = inject('globalData')
-  return (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
+  let res = (globalData.statusBarH + (globalData.customBarH - globalData.statusBarH) + 50) * 2
+  if (data.type !== 'need_visit') {
+    res += 20
+  }
+
+  return res
 })
 
 const filterType = reactive({
-  'ongoing': {
-    name: '进行中',
+  'pending': {
+    name: '待沟通',
   },
+  'need_visit': {
+    name: '待上门',
+  },
+  'ongoing': {
+    name: '服务中',
+  },
+  'finished': {
+    name: '已完成',
+  },
+})
+
+const needVisitType = reactive({
   'today': {
-    id: 2,
     name: '今日',
   },
   'tomorrow': {
-    id: 3,
     name: '明日',
   },
   'all': {
-    id: 4,
     name: '全部',
-  },
+  }
 })
 
 const filter = (type) => {
   data.type = type
+
+  if (type === 'need_visit') {
+    data.need_visit_type = 'today'
+  }
+
   data.page = 1
   uni.showLoading({
     title: '加载中'
@@ -232,14 +255,22 @@ const filter = (type) => {
 .ctr {
   padding: 0 32rpx;
   box-sizing: border-box;
+  .list {
+    transition: transform 0.3s ease;
+    .order-item:first-child {
+      margin-top: 0!important;
+    }
+  }
   .fixed-top {
     position: fixed;
     top: 0;
     background-color: var(--pageBgColor);
     width: 686rpx;
+    z-index: 100;
     .filter {
       width: 686rpx;
       height: 100rpx;
+      position: relative;
       .filter-item {
         width: 170rpx;
         height: 100%;
@@ -263,6 +294,23 @@ const filter = (type) => {
         }
       }
     }
+    .date {
+      width: 686rpx;
+      height: 100rpx;
+      .item {
+        height: 60rpx;
+        border-radius: 8rpx;
+        background-color: var(--auxiliaryBgColor);
+        color: var(--summaryColor);
+        font-size: 28rpx;
+        padding: 0 24rpx;
+        margin-left: 20rpx;
+      }
+      .item-selected {
+        background-color: var(--themeColor10);
+        color: var(--themeColor);
+      }
+    }
   }
 }
 </style>

theme/theme.scss

@@ -11,6 +11,7 @@
     --importantColor: #E6521F; // 重要色
     --themeColor: #2772F0; // 主题色
     --themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
+    --themeColor10: rgba(39, 114, 240, 0.1);//主题色10%
     --navbarBgColor: #FFFFFF; // 导航背景
 
     --defaultUserAvatar: url("/static/img/default-user.png") no-repeat center / 100%;
@@ -30,6 +31,7 @@
     --importantColor: #E6521F;
     --themeColor: #2772F0;
     --themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
+    --themeColor10: rgba(39, 114, 240, 0.1);//主题色10%
     --navbarBgColor: #1D1D1D;
 
     --defaultUserAvatar: url("/static/img/default-user-dark.png") no-repeat center / 100%;