dy-admin-manager/src/views/resetTeaming/goodsModal/payFeeInfo.vue

<template>
  <div class="teamCourseList">
    <p class="coreTitle">
      费用信息
    </p>
    <div class="infoWrap">
      <div>
        <el-form-item
          class="vertical"
          label="总金额"
          prop="isShowMusicInsuranceForPay"
        >
          <el-input-number
            :value="allTotal"
            :controls="false"
            :min="0"
            :precision="2"
            :disabled="true"
            type="number"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          class="vertical"
          label="优惠金额"
          prop="isShowMusicInsuranceForPay"
        >
          <el-input-number
            v-model="form.calenderFeeJson.discountTotal"
            :controls="false"
            :min="0"
            :max="allTotal"
            :precision="2"
            type="number"
            :disabled="payschoolListStatus"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item
          class="vertical"
          label="付款金额"
          prop="currentTotalAmount"
        >
          <el-input-number
            v-model="form.currentTotalAmount"
            :controls="false"
            :min="0"
            :precision="2"
            :disabled="true"
          >
          </el-input-number>
        </el-form-item>
      </div>
      <el-row>
        <el-form-item
          label="上传合同"
          prop="contractUrl"
          :rules="[
            {
              required: true,
              message: '请上传合同',
              trigger: 'change'
            }
          ]"
        >
          <template slot="label">
            <p style="position: relative">
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              上传合同
            </p>
          </template>
          <singe-file-upload
            tips="仅支持上传pdf格式文件"
            buttonText="上传合同"
            accept=".pdf"
            :disabled="payschoolListStatus"
            v-model="form.contractUrl"
            bucket_name="contracts"
            @success="checkType"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col class="memoWrap">
          <el-form-item
            class="memoWrapItem"
            prop="memo"
            :rules="[
              {
                required: true,
                message: '请输入备注',
                trigger: 'blur'
              }
            ]"
            ref="memo"
          >
            <template slot="label">
              <p style="position: relative">
                <span style="color: #f56c6c; margin-right: 4px">*</span>
                备注
                <el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">本次缴费的内容描述</div>
                  <i
                    class="el-icon-question"
                    style="
                      font-size: 18px;
                      color: #f56c6c;
                      position: relative;
                      top: 2px;
                    "
                  ></i>
                </el-tooltip>
              </p>
            </template>

            <el-input
              style="width: 100%"
              :rows="3"
              v-model="form.memo"
              type="textarea"
              maxlength="50"
              show-word-limit
              :disabled="payschoolListStatus"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { courseType, boolOptions } from "@/constant";
export default {
  props: ["form", "payschoolListStatus"],
  data() {
    return {
      charges: [],
      clearable: false,
      isDisabled: false,
      boolOptionsOptions: [],
      courseType
    };
  },
  methods: {
    checkType() {
      this.$emit("checkType");
    }
  },
  computed: {
    allTotal() {
      let num = 0;
      this.form.calenderGoodsList.forEach(item => {
        num += item.totalPrice;
      });
      this.$emit("setAllTotal", num);
      return num;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
::v-deep .infoWrap {
  padding: 10px 10px 25px;
  .el-form-item__label {
    display: block !important;
    text-align: left;
    padding-left: 10px;
  }
  .vertical {
    margin-top: 0px !important;
  }
  .el-input-number {
    width: 180px;
    .el-input__inner {
      text-align: left;
    }
  }
}
.memoWrap {
  // width: calc(100% - 860px);
  width: 860px;
  .memoWrapItem {
    display: block;
    margin: 0;
    ::v-deep .el-form-item__content {
      display: inline-block;
      width: calc(100% - 140px);
    }
  }
}
</style>