expressageInfo.vue
5.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<template>
<view>
<scroll-view
scroll-x="true"
class="tabScroll"
:scroll-into-view="scrollinto"
:scroll-with-animation="true"
>
<view
v-for="(item, index) in tabBars"
:key="index"
:id="'tab' + index"
class="scroll-row-item"
@click="changeTab(index)"
>
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''">
<text class="line"></text>
{{ item.name }}
<text class="num">{{ item.num }}</text>
</view>
</view>
</scroll-view>
<view class="homeSwiper">
<view v-if="tabIndex === 0 || tabIndex === 1">
<view v-if="itemData.length > 0">
<view
class="boxBg"
v-for="(item, index) in itemData.slice(0, 3)"
:key="index"
v-if="tabIndex === 0"
>
<view class="tabList">
<view class="item" @click.stop="handleDetail(item.id)">
<view class="titInfo">
{{ item.name }}
<text>{{ item.phone }}</text>
<icon
class="phone"
@click.stop="handlePhone($event, item.phone)"
></icon>
<icon class="note" @click.stop="handleNote"></icon>
</view>
<view class="address">{{ item.address }}</view>
<view class="distance">{{ item.distance }}公里</view>
<view class="time"
>预约取件时间：{{
taskTimeFormat(item.estimatedStartTime)
}}
至 {{ overTimeFormat(item.estimatedEndTime) }}</view
>
</view>
</view>
</view>
<!-- 待派件 -->
<view
class="boxBg"
v-for="(item, index) in itemData.slice(0, 3)"
:key="index"
v-if="tabIndex === 1"
>
<view class="tabList">
<view class="item" @click.stop="handleDetail(item.id)">
<view class="titInfo">
{{ item.name }}
<text>{{ item.phone }}</text>
<icon
class="phone"
@click.stop="handlePhone($event, item.phone)"
></icon>
<icon class="note" @click.stop="handleNote"></icon>
</view>
<view class="address">{{ item.address }}</view>
<view class="address">{{ item.distance }}公里</view>
<view class="time">运单号：{{ item.transportOrderId }}</view>
</view>
</view>
</view>
</view>
<view class="moreInfo" v-if="itemData.length > 3" @click="handleMore">
查看更多
<icon></icon>
</view>
</view>
<!-- 无数据显示 -->
<view v-if="itemData.length === 0"
><EmptyPage :emptyInfo="emptyInfo"></EmptyPage
></view>
<!-- end -->
</view>
<!-- 拨打手机弹层 -->
<Phone ref="phone" :phoneData="phoneData"></Phone>
<!-- end -->
</view>
</template>
<script setup>
import {ref} from "vue";
import {useStore} from "vuex";
// 处理事件封装的方法
import {overTimeFormat, taskTimeFormat} from "@/utils/index.js";
//组件
// 无数据
import EmptyPage from "@/components/uni-empty-page/index.vue";
import Phone from "@/components/uni-phone/index.vue";
// 获取父组件值、方法
const props = defineProps({
itemData: {
type: Array,
default: () => [],
},
tabBars: {
type: Array,
default: () => [],
},
});
// ------定义变量------
const store = useStore(); //设置、获取数据
let scrollinto = ref("tab0"); //tab切换
let tabIndex = ref(0); //当前tab
const phone = ref();
const emptyInfo = ref("- 空空如也，无运单记录 -");
const emit = defineEmits("getTabIndex");
const phoneData = ref("");
// ------定义方法------
// tab选项卡切换轮播
const changeTab = (index) => {
// 点击的还是当前数据的时候直接return
if (tabIndex.value == index) {
return;
}
tabIndex.value = index;
emit("getTabIndex", index);
// 滑动
scrollinto.value = "tab" + index;
};
// 触发选项卡事件
const onChangeSwiperTab = (e) => {
changeTab(e.detail.current);
};
// 进入详情
const handleDetail = (id) => {
// 把任务id用vuex的方法存储，方便其他页面调用
store.commit("user/setTaskId", id);
store.commit("user/setNewType", null);
// 进入取件详情页
if (tabIndex.value === 0) {
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
store.commit("user/setTaskType", 1);
store.commit("user/setDetailType", 0);
store.commit("setFootStatus", 1); //修改底部tab当前标签
uni.redirectTo({
url: "/pages/details/index",
});
} else {
// 进入派件详情页
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
store.commit("user/setTaskType", 2);
store.commit("user/setDetailType", 0);
store.commit("setFootStatus", 3); //修改底部tab当前标签
uni.redirectTo({
url: "/pages/details/waybill",
});
}
};
// 进入待取件待派件页面
const handleMore = () => {
if (tabIndex.value === 0) {
uni.redirectTo({
url: "/pages/pickup/index",
});
} else {
uni.redirectTo({
url: "/pages/delivery/index",
});
}
};
// 拨打电话弹层
const handlePhone = (e, val) => {
// 阻止事件冒泡
e.stopPropagation();
phoneData.value = val;
phone.value.dialogOpen();
};
// 发短信
const handleNote = () => {
uni.showToast({
title: "程序员哥哥正在实现中",
duration: 1000,
icon: "none",
});
};
</script>
<style src="../index.scss" lang="scss"></style>