fix: 【商城装修】完善导航栏搜索框的装修，同时添加扫一扫功能

sheep/components/s-block/s-block.vue

@@ -18,7 +18,6 @@
   });
 
   // 组件样式
-
   const elBackground = computed(() => {
     if (props.styles) {
       if (props.styles.bgType === 'color')

sheep/components/s-custom-navbar/components/navbar-item.vue

@@ -23,10 +23,13 @@
     <view class="ss-flex-1" v-if="data.type === 'search'" :style="[{ width: width }]">
       <s-search-block
         :placeholder="data.placeholder || '搜索关键字'"
+        :placeholder-position="data.placeholderPosition"
         :radius="data.borderRadius"
-        elBackground="#fff"
+        :el-background="data.backgroundColor"
+        :font-color="data.textColor"
         :height="height"
         :width="width"
+        :show-scan="data.showScan"
         @click="sheep.$router.go('/pages/index/search')"
       ></s-search-block>
     </view>

sheep/components/s-search-block/s-search-block.vue

@@ -12,12 +12,24 @@
     ]"
     :class="[{ 'border-content': navbar }]"
   >
-    <view class="ss-flex ss-col-center" v-if="navbar">
+    <view class="ss-flex ss-col-center"
-      <view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
+          :class="[placeholderPosition === 'center' ? 'ss-row-center' : 'ss-row-left']"
-      <view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
+          v-if="navbar" style="width: 100%;"
+    >
+      <view class="search-icon _icon-search" :style="{ color: fontColor, margin: '0 10rpx' }"></view>
+      <view class="search-input ss-line-1" :style="{ color: fontColor }">
         {{ placeholder }}
       </view>
     </view>
+    <!-- 右侧扫一扫图标 -->
+    <view
+      v-if="showScan"
+      class="scan-icon _icon-add-round-o"
+      :style="{ color: fontColor }"
+      @tap.stop="onScan"
+      style="margin-left: auto;"
+    >
+    </view>
     <uni-search-bar
       v-if="!navbar"
       class="ss-flex-1"
@@ -34,8 +46,8 @@
           class="ss-m-r-16"
           :style="[{ color: data.textColor }]"
           @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
-          >{{ item }}</view
+        >{{ item }}
-        >
+        </view>
       </view>
     </view>
     <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
@@ -107,6 +119,16 @@
       type: String,
       default: '这是一个搜索框',
     },
+    // placeholder位置（left | center）
+    placeholderPosition: {
+      type: String,
+      default: 'left',
+    },
+    // 是否显示扫一扫图标
+    showScan: {
+      type: Boolean,
+      default: false,
+    },
     radius: {
       type: Number,
       default: 10,
@@ -134,6 +156,41 @@
       }, 100);
     }
   }
+
+  // TODO 后续需完善扫一扫功能
+  /**
+   * 扫一扫
+   */
+  function onScan() {
+    uni.scanCode({
+      onlyFromCamera: false,
+      sound: 'default',
+      scanType: ['qrCode', 'barCode'],
+      success: (res) => {
+        showScanResult(res.result);
+      },
+      fail: (err) => {
+        console.error(err);
+        uni.showToast({
+          title: '扫码失败',
+          icon: 'none',
+        });
+      },
+    });
+  }
+
+  /**
+   * 展示扫码结果
+   * @param text  扫码内容
+   */
+  function showScanResult(text) {
+    uni.showModal({
+      title: '扫描结果',
+      content: text,
+      showCancel: false,
+      confirmText: '知道了',
+    });
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -151,6 +208,11 @@
       margin-right: 20rpx;
     }
 
+    .scan-icon {
+      font-size: 38rpx;
+      margin-right: 20rpx;
+    }
+
     .keyword-link {
       position: absolute;
       right: 16rpx;