Skip to content

P
project-online-old
提交 7868bc0e authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

网站右侧增加留咨窗口

上级 f1f00fed
隐藏空白字符变更
内嵌 并排
正在显示 包含 326 行增加 和 2 行删除
.config.dev.js
浏览文件 @ 7868bc0e
module.exports = { module.exports = {
domain: 'dev.ezijing.com', domain: 'dev.ezijing.com',
url: 'https://project-api.ezijing.com', url: 'https://project-api.ezijing.com/api',
isEnableToIphoneDebugger: false, isEnableToIphoneDebugger: false,
apiBaseURL: '/api', apiBaseURL: '/api',
webpack: { webpack: {
......
src/api/my.js
浏览文件 @ 7868bc0e
...@@ -30,6 +30,20 @@ export function updatePassword(data) { ...@@ -30,6 +30,20 @@ export function updatePassword(data) {
export function sendCode(data) { export function sendCode(data) {
return httpRequest.post('/usercenter/user/send-code', data) return httpRequest.post('/usercenter/user/send-code', data)
} }
/**
* 检验验证码
*/
export function checkCode(params) {
return httpRequest.get('/usercenter/user/check-code' + params)
}
/**
* 提交留咨信息
*/
export function postNes(obj) {
return httpRequest.post('/new-app/v1.0/applications', obj, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
/** /**
* 获取报名信息 * 获取报名信息
......
src/components/layout/index.vue
浏览文件 @ 7868bc0e
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<app-header /> <app-header />
<app-main /> <app-main />
<app-footer v-if="hasFooter" /> <app-footer v-if="hasFooter" />
<right-aside />
</div> </div>
</template> </template>
...@@ -10,10 +11,11 @@ ...@@ -10,10 +11,11 @@
import AppHeader from './header' import AppHeader from './header'
import AppMain from './main' import AppMain from './main'
import AppFooter from './footer' import AppFooter from './footer'
import RightAside from './rightAside'
export default { export default {
props: { props: {
hasFooter: { type: Boolean, default: true } hasFooter: { type: Boolean, default: true }
}, },
components: { AppHeader, AppMain, AppFooter } components: { AppHeader, AppMain, AppFooter, RightAside }
} }
</script> </script>
src/components/layout/rightAside.vue 0 → 100644
浏览文件 @ 7868bc0e
<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 class="btn" :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="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/wx_code.jpg" />
</div>
</div>
</transition>
</div>
</template>
<script>
import cAction from '@action'
import { sendCode, checkCode, postNes } 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: 1010
}
}
},
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) => {
postNes(params)
.then(res => {
console.log(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 => {
console.log(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
document.querySelector('#checkedCode').innerHTML = count + '秒后重发'
const timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = '获取验证码'
} else {
document.querySelector('#checkedCode').innerHTML = 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(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/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(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_enroll_active.png);
}
li.wx {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_wx.png);
}
li.wx.active {
background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/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('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/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;
::v-deep.el-input__inner {
border: 1px solid #ccc;
line-height: 44px;
height: 44px;
}
::v-deep.el-button {
background-color: #ff8e1a;
border:#ff8e1a 1px solid;
color:rgba(255,255,255,.9);
}
}
.sendcode {
display: flex;
justify-content: space-between;
::v-deep.el-input {
width: 170px;
}
::v-deep.el-button {
width: 94px;
margin-right: 2px;
padding: 12px 0;
text-align: center;
}
::v-deep.is-disabled{
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
}
}
.wx_cont img {
width: 156px;
height: 156px;
display: block;
margin: 65px auto 0;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论