health-front/pages_order/product/tabDetect/index.vue

<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search">
      <uv-search 
        v-model="keyword"
        placeholder="请输入要查询的内容"
        placeholderColor="#C6C6C6"
        searchIconColor="#8B8B8B"
        :searchIconSize="40" 
        :inputStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.4,
          'padding': '12rpx 0',
        }"
        bgColor="#fff" 
        :showAction="false"
        @search="search"
      ></uv-search>
    </view>

    <view class="intro">
      <image class="bg" src="@/pages_order/static/product/intro-bg.png" mode="heightFix"></image>
      <view class="content">
        <view class="font1">你是独一无二的</view>
        <view class="font2">你的健康数据也是</view>
        <view class="font3">普兆，即精准</view>

        <button class="flex btn">
          <image class="btn-icon" src="@/pages_order/static/index/btn-icon.png" mode="widthFix"></image>
          <text>定制健康档案</text>
        </button>
      </view>
    </view>

    <view class="section">
      <view class="section-header">
        <sectionHeader title="推荐检测" @showAll="jumpToRecommendDetect"></sectionHeader>
      </view>
      <detectRecommendSwiper></detectRecommendSwiper>
    </view>
    <view class="section">
      <view class="section-header">
        <sectionHeader title="个性化检测包" @showAll="jumpToPersonalDetect"></sectionHeader>
      </view>
      <detectPackageViewVue></detectPackageViewVue>
    </view>
    <view class="section">
      <view class="section-header">
        <sectionHeader title="自选检测" @showAll="jumpToCustomDetect"></sectionHeader>
      </view>
      <slot name="custom"></slot>
    </view>
  </view>
</template>

<script>
	import sectionHeader from '../sectionHeader.vue'
  import detectRecommendSwiper from './detectRecommendSwiper.vue'
  import detectPackageViewVue from './detectPackageView.vue'

  export default {
		components: {
      sectionHeader,
      detectRecommendSwiper,
      detectPackageViewVue,
    },
    data() {
      return {
				keyword: '',
      }
    },
    methods: {
			// 搜素
			search() {
				uni.navigateTo({
					url: `/pages_order/product/productList?type=1&search=${this.keyword}&title=检测`
				})
				// this.keyword = ''
			},
      jumpToRecommendDetect() {
				uni.navigateTo({
					url: `/pages_order/product/productList?type=1&homeRecommend=Y&title=推荐检测`
				})
      },
      jumpToPersonalDetect() {
        // todo
				uni.navigateTo({
					url: `/pages_order/product/productList?type=1&title=自选检测`
				})
      },
      jumpToCustomDetect() {
				uni.navigateTo({
					url: `/pages_order/product/productList?type=1&title=自选检测`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../styles/tab.scss';

</style>