YNUtdPlatform/pages/HealthExaminationApp/myAppointment/healthExamDetails.vue

<template>
  <view>
    <div class="content">
      <h2 style="text-align: center">体检单据</h2>
      <div class="title">套餐名称:</div>
      <div>{{ combName }}</div>

      <div class="title">体检项目:</div>
      <div>{{ combItem }}</div>

      <div class="title">体检内容:</div>
      <div v-for="(item, index) in combContent" :key="index">
        <div class="item-content">
          <div style="width: 240px">{{ item.mealName }}：{{ item.mealContent }}</div>
          <div style="color: red; margin-left: 15px">{{ item.mealPrice }} 元</div>
        </div>
        <u-line dashed style="margin-bottom: 10px"></u-line>
      </div>

      <div class="title" style="color: red">体检总价：{{ totalPrice }} 元</div>
    </div>
  </view>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      token: '',
      cancelId: '',
      // 套餐名称
      combName: '',
      // 体检项目
      combItem: '',
      // 体检内容
      combContent: [],
      // 体检总价
      totalPrice: 0
    }
  },
  onLoad(opt) {
    opt = JSON.parse(opt.params)
    this.combName = opt.combName
    this.cancelId = opt.id
    console.log('🚀 ~ onLoad ~ onLoad', opt)
    this.token = uni.getStorageSync('tjToken')
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      const params = {
        cancelId: String(this.cancelId),
        token: this.token
      }
      console.log('🚀 ~ getDetail ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getcontentByid',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getDetail ~ res:', res)
          if (res.res == 1) {
            this.combContent = res.obj
            this.combItem = res.obj.map(item => item.mealName).join('、')
            this.totalPrice = res.obj.reduce((total, item) => total + Number(item.mealPrice), 0)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 5px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 2.5;
  }

  .item-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    word-break: break-all;
  }
}
</style>