JingTong-Font-Mobile/src/pages/member-info-detail/member-info-detail.vue

<template>
  <view>
    <section class="section basic-info">
      <div class="section-title">基本信息</div>
      <div class="detail-item">
        <div class="label">姓名:</div>
        <div class="value">{{ portfolio.name }}</div>
      </div>
      <div class="detail-item">
        <div class="label">出生日期:</div>
        <div class="value">{{ portfolio.birthDate }}</div>
      </div>
      <div class="detail-item">
        <div class="label">性别:</div>
        <div class="value">{{ portfolio.gender }}</div>
      </div>
      <div class="detail-item">
        <div class="label">民族:</div>
        <div class="value">{{ portfolio.ethnicity }}</div>
      </div>
      <div class="detail-item">
        <div class="label">籍贯:</div>
        <div class="value">{{ portfolio.nativePlace }}</div>
      </div>
      <div class="detail-item">
        <div class="label">身份证号:</div>
        <div class="value">{{ portfolio.idCardNumber }}</div>
      </div>
      <div class="section-title">联系信息</div>
      <div class="detail-item">
        <div class="label">住址:</div>
        <div class="value">{{ portfolio.address }}</div>
      </div>
      <div class="detail-item">
        <div class="label">联系电话:</div>
        <div class="value">{{ portfolio.phoneNumber }}</div>
      </div>
      <div class="detail-item">
        <div class="label">电子邮件地址:</div>
        <div class="value">{{ portfolio.emailAddress }}</div>
      </div>
      <div class="detail-item">
        <div class="label">紧急联系人姓名:</div>
        <div class="value">{{ portfolio.emergencyContactName }}</div>
      </div>
      <div class="detail-item">
        <div class="label">紧急联系人电话:</div>
        <div class="value">{{ portfolio.emergencyContactPhone }}</div>
      </div>
    </section>
<!--    <section class="section basic-info">
      <div class="section-title">预先规划的殡葬信息</div>
      <div class="detail-item">
        <div class="label">殡葬方式:</div>
        <div class="value">{{ portfolio.funeralMethod }}</div>
      </div>
      <div class="detail-item">
        <div class="label">预期的礼仪类型:</div>
        <div class="value">{{ portfolio.ceremonyType }}</div>
      </div>
      <div class="detail-item">
        <div class="label">墓地信息:</div>
        <div class="value">{{ portfolio.cemeteryInfo }}</div>
      </div>
      <div class="detail-item">
        <div class="label">是否有预购墓地:</div>
        <div class="value">{{ portfolio.prePurchasedGrave ? '是' : '否' }}</div>
      </div>
      <div class="detail-item">
        <div class="label">是否有预定的葬礼地点:</div>
        <div class="value">{{ portfolio.preReservedFuneralLocation }}</div>
      </div>
      <div class="detail-item">
        <div class="label">是否有遗嘱或活葬指示:</div>
        <div class="value">{{ portfolio.hasWillOrLivingDirective ? '是' : '否' }}</div>
      </div>
    </section>
    <section class="section basic-info">
      <div class="section-title">财务信息</div>
      <div class="detail-item">
        <div class="label">支付方式:</div>
        <div class="value">{{ portfolio.paymentMethod }}</div>
      </div>
      <div class="detail-item">
        <div class="label">银行账户信息:</div>
        <div class="value">{{ portfolio.bankAccountInfo }}</div>
      </div>
      <div class="detail-item">
        <div class="label">预先支付的葬礼费用:</div>
        <div class="value">{{ portfolio.prePaidFuneralCost }}</div>
      </div>
    </section>-->
    <section class="section basic-info">
      <div class="section-title">法律文件</div>
      <div class="detail-item">
        <div class="label">遗嘱复印件:</div>
        <div class="value">{{ portfolio.willCopy }}</div>
      </div>
      <div class="detail-item">
        <div class="label">生前事务代理人指定书:</div>
        <div class="value">{{ portfolio.preDeathAgentDesignation }}</div>
      </div>
      <div class="detail-item">
        <div class="label">医疗事务代理人指定书:</div>
        <div class="value">{{ portfolio.medicalAgentDesignation }}</div>
      </div>
      <div class="detail-item">
        <div class="label">生命维持治疗决定书:</div>
        <div class="value">{{ portfolio.lifeSupportDecision }}</div>
      </div>
      <div class="detail-item">
        <div class="label">病症:</div>
        <div class="value">{{ portfolio.disease }}</div>
      </div>
      <div class="section-title">档案状态</div>
      <div class="detail-item">
        <div class="label">档案状态:</div>
        <div class="value">{{ portfolio.portfolioStatus }}</div>
      </div>
      <div class="section-title">拒绝理由</div>
      <div class="detail-item">
        <div class="label">拒绝理由:</div>
        <div class="value">{{ portfolio.rejectionReason }}</div>
      </div>
    </section>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const portfolio = ref({})
const portfolioId = ref(0)

onLoad((obj) => {
  // 在组件挂载时获取档案详情
  fetchProfileDetail(obj.portfolioId)
})
const fetchProfileDetail = (id) => {
  portfolioId.value = id
  // 发送请求获取档案详情数据
  http.request({
    url: '/p/user/portfolio/detail',
    method: 'POST',
    data: {
      portfolioId: portfolioId.value
    }
  }).then((res) => {
    console.log('@@@@')
    portfolio.value = res.data
  })
}
</script>

<style scoped lang="scss">
/* 样式可以根据你的设计进行修改 */
.section {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 8px;
}

.basic-info {
  background-color: #e6f7ff; /* 设置基本信息的背景颜色 */
}

.contact-info {
  background-color: #f6ffd1; /* 设置联系信息的背景颜色 */
}

.funeral-info {
  background-color: #ffd6cc; /* 设置殡葬信息的背景颜色 */
}

.financial-info {
  background-color: #e8f5e9; /* 设置财务信息的背景颜色 */
}

.legal-info {
  background-color: #f3e5f5; /* 设置法律文件的背景颜色 */
}

.disease-info {
  background-color: #fff9c4; /* 设置病症的背景颜色 */
}

.status-info {
  background-color: #cfd8dc; /* 设置档案状态的背景颜色 */
}

.rejection-info {
  background-color: #ffcdd2; /* 设置拒绝理由的背景颜色 */
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
}

.label {
  width: 100px;
  font-weight: bold;
}

.value {
  flex: 1;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>