移动端兼职招聘优化

assets/css/job/_post_id.scss

@@ -562,6 +562,14 @@
           background-color: #ECECEC;
           color: #666666;
         }
+
+        &.applyBtn {
+          background:rgba(255,255,255,1);
+          box-shadow:0px 1px 8px 0px rgba(13,24,36,0.07);
+          border-radius:pxtovw(2);
+          font-weight:500;
+          color:rgba(102,102,102,1);
+        }
       }
     }
 

assets/css/kaifain/index.scss

@@ -272,7 +272,18 @@
                 font-weight: 400;
                 color: rgba(153, 153, 153, 1);
                 line-height: 17px;
-
+              }
+              .status {
+                margin-left: 8px;
+                background: rgba(48, 142, 255, 0.11);
+                height: 18px;
+                font-size: 13px;
+                font-weight: 500;
+                color: rgba(48, 142, 255, 1);
+                line-height: 18px;
+                padding: 4px 17px;
+                border-radius: 2px;
+                box-sizing: content-box;
               }
             }
           }

assets/css/otherpage/companyComplete.scss

@@ -0,0 +1,491 @@
+@import "../scssCommon.scss";
+
+.companyComplete {
+  width: 1000px !important;
+  min-height: 937px;
+  background: rgba(255, 255, 255, 1);
+
+  .titleArea {
+    width: calc(100% - 40px);
+    height: 90px;
+    margin: 0 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
+    flex-direction: column;
+    .title {
+      height:37px;
+      font-size:26px;
+      font-weight:600;
+      color:rgba(29,42,58,1);
+      line-height:37px;
+    }
+    .smallTitle {
+      height:24px;
+      font-size:12px;
+      font-weight:400;
+      color:rgba(102,102,102,1);
+      line-height:24px;
+    }
+  }
+
+  .bodyArea {
+    width: 500px;
+    margin: 0 auto;
+
+
+    .topSteps {
+      height: 130px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .cell {
+        width: 60px;
+        overflow: visible;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .number {
+          width:26px;
+          height:26px;
+          border:1px solid rgba(204,204,204,1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+          font-size:13px;
+          font-weight:400;
+          color:rgba(102,102,102,1);
+          line-height:26.01px
+        }
+        .word {
+          text-align: center;
+          height:18px;
+          font-size:14px;
+          font-weight:400;
+          color:rgba(102,102,102,1);
+          line-height:18px;
+          margin-top: 13px;
+          word-break: break-all;
+          white-space: nowrap;
+        }
+        &.ok {
+          .number {
+            background:rgba(48,142,255,1);
+            box-shadow:0px 2px 8px 0px rgba(48,142,255,0.3);
+            color:rgba(255,255,255,1);
+          }
+          .word {
+            font-weight:600;
+            color:rgba(34,34,34,1);
+          }
+        }
+      }
+
+      .line {
+        margin-top: -30px;
+        width:191px;
+        height:1px;
+        background-color: #ccc;
+      }
+    }
+
+    .inputArea {
+      .inputBox {
+        margin-top: 31px;
+        p {
+          height: 23px;
+          font-size: 16px;
+          font-weight: 500;
+          color: rgba(25, 34, 46, 1);
+          line-height: 23px;
+          text-align: left;
+        }
+        input, textarea {
+          margin-top: 3px;
+          width: 396px;
+          height: 54px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 3px;
+          border: 1px solid rgba(221, 225, 230, 1);
+          padding: 10px;
+        }
+        textarea {
+          width: 500px;
+          height: 110px;
+        }
+      }
+    }
+
+    .uploadFile {
+      margin-top: 27px;
+      display: flex;
+      align-items: center;
+      .name {
+        height: 18px;
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(25, 34, 46, 1);
+        line-height: 18px;
+        span {
+          height: 18px;
+          font-size: 13px;
+          font-weight: 600;
+          color: #FF5B3B;
+          line-height: 18px;
+        }
+      }
+
+      .uploadArea {
+        margin-left: 17px;
+        display: flex;
+        align-items: center;
+
+        .tipps {
+          margin-left: 10px;
+          color: #FF5B3B
+        }
+      }
+
+      .avatar-uploader {
+        margin-top: 9px;
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+        position: relative;
+        background: #fff;
+        .el-icon-delete {
+          display: none;
+        }
+
+        .el-upload {
+          width: 80px;
+          height: 80px;
+          border: 1px dashed #409eff;
+          border-radius: 6px;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: auto;
+            object-fit: contain;
+            object-position: top left;
+          }
+          &:hover {
+            border-color: #409eff;
+            .el-icon-delete {
+              display: block;
+            }
+          }
+        }
+        .avatar-uploader-icon {
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-size: 32px;
+          color: #999;;
+          width: 80px;
+          height: 80px;
+          line-height: 80px;
+          text-align: center;
+        }
+        .avatar {
+          width: 80px;
+          height: 80px;
+          display: block;
+        }
+      }
+    }
+
+    .submitButton {
+      margin:26px  0 33px 0 ;
+      display: flex;
+      align-items: center;
+      height: 55px;
+
+      .right {
+        width: 185px;
+        height: 46px;
+        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;
+        cursor: pointer;
+
+        p {
+          height: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(255, 255, 255, 1);
+          line-height: 20px;
+        }
+
+        &.noSubmit {
+          cursor: not-allowed;
+          background:rgba(236,236,236,1);
+          box-shadow: none;
+          p {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.companyCompleteMobile {
+  width: 100vw !important;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(255, 255, 255, 1);
+  padding: 0 pxtovw(10) pxtovw(80) pxtovw(10);
+  margin: 0;
+
+  .titleArea {
+    width: 100%;
+    height: pxtovw(62);
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    border-bottom: pxtovw(2) solid rgba(0, 0, 0, 0.06);
+
+    .title {
+      font-size:pxtovw(20);
+      font-weight:600;
+      color:rgba(29,42,58,1);
+      line-height: pxtovw(28);
+    }
+    .smallTitle {
+      height: pxtovw(12);
+      font-size:pxtovw(12);
+      font-weight:400;
+      color:rgba(102,102,102,1);
+      line-height:pxtovw(12);
+    }
+  }
+
+  .bodyArea {
+    width: 100%;
+    margin: 0 auto;
+
+    .topSteps {
+      height: pxtovw(160);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .cell {
+        width: pxtovw(45);
+        overflow: visible;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .number {
+          width:pxtovw(26);
+          height:pxtovw(26);
+          border:1px solid rgba(204,204,204,1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+          font-size:pxtovw(13);
+          font-weight:400;
+          color:rgba(102,102,102,1);
+          line-height:pxtovw(26.01)
+        }
+        .word {
+          text-align: center;
+          height:pxtovw(18);
+          font-size:pxtovw(13);
+          font-weight:400;
+          color:rgba(102,102,102,1);
+          line-height:pxtovw(18);
+          margin-top: pxtovw(13);
+          word-break: break-all;
+          white-space: nowrap;
+        }
+        &.ok {
+          .number {
+            background:rgba(48,142,255,1);
+            box-shadow:0px 2px 8px 0px rgba(48,142,255,0.3);
+            color:rgba(255,255,255,1);
+          }
+          .word {
+            font-weight:600;
+            color:rgba(34,34,34,1);
+          }
+        }
+      }
+
+      .line {
+        margin-top: pxtovw(-30);
+        width: pxtovw(100);
+        height:1px;
+        background-color: #ccc;
+      }
+    }
+
+    .inputArea {
+      .inputBox {
+        margin-top: pxtovw(31);
+        p {
+          height: pxtovw(20);
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(25, 34, 46, 1);
+          line-height: pxtovw(20);
+          text-align: left;
+        }
+        input, textarea {
+          margin-top: pxtovw(5);
+          width: pxtovw(350);
+          height: pxtovw(44);
+          background: rgba(255, 255, 255, 1);
+          border-radius: pxtovw(3);
+          border: pxtovw(1) solid rgba(221, 225, 230, 1);
+          padding: pxtovw(10);
+        }
+        textarea {
+          width: pxtovw(350);
+          height: pxtovw(110);
+        }
+      }
+    }
+
+    .uploadArea {
+      display: flex;
+      align-items: center;
+
+      .tipps {
+        margin-left: pxtovw(10);
+        color: #FF5B3B
+      }
+    }
+
+    .uploadFile {
+      margin-top: pxtovw(29);
+      display: flex;
+      align-items: center;
+
+      .name {
+        height: pxtovw(18);
+        font-size: pxtovw(13);
+        font-weight: 600;
+        color: rgba(25, 34, 46, 1);
+        line-height: pxtovw(18);
+        span {
+          height: pxtovw(18);
+          font-size: pxtovw(13);
+          font-weight: 600;
+          color: #FF5B3B;
+          line-height: pxtovw(18);
+        }
+      }
+
+      .avatar-uploader {
+        margin-left: pxtovw(15);
+        margin-top: pxtovw(9);
+        width: pxtovw(80);
+        height: pxtovw(80);
+        overflow: hidden;
+        position: relative;
+        background: #fff;
+        .el-icon-delete {
+          display: none;
+        }
+
+        .el-upload {
+          width: pxtovw(80);
+          height: pxtovw(80);
+          border: pxtovw(1) dashed #409eff;
+          border-radius: pxtovw(6);
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: auto;
+            object-fit: contain;
+            object-position: top left;
+          }
+          &:hover {
+            border-color: #409eff;
+            .el-icon-delete {
+              display: block;
+            }
+          }
+        }
+        .avatar-uploader-icon {
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-size: pxtovw(44);
+          color: #999;;
+          width: pxtovw(80);
+          height: pxtovw(80);
+          line-height: pxtovw(80);
+          text-align: center;
+        }
+        .avatar {
+          width: pxtovw(80);
+          height: pxtovw(80);
+          display: block;
+        }
+        .title {
+          position: absolute;
+          left: 50%;
+          bottom: pxtovw(40);
+          transform: translateX(-50%);
+          font-size: pxtovw(13);
+          font-weight: 500;
+          color: #409eff;
+          line-height: pxtovw(18);
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .submitButton {
+      margin-top: pxtovw(30);
+      display: flex;
+      align-items: center;
+      height: pxtovw(55);
+
+      .right {
+        width: pxtovw(350);
+        height: pxtovw(46);
+        background: rgba(48, 142, 255, 1);
+        box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
+        border-radius: pxtovw(2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        p {
+          height: pxtovw(20);
+          font-size: pxtovw(14);
+          font-weight: 500;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(20);
+        }
+
+        &.noSubmit {
+          cursor: not-allowed;
+          background:rgba(236,236,236,1);
+          box-shadow: none;
+          p {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}

nuxt.config.js

@@ -143,38 +143,38 @@ module.exports = {
     /*
      ** You can extend webpack config here
      */
-    extractCSS: {
-      //提取html中的 css到文件
-      splitChunks: {
-        cacheGroups: {
-          styles: {
-            name: "styles",
-            test: /\.(css|vue|scss|less)$/,
-            chunks: "all",
-            enforce: true
-          }
-        }
-      }
-    },
-    optimization: {
-      splitChunks: {
-        chunks: "all",
-        automaticNameDelimiter: ".",
-        name: undefined,
-        cacheGroups: {}
-      }
-    },
-    extend(config, ctx) {
-      config.optimization = {
-        splitChunks: {
-          chunks: "all",
-          automaticNameDelimiter: ".",
-          name: undefined,
-          cacheGroups: {}
-        }
-      };
-      //console.log(config);
-    }
+    // extractCSS: {
+    //   //提取html中的 css到文件
+    //   splitChunks: {
+    //     cacheGroups: {
+    //       styles: {
+    //         name: "styles",
+    //         test: /\.(css|vue|scss|less)$/,
+    //         chunks: "all",
+    //         enforce: true
+    //       }
+    //     }
+    //   }
+    // },
+    // optimization: {
+    //   splitChunks: {
+    //     chunks: "all",
+    //     automaticNameDelimiter: ".",
+    //     name: undefined,
+    //     cacheGroups: {}
+    //   }
+    // },
+    // extend(config, ctx) {
+    //   config.optimization = {
+    //     splitChunks: {
+    //       chunks: "all",
+    //       automaticNameDelimiter: ".",
+    //       name: undefined,
+    //       cacheGroups: {}
+    //     }
+    //   };
+    //   //console.log(config);
+    // }
   },
 
   router: {

pages/job/detail/_id.vue

@@ -93,10 +93,12 @@
       <!--不是发布者-->
       <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}">
+          <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>
@@ -259,6 +261,7 @@
         console.log(e)
       }
 
+      recruitData.chatState = 1
       return {
         nowUrl: nowUrl,
         android,

pages/kaifain/index.vue

@@ -69,6 +69,7 @@
                 <div class="bottom">
                   <p class="icon" v-if="item.company_name"></p>
                   <p class="word" v-if="item.company_name ">{{item.company_name || '' }}</p>
+                  <p class="status" v-if="item.company_verify_status == 2">{{"已认证"}}</p>
                 </div>
               </div>
             </nuxt-link>
@@ -221,6 +222,7 @@
       if (this.mobile) {
         document.body.style = "overflow:hidden;"
       }
+      console.log(this.dataList)
     },
     methods: {
       changeIndex(key, item) {

pages/otherpage/companyComplete/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div :class="mobile ? 'companyCompleteMobile' : 'companyComplete'">
+    <div class="titleArea">
+      <p class="title">创建企业信息</p>
+      <p class="smallTitle">
+        入驻解决方案，您只需两步
+      </p>
+    </div>
+    <div class="bodyArea">
+      <div class="selectList">
+        <div class="topSteps">
+          <div class="cell" :class="{ok: true}">
+            <p class="number">1</p>
+            <p class="word">创建企业信息</p>
+          </div>
+          <div class="line"></div>
+          <div class="cell">
+            <p class="number">2</p>
+            <p class="word">新建解决方案</p>
+          </div>
+          <div class="line"></div>
+          <div class="cell">
+            <p class="number">3</p>
+            <p class="word">完成</p>
+          </div>
+        </div>
+        <div class="uploadFile">
+          <p class="name">LOGO</p>
+          <div class="uploadArea">
+            <el-upload
+              v-loading="uploading"
+              class="avatar-uploader"
+              action="#"
+              :show-file-list="false"
+              :multiple="false"
+              accept="image/png, image/jpeg"
+              :before-upload="handleFileChange"
+            >
+              <i v-if="imageUrl" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
+              <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
+              <div v-else class="noneImage">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </el-upload>
+            <p class="tipps">
+              (图片大小最大2M)
+            </p>
+          </div>
+        </div>
+        <div class="inputArea">
+          <div class="inputBox" v-for="item in inputList" :key="item.name">
+            <p class="name">{{item.title}}</p>
+            <input type="text" placeholder="请输入" v-model="item.value"  v-if="item.type==='text'"/>
+            <textarea  placeholder="请输入" v-model="item.value"  v-if="item.type==='textarea'" cols="50" rows="10"/>
+          </div>
+        </div>
+
+      </div>
+      <div class="submitButton">
+        <div class="left"></div>
+        <div class="right" @click="submitForm">
+          <p>保存, 去新建解决方案</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'companyComplete',
+    data() {
+      return {
+        typeList: [],
+        inputList: [
+          { name: 'name', title: '公司全称', value: '', type: "text"  },
+          { name: 'register_number', title: '公司简称', value: '', type: "text"  },
+          { name: 'phone', title: '公司链接', value: '', type: "text" },
+          { name: 'desc', title: '公司简介', value: '', type: "textarea"},
+        ],
+        imageUrl: '',
+        dataInfo: {},
+        uploading: false,
+        loadingStatus: null,
+        getTimes: 30
+      }
+    },
+    asyncData({ app }) {
+      return {
+        mobile: app.$deviceType.isMobile(),
+      }
+    },
+    computed: {
+      isSubmit() {
+        const { verify_status } = this.dataInfo || {}
+        if ([ 1, 2 ].indexOf(Number(verify_status)) !== -1) {
+          return false
+        }
+        return true
+      },
+    },
+    async created() {
+
+    },
+    async mounted() {
+      await this.needLogin()
+      this.getInfo()
+    },
+    methods: {
+      /** 获取展示状态 */
+      getInfo(isRefresh=false) {
+        this.$axios.get('/api/remote/get_company_verify_info_for_apply').then(res => {
+          if (res.data.status === 1) {
+            this.dataInfo = res.data.data
+            // status: "0" 未认证 1认证中 2已成功 3被拒绝
+            this.inputList.forEach(item => {
+              let value = this.dataInfo[ item.name ]
+              if (value) {
+                item.value = value
+              }
+            })
+            const {need_pay, verify_status} = res.data.data
+            if (res.data.data && (Number(need_pay) !== 1 || verify_status) && isRefresh) {
+              this.$message.success("您已提交企业认证，请耐心等待审核结果!")
+              clearInterval(this.interval)
+              this.loadingStatus && this.loadingStatus.close()
+            }
+            this.inputList = [ ...this.inputList ]
+            // this.imageUrl = this.dataInfo.photo_url || ''
+            console.log('ist', this.inputList)
+          }
+        })
+      },
+
+      /** 提交 **/
+      submitForm() {
+
+        //认证中 已认证 不能再次提交
+        if (!this.isSubmit) {
+          this.$message.warning('你已提交企业认证信息，修改请联系客服')
+          return
+        }
+        let p = {
+          name: '',
+          register_number: '',
+          phone: '',
+          photo_url: ''
+        }
+        p.photo_url = this.imageUrl
+        this.inputList.forEach(item => {
+          p[ item.name ] = item.value
+        })
+
+        if (!p.name) {
+          this.$message.warning('请输入企业名称');
+          return;
+        }
+        if (!p.register_number) {
+          this.$message.warning('请输入工商执照注册号');
+          return;
+        }
+        if (!p.phone) {
+          this.$message.warning('请输入手机号码');
+          return;
+        }
+        if (!p.photo_url) {
+          this.$message.warning('请上传加盖公章的营业执照');
+          return;
+        }
+
+        this.$axios.post('/api/remote/save_company_verify_apply', p).then(res => {
+          let data = res.data
+          if (data.status === 1) {
+            //跳转到支付58元钱，之后提交
+            if (Number(this.dataInfo.need_pay) === 1) {
+              this.$message.success('提交成功,正在跳转...')
+              let appUrl = "proginn://pay?product_type=5&product_id=0"
+              let url = '/pay?product_type=5'
+              if (!this.$deviceType.app) {
+                window.open(url, '_black')
+              } else {
+                console.log('跳转到移动端支付...', url)
+                location.href = appUrl
+              }
+              setTimeout(()=>{
+                this.loadingStatus = this.$loading({ fullscreen: true, text: '正在查询支付状态...' });
+                this.getPayStatus()
+              }, 1500)
+            } else {
+              this.$message.success('您已提交企业认证，请耐心等待审核结果!')
+              setTimeout(() => {
+                if (this.$deviceType.app) {
+                  history.back()
+                } else {
+                  location.href = '/wo/work_todo'
+                }
+              }, 1000)
+            }
+          } else {
+            this.$message.error('提交失败')
+          }
+        }).catch(e => {
+          console.log(e)
+          this.$message.error('提交失败')
+        })
+      },
+
+      handleFileChange(file) {
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          this.$message.error('上传图片大小不能超过 2MB!');
+          return
+        }
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("original_filename", file.name);
+        this.uploading = true;
+        this.$axios
+          .$post(`/upload_image`, formData, {
+            headers: { "Content-Type": "multipart/form-data" }
+          })
+          .then(res => {
+            console.log(res)
+            this.imageUrl = res.filename
+          }).catch((e)=>{
+            this.$message.error("上传失败:" + e.message)
+          })
+          .finally(() => {
+            this.uploading = false;
+          });
+      },
+      handleDeleteFile() {
+        this.imageUrl = ''
+      },
+      async getPayStatus() {
+        let maxTime = 30
+        this.interval = setInterval(()=>{
+          this.getInfo(true)
+          maxTime--
+          if (maxTime < 0) {
+            this.loadingStatus && this.loadingStatus.close()
+            this.$message.error("支付结果查询超时，请刷新页面或重试。")
+            clearInterval(this.interval)
+            return
+          }
+        }, 3000)
+      }
+    },
+
+  }
+</script>
+<style lang="scss" scoped>
+  @import '../../../assets/css/otherpage/companyComplete.scss';
+</style>
+
+<style lang="scss">
+  @import '../../../assets/css/scssCommon.scss';
+  .el-upload {
+    width: 80px;
+    height: 80px;
+    border: 1px dashed #409eff;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+      object-position: top left;
+    }
+    &:hover {
+      border-color: #409eff;
+      .el-icon-delete {
+        display: block;
+      }
+    }
+  }
+  .companyCompleteMobile {
+    .el-upload {
+      width: pxtovw(80);
+      height: pxtovw(80);
+      border: pxtovw(1) dashed #409eff;
+      border-radius: pxtovw(6);
+    }
+  }
+
+</style>