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

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

    <view class="main">
      <reportCard>
        <view class="section header">
          <view>营养师基于你生活习惯和营养目标推荐</view>
          <view class="highlight">量身定制的营养方案</view>
        </view>
        <view class="section" v-for="(step, index) in list" :key="step.key">
          <view class="flex section-header">
            <view class="section-header-index">
              <text>{{ index + 1 }}</text>
              <image class="section-header-index-icon" :src="step.url" mode="widthFix"></image>
            </view>
            <view class="section-header-title">
              <view class="section-header-title-name">{{ step.name }}</view>
              <view class="section-header-title-desc">{{ step.desc }}</view>
            </view>
          </view>
          <view class="section-content">
            <view class="card" v-for="(item, idx) in step.children" :key="item.key" >
              <productCard :data="item" @select="onSelect(index, idx, $event)" ></productCard>
            </view>
          </view>
        </view>
        <view class="section tips">
          *以上是根据你的营养目标以及饮食、运动、作息状况给出的针对性健康建议，可以辅助你达成营养目标，同时养成良好的生活习惯。
        </view>
      </reportCard>
    </view>

    <view class="flex bottom">
      <view class="left">
        <button class="btn btn-comment">
          <view>查看评价</view>
          <view class="flex"><text class="highlight">{{ `${comment} 条` }}</text><uv-icon name="arrow-right" color="#C6C6C6" size="28rpx"></uv-icon></view>
        </button>
      </view>
      <view class="flex right">
        <button 
          class="flex btn btn-cart" 
          :disabled="!selectedCount"
          :class="[selectedCount ? '' : 'is-disabled']"
          @click="onAddCart"
        >
          <text>加入购物车</text>
        </button>
        <button 
          class="flex btn btn-settle" 
          :class="[selectedCount ? '' : 'is-disabled']"
          :disabled="!selectedCount"
          @click="onSettle"
        >
          <text>结算</text>
          <text v-if="selectedCount">{{ `(${selectedCount}种)` }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  import reportCard from '@/pages_order/components/reportCard.vue';
  import productCard from './productCard.vue';

  export default {
		components: {
      reportCard,
      productCard,
    },
    data() {
      return {
        list: [],
        comment: 0,
      }
    },
    computed: {
      selectedCount() {
        let count = 0

        this.list.forEach(step => {
          step.children.forEach(item => {
            item.selected && count++
          })
        })

        return count
      },
    },
    onLoad() {
      
      const detectionList = [
        { 
          id: '0011', 
          url: '/pages_order/static/report/detection-eyes.png', 
          name: '眼科检查',
          desc: '早期发现眼部疾病',
          originalPrice: 168,
          price: 68.00,
          unit: '次',
          count: 1,
          selected: false,
        },
      ]
      const baseList = [
        { 
          id: '0021', 
          url: '/pages_order/static/index/medicine-1.png', 
          name: '全株印度人参',
          desc: '安享睡眠情绪舒展',
          originalPrice: 688,
          price: 1664,
          unit: '月',
          count: 1,
          selected: false,
          customized: true,
        },
        { 
          id: '0022', 
          url: '/pages_order/static/index/medicine-2.png', 
          name: '御氧虾青素',
          desc: '安享睡眠情绪舒展',
          originalPrice: 688,
          price: 1664,
          unit: '月',
          count: 1,
          selected: false,
          customized: true,
        },
        { 
          id: '0023', 
          url: '/pages_order/static/index/medicine-3.png', 
          name: '全株印度人参',
          desc: '安享睡眠情绪舒展',
          originalPrice: 688,
          price: 1664,
          unit: '月',
          count: 1,
          selected: false,
          customized: true,
        },
        { 
          id: '0024', 
          url: '/pages_order/static/index/medicine-4.png', 
          name: '全株印度人参',
          desc: '安享睡眠情绪舒展',
          originalPrice: 688,
          price: 1664,
          unit: '月',
          count: 1,
          selected: false,
          customized: true,
        },
      ]

      this.list = [
        { 
          id: '001', 
          name: '检测方案', 
          desc: '刚开始健康检测？专家推荐先做这几项', 
          url: '/pages_order/static/report/report-nutrition-1.png',
          children: detectionList
        },
        { 
          id: '002', 
          name: '基础方案', 
          desc: `刚开始吃维生素？营养师建议从这${baseList.length}颗开始`, 
          url: '/pages_order/static/report/report-nutrition-2.png',
          children: baseList
        },
      ]

      this.comment = 23898
    },
    methods: {
      onSelect(stepIdx, childIdx, selected) {
        console.log('onSelect', stepIdx, childIdx, selected)

        this.list[stepIdx].children[childIdx].selected = selected

        // todo
      },
      onAddCart() {
        console.log('onAddCart')

        // todo
      },
      onSettle() {
        console.log('onSettle')

        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.page__view {
  width: 100vw;
  min-height: 100vh;
  background-color: $uni-bg-color;
  position: relative;
  
  /deep/ .nav-bar__view {
    position: fixed;
    top: 0;
    left: 0;
  }
}

.main {
  padding: calc(var(--status-bar-height) + 152rpx) 32rpx 272rpx 32rpx;
}

.section {
  & + & {
    margin-top: 48rpx;
    padding-top: 12rpx;
    border-top: 2rpx dashed #989898;
  }

  &-header {
    justify-content: flex-start;

    &-index {
      position: relative;
      font-family: HarmonyOS Sans;
      font-weight: 700;
      font-size: 96rpx;
      line-height: 1.4;
      color: #D9D9D9;

      &-icon {
        position: absolute;
        left: 34rpx;
        top: 70rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }

    &-title {
      margin-left: 32rpx;
      font-family: PingFang SC;
      line-height: 1.4;
      color: #252545;

      &-name {
        font-weight: 600;
        font-size: 40rpx;
      }

      &-desc {
        font-weight: 400;
        font-size: 26rpx;
      }
    }
  }

  &-content {
    padding-top: 18rpx;

  }
}

.section.header {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 36rpx;
  line-height: 1.2;
  color: #252545CC;

  .highlight {
    font-size: 48rpx;
    line-height: 1.4;
    font-weight: 600;
    font-family: PingFang SC;
    color: transparent;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    background-clip: text;
    display: inline-block;
  }
}

.card {
  & + & {
    margin-top: 32rpx;
  }
}

.bottom {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 24rpx 40rpx 92rpx 40rpx;
  box-sizing: border-box;
  background: #FFFFFF;
  column-gap: 16rpx;

  .left {
  }

  .right {
    flex: 1;
    column-gap: 32rpx;
  }

  .btn {
    
    &-comment {
      display: inline-block;
      width: auto;
      text-align: left;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #626262;

      .highlight {
        margin-right: 4rpx;
        font-family: 600;
        font-size: 30rpx;
        color: #252545;
      }
    }

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

    &-settle {
      flex: 1;
      padding: 16rpx 0;
      font-family: PingFang SC;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 1;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border-radius: 41rpx;
    }

    &.is-disabled {
      opacity: 0.5;
    }
  }
}
</style>