proginn-frontend/pages/frontend/skill_cert/profile.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">
      <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>
    <div class="col-title width-infinity">
      <span class="label">填写表单</span>
    </div>
    <p class="field-tips">您选择的标签和领域将用于匹配面试官和派单匹配，请谨慎填写</p>
    <div class="field-selector">
      <span class="selector-title">选择领域:</span>
      <div v-for="(item) in fields" class="fields" :key="item.occupation_id"
           @click="onFieldSelected(item.occupation_id,item.disabled)">
        <div class="tag" v-if="item.selected">
          <span class="text">{{item.occupation_name}}</span>
        </div>
        <div :class="['tag','tag--unchecked',item.disabled?'tag--disabled':'']" v-else>
          <span class="text text--unchecked">{{item.occupation_name}}</span>
        </div>
      </div>
    </div>
    <div class="tag-selector" v-show="currentFieldId">
      <span class="selector-title">选择标签:</span>
      <div class="tag" v-for="(item,index) in tagsSelected" :key="index">
        <span class="text">{{item.skill_name}}</span>
        <img class="icon" src="@/assets/img/skill_cert/icon_remove.png" alt="" @click="onRemoveTag(index)"/>
      </div>
      <el-input style="display:none;" class="tag-input" v-model="tagText" placeholder="请输入自定义标签" clearable
                @change="onInputChange"></el-input>
    </div>
    <div class="tags" v-show="currentFieldId">
      <div style="width: 100%;margin-bottom: 15px;font-weight: bold" v-show="tags_2.length">语言标签：</div>
      <div class="tag" v-for="(item) in tags_2" :key="item.skill_id" @click="onTagSelected(item)">
        <span class="text">{{item.skill_name}}</span>
      </div>
      <div style="width: 100%;margin-bottom: 15px;font-weight: bold" v-show="tags_3.length">应用场景/框架/工具等标签：</div>
      <div class="tag" v-for="(item) in tags_3" :key="item.skill_id" @click="onTagSelected(item)">
        <span class="text">{{item.skill_name}}</span>
      </div>
      <div style="width: 100%;margin-bottom: 15px;font-weight: bold" v-show="tags_4.length">行业/项目标签：</div>
      <div class="tag" v-for="(item) in tags_4" :key="item.skill_id" @click="onTagSelected(item)">
        <span class="text">{{item.skill_name}}</span>
      </div>
    </div>
    <div class="level-selector" @click="toLevelsDesc" v-show="currentFieldId">
      <div class="col-title">
        <span class="label">选择认证等级</span>
      </div>
      <span class="action">等级对照表</span>
      <img class="icon" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
    </div>
    <div class="level-selector" v-show="currentFieldId">
      <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">认证收费将支付给面试官，而非平台，详情见等级对照表</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：70W以上年薪</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>支持2M以内的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 flow from "@/components/flow/flow";
  import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";

  export default {
    name: "profile",
    components: {
      flow, skillCertHeader
    },
    data() {
      return {
        rules: [{
          title: '1、认证优势',
          content: '* 平台派单时，将第一优先考虑进行过技术认证的用户' +
            '<br/>' +
            '* 享有技术认证标识，增加客户信任感' +
            '<br/>' +
            '* 依据技术等级将有更高的参考薪酬' +
            '<br/>' +
            '* 认证4级以上用户有机会被内邀为面试官' +
            '<br/>' +
            '* 面试过程中，将与高水平技术官的进行深层次沟通',
          linkUrl: ''
        }, {
          title: '2、等级对照表',
          content: '《客栈技术等级对照表》',
          linkUrl: 'https://jishuin.proginn.com/p/763bfbd71939'
        }, {
          title: '3、其他',
          content: '* 最终认证的技术等级以面试官反馈为准' + '<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: ''
      };
    },
    computed: {
      currentFieldId() {
        const field = this.fields.find((ele) => ele.selected);
        if (!field) {
          return null
        }
        return field.occupation_id;
      }
    },
    created() {
      this.conditions = [
        {
          text: '* 签约程序员客栈',
          linkName: "去签约",
          linkUrl: "/sign/new",
        }, {
          text: '* 有助于面试官快速了解你',
          linkName: "完善简历",
          linkUrl: `/wo/${this.userinfo.uid}`,
        }, {
          text: '* 客栈头像为本人露脸照片',
          linkName: "",
          linkUrl: "",
        }
      ]
    },
    methods: {
      showPaySuccess() {
        this.$router.push(`/frontend/skill_cert/resume_improve`);
      },
      toLevelsDesc() {
        window.open(`https://jishuin.proginn.com/p/763bfbd71939`)
      },
      onTagSelected(item) {
        if (this.tagsSelected.length >= 5) {
          this.$message.info('最多可添加五个标签')
          return
        }
        if (this.tagsSelected.find((ele) => {
          return ele.skill_name === item.skill_name;
        })) {
          return
        }
        this.tagsSelected.push(item);
      },
      onRemoveTag(index) {
        this.tagsSelected.splice(index, 1);
      },
      onFieldSelected(id, disabled) {
        if (disabled) {
          return
        }
        this.fields = this.fields.map((ele) => {
          ele.selected = ele.occupation_id === id;
          return ele;
        });
        this.getSkills();
        this.getLevels();
        this.tagsSelected = [];
      },
      onInputChange(value) {
        if (!value) return;
        if (this.tagsSelected.length >= 5) {
          this.$message.info('最多可添加五个标签')
          return
        }
        if (this.tagsSelected.find((ele) => {
          return ele.skill_name === value;
        })) {
          return
        }
        this.tagsSelected.push({
          skill_id: 0,
          skill_name: value
        });
        this.tagText = '';
      },
      handleLevelChange(value) {
        this.imgShow = value === '1105' || 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;
      },
      submit() {
        // if (!this.tagsSelected.length) {
        //   this.$message.error('请选择技能标签!');
        //   return
        // }
        // if (!this.level) {
        //   this.$message.error('请选择认证等级!');
        //   return
        // }
        // if (this.imgShow && !this.fileList.length) {
        //   this.$message.error('请上传薪资证明!');
        //   return
        // }
        const form = {
          product_type: 12,
          item_id: this.level,
          occupation_id: this.fields.find((ele) => ele.selected).occupation_id,
          skill: JSON.stringify(this.tagsSelected),
          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) {
              location.href = `/pay?product_type=12&product_id=${form.item_id}&next=/frontend/skill_cert/resume_improve`;
            } else if (parseInt(this.form.pay_status) === 2) {
              this.$router.push(`/frontend/skill_cert/resume_improve`);
            }
          }
        });
      },
      async getOccupation() {
        let res = await this.$axios.$post(`/wapi/pub/occupation`, {type: 2, form_type: 1});
        this.fields = res.data.list;
      },
      async getSkills() {
        const field = this.fields.find((ele) => ele.selected);
        if (!field) {
          return
        }
        let res = await this.$axios.$post(`/wapi/pub/skill`, {occupation_id: field.occupation_id, form_type: 1});
        this.tags_2 = res.data.list_2;
        this.tags_3 = res.data.list_3;
        this.tags_4 = res.data.list_4;
      },
      async getLevels() {
        const field = this.fields.find((ele) => ele.selected);
        if (!field) {
          return
        }
        let res = await this.$axios.$post(`/uapi/pub/freeworklevel`, {occupation_id: field.occupation_id});
        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;
        if (this.form.step !== 1) {
          switch (this.form.step) {
            case 2:
              await this.$router.push(`/frontend/skill_cert/resume_improve`);
              break;
            case 3:
              await this.$router.push(`/frontend/skill_cert/ready_interview`);
              break;
            case 4:
              await this.$router.push(`/frontend/skill_cert/start_interview`);
              break;
          }
          return true;
        }

        if (this.form.occupation_id) {
          this.fields = this.fields.map((ele) => {
            ele.selected = this.form.occupation_id === ele.occupation_id;
            return ele;
          });
        }
        if (this.form.item_id) {
          this.level = `${this.form.item_id}`;
          this.imgShow = this.level === '1105' || this.level === '1106';
        }
        this.tagsSelected = this.form.skill;
        if (this.form.img) {
          this.fileList = this.form.img.split(',').map((ele) => {
            const arr = ele.split("/")
            const imageUrl = arr[arr.length - 1]
            return {
              name: imageUrl,
              url: this.form.img,
              response: {
                filename: ele
              }
            }
          })
        }
        return false;
      },
      bindCallback() {
        if (this.mobile) {
          window.showPaySuccess = this.showPaySuccess
        }
      },
    },
    async mounted() {
      await this.getOccupation();
      const intercept = await this.getDetail();
      if (intercept) {
        return
      }
      await this.getLevels();
      await this.getSkills();
      this.bindCallback();
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 85px;
    @media(max-width: 768px) {
      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;
    }
  }
</style>