ow

uniapp/youjiala/src/components/search-input/search-input.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * 搜索框：uView Pro 的 u-input + 放大镜前缀图标，圆角浅灰底（对齐截图样式）。
+ * 输入即回传（配合 v-model 语义），键盘确认派发 search 事件；
+ * 注意 uview-pro 的 u-input 只派发 input/update:modelValue，没有 change 事件，
+ * 绑错 @change 会导致关键字永不回传（实测踩过）。组件不碰接口，过滤时机由页面决定。
+ */
+import { computed } from "vue";
+
+const props = defineProps({
+  /** 关键字（v-model 语义） */
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  /** 占位文案（页面翻译好传入） */
+  placeholder: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "search", value: string): void;
+}>();
+
+// u-input 默认白底带边框，这里压成透明让它融进外层浅灰圆角容器
+const inputStyle = computed(() => ({
+  backgroundColor: "transparent",
+}));
+
+function onInput(value: string): void {
+  emit("update:modelValue", value);
+}
+
+function onConfirm(value: string): void {
+  emit("search", value ?? props.modelValue);
+}
+
+function onClear(): void {
+  emit("update:modelValue", "");
+}
+</script>
+
+<template>
+  <view class="search-input">
+    <view class="search-input__box">
+      <u-icon name="search" size="34" color="#9aa0a6" />
+      <view class="search-input__field">
+        <u-input :model-value="modelValue" :placeholder="placeholder" :border="false" clearable
+          :custom-style="inputStyle" placeholder-style="color: #9aa0a6" confirm-type="search" @input="onInput"
+          @confirm="onConfirm" @clear="onClear" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+/* 分区卡片风格：外层透明露渐变底，胶囊内部浅白色、留描边定形 */
+.search-input {
+  padding: 2rpx 24rpx 0;
+}
+
+.search-input__box {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 10rpx 28rpx;
+  border: 2rpx solid rgba(31, 35, 41, 0.08);
+  border-radius: 399rpx;
+  background-color: rgba(255, 255, 255, 0.55);
+}
+
+.search-input__field {
+  flex: 1;
+}
+</style>