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 productList" 
          :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="productList.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 {
        id: null,
        current: 0,
        summaryData: {},
        productList: [],
        observer: null,
      }
    },
    async onLoad(arg) {
      const { id } = arg
      this.id = id
      await this.fetchReportData(id)
      this.$nextTick(() => {
        this.observeElement()
      })
    },
    unmounted() {
      this.observer.disconnect()
    },
    methods: {
      async fetchReportData(id) {

        try {
          const result = await this.$fetch('getReportDetail', { id })

          const { 
            score,
            scoreDetail,
            json,
            productList, 
          } = result

          let detail = JSON.parse(json)?.filter(item => ['0', '1'].includes(item.type))
          console.log('detail', detail)
          
          this.summaryData = {
            score: parseInt(score),
            scoreDetail: JSON.parse(scoreDetail).map(item => ({ name: item.name, score: parseInt(item.score) })),
            detail,
          }

          this.productList = productList


          console.log('summaryData', this.summaryData)
          console.log('productList', this.productList)

        } catch (err) {

        }

      },
      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.productList.findIndex(item => item.id === res.id)
          } else if (res.intersectionRatio > 0) {
            current = res.id === 'home' ? 0 : this.productList.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.productList.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;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  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>