1.兼职招聘详情页改造

pages/job/_post/_id.vue

@@ -20,14 +20,60 @@
             <span class="require-text">{{recruitData.experienceName}}</span>
           </div>
         </div>
+        <div class="publish-info">
+          <div class="left">
+            <div class="l">
+              <img :src="defaultIcon(recruitData.ownerInfo && recruitData.ownerInfo.iconUrl)" alt="">
+            </div>
+            <div class="r">
+              {{recruitData.ownerInfo.username}}
+            </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">
+            <img :src="defaultIcon(recruitData.companyInfo && recruitData.companyInfo.logo)" alt="">
+          </div>
+          <div class="center">
+            <div class="ctitle">{{recruitData.companyInfo.name}}</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.status==='2' && recruitData.role==='owner'">
+        <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>
+      </div>
+
       <div class="tips-wrapper">
         <div class="tips-title">温馨提示</div>
-        <div class="tips-text">如沟通过程中，发现需求方有不当行为，请立即联系客服处理！</div>
+        <div v-if="recruitData.status==='2' && 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">
@@ -53,15 +99,16 @@
           </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 class="btn-item" @click="handleReopenClick()">发布</div>
           </div>
         </template>
       </template>
       <!--不是发布者-->
       <template v-else-if="recruitData.role==='developer'">
-        <div class="contact-wrapper" v-if="recruitData.status==='3'" @click="handleContactClick()">
-          <img src="~@/assets/img/icon_contact.png" alt="">
-          <p>立即沟通</p>
+        <div class="btn-list" v-if="recruitData.status==='3'" >
+          <div class="btn-item" @click="handleContactClick()">立即沟通</div>
+          <div class="btn-item" @click="handleSendClick()" :class="{none: recruitData.hasSend}">
+            {{recruitData.hasSend ? '已投递': '投递'}}</div>
         </div>
         <div class="contact-wrapper" :style="{backgroundColor: recruitData.statusColor}" v-else>
           <p>{{recruitData.statusName}}</p>
@@ -81,7 +128,10 @@
     data() {
       return {
         recruitId: '',
-        recruitData: ''
+        recruitData: {
+          companyInfo: {},
+          ownerInfo: {}
+        }
       }
     },
 
@@ -168,6 +218,26 @@
           location.href = `proginn://recruit/chat?uid=${uid}&title=${encodeURIComponent(title)}&url=${encodeURIComponent(location.href)}`
         }
       },
+      /** 投递 **/
+      async handleSendClick() {
+        const {hasSend, id} = this.recruitData
+        // if (!hasSend) {
+        //   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
@@ -180,6 +250,16 @@
           return ''
         }
       },
+      jumpToCompany() {
+        const {companyInfo:{uid}} = this.recruitData
+        location.href = `/wo/${uid}`
+      },
+      defaultIcon(url) {
+        if (!url) {
+          return 'https://stacdn.proginn.com/image/usericon/3.png'
+        }
+        return url
+      }
     }
   }
 </script>
@@ -209,7 +289,7 @@
       .header {
         overflow: hidden;
         padding-top: remtovw(.72);
-        padding-bottom: remtovw(.72);
+        /*padding-bottom: remtovw(.72);*/
         background-color: #ffffff;
       }
       .title-wrapper {
@@ -256,6 +336,58 @@
         font-size: remtovw(.25);
         color: #666666;
       }
+
+      .publish-info {
+        margin: pxtovw(17) auto 0;
+        width: pxtovw(355);
+        height: pxtovw(50);
+        font-size:pxtovw(14);
+        border-top: pxtovw(1) solid #ededed;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .left {
+          flex-grow: 1;
+          display: flex;
+          align-items: center;
+          height: pxtovw(50);
+
+          .l {
+            flex-shrink: 0;
+            width:pxtovw(32);
+            height:pxtovw(32);
+            font-size: 0;
+            img {
+              width:pxtovw(32);
+              height:pxtovw(32);
+              border-radius: 50%;
+            }
+          }
+          .r {
+            margin-left: pxtovw(10);
+            width: pxtovw(150);
+            height:pxtovw(28);
+            font-size:pxtovw(14);
+            font-weight:400;
+            color:rgba(68,68,68,1);
+            line-height:pxtovw(28);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .right {
+          margin-left: pxtovw(50);
+          height:pxtovw(17);
+          font-size:pxtovw(12);
+          font-weight:400;
+          color:rgba(153,153,153,1);
+          line-height:pxtovw(17);
+        }
+      }
+
       .detail-wrapper {
         overflow: hidden;
         margin-top: remtovw(.2);
@@ -277,6 +409,108 @@
         font-size: remtovw(0.28);
         color: #444444;
       }
+
+      .company-wrapper  {
+        overflow: hidden;
+        margin-top: remtovw(.2);
+        padding: pxtovw(16) 0;
+        background-color: #ffffff;
+        .data-title {
+          margin-left: remtovw(0.26);
+          line-height: remtovw(0.44);
+          font-weight: 600;
+          font-size: remtovw(0.32);
+          color: #333333;
+        }
+        .value-box {
+          margin: remtovw(0.18) auto 0;
+          width: pxtovw(355);
+          font-size:pxtovw(14);
+          font-weight:400;
+          color:rgba(68,68,68,1);
+          line-height:pxtovw(28);
+          display: flex;
+          align-items: center;
+
+          .left{
+            flex-shrink: 0;
+            width: pxtovw(53);
+            height: pxtovw(53);
+            font-size: 0;
+            img {
+              width: pxtovw(53);
+              height: pxtovw(53);
+            }
+          }
+          .center {
+            margin-left: pxtovw(10);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: pxtovw(53);
+            width: pxtovw(250);
+
+            .ctitle {
+              height:pxtovw(21);
+              font-size:pxtovw(15);
+              font-weight:600;
+              color:rgba(34,34,34,1);
+              line-height:pxtovw(21);
+            }
+            .cdesc {
+              width: pxtovw(250);
+              margin-top: pxtovw(2);
+              height:pxtovw(17);
+              font-size:pxtovw(12);
+              font-weight:400;
+              color:rgba(153,153,153,1);
+              line-height:pxtovw(17);
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+          .right {
+            margin-left: pxtovw(34);
+            flex-shrink: 0;
+            height: pxtovw(14);
+            width: pxtovw(8);
+            background: url('~@/assets/img/credit/rightIcon.png') no-repeat;
+            background-size: cover;
+          }
+        }
+      }
+      .data-wrapper {
+        overflow: hidden;
+        margin-top: remtovw(.2);
+        padding: pxtovw(16) 0;
+        background-color: #ffffff;
+        .data-title {
+          margin-left: remtovw(0.26);
+          line-height: remtovw(0.44);
+          font-weight: 600;
+          font-size: remtovw(0.32);
+          color: #333333;
+        }
+        .value-box {
+          margin: remtovw(0.18) auto 0;
+          width: pxtovw(355);
+          height:pxtovw(28);
+          font-size:pxtovw(14);
+          font-weight:400;
+          color:rgba(68,68,68,1);
+          line-height:pxtovw(28);
+          display: flex;
+          .left, .right {
+            span {
+              color: #308EFF;
+            }
+          }
+          .right {
+            margin-left: pxtovw(20);
+          }
+        }
+      }
       .tips-wrapper {
         overflow: hidden;
         margin: remtovw(0.2) auto;
@@ -336,35 +570,39 @@
       }
       .btn {
         margin: 0 auto;
-        width: remtovw(6.7);
-        height: remtovw(0.96);
+        width: pxtovw(355);
+        height: pxtovw(40);
         background-color: #308EFF;
-        line-height: remtovw(0.96);
+        line-height: pxtovw(40);
         text-align: center;
         font-weight: 500;
         font-size: remtovw(0.32);
         color: #ffffff;
-        border-radius: 8px;
+        border-radius: pxtovw(2);
       }
       .btn-list {
-        height: 60px;
+        height: pxtovw(60);
         width: 100%;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        margin: 0 pxtovw(10);
       }
       .btn-item {
-        margin-left: remtovw(0.25);
-        margin-right: remtovw(0.25);
-        width: remtovw(3);
-        height: remtovw(0.96);
+        width: pxtovw(173);
+        height: pxtovw(40);
         background-color: #308EFF;
-        line-height: remtovw(0.96);
+        line-height: pxtovw(40);
         text-align: center;
         font-weight: 500;
-        font-size: remtovw(0.32);
+        font-size: pxtovw(14);
         color: #ffffff;
-        border-radius: pxtovw(8);
+        border-radius: pxtovw(2);
+
+        &.none {
+          background-color: #999999;
+          color: #666666;
+        }
       }
     }
   }