feat: 修改app录入界面及车辆用户同步

wlzboy

2025-11-27 668e570bd1db6bd00e4293b6977e6d3d051053ce

 ruoyi-ui/src/views/task/detail/index.vue

@@ -28,12 +28,62 @@

    <!-- GPS里程统计组件 -->
    <task-mileage-detail v-if="taskInfo.taskId" :task-id="taskInfo.taskId" />
    
    <!-- 支付信息卡片 -->
    <el-card v-if="showPaymentInfo && paymentInfo" class="box-card" style="margin-top: 20px;" shadow="hover">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-wallet"></i> 支付信息</span>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="成交价">¥{{ paymentInfo.transferPrice || 0 }}</el-descriptions-item>
        <el-descriptions-item label="附加费用">¥{{ paymentInfo.additionalAmount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="总金额">
          <span style="color: #e54d42; font-weight: bold; font-size: 16px;">¥{{ paymentInfo.totalAmount || 0 }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="支付状态" v-if="paymentInfo.latestPayment">
          <el-tag :type="getPaymentStatusType(paymentInfo.latestPayment.payStatus)">
            {{ getPaymentStatusText(paymentInfo.latestPayment.payStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付状态" v-else>
          <el-tag type="info">未支付</el-tag>
        </el-descriptions-item>
        <template v-if="paymentInfo.latestPayment">
          <el-descriptions-item label="支付方式">{{ getPaymentMethodText(paymentInfo.latestPayment.paymentMethod) }}</el-descriptions-item>
          <el-descriptions-item label="结算金额">¥{{ paymentInfo.latestPayment.settlementAmount }}</el-descriptions-item>
          <el-descriptions-item label="交易号" v-if="paymentInfo.latestPayment.tradeNo">{{ paymentInfo.latestPayment.tradeNo }}</el-descriptions-item>
          <el-descriptions-item label="支付时间" v-if="paymentInfo.latestPayment.payTime">{{ paymentInfo.latestPayment.payTime }}</el-descriptions-item>
        </template>
      </el-descriptions>
      
      <!-- 附加费用明细 -->
      <div v-if="paymentInfo.additionalFees && paymentInfo.additionalFees.length > 0" style="margin-top: 20px;">
        <el-divider content-position="left">附加费用明细</el-divider>
        <el-table :data="paymentInfo.additionalFees" border style="width: 100%">
          <el-table-column prop="feeName" label="费用名称" width="150" />
          <el-table-column prop="unitAmount" label="单价" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.unitAmount }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="totalAmount" label="小计" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.totalAmount }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import TaskMileageDetail from '@/components/TaskMileageDetail'
import { getTask } from '@/api/task'
import { getPaymentInfo } from '@/api/task'

export default {
  name: 'TaskDetail',
@@ -46,6 +96,7 @@
        taskId: null,
        taskCode: '',
        taskStatus: '',
        taskType: '',
        vehicleNo: '',
        assigneeName: '',
        plannedStartTime: '',
@@ -54,13 +105,16 @@
        actualEndTime: '',
        departureAddress: '',
        destinationAddress: ''
      }
      },
      paymentInfo: null,
      showPaymentInfo: false
    }
  },
  created() {
    const taskId = this.$route.params && this.$route.params.taskId
    if (taskId) {
      this.loadTaskInfo(taskId)
      this.loadPaymentInfo(taskId)
    }
  },
  methods: {
@@ -68,6 +122,19 @@
    loadTaskInfo(taskId) {
      getTask(taskId).then(response => {
        this.taskInfo = response.data
        // 只有转运任务才显示支付信息
        this.showPaymentInfo = this.taskInfo.taskType === 'EMERGENCY_TRANSFER'
      })
    },
    
    /** 加载支付信息 */
    loadPaymentInfo(taskId) {
      getPaymentInfo(taskId).then(response => {
        if (response.code === 200) {
          this.paymentInfo = response.data
        }
      }).catch(error => {
        console.error('加载支付信息失败:', error)
      })
    },
    
@@ -100,6 +167,41 @@
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    
    /** 获取支付状态类型 */
    getPaymentStatusType(status) {
      const typeMap = {
        'UNPAID': 'info',
        'PENDING': 'warning',
        'PAID': 'success',
        'FAILED': 'danger',
        'REFUNDED': 'info'
      }
      return typeMap[status] || 'info'
    },
    
    /** 获取支付状态文本 */
    getPaymentStatusText(status) {
      const textMap = {
        'UNPAID': '未支付',
        'PENDING': '支付中',
        'PAID': '已支付',
        'FAILED': '支付失败',
        'REFUNDED': '已退款'
      }
      return textMap[status] || status
    },
    
    /** 获取支付方式文本 */
    getPaymentMethodText(method) {
      const methodMap = {
        'CASH': '现金支付',
        'ON_ACCOUNT': '挂账支付',
        'WECHAT': '微信支付',
        'ALIPAY': '支付宝支付'
      }
      return methodMap[method] || method
    }
  }
}