manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/contract/detail.vue

<template>
  <div class="flex flex-col h-full">
    <div class="bg-white info flex-1 overflow-y-auto cellnormall">
      <van-cell title="合同编号" :value="info.number" />
      <van-cell title="合同名称" :value="info.name" />
      <van-cell title="合同金额" :value="info.amounts">
        <template #default>
          <span class="text-[#FF8B32]" v-if="info.amounts">¥ {{ info.amounts }}</span>
        </template>
      </van-cell>
      <van-cell title="已回款金额" :value="info.payment">
        <template #default>
          <span class="text-[#FF8B32]" v-if="info.payment">¥ {{ info.payment }}</span>
        </template>
      </van-cell>
      <van-cell title="已回款进度" :value="info.payment">
        <template #default>
          {{ info.payment ? (100 * info.payment / info.amounts).toFixed(1) + '%' : '0%' }}
        </template>
      </van-cell>
      <van-cell title="下笔回款日期" :value="info.nextPaymentDate">
        <template #default>
          {{ info.nextPaymentDate ? info.nextPaymentDate : '-' }}
        </template>
      </van-cell>
      <van-cell title="下笔回款金额" :value="info.payment">
        <template #default>
          <span class="text-[#FF8B32]" v-if="info.payment">¥ {{ info.payment.toFixed(2) }}</span>
        </template>
      </van-cell>
      <van-cell title="合同类型" :value="info.typeName" />
      <van-cell title="状态" :value="info.status">
        <template #default>
          <span :style="fixedFieldStatusArray[info.status].color">
            {{ fixedFieldStatusArray[info.status].label }}
          </span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { fixedFieldStatusArray } from '@/utility/defaultData.js';

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

useLifecycle({
  load: () => {
    // 添加加载逻辑
  }
});
</script>

<style lang='scss' scoped>
.bottomButton {
  margin: 0 14px;
  padding-bottom: 30px;

  :deep(.van-button) {
    margin-bottom: 20px;
  }
}

.info {
  margin: 8px 14px 30px 14px;
  padding: 14px;
}
</style>