feat: 文案修改&订阅计划字段修改

src/component/common/SelectUser.vue

@@ -0,0 +1,135 @@
+<template>
+  <a-select
+    v-model:value="value"
+    :allowClear="true"
+    show-search
+    style="width: 250px"
+    :filter-option="false"
+    placeholder="Select Item..."
+    max-tag-count="responsive"
+    :options="options"
+    :loading="fetching"
+    @popupScroll="handleScrollUserList"
+    @search="onSearch"
+    @focus="handleFocus"
+    @change="onChange"
+  ></a-select>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue'
+import { debounce } from 'lodash-es'
+
+type OptionItem = { [k: string]: any }
+
+const props = defineProps<{
+  modelValue?: any
+}>()
+
+const emit = defineEmits(['update:modelValue', 'change', 'search'])
+
+const pager = reactive<{ page: number; size: number; total: number | null }>({
+  page: 1,
+  size: 20,
+  total: null
+})
+const fetching = ref(false)
+const keyword = ref('')
+const internalList = ref<OptionItem[]>([])
+
+// page size is stored in pager.size
+
+const value = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
+
+const getLabel = (it: OptionItem) => {
+  return String(it['label'] ?? '')
+}
+
+const getValue = (it: OptionItem, idx: number) => {
+  return it['value'] ?? String(idx)
+}
+
+const options = computed(() => {
+  return internalList.value.map((it, idx) => ({
+    label: getLabel(it),
+    value: getValue(it, idx),
+    raw: it
+  }))
+})
+
+const defaultFetch = async ({
+  page: p,
+  pageSize: ps,
+  keyword: kw
+}: {
+  page: number
+  pageSize: number
+  keyword: string
+}) => {
+  const raw = sessionStorage.getItem('allCountry') || '[]'
+  let list: OptionItem[] = []
+  try {
+    list = JSON.parse(raw)
+    if (!Array.isArray(list)) list = []
+  } catch (e) {
+    list = []
+  }
+
+  // Return the raw list from sessionStorage exactly as-is (no slicing/filtering/delay)
+  return { data: list, total: list.length }
+}
+
+const doFetch = async (reset = false) => {
+  if (reset) pager.page = 1
+  if (pager.total !== null && (pager.page - 1) * pager.size >= (pager.total ?? 0)) return
+  fetching.value = true
+  try {
+    const res = await defaultFetch({
+      page: pager.page,
+      pageSize: pager.size,
+      keyword: keyword.value
+    })
+    const data = res?.data ?? []
+    pager.total = res?.total ?? null
+    if (pager.page === 1) internalList.value = data
+    else internalList.value = internalList.value.concat(data)
+    pager.page += 1
+  } finally {
+    fetching.value = false
+  }
+}
+
+const debouncedSearch = debounce((val: string) => {
+  keyword.value = val
+  emit('search', val)
+  doFetch(true)
+}, 300)
+
+const onSearch = (val: string) => {
+  debouncedSearch(val)
+}
+
+const handleScrollUserList = (e: Event) => {
+  const target = e?.target as HTMLElement | null
+  if (!target) return
+  const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 40
+  if (nearBottom && !fetching.value) {
+    doFetch(false)
+  }
+}
+
+const handleFocus = () => {
+  // When focused, load first page (or reload with current keyword)
+  doFetch(true)
+}
+
+const onChange = (val: any) => {
+  emit('change', val)
+  console.log('change---------', val)
+}
+</script>
+
+<style lang="less" scoped></style>