搜索页面样式优化

pages/search/search.vue

@@ -1,7 +1,21 @@
 <template>
   <view class="page search-page" :class="{ show: shown }">
-    <fy-header title="搜索" back />
+    <view class="top" :style="{ paddingTop: status + 'px' }">
-    <wd-search v-model="q" placeholder="搜索同事、会话或待办" hide-cancel focus placeholder-left />
+      <text class="back" @click="back">‹</text>
+      <view class="bar">
+        <wd-icon name="search" size="30rpx" color="#9CA3AF" />
+        <input
+          class="field"
+          :focus="keyOn"
+          v-model="q"
+          placeholder="搜索同事、会话或待办"
+          confirm-type="search"
+          :adjust-position="true"
+          hold-keyboard
+          @blur="onBlur"
+        />
+      </view>
+    </view>
     <view v-if="!q.trim()">
       <wd-status-tip image="search" tip="搜索同事、会话或待办" />
     </view>
@@ -46,15 +60,28 @@
 </template>
 
 <script>
-import FyHeader from '../../components/fy-header.vue'
 import FyFileMark from '../../components/fy-file-mark.vue'
 import { store, previewOf } from '../../utils/store.js'
 
 export default {
-  components: { FyHeader, FyFileMark },
+  components: { FyFileMark },
-  data() { return { q: '', shown: false } },
+  data() { return { q: '', shown: false, keyOn: false, status: 20 } },
+  created() {
+    try { this.status = uni.getSystemInfoSync().statusBarHeight || 20 } catch (_) {}
+  },
   onShow() {
+    this.shown = false
+    this.keyOn = false
     this.$nextTick(() => { this.shown = true })
+    clearTimeout(this._key)
+    this._key = setTimeout(() => {
+      this.keyOn = false
+      this.$nextTick(() => { this.keyOn = true })
+    }, 320)
+  },
+  onHide() {
+    this.keyOn = false
+    clearTimeout(this._key)
   },
   computed: {
     people() {
@@ -87,6 +114,14 @@ export default {
     }
   },
   methods: {
+    onBlur() {
+      this.keyOn = false
+    },
+    back() {
+      const pages = getCurrentPages()
+      if (pages.length > 1) uni.navigateBack()
+      else uni.switchTab({ url: '/pages/tabs/messages' })
+    },
     openPerson(p) {
       uni.navigateTo({ url: '/pages/contact/detail?id=' + encodeURIComponent(p.id) })
     },
@@ -117,6 +152,33 @@ export default {
   transform: translateX(0);
   transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
+.top {
+  display: flex;
+  align-items: center;
+  padding-right: 24rpx;
+  padding-bottom: 12rpx;
+  background: #F5F7FA;
+}
+.back {
+  width: 72rpx;
+  text-align: center;
+  font-size: 52rpx;
+  line-height: 1;
+  color: #111827;
+  font-weight: 300;
+  flex-shrink: 0;
+}
+.bar {
+  flex: 1;
+  height: 64rpx;
+  border-radius: 12rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 16rpx;
+  border: 1rpx solid rgba(17, 24, 39, 0.06);
+}
+.field { flex: 1; height: 64rpx; font-size: 28rpx; margin-left: 8rpx; }
 .search { padding: 12rpx 28rpx 16rpx; }
 .search input { height: 80rpx; background: #fff; border-radius: 20rpx; padding: 0 28rpx; font-size: 28rpx; border: 1rpx solid rgba(17,24,39,0.06); }
 .sec { padding: 24rpx 28rpx 8rpx; font-size: 24rpx; color: #6B7280; }

pages/tabs/messages.vue

@@ -6,8 +6,8 @@
       </template>
     </fy-header>
     <view class="finder" @click="goSearch">
-      <text class="finder-ico">⌕</text>
+      <wd-icon name="search" size="28rpx" color="#9CA3AF" />
-      <text>搜索</text>
+      <text class="finder-txt">搜索</text>
     </view>
     <fy-scroll class="edge-scroll list" dock @refresh="reload">
       <view v-if="!rows.length" class="empty">暂无会话</view>
@@ -141,17 +141,16 @@ export default {
 <style scoped>
 .msg { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }
 .finder {
-  margin: 12rpx 24rpx 16rpx;
+  margin: 8rpx 24rpx 12rpx;
-  height: 72rpx;
+  height: 56rpx;
-  border-radius: 16rpx;
+  border-radius: 12rpx;
   background: #F3F4F6;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9CA3AF;
-  font-size: 28rpx;
 }
-.finder-ico { margin-right: 8rpx; font-size: 30rpx; }
+.finder-txt { margin-left: 8rpx; font-size: 26rpx; line-height: 1; }
 .list { background: #fff; }
 .ico.sm { font-size: 34rpx; color: #1677FF; }
 .item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }