You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

155 lines
5.4 KiB

  1. <template>
  2. <div class="bjimg">
  3. <x-header :left-options="{showBack: false}">{{token}}登录</x-header>
  4. <box gap="20px 30px">
  5. <flexbox orient="vertical" style="">
  6. <flexbox-item>
  7. <h2 style="color: white;text-align:center;margin: 30px 0 15px 0">东软智能云POS管理系统</h2>
  8. </flexbox-item>
  9. <flexbox-item>
  10. <x-input title="" placeholder="用户名" class="inputcss" v-model.trim="loginForm.username">
  11. <img slot="label" style="padding-right:10px;display:block;"
  12. src="../assets/user.png" width="20" height="20">
  13. </x-input>
  14. </flexbox-item>
  15. <flexbox-item>
  16. <x-input title="" placeholder="密码" type="password" class="inputcss"
  17. v-model.trim="loginForm.password">
  18. <img slot="label" style="padding-right:10px;display:block;"
  19. src="../assets/password.png" width="20" height="20">
  20. </x-input>
  21. </flexbox-item>
  22. <flexbox-item>
  23. <x-input title="验证码" placeholder="验证码" class="inputcss" v-model.trim="loginForm.captcha">
  24. <img slot="label" style="padding-right:10px;display:block;"
  25. src="../assets/yzm.png" width="20" height="20">
  26. <img slot="right-full-height"
  27. @click="reRand" :src="captcha" width="100"
  28. height="50">
  29. </x-input>
  30. </flexbox-item>
  31. <flexbox-item>
  32. <!--<x-button type="default" style="width: 85%;margin-top: 20px" @click.native="sub">登录</x-button>-->
  33. <el-button type="primary" style="width:100%;margin-top: 15px"
  34. @click.native.prevent="sub">
  35. 立即登录
  36. </el-button>
  37. </flexbox-item>
  38. </flexbox>
  39. <toast v-model="showMessage" type="text" width="16em">{{msg}}</toast>
  40. </box>
  41. </div>
  42. </template>
  43. <script>
  44. import {XInput, Flexbox, FlexboxItem, XButton, Box} from 'vux'
  45. import {login} from "@/api/login";
  46. export default {
  47. components: {
  48. Flexbox,
  49. FlexboxItem,
  50. XInput,
  51. XButton,
  52. Box
  53. },
  54. created() {
  55. this.randStr = Math.random().toString()
  56. },
  57. data() {
  58. return {
  59. randStr: "",
  60. msg: '',
  61. showMessage: false,
  62. loginForm: {
  63. username: "",
  64. password: "",
  65. captcha: ""
  66. },
  67. token: this.$store.getters.name
  68. }
  69. },
  70. methods: {
  71. reRand() {
  72. this.randStr = Math.random().toString()
  73. },
  74. sub() {
  75. // console.log(this.loginForm.username, this.loginForm.password, this.loginForm.captcha)
  76. var username = this.loginForm.username
  77. var password = this.loginForm.password
  78. var captcha = this.loginForm.captcha
  79. const reg = /^[a-zA-Z0-9]+$/
  80. if (!reg.test(username)) {
  81. this.msg = "请输入正确的用户名"
  82. this.showMessage = true
  83. return
  84. }
  85. if (password.length < 6) {
  86. this.msg = "密码不能小于6位"
  87. this.showMessage = true
  88. return
  89. }
  90. if (captcha.length != 5) {
  91. this.msg = "验证码有误"
  92. this.showMessage = true
  93. return
  94. }
  95. this.msg = ""
  96. login(this.loginForm).then(response => {
  97. if (response.code != 200) {
  98. this.msg = response.message
  99. this.showMessage = true
  100. } else {
  101. if (response.result.type == "sa" || response.result.type == "ca") {
  102. this.msg = '无权登录'
  103. this.showMessage = true
  104. } else {
  105. this.$store.dispatch("Login", response.result)
  106. .then(() => {
  107. this.$router.push({path: "/order/ratiostatistics"});
  108. });
  109. }
  110. }
  111. })
  112. // this.showMessage = true
  113. }
  114. },
  115. computed: {
  116. captcha: function () {
  117. return process.env.BASE_API + "service-user/login/captcha?rand=" + this.randStr
  118. }
  119. }
  120. }
  121. </script>
  122. <style>
  123. .vux-demo {
  124. text-align: center;
  125. }
  126. .logo {
  127. width: 100px;
  128. height: 100px
  129. }
  130. .weui-input::placeholder {
  131. color: white;
  132. }
  133. .bjimg {
  134. position:absolute;
  135. width:100%;
  136. height:100%;
  137. background-image: url('../assets/background.png');
  138. overflow:hidden
  139. }
  140. .inputcss {
  141. border: 1px solid hsla(0, 0%, 100%, .1);
  142. background: rgba(0, 0, 0, .1);
  143. border-radius: 5px;
  144. color: white;
  145. margin-top: 8px;
  146. }
  147. </style>