109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<!-- 取件页面 -->
|
||
<template>
|
||
<view class="pickup">
|
||
<!-- 搜索nav -->
|
||
<SearchPage @handleSearch="handleSearch"></SearchPage>
|
||
<!-- end -->
|
||
<view class="boxTop" :style="{'paddingTop':capsuleBottom +'px'}">
|
||
<!-- tab切换 -->
|
||
<UniTab :tabBars="tabBars" ref="tab" @getTabIndex="getTabIndex" :staticNum="staticNum.data"></UniTab>
|
||
</view>
|
||
<!-- 运单列表 -->
|
||
<OrderList ref='orderListRef' :serchValue="serchValue" @stopRefresh="stopRefreshFunc"></OrderList>
|
||
</view>
|
||
<!-- end -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app';
|
||
|
||
// 基本数据
|
||
import {
|
||
DeliveryData
|
||
} from '@/utils/commonData.js';
|
||
import {
|
||
getGoodsNum
|
||
} from '@/pages/api/order.js'
|
||
// 导入组件
|
||
// 搜索组件
|
||
import SearchPage from '@/components/uni-search/index.vue';
|
||
// tab切换
|
||
import UniTab from '@/components/uni-tab/index.vue';
|
||
//运单列表
|
||
import OrderList from './components/orderList';
|
||
// 筛选
|
||
|
||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||
const tab = ref();
|
||
const tabBars = DeliveryData;
|
||
let tabIndex = ref(0); //当前tab
|
||
let staticNum = reactive({
|
||
data: [0, 0]
|
||
})
|
||
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定
|
||
let selected = reactive(new Map());
|
||
let orderListRef = ref() //列表组件引用
|
||
//设备栏高度
|
||
let deviceNavHeight = ref()
|
||
//胶囊顶部距离头部的距离
|
||
let capsuleTop = ref()
|
||
//胶囊底部距离头部的距离
|
||
let capsuleBottom = ref()
|
||
//导航栏高度
|
||
let all = ref()
|
||
//胶囊高度
|
||
let capsuleHeight = ref()
|
||
let serchValue = ref()//头部搜索栏的关键字
|
||
// ------生命周期------
|
||
onShow(() => {
|
||
getStaticNum()
|
||
orderListRef.value && getTabIndex(tabIndex.value)
|
||
});
|
||
onLoad(() => {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
deviceNavHeight.value = res.statusBarHeight
|
||
capsuleTop.value = uni.getMenuButtonBoundingClientRect().top
|
||
capsuleBottom.value = uni.getMenuButtonBoundingClientRect().bottom
|
||
all.value = (capsuleTop.value + capsuleBottom.value - deviceNavHeight.value) + 'px'
|
||
capsuleHeight.value = uni.getMenuButtonBoundingClientRect().height
|
||
|
||
}
|
||
})
|
||
})
|
||
// ------定义方法------
|
||
|
||
// 搜索
|
||
const handleSearch = (index) => {
|
||
serchValue.value = index.value
|
||
orderListRef.value.indexGetOrderListFunc({
|
||
keyword: index.value
|
||
}) //触发子组件获取列表数据的方法
|
||
};
|
||
// 获取寄件和收件的数量
|
||
const getStaticNum = () => {
|
||
getGoodsNum().then((res) => {
|
||
if(res.code === 200){
|
||
staticNum.data = [res.data['1'],res.data['2']]
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取tab切换当前的index
|
||
const getTabIndex = index => {
|
||
tabIndex.value = index
|
||
orderListRef.value.indexGetOrderListFunc({
|
||
mailType: index + 1,
|
||
}) //触发子组件获取列表数据的方法
|
||
};
|
||
</script>
|
||
<style src="../../styles/expressage.scss" lang="scss" scoped></style>
|
||
<style src="./index.scss" lang="scss" scoped></style>
|