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

<template>
  <div class="jobDetailMobile wrapper mobile" v-if="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="data-wrapper myJobDetail" @click="jumpToDetail('communicated')" v-if="recruitData.role==='owner'">
        <!--<div class="data-wrapper myJobDetail">-->
        <div class="data-title">招聘数据</div>
        <div class="value-box">
          <div class="left">已投递: <span>{{recruitData.countApplied || 0}}</span>
          </div>
          <div class="right">沟通中: <span>{{recruitData.countTalk || 0}}</span>
          </div>
          <div class="rightIcon"></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">
            <img :src="defaultIcon(recruitData.companyInfo && recruitData.companyInfo.logo)" alt=""/>
          </div>
          <div class="center">
            <div class="ctitle" :class="calcCompanyVip"><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="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 applyBtn" @click="handleSendClick()"
            :class="{none: Number(recruitData.applicationState) === 1}">
            {{Number(recruitData.applicationState) === 1 ? '已投递': '投递'}}
          </div>
          <div class="btn-item " @click="handleContactClick()">
            {{Number(recruitData.chatState) === 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>
  <div class="jobDetail" v-else>
    <div class="breadcrumb">
      <a
        v-for="(item, index) in breadcrumbList"
        :key="'breadcrumb'+index"
        :href="item.url"
        :title="item.name"
      >
        <p v-if="index!==breadcrumbList.length-1">{{item.name}} <span>&nbsp;>&nbsp;</span></p>
        <h1 v-else>{{item.name}}</h1>
      </a>
    </div>
    <div class="contentArea">
      <div class="jobTitleArea">
        <div class="jobTitle">{{recruitData.title}}</div>
        <div class="jobPrice">{{recruitData.salaryName}}</div>
      </div>
      <div class="skills">技能要求:<span>{{recruitData.skills.map(s=> s.name).join('，')}}</span></div>
      <div class="workTime">经验要求:<span>{{recruitData.experienceName}}</span></div>
      <div class="publishUser">
        <div class="userInfo" @click="jumpToCompany">
          <div class="img" :class="calcUserVip">
            <img :src="defaultIcon(recruitData.ownerInfo && recruitData.ownerInfo.iconUrl)" alt="">
          </div>
          <div class="name">
            {{recruitData.ownerInfo.nickname}}
          </div>
        </div>
        <div class="publishTime"><span>{{recruitData.auditAtFormat}}</span></div>
      </div>
      <div class="desc">
        <div class="descTitle">
          工作描述:
        </div>
        <div class="descValue" v-html="whiteSpace(recruitData.description)">>

        </div>
      </div>

      <div class="companyInfoArea">
        <div class="companyTitle">公司信息</div>
        <div class="companyInfo">
          <div class="img">
            <img :src="defaultIcon(recruitData.companyInfo && recruitData.companyInfo.logo)" alt=""/>
          </div>
          <div class="ctitle" :class="calcCompanyVip"><p>{{recruitData.companyInfo.name}}</p></div>
        </div>
      </div>
      <div class="btnArea">
        <div class="btn submitNow" :class="{noneClick: recruitData.role === 'owner'}" @click="showGoAppTipsHandler">
          <p>立即申请</p>
        </div>
      </div>
    </div>
    <!--<div class="rightArea">-->
    <!--<div class="qrcode" v-if="qrCodeBase64">-->
    <!--<img class="code" :src="qrCodeBase64" alt="">-->
    <!--<img class="logo" src="~@/assets/img/job/logo_icon_reverse2.jpg" alt="">-->
    <!--</div>-->
    <!--<p class="tips">使用程序员客栈APP,扫描二维码,</p>-->
    <!--<p class="tips">直接与雇主沟通！</p>-->
    <!--</div>-->
    <BottomBanner></BottomBanner>
    <SeoFooter style="margin-top: 30px;" :data="footer"/>
  </div>
</template>

<script>
  // '审核中', // 2
  //   '开放中', //3
  //   '停止招聘', //4
  //   '已删除', //5
  //   '审核失败', //6
  import { MessageBox } from 'mint-ui';
  import "mint-ui/lib/style.css";
  import DealSeoFooter from "@/components/job/dealSeoFooter"
  import SeoFooter from "@/components/SeoFooter"
  import BottomBanner from "@/components/job/bottomBanner"


  let qrcode = null
  if (process.browser) {
    qrcode = require("qrcode");
  }

  const COMPANY = 1;
  const PERSONAL = 2;
  export default {
    name: "JobListSeoDetail",
    components: { SeoFooter, BottomBanner },
    data() {
      return {
        showConfirm: false,
        showConfirmWord: "",
        qrCodeBase64: ""
      }
    },
    head() {
      return {
        title: `${this.recruitData.title}-程序员客栈`,
        meta: [ {
          'name': 'keywords',
          'content': `${this.recruitData.title}`
        }, {
          'name': 'descrption',
          'content': `程序员客栈提供${this.recruitData.title}招聘，欢迎各位应聘者提供简历积极应聘，祝应聘${this.recruitData.title}成功！`
        }, {
          'name': 'h1',
          'content': `${this.recruitData.title}`
        } ],
        link: [
          { rel: 'canonical', href: this.nowUrl },
        ]
      }
    },
    async asyncData({ ...params }) {
      try {
        params.store.commit("updateNoneCommonFooter", true)
      } catch ( e ) {
        console.log("updateNoneCommonFooter", e)
      }
      const { android } = params.app.$deviceType
      const { id } = params.app.context.route.params || {}
      let recruitId = id
      const p = {
        recruitId
      }
      let recruitData = {
        companyInfo: {},
        ownerInfo: {},
        skills: []
      }
      let res = await params.$axios.$post("/api/recruit/getRecruit", p)
      if (res.status === 1) {
        recruitData = res.data
      }

      /** 处理面包屑导航 **/
      let dealBreadcrumbList = [
        { name: '首页', url: "/" },
        { name: '兼职招聘', url: "/job/" },
        { name: recruitData.title, url: `/job/detail/${recruitData.id}.html` },
      ]

      let dealSeoFooterObj = new DealSeoFooter(params, recruitData)
      let footer = await dealSeoFooterObj.dealData()

      let nowUrl = ""
      try {
        const { headers: { host } } = params.app.context.req || {};
        let { fullPath } = params.app.context.route
        //设置baseLink
        if (host.indexOf('local') !== -1) {
          nowUrl = 'http://' + host + fullPath
        } else {
          nowUrl = 'https://' + host + fullPath
        }
      } catch ( e ) {
        console.log(e)
      }

      return {
        nowUrl: nowUrl,
        android,
        recruitId: recruitId,
        recruitData,
        mobile: params.app.$deviceType.isMobile(),
        breadcrumbList: dealBreadcrumbList,
        ...footer,
      }
    },

    computed: {
      /** 计算用户vip **/
      calcUserVip() {
        const { isVip, vipTypeID } = this.recruitData.ownerInfo
        if (isVip && Number(vipTypeID) < 3) {
          return { [ 'vip' + vipTypeID ]: isVip }
        } else {
          return {}
        }
      },
      /** 计算企业vip **/
      calcCompanyVip() {
        const { isVip, vipTypeID } = this.recruitData.ownerInfo
        if (isVip && Number(vipTypeID) >= 3) {
          return { [ 'vip' + vipTypeID ]: isVip }
        } else {
          return {}
        }
      },
    },

    mounted() {
      const path = this.$route.path
      const string = path.split('.')[ 0 ]
      this.recruitId = string.split('/')[ 3 ]
      let { role, longTimeTip } = this.recruitData
      //拥有者&企业方&需要提示
      if (role === 'owner' && Number(longTimeTip) === 1 && this.mobile) {
        MessageBox({
          title: '温馨提示',
          message: '如果您长时间未招聘到优质程序员，可以试试发布【整包/云端项目】，有专属客服帮您人工对接开发者。',
          cancelButtonText: "我知道了",
          confirmButtonText: "前往发布",
          closeOnClickModal: true,
          showCancelButton: true,
          showConfirmButton: true,
        }).then(action => {
          console.log(action)
          if (action !== 'cancel') {
            location.href = "proginn://project_publish"
          }
        });
      }

      if (!this.mobile) {
        let baseUrl = this.$store.state.domainConfig.siteUrl
        let jumpUrl = `${baseUrl}${location.pathname}`
        this.createCode(jumpUrl)
      }
      //处理分享信息
      //
      if (this.$deviceType.app) {
        try {
          // briefIntroduction: "全球不哈的吧"
          // description: "测试公司介绍"
          // logo: "https://inn.proginn.com/useralbum/666709/5e43f82e9fe94/recordsay1581512750.jpg"
          // name: "程序员"
          // shortName: ""
          // uid: "666709"
          // website: "http://jjjjjj"
          let { companyInfo: { name, shortName, logo }, description, occupationName, workTypeName, salaryName } = this.recruitData
          let companyName = shortName || name
          if (companyName.length > 7) {
            companyName = companyName.slice(0, 7) + '...'
          }
          let shareData = {
            title: `【程序员客栈】强烈推荐！${companyName}正在招聘${workTypeName}兼职${occupationName}工程师，待遇${salaryName}！`,
            description: "找程序员上程序员客栈～ ",
            logo_url: logo
          }
          console.log("分享信息", shareData)
          if (this.$deviceType.android) {
            shareData = JSON.stringify(shareData)
          }
          window.app_event.load_share_data(shareData)
        } catch ( e ) {
          console.log("处理分享信息 error ", e)
        }
      }
    },
    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
        }
      },
      /** 刷新 **/
      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() {
        // 是否是APP
        if (this.judgeToDownloadApp()) {
          return
        }
        if (this.recruitData.loginStatus === -99) {
          location.href = 'proginn://login'
          return
        }
        let { realname_re } = this.$store.state.userinfo
        realname_re = Number(realname_re)
        //未签约，弹出提示
        if (realname_re !== 2) {
          this.showConfirm = true
          this.showConfirmWord = "发起沟通"
          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
          this.getRecruit()
          location.href = `proginn://recruit/chat?uid=${uid}&title=${encodeURIComponent(title)}&url=${encodeURIComponent(location.href)}`
        }
      },
      /** 投递 **/
      async handleSendClick() {
        // 是否是APP
        if (this.judgeToDownloadApp()) {
          return
        }
        const { applicationState, id } = this.recruitData
        if (!(Number(applicationState) === 0)) {
          return
        }
        if (!await this.checkLogin(true)) {
          return
        }
        let { realname_re } = this.$store.state.userinfo
        realname_re = Number(realname_re)
        //未签约，弹出提示
        if (realname_re !== 2) {
          this.showConfirm = true
          this.showConfirmWord = "投递简历"
          return
        }
        let checkAns = await this.dealTips("投递")
        if (!checkAns) {
          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
        if (this.$deviceType.app) {
          location.href = `proginn://resume?uid=${uid}&company=1`
        } else {
          location.href = `/company/${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"
      },

      async dealTips(word = "投递") {
        let { directionNotMatch, workTypeNotMatch } = this.recruitData
        //职位类型
        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
      },
      //创建二维码
      createCode(url) {
        console.log('warn', url)
        qrcode.toDataURL(url, {
          width: 250,
          margin: 0,
          errorCorrectionLevel: "H"
        }).then(res => {
          this.qrCodeBase64 = res
        }).catch(err => {
          this.$toast.clear()
          this.$toast('生成二维码出错')
          console.warn(JSON.stringfy(err))
        })
      },
      showGoAppTipsHandler() {
        if (this.recruitData.role !== 'owner') {
          this.$message.info("用程序员客栈APP，扫描右侧二维码，直接与雇主沟通！")
        }
      },
      judgeToDownloadApp() {
        // 应用宝：https://sj.qq.com/myapp/detail.htm?apkName=com.proginn
        // iOS：https://apps.apple.com/cn/app/id979914687
        if (!this.$deviceType.app) {
          let url = this.$deviceType.ios ?
            "https://apps.apple.com/cn/app/id979914687" :
            "https://sj.qq.com/myapp/detail.htm?apkName=com.proginn"
          location.href = url
          return true
        }
        return false
      }
    }
  }
</script>

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