shanxia2.0/web-admin/src/components/mp/MpCarrierLibrarySelectSheet.vue

<template>
  <MpBottomSheet v-model="innerVisible" title="从承运商库选择">
    <div class="mp-carrier-lib">
      <div class="mp-carrier-lib__search">
        <input
          v-model="keyword"
          class="mp-carrier-lib__search-input"
          type="search"
          placeholder="搜索承运商名称 / 联系人 / 电话"
          autocomplete="off"
          @keyup.enter="handleSearch"
        />
      </div>

      <div v-if="loading && !rows.length" class="mp-carrier-lib__empty">加载中…</div>
      <div v-else-if="!rows.length" class="mp-carrier-lib__empty">暂无可用承运商</div>
      <button
        v-for="row in rows"
        :key="row.id"
        type="button"
        class="mp-carrier-lib__row"
        @click="handleConfirm(row)"
      >
        <div class="mp-carrier-lib__row-main">
          <div class="mp-carrier-lib__title">{{ row.carrierName || '—' }}</div>
          <div class="mp-carrier-lib__desc">{{ rowDesc(row) }}</div>
        </div>
        <span class="mp-carrier-lib__pick">选用</span>
      </button>

      <button
        v-if="hasMore"
        type="button"
        class="mp-carrier-lib__more"
        :disabled="loading"
        @click="loadMore"
      >
        {{ loading ? '加载中…' : '加载更多' }}
      </button>
    </div>
  </MpBottomSheet>
</template>

<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import MpBottomSheet from '@/components/mp/MpBottomSheet.vue'
  import { carrierApi, type Carrier } from '@/api/pl/index'
  import { pickBxPageResult } from '@/utils/http/bx'
  import { getPlCarrierStatusLabel } from '@/utils/pl-display'

  defineOptions({ name: 'MpCarrierLibrarySelectSheet' })

  const props = defineProps<{
    modelValue: boolean
  }>()

  const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    select: [row: Carrier]
  }>()

  const innerVisible = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
  })

  const loading = ref(false)
  const keyword = ref('')
  const rows = ref<Carrier[]>([])
  const page = ref(1)
  const pageSize = 20
  const total = ref(0)
  let searchTimer: ReturnType<typeof setTimeout> | null = null

  const hasMore = computed(() => rows.value.length < total.value)

  function rowDesc(row: Carrier) {
    const parts: string[] = []
    parts.push(getPlCarrierStatusLabel(row.status) || '—')
    const name = (row.contactName || '').trim()
    const phone = (row.contactPhone || '').trim()
    if (name && phone) parts.push(`${name} · ${phone}`)
    else if (name || phone) parts.push(name || phone)
    return parts.join(' · ')
  }

  async function fetchList(reset: boolean) {
    loading.value = true
    try {
      if (reset) {
        page.value = 1
        rows.value = []
      }
      const res = await carrierApi.list({
        q: keyword.value.trim() || undefined,
        page: page.value,
        pageSize
      })
      const { list, total: t } = pickBxPageResult<Carrier>(res)
      rows.value = reset ? list : [...rows.value, ...list]
      total.value = t
    } finally {
      loading.value = false
    }
  }

  function handleSearch() {
    if (searchTimer) {
      clearTimeout(searchTimer)
      searchTimer = null
    }
    void fetchList(true)
  }

  function loadMore() {
    if (loading.value || !hasMore.value) return
    page.value += 1
    void fetchList(false)
  }

  function handleConfirm(row: Carrier) {
    emit('select', row)
    innerVisible.value = false
  }

  function resetAndLoad() {
    keyword.value = ''
    page.value = 1
    total.value = 0
    rows.value = []
    void fetchList(true)
  }

  watch(
    () => props.modelValue,
    (open) => {
      if (open) resetAndLoad()
    }
  )

  watch(keyword, () => {
    if (!props.modelValue) return
    if (searchTimer) clearTimeout(searchTimer)
    searchTimer = setTimeout(() => {
      void fetchList(true)
    }, 320)
  })
</script>

<style scoped lang="scss">
  .mp-carrier-lib {
    padding: 0 8px 8px;
  }

  .mp-carrier-lib__search {
    margin-bottom: 8px;
  }

  .mp-carrier-lib__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #dcebe4;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2a26;
    background: #fff;
  }

  .mp-carrier-lib__empty {
    padding: 28px 12px;
    text-align: center;
    color: #6b7b74;
    font-size: 13px;
  }

  .mp-carrier-lib__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border: none;
    border-bottom: 1px solid #f0f4f2;
    background: #fff;
    text-align: left;
    cursor: pointer;
  }

  .mp-carrier-lib__row:active {
    background: #e9f9f2;
  }

  .mp-carrier-lib__row-main {
    min-width: 0;
    flex: 1;
  }

  .mp-carrier-lib__title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2a26;
  }

  .mp-carrier-lib__desc {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7b74;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .mp-carrier-lib__pick {
    flex-shrink: 0;
    font-size: 12px;
    color: #0a9f6d;
    font-weight: 600;
  }

  .mp-carrier-lib__more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #e9f9f2;
    color: #087f57;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .mp-carrier-lib__more:disabled {
    opacity: 0.6;
    cursor: default;
  }
</style>