邀请加入组织：表单提交操作

最新推荐文章于 2022-08-15 14:11:51 发布

HainesFreeman

最新推荐文章于 2022-08-15 14:11:51 发布

阅读量179

点赞数

分类专栏： vue 业务

本文链接：https://blog.csdn.net/weixin_41829196/article/details/97785364

版权

vue 同时被 2 个专栏收录

119 篇文章 2 订阅

订阅专栏

业务

67 篇文章 0 订阅

订阅专栏

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;
    }
  }
}

HainesFreeman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
邀请加入组织：表单提交操作

html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>邀请加入</title> <meta name="description" content="一书一课"> <meta name="app...
复制链接

扫一扫

专栏目录