解决方案新增聊一聊

assets/css/kaifain/detail.scss

@@ -21,19 +21,19 @@
       flex-direction: column;
       .title {
         margin-top: 160px;
-        height:75px;
-        font-size:42px;
-        font-weight:600;
-        color:rgba(255,255,255,1);
-        line-height:75px;
+        height: 75px;
+        font-size: 42px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 1);
+        line-height: 75px;
       }
       .desc {
-        width:744px;
-        height:48px;
-        font-size:17px;
-        font-weight:400;
-        color:rgba(255,255,255,1);
-        line-height:24px;
+        width: 744px;
+        height: 48px;
+        font-size: 17px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+        line-height: 24px;
         text-align: center;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -44,10 +44,10 @@
 
       .btn {
         margin-top: 40px;
-        width:191px;
-        height:44px;
-        border-radius:3px;
-        border:1px solid rgba(255,255,255,1);
+        width: 191px;
+        height: 44px;
+        border-radius: 3px;
+        border: 1px solid rgba(255, 255, 255, 1);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -63,10 +63,10 @@
       .companyInfo {
         cursor: pointer;
         margin-top: 50px;
-        width:342px;
-        height:51px;
-        background:rgba(0,0,0,0.15);
-        border-radius:4px;
+        width: 342px;
+        height: 51px;
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: 4px;
         box-sizing: border-box;
         padding: 10px 12px;
         display: flex;
@@ -78,12 +78,12 @@
           .userImage {
             position: relative;
             img {
-              width:30px;
-              height:30px;
-              border-radius:15px;
+              width: 30px;
+              height: 30px;
+              border-radius: 15px;
               position: relative;
             }
-            &.vip1:after,  &.vip3:after{
+            &.vip1:after, &.vip3:after {
               content: " ";
               position: absolute;
               right: 0px;
@@ -107,11 +107,11 @@
           .cname {
             max-width: 250px;
             position: relative;
-            height:17px;
-            font-size:12px;
-            font-weight:600;
-            color:rgba(255,255,255,1);
-            line-height:17px;
+            height: 17px;
+            font-size: 12px;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 1);
+            line-height: 17px;
             margin-left: 8px;
             word-break: keep-all;
             white-space: nowrap;
@@ -165,20 +165,20 @@
     box-sizing: border-box;
 
     .amountArea {
-      width:1000px;
-      height:50px;
-      background:rgba(255,255,255,1);
+      width: 1000px;
+      height: 50px;
+      background: rgba(255, 255, 255, 1);
       border-bottom: 1px solid #ededed;
       padding: 0 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
 
-      .watchNum,  .collectNum, .setTop  {
+      .watchNum, .collectNum, .setTop {
         height: 24px;
-        font-size:16px;
-        font-weight:400;
-        color:rgba(60,60,60,1);
+        font-size: 16px;
+        font-weight: 400;
+        color: rgba(60, 60, 60, 1);
         line-height: 25px;
         padding-left: 27px;
         position: relative;
@@ -206,8 +206,8 @@
             background-size: cover;
           }
           &.isOk {
-            font-weight:500;
-            color:rgba(48,142,255,1);
+            font-weight: 500;
+            color: rgba(48, 142, 255, 1);
             &:before {
               background: url("~@/assets/img/icon/icon_collect_sel@2x.png") no-repeat;
               background-size: cover;
@@ -224,8 +224,8 @@
             background-size: cover;
           }
           &.isOk {
-            font-weight:500;
-            color:rgba(48,142,255,1);
+            font-weight: 500;
+            color: rgba(48, 142, 255, 1);
             &:before {
               background: url("~@/assets/img/icon/icon_to_top_sel@2x.png") no-repeat;
               background-size: cover;
@@ -236,20 +236,20 @@
     }
 
     .bannerSelect {
-      width:1000px;
-      height:60px;
-      background:rgba(255,255,255,1);
-      box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
+      width: 1000px;
+      height: 60px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 0px 0px 0px rgba(243, 243, 243, 1);
       display: flex;
       justify-content: center;
       align-items: center;
 
       .cell {
-        height:60px;
-        font-size:16px;
-        line-height:60px;
-        font-weight:400;
-        color:rgba(34,34,34,1);
+        height: 60px;
+        font-size: 16px;
+        line-height: 60px;
+        font-weight: 400;
+        color: rgba(34, 34, 34, 1);
         position: relative;
         cursor: pointer;
 
@@ -257,8 +257,8 @@
           margin-left: 100px;
         }
         &.selected {
-          font-weight:600;
-          color:rgba(34,34,34,1);
+          font-weight: 600;
+          color: rgba(34, 34, 34, 1);
 
           &:after {
             content: " ";
@@ -266,10 +266,10 @@
             bottom: 0;
             left: 50%;
             transform: translate(-50%);
-            width:40px;
-            height:3px;
-            background:rgba(48,142,255,1);
-            border-radius:2px;
+            width: 40px;
+            height: 3px;
+            background: rgba(48, 142, 255, 1);
+            border-radius: 2px;
           }
         }
       }
@@ -281,11 +281,11 @@
       padding: 27px 36px;
 
       .title {
-        height:27px;
-        font-size:20px;
-        font-weight:600;
-        color:rgba(51,51,51,1);
-        line-height:27px;
+        height: 27px;
+        font-size: 20px;
+        font-weight: 600;
+        color: rgba(51, 51, 51, 1);
+        line-height: 27px;
         text-align: left;
       }
       .introContent {
@@ -406,7 +406,6 @@
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 
-
   .topArea {
     position: relative;
     margin: 0 0 0 !important;
@@ -441,11 +440,11 @@
       .title {
         width: pxtovw(355);
         margin: pxtovw(128) auto 0 auto;
-        height:pxtovw(36);
-        font-size:pxtovw(23);
-        font-weight:600;
-        color:rgba(255,255,255,1);
-        line-height:pxtovw(36);
+        height: pxtovw(36);
+        font-size: pxtovw(23);
+        font-weight: 600;
+        color: rgba(255, 255, 255, 1);
+        line-height: pxtovw(36);
         white-space: nowrap;
         word-break: keep-all;
         overflow: hidden;
@@ -455,10 +454,10 @@
       .desc {
         margin-top: pxtovw(15);
         width: pxtovw(335);
-        height:pxtovw(32);
-        font-size:pxtovw(12);
-        font-weight:400;
-        color:rgba(255,255,255,1);
+        height: pxtovw(32);
+        font-size: pxtovw(12);
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
         line-height: pxtovw(16);
         text-align: center;
         overflow: hidden;
@@ -470,10 +469,10 @@
       .companyInfo {
         cursor: pointer;
         margin-top: pxtovw(15);
-        width:pxtovw(237);
-        height:pxtovw(41);
-        background:rgba(0,0,0,0.15);
-        border-radius:pxtovw(4);
+        width: pxtovw(237);
+        height: pxtovw(41);
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: pxtovw(4);
         box-sizing: border-box;
         padding: pxtovw(10) pxtovw(12);
         display: flex;
@@ -487,11 +486,11 @@
             flex-shrink: 0;
             position: relative;
             img {
-              width:pxtovw(20);
-              height:pxtovw(20);
+              width: pxtovw(20);
+              height: pxtovw(20);
               border-radius: 50%;
             }
-            &.vip1:after,  &.vip3:after{
+            &.vip1:after, &.vip3:after {
               content: " ";
               position: absolute;
               right: 0px;
@@ -515,8 +514,8 @@
           .cname {
             max-width: 50vw;
             font-size: pxtovw(12);
-            font-weight:600;
-            color:rgba(255,255,255,1);
+            font-weight: 600;
+            color: rgba(255, 255, 255, 1);
             margin-left: 8px;
             transform-origin: left center;
             transform: scale(0.83);
@@ -573,10 +572,10 @@
       justify-content: space-between;
       align-items: center;
 
-      .watchNum, .collectNum, .setTop  {
+      .watchNum, .collectNum, .setTop {
         height: pxtovw(20);
-        font-size:pxtovw(14);
-        font-weight:400;
+        font-size: pxtovw(14);
+        font-weight: 400;
         color: #fff;
         line-height: pxtovw(21);
         padding-left: pxtovw(22);
@@ -605,7 +604,7 @@
             background-size: cover;
           }
           &.isOk {
-            font-weight:500;
+            font-weight: 500;
             &:before {
               background: url("~@/assets/img/icon/icon_collect_sel_mobile@2x.png") no-repeat;
               background-size: cover;
@@ -614,8 +613,8 @@
         }
       }
       .right {
-        border-radius:pxtovw(16);
-        border:1px solid rgba(255,255,255,1);
+        border-radius: pxtovw(16);
+        border: 1px solid rgba(255, 255, 255, 1);
         cursor: pointer;
         box-sizing: content-box;
         padding: pxtovw(6) pxtovw(14);
@@ -625,7 +624,7 @@
             background-size: cover;
           }
           &.isOk {
-            font-weight:500;
+            font-weight: 500;
             &:before {
               background: url("~@/assets/img/icon/icon_to_top_mobile@2x.png") no-repeat;
               background-size: cover;
@@ -635,22 +634,21 @@
       }
     }
 
-
     .bannerSelect {
-      width:100vw;
-      height:pxtovw(45);
-      background:rgba(255,255,255,1);
-      box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
+      width: 100vw;
+      height: pxtovw(45);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 0px 0px 0px rgba(243, 243, 243, 1);
       display: flex;
       justify-content: center;
       align-items: center;
 
       .cell {
-        height:pxtovw(45);
-        font-size:pxtovw(15);
-        font-weight:500;
-        color:#888888;
-        line-height:pxtovw(45);
+        height: pxtovw(45);
+        font-size: pxtovw(15);
+        font-weight: 500;
+        color: #888888;
+        line-height: pxtovw(45);
         position: relative;
         cursor: pointer;
 
@@ -658,8 +656,8 @@
           margin-left: pxtovw(47);
         }
         &.selected {
-          font-weight:600;
-          color:rgba(34,34,34,1);
+          font-weight: 600;
+          color: rgba(34, 34, 34, 1);
 
           &:after {
             content: " ";
@@ -667,10 +665,10 @@
             bottom: 0;
             left: 50%;
             transform: translate(-50%);
-            width:pxtovw(15);
-            height:pxtovw(3);
-            background:rgba(48,142,255,1);
-            border-radius:pxtovw(2);
+            width: pxtovw(15);
+            height: pxtovw(3);
+            background: rgba(48, 142, 255, 1);
+            border-radius: pxtovw(2);
           }
         }
       }
@@ -792,28 +790,58 @@
   .mobileBottomArea {
     width: 100vw;
     height: pxtovw(50);
-    background:rgba(255,255,255,1);
-    box-shadow:0px pxtovw(6) pxtovw(23) 0px rgba(13,24,36,0.07);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px pxtovw(6) pxtovw(23) 0px rgba(13, 24, 36, 0.07);
     position: fixed;
     bottom: 0;
     left: 0;
 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .mobileLeftChat {
+      flex-grow: 1;
+      min-width: pxtovw(230);
+      height: pxtovw(45);
+      display: flex;
+      align-items: center;
+      .icon {
+        margin-left: pxtovw(16) ;
+        width: pxtovw(28);
+        height: pxtovw(28);
+        background-size: cover;
+        background-repeat: no-repeat;
+        &.chat {
+          background-image: url("~@/assets/img/icon/icon_chat@2x.png");
+        }
+      }
+      .word {
+        margin-left: pxtovw(4);
+        height: pxtovw(22);
+        font-size: pxtovw(16);
+        font-weight: 400;
+        color: rgba(23, 34, 47, 1);
+        line-height: pxtovw(22);
+      }
+    }
+
     .mobileBottomBtn {
-      margin: pxtovw(5) auto auto;
-      width:pxtovw(355);
-      height:pxtovw(40);
-      background:rgba(48,142,255,1);
-      box-shadow:0px 2px 6px 0px rgba(48,142,255,0.3);
-      border-radius:2px;
+      flex-grow: 1;
+      min-width: pxtovw(140);
+      height: pxtovw(45);
+      background: rgba(48, 142, 255, 1);
+      box-shadow: 0px 2px 6px 0px rgba(48, 142, 255, 0.3);
+      border-radius: 2px;
       display: flex;
       justify-content: center;
       align-items: center;
       p {
-        height:pxtovw(20);
-        font-size:pxtovw(14);
-        font-weight:500;
-        color:rgba(255,255,255,1);
-        line-height:pxtovw(20);
+        height: pxtovw(20);
+        font-size: pxtovw(14);
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        line-height: pxtovw(20);
       }
     }
   }
@@ -829,8 +857,8 @@
   }
 }
 
-@supports(bottom: env(safe-area-inset-bottom)) {
+@supports (bottom: env(safe-area-inset-bottom)) {
   .mobileBottomArea {
-    height: calc(pxtovw(50) + env(safe-area-inset-bottom) );
+    height: calc(pxtovw(50) + env(safe-area-inset-bottom));
   }
 }

pages/kaifain/detail/_tid/index.vue

@@ -90,6 +90,10 @@
       </div>
     </div>
     <div class="mobileBottomArea" v-if="mobile">
+      <div class="mobileLeftChat" v-if="calcUserVip.vip1 || calcUserVip.vip3" @click="onChatForKaifain">
+        <div class="icon chat"></div>
+        <div class="word">和TA聊一聊</div>
+      </div>
       <div class="mobileBottomBtn" @click="isShowToast=true">
         <p>咨询了解</p>
       </div>
@@ -247,6 +251,16 @@
           location.href = `/company/${uid}`
         }
       },
+      /** 与企业方聊天 **/
+      onChatForKaifain() {
+        const {id:kafainId, uid, title} = this.detail
+        if (!this.$deviceType.app) {
+          this.$toast("请前往程序员客栈APP操作")
+          return
+        }
+        location.href =
+          `proginn://recruit/chat?uid=${uid}&title=${encodeURIComponent(title)}&url=${encodeURIComponent(location.href)}`
+      },
       /** 置顶 **/
       setToTopHandler() {
         const { is_author, is_top, is_vip, vip_type_id, id } = this.detail