'!'

src/pages/goods-manager/childPages/shopping-search/shopping-search.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="search-root">
+    <view class="add-shopping" @tap="createGoods">
+      <jx-icon icon="jiahao" color="#4eb331"></jx-icon>
+      <text>新建</text>
+    </view>
+
+    <uni-search-bar
+      cancelButton="none"
+      clearButton="auto"
+      placeholder="请输入关键字 例如：土豆"
+      @confirm="confirm"
+      @input="input"
+      @clear="clear"
+      v-model="text"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup >
+import toast from '@/utils/toast'
+import { jx_trembling } from '@/utils/tools'
+import { ref, watch } from 'vue'
+
+/*************************************************
+ * props
+ */
+interface propsType {
+  isFilter: string | number
+}
+const props = defineProps<propsType>()
+
+const text = ref<string>('')
+let isInput = false
+watch(
+  () => props.isFilter,
+  (val) => {
+    if (val == 'hot' || val == 'audit') {
+      isInput = true
+    } else {
+      isInput = false
+    }
+  }
+)
+
+/*************************************************
+ * emit
+ */
+const emit = defineEmits<{
+  (e: 'serachShopping', data: string): void
+  (e: 'clearInpu', data: string): void
+  (e: 'createGoods'): void
+}>()
+
+/*************************************************
+ * 确定搜索
+ */
+let watchTimer: any = null
+function confirm(e: AnyObject) {
+  if (isInput) {
+    let watchTimer = setTimeout(() => {
+      text.value = ''
+      clearTimeout(watchTimer)
+    }, 500)
+    return toast('该分类暂不支持搜索')
+  }
+  emit('serachShopping', e.value)
+}
+
+/*************************************************
+ * 输入框加载
+ */
+function input(e: string) {
+  if (isInput) {
+    let watchTimer = setTimeout(() => {
+      text.value = ''
+      clearTimeout(watchTimer)
+    }, 500)
+    return toast('该分类暂不支持搜索')
+  }
+  trembling(e)
+}
+const trembling = jx_trembling((e: string) => {
+  emit('serachShopping', e)
+}, 1000)
+
+/*************************************************
+ * 清空输入框
+ */
+function clear(e: AnyObject) {
+  if (isInput) return
+  emit('clearInpu', e.value)
+}
+
+/*************************************************
+ * 新建商品
+ */
+function createGoods() {
+  emit('createGoods')
+}
+</script>
+
+<style lang="scss">
+.search-root {
+  box-sizing: border-box;
+  background-color: $jx-primary;
+  padding: 0 20rpx 2rpx 20rpx;
+  height: 92rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .add-shopping {
+    width: 80rpx;
+    height: 80rpx;
+    background-color: #fff;
+    font-size: 20rpx;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 50%;
+    color: $jx-primary;
+    line-height: 1;
+    padding: 0;
+  }
+}
+</style>