兼职详情 底部按钮逻辑梳理

pages/job/_post/_id.vue

@@ -31,18 +31,33 @@
       </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" style="background-color: #999999;" 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 v-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>
+          <div class="contact-wrapper" :style="{backgroundColor: recruitData.statusColor}" v-else>
+            <p>{{recruitData.statusName}}</p>
+          </div>
+        </template>
+        <!-- 当前用户身份是企业 -->
+        <template v-else>
+          <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" style="background-color: #999999;" 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>
+      <!--不是发布者-->
       <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="">
@@ -57,6 +72,11 @@
 </template>
 
 <script>
+  // '审核中', // 2
+  //   '开放中', //3
+  //   '停止招聘', //4
+  //   '已删除', //5
+  //   '审核失败', //6
   export default {
     data() {
       return {
@@ -64,10 +84,13 @@
         recruitData: ''
       }
     },
+
+    computed: {},
+
     mounted() {
       const path = this.$route.path
-      const string = path.split('.')[0]
-      this.recruitId = string.split('/')[3]
+      const string = path.split('.')[ 0 ]
+      this.recruitId = string.split('/')[ 3 ]
       this.getRecruit()
     },
     methods: {
@@ -163,6 +186,7 @@
 
 <style lang="scss" scope>
   @import "~@/assets/css/scssCommon.scss";
+
   .wrapper {
     position: relative;
     width: 100vw;
@@ -178,7 +202,7 @@
   .mobile {
     .contentArea {
       width: 100%;
-      height:calc(100% - 18.67vw);
+      height: calc(100% - 18.67vw);
       overflow-x: hidden;
       overflow-y: scroll;
 
@@ -277,71 +301,71 @@
       }
     }
 
-   .bottomArea {
-     position: absolute;
-     bottom: 0;
-     left: 0;
-     width: 100%;
-     height: remtovw(1.2);
+    .bottomArea {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: remtovw(1.2);
 
-     display: flex;
-     justify-content: center;
-     align-items: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-     .contact-wrapper {
-       height: remtovw(0.96);
-       bottom: 0;
-       width: remtovw(6.7);
-       background-color: #308EFF;
-       display: flex;
-       align-items: center;
-       justify-content: center;
-       border-radius: 8px;
+      .contact-wrapper {
+        height: remtovw(0.96);
+        bottom: 0;
+        width: remtovw(6.7);
+        background-color: #308EFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
 
-       img {
-         margin-right: remtovw(0.2);
-         width: remtovw(0.44);
-         height: remtovw(0.44);
-       }
-       p {
-         line-height: remtovw(0.44);
-         font-weight: 500;
-         font-size: remtovw(0.32);
-         color: #ffffff;
-       }
-     }
-     .btn {
-       margin: 0 auto;
-       width: remtovw(6.7);
-       height: remtovw(0.96);
-       background-color: #308EFF;
-       line-height: remtovw(0.96);
-       text-align: center;
-       font-weight: 500;
-       font-size: remtovw(0.32);
-       color: #ffffff;
-       border-radius: 8px;
-     }
-     .btn-list {
-       height: 60px;
-       width: 100%;
-       display: flex;
-       align-items: center;
-       justify-content: center;
-     }
-     .btn-item {
-       margin-left: remtovw(0.25);
-       margin-right: remtovw(0.25);
-       width: remtovw(3);
-       height: remtovw(0.96);
-       background-color: #308EFF;
-       line-height: remtovw(0.96);
-       text-align: center;
-       font-weight: 500;
-       font-size: remtovw(0.32);
-       color: #ffffff;
-       border-radius: pxtovw(8);
-     }
-   }
+        img {
+          margin-right: remtovw(0.2);
+          width: remtovw(0.44);
+          height: remtovw(0.44);
+        }
+        p {
+          line-height: remtovw(0.44);
+          font-weight: 500;
+          font-size: remtovw(0.32);
+          color: #ffffff;
+        }
+      }
+      .btn {
+        margin: 0 auto;
+        width: remtovw(6.7);
+        height: remtovw(0.96);
+        background-color: #308EFF;
+        line-height: remtovw(0.96);
+        text-align: center;
+        font-weight: 500;
+        font-size: remtovw(0.32);
+        color: #ffffff;
+        border-radius: 8px;
+      }
+      .btn-list {
+        height: 60px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .btn-item {
+        margin-left: remtovw(0.25);
+        margin-right: remtovw(0.25);
+        width: remtovw(3);
+        height: remtovw(0.96);
+        background-color: #308EFF;
+        line-height: remtovw(0.96);
+        text-align: center;
+        font-weight: 500;
+        font-size: remtovw(0.32);
+        color: #ffffff;
+        border-radius: pxtovw(8);
+      }
+    }
   }
 </style>