init
This commit is contained in:
shuhongfan
@@ -0,0 +1,263 @@
|
||||
<!--已取件-->
|
||||
<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">
|
||||
<!-- 父组件传递过来的isAdmi来控制是否显示多选框 -->
|
||||
<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>
|
||||
<!-- end -->
|
||||
<view class="boxBg" :class="isAdmin ? 'adminActive' : ''">
|
||||
<view class="tabList">
|
||||
<view class="item" @click="handleDetails($event, item)">
|
||||
<view class="titInfo">订单号：SD{{ item.orderId }}</view>
|
||||
<view class="address">寄件人：{{ item.name }}</view>
|
||||
<view class="address">取件地址：{{ item.address }}</view>
|
||||
<view class="time">取件时间：{{ item.taskTime }}</view>
|
||||
<view class="time" v-if="item.amount > 0 && item.status === 2 && item.paymentMethod === 1">运费：{{ item.amount }}元</view>
|
||||
<text @click.stop="handleDetails($event, item)" class="delete" v-if="item.status === 2 && item.paymentStatus === 1 && item.paymentMethod === 1">
|
||||
<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, 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';
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
// 当前高度
|
||||
// 是否触发管理按钮
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 是否触发管理按钮，此处是用来控制是否显示多选框
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// // 搜索分页
|
||||
searchInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const users = store.state.user;
|
||||
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: 2
|
||||
});
|
||||
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 >= 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', 1);
|
||||
|
||||
store.commit('user/setDetailType', 2); //从已取件跳入订单详情
|
||||
if (item.status === 2 && item.paymentStatus === 1 && item.paymentMethod === 1) {
|
||||
// 未付款进入付款二维码页面
|
||||
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
|
||||
store.commit('user/setTaskStatus', 3);
|
||||
store.commit('user/setPayData', {});
|
||||
uni.redirectTo({
|
||||
url: '/pages/pay/scanPay'
|
||||
});
|
||||
} else {
|
||||
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
|
||||
store.commit('user/setTaskStatus', 2);
|
||||
// 进入详情页
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/waybill'
|
||||
});
|
||||
}
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
getList,
|
||||
getSearchList
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view v-if="tabIndex === 2">
|
||||
<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 cancelList">
|
||||
<view class="item" @click.stop="handleDetails($event, item.id)">
|
||||
<view>寄件人：{{ item.name }}</view>
|
||||
<view>取件地址：{{ item.address }}</view>
|
||||
<view>取消原因：{{ item.cancelReason }}</view>
|
||||
<view>原因描述：{{ item.cancelReasonDescription }}</view>
|
||||
<text @click.stop="handleOpen($event, item.id)" class="delete"><button class="uni-btn concelBtn">删除</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, 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';
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 是否触发管理按钮
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// // 搜索分页
|
||||
searchInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||||
const users = store.state.user;
|
||||
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: 3
|
||||
});
|
||||
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 >= 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 handleOpen = (e, id) => {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
emit('handleOpen', id);
|
||||
};
|
||||
// 取消详情页
|
||||
const handleDetails = (e, id) => {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
// 把任务id用vuex的方法存储，方便其他页面调用
|
||||
store.commit('user/setTaskId', id);
|
||||
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
|
||||
store.commit('user/setTaskType', 1);
|
||||
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||||
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
|
||||
store.commit('user/setTaskStatus', 3);
|
||||
// 进入详情页
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/waybill'
|
||||
});
|
||||
};
|
||||
//把数据、方法暴漏给父组件
|
||||
defineExpose({
|
||||
getList,
|
||||
getSearchList
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,299 @@
|
||||
<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">
|
||||
<!-- 父组件传递过来的isAdmi来控制是否显示多选框 -->
|
||||
<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>
|
||||
<!-- end -->
|
||||
<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">预约取件时间：{{ taskTimeFormat(item.estimatedStartTime) }} 至 {{ overTimeFormat(item.estimatedEndTime) }}</view>
|
||||
<text @click.stop="handleCancel($event, item.id)" class="delete"><button class="uni-btn concelBtn">取消</button></text>
|
||||
</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, onMounted } from 'vue';
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
import { getTimeDate } from '@/utils/index.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { taskTimeFormat, overTimeFormat } from '@/utils/index.js';
|
||||
//接口
|
||||
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: () => ({})
|
||||
},
|
||||
isInput: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
// ------定义变量------
|
||||
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: 1
|
||||
});
|
||||
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
|
||||
});
|
||||
onMounted(() => {});
|
||||
// 上下拉取
|
||||
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) {
|
||||
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) => {
|
||||
// 把任务id用vuex的方法存储，方便其他页面调用
|
||||
store.commit('user/setTaskId', id);
|
||||
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
|
||||
store.commit('user/setTaskType', 1);
|
||||
store.commit('user/setIsBack', '');
|
||||
store.commit('user/setDetailType', 2); //从待取件跳入订单详情
|
||||
e.stopPropagation();
|
||||
// 进入详情页
|
||||
uni.redirectTo({
|
||||
url: '/pages/details/index'
|
||||
});
|
||||
};
|
||||
// 取消
|
||||
const handleCancel = (e, id) => {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
// 把任务id用vuex的方法存储，方便其他页面调用
|
||||
store.commit('user/setTaskId', id);
|
||||
// 进入订单取消申请页
|
||||
uni.redirectTo({
|
||||
url: '/pages/cancel/index'
|
||||
});
|
||||
};
|
||||
// 拨打电话弹层
|
||||
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,171 @@
|
||||
<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 -->
|
||||
<!-- 已取消 -->
|
||||
<CancelParcel
|
||||
:tabIndex="tabIndex"
|
||||
ref="cancel"
|
||||
:isAdmin="isAdmin"
|
||||
@checkbox="checkbox"
|
||||
@handleOpen="handleOpen"
|
||||
:searchInfo="searchInfo"
|
||||
></CancelParcel>
|
||||
<!-- end -->
|
||||
<!-- 提示窗 -->
|
||||
<UniPopup
|
||||
ref="popup"
|
||||
:tipInfo="tipInfo"
|
||||
@handleClick="handleClick"
|
||||
></UniPopup>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
//接口
|
||||
import { taskDelete } from "@/pages/api/index.js";
|
||||
// 导入组件
|
||||
// 待取件
|
||||
import DealParcel from "./components/dealParcel.vue";
|
||||
// 已取件
|
||||
import AlreadyParcel from "./components/alreadyParcel.vue";
|
||||
// 已取消
|
||||
import CancelParcel from "./components/cancelParcel.vue";
|
||||
// 弹层
|
||||
import UniPopup from "@/components/uni-popup/index.vue";
|
||||
|
||||
// 获取父组件数据
|
||||
const props = defineProps({
|
||||
// tab切换数据
|
||||
tabBars: {
|
||||
type: Array,
|
||||
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 searchInfo = reactive({
|
||||
keyword: null,
|
||||
status: null,
|
||||
taskType: null,
|
||||
});
|
||||
// ------生命周期------
|
||||
// ------定义方法------
|
||||
// 获取已经选的任务
|
||||
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 cancelList = () => {
|
||||
cancel.value.getList();
|
||||
};
|
||||
// 搜索取消件列表方法
|
||||
const cancelSearchList = () => {
|
||||
cancel.value.getSearchList();
|
||||
};
|
||||
// 确认删除
|
||||
const handleClick = async () => {
|
||||
await taskDelete(taskId.value).then((res) => {
|
||||
if (res.code === 200) {
|
||||
store.commit("user/setDeliveryData", []);
|
||||
cancel.value.getList();
|
||||
store.commit("user/setIsDelete", true);
|
||||
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,
|
||||
cancelList,
|
||||
cancelSearchList,
|
||||
searchInfo,
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
.expressage {
|
||||
.tabScroll {
|
||||
.scroll-row-item {
|
||||
margin-right: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
237
project-wl-kuaidiyuan-uniapp-vue3/pages/pickup/index.vue
Normal file
237
project-wl-kuaidiyuan-uniapp-vue3/pages/pickup/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<!-- 取件页面 -->
|
||||
<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"
|
||||
:isInput="isInput"
|
||||
ref="list"
|
||||
></TabList>
|
||||
</view>
|
||||
|
||||
<!-- end -->
|
||||
</view>
|
||||
<ExpressageFoot
|
||||
ref="expressageFoot"
|
||||
@getAdmin="getAdmin"
|
||||
:isAdmin="isAdmin"
|
||||
:selected="selected"
|
||||
:tabIndex="tabIndex"
|
||||
@allSelect="allSelect"
|
||||
@handleClick="handleClick"
|
||||
></ExpressageFoot>
|
||||
<!-- footer -->
|
||||
<UniFooter :pagePath="'pages/delivery/index'"></UniFooter>
|
||||
<!-- end -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// 基本数据
|
||||
import { DeliveryData } from "@/utils/commonData.js";
|
||||
// 接口api
|
||||
import { taskBatchDelete } from "@/pages/api/index.js";
|
||||
// 导入组件
|
||||
// 导航
|
||||
import UniNav from "@/components/uni-nav/index.vue";
|
||||
// 搜索组件
|
||||
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(); //定义列表 ref
|
||||
const search = ref(); //定义搜索 ref
|
||||
const tabBars = DeliveryData;
|
||||
let tabIndex = ref(0); //当前tab
|
||||
let isInput = ref(false); //是否触发了输入框
|
||||
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 if (users.tabIndex === 1) {
|
||||
list.value.alreadList();
|
||||
} else {
|
||||
list.value.cancelList();
|
||||
}
|
||||
});
|
||||
|
||||
// ------定义方法------
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
list.value.searchInfo.taskType = 1;
|
||||
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 if (tabIndex.value === 1) {
|
||||
list.value.searchInfo.status = 2;
|
||||
list.value.alreadSearchList();
|
||||
} else {
|
||||
list.value.searchInfo.status = 3;
|
||||
list.value.cancelSearchList();
|
||||
}
|
||||
};
|
||||
// 批量删除
|
||||
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.cancelList();
|
||||
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 if (tabIndex.value === 1) {
|
||||
list.value.alreadList();
|
||||
} else {
|
||||
list.value.cancelList();
|
||||
}
|
||||
};
|
||||
// 获取tab切换当前的index
|
||||
const getTabIndex = (index) => {
|
||||
store.commit("user/setFilterOverTime", null);
|
||||
search.value.searchVal = "";
|
||||
store.commit("user/setSearchText", ""); //清空搜索框内容
|
||||
store.commit("user/setSearchClear", true); //是否清空搜索框
|
||||
tabIndex.value = index;
|
||||
// 根据不同的tab值切更新 取件数据
|
||||
if (index === 0) {
|
||||
list.value.dealPList();
|
||||
} else if (index === 1) {
|
||||
list.value.alreadList();
|
||||
} else {
|
||||
list.value.cancelList();
|
||||
}
|
||||
selected.clear();
|
||||
// 修改底部管理按钮状态，因为取件、派件公用了一个底部管理组件，因此切换tab的时候先把isAdmin设置成false，以防数据混搅。
|
||||
isAdmin.value = false;
|
||||
// 存储列表数据
|
||||
store.commit("user/setDeliveryData", []);
|
||||
// 总页数清空
|
||||
store.commit("user/setPages", 0);
|
||||
store.commit("user/setSelectTaskData", new Map());
|
||||
};
|
||||
// 触发选项卡事件
|
||||
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>
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user