v1.0

pages/search/search.vue

@@ -0,0 +1,131 @@
+<template>
+  <layout>
+    <uv-navbar
+      :fixed="false"
+      title="搜索"
+      left-arrow
+      @leftClick="$onClickLeft"
+    />
+    <view class="search-bar">
+      <uv-search
+        v-model="keyword"
+        shape="round"
+        placeholder="搜索商品"
+        show-action
+        @search="onSearch"
+        @cancel="onCancel"
+      >
+        <template #action>
+          <view>
+            <text @tap="onSearch">搜索</text>
+          </view>
+        </template>
+      </uv-search>
+    </view>
+    <!-- 
+    <view class="search-box">
+      <view class="search-box-header">
+        <view class="search-box-title">热门搜索</view>
+      </view>
+      <view>
+        <space warp>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+        </space>
+
+      </view>
+    </view>
+    <blank size="10"></blank>
+    <view class="search-box">
+      <view class="search-box-header">
+        <view class="search-box-title">历史搜索</view>
+        <view class="search-box-action">
+          <image src="@/static/images/delete.png" />
+        </view>
+      </view>
+
+      <view>
+        <space warp>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+          <uv-tag type="primary">标签</uv-tag>
+        </space>
+
+      </view>
+    </view> -->
+
+  </layout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onReady, onReachBottom } from '@dcloudio/uni-app'
+import * as router from '@/utils/router'
+import { useGlobalProperties } from '@/hooks';
+
+const searchRef = ref();
+const keyword = ref('');
+
+
+const { $yrouter } = useGlobalProperties()
+
+
+const onSearch = () => {
+  console.log("--> % keyword:\n", keyword.value)
+  // refresh()
+  $yrouter.navigateTo({
+    url: '/pages/goodsList/goodsList',
+    query: {
+      keyword: keyword.value
+    }
+  })
+}
+
+
+const onCancel = () => {
+
+}
+
+
+// onReady(() => {
+//   searchRef.value?.focus();
+// })
+
+
+</script>
+
+<style lang="less">
+.search-box {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-title {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+    margin-bottom: 20rpx;
+  }
+
+  &-action {
+    width: 28rpx;
+    height: 28rpx;
+
+    .image {
+      display: block;
+      width: 28rpx;
+      height: 28rpx;
+    }
+  }
+
+
+  background: #fff;
+  padding: 40rpx 35rpx 30rpx;
+}
+</style>