搜索框优化

src/components/index/OtherSearch.vue

-<template>
-  <view class="search">
-    <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
-    <slot></slot>
-    <view class="searchBox">
-      <image
-        class="magnifyingGlass"
-        src="../../static/assets/magnifyingGlass.png"
-        mode="aspectFit|aspectFill|widthFix"
-      />
-      <input
-        type="text"
-        :value="test"
-        class="text"
-        placeholder="请输入要搜索的内容"
-        placeholder-style="font-size:16rpx;"
-      />
-    </view>
-  </view>
-</template>
-
-<script setup>
-// 返回上一级
-function back() {
-  xma.navigateBack({
-    delta: 1,
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.search {
-  width: 710rpx;
-  height: 80rpx;
-  // background: rgba(255, 255, 255, 0.8);
-  border-radius: 16rpx 16rpx 16rpx 16rpx;
-  opacity: 0.8;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20rpx;
-  padding-top: 75rpx;
-  box-sizing: border-box;
-  .arrow {
-    width: 15rpx;
-    height: 24rpx;
-  }
-  .icon {
-    font-size: 28rpx;
-  }
-  .searchBox {
-    opacity: 1;
-    width: 400rpx;
-    height: 56rpx;
-    background: #f4f4f4;
-    border-radius: 28rpx 28rpx 28rpx 28rpx;
-    display: flex;
-    align-items: center;
-    padding-left: 20rpx;
-    margin-left: 20rpx;
-    .magnifyingGlass {
-      width: 26rpx;
-      height: 26rpx;
-    }
-    .text {
-      margin-left: 10rpx;
-      font-size: 24rpx;
-    }
-  }
-}
-</style>

src/components/index/Search.vue

 <template>
   <view class="search">
-    <img class="icon" src="/static/assets/return.png" @tap="back" />
+    <img class="icon" :src="iconSrc" @tap="back" />
+    <!--    <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>-->
     <slot></slot>
     <view class="searchBox">
       <image
         class="magnifyingGlass"
-        src="../../static/preSale/magnifyingGlass.png"
+        src="../../static/assets/magnifyingGlass.png"
         mode="aspectFit|aspectFill|widthFix"
       />
       <input
         type="text"
-        :value="value"
+        :value="test"
         class="text"
-        placeholder="请输入要搜索的内容"
+        :placeholder="placeholderText"
         placeholder-style="font-size:16rpx;"
       />
     </view>
@@ -20,6 +21,17 @@
 </template>
 
 <script setup>
+import { defineProps } from 'vue';
+const props = defineProps({
+  iconSrc: {
+    type: String,
+    default: '',
+  },
+  placeholderText: {
+    type: String,
+    default: '',
+  },
+});
 // 返回上一级
 function back() {
   xma.navigateBack({
@@ -33,33 +45,29 @@ function back() {
   position: absolute;
   width: 710rpx;
   height: 80rpx;
+  // background: rgba(255, 255, 255, 0.8);
   border-radius: 16rpx 16rpx 16rpx 16rpx;
   opacity: 0.8;
   margin: 0 auto;
-  margin-top: 44rpx;
   display: flex;
   align-items: center;
   padding-left: 20rpx;
+  padding-top: 75rpx;
   box-sizing: border-box;
   .arrow {
     width: 15rpx;
     height: 24rpx;
   }
-  .icon {
-    width: 40rpx;
-    height: 40rpx;
-    margin-left: 40rpx;
-  }
   .searchBox {
     opacity: 1;
-    width: 256rpx;
+    width: 400rpx;
     height: 56rpx;
-    background: #ffffff;
+    background: #f4f4f4;
     border-radius: 28rpx 28rpx 28rpx 28rpx;
     display: flex;
     align-items: center;
     padding-left: 20rpx;
-    margin-left: 167rpx;
+    margin-left: 20rpx;
     .magnifyingGlass {
       width: 26rpx;
       height: 26rpx;

src/pages/RuralTravel/RuralTravel.vue

 <template>
   <view>
     <view class="container">
-      <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
+      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
       <view class="bac-img">
         <img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
       </view>
@@ -130,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-import OtherSearch from '../../components/index/OtherSearch.vue';
+import Search from '../../components/index/Search.vue';
 const rotate = ref(false);
 const rotate2 = ref(false);
 const rotate3 = ref(false);

src/pages/detail/detail.vue

@@ -2,7 +2,7 @@
   <view class="container">
     <!--    顶部搜索框-->
     <view class="top">
-      <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
+      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
     </view>
     <!--    图片-->
     <view class="nav">
@@ -84,7 +84,7 @@
 </template>
 
 <script setup>
-import OtherSearch from '../../components/index/OtherSearch.vue';
+import Search from '../../components/index/Search.vue';
 import { ref } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 

src/pages/index/building.vue

@@ -2,18 +2,24 @@
   <view class="container">
     <!--    顶部搜索框-->
     <view class="top">
-      <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
+      <Search
+        background="rgba(255, 255, 255, 0.8)"
+        backIcon="black"
+        iconSrc="/static/assets/blackLeft.png"
+        placeholderText="请输入要搜索的内容"
+      ></Search>
     </view>
     <!--    轮播图-->
     <view class="nav">
       <wd-swiper
-        class="main-img"
+        customImageClass="main-img"
         :list="swiperList"
         autoplay
         v-model:current="current"
         @click="handleClick"
         @change="onChange"
         height="188"
+        mode="aspectFit"
       ></wd-swiper>
       <view class="nav-img">
         <img
@@ -101,7 +107,7 @@
 </template>
 
 <script setup>
-import OtherSearch from '../../components/index/OtherSearch.vue';
+import Search from '../../components/index/Search.vue';
 const current = ref(0);
 const light = ref(0);
 // 轮播图
@@ -355,4 +361,8 @@ page {
 ::v-deep .wd-badge__content.is-fixed {
   margin-top: 20rpx;
 }
+::v-deep.icon {
+  width: 56rpx;
+  height: 56rpx;
+}
 </style>

src/pages/index/index.vue

 <template>
   <view>
     <view class="container">
-      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
+      <Search
+        background="rgba(255, 255, 255, 0.8)"
+        backIcon="black"
+        iconSrc="/static/assets/return.png"
+        placeholderText="请输入要搜索的内容"
+      ></Search>
       <view>
         <img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
         <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
@@ -303,4 +308,9 @@ page {
   margin-top: -23rpx;
   color: #fa5151;
 }
+::v-deep .icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 40rpx;
+}
 </style>

src/pages/index/presale.vue

 <template>
   <view class="container">
     <view class="top">
-      <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
+      <Search
+        background="rgba(255, 255, 255, 0.8)"
+        backIcon="black"
+        iconSrc="/static/assets/left.png"
+        placeholderText="输入商品名称"
+      ></Search>
     </view>
     <view class="nav">
       <wd-swiper
@@ -142,7 +147,7 @@
 </template>
 
 <script setup>
-import OtherSearch from '../../components/index/OtherSearch.vue';
+import Search from '../../components/index/Search.vue';
 import { ref } from 'vue';
 const current = ref(0);
 const light = ref(0);
@@ -500,4 +505,8 @@ page {
 ::v-deep .wd-badge__content.is-fixed {
   margin-top: 20rpx;
 }
+::v-deep.icon {
+  width: 56rpx;
+  height: 56rpx;
+}
 </style>