index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
  5. <view class="tou C1b1b1b">登录</view>
  6. <view class="zhuti">
  7. <tm-form>
  8. <view class="tel text-size-m mt-50">手机号码</view>
  9. <tm-input name="title" input-type="number" v-model="reqData.mobile"></tm-input>
  10. <view class="mima">
  11. <tm-input name="title" password v-model="reqData.password" placeholder="登录密码"></tm-input>
  12. <view class="wangji text-size-s" @click="zhaohui()">忘记密码?</view>
  13. </view>
  14. <view class="py-10 text-size-s mt-30">
  15. <tm-checkbox :size="32" color="bg-gradient-primary-accent" v-model="checked" round="rounded"></tm-checkbox>
  16. <text class="text-white" @click="xieyi()" style="vertical-align: middle;">阅读并同意《用户协议》</text>
  17. </view>
  18. <view class="px-24">
  19. <tm-button @click="tijiao()" theme="primary" :round="24" block class="mt-50 logincla">登录</tm-button>
  20. <tm-button @click="zhuce()" theme="primary" :round="24" block class="mt-30">注册新用户</tm-button>
  21. </view>
  22. </tm-form>
  23. </view>
  24. <!-- 弹出层消息 -->
  25. <tm-message ref="toast"></tm-message>
  26. </view>
  27. </template>
  28. <script>
  29. import{myRequest} from '@/api/request.js'
  30. export default {
  31. data() {
  32. return {
  33. checked:false,
  34. reqData:{
  35. mobile:'',
  36. password:'',
  37. }
  38. };
  39. },
  40. onLoad() {
  41. },
  42. created() {
  43. this.sys = uni.getSystemInfoSync();
  44. },
  45. methods: {
  46. xieyi(){
  47. uni.navigateTo({
  48. url: "/pages/xieyi/index",
  49. })
  50. },
  51. tijiao(){
  52. var that=this;
  53. if(that.reqData.mobile==""){
  54. that.$refs.toast.show({model:'warn',label:'请输入手机号'})
  55. return
  56. }else if(that.reqData.password==""){
  57. that.$refs.toast.show({model:'warn',label:'请输入密码'})
  58. return
  59. }else if(! that.checked){
  60. that.$refs.toast.show({model:'warn',label:'请勾选用户协议'})
  61. return
  62. }
  63. myRequest({
  64. url: "/api/login/login",
  65. method:'post',
  66. data:that.reqData
  67. }).then(res => {
  68. console.log(res.data)
  69. if (res.data.code == 200) {
  70. uni.setStorageSync("token",res.data.data.token)
  71. uni.setStorageSync("family_id",res.data.data.family_id)
  72. that.$refs.toast.show({model:'success',label:res.data.msg})
  73. setTimeout(function(){
  74. uni.navigateTo({
  75. url: "/pages/index/index",
  76. })
  77. },2000)
  78. }else{
  79. that.$refs.toast.show({model:'error',label:res.data.msg})
  80. }
  81. })
  82. },
  83. zhuce(){
  84. uni.navigateTo({
  85. url: "/pages/registered/index",
  86. })
  87. },
  88. zhaohui(){
  89. uni.navigateTo({
  90. url: "/pages/zhaohui/index",
  91. })
  92. },
  93. }
  94. }
  95. </script>
  96. <style lang="scss">
  97. /deep/ .tm-menubars .body{
  98. background-color: #1b1b1b !important;
  99. }
  100. /deep/ .grey-darken-5{
  101. background-color: #0d0d0d!important;
  102. padding: 0px !important;
  103. }
  104. .tou{
  105. font-size: 28px;
  106. padding: 15px 30px 40px 30px;
  107. }
  108. .zhuti{
  109. padding: 15px 30px 40px 30px;
  110. }
  111. .tel{
  112. margin-left: 5px;
  113. }
  114. .mima{
  115. position: relative;
  116. }
  117. .wangji{
  118. position: absolute;
  119. right: 0px;
  120. top: 0px;
  121. line-height: 50px;
  122. text-decoration:underline;
  123. }
  124. /deep/ .logincla .primary{
  125. background-color: #303440 !important;
  126. }
  127. </style>