cps：新增搜索页

htmldev/cps/src/App.vue

@@ -63,6 +63,7 @@ export default {
 
 <style lang="scss">
 @import "./assets/styles/reset";
+@import "./assets/styles/shop.css";
 
 body {
   background: #F7F6F9;

htmldev/cps/src/assets/styles/shop.css

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: "shopfont"; /* Project id  */
+  src: url('../fonts/shop.ttf?t=1637031976812') format('truetype');
+}
+
+.shopfont {
+  font-family: "shopfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.shopfont-shuangliebiao:before {
+  content: "\e6bb";
+}
+
+.shopfont-liebiao:before {
+  content: "\ec6b";
+}
+
+.shopfont-jingdong-:before {
+  content: "\e643";
+}
+
+.shopfont-ziyuan-:before {
+  content: "\e6a8";
+}
+
+.shopfont-pinduoduo1:before {
+  content: "\e602";
+}
+
+.shopfont-taobao:before {
+  content: "\e615";
+}
+
+.shopfont-kaolahaigou:before {
+  content: "\e627";
+}
+

htmldev/cps/src/views/search/index.vue

@@ -1,13 +1,201 @@
 <template>
-  <div>111</div>
+  <div>
+    <form
+      class="fbt-form"
+      action="/">
+      <van-search
+        v-model="searchValue"
+        show-action
+        :shape="'round'"
+        placeholder="搜索商品标题 领优惠券拿返现"
+        @search="onSearch">
+        <template #action>
+          <div
+            class="btn"
+            @click="onSearch">搜索
+          </div>
+        </template>
+      </van-search>
+    </form>
+    <!--商家-->
+    <div
+      class="business-list">
+      <van-tabs
+        v-model="businessValue"
+        :color="'#F09E38'"
+        :title-active-color="'#333333'"
+        :title-inactive-color="'#515151'"
+        :background="'#fff'"
+        @click="fetchGoodsList"
+        ref="fbtCateList">
+        <van-tab
+          :name="item.value"
+          v-for="item in sourceList"
+          :key="item.value">
+          <template #title>选项</template>
+        </van-tab>
+      </van-tabs>
+    </div>
+    <ul class="filter-wrap border-top-1px">
+      <li
+        :class="{'active': condition === item.value}"
+        v-for="item in filterList"
+        :key="item.value"
+        @click="condition = item.value">选项
+      </li>
+      <li
+        @click="showType = showType === 1 ? 2 : 1">
+        <span
+          :class="['shopfont', showType === 1 ? 'shopfont-liebiao' : 'shopfont-shuangliebiao']"></span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
+import { Search, Tabs, Tab } from 'vant'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-search': Search,
+    'van-tabs': Tabs,
+    'van-tab': Tab
+  },
+  data () {
+    return {
+      searchValue: '',
+      sourceList: [
+        {
+          name: '京东',
+          value: 'jd'
+        },
+        {
+          name: '唯品会',
+          value: 'vip'
+        },
+        {
+          name: '拼多多',
+          value: 'pdd'
+        },
+        {
+          name: '考拉',
+          value: 'kaola'
+        },
+        {
+          name: '淘宝',
+          value: 'taobao'
+        }
+      ], // 商家列表
+      // 1-综合排序,2-价格升序,3-销量降序 默认1
+      filterList: [
+        {
+          name: '综合',
+          value: 1
+        },
+        {
+          name: '销量',
+          value: 2
+        },
+        {
+          name: '价格',
+          value: 3
+        }
+      ],
+      businessValue: 'jd',
+      condition: 1,
+      showType: 1 // 列表展示方式
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+    } else {}
+    setTimeout(() => {
+      this.$refs.fbtCateList.resize()
+    }, 500)
+    this.$route.meta.isUseCache = false
+  },
+  methods: {
+    onSearch (val) {
+      console.log(val)
+    },
+    fetchGoodsList () {}
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.fbt-form {
+  ::v-deep .van-search {
+    padding-bottom: 0;
+
+    .van-cell {
+      align-items: center;
+
+      input {
+        color: #333;
+        -webkit-text-fill-color: #333;
+        opacity: 1;
+
+        &::-webkit-input-placeholder {
+          -webkit-text-fill-color: #999;
+          opacity: 1;
+          color: #999;
+        }
+      }
+    }
+  }
+
+  .btn {
+    font-size: 16px;
+    color: #333;
+  }
+}
+
+.cate-header {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ::v-deep .van-tabs {
+    width: calc(100% - 42px);
 
+    .van-tabs__nav--line {
+      .van-tab {
+        &--active {
+
+          .van-tab__text {
+            font-size: 16px !important;
+            font-weight: bold;
+          }
+        }
+
+        .van-tab__text {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+.filter-wrap {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  @include border-top-1px(#eee);
+
+  li {
+    flex: 1;
+    line-height: 40px;
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+
+    &.active {
+      font-weight: bolder;
+      color: #333;
+    }
+  }
+}
 </style>