<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/animate.min.css" rel="stylesheet" />
<style>
.lg {padding: 35px;margin-top: 10px;text-align: center;}
.fq{padding: 0px 30px 20px 30px;}
.input-group{height: auto;}
.input-group i{margin: 11px 0px 10px 5px;font-size: 18px;}
.input-group input{padding: 10px 11px 11px 35px;}
.code{position: absolute;right: 0;top: 0;margin-top: 10px;margin-right: 12px;font-size: 12px;color: #fe580a;font-weight: bold;}
.qy{color: darkgray;text-align: left;font-size: 12px;}
img{max-width: 80px;border-radius: 7px;padding-top: 5px;}
.btn{margin-top: 25px;}
.divider{margin-top: 50px;}
.register{margin-top: 50px;color: darkgray;font-size: 13px;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">注册</h1>
</header>
<div class="mui-content" id="app">
<div class="lg animated bounceIn">
<div class="fq">
<div class="mui-segmented-control">
<a class="mui-control-item mui-active" id="0">个人用户</a>
<a class="mui-control-item" id="1">企业用户</a>
</div>
</div>
<div class="input-group">
<i class="icon"></i>
<input type="tel" placeholder="手机号" v-model="item.account" />
</div>
<div class="input-group">
<i class="icon"></i>
<input type="password" placeholder="密码" v-model="item.password" />
</div>
<div class="input-group">
<i class="icon"></i>
<input type="password" placeholder="重复密码" v-model="item.again" />
</div>
<div class="input-group">
<i class="icon"></i>
<input type="tel" placeholder="验证码" v-model="item.code" />
<span class="code" @click.stop="sendMessage()">{{msg}}</span>
</div>
<div class="input-group" v-if="item.mType==1">
<i class="icon"></i>
<input type="text" placeholder="企业名称" v-model="item.company"/>
</div>
<div class="qy" v-if="item.mType==1">
<div class="qy">上传营业执照（需审核）</div>
<a href="#picture"><img :src="item.fj==''?'../../images/zz.png':item.fj" /></a>
</div>
<button class="btn" @click="register()">立即注册</button>
<div class="xy" @click="xy()">服务协议</div>
<div class="divider">
<div class="line" style="width: 30%;"></div>
<div class="text" style="width: 40%;">已有账号？</div>
<div class="line" style="width: 30%;"></div>
<div class="clear"></div>
</div>
<div class="mui-action-back register" @click="register()">去登录</div>
</div>
<!--选择照片-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell" @click="takePhoto()"><a>拍照</a></li>
<li class="mui-table-view-cell" @click="pickImg()"><a>选取现有</a></li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="color: red;"><a href="#picture"><b>取消</b></a></li>
</ul>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/app.js"></script>
<script src="../../js/vue.min.js"></script>
<script type="text/javascript">
var time = 60; //1分钟倒计时
var vm = new Vue({
el: "#app",
data: {
flag:true,
msg: '发送验证码',
item: {account: '',password: '',again:'',mType: 0,company:'',fj:'',code:''}
},
methods: {
//发送验证码
sendMessage: function() {
if(!isPhone(vm.item.account)) {mui.toast("手机格式不正确");return;}
if(vm.flag == false) {return;}
request(urls().sendMessage, {phone: vm.item.account},function(res) {
if(res.result == true) {
mui.toast("发送成功");
//一分钟倒计时
var countdown = setInterval(function() {
time--;
if(time == 0) {
vm.flag = true;
vm.msg = '发送验证码';
time = 60;
clearInterval(countdown);
} else {
vm.flag = false;
vm.msg = '重新获取(' + time + ')';
}
}, 1000)
} else {
mui.toast(res.msg);
}
plus.nativeUI.closeWaiting();
})
},
//拍照
takePhoto: function() {
takePhoto(function(path) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
vm.compress(entry.toLocalURL());
});
})
},
//选取照片
pickImg: function() {
pickImg(function(p) {
vm.compress(p.files[0]);
}, 1);
},
//图片压缩上传
compress: function(path) {
compress(function(c) {
upload(urls().uploadFj,path,function(res) {
plus.nativeUI.closeWaiting();
var res=JSON.parse(res.responseText);
vm.item.fj=urls().path+res.url;
});
}, path, '75%');
},
//服务协议
xy:function(){
open('agreement', '/pages/other/service.html', {url:urls().agreement,id: 'tpp',title: '党建扶贫APP协议'}, 'slide-in-bottom');
},
//注册
register: function() {
if(this.item.account=='') {mui.toast("输入手机号");return;}
if(this.item.password=='') {mui.toast("输入密码");return;}
request(urls().register,this.item, function(res) {
if(res.result == true) {
mui.toast("注册成功");
mui.back();
} else {
mui.alert(res.msg);
}
plus.nativeUI.closeWaiting();
})
}
}
})
mui('body').on('tap', '.mui-control-item', function(e) {
vm.item.mType = e.target.id;
})
</script>
</body>
</html>