proginn-frontend/pages/frontend/skill_cert/add.vue

<template>
  <div class="container">
      <skillCertHeader title="技术等级认证"></skillCertHeader>
      <flow :dataList="flowList"></flow>
      <div class="description rule">
        <div class="col-title">
          <span class="label">评级细则</span>
        </div>
        <div class="rule-content">
          <div class="text" v-for="(item,index) in rules" :key="index">
            <p class="text-title">{{item.title}}</p>
            <a v-if="item.linkUrl" class="text-content text-content--a" :href="item.linkUrl" target="view_window">{{item.content}}</a>
            <p v-else class="text-content" v-html="item.content"></p>
          </div>
        </div>
      </div>
      <div class="description condition" style="display: none">
        <div class="col-title">
          <span class="label">申请条件</span>
        </div>
        <div class="item" v-for="(item,index) in conditions" :key="index">
          <span class="text">{{item.text}}</span>
          <a v-if="item.linkUrl" class="action" :href="item.linkUrl" target="view_window">{{item.linkName}}</a>
        </div>
      </div>

      <!-- 技能认证：start -->
      <div class="col-title width-infinity">
        <span class="label">目标技术栈</span>
      </div>

      <div class="skill-cert width-infinity">
        <div class="field-selector skill-cert-status-main">
          <span class="selector-title">选择认证方向:</span>
          <div class="fields skill-cert-select">
            <occupation_direction @change="directionChange"/>
          </div>

          <div class="skill-cert-status">{{isDirectionCert ? '已认证':'未认证'}}</div>
        </div>
        <div class="skill-cret-list">
          <skills></skills>
        </div>
      </div>


      <!-- 技能认证：end -->
      <div class="level-selector">
        <div class="col-title">
          <span class="label">选择认证等级</span>
        </div>
        <span class="action"  @click="toLevelsDesc">等级对照表</span>
        <img class="icon"  @click="toLevelsDesc" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
      </div>
      <div class="level-selector">
        <el-select v-model="level" placeholder="认证等级" clearable @change="handleLevelChange">
          <el-option
            v-for="dict in levels"
            :key="dict.item_id"
            :label="dict.name"
            :value="dict.item_id"
          />
        </el-select>
      </div>
      <!-- <p class="field-tips" v-show="currentFieldId" style="margin-top: 10px">参与能力评估，赠送1个月<a href="/type/vip/developer">开发者会员</a></p> -->
      <p class="field-tips" v-show="currentFieldId" style="margin-top: 10px">认证收费将支付给面试官，而非平台，详情见等级对照表</p>
      <div v-show="imgShow" class="col-title width-infinity upload-title">
        <span class="label">上传薪资证明</span>
      </div>
      <p v-show="imgShow" class="field-tips">仅F5、6需要提供薪资证明（可上传多张），F5: 40W以上年薪；F6：65W以上年薪</p>
      <div v-show="imgShow" class="width-infinity upload-action">
        <el-upload
          class="upload-demo"
          drag
          action="/upload_image"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePreview"
          :file-list="fileList"
          list-type="picture"
          accept=".jpg,.jpeg,.png,.JPG,.PNG,.JPEG"
          with-credentials
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip" style="display: flex;flex-direction: column">
            <span>支持5M以内的PNG、JPG、JPEG格式的图片</span>
            <br/>
            <a href="https://jishuin.proginn.com/p/763bfbd72778" target="view_window" style="font-size: 15px">查看常见薪水证明以及获取方式</a>
          </div>
        </el-upload>
      </div>
      <div class="price">
        <span class="text">￥{{price||'0.00'}}</span>
        <span class="unit"> /次</span>
      </div>
      <div class="buttons">
        <el-button class="submit" type="primary" @click="submit">确认提交</el-button>
      </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>

<script>
  import {mapState} from "vuex"
  import flow from "@/components/flow/flow";
  import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";
  import occupation_direction from "@/components/public/occupation_direction";
  import skills from "./components/skills";
  import resume_improve from "./resume_improve";

  export default {
    name: "profile",
    components: {
      flow, skillCertHeader,skills,occupation_direction,resume_improve
    },
    data() {
      return {
        rules: [{
          title: '1、评估优势',
          content: '* 平台派单时，将第一优先考虑进行过技术认证的用户，技术等级越高，权重越高' +
            '<br/>' +
            '* 依据技术等级将有更高的参考薪酬' +
            '<br/>' +
            '* 认证4级以上用户有机会被内邀为面试官' +
            '<br/>' +
            '* 面试过程中，将与高水平技术官的进行深层次沟通' +
            '<br/>' +
            '* 享有技术专家标识，增加客户信任感',
          linkUrl: ''
        }, {
          title: '2、等级对照表',
          content: '《客栈技术等级对照表》',
          linkUrl: 'https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of'
        }, {
          title: '3、其他说明',
          content: '* 技术认证采用线上面试的方式进行' + '<br/>' +
            '* 最终技术等级以面试官反馈为准，认证一般没有失败，除非您的技术能力低于最低要求' + '<br/>' +
            '* 可进行多领域认证，也可就已认证领域再次认证' + '<br/>' +
            '* 评估金额无法退回，请确保已理解所有内容',
          linkUrl: ''
        },],
        dialogImageUrl: '',
        dialogVisible: false,
        imgShow: false,
        levels: [],
        conditions: [],
        fields: [],
        tagsSelected: [],
        tags_2: [],//普通标签
        tags_3: [],//应用标签
        tags_4: [],//行业标签
        flowList: [
          {
            active: true,
            label: '基础信息'
          }, {
            active: false,
            label: '完善简历'
          }, {
            active: false,
            label: '对接面试官'
          }, {
            active: false,
            label: '开始面试'
          }, {
            active: false,
            label: '结束认证'
          },
        ],
        tagText: '',
        form: {
          skill: [],
          pay_status: '1'
        },
        fileList: [],
        level: '',
        price: '',

        directionFirstLevelValue:"",
        directionSecondLevelValue:"",
        isDirectionCert:false,
      };
    },
    computed: {
      ...mapState(["deviceType"]),
      currentFieldId() {
        const field = this.fields.find((ele) => ele.selected);
        if (!field) {
          return null
        }
        return field.occupation_id;
      }
    },
    created() {
      let signLinkUrl;
      if (this.deviceType.ios || this.deviceType.android) {
        signLinkUrl = 'proginn://developer_sign';
      } else {
        signLinkUrl = '/sign/new';
      }
      this.conditions = [
        {
          text: '* 签约程序员客栈',
          linkName: "去签约",
          linkUrl: signLinkUrl,
        }, {
          text: '* 有助于面试官快速了解你',
          linkName: "完善简历",
          linkUrl: `/wo/${this.userinfo.uid}`,
        }, {
          text: '* 客栈头像为本人露脸照片',
          linkName: "",
          linkUrl: "",
        }
      ]
    },
    methods: {
      toLevelsDesc() {
        window.open(`https://proginn.feishu.cn/docs/doccnFJSsH0KZ9cTfQNpSRrZ4Of`)
      },
      handleLevelChange(value) {
        // this.imgShow = value === '1105' || value === '1106';
        this.imgShow = value === '1106';
        const res = this.levels.find((ele) => {
          return ele.item_id === value
        });
        this.price = res.price
      },
      handleSuccess(res, file) {
        this.fileList.push(file);
      },
      handleError(err) {
        console.log(err)
      },
      beforeAvatarUpload(file) {
        const isJPEG = file.type === 'image/jpeg';
        const isJPG = file.type === 'image/jpg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!(isJPG || isPNG || isJPEG)) {
          this.$message.error('上传图片只能是 PNG/JPG/JPEG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isJPEG || isPNG) && isLt2M;
      },
      handleRemove(file, fileList) {
        const index = this.fileList.indexOf(file);
        this.fileList.splice(index, 1);
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      directionChange(value) {
        let firstItem = value[0]
        let secondItem = value[1]

        this.directionFirstLevelValue = firstItem.value;
        this.directionSecondLevelValue = secondItem.value;

        this.isDirectionCert = secondItem.freework_level > 0 ? true : false;
      },
      submit() {
        const form = {
          product_type: 12,
          item_id: this.level,
          occupation_id: this.directionFirstLevelValue,//一级方向
          direction_id: this.directionSecondLevelValue,//二级方向
          file: this.fileList.map((ele) => ele.response.filename).join(','),
          id: this.form.id || ''
        };
        this.$axios.$post(`/uapi/cert/add`, form).then((value) => {
          if (value.status === 1) {
            // 1未支付，2已支付
            if (parseInt(this.form.pay_status) === 1) {
              const productId = form.item_id;
              const next = '/frontend/skill_cert/profile';
              if (this.deviceType.ios || this.deviceType.android) {
                location.href = `proginn://pay?product_type=12&product_id=${productId}&next=${next}`
              } else {
                location.href = `/pay?product_type=12&product_id=${productId}&next=${next}`;
              }
            } else if (parseInt(this.form.pay_status) === 2) {
              this.$parent.set_step(2);
            }
          }
        });
      },
      async getLevels() {
        let res = await this.$axios.$post(`/uapi/pub/freeworklevel`, {occupation_id: 0});
        this.levels = res.data.list.map((ele) => {
          ele.name += ` ￥${ele.price}`;
          ele.name += ele.memo ? ` 【${ele.memo}】` : '';
          return ele
        });
        if (!this.level && this.levels.length) {
          this.level = `${this.levels[0].item_id}`
        }
        this.price = this.levels.find((ele) => {
          return ele.item_id === this.level;
        }).price;
      },
      async getDetail() {
        let res = await this.$axios.$post(`/uapi/cert/info`);
        this.form = res.data;
      }
    },
    async mounted() {
      await this.getDetail();
      await this.getLevels();
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 25px;
    @media(max-width: 900px) {
      padding: 0 15px;
    }
    box-sizing: border-box;
  }

  .width-infinity {
    width: 100%;
  }

  .description {
    width: 100%;
    background: #f4f5f9;
    border-radius: 8px;
    padding-bottom: 32px;
  }

  .rule {
    margin-top: 20px;
    margin-bottom: 10px;

    .rule-content {
      display: flex;
      flex-direction: column;
      margin: 16px 14px 0 14px;

      .text {
        display: flex;
        flex-direction: column;

        &:not(:first-child) {
          margin-top: 17px;
        }

        .text-title {
          font-size: 15px;
          font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
          font-weight: 600;
          color: #222222;
          line-height: 24px;
        }

        .text-content {
          margin-top: 5px;
          font-size: 15px;
          font-family: PingFangSC, PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: #222222;
          line-height: 24px;

          &--a {
            color: var(--linkColor)
          }
        }
      }
    }
  }

  .condition {
    .item {
      display: flex;
      flex-wrap: wrap;
      margin-top: 17px;

      .text {
        margin-left: 14px;
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Regular, sans-serif;
        font-weight: 400;
        text-align: left;
        color: #222222;
        line-height: 24px;
      }

      .action {
        margin-left: 28px;
        margin-right: 14px;
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
        font-weight: 600;
        text-align: left;
        color: #308eff;
        line-height: 24px;
      }
    }
  }

  .col-title {
    display: inline-flex;
    align-items: center;
    height: 43px;

    &::before {
      content: '';
      width: 2px;
      height: 14px;
      background: #308eff;
      border-radius: 2px;
    }

    .label {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color: #222222;
      padding: 0 10px;
    }
  }

  .field-tips {
    width: 100%;
    margin-top: 5px;
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Regular, sans-serif;
    font-weight: 400;
    color: #222222;
    line-height: 24px;
  }

  .field-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 33px;
  }

  .tag-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 23px;
    margin-bottom: 12px;

    .tag-input {
      width: 200px;
      margin-bottom: 10px;
    }
  }

  .selector-title {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
    font-weight: 600;
    text-align: left;
    color: #222222;
    line-height: 20px;
    margin-right: 16px;
    margin-bottom: 10px;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    background: #308eff;
    border-radius: 4px;
    padding: 0 10px;
    margin-right: 7px;
    margin-bottom: 10px;
    cursor: pointer;

    &--disabled {
      cursor: not-allowed;
    }

    &--unchecked {
      opacity: 0.8;
      background: #f4f5f9;
      border-radius: 4px;
    }

    .text {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular, sans-serif;
      font-weight: 400;
      color: #ffffff;

      &--unchecked {
        opacity: 0.8;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
      }
    }

    .icon {
      width: 16px;
      height: 16px;
      margin-left: 6px;
    }
  }

  .tags {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    background: #ffffff;
    border: 1px solid #d7dfe8;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
  }

  .level-selector {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 12px;

    .action {
      margin-left: 15px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium, sans-serif;
      font-weight: 500;
      color: #308eff;
      line-height: 20px;
      cursor: pointer;
    }

    .icon {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .upload-title {
    margin-top: 51px;
  }

  .upload-action {
    margin-top: 20px;
  }

  .price {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin-top: 42px;
    margin-bottom: 20px;

    .text {
      font-size: 30px;
      font-family: DIN Alternate, sans-serif;
      font-weight: 600;
      color: #ff6600;
    }

    .unit {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular, sans-serif;
      font-weight: 600;
      color: #ff6600;
    }
  }

  .buttons {
    width: 100%;

    .submit {
      margin-bottom: 87px;
      width: 267px;
      height: 58px;
      background: #308eff;
      border-radius: 8px;

      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium, sans-serif;
      font-weight: 500;
      color: #ffffff;
      line-height: 26px;
    }
  }

  .skill_cert{
    header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 20px;
      border-bottom: 1px solid #ebeef5;
    }

    .skill-cert-status-main{
      display: flex;
      align-items: center;
      justify-content:center;

    }

  }

  .skill-cert-status-main{
    .selector-title{
        margin-bottom: 0;
      }
  }
  .skill-cert-select{
    flex:1;
    margin-right: 20px;
  }

</style>