ylrz_his_scrm_adminUI/src/views/components/his/packageDetails.vue

<template>

  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      套餐包详情
    </div>

<div class="content" v-if="item!=null">
    <div class="desct">
      套餐包信息
    </div>
    <el-descriptions title="" :column="3" border>
    <el-descriptions-item label="套餐包名称" >
        <span v-if="item!=null">{{item.packageName}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="状态" >
         <dict-tag :options="statusOptions" :value="item.status"/>
    </el-descriptions-item>
    <el-descriptions-item label="类型" >
         <dict-tag :options="packageTypeOptions" :value="item.packageType"/>
    </el-descriptions-item>
    <el-descriptions-item label="子类型" >
         <dict-tag :options="packageSubTypeOptions" :value="item.packageSubType"/>
    </el-descriptions-item>
    <el-descriptions-item label="疾病类型" >
         <dict-tag :options="diseaseTypeOptions" :value="item.diseaseType"/>
    </el-descriptions-item>
    <el-descriptions-item label="总价 元/天" >
         <span v-if="item!=null">{{item.price}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="套餐价" >
         <span v-if="item!=null">{{item.totalPrice}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="周期" >
         <span v-if="item!=null">{{item.cycle}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="签约时长" >
         <span v-if="item!=null">{{item.duration}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="是否展示" >
         <dict-tag :options="orOptions" :value="item.isShow"/>
    </el-descriptions-item>

    <el-descriptions-item label="排序" >
        <span v-if="item!=null">{{item.sort}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="套餐医生" >
         <span v-if="item!=null">{{item.doctors}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="项目" >
         <span v-if="selectedProject">{{selectedProject.dictLabel}}</span>
         <span v-else>-</span>
    </el-descriptions-item>
    <el-descriptions-item label="课程" >
         <span v-if="selectedCourse">{{selectedCourse.courseName}}</span>
         <span v-else>-</span>
    </el-descriptions-item>
    <el-descriptions-item label="创建时间" >
        <span v-if="item!=null">{{item.createTime}}</span>
    </el-descriptions-item>

    <el-descriptions-item label="修改时间" >
        <span v-if="item!=null">{{item.updateTime}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="封面图" >
        <el-image v-for="img in item.imgUrl" :key="img"
            style="width: 100px"
            :src="img"
            :preview-src-list="[img]">
        </el-image>
    </el-descriptions-item>
    <el-descriptions-item label="所属小程序">
      <el-tag
        v-for="name in appNames"
        :key="name"
        style="margin-right: 4px"
      >
        {{ name }}
      </el-tag>
    </el-descriptions-item>
        </el-descriptions>
            </div>
<div class="content" v-if="item!=null">
<div class="desct">
  商品内容
</div>
  <el-table border width="100%" style="margin-top:5px;"  :data="productJson">
                <el-table-column label="商品图片" align="center" width="100">
                  <template slot-scope="scope">
                    <el-popover
                      placement="right"
                      title=""
                      trigger="hover">
                      <img slot="reference" :src="scope.row.image" width="50">
                      <img :src="scope.row.image" style="max-width: 50px;">
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
                <el-table-column label="数量" align="center"  prop="count" width="150px" />
                <el-table-column label="服用方法" align="center"  prop="usageMethod" width="150px" />
                <el-table-column label="一日几次" align="center"  prop="usageFrequencyUnit" width="150px" />
                <el-table-column label="商品编号" align="center" prop="barCode" />
                <el-table-column label="商品规格" align="center" prop="sku" />
                <el-table-column label="售价" align="center"  prop="price"  >
                   <template slot-scope="scope">
                    <div v-if="scope.row.price!=null">
                         {{scope.row.price.toFixed(2)}}
                    </div>
                  </template>
                </el-table-column>
                 <el-table-column label="小计" align="center"  prop="money"  >
                   <template slot-scope="scope">
                    <div v-if="scope.row.money!=null">
                         {{scope.row.money.toFixed(2)}}
                    </div>
                  </template>
                </el-table-column>
              </el-table>


      </div>


<div class="content" v-if="item!=null">
<div class="desct">
  套餐详情
</div>
<span v-html="item.desc"></span>
 </div>
      </div>
</template>

<script>
import { listPackage, getPackage, delPackage, addPackage, updatePackage, exportPackage } from "@/api/his/package";
import {list as getAppMallOptions} from '@/api/course/coursePlaySourceConfig';
import { getCourseByProject } from "@/api/course/userCourse";
  export default {
    name: "patientdetails",
    props:["data"],
    data() {
      return {
       // 状态字典
       drugList:[],
       drugOpen:false,
       statusOptions: [],
       payTypeOptions: [],
       orOptions:[],
       packageTypeOptions: [],
       diseaseTypeOptions: [],
       appMallOptions:[],
       // 是否删除字典
       isDelOptions: [],
       packageSubTypeOptions:[],
        item:null,
        productJson:[],
        // 项目和课程相关
        projectOptions: [],
        courseOptions: [],
        selectedProject: null,
        selectedCourse: null,
      }
    },
    computed: {
      appNames() {
        if (!this.item.appIds) return [];
        const ids = this.item.appIds.split(',');
        return ids
          .map(id => this.appMallOptions.find(opt => opt.appid === id)?.name)
          .filter(Boolean); // 过滤掉找不到的
      }
    },
    created() {
     this.getDicts("sys_company_status").then(response => {
       this.statusOptions = response.data;
     });
     this.getDicts("sys_company_or").then(response => {
       this.isDelOptions = response.data;
       this.orOptions = response.data;
     });
     this.getDicts("sys_package_pay_type").then(response => {
       this.payTypeOptions = response.data;
     });
     this.getDicts("sys_product_type").then(response => {
          this.productTypeOptions = response.data;
        });
     this.getDicts("sys_package_type").then(response => {
       this.packageTypeOptions = response.data;
     });
     this.getDicts("sys_package_sub_type").then(response => {
       this.packageSubTypeOptions = response.data;
     });
     this.getDicts("sys_prescribe_disease_type").then(response => {
       this.diseaseTypeOptions = response.data;
     });
     this.getDicts("sys_course_project").then(response => {
       this.projectOptions = response.data;
     });
     this.getAppMallOptions();

    },
    methods: {
      getAppMallOptions() {
        getAppMallOptions({pageNum:1,pageSize:100,isMall:1}).then(response => {
          this.appMallOptions = response.rows;
        })
      },
      getDetails(orderId) {
          this.item=null;
          this.selectedProject = null;
          this.selectedCourse = null;
          this.courseOptions = [];
          getPackage(orderId).then(response => {
              this.item = response.data;
              this.productJson=JSON.parse(response.data.productJson);
               this.item.imgUrl= (this.item.imgUrl).split(",");

               // 处理项目显示
               if (this.item.projectId) {
                 this.selectedProject = this.projectOptions.find(project =>
                   project.dictValue === this.item.projectId.toString()
                 );

                 // 获取课程列表
                 if (this.item.projectId) {
                   this.getCourseByProject(this.item.projectId).then(() => {
                     // 设置选中的课程
                     if (this.item.courseId) {
                       this.selectedCourse = this.courseOptions.find(course =>
                         course.courseId.toString() === this.item.courseId.toString()
                       );
                     }
                   });
                 }
               }
          });
      },
      drug(row){
        this.drugList=row.row.drug
        this.drugOpen=true;
      },
      /** 根据项目获取课程列表 */
      getCourseByProject(projectId) {
        return getCourseByProject(projectId).then(response => {
          if (response && response.data && Array.isArray(response.data)) {
            this.courseOptions = response.data;
          } else {
            this.courseOptions = [];
          }
          return response;
        }).catch(error => {
          console.error("获取课程列表失败:", error);
          this.courseOptions = [];
          throw error;
        });
      },
    }
  }
</script>
<style>
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .content{
      height: 100%;
      background-color: #fff;
     padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>