zhjwxt/uniapp/pages/contract/detail.vue

<!--合同详情页面-->
<template>
  <view class="contract-detail" style="background-color: #181A20; min-height: 100vh;">
    <!-- 合同基本信息 -->
    <view class="contract-info-card" style="background-color: #2A2A2A; margin: 20rpx; border-radius: 12rpx; padding: 30rpx;">
      <view class="card-title" style="color: #fff; font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx;">
        合同信息
      </view>
      
      <view class="info-item">
        <text class="label" style="color: #999; font-size: 26rpx;">合同名称：</text>
        <text class="value" style="color: #fff; font-size: 26rpx;">{{ contractInfo.contract_name }}</text>
      </view>
      
      <view class="info-item" style="margin-top: 20rpx;">
        <text class="label" style="color: #999; font-size: 26rpx;">合同类型：</text>
        <text class="value" style="color: #fff; font-size: 26rpx;">{{ contractInfo.contract_type_text }}</text>
      </view>
      
      <view class="info-item" style="margin-top: 20rpx;">
        <text class="label" style="color: #999; font-size: 26rpx;">当前状态：</text>
        <text 
          class="value status"
          :style="{
            color: getStatusColor(contractInfo.status),
            fontSize: '26rpx'
          }"
        >
          {{ getStatusText(contractInfo.status) }}
        </text>
      </view>
    </view>

    <!-- 填写进度 -->
    <view v-if="contractInfo.status === 'pending'" class="progress-card" style="background-color: #2A2A2A; margin: 20rpx; border-radius: 12rpx; padding: 30rpx;">
      <view class="card-title" style="color: #fff; font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx;">
        填写进度
      </view>
      
      <view class="progress-steps">
        <view 
          v-for="(step, index) in steps" 
          :key="index"
          class="step-item"
          :class="{ active: step.completed, current: step.current }"
          style="display: flex; align-items: center; margin-bottom: 20rpx;"
        >
          <view 
            class="step-icon"
            :style="{
              width: '40rpx',
              height: '40rpx',
              borderRadius: '50%',
              backgroundColor: step.completed ? 'rgb(41, 211, 180)' : '#666',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginRight: '20rpx'
            }"
          >
            <text style="color: #fff; font-size: 20rpx;">{{ index + 1 }}</text>
          </view>
          <text 
            class="step-text"
            :style="{
              color: step.completed ? 'rgb(41, 211, 180)' : '#999',
              fontSize: '26rpx'
            }"
          >
            {{ step.title }}
          </text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section" style="padding: 40rpx 20rpx;">
      <button 
        v-if="contractInfo.status === 'pending' && !contractInfo.fill_data"
        class="primary-btn"
        style="background-color: rgb(41, 211, 180); color: #fff; border: none; border-radius: 25rpx; padding: 25rpx; font-size: 30rpx; width: 100%;"
        @click="goToFill"
      >
        开始填写信息
      </button>
      
      <button 
        v-else-if="contractInfo.status === 'pending' && contractInfo.fill_data && !contractInfo.signature_image"
        class="primary-btn"
        style="background-color: rgb(41, 211, 180); color: #fff; border: none; border-radius: 25rpx; padding: 25rpx; font-size: 30rpx; width: 100%;"
        @click="goToSign"
      >
        电子签名
      </button>
      
      <button 
        v-else-if="contractInfo.status === 'completed'"
        class="secondary-btn"
        style="background-color: transparent; color: rgb(41, 211, 180); border: 2rpx solid rgb(41, 211, 180); border-radius: 25rpx; padding: 25rpx; font-size: 30rpx; width: 100%;"
        @click="downloadContract"
      >
        下载合同
      </button>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js'

export default {
  data() {
    return {
      contractId: 0,
      contractInfo: {},
      steps: [
        { title: '填写基本信息', completed: false, current: false },
        { title: '电子签名', completed: false, current: false },
        { title: '完成签署', completed: false, current: false }
      ]
    }
  },
  
  onLoad(options) {
    this.contractId = options.id
    this.getContractDetail()
  },
  
  methods: {
    async getContractDetail() {
      try {
        const res = await apiRoute.getContractDetail(this.contractId)
        this.contractInfo = res.data
        this.updateSteps()
      } catch (error) {
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      }
    },
    
    updateSteps() {
      const info = this.contractInfo
      
      // 更新步骤状态
      if (info.fill_data) {
        this.steps[0].completed = true
      } else {
        this.steps[0].current = true
      }
      
      if (info.signature_image) {
        this.steps[1].completed = true
      } else if (info.fill_data) {
        this.steps[1].current = true
      }
      
      if (info.status === 'completed') {
        this.steps[2].completed = true
      }
    },
    
    goToFill() {
      uni.navigateTo({
        url: `/pages-common/contract/fill?id=${this.contractId}`
      })
    },
    
    goToSign() {
      uni.navigateTo({
        url: `/pages-common/contract/contract_sign?id=${this.contractId}&contractName=${encodeURIComponent(this.contractInfo.contract_name)}`
      })
    },
    
    async downloadContract() {
      try {
        uni.showLoading({ title: '生成中...' })
        const res = await apiRoute.generateContractDocument(this.contractId)
        uni.hideLoading()
        
        // 下载文件
        uni.downloadFile({
          url: res.data.download_url,
          success: (downloadRes) => {
            uni.openDocument({
              filePath: downloadRes.tempFilePath
            })
          }
        })
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '下载失败',
          icon: 'none'
        })
      }
    },
    
    getStatusColor(status) {
      const colorMap = {
        'pending': '#f39c12',
        'completed': 'rgb(41, 211, 180)',
        'rejected': '#e74c3c'
      }
      return colorMap[status] || '#999'
    },
    
    getStatusText(status) {
      const textMap = {
        'pending': '待签署',
        'completed': '已完成',
        'rejected': '已拒绝'
      }
      return textMap[status] || '未知'
    }
  }
}
</script>

<style scoped>
.info-item {
  display: flex;
  align-items: center;
}

.step-item {
  display: flex;
  align-items: center;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>