saas_pc/src/pages/person-center/handle-order/orderDetail.vue

<template>
  <div id="">
    <el-dialog
      :visible.sync="visible"
      width="1200px"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      @closed="close"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          详情
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/img/Close@2x.png"
            alt=""
            @click="visible = false"
          />
        </div>
      </div>

      <p style="font-size:14px;color:#333;font-weight:bold;">
        订单编号：<span
          style="margin-right:14px;color:#007aff;font-weight:400;"
          >{{ orderInfo.handleOrderSn }}</span
        >订单状态：<span
          style="margin-right:14px;color:#007aff;font-weight:400;"
          >{{ getPayStatus(orderInfo.payStatus) }}</span
        >
        密码说明: <strong style="font-weight:400;">第一次开通学员，密码则为身份证后六位数</strong>
      </p>
      <el-main v-loading="loading" style="padding:20px 0px;">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item label="创建时间">
            {{ $tools.timestampToTime(orderInfo.createTime, false) }}
          </el-descriptions-item>
          <el-descriptions-item label="通过时间">
            {{ $tools.timestampToTime(orderInfo.payTime, false) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$store.state.TENANT_NANE == '480813706424615769' ? '课程类型': '商品类型'">
            {{
              orderInfo.goodsType == 1
                ? "课程"
                : orderInfo.goodsType == 2
                ? "题库"
                : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item label="教育类型">
            {{ orderInfo.educationName }}
          </el-descriptions-item>
          <el-descriptions-item label="培训项目">
            {{ orderInfo.projectName + " - " + orderInfo.businessName }}
          </el-descriptions-item>
          <!-- <el-descriptions-item label="订购人数">
            {{ orderInfo.userNum || 0 }}位
          </el-descriptions-item>
          <el-descriptions-item label="订购数量">
            {{ orderInfo.goodsNum || 0 }}个
          </el-descriptions-item> -->
          <el-descriptions-item label="下单金额">
            ￥{{ orderInfo.orderPrice | formatPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="退款金额">
            ￥{{ orderInfo.goodsRefund | formatPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="实际金额">
            ￥{{ orderInfo.realPrice | formatPrice }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            {{ orderInfo.payType == 1 ? "微信" : "对公转账" }}
          </el-descriptions-item>
          <el-descriptions-item label="转账凭证">
            <el-button
              type="text"
              v-if="
                (orderInfo.payStatus == 1 ||
                  orderInfo.payStatus == 2 ||
                  orderInfo.payStatus == -2) &&
                  orderInfo.payType == 2
              "
              @click="openZZ(orderInfo.handleOrderSn)"
              >查看</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item label="发票状态">
            {{ showInvoice(orderInfo.invoiceStatus) }}
            <span v-if="orderInfo.invoiceUrl && orderInfo.invoiceStatus == 2"
              >（{{ orderInfo.invoiceUrl.split(",").length }}张）<el-button
                type="text"
                @click="downinvoice(orderInfo.invoiceUrl.split(','))"
                >下载</el-button
              >
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="下单备注">
            {{ orderInfo.companyRemark }}
          </el-descriptions-item>
          <el-descriptions-item label="审核意见">
            {{ orderInfo.checkReason }}
          </el-descriptions-item>
        </el-descriptions>
      </el-main>
      <el-divider></el-divider>
      <el-main style="padding:20px 0px;">
        <el-table
          max-height="400px"
          ref="table"
          size="small"
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{
            'background-color': '#eee',
            color: '#333',
            fontSize: '14px'
          }"
        >
          <el-table-column align="center" type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in tableSet"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
            <template slot-scope="scope">
              <span v-if="item.scope == 'progress'">
                <span v-if="scope.row.refundStatus == 1">已关闭</span>
                <span v-else>
                  {{ scope.row.stuAllNum + scope.row.recordNum }} /
                  {{ scope.row.secAllNum + scope.row.examNum }}</span
                >
              </span>
              <div v-else-if="item.scope == 'isOptions'">
                <span v-for="(items, indexs) in item.options" :key="indexs"
                  ><span v-if="items.value == scope.row[item.prop]">{{
                    items.label
                  }}</span></span
                >
              </div>
              <span v-else-if="item.scope == 'price'">
                ￥{{ scope.row[item.prop] | formatPrice }}
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-dialog>
    <public-transfer ref="publicTransfer" />
  </div>
</template>

<script>
import publicTransfer from "./order/step-2/publicTransfer.vue";
export default {
  components: { publicTransfer },
  data() {
    return {
      loading: false,
      visible: false,
      orderInfo: {},
      tableData: [],
      tableSet: [
        { label: "姓名", prop: "realname" },
        { label: "身份证号", prop: "idCard" },
        { label: "手机号码", prop: "telPhone" },
        { label: "年份", prop: "year" },
        { label: "科目", prop: "subjectNames" },
        { label: "商品", prop: "goodsName" },
        { label: "金额", prop: "goodsRealPrice", scope: "price" },
        { label: "学习进度", scope: "progress" },
        {
          label: "退款状态",
          prop: "refundStatus",
          scope: "isOptions",
          options: [
            { label: "待审核", value: 0 },
            { label: "已退款", value: 1 },
            { label: "不通过", value: 2 }
          ]
        },
        { label: "退款原因", prop: "refundReason" },
        { label: "审核意见", prop: "periodReason" }
      ]
    };
  },
  methods: {
    openBoxs(sn) {
      this.orderInfo = {};
      this.tableData = [];
      this.visible = true;
      this.loading = true;
      this.$request
        .orderhandledetail({ handleOrderSn: sn })
        .then(res => {
          this.orderInfo = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
      this.$request.orderhandlegoodsList({ handleOrderSn: sn }).then(res => {
        this.tableData = res.rows || [];
      });
    },
    close() {
      this.loading = false;
    },
    openZZ(sn) {
      this.$refs.publicTransfer.openBoxs(sn, false);
    },
    showInvoice(i) {
      var str = "";
      switch (i) {
        case 1:
          str = "待审核";
          break;
        case 2:
          str = "已开票";
          break;
        case 3:
          str = "不通过";
          break;
        case 4:
          str = "已失效";
          break;
        default:
          str = "未开票";
          break;
      }
      return str;
    },
    downinvoice(ary) {
      for (let i = 0; i < ary.length; i++) {
        this.download(this.$tools.splitImgHost(ary[i]));
      }
    },
    //下载
    download(url, fileName = "") {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.setRequestHeader("Content-Type", `application/pdf`);
      xhr.responseType = "blob";
      let that = this;
      xhr.onload = function() {
        if (this.status == 200) {
          //接受二进制文件流
          var blob = this.response;
          that.downloadExportFile(blob, fileName);
        }
      };
      xhr.send();
    },

    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = "";
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download = tagFileName;
      //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
    getPayStatus(i) {
      var str = "";
      switch (i) {
        case 0:
          str = "待支付";
          break;
        case 1:
          str = "已支付";
          break;
        case -1:
          str = "已关闭";
          break;
        case 2:
          str = "审核中";
          break;
        case -2:
          str = "不通过";
          break;
        default:
          break;
      }
      return str;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-divider--horizontal {
  margin: 14px 0px;
}
/deep/ .el-dialog {
  margin-top: 3vh !important;
  border-radius: 8px !important;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/ .el-descriptions-item__label.is-bordered-label {
  color: #333;
  font-weight: bold;
}
</style>