From c1f28d2184e8d76165f6e4ba4e2f9875662c0d61 Mon Sep 17 00:00:00 2001
From: mkm <727897186@qq.com>
Date: Thu, 2 Jan 2025 11:18:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(pageQuota):=20=E9=87=87=E8=B4=AD=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E4=BE=9B=E5=BA=94?=
 =?UTF-8?q?=E5=95=86=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在采购产品页面添加供应商搜索组件
- 更新 API 调用以支持供应商名称搜索
- 优化供应商列表展示逻辑
- 调整每页显示数量为 50 条
- 更新本地测试环境 URL
---
 config/app.js                                 |   2 +-
 multipleShop/index/index.vue                  |   2 +-
 pageQuota/purchase_product_offer/index.vue    |  27 +-
 uni_modules/next-search-select/changelog.md   |  18 +
 .../next-search-select/next-search-select.vue | 557 ++++++++++++++++++
 .../next-search-select/right_icon.png         | Bin 0 -> 673 bytes
 uni_modules/next-search-select/package.json   |  80 +++
 uni_modules/next-search-select/readme.md      | 155 +++++
 8 files changed, 833 insertions(+), 8 deletions(-)
 create mode 100644 uni_modules/next-search-select/changelog.md
 create mode 100644 uni_modules/next-search-select/components/next-search-select/next-search-select.vue
 create mode 100644 uni_modules/next-search-select/components/next-search-select/right_icon.png
 create mode 100644 uni_modules/next-search-select/package.json
 create mode 100644 uni_modules/next-search-select/readme.md

diff --git a/config/app.js b/config/app.js
index 313fd1e..d8d8126 100644
--- a/config/app.js
+++ b/config/app.js
@@ -17,7 +17,7 @@ switch (env) {
 		WSS_URL = 'wss://ceshi-multi-store.lihaink.cn/pull'
 		break;
 	case 'local':
-		BASE_URL = 'http://192.168.1.7:8545';
+		BASE_URL = 'http://192.168.1.22:8545';
 		WSS_URL = 'wss://ceshi-multi-store.lihaink.cn/pull'
 		break;
 	default:
diff --git a/multipleShop/index/index.vue b/multipleShop/index/index.vue
index 97f3843..a8d5bfe 100644
--- a/multipleShop/index/index.vue
+++ b/multipleShop/index/index.vue
@@ -79,7 +79,7 @@
 		name: '',
 		cart_id: "",
 		page_no: 1,
-		page_size: 6
+		page_size: 50
 	})
 
 	// 初始化
diff --git a/pageQuota/purchase_product_offer/index.vue b/pageQuota/purchase_product_offer/index.vue
index 5f62ef6..67b63fc 100644
--- a/pageQuota/purchase_product_offer/index.vue
+++ b/pageQuota/purchase_product_offer/index.vue
@@ -48,11 +48,23 @@
 			<up-modal :show="show" title="采购确认" showCancelButton @cancel="show=false" @confirm="offerUpdate()">
 				<up-form labelPosition="left">
 					<up-form-item label="供应商" labelWidth='auto'>
-						<up-input @click="showSupplier = true">
+<!-- 						<up-input @click="showSupplier = true">
 							<template #suffix>
 								<span>{{supplierText}}</span>
 							</template>
-						</up-input>
+						</up-input> -->
+						       <next-search-select
+						            :multiple="false"
+						            :list="supplierList"
+						            label-key="mer_name"
+						            value-key="id"
+						            placeholder=" 请选择供应商"
+						            title="选择供应商"
+						            v-model:value="formData.supplier_id"
+						            @change="changeCallback"
+									@search="getSupplierList"
+						            clearable
+						        ></next-search-select>
 					</up-form-item>
 					<up-form-item label="名称">
 						<up-input v-model="formData.store_name" border="none" disabled=""></up-input>
@@ -162,17 +174,20 @@
 		goodsList1.value = res.data.lists
 	}
 	const supplierList = ref([])
-	const getSupplierList = () => {
-		supplierListApi().then(res => {
-			supplierList.value = [res.data.lists]
+	const getSupplierList = (val='') => {
+		supplierListApi({mer_name:val}).then(res => {
+			supplierList.value =res.data.lists
 		})
 	}
+	function changeCallback(item) {
+	    console.log("选中的item：", item)
+	}
 	const supplierConfirm = (e) => {
 		showSupplier.value = false
 		supplierText.value = e.value[0].mer_name
 		formData.value.supplier_id = e.value[0].id
 	}
-	const cancleOrder = (item) => {
+	const cancleOrder = (item) => {		
 		columns.value[0].forEach(e => {
 			if (e['name_b'] == item['category_name']) {
 				pickerText.value = e['name']
diff --git a/uni_modules/next-search-select/changelog.md b/uni_modules/next-search-select/changelog.md
new file mode 100644
index 0000000..7e0e49a
--- /dev/null
+++ b/uni_modules/next-search-select/changelog.md
@@ -0,0 +1,18 @@
+## 1.0.8（2024-09-14）
+更新说明
+## 1.0.7（2023-12-14）
+修复icon
+## 1.0.6（2023-09-25）
+增加多选，多次搜索默认值选项回显功能
+## 1.0.5（2023-08-15）
+修复小程序端兼容性问题
+## 1.0.4（2023-08-15）
+增加props配置disabledKey
+## 1.0.3（2023-08-14）
+增加visibleChange
+## 1.0.2（2023-06-06）
+增加按需加载说明
+## 1.0.1（2023-05-31）
+增加没有搜索到数据的提示
+## 1.0.0（2023-05-31）
+发布next-search-select
diff --git a/uni_modules/next-search-select/components/next-search-select/next-search-select.vue b/uni_modules/next-search-select/components/next-search-select/next-search-select.vue
new file mode 100644
index 0000000..85d4503
--- /dev/null
+++ b/uni_modules/next-search-select/components/next-search-select/next-search-select.vue
@@ -0,0 +1,557 @@
+<template>
+  <view class="main" @touchmove.stop.prevent="">
+    <view class="input" @click="showModal">
+			<view class="input-block">
+				<input
+				  v-model="_value"
+				  :style="disabled ? 'color:#c0c4cc' : ''"
+				  :placeholder="placeholder"
+				  placeholder-style="color: #c0c4cc;font-size: 32rpx;font-weight: none"
+				  disabled
+				/>
+			</view>
+			<view v-if="showArrow"><text style="font-size: 28rpx;align-items: center;" class="icon">&#xe615;</text></view>
+    </view>
+    <view
+      class="select-modal"
+      :class="isShowModal ? 'show' : ''"
+      @tap="hideModal"
+    >
+      <view
+        class="select-dialog"
+        @tap.stop
+        :style="{ backgroundColor: bgColor }"
+      >
+        <view class="title-main">
+          <text class="title-detail">{{ title }}</text>
+        </view>
+
+        <view class="search-box" v-if="showSearch">
+          <input
+            class="search-input"
+            confirm-type="search"
+            v-model="searchInput"
+            placeholder="输入内容进行模糊查询"
+            placeholder-style="color:#c0c4cc;font-size: 32rpx;font-weight: none"
+          />
+          <text v-if="showSearchBtn" class="search-text" @click="handleSearch">
+            搜索
+          </text>
+        </view>
+        <scroll-view :scroll-y="true" class="select-content">
+          <view
+            class="select-item"
+            v-for="(item, index) in list"
+            :key="index"
+						:id="`select-item-${index}`"
+            :style="[getItemStyle(item)]"
+            @click="select(item)"
+          >
+            <view class="title-block">{{ getLabelKeyValue(item) }}</view>
+            <text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
+          </view>
+					<view v-if="!list.length" class="no-data"><text>暂无数据！</text></view>
+        </scroll-view>
+        <view class="select-bar bg-white" v-if="multiple">
+          <button
+            plain="true"
+            class="mini-btn action"
+            type="default"
+            size="mini"
+            @tap="empty"
+          >
+            {{ emptyText }}
+          </button>
+          <button
+            class="mini-btn action"
+            type="primary"
+            size="mini"
+						:style="{backgroundColor: selectColor}"
+            @tap="confirmClick"
+          >
+            {{ confirmText }}
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import rightIconSrc from './right_icon.png';
+
+export default {
+  name: 'NextSearchSelect',
+  data() {
+    return {
+      isShowModal: false,
+      searchInput: '',
+      options: [],
+			rightIconSrc,
+			localChecklist: []
+    }
+  },
+  props: {
+    showSearch: {
+      // 是否显示搜索框
+      type: Boolean,
+      default: true,
+    },
+    value: {
+      type: [Number, String, Array, Object],
+      default: null,
+    },
+    placeholder: {
+      // 占位符
+      default: '',
+      type: String,
+    },
+    multiple: {
+      // 是否多选
+      default: false,
+      type: Boolean,
+    },
+    list: {
+      default: () => [],
+      type: Array,
+    },
+    valueKey: {
+      // 指定list中valueKey的值作为下拉框绑定内容
+      default: 'value',
+      type: String,
+    },
+    labelKey: {
+      // 指定list中labelKey的值作为下拉框显示内容
+      default: 'label',
+      type: String,
+    },
+		// 指定list中labelKey的值作为下拉框disabled的属性
+		disabledKey: {
+			default: 'disabled',
+			type: String,
+		},
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    emptyText: {
+      default: '重置',
+      type: String,
+    },
+    title: {
+      default: '选择内容',
+      type: String,
+    },
+    confirmText: {
+      default: '确定',
+      type: String,
+    },
+    color: {
+      default: '#000000',
+      type: String,
+    },
+    selectColor: {
+      default: '#f9ae3d',
+      type: String,
+    },
+    bgColor: {
+      default: '#ffffff',
+      type: String,
+    },
+    selectBgColor: {
+      default: '#FFFFFF',
+      type: String,
+    },
+    showSearchBtn: {
+      default: true,
+      type: Boolean, // single || all
+    },
+    showArrow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['openDeepScroll', 'closeDeepScroll'],
+  computed: {
+    _value: {
+      get() {
+        return this.get_value(this.value)
+      },
+      set(val) {
+        this.$emit('input', val)
+      },
+    }
+  },
+  created() {
+		this.$watch(() => this.searchInput, (val) => {
+			if (!this.showSearchBtn) this.$emit('search', val)
+		})
+	},
+  methods: {
+    handleSearch() {
+      this.$emit('search', this.searchInput)
+    },
+		getItemStyle(item) {
+			const disabledColor = this.disabledKey && item[this.disabledKey] === true ? '#dedede' : ''
+			const color = disabledColor ? disabledColor : this.valueIndexOf(item) ? this.selectColor : this.color
+			const backgroundColor = this.valueIndexOf(item) ? this.selectBgColor : undefined
+			return {
+				color,
+				backgroundColor
+			}
+		},
+    get_value(val) {
+      // 将数组值转换为以,隔开的字符串
+      if (val || val === 0) {
+        if (Array.isArray(val)) {
+          let chooseAttr = []
+          val.forEach((item) => {
+						const list = this.options.concat(this.list)
+            let choose = list.find((temp) => {
+              let val_val = this.getValueKeyValue(temp)
+              return item === val_val
+            })
+						let chooseLocal = this.localChecklist.find((temp) => {
+						  let val_val = this.getValueKeyValue(temp)
+						  return item === val_val
+						})
+            // 判断是否存在
+            if (choose) {
+              chooseAttr.push(choose)
+							const bool = this.localChecklist.some((temp) => {
+								return this.getValueKeyValue(choose) === this.getValueKeyValue(temp)
+							})
+							if(!bool) {
+								this.localChecklist.push(choose)
+							}
+            } else if(chooseLocal) {
+							chooseAttr.push(chooseLocal)
+						}
+          })
+          let values = ''
+          if (chooseAttr.length > 0) {
+            values = chooseAttr
+              .map((temp) => this.getLabelKeyValue(temp))
+              .join(',')
+          }
+
+          return values
+        } else {
+          let choose = this.list.find((temp) => {
+            let val_val = this.getValueKeyValue(temp)
+            return val === val_val
+          })
+          if (choose) {
+            return this.getLabelKeyValue(choose)
+          } else {
+            return val
+          }
+        }
+      } else {
+        return ''
+      }
+    },
+    select(item) {
+      // 点击选项
+			if (this.disabledKey && item[this.disabledKey] === true) return 
+      let val = this.getValueKeyValue(item)
+      if (this.multiple) {  
+				const o = this.localChecklist.find(it => it[this.valueKey] === item[this.valueKey])
+				if(!o) {
+					this.localChecklist.push(item)
+				}
+        let _value = this.value
+        let index = _value ? _value.indexOf(val) : -1
+        if (index != -1) {
+          _value.splice(index, 1)
+          this.options.splice(index, 1)
+          // this.$emit('input', _value)
+        } else {
+          _value.push(val)
+          this.options.push(item)
+          // this.$emit('input', _value)
+        }
+				
+				// #ifdef VUE2
+					this.$emit('input', _value)
+				// #endif
+				// #ifdef VUE3
+					this.$emit('update:value', _value)
+				// #endif
+				
+        this.$emit('change', item)
+      } else {
+        let label = this.getLabelKeyValue(item)
+				let emitValue = ''
+        if (this._value) {
+          if (label.indexOf(this._value) !== -1) {
+						emitValue = ''
+          } else {
+						emitValue = val
+          }
+        } else {
+					emitValue = val
+        }
+				
+				// #ifdef VUE2
+					this.$emit('input', emitValue)
+				// #endif
+				// #ifdef VUE3
+					this.$emit('update:value', emitValue)
+				// #endif
+				
+        // 单选选中的当前项所有
+        this.$emit('change', item)
+        this.hideModal()
+      }
+    },
+    valueIndexOf(item) {
+      let val = this.getValueKeyValue(item)
+      if (Array.isArray(this.value)) {
+        return this.value.indexOf(val) != -1
+      } else {
+        return this.value === val
+      }
+    },
+    getLabelKeyValue(item) {
+      // 获取label
+      return item[this.labelKey] || '--'
+    },
+    getValueKeyValue(item) {
+      // 获取value
+      return item[this.valueKey]
+    },
+    empty() {
+      // 清空
+      if (this.multiple) {
+        this.$emit('change', [])
+				// #ifdef VUE2
+					this.$emit('input', [])
+				// #endif
+				// #ifdef VUE3
+					this.$emit('update:value', [])
+				// #endif
+      } else {
+        this.$emit('change', '')
+				// #ifdef VUE2
+					this.$emit('input', '')
+				// #endif
+				// #ifdef VUE3
+					this.$emit('update:value', '')
+				// #endif
+      }
+    },
+    confirmClick() {
+      // 点击确定
+      this.$emit('confirm', this._value)
+      this.hideModal()
+    },
+    showModal() {
+      // 显示model
+      if (!this.disabled) {
+        this.isShowModal = true
+        // 打开禁止穿透滚动
+        this.$emit('openDeepScroll')
+				this.$emit('visibleChange', true)
+      }
+    },
+    hideModal() {
+      // 隐藏model
+      this.isShowModal = false
+      // 关闭禁止穿透滚动
+      this.$emit('closeDeepScroll')
+			this.$emit('visibleChange', false)
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+	
+@font-face {
+	font-family: 'iconfont';
+	src: url('//at.alicdn.com/t/c/font_4110624_3hfahswu4mf.ttf?t=1695353456719') format('truetype');
+}
+.icon {
+	font-family: iconfont;
+	font-size: 32upx;
+	font-style: normal;
+	color: #999;
+}
+
+.title-main {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.title-detail {
+  display: flex;
+  width: 88%;
+  justify-content: center;
+  padding: 30rpx 0;
+}
+
+.selectIcon {
+  font-family: 'iconfont' !important;
+  font-size: 18px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icongou:before {
+  content: '\e6cf';
+}
+
+</style>
+<style lang="scss" scoped>
+.main {
+	font-size: 32rpx;
+}
+
+.bg-white {
+  background-color: #ffffff;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+	.input-block {
+		flex: 1;
+		input {
+		  flex: 1;
+		  text-align: right;
+		  color: #333333;
+		}
+	}
+  
+}
+
+.select-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  opacity: 0;
+  outline: 0;
+  text-align: center;
+  -ms-transform: scale(1.185);
+  transform: scale(1.185);
+  backface-visibility: hidden;
+  perspective: 2000rpx;
+  background: rgba(0, 0, 0, 0.6);
+  transition: all 0.3s ease-in-out 0s;
+  pointer-events: none;
+  margin-bottom: -1000rpx;
+	
+  &::before {
+    content: '\200B';
+    display: inline-block;
+    height: 100%;
+    vertical-align: bottom;
+  }
+
+  .select-dialog {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: inline-block;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #f8f8f8;
+    overflow: hidden;
+    width: 100%;
+    border-radius: 0;
+
+    .select-content {
+      // background-color: #F1F1F1;
+      height: 50vh;
+      overflow-y: auto;
+			overflow-x: hidden;
+			box-sizing: border-box;
+			
+      .select-item {
+        text-align: left;
+        padding: 20rpx 40rpx;
+        display: flex;
+				position: relative;
+        ::after {
+					position: absolute;
+					right: 0;
+					bottom: 0;
+          content: '';
+          width: 100%;
+          height: 1px;
+          display: block;
+          margin: 0 auto;
+          border-bottom: 1px solid #f5f2f2;
+        }
+
+        .title-block {
+          flex: 1;
+        }
+      }
+    }
+		.no-data {
+			text-align: center;
+			padding: 30rpx;
+			color: #cccccc;
+		}
+  }
+}
+
+.select-modal.show {
+  opacity: 1;
+  transition-duration: 0.3s;
+  -ms-transform: scale(1);
+  transform: scale(1);
+  overflow-x: hidden;
+  overflow-y: auto;
+  pointer-events: auto;
+  margin-bottom: 0;
+}
+
+.select-bar {
+  padding: 0 80rpx;
+  display: flex;
+  position: relative;
+  align-items: center;
+  min-height: 80rpx;
+  justify-content: space-between;
+  margin: 25rpx 0;
+
+  .action {
+    display: flex;
+    align-items: center;
+    height: 78rpx;
+    justify-content: center;
+    max-width: 100%;
+    padding: 0 100rpx;
+  }
+}
+
+.search-box {
+  display: flex;
+  margin: 10rpx 0;
+  align-items: center;
+  padding: 10rpx 40rpx;
+}
+
+.search-input {
+  display: flex;
+  flex: 1;
+  height: 67rpx;
+  line-height: 67rpx;
+  border-radius: 40rpx;
+  background: #f5f2f2;
+	justify-content: flex-start;
+	text-align: left;
+	padding: 0 30rpx;
+}
+
+.search-text {
+  padding-left: 30rpx;
+}
+</style>
diff --git a/uni_modules/next-search-select/components/next-search-select/right_icon.png b/uni_modules/next-search-select/components/next-search-select/right_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a5f4eb6c17f2dd6281615a492109f7e12da99dd
GIT binary patch
literal 673
zcmV;S0$%-zP)<h;3K|Lk000e1NJLTq001BW001Ni1^@s6=<7J*00001b5ch_0Itp)
z=>Px%TS-JgR9Hvt*RiY9KpY3~@1<!Sw2L~bgM)~ZLq(~L$>kNg=-~2DdH;Z@le#{m
zt8P#6FHpf%mqMFM46h&-aT0WJ5Jz<>4%Re3Ik`xOr@18ee2ZC1A>sSsce&s1!mz^^
z+u?j@0g@y+ETN9$d@v0z1dPYyu4P$~47Mz5&2`<UCJ}`IA;fh6_f+V2+qTa-jx#ca
zC<MfDd@#$h*8uj*P{!B{z>4R2uS_5c0Wu_tq7y_E0@$NMKR27rUa!}CR~MlLkReHu
z^wTtb4q%u3PedOXW2ZUipXwmA0Wu_x<JBz79s_8o<#?N>>6w1N|D`IT6hJM<WdIL|
zD1Y|ld_G?p3<lq-AW8!iVx5R?F9i<U?e@7&r}LvMq7pzY$3~WASMxx|*pn!V)`B3&
z${;EOf*`P5*L?)w!cyRU&iS=}0+1oo>9jeU&7J`m<e@}#%lG{|x`@gZ$ODGM;qF$e
zH3o1}?F<5N#q+#}I*8f;88RA;_Sv@mf{2c(&;=1)@_oN>ZWsZ`P$9$t#@Hqi9m?kh
zfK#0FH-D>yF@V~h7l}wVs{FdiInM{#mJVY8A;eMHv6qKdqtWO%j`M!oD<I2HM4ODU
z-{sdG+qElD=LP(=Yjn2CpYEx<1#1CJG@;4>Q*F31KnSq`p!OiD1PH@$oiS!)6qg1>
zQDpQmQVI};;VNUy=y6ONuw4gIEkKeaM;434l!)4@9~e85YXO81HvrsKv)<@Oi7w!{
z8Zz?!^PF>IpJiGAdDCPv*(-m$-R{>qt$V9yYs~@^nE!yEnS=>6VNr|w00000NkvXX
Hu0mjf&xJ9F

literal 0
HcmV?d00001

diff --git a/uni_modules/next-search-select/package.json b/uni_modules/next-search-select/package.json
new file mode 100644
index 0000000..d289892
--- /dev/null
+++ b/uni_modules/next-search-select/package.json
@@ -0,0 +1,80 @@
+{
+  "id": "next-search-select",
+  "displayName": "next-search-select-搜索框组件全端可用",
+  "version": "1.0.8",
+  "description": "简单好用的带搜索功能select组件，支持多种展示形式，可自定义placeholder，远程搜索，多选，单选",
+  "keywords": [
+    "远程搜索",
+    "多选",
+    "单选",
+    "search",
+    "api搜索"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "n",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/next-search-select/readme.md b/uni_modules/next-search-select/readme.md
new file mode 100644
index 0000000..bbc37e4
--- /dev/null
+++ b/uni_modules/next-search-select/readme.md
@@ -0,0 +1,155 @@
+
+## next-search-select --下拉多选，单选，搜索
+
+> 遇到问题或有建议可以加入QQ群(<font color=#f00>455948571</font>)反馈  
+> 如果觉得组件不错，<font color=#f00>给五星鼓励鼓励</font>咯！
+
+### 如果有使用问题请加群
+
+注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合；
+[点击链接加入群聊前端开发（uniapp插件）】](https://qm.qq.com/q/S1bJzQfJAG)
+
+## 使用
+
+>[从uniapp插件市场导入](https://ext.dcloud.net.cn/plugin?name=next-search-select)
+
+```html
+<template>
+	<view class="title"><text>1. 单选模式：</text></view>
+	<view class="item">
+		<next-search-select
+			:multiple="false"
+			:list="options"
+			label-key="projectName"
+			value-key="id"
+			placeholder=" 请选择报备项目"
+			title="选择报备项目"
+			v-model:value="projectId"
+			@search="searchFunc"
+			@change="changeCallback"
+			clearable
+		></next-search-select>
+	</view>
+	<view class="title"><text>2. 多选模式：</text></view>
+	<view class="item">
+		<next-search-select
+			:multiple="true"
+			:list="options"
+			label-key="projectName"
+			value-key="id"
+			placeholder=" 请选择报备项目"
+			title="选择报备项目"
+			v-model:value="projectIds"
+			@search="searchFunc"
+			@change="changeCallback"
+			clearable
+		></next-search-select>
+	</view>
+</template>
+```
+
+### vue3 + ts 使用
+
+```ts
+<script setup lang="ts">
+import {ref, unref} from "vue"
+
+const options = ref<any>([])
+// 单选模式下绑定的值是字符串
+const projectId = ref("")
+// 多选模式值必须是数值类型
+const projectIds = ref([])
+let dataLength = 0
+
+function searchFunc(val?) {
+	console.log("搜索的关键字：", val)
+	uni.showLoading({
+		title: '请稍后...',
+		icon: 'none'
+	})
+	// 模拟ajax请求
+	setTimeout(() => {
+		options.value = []
+		dataLength = 0
+		if (dataLength < 40) {
+			for (let i = 0; i < 40; i++) {
+				options.value.push({
+					id: `id-${val ? val + '-' : ''}${dataLength + i}`,
+					projectName: `项目item-${val ? val + '-' : ''}${dataLength + i}`,
+					ohterKey: `test-${i}`,
+					disabled: i%2 === 0
+				})
+			}
+			dataLength = unref(options).length
+		}
+		uni.hideLoading()
+	}, 1000)
+	
+}
+function changeCallback(item) {
+	console.log("选中的item：", item)
+}
+searchFunc()
+</script>
+<style lang="scss">
+	.title {
+		color: #f9ae3d;
+		font-size: 30rpx;
+		padding: 20rpx 10rpx;
+		background-color: #333;
+	}
+	.item {
+		padding: 10rpx 20rpx;
+		border: 1rpx solid #ccc;
+	}
+</style>
+
+```
+### vue2 同样支持，在这里不再写demo
+
+### 组件按需加载
+如果不需要组件全局加载，而已把组件拷贝到项目的components目录下，单独引入进来使用即可达到按需加载的效果
+### 预览
+
+***
+
+|                 						功能预览               				   			 					|   
+| :--------------------------------------------------------------------------:|
+| ![](https://lixueshiaa.github.io/webtest/www/static/next-search-select.gif) |
+
+
+## 参数
+
+
+### next-search-select Props
+
+可选参数属性列表
+
+|参数名				|说明																																																						|类型														|是否必填	|默认值			|可选值			|
+|----				|----																																																							|----														|----			|----				|----				|
+|showSearch			|是否显示搜索框																																																|Boolean												|否				|true				|false			|
+|value			|v-model v-model:value 绑定值																																											|Number, String, Array, Object	|是				|""					|-					|
+|placeholder			|搜索框placeholder																																														|String													|否				|""					|-					|
+|multiple	|是否多选																																																						|Boolean												|否				|false			|true				|
+|list			|	列表值																																																							|Array													|是				|[]					|-					|
+|valueKey			|list列表绑定的value关键属性key																																									|String													|否				|value			|-					|
+|labelKey			|list列表绑定的label(显示)关键属性key																																						|String													|否				|label			|-					|
+|disabledKey	|list列表绑定的disabled(显示)关键属性key																																					|String													|否				|disabled		|-					|
+|disabled|	disabled																																																					|Boolean												|否				|false			|true				|
+|emptyText				|重置按钮文本text																																														|String													|否				|重置				|-			 		|
+|title				|弹层标题																																																				|String													|否				|选择内容		|-					|
+|confirmText				|确定按钮文本text																																													|String													|否				|确定				|-					|
+|color				|文字颜色																																																				|String													|否				|#000000		|-					|
+|selectColor				|激活颜色																																																	|String													|否				|#f9ae3d		|-					|
+|bgColor				|弹层背景颜色																																																	|String													|否				|#ffffff		|-					|
+|selectBgColor				|激活项背景颜色																																													|String													|否				|#ffffff		|-					|
+|showSearchBtn				|是否显示搜索按钮																																												|Boolean												|否				|true				|false			|
+|showArrow				|是否显示右指示箭头																																													|Boolean												|否				|true				|false			|
+
+
+# Event 事件
+|事件名	|说明									|类型	|回调参数	|
+|----		|----									|----	|----			|
+|confirm|点击确定触发事件			|emit	|-				|
+|change|change								|emit	|-				|
+|visibleChange|弹层改变触发		|emit	|-				|
\ No newline at end of file