health-front/pages_order/product/tabNutrient/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">
      <sectionHeader title="推荐产品" @showAll="jumpToRecommendNutrient"></sectionHeader>
      <nutrientRecommendSwiper></nutrientRecommendSwiper>
    </view>
    <view class="section section-custom">
      <sectionHeader style="padding-bottom: 16rpx;" title="自选补剂" @showAll="jumpToCustomNutrient"></sectionHeader>
      <nutrientCustomView></nutrientCustomView>
    </view>
  </view>
</template>

<script>
	import sectionHeader from '@/components/home/sectionHeader.vue'
  import nutrientRecommendSwiper from './nutrientRecommendSwiper.vue'
  import nutrientCustomView from './nutrientCustomView.vue'

  export default {
		components: {
      sectionHeader,
      nutrientRecommendSwiper,
      nutrientCustomView,
    },
    data() {
      return {
				keyword: '',
      }
    },
    mounted() {
    },
    methods: {
			// 搜素
			search() {
        // todo
				uni.navigateTo({
					url: '/pages/index/category?search=' + this.keyword
				})
				this.keyword = ''
			},
      jumpToRecommendNutrient() {
        // todo
      },
      jumpToCustomNutrient() {
        // todo
      },
    },
  }
</script>

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

</style>