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" @click="jumpToComment">
          <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="onBuy"
        >
          <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 {
        productId: '',
        list: [],
        comment: 0,
      }
    },
    computed: {
      selectedCount() {
        let count = 0

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

        return count
      },
    },
    async onLoad(arg) {
      const { id } = arg
      await this.fetchReportData(id)

      this.fetchCommentNum(this.productId)
    },
    methods: {
      async fetchCommentNum(productId) {
        try {
          this.comment = await this.$fetch('productEvaluateNum', { productId })
        } catch (err) {

        }
      },
      async fetchReportData(id) {

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

          const detectList = []
          const nutrientList = []
          const courseList = []
          const ids = []

          productList.forEach(item => {
            // 产品类型（0营养剂，1预约，2课程）
            const { id, type, specs, currentPrice } = item

            ids.push(id)

            const spec = specs?.[0] || {}
            
            const obj = { 
              ...item, 
              specId: spec.id, 
              specName: spec.specName,
              currentPrice: spec.price || currentPrice,
              selected: true, 
            }
            
            switch(type) {
              case '0':
                nutrientList.push(obj)
                break;
              case '1':
                detectList.push(obj)
                break;
              case '2':
                courseList.push(obj)
                break;
              default:
                break;
            }
          })


          this.list = [
            { 
              id: '001', 
              name: '检测方案', 
              desc: '刚开始健康检测？专家推荐先做这几项', 
              url: '/pages_order/static/report/report-nutrition-1.png',
              children: detectList
            },
            { 
              id: '002', 
              name: '基础方案', 
              desc: `刚开始吃维生素？营养师建议从这${nutrientList.length}颗开始`, 
              url: '/pages_order/static/report/report-nutrition-2.png',
              children: nutrientList
            },
            // todo: check is need?
            { 
              id: '003', 
              name: '课程方案', 
              desc: '', 
              url: '/pages_order/static/report/report-detail-3.png',
              children: courseList
            },
          ]
          this.productId = ids.join(',')

          console.log('list', this.list)
          console.log('productId', this.productId)

        } catch (err) {

        }

      },
      onSelect(stepIdx, childIdx, selected) {
        this.list[stepIdx].children[childIdx].selected = selected
      },
      getSelectedList() {
        return this.list.reduce((arr, step) => {
          const selectedArr = step.children.filter(product => product.selected)

          return arr.concat(selectedArr)
        }, [])
      },
      jumpToComment() {
        this.$utils.navigateTo(`/pages_order/comment/commentRecordsOfProduct?productId=${this.productId}`)
      },
      onAddCart() {
        const selectedList = this.getSelectedList()

				this.$store.dispatch('addCartBatch', selectedList)
      },
      onBuy() {
        const selectedList = this.getSelectedList()

				this.$store.commit('createOrder', selectedList)
      },
    },
  }
</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;
  }
}

.tips {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 18rpx;
  line-height: 1.4;
  color: #989898;
}

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

.bottom {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 24rpx 40rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  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>