init
This commit is contained in:
shuhongfan
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view v-if="tabIndex === 1">
|
||||
<view v-if="itemData.length > 0">
|
||||
<scroll-view scroll-y="true">
|
||||
<!-- 列表内容 -->
|
||||
<view v-for="(item, index) in itemData" :key="index" class="expressage">
|
||||
<view class="checkbox" v-if="isAdmin">
|
||||
<view class="checkRadio"><radio :value="String(index)" :class="item.selected === true ? 'active' : ''" :checked="item.selected" @click="checkbox(index)" /></view>
|
||||
</view>
|
||||
<view class="boxBg" :class="isAdmin ? 'adminActive' : ''">
|
||||
<view class="tabList">
|
||||
<view class="item" @click="handleDetails($event, item)">
|
||||
<view class="titInfo">运单号：{{ item.transportOrderId }}</view>
|
||||
<view class="address">收件人：{{ item.name }}</view>
|
||||
<view class="address">派件地址：{{ item.address }}</view>
|
||||
<view class="address">签收时间：{{ item.taskTime }}</view>
|
||||
<view class="time" v-if="item.amount > 0 && item.status === 2">运费：{{ item.amount }}元</view>
|
||||
<text
|
||||
@click.stop="handleDetails($event, item)"
|
||||
class="delete"
|
||||
v-if="item.status === 2 && item.paymentStatus === 1 && item.paymentMethod === 2 && item.signStatus !== 2"
|
||||
>
|
||||
<button class="uni-btn btn-default">去收款</button>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 上拉 -->
|
||||
<ReachBottom ref="loadMore"></ReachBottom>
|
||||
<!-- end -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 空页面 -->
|
||||
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
import { getTimeDate } from '@/utils/index.js';
|
||||
import { useStore } from 'vuex';
|
||||
//接口
|
||||
import { getDeliveryList, getSearch } from '@/pages/api/index.js';
|
||||
// 下拉提示
|
||||
import ReachBottom from '@/components/reach-bottom/index.vue';
|
||||
//空页面
|
||||
import EmptyPage from '@/components/uni-empty-page/index.vue';
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
// 当前高度
|
||||
// 是否触发管理按钮
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// // 搜索分页
|
||||
searchInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
|
||||
let itemData = ref([]);//列表数据
|
||||
let reload = ref(false);//数据加载
|
||||
let pages = ref(0);//总页数
|
||||
let pageNum = ref(1);//当前页
|
||||
let selected = reactive(new Map());
|
||||
const emptyData = ref('暂无数据');//空页面提示
|
||||
let page = reactive({
|
||||
latitude: users.loacation.latitude !== undefined ? users.loacation.latitude : 40.062595,
|
||||
longitude: users.loacation.longitude !== undefined ? users.loacation.longitude : 116.372809,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
orderDistance: null,
|
||||
orderTime: null,
|
||||
filterOverTime: null,
|
||||
dateTime: getTimeDate(new Date()).veryDayDate,
|
||||
taskStatus: 5
|
||||
});
|
||||
let searchPage = reactive({
|
||||
latitude: users.loacation.latitude !== undefined ? users.loacation.latitude : 40.062595,
|
||||
longitude: users.loacation.longitude !== undefined ? users.loacation.longitude : 116.372809,
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 上下拉取
|
||||
onReachBottom(() => {
|
||||
if (pageNum.value >= pages.value) {
|
||||
loadMore.value.status = 'noMore';
|
||||
return false;
|
||||
} else {
|
||||
loadMore.value.status = 'loading';
|
||||
let times = setTimeout(() => {
|
||||
pageNum.value++;
|
||||
if (props.searchInfo.keyword) {
|
||||
getSearchList();
|
||||
} else {
|
||||
getList();
|
||||
}
|
||||
}, 1000); //这里延时一秒在加载方法有个loading效果
|
||||
}
|
||||
});
|
||||
// 计算是否全选或者单选
|
||||
watch(users, (newValue, oldValue) => {
|
||||
if (users.selectTaskData.size > 0) {
|
||||
for (let [key, value] of users.selectTaskData) {
|
||||
itemData.value.forEach(element => {
|
||||
if (value === element.id) {
|
||||
element.selected = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
itemData.value.forEach(element => {
|
||||
element.selected = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
// ------生命周期------
|
||||
// ------定义方法------
|
||||
// 获取数据
|
||||
const getList = async () => {
|
||||
reload.value = true;
|
||||
// 是否触发了搜索清空
|
||||
if (users.isSearchClear) {
|
||||
pageNum.value = 1;
|
||||
store.commit('user/setSearchClear', false);
|
||||
}
|
||||
page = {
|
||||
...page,
|
||||
page: pageNum.value,
|
||||
orderDistance: users.orderDistance,
|
||||
orderTime: users.orderTime,
|
||||
filterOverTime: users.filterOverTime
|
||||
};
|
||||
await getDeliveryList(page).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
reload.value = false;
|
||||
if (users.deliveryData.length === 0) {
|
||||
itemData.value = [];
|
||||
}
|
||||
// 触发tab切换
|
||||
// 如果触发了tab切换或者触发了搜索清空
|
||||
if (users.istabChange || users.isSearchClear) {
|
||||
itemData.value = res.data.items;
|
||||
store.commit('user/setIstabChange', false);
|
||||
} else {
|
||||
itemData.value = itemData.value.concat(res.data.items);
|
||||
}
|
||||
pages.value = res.data.pages;
|
||||
// 存储列表数据
|
||||
store.commit('user/setDeliveryData', itemData.value);
|
||||
if (Number(res.data.pages) === pageNum.value) {
|
||||
loadMore.value.status = 'noMore';
|
||||
}
|
||||
} else {
|
||||
itemData.value = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 搜索数据
|
||||
const getSearchList = async () => {
|
||||
reload.value = true;
|
||||
let valNum = 0;
|
||||
if (!users.isInput) {
|
||||
valNum = 1;
|
||||
pageNum.value = 1;
|
||||
store.commit('user/setIsFiltrate', false);
|
||||
}
|
||||
searchPage = {
|
||||
...searchPage,
|
||||
keyword: props.searchInfo.keyword,
|
||||
status: props.searchInfo.status,
|
||||
taskType: props.searchInfo.taskType,
|
||||
page: valNum ? 1 : pageNum.value
|
||||
};
|
||||
// 后端接口调用
|
||||
await getSearch(searchPage).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
reload.value = false;
|
||||
if (users.deliveryData.length === 0) {
|
||||
itemData.value = [];
|
||||
}
|
||||
if (users.istabChange || !users.isInput) {
|
||||
itemData.value = res.data.items;
|
||||
store.commit('user/setIstabChange', false);
|
||||
} else {
|
||||
itemData.value = itemData.value.concat(res.data.items);
|
||||
}
|
||||
|
||||
pages.value = res.data.pages;
|
||||
// 存储列表数据
|
||||
store.commit('user/setDeliveryData', itemData.value);
|
||||
if (Number(res.data.pages) === pageNum.value) {
|
||||
loadMore.value.status = 'noMore';
|
||||
}
|
||||
} else {
|
||||
itemData.value = [];
|
||||
}
|
||||
// 有搜索数据的时候隐藏最近查询标题和清除按钮
|
||||
if (itemData.value.length > 0) {
|
||||
isClear.value = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSelected = array => {
|
||||
selected.value = array;
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = index => {
|
||||
emit('checkbox', index);
|
||||
};
|
||||
// 已签收详情
|
||||
const handleDetails = (e, item) => {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
// 把任务id用vuex的方法存储，方便其他页面调用
|
||||
store.commit('user/setTaskId', item.id);
|
||||
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
|
||||
store.commit('user/setTaskType', 2);
|
||||
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
|
||||
store.commit('user/setTaskStatus', 5);
|
||||
store.commit('user/setNewType', null);
|
||||
if (item.status === 2 && item.paymentStatus === 1 && item.paymentMethod === 2 && item.signStatus !== 2) {
|
||||
// 未付款进入付款二维码页面
|
||||
store.commit('user/setIsDelivery', true);
|
||||
store.commit('user/setPayData', {});
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/scanPay'
|
||||
});
|
||||
} else {
|
||||
// 进入详情页
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/waybill'
|
||||
});
|
||||
}
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
getList,
|
||||
getSearchList
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<view v-if="tabIndex === 0">
|
||||
<view v-if="itemData.length > 0">
|
||||
<scroll-view scroll-y="true">
|
||||
<!-- 列表内容 -->
|
||||
<view v-for="(item, index) in itemData" :key="index" class="expressage">
|
||||
<view class="checkbox" v-if="isAdmin">
|
||||
<view class="checkRadio"><radio :value="String(index)" :class="item.selected === true ? 'active' : ''" :checked="item.selected" @click="checkbox(index)" /></view>
|
||||
</view>
|
||||
|
||||
<view class="boxBg" :class="isAdmin ? 'adminActive' : ''">
|
||||
<view class="tabList">
|
||||
<view class="item" @click.stop="handleDetails($event, item.id)">
|
||||
<view class="titInfo">
|
||||
<view>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
{{ item.phone }}
|
||||
<icon class="phone" @click.stop="handlePhone($event, item.phone)"></icon>
|
||||
<icon class="note" @click.stop="handleNote"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">{{ item.address }}</view>
|
||||
<view class="address">{{ item.distance }}公里</view>
|
||||
<view class="time">运单号：{{ item.transportOrderId }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- 上拉 -->
|
||||
<ReachBottom ref="loadMore"></ReachBottom>
|
||||
<!-- end -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 空页面 -->
|
||||
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
|
||||
<!-- end -->
|
||||
<!-- 拨打电话弹层 -->
|
||||
<Phone ref="phone" :phoneData="phoneData"></Phone>
|
||||
<!-- end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
import { getTimeDate } from '@/utils/index.js';
|
||||
import { useStore } from 'vuex';
|
||||
//接口
|
||||
import { getDeliveryList, getSearch } from '@/pages/api/index.js';
|
||||
// 下拉提示
|
||||
import ReachBottom from '@/components/reach-bottom/index.vue';
|
||||
//空页面
|
||||
import EmptyPage from '@/components/uni-empty-page/index.vue';
|
||||
import Phone from '@/components/uni-phone/index.vue';
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
// 当前触发的tab值
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否触发管理按钮
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// // 搜索分页
|
||||
searchInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const users = store.state.user;
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
|
||||
const phone = ref();
|
||||
let itemData = ref([]);//列表数据
|
||||
let reload = ref(false);//数据加载
|
||||
let pages = ref(0); //总页数
|
||||
let pageNum = users.isFiltrate ? 1 : ref(1); //存放当前页
|
||||
let selected = reactive(new Map());
|
||||
const emptyData = ref('暂无数据');//空页面提示
|
||||
const phoneData = ref('');
|
||||
let page = reactive({
|
||||
latitude: users.loacation.latitude !== undefined ? users.loacation.latitude : 40.062595,
|
||||
longitude: users.loacation.longitude !== undefined ? users.loacation.longitude : 116.372809,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
orderDistance: null,
|
||||
orderTime: null,
|
||||
filterOverTime: null,
|
||||
dateTime: getTimeDate(new Date()).veryDayDate,
|
||||
taskStatus: 4
|
||||
});
|
||||
let searchPage = reactive({
|
||||
latitude: users.loacation.latitude !== undefined ? users.loacation.latitude : 40.062595,
|
||||
longitude: users.loacation.longitude !== undefined ? users.loacation.longitude : 116.372809,
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
// 上下拉取
|
||||
onReachBottom(() => {
|
||||
store.commit('user/setIsInput', true); //是否在文本框里输入了文字
|
||||
if (pageNum.value >= Number(pages.value)) {
|
||||
loadMore.value.status = 'noMore';
|
||||
return false;
|
||||
} else {
|
||||
loadMore.value.status = 'loading';
|
||||
let times = setTimeout(() => {
|
||||
pageNum.value++;
|
||||
if (props.searchInfo.keyword) {
|
||||
getSearchList();
|
||||
} else {
|
||||
getList();
|
||||
}
|
||||
}, 1000); //这里延时一秒在加载方法有个loading效果
|
||||
}
|
||||
});
|
||||
|
||||
// ------生命周期------
|
||||
// 计算是否全选或者单选
|
||||
watch(users, (newValue, oldValue) => {
|
||||
if (users.selectTaskData.size > 0) {
|
||||
for (let [key, value] of users.selectTaskData) {
|
||||
itemData.value.forEach(element => {
|
||||
if (value === element.id) {
|
||||
element.selected = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
itemData.value.forEach(element => {
|
||||
element.selected = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
// ------定义方法------
|
||||
// 获取数据
|
||||
const getList = async () => {
|
||||
reload.value = true;
|
||||
//判断是否进行了距离、时间、超时任务筛选，如果是，当前页设为第一页，上拉的数值设为1，便于第二次上拉
|
||||
let valNum = 0;
|
||||
if (users.isFiltrate || users.isSearchClear) {
|
||||
valNum = 1;
|
||||
pageNum.value = 1;
|
||||
// 如果触发了距离、时间、超时筛选
|
||||
if (users.isFiltrate) {
|
||||
store.commit('user/setIsFiltrate', false);
|
||||
}
|
||||
// 是否触发了搜索清空
|
||||
if (users.isSearchClear) {
|
||||
store.commit('user/setSearchClear', false);
|
||||
}
|
||||
}
|
||||
page = {
|
||||
...page,
|
||||
page: valNum ? 1 : pageNum.value,
|
||||
orderDistance: users.orderDistance,
|
||||
orderTime: users.orderTime,
|
||||
filterOverTime: users.filterOverTime
|
||||
};
|
||||
|
||||
await getDeliveryList(page).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
reload.value = false;
|
||||
|
||||
if (users.deliveryData.length === 0 || users.isFiltrate) {
|
||||
itemData.value = [];
|
||||
}
|
||||
// 触发tab切换
|
||||
// 如果触发了tab切换或者触发了搜索清空
|
||||
if (users.istabChange || users.isSearchClear) {
|
||||
itemData.value = res.data.items;
|
||||
store.commit('user/setIstabChange', false);
|
||||
} else {
|
||||
itemData.value = itemData.value.concat(res.data.items);
|
||||
}
|
||||
pages.value = res.data.pages;
|
||||
// 存储列表数据
|
||||
store.commit('user/setDeliveryData', itemData.value);
|
||||
if (Number(res.data.pages) === pageNum.value) {
|
||||
loadMore.value.status = 'noMore';
|
||||
}
|
||||
} else {
|
||||
itemData.value = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 搜索数据
|
||||
const getSearchList = async () => {
|
||||
reload.value = true;
|
||||
let valNum = 0;
|
||||
if (!users.isInput) {
|
||||
valNum = 1;
|
||||
pageNum.value = 1;
|
||||
store.commit('user/setIsFiltrate', false);
|
||||
}
|
||||
searchPage = {
|
||||
...searchPage,
|
||||
keyword: props.searchInfo.keyword,
|
||||
status: props.searchInfo.status,
|
||||
taskType: props.searchInfo.taskType,
|
||||
page: valNum ? 1 : pageNum.value
|
||||
};
|
||||
// 后端接口调用
|
||||
await getSearch(searchPage).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
reload.value = false;
|
||||
if (users.deliveryData.length === 0) {
|
||||
itemData.value = [];
|
||||
}
|
||||
if (users.istabChange || !users.isInput) {
|
||||
itemData.value = res.data.items;
|
||||
store.commit('user/setIstabChange', false);
|
||||
} else {
|
||||
itemData.value = itemData.value.concat(res.data.items);
|
||||
}
|
||||
|
||||
pages.value = res.data.pages;
|
||||
// 存储列表数据
|
||||
store.commit('user/setDeliveryData', itemData.value);
|
||||
if (Number(res.data.pages) === pageNum.value) {
|
||||
loadMore.value.status = 'noMore';
|
||||
}
|
||||
} else {
|
||||
itemData.value = [];
|
||||
}
|
||||
// 有搜索数据的时候隐藏最近查询标题和清除按钮
|
||||
if (itemData.value.length > 0) {
|
||||
isClear.value = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取多选或者单选的数据
|
||||
const getSelected = array => {
|
||||
selected.value = array;
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = index => {
|
||||
emit('checkbox', index);
|
||||
};
|
||||
// 去派件详情
|
||||
const handleDetails = (e, id) => {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
// 把任务id用vuex的方法存储，方便其他页面调用
|
||||
store.commit('user/setTaskId', id);
|
||||
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
|
||||
store.commit('user/setTaskType', 2);
|
||||
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
|
||||
store.commit('user/setTaskStatus', 4);
|
||||
store.commit('user/setNewType', null);
|
||||
// 进入详情页
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/waybill'
|
||||
});
|
||||
};
|
||||
// 拨打电话弹层
|
||||
const handlePhone = (e, val) => {
|
||||
e.stopPropagation();
|
||||
phoneData.value = val;
|
||||
phone.value.dialogOpen();
|
||||
};
|
||||
// 发短信
|
||||
const handleNote = () => {
|
||||
uni.showToast({
|
||||
title: '程序员哥哥正在实现中',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({ getList, getSearchList });
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<!-- 待派件 -->
|
||||
<DealParcel ref="dealparcel" :tabIndex="tabIndex" :isAdmin="isAdmin" @checkbox="checkbox" @getSelected="getSelected" :searchInfo="searchInfo"></DealParcel>
|
||||
<!-- end -->
|
||||
<!-- 已签收 -->
|
||||
<AlreadyParcel ref="already" :tabIndex="tabIndex" :isAdmin="isAdmin" @checkbox="checkbox" :searchInfo="searchInfo"></AlreadyParcel>
|
||||
<!-- end -->
|
||||
<!-- 提示窗示例 -->
|
||||
<UniPopup ref="popup" :tipInfo="tipInfo" @handleClick="handleClick"></UniPopup>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { getTimeDate } from '@/utils/index.js';
|
||||
import { useStore } from 'vuex';
|
||||
//接口
|
||||
import { getDeliveryList, taskDelete } from '@/pages/api/index.js';
|
||||
// 导入组件
|
||||
// 待派件
|
||||
import DealParcel from './components/dealParcel.vue';
|
||||
// 已签收
|
||||
import AlreadyParcel from './components/alreadyParcel.vue';
|
||||
// 弹层
|
||||
import UniPopup from '@/components/uni-popup/index.vue';
|
||||
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
// tab切换数据
|
||||
tabBars: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否触发管理按钮
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 获取当前筛选的距离升序还是降序
|
||||
orderDistance: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 获取当前筛选的时间升序还是降序
|
||||
orderTime: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 获取当前筛选超时
|
||||
filterOverTime: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const store = useStore(); //设置、获取储存的数据
|
||||
const users = store.state.user;
|
||||
let popup = ref();
|
||||
let dealparcel = ref();
|
||||
let already = ref();
|
||||
let cancel = ref();
|
||||
const tipInfo = ref('确定要删除吗？');
|
||||
let taskId = ref('');
|
||||
let scrollH = ref(0); //滚动高度
|
||||
let searchInfo = reactive({
|
||||
keyword:null,
|
||||
status:null,
|
||||
taskType:null
|
||||
});
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
// 获取屏幕信息
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
scrollH.value = res.windowHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
// ------定义方法------
|
||||
// 获取初始值
|
||||
const init = () => {
|
||||
};
|
||||
// 获取已经选的任务
|
||||
const getSelected=(array)=>{
|
||||
emit('getSelected',array)
|
||||
}
|
||||
// 获取待派件列表方法
|
||||
const dealPList =()=>{
|
||||
dealparcel.value.getList()
|
||||
}
|
||||
// 搜索待派件列表方法
|
||||
const dealSearchList = () => {
|
||||
dealparcel.value.getSearchList();
|
||||
};
|
||||
// 获取已签收列表方法
|
||||
const alreadList =()=>{
|
||||
already.value.getList()
|
||||
}
|
||||
// 搜索已签收列表方法
|
||||
const alreadSearchList = () => {
|
||||
already.value.getSearchList();
|
||||
};
|
||||
// 确认删除
|
||||
const handleClick = async () => {
|
||||
await taskDelete(taskId.value)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
dealparcel.value.getList()
|
||||
return uni.showToast({
|
||||
title: '删除成功!',
|
||||
duration: 1000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
//左右滑动tab切换
|
||||
const onChangeSwiperTab = e => {
|
||||
emit('onChangeSwiperTab', e);
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = index => {
|
||||
emit('checkbox', index);
|
||||
};
|
||||
// 删除弹层id
|
||||
const handleOpen = id => {
|
||||
popup.value.dialogOpen();
|
||||
taskId.value = id;
|
||||
};
|
||||
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
dealPList,
|
||||
dealSearchList,
|
||||
alreadList,
|
||||
alreadSearchList,
|
||||
searchInfo
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
.expressage {
|
||||
.tabScroll {
|
||||
.scroll-row-item {
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
240
project-wl-kuaidiyuan-uniapp-vue3/pages/delivery/index.vue
Normal file
240
project-wl-kuaidiyuan-uniapp-vue3/pages/delivery/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!-- 派件页面 -->
|
||||
<template>
|
||||
<!-- 搜索nav -->
|
||||
<SearchPage
|
||||
@handleSearch="handleSearch"
|
||||
ref="search"
|
||||
@clearSearchData="clearSearchData"
|
||||
></SearchPage>
|
||||
<!-- end -->
|
||||
<view>
|
||||
<!-- tab切换 -->
|
||||
<UniTab
|
||||
:tabBars="tabBars"
|
||||
ref="tab"
|
||||
@getTabIndex="getTabIndex"
|
||||
class="pickupTab"
|
||||
></UniTab>
|
||||
<!-- end -->
|
||||
<!-- 筛选 -->
|
||||
<ListFiltrate
|
||||
v-if="tabIndex === 0"
|
||||
@getList="getList"
|
||||
class="pickupFilrate"
|
||||
></ListFiltrate>
|
||||
<!-- end -->
|
||||
<!-- 取件状态列表 -->
|
||||
<view
|
||||
:class="tabIndex === 0 ? 'pickupBoxTop' : 'pickupTop'"
|
||||
style="padding: 0 0 200rpx 0"
|
||||
>
|
||||
<TabList
|
||||
:tabBars="tabBars"
|
||||
:tabIndex="tabIndex"
|
||||
:isAdmin="isAdmin"
|
||||
@onChangeSwiperTab="onChangeSwiperTab"
|
||||
@checkbox="checkbox"
|
||||
ref="list"
|
||||
></TabList>
|
||||
</view>
|
||||
<!-- end -->
|
||||
</view>
|
||||
<!-- 底部管理 单选\转单\打印\删除 -->
|
||||
<!-- 派件后期会加功能,所以这块代码先不删除 -->
|
||||
<ExpressageFoot
|
||||
ref="expressageFoot"
|
||||
@getAdmin="getAdmin"
|
||||
:isAdmin="isAdmin"
|
||||
:isDelivery="isDelivery"
|
||||
:selected="selected"
|
||||
:tabIndex="tabIndex"
|
||||
@allSelect="allSelect"
|
||||
@handleClick="handleClick"
|
||||
></ExpressageFoot>
|
||||
<!-- end -->
|
||||
<!-- footer -->
|
||||
<UniFooter :pagePath="'pages/delivery/index'"></UniFooter>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// 基本数据
|
||||
import { PickUpData } from "@/utils/commonData.js";
|
||||
// 接口api
|
||||
import { taskBatchDelete } from "@/pages/api/index.js";
|
||||
// 导入组件
|
||||
// 导航
|
||||
// 搜索组件
|
||||
import SearchPage from "@/components/uni-search/index.vue";
|
||||
// 底部导航
|
||||
import UniFooter from "@/components/uni-footer/index.vue";
|
||||
// tab切换
|
||||
import UniTab from "@/components/uni-tab/index.vue";
|
||||
// 筛选
|
||||
import ListFiltrate from "@/components/uni-list-filtrate/index.vue";
|
||||
// 底部管理全选组件
|
||||
import ExpressageFoot from "@/components/uni-expressage-foot/index.vue";
|
||||
// list
|
||||
import TabList from "./components/list.vue";
|
||||
// ------定义变量------
|
||||
const store = useStore();
|
||||
const users = store.state.user;
|
||||
const emit = defineEmits(""); //子组件向父组件事件传递
|
||||
const tab = ref();
|
||||
const list = ref();
|
||||
const search = ref(); //定义搜索ref
|
||||
const expressageFoot = ref();
|
||||
const tabBars = PickUpData;
|
||||
let tabIndex = ref(0); //当前tab
|
||||
let isDelivery = ref(true);
|
||||
let isAdmin = ref(false); //是否触发管理按钮
|
||||
// 存储已选内容， 因为这个列表是增删很频繁的，所以选用map而不是数组，key对应的是数据的下标。至于value存放什么，完全由自己定
|
||||
let selected = reactive(new Map());
|
||||
// ------生命周期------
|
||||
onMounted(() => {
|
||||
if (users.tabIndex) {
|
||||
tabIndex.value = users.tabIndex;
|
||||
}
|
||||
if (users.tabIndex === 0) {
|
||||
list.value.dealPList();
|
||||
} else {
|
||||
list.value.alreadList();
|
||||
}
|
||||
});
|
||||
|
||||
// ------定义方法------
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
list.value.searchInfo.taskType = 2;
|
||||
list.value.searchInfo.keyword = search.value.searchVal;
|
||||
store.commit("user/setIsInput", false); //是否在文本框里输入了文字，默认false
|
||||
store.commit("user/setDeliveryData", []);
|
||||
if (tabIndex.value === 0) {
|
||||
list.value.searchInfo.status = 1;
|
||||
list.value.dealSearchList();
|
||||
} else {
|
||||
list.value.searchInfo.status = 2;
|
||||
list.value.alreadSearchList();
|
||||
}
|
||||
};
|
||||
// 批量删除
|
||||
const handleClick = async () => {
|
||||
const ids = [];
|
||||
// 要批量删除的id
|
||||
for (const [key, value] of selected) {
|
||||
ids.push(value);
|
||||
}
|
||||
|
||||
await taskBatchDelete({ idList: ids }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
list.value.alreadList();
|
||||
// 存储列表数据
|
||||
store.commit("user/setDeliveryData", []);
|
||||
// 总页数清空
|
||||
store.commit("user/setPages", 0);
|
||||
store.commit("user/setSelectTaskData", new Map());
|
||||
selected.clear();
|
||||
// expressageFoot.value.isAdmin = false
|
||||
isAdmin.value = false;
|
||||
return uni.showToast({
|
||||
title: "删除成功!",
|
||||
duration: 1000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 清除搜索
|
||||
const clearSearchData = () => {
|
||||
store.commit("user/setIsInput", true);
|
||||
store.commit("user/setDeliveryData", []); //清空列表数据
|
||||
store.commit("user/setSearchText", ""); //清空搜索框内容
|
||||
store.commit("user/setSearchClear", true); //是否清空搜索框
|
||||
list.value.searchInfo.keyword = ""; //清空搜索框内容
|
||||
// 总页数清空
|
||||
store.commit("user/setPages", 0);
|
||||
if (tabIndex.value === 0) {
|
||||
list.value.dealPList();
|
||||
} else {
|
||||
list.value.alreadList();
|
||||
}
|
||||
};
|
||||
// 获取tab切换当前的index
|
||||
const getTabIndex = (index) => {
|
||||
tabIndex.value = index;
|
||||
|
||||
// 存储列表数据
|
||||
store.commit("user/setDeliveryData", []);
|
||||
// 总页数清空
|
||||
store.commit("user/setPages", 0);
|
||||
store.commit("user/setSelectTaskData", new Map());
|
||||
store.commit("user/setFilterOverTime", null);
|
||||
store.commit("user/setIsFiltrate", false);
|
||||
search.value.searchVal = "";
|
||||
store.commit("user/setSearchText", ""); //清空搜索框内容
|
||||
store.commit("user/setSearchClear", true); //是否清空搜索框
|
||||
selected.clear();
|
||||
// 修改底部管理按钮状态
|
||||
isAdmin.value = false;
|
||||
// 根据不同的tab值切更新 取件数据
|
||||
if (index === 0) {
|
||||
list.value.dealPList();
|
||||
} else {
|
||||
list.value.alreadList();
|
||||
}
|
||||
};
|
||||
// 触发选项卡事件
|
||||
const onChangeSwiperTab = (e) => {
|
||||
tab.value.changeTab(e.detail.current);
|
||||
};
|
||||
// 获取foot底部组件的管理按钮触发值，向列表页传递，全选，单选用
|
||||
const getAdmin = (val) => {
|
||||
isAdmin.value = val;
|
||||
};
|
||||
// 给筛选组件传递，刷新列表
|
||||
const getList = () => {
|
||||
list.value.dealPList();
|
||||
};
|
||||
// 全选与反选事件
|
||||
const allSelect = () => {
|
||||
// 已经全选情况下，就是反选，全选就说明长度一样
|
||||
let itemData = users.deliveryData;
|
||||
if (selected.size === itemData.length) {
|
||||
selected.clear(); // 全部清除
|
||||
itemData.forEach((element) => {
|
||||
element.selected = false; // 全部不选，就行了
|
||||
});
|
||||
}
|
||||
// 还未全选的状态下
|
||||
else {
|
||||
itemData.forEach((element, index) => {
|
||||
// 因为可能存在部分已经选择了，所以得先判断是否已存在，不存在才需要添加
|
||||
if (!selected.has(index)) {
|
||||
selected.set(index, element.id); // key是对应的下标index，而value是可以自定义的
|
||||
element.selected = true; // 设为选中
|
||||
}
|
||||
});
|
||||
}
|
||||
emit("getSelected", selected);
|
||||
store.commit("user/setSelectTaskData", selected);
|
||||
};
|
||||
// 选项框点击事件，参数是数据的下标
|
||||
const checkbox = (index) => {
|
||||
// 选中的状态下再次点击，即为取消选中
|
||||
let itemData = users.deliveryData;
|
||||
if (itemData[index].selected) {
|
||||
itemData[index].selected = false;
|
||||
selected.delete(index); // 然后删除对应key即可
|
||||
}
|
||||
// 未选中状态下点击
|
||||
else {
|
||||
itemData[index].selected = true;
|
||||
selected.set(index, itemData[index].id);
|
||||
}
|
||||
store.commit("user/setSelectTaskData", selected);
|
||||
};
|
||||
</script>
|
||||
<style src="../../styles/expressage.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user