index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view >
  3. <tm-message ref="toast"></tm-message>
  4. <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
  5. <view>
  6. <tm-form>
  7. <tm-input name="title" title="手机号" v-model="reqData.mobile"></tm-input>
  8. <view class="flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
  9. <tm-input name="title" title="验证码" v-model="reqData.sms_code"></tm-input>
  10. <view>
  11. <tm-button @click="sendyzm" :theme="yzmvar.colorvar" size="m">{{yzmvar.text}}</tm-button>
  12. </view>
  13. </view>
  14. <tm-input name="title" password title="密码" v-model="reqData.password"></tm-input>
  15. <tm-input name="title" password title="确认密码" v-model="reqData.password1"></tm-input>
  16. <view class="px-24">
  17. <view class="py-10 text-size-s text-grey text-align-left">
  18. <tm-checkbox :size="32" color="bg-gradient-primary-accent" v-model="checked" round="rounded"></tm-checkbox>同意<text class="text-primary" @click="xieyi()">《用户服务协议》</text></view>
  19. <tm-button @click="tijiao()" theme="bg-gradient-blue-accent" block>注册</tm-button>
  20. <view class="py-10 text-size-s text-grey text-align-center ma-10">
  21. <text class="text-primary text-size-s text-align-center" @click="login()">已有账号,立即登录</text>
  22. </view>
  23. </view>
  24. </tm-form>
  25. </view>
  26. </tm-sheet>
  27. </view>
  28. </template>
  29. <script>
  30. import{myRequest} from '@/api/request.js'
  31. export default {
  32. data() {
  33. return {
  34. checked:false,
  35. reqData:{
  36. mobile:'',
  37. sms_code:'',
  38. password:'',
  39. password1:''
  40. },
  41. yzmvar:{
  42. colorvar:'primary',
  43. text:'发送验证码'
  44. }
  45. };
  46. },
  47. onLoad() {
  48. },
  49. created() {
  50. },
  51. methods: {
  52. tijiao(){
  53. var that=this;
  54. if(that.reqData.mobile==""){
  55. that.$refs.toast.show({model:'warn',label:'请输入手机号'})
  56. return
  57. }else if(that.reqData.sms_code==""){
  58. that.$refs.toast.show({model:'warn',label:'请输入验证码'})
  59. return
  60. }else if(that.reqData.password==""){
  61. that.$refs.toast.show({model:'warn',label:'请输入密码'})
  62. return
  63. }else if(that.reqData.password1==""){
  64. that.$refs.toast.show({model:'warn',label:'请输入确认密码'})
  65. return
  66. }else if(that.reqData.password != that.reqData.password1){
  67. that.$refs.toast.show({model:'warn',label:'密码不一致'})
  68. return
  69. }else if(! that.checked){
  70. that.$refs.toast.show({model:'warn',label:'请勾选用户协议'})
  71. return
  72. }
  73. myRequest({
  74. url: "/api/login/register",
  75. method:'post',
  76. data:that.reqData
  77. }).then(res => {
  78. console.log(res)
  79. if (res.data.code == 200) {
  80. that.$refs.toast.show({model:'success',label:res.data.msg})
  81. setTimeout(function(){
  82. uni.navigateTo({
  83. url: "/pages/login/index",
  84. })
  85. },2000)
  86. }else{
  87. that.$refs.toast.show({model:'error',label:res.data.msg})
  88. }
  89. })
  90. },
  91. sendyzm(){
  92. var that=this;
  93. if(that.reqData.mobile==""){
  94. that.$refs.toast.show({model:'warn',label:'请输入手机号'})
  95. return
  96. }
  97. that.yzmvar.colorvar="gray";
  98. that.yzmvar.text="已发送";
  99. setTimeout(function(){
  100. that.yzmvar.colorvar="primary";
  101. that.yzmvar.text="发送验证码";
  102. },5000)
  103. },
  104. login(){
  105. uni.navigateTo({
  106. url: "/pages/login/index",
  107. })
  108. },
  109. xieyi(){
  110. uni.navigateTo({
  111. url: "/pages/xieyi/index",
  112. })
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. </style>