取件单列表添加状态tab

src/pages/pickup/waybillPickUpOrder.vue

@@ -8,6 +8,37 @@
         <uni-icons fontFamily="iconFont" size="16" color="#999999">{{ '\ue8b7' }}</uni-icons>
       </view>
     </view>
+    <!-- 状态选项 -->
+    <view class="center-cut-menu">
+      <scroll-view
+        :scroll-x="true"
+        :scroll-with-animation="true"
+        :show-scrollbar="false"
+        class="scroll-view"
+        :scroll-left="scrollLeft"
+      >
+        <view class="scroll-item">
+          <view
+            class="scroll-item"
+            v-for="(item, index) in statusItems"
+            :key="item.id"
+            @tap="changeMenu(index)"
+          >
+            <text class="item-text" :class="activeIndex == index ? 'active' : ''">{{
+              item.title
+            }}</text>
+          </view>
+          <!-- <text
+            v-for="(item, index) in StatusItems"
+            :key="item.id"
+            class="text"
+            :class="{ active: index === activeIndex }"
+            @tap="activeIndex = index"
+            >{{ item.title }}</text
+          > -->
+        </view>
+      </scroll-view>
+    </view>
     <!-- 列表 -->
     <scroll-view enable-back-to-top scroll-y class="scroll-view" @scrolltolower="onScrolltolower">
       <view class="orders">
@@ -68,10 +99,13 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app'
 import { checkPermission } from '@/utils'
 import { waybillPickUpOrders } from '@/services/waybillPickUpOrder'
+import type { StatusItem } from '@/types/waybillPickUp'
+import { getCurrentInstance } from 'vue'
+
 let sendOutURL = ''
 let deliveredURL = ''
 let refuseURL = ''
@@ -92,6 +126,74 @@ const params = reactive({
   limit: 10,
 })
 
+const scrollLeft = ref(0)
+const contentScrollW = ref(0)
+const activeIndex = ref(0)
+const statusItems = ref<StatusItem[]>([
+  {
+    id: 1,
+    title: '全部',
+    value: 0,
+  },
+  {
+    id: 2,
+    title: '待取件',
+    value: 2,
+  },
+  {
+    id: 3,
+    title: '取件中',
+    value: 3,
+  },
+  {
+    id: 4,
+    title: '部分取件',
+    value: 4,
+  },
+  {
+    id: 5,
+    title: '全部取件',
+    value: 5,
+  },
+  {
+    id: 6,
+    title: '部分投递',
+    value: 6,
+  },
+  {
+    id: 7,
+    title: '全部投递',
+    value: 7,
+  },
+])
+
+// 选择标题
+const changeMenu = (index: number) => {
+  activeIndex.value = index
+
+  // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
+  // scrollLeft.value = index * statusItems.value[index].width
+
+  // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
+  // scrollLeft.value = 0;
+  // for (let i = 0; i < index; i++) {
+  //     scrollLeft.value += statusItems.value[i].width
+  // };
+
+  // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
+  // scrollLeft.value = (index - 1)  * statusItems.value[index].width
+
+  // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
+  // scrollLeft.value = 0;
+  // for (let i = 0; i < index - 1; i++) {
+  //  scrollLeft.value += statusItems.value[i].width
+  // };
+
+  // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
+  scrollLeft.value =
+    statusItems.value[index].left - contentScrollW.value / 2 + statusItems.value[index].width / 2
+}
+
 const resetForm = () => {}
 const confirmForm = () => {
   showRightRef.value.close()
@@ -332,6 +434,9 @@ const getList = async () => {
 onLoad(() => {
   getList()
 })
+onMounted(() => {
+  getScrollW()
+})
 onNavigationBarButtonTap((event) => {
   if (event.index === 0) {
     scanInput()
@@ -339,6 +444,34 @@ onNavigationBarButtonTap((event) => {
   }
 })
 
+// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
+const getScrollW = () => {
+  const instance = getCurrentInstance()
+  const query = uni.createSelectorQuery().in(instance!.proxy)
+  query
+    .select('.scroll-view')
+    .boundingClientRect((data: any) => {
+      console.log('1+++', data)
+      // 拿到 scroll-view 组件宽度
+      contentScrollW.value = data.width
+    })
+    .exec()
+
+  query
+    .selectAll('.scroll-item')
+    .boundingClientRect((data: any) => {
+      console.log('2+++', data)
+      let dataLen = data.length
+      for (let i = 0; i < dataLen; i++) {
+        //  scroll-view 子元素组件距离左边栏的距离
+        statusItems.value[i].left = data[i].left
+        //  scroll-view 子元素组件宽度
+        statusItems.value[i].width = data[i].width
+      }
+    })
+    .exec()
+}
+
 // 滚动触底
 const onScrolltolower = async () => {
   // 分页条件
@@ -406,6 +539,34 @@ page {
 .scroll-view {
   flex: 1;
 }
+.center-cut-menu {
+  width: 100%;
+  height: 100rpx;
+  line-height: 90rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+  color: #333;
+  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
+  .scroll-view {
+    height: 100rpx;
+    white-space: nowrap;
+
+    .scroll-item {
+      height: 100rpx;
+      padding: 0 20rpx;
+      display: inline-block;
+      text-align: center;
+
+      .item-text {
+        font-size: 28rpx;
+        line-height: 100rpx;
+        &.active {
+          color: #1468ff;
+        }
+      }
+    }
+  }
+}
 .orders {
   display: flex;
   flex-direction: column;

src/types/waybillPickUp.d.ts

@@ -0,0 +1,8 @@
+/** 状态选项 */
+export type StatusItem = {
+  id: number
+  title: string
+  value: number
+  left: number
+  width: number
+}