health-front/pages_order/report/result/index.vue

<template>
  <view class="page__view">
		<navbar title="检测报告" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />

    <view class="main">
      <view id="swiper" class="swiper">
        <view id="home" :class="['swiper-item', 'swiper-item-home', current == 0 ? 'with-tips' : '']">
          <view class="content">
            <resultSummary :data="summaryData"></resultSummary>
          </view>
          <view v-if="current == 0" class="flex footer">
            <image class="footer-icon" src="@/pages_order/static/report/arrow-left.png" mode="widthFix"></image>
            <text>向左滑动卡片，查看推荐补剂及原因</text>
          </view>
        </view>
        <view :id="item.id" :class="['swiper-item', getIsShowTips(index, current) ? 'with-tips' : '']"
          v-for="(item, index) in list" 
          :key="item.id"
        >
          <view class="content">
            <tonicCard :data="item" :index="index"></tonicCard>
          </view>
          <view v-if="getIsShowTips(index, current)" class="flex footer">
            <image class="footer-icon" src="@/pages_order/static/report/arrow-left.png" mode="widthFix"></image>
            <text>向左滑动卡片，查看推荐补剂及原因</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <indicator :current="current" :length="list.length + 1"></indicator>
      <view class="flex bar">
        <button class="flex btn" @click="jumpToReportDetail">详细报告</button>
        <button class="flex btn highlight" @click="jumpToNutritionProgram">查看营养方案</button>
      </view>
    </view>
  </view>
</template>

<script>
  import indicator from '@/components/home/indicator.vue'
  import resultSummary from './resultSummary.vue'
  import tonicCard from './tonicCard.vue'

  export default {
		components: {
      indicator,
      resultSummary,
      tonicCard,
    },
    props: {
      id: {
        type: String | Number,
        default: null,
      }
    },
    data() {
      return {
        current: 0,
        summaryData: {},
        list: [],
        observer: null,
      }
    },
    async mounted() {
      await this.fetchReportData(this.id)
      this.$nextTick(() => {
        this.observeElement()
      })
    },
    unmounted() {
      console.log('unmounted')
      this.observer.disconnect()
    },
    methods: {
      async fetchReportData(id) {
        // todo: fetch

        this.summaryData = {
          score: 77,
          gradeDesc: '良好',
          scoreDetail: [77, 23, 67, 88, 98],
          tags: ['皮肤', '脑力/注意力', '眼睛/视力', '睡眠', '骨骼/关节'],
          topPriority: '脑力/注意力',
        }

        this.list = [
          {
            id: '001',
            url: '', 
            name: '维生素 D',
            nameEn: 'Vitamin D',
            use: '推荐使用·每日一粒',
            title: '缺乏相应的营养物质会导致生长发育不良',
            desc: '维生素D能促进钙的吸收，促进骨骼发育，维生素D3滴剂更利于儿童吸收',
          },
          {
            id: '002',
            url: '', 
            name: '维生素 D',
            nameEn: 'Vitamin D',
            use: '推荐使用·每日一粒',
            title: '缺乏相应的营养物质会导致生长发育不良',
            desc: '维生素D能促进钙的吸收，促进骨骼发育，维生素D3滴剂更利于儿童吸收',
          },
          {
            id: '003',
            url: '', 
            name: '维生素 D',
            nameEn: 'Vitamin D',
            use: '推荐使用·每日一粒',
            title: '缺乏相应的营养物质会导致生长发育不良',
            desc: '维生素D能促进钙的吸收，促进骨骼发育，维生素D3滴剂更利于儿童吸收',
          },
        ]
      },
      observeElement() {
        this.observer = uni.createIntersectionObserver(this, { observeAll: true, thresholds: [0.5] });

        this.observer.relativeTo('.swiper').observe('.swiper-item', res => {
          let current = 0

          if (res.intersectionRatio > 0.5) {
            current = res.id === 'home' ? 0 : this.list.findIndex(item => item.id === res.id)
          } else if (res.intersectionRatio > 0) {
            current = res.id === 'home' ? 0 : this.list.findIndex(item => item.id === res.id) + 1

            if (res.boundingClientRect.left > 0) {
              current -= 1
            } else {
              current += 1
            }
          }

          this.current = current
        })
 
      },
      getIsShowTips(index, current) {
        return current == index + 1 && current < this.list.length
      },
      jumpToReportDetail() {
        this.$utils.navigateTo(`/pages_order/report/detail/index?id=${this.id}`)
      },
      jumpToNutritionProgram() {
        this.$utils.navigateTo(`/pages_order/report/nutritionProgram/index?id=${this.id}`)
      },
    },
  }
</script>

<style scoped lang="scss">
.page__view {
  width: 100vw;
  min-height: 100vh;
  background-color: $uni-bg-color;
  position: relative;
}

.swiper {
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
  width: 100vw;
  // height: calc(100vh * 640 / 882);
  height: auto;
  margin-top: 32rpx;

  &::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
}
$tips-height: 108rpx;
.swiper-item {
  position: relative;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  $swiper-width: calc(100vw * 300 / 375);
  width: $swiper-width;
  // height: 100%;
  // height: auto;
  // height: 1186rpx;
  height: 1162rpx;
  margin-left: 32rpx;
  padding-bottom: $tips-height;
  // box-sizing: border-box;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    
    width: calc(100% - 8rpx * 2);
    height: calc(100% - 8rpx * 2);
    background-image: linear-gradient(#F2EDFF, #FCFEFE);
    border: 8rpx solid #F9F7FF;
    border-radius: 64rpx;
  }

  &.with-tips {
    .content {
      height: calc(100% - 8rpx);
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &-home {
    width: calc(100vw * 322 / 375);
    // height: 1320rpx;
    // height: auto;
    .content {
      overflow-y: auto;
    }
  }

  &:last-child {
    margin-right: calc((100vw - #{$swiper-width}) / 2);
  }

}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: $tips-height;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  line-height: 1.5;
  color: #252545;
  background: #E5E4EB;
  border-bottom-left-radius: 64rpx;
  border-bottom-right-radius: 64rpx;

  &-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
  }
}

.bottom {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

.bar {
  padding: 24rpx 40rpx 30rpx 40rpx;
  background: #FFFFFF;
  column-gap: 32rpx;
  margin-top: 16rpx;

  .btn {
    flex: 1;
    font-family: PingFang SC;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 1;
    padding: 14rpx 0;
    border: 2rpx solid #252545;
    border-radius: 41rpx;

    &.highlight {
      padding: 16rpx 0;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border: none;
    }
  }
}

</style>