index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="" :shadow="0" :showback="true"></tm-menubars>
  5. <view class="tou C1b1b1b">
  6. <view>忘记密码?</view>
  7. <view class="text-size-s mt-20">请输入您的注册手机号码,我们将发送短信验证码到您的手机</view>
  8. </view>
  9. <view class="zhuti">
  10. <tm-form>
  11. <view class="tel text-size-m mt-50">请输入注册手机号码</view>
  12. <tm-input name="title" v-model="reqData.mobile"></tm-input>
  13. <view class="mima">
  14. <tm-input placeholder="请输入短信验证码" name="title" v-model="reqData.sms_code"></tm-input>
  15. <tm-button class="wangji" @click="sendyzm" size="m">{{yzmvar.text}}</tm-button>
  16. </view>
  17. <view class="px-24">
  18. <tm-button @click="xia()" theme="primary" :round="24" class="mt100" block>下一步</tm-button>
  19. </view>
  20. </tm-form>
  21. </view>
  22. <!-- 弹出层消息 -->
  23. <tm-message ref="toast"></tm-message>
  24. </view>
  25. </template>
  26. <script>
  27. import{myRequest} from '@/api/request.js'
  28. export default {
  29. data() {
  30. return {
  31. kan:1, //1没看2看
  32. kan1:3, //1没看2看
  33. reqData:{
  34. mobile:'',
  35. sms_code:''
  36. },
  37. yzmvar:{
  38. text:'发送验证码'
  39. }
  40. };
  41. },
  42. onLoad() {
  43. },
  44. created() {
  45. this.sys = uni.getSystemInfoSync();
  46. },
  47. methods: {
  48. xia(){
  49. var that=this;
  50. if(that.reqData.mobile==""){
  51. that.$refs.toast.show({model:'warn',label:'请输入手机号'})
  52. return
  53. }else if(that.reqData.sms_code==""){
  54. that.$refs.toast.show({model:'warn',label:'请输入验证码'})
  55. return
  56. }
  57. uni.navigateTo({
  58. url: "/pages/zhtijiao/index?mobile="+that.reqData.mobile+'&sms_code='+that.reqData.sms_code,
  59. })
  60. },
  61. sendyzm(){
  62. var that=this;
  63. if(that.reqData.mobile==""){
  64. that.$refs.toast.show({model:'warn',label:'请输入手机号'})
  65. return
  66. }
  67. that.yzmvar.text="已发送";
  68. setTimeout(function(){
  69. that.yzmvar.text="发送验证码";
  70. },15000)
  71. // myRequest({
  72. // url: "/api/login/sendCode",
  73. // method:'get',
  74. // data:{mobile:that.reqData.mobile}
  75. // }).then(res => {
  76. // console.log(res.data)
  77. // if (res.data.code == 200) {
  78. // that.$refs.toast.show({model:'success',label:res.data.msg})
  79. // that.yzmvar.text="已发送";
  80. // setTimeout(function(){
  81. // that.yzmvar.text="发送验证码";
  82. // },15000)
  83. // }else{
  84. // that.$refs.toast.show({model:'error',label:res.data.msg})
  85. // }
  86. // })
  87. },
  88. },
  89. }
  90. </script>
  91. <style lang="scss">
  92. /deep/ .tm-menubars .body{
  93. background-color: #1b1b1b !important;
  94. }
  95. /deep/ .grey-darken-5{
  96. background-color: #0d0d0d!important;
  97. padding: 0px !important;
  98. }
  99. .tou{
  100. font-size: 28px;
  101. padding: 15px 30px 40px 30px;
  102. }
  103. .zhuti{
  104. padding: 15px 30px 40px 30px;
  105. }
  106. .mima{
  107. position: relative;
  108. }
  109. .wangji{
  110. position: absolute;
  111. right: 0px;
  112. top: 3px;
  113. }
  114. /deep/ .wangji .primary{
  115. background-color: #303440 !important;
  116. }
  117. .tel{
  118. margin-left: 5px;
  119. }
  120. </style>