dvcp_v2_webapp/project/qujing/app/AppCertificateManage/components/Add.vue

<template>
  <ai-detail class="AppCertificateManage">
    <template slot="title">
      <ai-title :title="params.id ? '编辑' + '证书' : '添加' + '证书'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <div class="wrapper">
            <el-form class="ai-form" :model="form" label-width="120px" ref="form">
              <el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]">
                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input>
              </el-form-item>
              <el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]">
                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="证书描述" style="width: 100%" prop="certificateContent" :rules="[{required: true, message: '请输入证书描述', trigger: 'blur'}]">
                <div class="input-wrapper">
                  <el-button type="text" style="width: fit-content;" @click="append">插入获得证书序号</el-button>
                  <el-input :rows="4" type="textarea" size="small" style="width: 100%;" v-model="form.certificateContent" clearable placeholder="恭喜您成为曲靖市第 「#获得证书序号」，位知法明理人。特颁此证，以资鼓励!"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]">
                <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateIssueUnit" clearable placeholder="请输入证书颁发单位" :maxlength="50"></el-input>
              </el-form-item>
            </el-form>
            <div class="view-img">
              <h1>{{ form.certificateTitle }}</h1>
              <h2>XXX</h2>
              <div class="view-img__content">
                <div class="top">
                  <span v-html="certificateContent"></span>
                  <p>特颁此证，以资鼓励!</p>
                </div>
              </div>
              <div class="bottom">
                <p>{{ form.certificateIssueUnit }}</p>
                <div>{{ date }}</div>
              </div>
              <img src="https://cdn.cunwuyun.cn/fengdu/icon.png" />
            </div>
          </div>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Add',

    props: {
      instance: Function,
      dict: Object,
      params: Object
    },
    data () {
      return {
        info: {},
        form: {
          certificateName: '',
          certificateIssueUnit: '曲靖市政法委',
          certificateTitle: '知法明理人证书',
          certificateContent: `恭喜您成为曲靖市第 「#获得证书序号」位知法明理人`
        },
        id: '',
        date: ''
      }
    },

    computed: {
      certificateContent () {
        if (this.form.certificateContent.indexOf('「#获得证书序号」') > -1) {
          return this.form.certificateContent.replace('「#获得证书序号」', '<i></i>')
        }

        return this.form.certificateContent
      }
    },

    created () {
      this.date = this.$moment(new Date()).format(`YYYY年MM月DD日`)
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appcertificateinfo/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.form = {
              ...res.data
            }
          }
        })
      },

      append () {
        if (this.form.certificateContent.indexOf('「#获得证书序号」') === -1) {
          this.form.certificateContent = this.form.certificateContent + '「#获得证书序号」'
        }
      },

      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.instance.post(`/app/appcertificateinfo/addOrUpdate`, {
              ...this.form,
              id: this.params.id || ''
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'List',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .AppCertificateManage {
    .input-wrapper {
      display: flex;
      flex-direction: column;
      width: 50%;
    }

    .wrapper {
      position: relative;
      height: 500px;

      .view-img {
        position: absolute;
        right: 0;
        top: 0px;
        z-index: 11;
        width: 884px;
        height: 1248px;
        padding-top: 190px;
        background: url(https://cdn.cunwuyun.cn/fengdu/zhengshu-bg.png);
        background-size: 100% 100%;
        transform: scale(0.4);
        transform-origin: top right;

        .view-img__content {
          width: 724px;
          margin: 0 auto;
          font-weight: 500;
          font-size: 24px;
          color: #222222;
          letter-spacing: 3px;
          text-align: justify;
          line-height: 40px;

          p {
            margin-top: 40px;
          }


          span {
            display: block;
            white-space: pre-line;
          }

          :deep( i ) {
            display: inline-block;
            position: relative;
            width: 140px;
            font-weight: 700;
            font-size: 36px;
            color: #3D5C8F;
            text-align: center;

            &:after {
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translateX(-50%);
              width: 120px;
              height: 2px;
              background: #999999;
              z-index: 11;
              content: ' ';
            }
          }
        }

        .bottom {
          position: absolute;
          bottom: 80px;
          left: 50%;
          line-height: 40px;
          font-size: 24px;
          text-align: center;
          color: #3D5C8F;
          transform: translateX(-50%);
        }

        h1 {
          margin: 0 20px 70px;
          font-weight: 900;
          font-size: 72px;
          color: #3D5C8F;
          letter-spacing: 16px;
          text-align: center;
        }

        h2 {
          position: relative;
          margin-bottom: 46px;
          font-weight: 700;
          font-size: 36px;
          color: #3D5C8F;
          text-align: center;

          &:after {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 2px;
            background: #999999;
            z-index: 11;
            content: ' ';
          }
        }

        & > img {
          position: absolute;
          bottom: 340px;
          left: 50%;
          z-index: 1;
          width: 140px;
          height: 140px;
          transform: translateX(-50%);
        }
      }
    }
  }
</style>