great_service/src/views/team/creditRecord/dialog/details.vue

<!--
 * @Description: 详情弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: gcz
 * @LastEditTime: 2024-03-15 15:13:27
 * @FilePath: \great_webui\src\views\order\groupBuyingMr\dialog\details.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    title="详情"
    :visible.sync="open"
    width="50%"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div v-loading="loading" class="dialog dialog-bbb" v-if="form">
      <div element-loading-text="加载详情中...">
        <!--   基础信息   -->
        <div class="title-class" style="margin-top: 0">基础信息</div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">订单号: <span>{{ form.orderId || ''}}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">团队名称: <span>{{ form.teamName || ''}}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">是否其他团队代付: <span>{{ form.ifRepay == 0 ? '否' : '是' || ''}}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">代付团队: <span>{{ form.ifRepay == 1 ? form.repayName : ''}}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">还款状态: <span>{{ form.repaymentStatus == 0 ? '未还款' : '已还款' }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">预计还款时间: <span>{{ form.repaymentTime || '' }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">{{form.payWay == 'quota' ? '授信金额:' : '挂账金额:'}}<span>{{ form.orderPrice || '' }}</span></div>
          </el-col>
          <el-col :span="24" v-if="form.payWay == 'corporate'">
            <div class="grid-content bg-purple item-class">挂账凭证: 
              <div class="voucher-list">
                  <el-image 
                    v-for="(item,index) in voucherUrl1" :key="index"
                    style="width: 100px; height: 100px"
                    :src="item" 
                    :preview-src-list="voucherUrl1">
                  </el-image>
                </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple item-class">创建时间: <span>{{ form.createTime || '' }}</span></div>
          </el-col>
        </el-row>

        <!-- 还款日期信息 -->
        <div>
          <div class="title-class">{{form.payWay == 'quota' ? '授信支付还款信息' : '对公支付信息' }} </div>
            <el-row>
              <el-col class="pay-type-remark" :span="24">
                还款日期：{{ form.realPayTime }}
              </el-col>
              <el-col :span="24">
              <div class="grid-content bg-purple item-class">还款凭证: 
                <div class="voucher-list">
                    <el-image 
                      v-for="(item,index) in voucherUrl" :key="index"
                      style="width: 100px; height: 100px"
                      :src="item" 
                      :preview-src-list="voucherUrl1">
                    </el-image>
                  </div>
              </div>
          </el-col>
            </el-row>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "detailsDia",
  dicts: ['order_form_type', 'order_status_type', 'pay_way_type', 'personnel_type','team_type'],
  data() {
    return {
      title: "编辑",
      model: "EDIT",
      open: false,
      loading: false,
      form: {
        id: undefined
      },
      voucherUrl:[],
      voucherUrl1:[],
    };
  },
  created() {
    
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj, type) {
      this.open = true;
      this.voucherUrl = (obj.repaymentVoucherUrl && obj.repaymentVoucherUrl.split(','))||[];
      this.voucherUrl1 = (obj.voucherUrl && obj.voucherUrl.split(','))||[];
      this.form = obj
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100%;
}
.dialog {
  padding: 0 30px;
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
  .title-class{
    font-size: 16px;
    font-weight: bold;
    color: black;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .item-class{
    margin-bottom: 20px;
  }
}

.voucher-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  margin: 15px;
}
.pay-type-remark{
  margin:14px 0;
}

.dialog-bbb {
  width: 100%;
  display: flex;
  --widdd: 700px;

  >div:first-child {
    width: var(--widdd);
    flex-shrink: 0;
    overflow-y: auto;
    padding: 0 0 10px 0;
    margin-right: 10px;
  }

  .dialog-bbb_2 {
    width: calc(100% - var(--widdd));
    height: 100%;
  }
}

.dialog-bbb_2 {
  .seat-tool-box {
    height: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    white-space: nowrap;

    span {
      flex-shrink: 0;
      font-size: 12px;
      white-space: nowrap;
    }

    .seat-tool-box-slider {
      width: 100px;
      margin-left: 10px;
    }
  }

  .seat-box {
    width: 100%;
    height: calc(100% - 50px);
    box-sizing: border-box;
    display: flex;
    position: relative;

    .seat-list-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
    }

    .seat-select-box {
      width: 200px;
      height: 100%;
      flex-shrink: 0;
      box-sizing: border-box;
      padding: 0 5px;
      margin-left: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;

      .seat-select-info {
        width: 100%;
        height: calc(100% - 60px);
        overflow: hidden;
        overflow-y: auto;

        .seat-select-item {
          border: 1px solid #ccc;
          margin-bottom: 5px;
          padding: 5px;
          border-radius: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;

          >div:first-child {
            display: flex;
            flex-direction: column;

            span:first-child {
              font-weight: 600;
            }
          }

          >div:last-child {
            span:first-child {
              color: #f56c6c;
              cursor: pointer;
            }
          }
        }

        .seat-select-color-item {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          >span:first-child {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
          }

          >span:last-child {
            font-size: 16px;
            font-weight: 600;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .seat-list-box::before {
    content: "舞台";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 30px;
    background-color: rgb(204, 204, 204, 0.5);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 20px 20px;
    z-index: 99;
  }

  .dialogss {
    padding: 30px 10px 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #323333;

    .dialogss-box {
      position: relative;
    }

    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;

      i {
        font-size: 30px;
        margin-top: 20px;
      }

      &-text {
        margin-top: -10px;
      }
    }

    .avatar {
      cursor: pointer;
    }

    .title-class {
      font-size: 16px;
      font-weight: bold;
      color: black;
      margin-bottom: 20px;
      margin-top: 20px;
    }

    .item-class {
      margin-bottom: 20px;
    }

    .seat-box-class {
      padding: 5px;
      transform-origin: 50% 0;
      transform: scale(var(--scaleNum));
      box-sizing: border-box;

      .disabled-class {
        background-color: #aaabad;
        user-select: none;
        // pointer-events: none;
        cursor: not-allowed !important;
      }

      .select-class {
        //background-color: #e85353 !important;
        border: 5px solid #1890ff !important;
        // color: #eceaea !important;
        position: relative;
      }

      .purchased-status:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
        background-image: url('../../../../assets/renyuan.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }

      .occupy-status:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: -1;
        background-image: url('../../../../assets/jinzhi_1.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }

      .occupy-status {
        //pointer-events: none;
      }
      /** 订单待支付锁定 */
      .order-occupy-status {

      }
      .order-occupy-status:after{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.3);
        z-index:-1;
        background-image: url('../../../../assets/jinzhi.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }
      .occupy-status-no {
        background-color: #f56c6c !important;
        user-select: none;
        // pointer-events: none;
        cursor: not-allowed !important;
      }

      .seat-item-class-box {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        margin: auto 0;
        text-align: center;
      }

      .seat-item-class {
        flex-shrink: 0;
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #4c4d4d;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        user-select: none;

        // transform-origin: 50% 50%;
        // transform: scale(var(--scaleNum));
        &:hover {
          opacity: 0.6;
        }

        .text-class {
          font-size: 12px;
          padding: 5px;
          line-height: 16px;
          margin: 0;
          color: #000;
        }
      }
    }
  }
}
</style>