源文件

jeepay-ui-uapp-agent/components/newComponents/JSearchInput/JSearchInput.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class="search-wrapper" :style="{ padding: wrapPd }">
+    <view class="search-input bdR16">
+      <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
+      <input type="text" :placeholder="place" placeholder-style="#8C8C8C" :focus="isFocus" v-model="searchText" :disabled="isDisabled" @input="change" />
+      <view class="search-text" v-if="searchText || flag" @tap="search">{{ text }}</view>
+    </view>
+    <slot>
+      <view class="search-screen" v-if="props.screen" @tap="tapScreen">
+        <image src="/static/iconImg/icon-filter.svg" mode="scaleToFill" />
+        筛选
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { debounce } from '@/util/debounce'
+const props = defineProps({
+  screen: {
+    type: Boolean,
+    default: false,
+  },
+  place: {
+    type: String,
+    default: '搜索代理商名、代理商号、联系人手机号',
+  },
+  bgColor: {
+    type: String,
+    default: '#fff',
+  },
+  wrapPd: {
+    type: String,
+    default: '30rpx',
+  },
+
+  isFocus: { type: Boolean, default: false },
+  isDisabled: { type: Boolean, default: false },
+})
+
+onMounted(() => {
+  focus.value = props.isFocus
+})
+const focus = ref(false)
+const text = ref('搜索')
+const searchText = ref('')
+const flag = ref(false)
+// 点击筛选触发回调
+const emits = defineEmits(['screen', 'search', 'resetSearch'])
+const tapScreen = () => {
+  emits('screen')
+}
+const change = () => {
+  text.value = '搜索'
+}
+// 点击触发事件
+function search() {
+  flag.value = true
+  if (text.value === '搜索') {
+    if (!searchText.value.trim()) return uni.showToast({ title: '请输入搜索条件', icon: 'none' })
+    text.value = '取消'
+    emits('search', searchText.value)
+  } else {
+    searchText.value = ''
+    text.value = '搜索'
+    emits('resetSearch', 'reset')
+  }
+}
+defineExpose({ searchText })
+</script>
+<style lang="scss" scoped>
+.search-wrapper {
+  display: flex;
+  align-items: center;
+  .search-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 21rpx;
+    background-color: #fff;
+    input {
+      flex: 1;
+      font-size: 27rpx;
+    }
+    image {
+      margin: 0 10rpx 0 10rpx;
+      width: 30rpx;
+      height: 30rpx;
+    }
+    .search-text {
+      font-size: 30rxp;
+      padding: 0 10rpx;
+      color: $primaryColor;
+    }
+  }
+  .search-screen {
+    display: flex;
+    align-items: center;
+    font-size: 30rpx;
+    color: rgba(0, 0, 0, 0.6);
+    image {
+      width: 36rpx;
+      height: 36rpx;
+      margin: 0 15rpx;
+    }
+  }
+}
+</style>