首页新增留咨窗口

.eslintrc

@@ -11,7 +11,8 @@
   "rules": {
     "no-new": "off",
     "no-debugger": "off",
-    "space-before-function-paren": "off"
+    "space-before-function-paren": "off",
+    "prefer-promise-reject-errors": "off"
   },
   "globals": {
     "CKEDITOR": false,

src/action/NewsAction.js

@@ -9,4 +9,8 @@ export default class NewsAction extends BaseACTION {
   news(id) {
     return News.news(id).then(res => res)
   }
+
+  postNes(obj) {
+    return News.postNes(obj).then(res => res)
+  }
 }

src/api/my.js

@@ -30,7 +30,12 @@ export function updatePassword(data) {
 export function sendCode(data) {
   return httpRequest.post('/usercenter/user/send-code', data)
 }
-
+/**
+ * 检验验证码
+ */
+export function checkCode(params) {
+  return httpRequest.get('/usercenter/user/check-code' + params)
+}
 /**
  * 获取报名信息
  */

src/components/layout/components/rightAside.vue

+<template>
+  <div class="right_bar">
+    <ul class="tab_btns">
+      <li
+        :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
+        @mouseover="handleMsOver('enroll')"
+        @mouseout="handleMsOut"
+      >
+        <p>报名咨询</p>
+      </li>
+      <li
+        :class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
+        @mouseover="handleMsOver('wx')"
+        @mouseout="handleMsOut"
+      >
+        <p>微信公众号</p>
+      </li>
+    </ul>
+    <transition
+      name="custom-classes-transition"
+      enter-active-class="animated tada"
+      leave-active-class="animated bounceOutRight"
+    >
+      <div v-show="tabBtnActive" class="tab_cont" @mouseover="handleMsOver('')" @mouseout="handleMsOut">
+        <div class="enroll_cont" v-show="tabBtnTarget === 'enroll'">
+          <h5>报名咨询</h5>
+          <p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
+          <p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
+          <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p>
+          <p class="sendcode">
+            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
+            ><el-button :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">获取验证码</el-button>
+          </p>
+          <p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
+        </div>
+        <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
+          <h5>扫描关注微信公众号</h5>
+          <img src="~@/assets/images/wx_code.jpg" />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import cAction from '@action'
+import { sendCode, checkCode } from '@/api/my'
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+export default {
+  data() {
+    return {
+      tabBtnActive: false,
+      tabBtnTarget: '',
+      projectName: '教育学硕士',
+      sendCode: '',
+      isBtnDisabled: false,
+      formInfo: {
+        name: '',
+        phone: '',
+        projectId: 1005
+      }
+    }
+  },
+  methods: {
+    handleMsOver(type) {
+      this.tabBtnActive = true
+      if (type !== '') {
+        this.tabBtnTarget = type
+      }
+    },
+    handleMsOut(type) {
+      this.tabBtnActive = false
+    },
+    submitEnroll() {
+      let flag = true
+      Object.keys(this.formInfo).map(item => {
+        if (this.formInfo[item] === '') {
+          flag = false
+        }
+      })
+      if (!flag || !this.sendCode) {
+        this.$message('请完善信息')
+      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
+        this.message('手机号格式错误')
+      } else {
+        this.checkSendcode()
+          .then(res => {
+            return this.enrollQuery()
+          })
+          .then(res => {
+            this.$message({
+              type: 'success',
+              message: '报名成功',
+              duration: 5000
+            })
+          })
+          .catch(err => {
+            if (err && err.type === 'checkcode') this.$message.error(err.msg)
+            else this.$message.error(err.msg || '报名提交失败')
+          })
+      }
+    },
+    enrollQuery() {
+      const params = {
+        channel: 19960,
+        project_id: this.formInfo.projectId,
+        name: this.formInfo.name,
+        phone: this.formInfo.phone
+      }
+      return new Promise((resolve, reject) => {
+        cAction.News.postNes(params)
+          .then(res => {
+            if (res && res.status === 200 && res.error === 0) {
+              resolve({
+                type: 'enroll',
+                state: 'success'
+              })
+            } else {
+              reject({
+                type: 'enroll',
+                state: 'fail',
+                msg: res.message || '报名提交失败'
+              })
+            }
+          })
+      })
+    },
+    getSendCode() {
+      if (!this.formInfo.phone) {
+        this.$message('手机号不能为空')
+      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
+        this.$message('手机号格式错误')
+      } else {
+        const param = {
+          account: this.formInfo.phone,
+          service: 'ezijing.com'
+        }
+        sendCode(param)
+          .then(res => {
+            this.btnDisabledTimer()
+            if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收')
+            else this.$message.error('获取验证码失败，请稍后再试')
+          })
+          .catch(() => {})
+      }
+    },
+    checkSendcode() {
+      const checkCodeParam = '?account=' + this.formInfo.phone + '&code=' + this.sendCode + '&countryCode=86'
+      return new Promise((resolve, reject) => {
+        checkCode(checkCodeParam).then(res => {
+          console.log(res)
+          if (res && res.code === 0) {
+            res.type = 'checkcode'
+            resolve({
+              type: 'checked',
+              state: 'success'
+            })
+          } else {
+            reject({
+              type: 'checked',
+              state: 'fail',
+              msg: res.msg || '验证码检测失败'
+            })
+          }
+        })
+      })
+    },
+    btnDisabledTimer() {
+      this.isBtnDisabled = true
+      let count = 60
+      $('#checkedCode').html(count + '秒后重发')
+      const timer = setInterval(() => {
+        count--
+        if (count < 1) {
+          clearInterval(timer)
+          this.isBtnDisabled = false
+          $('#checkedCode').html('获取验证码')
+        } else {
+          $('#checkedCode').html(count + '秒后重发')
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.right_bar {
+  position: fixed;
+  top: 50%;
+  right: 10px;
+  z-index: 9999;
+  transform:translateY(-50%);
+  .tab_btns {
+    width: 72px;
+    height: 136px;
+    font-size: 12px;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    li {
+      padding: 40px 0 10px;
+      color: #999;
+      background-position: center 10px;
+      background-repeat: no-repeat;
+      background-color: #fff;
+      text-align: center;
+    }
+    li.active {
+      background-color: #af1b40;
+      color: #fff;
+      opacity: 0.9;
+      transition: 0.3s;
+    }
+    li.enroll {
+      position: relative;
+      padding-top: 48px;
+      background-image: url(~@/assets/images/icon_enroll.png);
+      position: relative;
+    }
+    li.enroll:after {
+      content: '';
+      width: 144px;
+      height: 1px;
+      background: #b8bcbf;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%) scale(0.5);
+    }
+    li.enroll.active {
+      background-image: url(~@/assets/images/icon_enroll_active.png);
+    }
+    li.wx {
+      background-image: url(~@/assets/images/icon_wx.png);
+    }
+    li.wx.active {
+      background-image: url(~@/assets/images/icon_wx_active.png);
+    }
+    li > p {
+      font-size: 12px;
+      line-height: 14px;
+      text-align: center;
+      font-family: PingFangSC-Regular, PingFang SC;
+      transform: scale(0.9);
+      cursor: default;
+    }
+  }
+  .tab_cont {
+    position: absolute;
+    left: -310px;
+    top: -120px;
+    width: 310px;
+    height: 374px;
+    background: url('~@/assets/images/index_right_fixed_bg.png');
+    // display:none;
+    h5 {
+      font-size: 20px;
+      line-height: 60px;
+      font-weight: normal;
+      color: rgba(255, 255, 255, 0.9);
+      text-align: center;
+    }
+    .enroll_cont {
+      padding: 0 20px;
+      p {
+        margin-bottom: 15px;
+        // /deep/ .el-input__inner{}
+      }
+      .sendcode {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    .wx_cont img {
+      width: 156px;
+      height: 156px;
+      display: block;
+      margin: 65px auto 0;
+    }
+  }
+}
+</style>
+<style>
+.right_bar .enroll_cont .el-input__inner {
+  border: 1px solid #ccc;
+  line-height: 44px;
+  height: 44px;
+}
+.right_bar .sendcode .el-input {
+  width: 170px;
+}
+.right_bar .el-button{
+  background: #ff8e1a;
+  border:#ff8e1a 1px solid;
+  color:rgba(255,255,255,.9);
+}
+.sendcode .el-button {
+  width: 94px;
+  margin-right: 2px;
+  padding: 12px 0;
+  text-align: center;
+}
+</style>

src/components/layout/index.vue

@@ -7,6 +7,7 @@
       </div>
       <div class="main">
         <router-view></router-view>
+        <RightAside></RightAside>
       </div>
     </div>
   </div>
@@ -15,9 +16,10 @@
 <script>
 import Tab from './components/tab.vue'
 import Slider from './components/slider.vue'
+import RightAside from './components/rightAside'
 export default {
   props: { fixed: { type: Boolean, default: false } },
-  components: { Tab, Slider },
+  components: { Tab, Slider, RightAside },
   computed: {
     classes() {
       return {