绑定运营人员

src/main/resources/static/css/account/bind.css

@@ -0,0 +1,46 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    footer .footTop{display:none;}
+    .signAccount.bind {width: 968px;margin: 0 auto;}
+    .signAccount.bind .title {height: 42px;font-size: 24px;line-height: 42px;font-weight: normal;color: #22272e;padding: 10px 0;text-align: left;}
+    .signAccount.bind .title.center {text-align: center;padding: 20px 0;font-size:32px;}
+    .signAccount.bind .title-tips{margin-bottom: 32px;width: 968px;height: 60px;box-sizing: border-box;background-image: linear-gradient(270deg,rgba(255,255,255,0.1) 0%,rgba(255,86,11,0.1) 51%,rgba(255,255,255,0.1) 100%);}
+    .signAccount.bind .title-tips p{width: 968px;height: 60px;font-family: Microsoft YaHei;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 60px;letter-spacing: 1px;color: #e15616;text-align: center;}
+    .signAccount.bind .registerClub{width:498px;margin:0 auto;min-height: 900px;}
+    .formLine .business input[type="text"] {width: 350px;display: block;float: left;margin-right: 20px;}
+    .formLine .business a {display: block;float: left; width: 92px;height: 34px;line-height: 34px;font-size: 14px;color: #e15616;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #e15616;text-align: center;}
+    .formLine .form-upload{width: 128px;height: 90px;float: left;margin-right: 20px;}
+    .formLine .formLine-file{width: 128px;height: 90px;position: relative;}
+    .formLine .file{width: 128px;height: 90px;opacity: 0;position: absolute;top: 0;left: 0;z-index: 999;cursor: pointer;}
+    .formLine .formLine-file .icon{width: 128px;height: 90px;display: block;}
+    .formLine .formLine-file .file-biss{background: url("/img/account/icon-bisse.png") no-repeat;}
+    .formLine .formLine-file .file-door{background: url("/img/account/icon-door.png") no-repeat;}
+    .formLine .formLine-file .file-zizhi{background: url("/img/account/icon-zizhi.png") no-repeat;}
+
+
+
+
+
+
+
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    body{background-color: #FFFFFF;}
+    footer{display:none}
+    .signAccount.bind {width:100%;box-sizing: border-box;padding: 0 4vw;}
+    .signAccount.bind .title {height:4vw;font-size: 3.4vw;line-height: 4vw;font-weight: normal;color: #22272e;padding: 1vw 0;text-align: left;font-weight: bold;}
+    .signAccount.bind .title.center {text-align: center;padding: 4vw 0;font-size:4vw;}
+    .signAccount.bind .title-tips{margin-bottom: 4vw;width:100%;height: 12vw;box-sizing: border-box;padding: 2vw 0;background-image: linear-gradient(270deg,rgba(255,255,255,0.1) 0%,rgba(255,86,11,0.1) 51%,rgba(255,255,255,0.1) 100%);}
+    .signAccount.bind .title-tips p{width:100%;height:4vw;font-family: Microsoft YaHei;font-size: 3vw;font-weight: normal;font-stretch: normal;line-height:4vw;color: #e15616;text-align: center;}
+
+}

src/main/resources/static/js/account/bind.js

@@ -0,0 +1,149 @@
+var bindPage = new Vue({
+    el: "#bindPage",
+    data: {
+        loginLoading:false,
+        mobilCount:0,
+        mobileCodeText:'获取验证码',
+        mobilTime:null,
+        isMobileDisabled:false,
+        isCodeModel:false,
+        codeImagePath:'',
+        codeImageToken:'',
+        imageCode:'',
+        user: {
+            mobileOrEmail :'',
+            password : '',
+            mobile : '',
+            linkName :'',
+            verificationCode :'',
+        },
+        rule:{
+            mobileOrEmail: '(^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$)|(^\\d{6,12}$)',
+            name: '^[a-zA-Z\\u4e00-\\u9fa5]{2,}$',
+            phone: '^\\d{6,12}$',
+            code: '^\\d{6}$',
+            password: "^[^\\u4e00-\\u9fa5]{8,16}$"
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        BindConfirmFn: function(){ //手机号找回密码
+            var _self = this;
+            var pass = verifyForm();
+            if (_self.loginLoading) { return false; }
+            if (!pass) {return false;}
+            _self.loginLoading = true;
+            UserApi.BindOrganization(_self.user,function (response) {
+                if(response.code === 0){
+                    var _userIdentity = response.data.userIdentity;
+                    CAIMEI.dialog('绑定成功！',true,true,function () {
+                        _self.userData = {
+                            account: response.data.account,
+                            email: response.data.email,
+                            phone: response.data.bindMobile,
+                            name: response.data.name,
+                            userName: response.data.userName,
+                            userId: response.data.userID,
+                            spId: response.data.serviceProviderID,
+                            clubId: response.data.clubID,
+                            shopId: response.data.shopID,
+                            userIdentity: response.data.userIdentity,
+                            permission: response.data.userPermission,
+                            token: response.data.token
+                        };
+                        _self.setStorages( _self.userData);
+                        _self.loginLoading = false;
+                        // 绑定成功后跳转
+                        if(_userIdentity == 4 || _userIdentity ==2){
+                            window.location.href = '/user/dashboard.html';
+                        }else if(_userIdentity == 3){
+                            window.location.href = '/supplier/dashboard.html';
+                        }
+                    });
+                } else {
+                    CAIMEI.Alert(response.msg,'确定',false);
+                    _self.loginLoading = false;
+                }
+            });
+        },
+
+        getMobileImage:function() {//获取图形验证码
+            var _self = this;
+            var mobile = verifyCheack('.mobileOrEmail');
+            var pass = verifyCheack('.massageBtn');
+            if (_self.isMobileDisabled) { return false; }
+            this.$nextTick(function() {
+                if (!mobile) { return false; }
+                if (!pass) { return false; }
+                PublicApi.getImgVerifyCode({platformType: 0},function(response){
+                    if(response.code == 0){
+                        _self.imageCode = '';
+                        _self.codeImagePath = response.data.baseImage;
+                        _self.codeImageToken = response.data.token;
+                        _self.isCodeModel = true;
+                    }else{
+                        CAIMEI.Alert(response.msg,'确定',false);
+                    }
+                })
+            });
+        },
+        getMobileCodeFn:function(){//机构注册获取注册短信验证码
+            var _self = this;
+            var params = {
+                    mobileOrEmail: _self.user.mobileOrEmail,
+                    mobile:_self.user.mobile,
+                    imgCode:_self.imageCode,
+                    token:_self.codeImageToken,
+                    platformType:0
+             };
+            _self.isMobileDisabled = true;
+            UserApi.getNoteSMScode(params,function (response) {
+                if(response.code == 0){
+                    _self.isCodeModel = false;
+                    CAIMEI.dialog('验证短信已发送',false,function () {});
+                    var TIME_COUNT = 60;
+                    if (!_self.mobilTime) {
+                        _self.mobilCount = TIME_COUNT;
+                        _self.isMobileDisabled = true;
+                        _self.mobilTime = setInterval(function(){
+                            if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                _self.mobilCount--;
+                                _self.mobileCodeText = _self.mobilCount +'s重新发送';
+                            } else {
+                                _self.isMobileDisabled = false;
+                                clearInterval(_self.mobilTime);
+                                _self.mobilTime = null;
+                                _self.mobileCodeText = '获取验证码';
+                            }
+                        },1000)
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                    _self.isMobileDisabled = false;
+                    _self.isCodeModel = false;
+                }
+            })
+        },
+        setStorages:function(data){//存储本地数据
+            localStorage.setItem('userInfo',JSON.stringify(data));
+        },
+        refreshCodeImage:function(){
+            this.getMobileImage()
+        },
+        closeCodeModel:function(){
+            this.isCodeModel = false;
+        },
+        blurHandle: function(event) { // 失去焦点校验
+            var el = event.currentTarget;
+            verifyHandle(el);
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        var _self = this;
+    }
+});

src/main/resources/static/js/common/serviceapi/user.service.js

@@ -34,6 +34,12 @@ var UserApi = {
                     callback(res);
                 });
         },
+        getNoteSMScode : function (params,callback){//绑定机构运营人员获取短信验证码
+            Http.AjaxService({ url:'/user/note', type:'get', data:params, json:true})
+                .then(function(res){
+                    callback(res);
+                });
+        },
         ClubUpgrade : function(params,callback) {//机构注册升级信息
             Http.AjaxService({ url:'/club/upgrade', type:'post', data:params, json:false})
             .then(function(res){

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -63,12 +63,6 @@ var PublicApi = {
                 callback(res);
             });
         },
-        getNoteSMScode : function (params,callback){//绑定机构运营人员获取短信验证码
-            Http.AjaxService({ url:'/user/note', type:'get', data:params, json:true})
-            .then(function(res){
-                callback(res);
-            });
-        },
         getEmailSMScode : function (params,callback) { //获取邮箱短信验证码
             Http.AjaxService({ url:'/user/mailbox', type:'get', data:params, json:true})
             .then(function(res){

src/main/resources/templates/account/bind.html

@@ -5,18 +5,83 @@
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/account/bind.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="account/components/header"></template>
 
 <!-- 绑定运营人员 -->
-<div>
-
+<div id="bindPage">
+    <div class="signAccount bind">
+        <div class="title center">绑定运营人员</div>
+        <div class="title-tips">
+            <p>您的微信尚未绑定任何账号，请输入您的账号密码，并填写自己的基本信息提交后即可微信扫码直接登录</p>
+        </div>
+        <div class="registerClub clear">
+            <form>
+                <div class="title">机构账号</div>
+                <div class="formLine">
+                    <p><em>*</em>账号：</p>
+                    <input class="mobileOrEmail" type="text" v-model.trim="user.mobileOrEmail" placeholder="请输入邮箱/手机号" :rule="rule.mobileOrEmail" maxlength="50" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入邮箱/手机号"></span>
+                </div>
+                <div class="formLine">
+                    <p><em>*</em>登录密码：</p>
+                    <input type="password" v-model.trim="user.password" autocomplete="new-password" placeholder="请输入8-16位数字和字母组合" :rule="rule.password" maxlength="32" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="8-16位数字或字母或字符"></span>
+                </div>
+                <div class="title">运营人员信息</div>
+                <div class="formLine">
+                    <p><em>*</em>姓名：</p>
+                    <input type="text" v-model.trim="user.linkName" placeholder="请输入真实姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                </div>
+                <div class="formLine" >
+                    <p><em>*</em>手机号：</p>
+                    <input  class="massageBtn"  type="text" v-model.trim="user.mobile" placeholder="请输入您的常用手机号" :rule="rule.phone" maxlength="11" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
+                </div>
+                <div class="formLine code">
+                    <p><em>*</em>短信验证码：</p>
+                    <input type="text" v-model.trim="user.verificationCode" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+                    <i class="checked icon mIcon"></i>
+                    <span class="errTips icon mIcon" tips="请输入有效短信验证码"></span>
+                    <a class="getCode" href="javascript:void(0);" @click="getMobileImage" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                </div>
+                <div class="subLine">
+                    <button class="btn" type="button" :class="loginLoading ? 'disabled':''"  @click="BindConfirmFn()">提交</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="content-model"  :class="isCodeModel ? 'active' : ''">
+        <div class="model-main">
+            <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="closeCodeModel"></i></div>
+            <div class="model-content">
+                <div class="model-form">
+                    <input class="input" type="text" placeholder="请输入图形验证码" v-model="imageCode" maxlength="4">
+                    <div class="image"><img :src="codeImagePath" alt=""></div>
+                    <div class="refresh" @click="refreshCodeImage">
+                        <i class="icon mIcon"></i>
+                        <span>刷新</span>
+                    </div>
+                </div>
+                <div class="model-button">
+                    <div class="button"  @click="getMobileCodeFn">获取短信验证码</div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
-
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/account/bind.js(v=${version})}"></script>
 </body>
 </html>