html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邀请加入</title>
<meta name="description" content="一书一课">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Your title">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- build:css /css/organization.css -->
<link rel="stylesheet" href="/css/organization.css">
<!-- endbuild -->
<script src="/flexible/flexible-css.js"></script>
<script src="/flexible/flexible.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<div id="app" v-cloak>
<div class="org-top">
<template v-if="departmentFlag">
<div class="depart-name">
<div>现邀请您加入</div>
<div>{{clientTitle}}</div>
</div>
<div class="org-department">{{departmentTitle}}</div>
</template>
<template v-else>
<div class="invite">现邀请您加入</div>
<div class="company-name">{{clientTitle}}</div>
</template>
</div>
<div class="org-bottom">
<div class="iphone">
<input type="text" v-model="customerMobile" @input.stop="checkNum('customerMobile')" placeholder="请输入手机号"
pattern="[0-9]*" maxlength="11">
</div>
<div class="code">
<input type="text" v-model="verifyCode" @input.stop="checkNum('verifyCode')" placeholder="请输入验证码" pattern="[0-9]*"
maxlength="6">
<div class="code-btn" @touchend.stop.prevent="getVerifycode" :class="{'code-color': codeFlag}">{{codeText}}</div>
</div>
<div class="name">
<input type="text" v-model="customerName" placeholder="姓名" @input.stop="getStringLength(customerName)"
maxlength="20">
<div class="warning" v-show="warnFlag">{{warnMsg}}</div>
</div>
<div class="org-btn" @touchend.stop="applyJoin">申请加入</div>
</div>
</div>
<script src="/js/libs/lab.min.js"></script>
<script type="text/javascript">
$LAB
.script("/js/libs/vue.min.js")
.script("/js/libs/vue-resource.js")
.script("/js/wx_author.js?v=" + (new Date()).getTime()).wait()
.script("/js/organization.js?v=" + (new Date()).getTime());
</script>
</body>
</html>
js:
var app = new Vue({
el: '#app',
mounted: function () {
this.mainUrl = window.mainUrl;
//获取地址栏参数 http://h5-ts.chiyue365.develop/f3-73,3代表clientId,73代表departmentId
var locationHref = window.location.pathname;
var result = locationHref.substr(locationHref.indexOf('f'));
result = result.split('-');
this.clientId = result[0].split('')[1];
this.departmentId = result[1];
//查询信息
this.getInfo();
Vue.http.options.emulateJSON = true;
Vue.http.options.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};
document.addEventListener('touchstart', this.touchstart);
document.addEventListener('touchend', this.touchend);
},
data: {
mainUrl: '',
departmentFlag: false,
warnFlag: false,
warnMsg: '',
codeText: '获取验证码',
codeFlag: false,
customerMobile: '',
verifyCode: '',
customerName: '',
clientTitle: '',
departmentTitle: '',
clientId: 0,
departmentId: 0,
lastTouchEnd: 0,
countDown: 60,
},
methods: {
//查询企业名称及部门名称
getInfo: function () {
this.$http.get(this.mainUrl + 'customer/application/info', {
params: {
clientId: this.clientId,
departmentId: this.departmentId
}
}).then(function (response) {
var data = response.data.data;
this.clientTitle = data.clientTitle;
if (data.departmentId === 0) {
//返回departmentId===0,说明没有部门
this.departmentFlag = false;
} else {
this.departmentFlag = true;
this.departmentTitle = data.departmentTitle;
}
}, function (error) {
this.warnTips(error.data.msg);
});
},
//申请加入
applyJoin: function () {
if (!this.customerMobile || this.customerMobile.length !== 11 || this.verifyCode.length !== 6) {
this.warnTips('手机号码或验证码错误');
return;
}
if (!this.customerName.length) {
this.warnTips('请输入姓名');
return;
}
if (this.getStringLength(this.customerName)) {
this.$http.post(this.mainUrl + 'customer/application', {
clientId: this.clientId,
departmentId: this.departmentId,
clientTitle: this.clientTitle,
departmentTitle: this.departmentTitle,
customerMobile: this.customerMobile,
verifyCode: this.verifyCode,
customerName: this.customerName,
}).then(function (response) {
if (response.data.code === "200") {
window.location.href = '/organization-success.html';
}
}, function (error) {
this.warnTips(error.data.msg);
});
}
},
//获取验证码
getVerifycode: function () {
var self = this;
if (!this.customerMobile || this.customerMobile.length !== 11) {
this.warnTips('请输入您的手机号码');
return;
}
if (!this.codeFlag) {
this.$http.post(this.mainUrl + 'verifycode', {
customerMobile: this.customerMobile,
}).then(function (response) {
self.setTime();
}, function (error) {
this.warnTips(error.data.msg);
});
}
},
//警告提示
warnTips: function (msg) {
var self = this;
this.warnFlag = true;
this.warnMsg = msg;
setTimeout(function () {
self.warnFlag = false;
}, 1800)
},
//倒计时60s
setTime: function () {
var self = this;
if (this.countDown === 0) {
this.codeText = '获取验证码';
this.codeFlag = false;
this.countDown = 60;
return;
} else {
this.codeFlag = true;
this.codeText = this.countDown + 's';
this.countDown--;
}
setTimeout(function () {
self.setTime();
}, 1000);
},
//校验用户手机号
checkNum: function (param) {
var partten = /[^0-9]/g;
this[param] = this[param].replace(/\s+/g, '');
if (partten.test(this[param])) {
this[param] = this[param].replace(partten, '');
return false;
}
},
//判断中英文字符长度
getStringLength: function (str) {
var len = 0;
for (var i = 0; i < str.length; i++) {
var c = str.charCodeAt(i);
(c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f) ? len++ : len += 2;
}
console.log(len);
if (len > 20) {
this.warnTips('姓名最多可输入20个字符')
return false;
} else {
return true;
}
},
touchstart: function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
},
touchend: function () {
var now = (new Date()).getTime();
if (now - this.lastTouchEnd <= 300) {
event.preventDefault();
}
this.lastTouchEnd = now;
},
}
});
css:
[v-cloak] {
display: none;
}
* {
box-sizing: border-box;
}
#app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 10rem;
height: 100%;
margin: 0 auto;
.org-top {
height: px2rem(1052);
background: #FFD246;
padding: px2rem(120) 0 0 px2rem(70);
.depart-name {
height: px2rem(124);
font-size: px2rem(42);
div {
line-height: px2rem(62);
}
}
.invite {
margin-top: px2rem(10);
font-size: px2rem(42);
}
.company-name {
height: px2rem(180);
line-height: px2rem(90);
width: px2rem(606);
font-size: px2rem(60);
}
.org-department {
padding-top: px2rem(42);
height: px2rem(80);
font-size: px2rem(80);
line-height: px2rem(80);
}
}
.org-bottom {
padding: 0 px2rem(132) 0;
.iphone input, .code input, .name input {
line-height: px2rem(42);
font-size: px2rem(42);
border: none;
}
.iphone {
height: px2rem(200);
border-bottom: px2rem(3) solid rgba(221, 221, 221, 1);
input {
margin-top: px2rem(110);
}
}
.code, .name {
height: px2rem(168);
border-bottom: px2rem(3) solid rgba(221, 221, 221, 1);
input {
margin-top: px2rem(78);
}
}
.code {
position: relative;
.code-btn {
position: absolute;
top: px2rem(48);
right: px2rem(15);
width: px2rem(288);
height: px2rem(96);
color: #FFA42D;
line-height: px2rem(96);
text-align: center;
border-radius: px2rem(24);
border: px2rem(3) solid #FFA42D;
}
.code-color {
color: #999999;
}
}
.name {
position: relative;
input {
width: px2rem(970);
}
.warning {
position: absolute;
top: px2rem(24);
left: 0;
width: 100%;
line-height: px2rem(30);
font-size: px2rem(30);
color: #FF5C30;
text-align: center;
}
}
.org-btn {
width: px2rem(978);
height: px2rem(114);
margin-top: px2rem(120);
line-height: px2rem(114);
font-size: px2rem(53);
text-align: center;
border-radius: px2rem(26);
color: #FFFFFF;
background-color: rgba(225, 164, 45, 1);
background-color: #FFA42D;
box-shadow: 0 px2rem(10) px2rem(20) 0 rgba(225, 164, 45, .5);
}
}
}
//成功后页面
.success {
text-align: center;
margin-top: px2rem(878);
font-size: px2rem(42);
color: #666666;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: px2rem(152);
display: flex;
justify-content: space-between;
box-shadow: 0 -.02rem 0.32rem 0.04rem #e1e1e1;
padding: px2rem(30) px2rem(48);
background: #ffffff;
.logo {
img {
width: px2rem(200);
vertical-align: middle;
margin-right: px2rem(50);
display: inline-block;
}
}
.open {
width: px2rem(252);
height: px2rem(92);
background: #ff9801;
text-align: center;
border-radius: px2rem(8);
a {
width: 100%;
line-height: px2rem(92);
font-size: px2rem(42);
color: #fff;
text-decoration: none;
}
}
}