index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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. uni.request({
  68. url: "https://apitest.yitutianxia.com/common/SendSms?mobile="+that.reqData.mobile,
  69. method: "get",
  70. data:{},
  71. dataType:'json',
  72. success : function(res) {
  73. console.log(res)
  74. if (res.data.code == 200) {
  75. that.$refs.toast.show({model:'success',label:res.data.msg})
  76. that.yzmvar.text="已发送";
  77. setTimeout(function(){
  78. that.yzmvar.text="发送验证码";
  79. },15000)
  80. }else{
  81. that.$refs.toast.show({model:'error',label:res.data.msg})
  82. }
  83. },
  84. error : function(e) {
  85. alert("网络异常,请重试");
  86. }
  87. });
  88. },
  89. },
  90. }
  91. </script>
  92. <style lang="scss">
  93. /deep/ .tm-menubars .body{
  94. background-color: #1b1b1b !important;
  95. }
  96. /deep/ .grey-darken-5{
  97. background-color: #0d0d0d!important;
  98. padding: 0px !important;
  99. }
  100. .tou{
  101. font-size: 28px;
  102. padding: 15px 30px 40px 30px;
  103. }
  104. .zhuti{
  105. padding: 15px 30px 40px 30px;
  106. }
  107. .mima{
  108. position: relative;
  109. }
  110. .wangji{
  111. position: absolute;
  112. right: 0px;
  113. top: 3px;
  114. }
  115. /deep/ .wangji .primary{
  116. background-color: #303440 !important;
  117. }
  118. .tel{
  119. margin-left: 5px;
  120. }
  121. </style>