bindNumber.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view style="padding-top: 300rpx;">
  3. <view v-if="userInfo&&userInfo.mobile" class="phone">{{userInfo.mobile.substring(0,3)}}****{{userInfo.mobile.substring(userInfo.mobile.length-4,userInfo.mobile.length)}}</view>
  4. <view v-else class="phone">绑定工号</view>
  5. <view class="input-box" style="margin-bottom: 30rpx;">
  6. <input v-model="saleNo" placeholder-class="input-placeholder" placeholder="请输入工号"/>
  7. </view>
  8. <view class="input-box dflex" style="margin-top: 40rpx;margin-bottom: 40rpx;">
  9. <input v-model="code" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
  10. class="flex" />
  11. <view class="yzm" @click="getCode()" v-text="sendMsg"></view>
  12. </view>
  13. <view style="padding: 0 60rpx;font-size: 26rpx;color: #999;margin-bottom: 40rpx;">
  14. * 该验证码将发送到云助理-小智·湖南
  15. </view>
  16. <view class="btn" @click="submit">确认绑定</view>
  17. </view>
  18. </template>
  19. <script>
  20. import { setTimeout } from "timers";
  21. const app = getApp();
  22. const req = require("../../utils/request.js");
  23. export default {
  24. components: {},
  25. props: {},
  26. data() {
  27. return {
  28. userInfo:{},
  29. systems: {},
  30. isTop:0,
  31. saleNo:'',
  32. code: '', //code
  33. sendMsg: '获取验证码',
  34. isGetCodeDisabled: false,
  35. }
  36. },
  37. onLoad(options) {
  38. this.userInfo = req.getStorage('userInfo')
  39. },
  40. onShow() {
  41. },
  42. methods: {
  43. submit(){
  44. if(!this.saleNo) return req.msg("请输入工号")
  45. if(!this.code) return req.msg("请输入验证码")
  46. req.postRequest('/api/user/bindSaleNo',{saleNo:this.saleNo,yzlCode:this.code},res=>{
  47. req.msg("绑定成功")
  48. req.getRequest('/api/user/info', {}, suc => {
  49. req.setStorage('userInfo', suc);
  50. });
  51. setTimeout(()=>{
  52. uni.navigateBack()
  53. },1000)
  54. })
  55. },
  56. getCode() {
  57. if (this.isGetCodeDisabled == true) return false;
  58. if (!this.saleNo) {
  59. req.msg('请输入工号');
  60. return;
  61. }
  62. req.postRequest(
  63. '/api/user/getYzlCode', {
  64. saleNo: this.saleNo,
  65. },
  66. data => {
  67. req.msg('验证码获取成功');
  68. let time = 60;
  69. let interval = setInterval(() => {
  70. time--;
  71. if (time == 0) {
  72. this.isGetCodeDisabled = false;
  73. this.sendMsg = '获取验证码';
  74. clearInterval(interval);
  75. } else {
  76. this.isGetCodeDisabled = true;
  77. this.sendMsg = time + '秒后再获取';
  78. }
  79. }, 1000);
  80. },
  81. true
  82. );
  83. },
  84. },
  85. mounted() {
  86. const systemInfo = uni.getSystemInfoSync();
  87. // px转换到rpx的比例
  88. let pxToRpxScale = 750 / systemInfo.windowWidth;
  89. let systems = {
  90. ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
  91. navigationHeight: 44 * pxToRpxScale // 导航栏的高度
  92. };
  93. systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
  94. this.systems = systems;
  95. },
  96. onPageScroll: function(e) {
  97. if (e.scrollTop > this.systems.barHeight) {
  98. this.isTop = 1;
  99. } else {
  100. this.isTop = 0;
  101. }
  102. }
  103. }
  104. </script>
  105. <style>
  106. @import "./bindNumber.css";
  107. </style>