|
@@ -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;
|