xk-doctor-wx/subPackages/sub_business_shared/order/components/ExpressCompanyPicker.vue

<template>
  <view class="picker-wrap">
    <view class="picker-trigger" @click="openDrawer">
      <text :class="selected ? 'summary-text' : 'placeholder-text'">{{ summaryText }}</text>
      <text class="arrow">›</text>
    </view>

    <drawer-page-container
      v-model="showPopup"
      title="选择快递公司"
      :use-page-guard="false"
      :show-close="true"
    >
      <view class="drawer-body">
        <view class="search-bar">
          <input
            class="search-input"
            v-model="keyword"
            placeholder="搜索公司名称或编码"
            placeholder-style="color:#BDBDBD"
            confirm-type="search"
          />
        </view>
        <scroll-view scroll-y class="list-scroll">
          <view v-if="!filteredOptions.length" class="empty">无匹配快递公司</view>
          <view
            v-for="item in filteredOptions"
            :key="item._wxKey"
            class="option-item"
            @click="onPick(item)"
          >
            <view class="option-main">
              <text class="option-name">{{ item.name || '-' }}</text>
              <text class="option-code">{{ item.code || '' }}</text>
            </view>
            <text v-if="value === item.code" class="check">✓</text>
          </view>
        </scroll-view>
      </view>
    </drawer-page-container>
  </view>
</template>

<script>
import DrawerPageContainer from '@/subPackages/sub_business_shared/components/DrawerPageContainer.vue'

export default {
  name: 'ExpressCompanyPicker',
  components: { DrawerPageContainer },
  props: {
    value: { type: String, default: '' },
    options: { type: Array, default: () => [] },
    disabled: { type: Boolean, default: false },
    placeholder: { type: String, default: '请选择快递公司' },
  },
  data() {
    return {
      showPopup: false,
      keyword: '',
    }
  },
  computed: {
    selected() {
      const code = this.value
      if (!code) return null
      return this.options.find(o => o.code === code) || null
    },
    summaryText() {
      if (!this.selected) return this.placeholder
      const name = this.selected.name || '-'
      const code = this.selected.code || ''
      return code ? `${name}（${code}）` : name
    },
    filteredOptions() {
      const kw = (this.keyword || '').trim().toLowerCase()
      if (!kw) return this.options
      return this.options.filter(o => {
        const name = String(o.name || '').toLowerCase()
        const code = String(o.code || '').toLowerCase()
        return name.includes(kw) || code.includes(kw)
      })
    },
  },
  methods: {
    openDrawer() {
      if (this.disabled) return
      this.keyword = ''
      this.showPopup = true
    },
    onPick(item) {
      this.$emit('input', item.code || '')
      this.$emit('change', item)
      this.showPopup = false
    },
  },
}
</script>

<style lang="scss" scoped>
.picker-wrap { width: 100%; }
.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88rpx;
  padding: 0 24rpx;
  background: #F7F8FA;
  border-radius: 12rpx;
  box-sizing: border-box;
}
.summary-text {
  flex: 1;
  font-size: 28rpx;
  color: #1D2129;
  word-break: break-all;
}
.placeholder-text {
  flex: 1;
  font-size: 28rpx;
  color: #BDBDBD;
}
.arrow {
  font-size: 36rpx;
  color: #C0C4CC;
  margin-left: 12rpx;
  flex-shrink: 0;
}
.drawer-body {
  display: flex;
  flex-direction: column;
  max-height: 65vh;
}
.search-bar {
  padding: 16rpx 32rpx;
  flex-shrink: 0;
}
.search-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 72rpx;
  height: 72rpx;
  line-height: 72rpx;
  padding: 0 24rpx;
  background: #F7F8FA;
  border-radius: 12rpx;
  font-size: 28rpx;
}
.list-scroll {
  flex: 1;
  max-height: 52vh;
  padding-bottom: 24rpx;
}
.option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #F2F3F5;
}
.option-main { flex: 1; min-width: 0; }
.option-name {
  display: block;
  font-size: 28rpx;
  color: #1D2129;
  font-weight: 500;
}
.option-code {
  display: block;
  font-size: 24rpx;
  color: #86909C;
  margin-top: 6rpx;
}
.check {
  font-size: 32rpx;
  color: #6acdbb;
  font-weight: 700;
  margin-left: 16rpx;
  flex-shrink: 0;
}
.empty {
  text-align: center;
  color: #86909C;
  padding: 80rpx 0;
  font-size: 28rpx;
}
</style>