bindNumber.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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,3)}}</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;">
  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 class="btn" @click="submit">确认绑定</view>
  14. </view>
  15. </template>
  16. <script>
  17. import { setTimeout } from "timers";
  18. const app = getApp();
  19. const req = require("../../utils/request.js");
  20. export default {
  21. components: {},
  22. props: {},
  23. data() {
  24. return {
  25. userInfo:{},
  26. systems: {},
  27. isTop:0,
  28. saleNo:'',
  29. code: '', //code
  30. sendMsg: '获取验证码',
  31. isGetCodeDisabled: false,
  32. }
  33. },
  34. onLoad(options) {
  35. this.userInfo = req.getStorage('userInfo')
  36. },
  37. onShow() {
  38. },
  39. methods: {
  40. submit(){
  41. if(!this.saleNo) req.msg("请输入工号")
  42. req.postRequest('/api/user/bindSaleNo',{saleNo:this.saleNo,yzlCode:this.code},res=>{
  43. req.msg("绑定成功")
  44. req.getRequest('/api/user/info', {}, suc => {
  45. req.setStorage('userInfo', data);
  46. });
  47. setTimeout(()=>{
  48. uni.navigateBack()
  49. },1000)
  50. })
  51. },
  52. getCode() {
  53. if (this.isGetCodeDisabled == true) return false;
  54. if (!this.saleNo) {
  55. req.msg('请输入工号');
  56. return;
  57. }
  58. req.postRequest(
  59. '/api/user/getYzlCode', {
  60. saleNo: this.saleNo,
  61. },
  62. data => {
  63. req.msg('验证码获取成功');
  64. let time = 60;
  65. let interval = setInterval(() => {
  66. time--;
  67. if (time == 0) {
  68. this.isGetCodeDisabled = false;
  69. this.sendMsg = '获取验证码';
  70. clearInterval(interval);
  71. } else {
  72. this.isGetCodeDisabled = true;
  73. this.sendMsg = time + '秒后再获取';
  74. }
  75. }, 1000);
  76. },
  77. true
  78. );
  79. },
  80. },
  81. mounted() {
  82. const systemInfo = uni.getSystemInfoSync();
  83. // px转换到rpx的比例
  84. let pxToRpxScale = 750 / systemInfo.windowWidth;
  85. let systems = {
  86. ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
  87. navigationHeight: 44 * pxToRpxScale // 导航栏的高度
  88. };
  89. systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
  90. this.systems = systems;
  91. },
  92. onPageScroll: function(e) {
  93. if (e.scrollTop > this.systems.barHeight) {
  94. this.isTop = 1;
  95. } else {
  96. this.isTop = 0;
  97. }
  98. }
  99. }
  100. </script>
  101. <style>
  102. @import "./bindNumber.css";
  103. </style>