jsm-mall-h5-front/src/packageMine/pages/repairSettle/detail.vue

<template>
  <view class="app-container">
    <view class="top-container">
      <view class="title">
        <view class="left">工单信息</view>
        <view class="right">{{ detailData.issueStatus | statusFilter }}</view>
      </view>
      <view class="main">
        <view
          >工单编号：{{ detailData.dispatchOrderNo }} <text @tap="copy(detailData.dispatchOrderNo)">复制</text></view
        >
        <view>预约时间：{{ detailData.reportDate }}</view>
        <view>完工时间：{{ detailData.repairDate }}</view>
        <view>用户姓名：{{ detailData.userName }}</view>
        <view>地址信息：{{ detailData.gpsAddr }}</view>
      </view>
    </view>

    <view class="cardOne list">
      <view class="title">
        <text class="title-lt">维修设备</text>
        <text class="title-rt">{{ detailData.orderStatus }}</text>
      </view>
      <view class="con">
        <view class="list-con">
          <text class="text">内机机型：</text>
          <text class="content">{{ detailData.inMachineDescribe }}</text>
        </view>
        <view class="list-con">
          <text class="text">外机机型：</text>
          <text class="content">{{ detailData.outMachineDescribe }}</text>
        </view>
        <view class="list-con">
          <text class="text">维修费用：</text>
          <text class="content">{{ detailData.repairFee }}</text>
        </view>
        <view class="list-con">
          <text class="text">故障现象：</text>
          <text class="content">{{ detailData.faultPhenomenon }}</text>
        </view>
        <view class="list-con">
          <text class="text">故障分析：</text>
          <text class="content">{{ detailData.faultAnalysis }}</text>
        </view>
        <view class="list-con">
          <text class="text">维修内容：</text>
          <text class="content">{{ detailData.repairDetail }}</text>
        </view>
      </view>
    </view>
    <view class="cardOne list">
      <view class="title">
        <text class="title-lt">收入明细说明</text>
      </view>
      <view class="con">
        <view class="list-con">
          <text class="text">维修费用：</text>
          <text class="content">{{ detailData.repairFee }}</text>
        </view>
        <view class="list-con">
          <text class="text">交通费用：</text>
          <text class="content">{{ detailData.trafficFee }}</text>
        </view>
        <view class="list-con">
          <text class="text">住宿费用：</text>
          <text class="content">{{ detailData.accommodationFee }}</text>
        </view>
        <view class="list-con">
          <text class="text">吊装费用：</text>
          <text class="content">{{ detailData.liftingFee }}</text>
        </view>
        <view class="list-con">
          <text class="text">其他费用：</text>
          <text class="content">{{ detailData.otherFee }}</text>
        </view>
        <view class="list-con">
          <text class="text" style="color: #ff6200">总费用：</text>
          <text class="content" style="color: #ff6200">{{ detailData.totalFee }}</text>
        </view>
      </view>
    </view>
    <view class="cardOne list" v-if="detailData.issueStatus !== 1">
      <view class="title">
        <text class="title-lt">银行卡信息</text>
      </view>
      <view class="con">
        <view class="list-con">
          <text class="text">用户名：</text>
          <text class="content">{{ detailData.bankAccountName }}</text>
        </view>
        <view class="list-con">
          <text class="text">银行卡号：</text>
          <text class="content">{{ detailData.bankAccount }}</text>
        </view>
        <view class="list-con">
          <text class="text">开户行：</text>
          <text class="content">{{ detailData.depositBank }}</text>
        </view>
        <view class="list-con">
          <text class="text">发放时间：</text>
          <text class="content">{{ detailData.issueTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getUserInfo,
} from '@/common/utils/util'
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        1: '待发放',
        2: '已发放',
        3: '银行受理中'
      }
      return MAP[val]
    }
  },
  data() {
    return {
      salaryNo: null,
      summaryBatchNo: null,
      id: null,
      type: null,
      detailData: {}
    }
  },

  async onLoad({ salaryNo, summaryBatchNo, id, type }) {
    this.salaryNo = salaryNo
    this.summaryBatchNo = summaryBatchNo
    this.type = type
    this.id = id
    // const { websit_number, number } = this.$store.state.userInfo.websit_worker
    // this.websitNumber = websit_number
    // this.workerNumber = number
    this.getDetail()
  },

  methods: {
    getDetail() {
      let url = ''
      if (this.type == 1) {
        url = '/daily/mywallet/repair/detail'
      } else if (this.type == 2) {
        url = '/daily/mywallet/repair/month/detail'
      } else {
        url = '/daily/mywallet/not/issue/list'
      }
      this.$axios({
        url,
        method: 'get',
        params: {
          // workerNumber: this.workerNumber,
          salaryNo: this.salaryNo || '',
          summaryBatchNo: this.summaryBatchNo || '',
          id: this.id || ''
        },
        isLoading: 1
      }).then(res => {
        this.detailData = res.data[0]
      })
    },

    copy(val) {
      uni.setClipboardData({
        data: val,
        success: function () {
          uni.showToast({
            title: '复制成功'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-container {
  background: #ffffff;
  padding: 10rpx 30rpx 0;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 20rpx;
    .left {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
    }
    .right {
      font-size: 28rpx;
      color: #ff6200;
    }
  }
  .main {
    padding-bottom: 20rpx;
    view {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      line-height: 32rpx;
      text {
        width: 60rpx;
        height: 30rpx;
        background: #6da7ff;
        border-radius: 4rpx;
        font-size: 20rpx;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
      }
    }
  }
}

.card {
  margin-top: 20rpx;
  padding: 20rpx;
  border: 1px solid #eaeaea;
  border-radius: 20rpx;
  .title {
    margin-bottom: 10rpx;
  }
  .list-con {
    display: flex;
    justify-content: space-between;
    height: 50rpx;
    .text {
      line-height: 50rpx;
      flex-shrink: 0;
    }
    .content {
      line-height: 50rpx;
    }
  }
}

.list {
  margin-top: 20rpx;
}

.cardOne {
  padding: 30rpx;
  background-color: #fff;

  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20rpx;
    .title-lt {
      font-weight: 600;
      font-size: 32rpx;
    }
    .title-rt {
      color: #ff6200;
      font-size: 28rpx;
    }
  }

  .con {
    margin-top: 20rpx;
    .list-con {
      display: flex;
      .text {
        line-height: 50rpx;
        flex-shrink: 0;
      }
      .content {
        line-height: 50rpx;
      }
    }
  }
}
</style>