封装hook函数【便于复用】

一般函数 封装

普通的删除逻辑封装函数—子组件点击删除–通过 defineEm i ts 通知父组件（自定义事件）进行删除

const deleteLoading = ref(false)
const emits = defineEmits&lt;{
  (e: 'click-delete', id: string): void
}&gt;()
const deleteConsultOrder = async (item: ConsultOrderItem) =&gt; {
  try {
    deleteLoading.value = true
    await deleteOrder(item.id)
    showSuccessToast('删除成功')
    emits('click-delete', item.id)
  } catch (error) {
    showFailToast('删除失败')
  } finally {
    deleteLoading.value = false
  }
}

父组件ConsultItem.vue

<div class="foot" v-if="item.status === OrderType.ConsultComplete">
      <consult-more :disabled="!item.prescriptionId" @on-delete="deleteConsultOrder(item)"
        @on-preview="onShowPrescription(item.prescriptionId)">
      </consult-more>
</div>

子组件ConsultMore.vue

<template>
  <div class="more">
    <van-popover placement="top-start" v-model:show="showPopover" :actions="actions" @select="onSelect">
      <template #reference> 更多 </template> </van-popover>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { showConfirmDialog } from 'vant'

const props = defineProps<{
  disabled: boolean
}>()
const showPopover = ref(false)
const actions = computed(() => [
  { text: '查看处方', disabled: props.disabled },
  { text: '删除订单' },
])

const emit = defineEmits<{
  (e: 'on-delete'): void
  (e: 'on-preview'): void
}>()

const onSelect = (actions: { text: string }, index: number) => {
  console.log(index, 9090);
  if (index === 0) {
    emit('on-preview')
  }
  if (index === 1) {
    emit('on-delete')
  }
};
</script>

封装 hook 函数

src/composable/index.ts

①封装hook 函数
 模板：

// 封装逻辑，规范 useXxx，表示使用某功能
export const useFollow = (cb: () => void) => {
const xxx = () => {}
return { xxx }
}
②调用 hook 函数
 模板：
const emits = defineEmits<{
(e: 'click-delete', id: string): void
}>()
const { xxx } = usexxx(() => {
emits('click-delete', props.item.id)
})

import { ref } from 'vue'
import { followOrUnfollow, getPrescriptionOrder, cancelOrder, deleteOrder } from '@/services/consult'
import type { FollowType, ConsultOrderItem } from '@/types/consult'
import { showImagePreview, showFailToast, showSuccessToast } from 'vant';
import { OrderType } from '@/enums'
import { defineEmits } from 'vue'

// 封装逻辑，规范 useXxx，表示使用某功能
export const useFollow = (type: FollowType = 'doc') => {
  const loading = ref(false)
  // {a, b} 类型，传值得时候 {a, b, c} 也可以，这是类型兼容：多的可以给少的
  const follow = async (item: { id: string; likeFlag: 0 | 1 }) => {
    loading.value = true
    try {
      await followOrUnfollow(item.id, type)
      item.likeFlag = item.likeFlag === 1 ? 0 : 1
    } finally {
      loading.value = false
    }
  }
  return { loading, follow }
}

// 封装查看处方hook函数
export const useShowPrescription = () => {
  const onShowPrescription = async (id: string) => {
    const res = await getPrescriptionOrder(id)
    console.log(res.data.url);
    // 预览处方
    showImagePreview([res.data.url])
  }
  return { onShowPrescription }
}

// 封装取消问诊hook函数
export const useCancelConsultOrder = () => {
  const loading = ref(false)
  const cancelConsultOrder = async (item: ConsultOrderItem) => {
    try {
      loading.value = true
      const res = await cancelOrder(item.id)
      console.log(res, '取消问诊');

      item.status = OrderType.ConsultCancel
      item.statusValue = '已取消'
      showSuccessToast('取消成功')
    } catch (error) {
      showFailToast('取消失败')
    } finally {
      loading.value = false
    }
  }
  return { loading, cancelConsultOrder }
}

// 封装删除问诊hook函数
export const useDeleteConsultOrder = (cb: () => void) => {
  const deleteLoading = ref(false)

  const deleteConsultOrder = async (item: ConsultOrderItem) => {
    try {
      deleteLoading.value = true
      await deleteOrder(item.id)
      showSuccessToast('删除成功')
      // 成功，做其他业务
      cb &amp;&amp; cb()
    } catch (error) {
      showFailToast('删除失败')
    } finally {
      deleteLoading.value = false
    }
  }
  return { deleteLoading, deleteConsultOrder }
}

User/components/ConsultItem.vue

import { useShowPrescription, useCancelConsultOrder, useDeleteConsultOrder } from '@/composable'
const { onShowPrescription } = useShowPrescription()
const { loading, cancelConsultOrder } = useCancelConsultOrder()

const emits = defineEmits<{
  (e: 'click-delete', id: string): void
}>()
const { deleteLoading, deleteConsultOrder } = useDeleteConsultOrder(() => {
  emits('click-delete', props.item.id)
})

<!--//样式 -->
<div class="foot" v-if="item.status === OrderType.ConsultComplete">
      <consult-more :disabled="!item.prescriptionId" @on-delete="deleteConsultOrder(item)"
        @on-preview="onShowPrescription(item.prescriptionId)">
      </consult-more>
</div>