saas_masterPlatform/src/views/financed/components/dislogOrderDetails.vue

<template>
  <div class="orderDetail">
    <BaseDialog
      width="1200px"
      :isShow.sync="isShow"
      title="订单详情"
      @close="close"
      :isShowFooter="false"
    >
      <div class="head">
        订单号：<span>{{ detailInfo.orderSn }}</span> 退款状态：<span>{{
          refundStatus(detailInfo.refundStatus)
        }}</span>
        <span v-if="orderFrom === 3">审核状态：{{ checkStatus(detailInfo.checkStatus) }}</span>
        <i v-if="ShowStatus" style="float: right">
          <el-button
            type="success"
            size="small"
            @click="success"
            :disabled="orderFrom !== 3"
            >审核通过</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="error"
            :disabled="orderFrom !== 3"
            >审核不通过</el-button
          >
        </i>
      </div>
      <div class="mian">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item
            :label="desc.label"
            v-for="(desc, index) in descList"
            :key="index"
          >
            <div v-if="desc.type">
              <el-link
                :underline="false"
                v-if="desc.type === 'dowm'"
                href="https://element.eleme.io"
                target="_blank"
                >资料下载</el-link
              >
              <el-image
                v-if="desc.type === 'image'"
                style="width: 40px; height: 20px"
                :src="$methodsTools.splitImgHost(detailInfo[desc.key])"
                :preview-src-list="[
                  $methodsTools.splitImgHost(detailInfo[desc.key]),
                ]"
              >
              </el-image>
              <div v-if="desc.type === 'options'">
                <template v-for="(i, k) in desc.options">
                  <span v-if="i.value === detailInfo[desc.key]">
                    {{ i.label }}
                  </span>
                </template>
              </div>
            </div>
            <div v-else>
              {{ detailInfo[desc.key] }}
              <span
                v-if="desc.key === '888'"
                :style="{ color: true ? '#409eff' : '#f56c6c' }"
                >【{{ true ? "盈" : "亏" }}】</span
              >
              <span
                v-if="desc.key === '999'"
                :style="{ color: false ? '#409eff' : '#f56c6c' }"
                >（{{ true ? "已结清" : "未结清" }}）</span
              >
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <student-details
        :orderSn="orderSn"
        :orderFrom="orderFrom"
      ></student-details>
    </BaseDialog>
  </div>
</template>

<script>
import studentDetails from "./studentDetails.vue";
export default {
  name: "dislogOrderDetails",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    orderSn: {
      type: String,
    },
    orderFrom: {
      type: Number,
    },
    ShowStatus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      descList: [
        { label: "机构名称", key: "createOrg" },
        { label: "业务员", key: "createUsername" },
        { label: "业务号", key: "createNo" },
        { label: "业务分类", key: "businessNames" },
        {
          label: "订单来源",
          key: "orderFrom",
          type: "options",
          options: [
            {
              label: "新系统C端订单",
              value: 1,
            },
            {
              label: "旧系统C端订单",
              value: 2,
            },
            {
              label: "旧系统B端订单",
              value: 3,
            },
          ],
        },
        { label: "申请时间", key: "orderCost" },
        { label: "盈亏(元)", key: "orderProfit" },
        { label: "成本(元)", key: "orderCost" },
        { label: "合同金额(元)", key: "orderPrice" },
        { label: "已收账款(元)", key: "orderReceived" },
        { label: "申请退款", key: "orderRefund" },
        { label: "已退账款(元)", key: "orderRefunded" },
        { label: "未收账款(元)", key: "orderUncollected" },
        { label: "实际账款(元)", key: "123" },
        { label: "下单企业", key: "tenantName" },
        { label: "转账开户名", key: "123" },
        { label: "转账凭证", key: "avatar", type: "image" },
        {
          label: "发票状态",
          key: "invoiceStatus",
          type: "options",
          options: [
            {
              label: "未开票",
              value: 0,
            },
            {
              label: "未开票",
              value: 0,
            },
          ],
        },
        { label: "备注", key: "remark" },
        { label: "附件", type: "dowm" },
      ],
      detailInfo: {
        avatar: "oss/images/avatar/20211103/1635931027923_941464701",
      },
    };
  },

  mounted() {},

  methods: {
    //退款状态
    refundStatus(i) {
      var str = "";
      switch (i) {
        case 0:
          str = "待审核";
          break;
        case 1:
          str = "正常";
          break;
        case 2:
          str = "未退款";
          break;
        case 3:
          str = "已完成";
          break;
        case 4:
          str = "未通过";
          break;

        default:
          break;
      }
      return str;
    },
    //审核状态
    checkStatus(i) {
      var str = "";
      switch (i) {
        case 0:
          str = "待审核";
          break;
        case 1:
          str = "已通过";
          break;
        case 2:
          str = "未通过";
          break;
        case 3:
          str = "已撤销";
          break;
        default:
          break;
      }
      return str;
    },
    init() {
      this.getOrderDetail();
    },
    getOrderDetail() {
      this.$api.systemtoporderid(this.orderSn).then((res) => {
        this.detailInfo = res.data;
      });
    },
    close() {},
    submit() {},
    submitForm() {
      this.isShow = false;
      this.$emit("search");
    },
    success() {
      this.$confirm("确定审核通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .systemtoporderrefundcheck({
              checkResult: 1,
              orderSn: this.orderSn,
            })
            .then((res) => {
              this.$message.success("操作成功");
            });
        })
        .catch(() => {});
    },
    error() {
      this.$prompt("确定审核不通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "输入不通过原因",
      })
        .then(({ value }) => {
          this.$api
            .systemtoporderrefundcheck({
              checkReason: value || "",
              checkResult: -1,
              orderSn: this.orderSn,
            })
            .then((res) => {
              this.$message.success("操作成功");
            });
        })
        .catch(() => {});
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
  components: { studentDetails },
};
</script>

<style lang="scss" scoped>
.orderDetail {
  .head {
    margin-bottom: 20px;
    span {
      padding-right: 20px;
      color: #409eff;
    }
  }
}
</style>