proginn-frontend/pages/job/_post/_id.vue

<template>
  <div class="wrapper mobile">
    <div class="contentArea">
      <div class="header">
        <div class="title-wrapper">
          <div class="title">{{recruitData.title}}</div>
          <div class="price">{{recruitData.salaryName}}</div>
        </div>
        <div class="require-list">
          <div class="require-item">
            <div class="require-label">技能要求：</div>
            <div class="require-text">
              <span>{{recruitData.skills.map(s=> s.name).join('，')}}</span>
            </div>
          </div>
          <div class="require-item">
            <span class="require-label">经验要求：</span>
            <span class="require-text">{{recruitData.experienceName}}</span>
          </div>
        </div>
        <div class="publish-info">
          <div class="left">
            <div class="l userImage" :class="calcUserVip">
              <img :src="defaultIcon(recruitData.ownerInfo && recruitData.ownerInfo.iconUrl)" alt="">
            </div>
            <div class="r">
              {{recruitData.ownerInfo.nickname}}
            </div>
          </div>
          <div class="right">
            {{recruitData.auditAtFormat}}
          </div>
        </div>
      </div>
      <div class="detail-wrapper">
        <div class="detail-title">详情描述</div>
        <div class="detail-text" v-html="whiteSpace(recruitData.description)"></div>
      </div>

      <!--公司信息-->
      <div class="company-wrapper" @click="jumpToCompany">
        <div class="data-title">公司信息</div>
        <div class="value-box">
          <div class="left" :class="calcUserVip">
            <img :src="defaultIcon(recruitData.companyInfo && recruitData.companyInfo.logo)" alt="">
          </div>
          <div class="center">
            <div class="ctitle" :class="calcUserVip"><p>{{recruitData.companyInfo.name}}</p></div>
            <div class="cdesc">{{recruitData.companyInfo.description}}</div>
          </div>
          <div class="right">
            <div class="rightIcon"></div>
          </div>
        </div>
      </div>

      <!--发布者&&是企业身份，增加招聘数据展示-->
      <div class="data-wrapper" v-if="recruitData.role==='owner'">
        <div class="data-title">招聘数据</div>
        <div class="value-box">
          <div class="left" @click="jumpToDetail('applicated')">已投递: <span>{{recruitData.countApplied || 0}}</span>
          </div>
          <div class="right" @click="jumpToDetail('communicated')">沟通中: <span>{{recruitData.countTalk || 0}}</span>
          </div>
        </div>
      </div>

      <div class="tips-wrapper">
        <div class="tips-title">温馨提示</div>
        <div v-if="recruitData.role==='owner'">
          <div class="tips-text">1.完善企业信息和岗位工作描述，有助于开发者了解岗位信息。</div>
          <div class="tips-text">2.您还可以每天刷新岗位，将其置于列表顶部。</div>
        </div>
        <div v-else>
          <div class="tips-text">如沟通过程中，发现需求方有不当行为，请立即联系客服处理！</div>
        </div>
      </div>
    </div>
    <div class="bottomArea">
      <!--如果是发布者-->
      <template v-if="recruitData.role==='owner'">
        <div class="btn" v-if="recruitData.status==='2'">正在审核中</div>
        <div class="btn-list" v-else-if="recruitData.status==='3'">
          <div class="btn-item" v-if="recruitData.canRefresh>0" @click="handleRefreshClick()">刷新</div>
          <div class="btn-item none" v-else>刷新</div>
          <div class="btn-item" @click="handleOfflineClick()">关闭岗位</div>
        </div>
        <div class="btn-list" v-else-if="recruitData.status==='4' || recruitData.status==='6'">
          <div class="btn-item" @click="handleEditClick()">编辑</div>
          <div class="btn-item" @click="handleReopenClick()">发布</div>
        </div>
      </template>
      <!--不是发布者-->
      <template v-else-if="recruitData.role==='developer'">
        <div class="btn-list" v-if="recruitData.status==='3'">
          <div class="btn-item" @click="handleContactClick()">立即沟通</div>
          <div class="btn-item" @click="handleSendClick()" :class="{none: Number(recruitData.applicationState) === 1}">
            {{Number(recruitData.applicationState) === 1 ? '已投递': '投递'}}
          </div>
        </div>
        <div class="contact-wrapper" :style="{backgroundColor: recruitData.statusColor}" v-else>
          <p>{{recruitData.statusName}}</p>
        </div>
      </template>
    </div>
    <div class="confirmBox" v-if="showConfirm">
      <div class="body">
        <div class="desc">您当前尚未签约，无法投递简历</div>
        <div class="button">
          <div class="cancle" @click="showConfirm=false">暂不考虑</div>
          <div class="submit" @click="jumpToAAA">前往签约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // '审核中', // 2
  //   '开放中', //3
  //   '停止招聘', //4
  //   '已删除', //5
  //   '审核失败', //6
  import { MessageBox } from 'mint-ui';
  import "mint-ui/lib/style.css";
  const COMPANY = 1;
  const PERSONAL = 2;
  export default {
    data() {
      return {
        recruitId: '',
        recruitData: {
          companyInfo: {},
          ownerInfo: {},
          skills: []
        },
        showConfirm: false,
        firstTip: true
      }
    },
    asyncData({ app }) {
      const { android } = app.$deviceType
      return {
        android
      }
    },

    computed: {},

    mounted() {
      const path = this.$route.path
      const string = path.split('.')[ 0 ]
      this.recruitId = string.split('/')[ 3 ]
      this.getRecruit()
      window.closeIt = this.handleOfflineClick
    },
    methods: {
      async getRecruit() {
        const recruitId = this.recruitId
        const params = {
          recruitId
        }
        let res = await this.$axios.$post("/api/recruit/getRecruit", params)
        if (res.status === 1) {
          this.recruitData = res.data
          let {role, longTimeTip} = this.recruitData
          //拥有者&企业方&需要提示
          if (role==='owner' && Number(longTimeTip) === 1 && this.firstTip) {
            this.firstTip = false
            MessageBox({
              title: '温馨提示',
              message: '如果您长时间未招聘到优质程序员，可以试试发布【整包/云端项目】，有专属客服帮您人工对接开发者。',
              cancelButtonText: "我知道了",
              confirmButtonText: "前往发布",
              closeOnClickModal: true,
              showCancelButton: true,
              showConfirmButton: true,
            }).then(action => {
              console.log(action)
              if (action!=='cancel') {
                location.href = "proginn://project_publish"
              }
            });
          }
        }
      },
      /** 刷新 **/
      async handleRefreshClick() {
        const recruitId = this.recruitId
        const params = {
          recruitId
        }
        let res = await this.$axios.$post("/api/recruit/refresh", params)
        if (res.status === 1) {
          console.log(res)
          this.$message({
            message: '岗位刷新成功!',
            type: 'success'
          })
          this.getRecruit()
        }
      },
      /** 关闭岗位 **/
      async handleOfflineClick() {
        const recruitId = this.recruitId
        const params = {
          recruitId
        }
        let res = await this.$axios.$post("/api/recruit/offline", params)
        console.log("关闭岗位", res)
        if (res.status === 1) {
          this.$message({
            message: '岗位关闭成功!',
            type: 'success'
          })
          setTimeout(()=>{
            MessageBox({
              title: '温馨提示',
              message: '程序员客栈邀请您评价本次兼职招聘，希望您能抽出5-10秒的时间参与，以帮助我们更好的提升服务。',
              cancelButtonText: "残忍拒绝",
              confirmButtonText: "前往评价",
              closeOnClickModal: true,
              showCancelButton: true,
              showConfirmButton: true,
            }).then(action => {
              if (action!=='cancel') {
                location.href = `proginn://recruit/company_comment?id=${this.recruitId}`
              }
              this.getRecruit()
            });
          }, 1500)
        }
      },
      /** 发布 **/
      async handleReopenClick() {
        const recruitId = this.recruitId
        const params = {
          recruitId
        }
        let res = await this.$axios.$post("/api/recruit/reopen", params)
        if (res.status === 1) {
          console.log(res)
          this.$message({
            message: '岗位已提交审核,请您耐心等待!',
            type: 'success'
          })
          this.getRecruit()
        }
      },
      /** 编辑 **/
      async handleEditClick() {
        const recruitId = this.recruitId
        location.href = `proginn://recruit/edit?id=${recruitId}`
      },
      async handleContactClick() {
        if (this.recruitData.loginStatus === -99) {
          location.href = 'proginn://login'
          return
        }
        let checkAns = await this.dealTips("沟通")
        if (!checkAns) {
          return
        }
        const recruitId = this.recruitId
        const params = {
          recruitId
        }
        let res = await this.$axios.$post("/api/recruit/chat", params)
        if (res.status === 1) {
          const { uid, title } = this.recruitData
          location.href = `proginn://recruit/chat?uid=${uid}&title=${encodeURIComponent(title)}&url=${encodeURIComponent(location.href)}`
        }
      },
      /** 投递 **/
      async handleSendClick() {
        const { applicationState, id} = this.recruitData
        if (!(Number(applicationState) === 0)) {
          return
        }
        //未签约，弹出提示
        if (!await this.checkLogin(true)) {
          return
        }
        let checkAns = await this.dealTips("投递")
        if (!checkAns) {
          return
        }
        let { realname_re } = this.$store.state.userinfo
        realname_re = Number(realname_re)
        if (realname_re !== 2) {
          this.showConfirm = true
          return
        }

        let loadingStatus = this.$loading({ fullscreen: true, text: '发送中...' });
        let p = {
          recruitId: id
        }
        this.$axios.post("/api/recruit/apply", p).then(res => {
          if (Number(res.data.status) === 1) {
            loadingStatus && loadingStatus.close()
            this.$message.success("投递成功！")
            this.getRecruit()
          }
        }).finally(() => {
          loadingStatus && loadingStatus.close()
        })
      },
      /**
       * 换行符 转化
       * @param desc
       */
      whiteSpace(desc) {
        let regx = /\n|↵/g;
        if (desc && desc.length > 0) {
          return desc.replace(regx, '<br/>')
        } else {
          return ''
        }
      },
      jumpToCompany() {
        const { uid } = this.recruitData
        location.href = `/wo/${uid}`
      },
      defaultIcon(url) {
        if (!url) {
          return 'https://stacdn.proginn.com/image/usericon/3.png'
        }
        return url
      },
      /** 跳转到招聘详情 **/
      jumpToDetail(type) {
        location.href = `proginn://recruit/data?id=${this.recruitId}&type=${type || 'applicated'}`
      },
      /** 跳转签约 **/
      jumpToAAA() {
        location.href = "proginn://developer_sign"
      },
      /** 计算用户vip **/
      calcUserVip() {
        const { isVip, vipTypeID } = this.recruitData.ownerInfo
        if (isVip) {
          return { [ 'vip' + vipTypeID ]: isVip }
        } else {
          return {}
        }
      },
      async dealTips(word="投递") {
        let { directionNotMatch, workTypeNotMatch} = this.recruitData
        //职位类型
        directionNotMatch = 1
        workTypeNotMatch = 1
        if (Number(directionNotMatch) === 1) {
         let ans1 = await MessageBox({
            title: '温馨提示',
            message: `该兼职岗位与您的【职位方向不符】，请您确认是否继续${word}。`,
            cancelButtonText: "再考虑下",
            confirmButtonText: "继续操作",
            closeOnClickModal: true,
            showCancelButton: true,
            showConfirmButton: true,
          })
          if (ans1 === "cancel") {
            return false
          }
        }
        //工作方式
        if (Number(workTypeNotMatch) === 1) {
          let ans2 = await MessageBox({
            title: '温馨提示',
            message: `该兼职岗位与您选择的【工作方式不符】，请您确认是否继续${word}。`,
            cancelButtonText: "再考虑下",
            confirmButtonText: "继续操作",
            closeOnClickModal: true,
            showCancelButton: true,
            showConfirmButton: true,
          })
          if (ans2 === "cancel") {
            return false
          }
        }
        return true
      }
    }
  }
</script>

<style lang="scss" scope>
  @import "~@/assets/css/job/_post_id.scss";
</style>