austin
/
staff
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接单

This commit is contained in:
张文涛 2025-03-06 23:30:25 +08:00
parent dd7e2d5845
commit 2314d15847
5 changed files with 469 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
api/ticket.ts
View File

@ -1,5 +1,8 @@
import { get, post, put, del } from '../utils/request';
// 工单池列表接口
export const ticketPoolList = (data : any = {}) => get('v1/ticket/pool/list', data);
// 工单详情（工单池）
export const ticketPoolInfo = (data : any = {}) => get('v1/ticket/pool/info', data);
// export const bannerList = (data : any = {}) => get('v2/banner/list', data);
// 接单接口
export const ticketAccept = (data : any = {}) => get('v1/ticket/accept', data);

383
pagesA/task_hall/detail.vue
View File

@ -21,24 +21,25 @@
<view class="li-flex li-items-start li-justify-between bg-#f9f9f9">
<view class="li-mb-20">
<view class="li-flex li-items-center li-text-#5f5f5f li-pl-20 li-pt-20 li-text-28 li-mb-12">
<text class="ri-todo-line li-mr-3"></text>
<text>{{ticketInfo.ticket_no}}</text>
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
<text class="ri-file-list-line li-mr-3"></text>
<text>{{ticketInfo?.ticket_no}}</text>
<text class="ri-file-copy-line li-text-#009aff li-ml-15" @click="copyTicketNo"></text>
</view>
<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;{{ticketInfo.create_time}}</text>
<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;{{ticketInfo?.create_time}}</text>
</view>
<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6"
:style="{ color: getStatusColor(ticketInfo.status), backgroundColor: getStatusBgColor(ticketInfo.status) }">
<view v-if="ticketInfo?.status !== undefined" class="status-tag li-text-28 li-px-40 li-py-6"
:class="['status-' + ticketInfo.status]">
{{getStatusText(ticketInfo.status)}}
</view>
</view>
<view class="li-flex li-items-start li-pt-20 li-pl-20">
<!-- <view class="ri-checkbox-circle-fill li-text-#009aff li-mr-12 li-text-40 li-pt-2"></view> -->
<!-- <text class="ri-close-circle-fill li-text-#ff0000"></text> -->
<text class="ri-error-warning-fill li-text-#ff9d00 li-mr-12 li-text-40 li-pt-2"></text>
<text v-if="ticketInfo?.status !== undefined" :class="getStatusIcon(ticketInfo.status)"
class="li-mr-12 li-text-40 li-pt-2"></text>
<view class="li-flex li-flex-col">
<text class="li-text-32">{{getStatusText(ticketInfo.status)}}</text>
<text class="li-text-28">工单待处理，点击按钮确认接单</text>
<text
class="li-text-32">{{ticketInfo?.status !== undefined ? getStatusText(ticketInfo.status) : ''}}</text>
<text
class="li-text-28 li-text-#666">{{ticketInfo?.status !== undefined ? getStatusDescription(ticketInfo.status) : ''}}</text>
</view>
</view>
</view>
@ -48,51 +49,81 @@
<view class="li-pl-30 li-pr-30 li-mt-30">
<view class="li-flex li-items-center li-justify-between li-text-28">
<text class="li-w-150 li-text-#9a9a9a">业主姓名</text>
<text class="li-w-400 li-single-line li-text-right">{{ticketInfo.order.name}}</text>
<text class="li-w-400 li-single-line li-text-right">{{ticketInfo?.order?.name}}</text>
</view>
<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">联系方式</text>
<text class="li-w-150 li-text-#9a9a9a">联系方式</text>
<view class="li-flex li-items-center li-w-400 li-single-line justify-between">
<!-- 左侧留空 -->
<view></view>
<!-- 右侧内容 -->
<view class="li-flex li-items-center">
<view @click="callNumber" class="li-flex li-items-center">
<text class="ri-phone-line li-text-#009aff li-mr-6"></text>
<text>{{ticketInfo.order.mobile}}</text>
<text>{{ticketInfo?.order?.mobile}}</text>
</view>
</view>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<view v-if="ticketInfo?.type =='F4'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">上门地址</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.region_name}}{{ticketInfo.order.cell_name}}{{ticketInfo.order.house_name}}{{ticketInfo.order.address}}</text>
<text
class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<view v-if="ticketInfo?.type =='F4'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">预约时间</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.appoint_date}} {{ticketInfo.order.appoint_time}}</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.appoint_date}}
{{ticketInfo?.order?.appoint_time}}</text>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<view v-if="ticketInfo?.type =='F4'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">建筑面积</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.building_area}}</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.building_area}}</text>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<view v-if="ticketInfo?.type =='F4'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">订单状态</text>
<text v-if="ticketInfo.order.status == 0" class="li-w-400 li-two-line li-text-right">已提交</text>
<text v-if="ticketInfo.order.status == 1" class="li-w-400 li-two-line li-text-right">已完成</text>
<text v-if="ticketInfo.order.status == 2" class="li-w-400 li-two-line li-text-right">已取消</text>
<view class="li-w-400 li-text-right">
<text :class="['info-tag', 'status-' + ticketInfo?.order?.status]">
{{getOrderStatusText(ticketInfo?.order?.status)}}
</text>
</view>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">上传照片</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.images}}</text>
<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">工单备注</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.remark}}</text>
</view>
<view v-if="ticketInfo.type =='F2'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">配送地址</text>
<text class="li-w-400 li-two-line li-text-right">中金北区17号楼一单元201室号</text>
<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">工单类型</text>
<view class="li-w-400 li-text-right">
<text v-if="ticketInfo?.type === 'F2'" class="info-tag type-delivery">商品</text>
<text v-if="ticketInfo?.type === 'F4'" class="info-tag type-measure">量房</text>
<text v-if="ticketInfo?.type === 'F6'" class="info-tag type-repair">维修</text>
</view>
</view>
<view v-if="ticketInfo.type =='F2'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">商品备注</text>
<text class="li-w-400 li-two-line li-text-right">放在门口即可</text>
<view v-if="ticketInfo?.type =='F4' || ticketInfo?.type =='F6'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">附件上传</text>
<view class="li-flex li-flex-col li-w-400 justify-end">
<view class="li-flex justify-between li-items-center li-mt-20">
<!-- 左侧留空 -->
<view></view>
<!-- 右侧内容 -->
<view class="li-flex li-items-center">
<image class="li-w-110 li-h-110 li-rd-10" src="../../static/logo.png" mode="">
</image>
<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/logo.png" mode="">
</image>
</view>
</view>
</view>
</view>
<view v-if="ticketInfo.type =='F3'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<view v-if="ticketInfo?.type =='F2'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">商品信息</text>
<view class="li-flex li-flex-col li-w-400 justify-end">
<text class="li-two-line li-text-right">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
@ -110,15 +141,15 @@
</view>
</view>
</view>
<view v-if="ticketInfo.type =='F4'" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">订单备注</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo.order.remark}}</text>
</view>
</view>
</view>
<view class="li-w-85% li-mx-auto li-mt-90">
<wd-button loading block custom-class="custom-shadow">&nbsp;接单</wd-button>
<wd-button @click="sumbit" :loading="bntloading" block custom-class="custom-shadow">&nbsp;接单</wd-button>
</view>
<wd-toast />
<zero-loading type="wobble" v-if="loading"></zero-loading>
</view>
</template>
@ -126,54 +157,102 @@
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation'
import {ticketPoolInfo} from '@/api/ticket'
import { ticketPoolInfo, ticketAccept } from '@/api/ticket'
import { useToast } from '@/uni_modules/wot-design-uni'
import { throttle } from '@/utils/common'
const Toast = useToast()
const loading = ref<boolean>(false)
const bntloading = ref<boolean>(false)
const ticketInfo = ref<any>({
ticket_no: '',
create_time: '',
status: undefined,
type: '',
order: {
name: '',
mobile: '',
region_name: '',
cell_name: '',
house_name: '',
address: '',
appoint_date: '',
appoint_time: '',
building_area: '',
status: 0,
images: '',
remark: ''
}
})
// 使用导航 composable
const {
hasMultiplePages, // 是否有多个页面在路由栈中
isTabBarPage, // 当前页面是否为 tabBar 页面
checkRouteStack // 检查当前路由栈状态的方法
hasMultiplePages,
isTabBarPage,
checkRouteStack
} = useNavigation()
onLoad(() => {
onLoad((q) => {
checkRouteStack()
if (q.ticket_id) {
loadInfo(q.ticket_id)
}
})
// 状态颜色配置
const getStatusColor = (status : number) => {
const colorMap = {
0: '#ff9d00', // 待配送
1: '#37A5FF', // 未入库
2: '#00b42a', // 已完成
3: '#F42429' // 已取消
const loadInfo = async (ticket_id : string) => {
try {
loading.value = true
const res = await ticketPoolInfo({ ticket_id })
if (res.data) {
ticketInfo.value = {
...ticketInfo.value,
...res.data
}
}
} catch (error) {
Toast.error('加载失败，请重试')
console.error('加载工单信息失败:', error)
} finally {
loading.value = false
}
return colorMap[status] || '#666666'
}
// 状态背景色配置
const getStatusBgColor = (status : number) => {
const bgColorMap = {
0: '#fff6e9', // 待配送
1: '#e8f4ff', // 未入库
2: '#e8ffea', // 已完成
3: '#ffe8e8' // 已取消
}
return bgColorMap[status] || '#f5f5f5'
// 复制工单号
const copyTicketNo = () => {
if (!ticketInfo.value?.ticket_no) return
uni.setClipboardData({
data: ticketInfo.value.ticket_no,
showToast: false,
success: () => {
Toast.success('工单号已复制')
}
})
}
// 状态文字配置
const getStatusText = (status : number) => {
const textMap = {
0: '待接单',
1: '已派单',
2: '已完成',
3: '已取消'
}
return textMap[status] || '未知状态'
const callNumber = () => {
uni.makePhoneCall({
phoneNumber: ticketInfo.value.order.mobile
});
}
var ticketInfo = ref()
const sumbit = throttle(async () => {
bntloading.value = true
var res = await ticketAccept({ ticket_id: ticketInfo.value.ticket_id })
bntloading.value = false
if (res.code == 200) {
Toast.success('已接单')
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 500)
}
}, 500)
const toPages = (item : any) => {
console.log(item);
switch (item.type) {
case 'nav':
uni.navigateBack({
@ -191,17 +270,81 @@
}
const handleAction = (action : string) => {
console.log(action);
// 状态配置
const statusConfig = {
0: {
color: '#1890ff',
bgColor: '#f0f9ff',
icon: 'ri-time-line',
text: '待接单',
description: '工单待处理，点击按钮确认接单'
},
1: {
color: '#1890ff',
bgColor: '#f0f9ff',
icon: 'ri-truck-line',
text: '已派单',
description: '工单已分配，请及时处理'
},
2: {
color: '#52c41a',
bgColor: '#f0fff5',
icon: 'ri-checkbox-circle-line',
text: '已完成',
description: '工单已完成处理'
},
3: {
color: '#8c8c8c',
bgColor: '#f5f5f5',
icon: 'ri-close-circle-line',
text: '已取消',
description: '工单已取消'
}
}
onLoad((q)=>{
loadInfo(q.ticket_id)
})
const loadInfo = async (ticket_id: any) => {
const res = await ticketPoolInfo({ticket_id: ticket_id})
ticketInfo.value = res.data
// 订单状态配置
const orderStatusConfig = {
0: { text: '已提交', color: '#ff9d00', bgColor: '#fff7e6' },
1: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
2: { text: '已取消', color: '#8c8c8c', bgColor: '#fafafa' }
}
// 工单类型配置
const typeConfig = {
F2: { text: '配送', color: '#1890ff', bgColor: '#f0f7ff' },
F4: { text: '量房', color: '#722ed1', bgColor: '#f9f0ff' },
F6: { text: '维修', color: '#13c2c2', bgColor: '#f0fafa' }
}
// 获取状态颜色
const getStatusColor = (status : number) => {
return statusConfig[status]?.color || '#666666'
}
// 获取状态背景色
const getStatusBgColor = (status : number) => {
return statusConfig[status]?.bgColor || '#f5f5f5'
}
// 获取状态文字
const getStatusText = (status : number) => {
return statusConfig[status]?.text || '未知状态'
}
// 获取状态图标
const getStatusIcon = (status : number) => {
return `${statusConfig[status]?.icon} li-text-${getStatusColor(status).substring(1)}`
}
// 获取状态描述
const getStatusDescription = (status : number) => {
return statusConfig[status]?.description || '状态未知'
}
// 获取订单状态文字
const getOrderStatusText = (status : number) => {
return orderStatusConfig[status]?.text || '未知状态'
}
</script>
@ -241,19 +384,87 @@
transition: all 0.3s ease;
}
.status-tag {
border-radius: 0 0 0 25rpx;
&.status-0 {
color: #1890ff;
background-color: #f0f9ff;
}
&.status-1 {
color: #1890ff;
background-color: #f0f9ff;
}
&.status-2 {
color: #52c41a;
background-color: #f0fff5;
}
&.status-3 {
color: #8c8c8c;
background-color: #f5f5f5;
}
}
.info-tag {
display: inline-block;
padding: 4rpx 16rpx;
font-size: 24rpx;
border-radius: 4rpx;
&.type-delivery {
color: #1890ff;
background-color: #f0f7ff;
border: 1px solid #e6f4ff;
}
&.type-measure {
color: #722ed1;
background-color: #f9f0ff;
border: 1px solid #f4e6ff;
}
&.type-repair {
color: #13c2c2;
background-color: #f0fafa;
border: 1px solid #e6f7f7;
}
&.status-0 {
color: #ff9d00;
background-color: #fff7e6;
border: 1px solid #ffedc7;
}
&.status-1 {
color: #52c41a;
background-color: #f6ffed;
border: 1px solid #e8ffd1;
}
&.status-2 {
color: #8c8c8c;
background-color: #fafafa;
border: 1px solid #f0f0f0;
}
}
::v-deep .wd-button {
width: 160rpx !important;
height: 65rpx !important;
min-width: 160rpx !important;
}
.custom-shadow {
height: 85rpx !important;
font-size: 32rpx !important;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
background-color: #2EA1EA !important;
width: 100% !important;
display: flex!important;
align-items: center!important;
justify-content: center!important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
</style>

106
pagesA/task_hall/list.vue
View File

@ -14,20 +14,24 @@
</wd-drop-menu>
</view>
<!-- list -->
<view class="li-w-92% li-mx-auto">
<view class="li-w-92% li-mx-auto li-pb-30">
<view v-for="(item, index) in taskList" :key="index" @click="toPages({type:'detail',value:item})"
class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
<view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
<text class="li-text-28">工单编号:&nbsp;&nbsp;{{item.ticket_no}}</text>
<view class="li-flex li-items-center">
<text class="ri-bookmark-3-line li-text-32 li-text-#9a9a9a"></text>
<text v-if="item.type=='F2'" class="li-text-26 li-text-#323232 li-ml-6">商城</text>
<text v-if="item.type=='F6'" class="li-text-26 li-text-#323232 li-ml-6">维修</text>
<text v-if="item.type=='F4'" class="li-text-26 li-text-#323232 li-ml-6">量房</text>
<view class="li-text-28 li-flex li-items-center">
<text class="ri-file-list-line li-mr-10"></text>
<text>{{item.ticket_no}}</text>
</view>
<view class="task-type-tag li-flex li-items-center">
<view :class="['type-badge', `type-${item.type.toLowerCase()}`]">
<text :class="taskTypes[item.type].icon" class="li-text-32"></text>
<text class="li-text-24 li-ml-6">{{getTaskTypeName(item.type)}}</text>
</view>
</view>
</view>
<view>
<view v-if="item.type == 'F4'" class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<view v-if="item.type == 'F4'"
class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<text class="li-text-#9a9a9a">预约时间</text>
<text>{{item.order.appoint_date}} {{item.order.appoint_time}}</text>
</view>
@ -67,7 +71,8 @@
</view>
<view class="li-flex li-items-center">
<wd-button custom-class="custom-shadow" size="small">&emsp;详情&emsp;</wd-button>
<wd-button custom-class="custom-shadow1" size="small">&emsp;接单&emsp;</wd-button>
<wd-button @click.stop="sumbit(item.ticket_id)" custom-class="custom-shadow1"
size="small">&emsp;接单&emsp;</wd-button>
</view>
</view>
</view>
@ -75,6 +80,7 @@
<view v-if="taskList.length==0" class="!li-mt-300">
<wd-status-tip image="search" tip="暂无待处理工单" />
</view>
<wd-toast />
<zero-loading type="wobble" v-if="loading"></zero-loading>
</view>
</template>
@ -82,10 +88,12 @@
<script setup lang="ts">
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
import { ref } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation'
import { ticketPoolList } from '@/api/ticket'
import { ticketPoolList, ticketAccept } from '@/api/ticket'
import { useToast } from '@/uni_modules/wot-design-uni'
import { throttle } from '@/utils/common'
const Toast = useToast()
// 使用导航 composable
const {
hasMultiplePages, // 是否有多个页面在路由栈中
@ -97,9 +105,15 @@
onLoad(() => {
checkRouteStack()
})
onShow(() => {
query.value.page = 1
taskList.value = []
poolList()
})
onPullDownRefresh(() => {
query.value.page = 1
taskList.value = []
@ -153,7 +167,7 @@
break;
case 'detail':
uni.navigateTo({
url: '/pagesA/task_hall/detail?ticket_id='+item.value.ticket_id
url: '/pagesA/task_hall/detail?ticket_id=' + item.value.ticket_id
})
break;
default:
@ -174,6 +188,46 @@
poolList()
}
const sumbit = throttle(async (ticket_id : number) => {
loading.value = true
var res = await ticketAccept({ ticket_id: ticket_id })
loading.value = false
if (res.code == 200) {
Toast.success('已接单')
query.value.page = 1
taskList.value = []
poolList()
}
}, 500)
// 工单类型配置
const taskTypes = {
F2: {
name: '商品',
bgColor: '#e6f7ff',
textColor: '#1890ff',
icon: 'ri-shopping-bag-3-line'
},
F6: {
name: '维修',
bgColor: '#e6fffb',
textColor: '#13c2c2',
icon: 'ri-tools-line'
},
F4: {
name: '量房',
bgColor: '#f9f0ff',
textColor: '#722ed1',
icon: 'ri-ruler-2-line'
}
}
// 获取工单类型名称
const getTaskTypeName = (type : string) => {
return taskTypes[type]?.name || '其他'
}
const poolList = async () => {
loading.value = true
const res = await ticketPoolList(query.value)
@ -226,7 +280,7 @@
.custom-shadow {
color: #009aff !important;
background: linear-gradient(to right, #FFFFFF, #FFFFFF) !important;
border:solid 1px #009aff !important;
border: solid 1px #009aff !important;
}
.custom-shadow1 {
@ -252,4 +306,28 @@
::v-deep.space {
padding: 2rpx 10rpx !important;
}
.task-type-tag {
.type-badge {
display: flex;
align-items: center;
padding: 4rpx 16rpx;
border-radius: 8rpx;
&.type-f2 {
background-color: #e6f7ff;
color: #1890ff;
}
&.type-f6 {
background-color: #e6fffb;
color: #13c2c2;
}
&.type-f4 {
background-color: #f9f0ff;
color: #722ed1;
}
}
}
</style>

3
unocss/a-hua-unocss/index.scss
View File

@ -1,6 +1,3 @@
.li-text-35{font-size:35rpx}
.li-text-46{font-size:46rpx}

77
utils/common.ts
View File

@ -220,4 +220,79 @@ md5加密
*/
export const md5 = (data: String) => {
return CryptoJS.MD5(data).toString()
}
}
/**
* 节流函数：规定时间内只执行一次
* @param fn 需要执行的函数
* @param delay 延迟时间(ms)
* @returns 节流后的函数
*
* // 使用示例
import { throttle } from '@/utils/common'
// 在setup中使用
const handleClick = throttle(() => {
// 你的业务逻辑
console.log('点击事件被触发')
}, 500)
// 在模板中使用
<button @click="handleClick">点击</button>
*/
export const throttle = (fn: Function, delay: number = 500): Function => {
let timer: number | null = null;
let lastTime: number = 0;
return function (this: any, ...args: any[]) {
const currentTime = Date.now();
if (!lastTime) {
lastTime = currentTime;
}
if (currentTime - lastTime >= delay) {
fn.apply(this, args);
lastTime = currentTime;
} else {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
}, delay - (currentTime - lastTime));
}
};
};
/**
* 防抖函数：在一定时间内，多次触发同一个函数，只执行最后一次
* @param fn 需要执行的函数
* @param delay 延迟时间(ms)
* @returns 防抖后的函数
*
* // 使用示例
import { debounce } from '@/utils/common'
// 在setup中使用
const handleSearch = debounce((value: string) => {
// 你的搜索逻辑
console.log('搜索:', value)
}, 300)
// 在模板中使用
<input @input="handleSearch" />
*/
export const debounce = (fn: Function, delay: number = 500): Function => {
let timer: number | null = null;
return function (this: any, ...args: any[]) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};