index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <view class="u-login">
  3. <view class="u-logo">
  4. <image class="logo" src="/static/logo.png"></image>
  5. <view>iSCM 检货系统</view>
  6. </view>
  7. <view class="u-forms">
  8. <form @submit="AndroidCheckUpdate">
  9. <view class="uni-form-item">
  10. <view class="uni-form-title">
  11. <text class="iconfont icon-icon-test23"></text>
  12. </view>
  13. <input class="uni-input" v-model="username" name="username" placeholder="请输入用户名" />
  14. </view>
  15. <view class="uni-form-item">
  16. <view class="uni-form-title">
  17. <text class="iconfont icon-icon-test16"></text>
  18. </view>
  19. <input class="uni-input" v-model="password" name="password" password placeholder="请输入密码" />
  20. </view>
  21. <view class="uni-btn-v">
  22. <button form-type="submit" type="primary">登录</button>
  23. </view>
  24. </form>
  25. </view>
  26. <view class="copright">
  27. <view>系统版本:1.0.0</view>
  28. <view>Copyright © 2023 陕西山海高科信息技术有限公司</view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import { login, getSysVersion } from '@/config/api.js'
  34. import { checkVersionToLoadUpdate } from '@/libs/tools.js'
  35. export default {
  36. data() {
  37. return {
  38. showPassword: false,
  39. username: '',
  40. password: ''
  41. };
  42. },
  43. onLoad() {
  44. //#ifdef APP-PLUS
  45. uni.getSystemInfo({
  46. success:(res) => {
  47. console.log(res)
  48. // 获取最新版本信息
  49. plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
  50. wgtinfo.platform = res.platform
  51. getApp().globalData.version = wgtinfo
  52. })
  53. }
  54. })
  55. //#endif
  56. const devInfo = uni.getDeviceInfo()
  57. this.$store.state.vuex_deviceId = devInfo.deviceId
  58. // 记住用户密码
  59. const account = uni.getStorageSync('account')
  60. if(account){
  61. this.username = account.username
  62. this.password = account.password
  63. }
  64. },
  65. methods: {
  66. // 版本更新
  67. AndroidCheckUpdate(){
  68. let _this = this
  69. uni.showLoading({
  70. title: '正在登录...'
  71. });
  72. getSysVersion({versionType:uni.getSystemInfoSync().platform == "ios"?'IOS':'ANDROID', applyCode: 'scsb'}).then(ret => {
  73. console.log(ret)
  74. if(ret.status == 200){
  75. if(ret.data){
  76. this.$store.state.vuex_versionInfo = ret.data || null
  77. checkVersionToLoadUpdate(ret.data,0,_this.formSubmit)
  78. }else{
  79. _this.formSubmit();
  80. }
  81. }
  82. uni.hideLoading()
  83. })
  84. },
  85. // 登录
  86. async formSubmit(e) {
  87. const formdata = {
  88. username: this.username,
  89. password: this.password
  90. }
  91. if(formdata.username && formdata.password){
  92. const res = await login(formdata)
  93. if(res.status == 200){
  94. this.$store.state.vuex_token = res.data.access_token
  95. this.$store.state.vuex_user = res.data.auth_user
  96. // 记住用户密码
  97. this.$store.state.vuex_userAccount = {
  98. username: this.username,
  99. password: this.password
  100. }
  101. uni.setStorageSync('account',this.$store.state.vuex_userAccount)
  102. uni.redirectTo({
  103. url: "/pages/index/index"
  104. })
  105. }
  106. uni.hideLoading()
  107. }else{
  108. uni.$u.toast("请输入用户名和密码")
  109. }
  110. }
  111. },
  112. }
  113. </script>
  114. <style lang="scss">
  115. .u-login{
  116. display: flex;
  117. flex-direction: column;
  118. justify-content: space-around;
  119. height: 100vh;
  120. .u-logo{
  121. text-align: center;
  122. padding-top: 20%;
  123. image{
  124. width: 150upx;
  125. height: 150upx;
  126. border-radius: 250upx;
  127. }
  128. > view{
  129. font-size: 50upx;
  130. padding: 10upx 0;
  131. }
  132. }
  133. .u-forms{
  134. width: 80%;
  135. margin: 0 auto 20%;
  136. .uni-form-item{
  137. display: flex;
  138. align-items: center;
  139. position: relative;
  140. margin: 30upx 0;
  141. border-bottom: 1px solid #eee;
  142. border-radius: 20upx;
  143. padding: 20upx 10upx;
  144. .uni-form-title{
  145. padding: 0 15upx;
  146. text{
  147. font-size: 50upx;
  148. color: $uni-text-color-grey;
  149. }
  150. }
  151. .uni-input{
  152. flex-grow: 1;
  153. padding: 0 15upx;
  154. &:focus{
  155. border-color: $uni-color-primary;
  156. }
  157. }
  158. .uni-icon{
  159. position: absolute;
  160. right: 20upx;
  161. color: $uni-text-color-grey;
  162. }
  163. }
  164. .uni-btn-v{
  165. padding: 30upx 20%;
  166. button{
  167. background: $uni-color-primary;
  168. font-size: 36upx;
  169. }
  170. }
  171. }
  172. .copright{
  173. text-align: center;
  174. color: $uni-text-color-grey;
  175. font-size: 20upx;
  176. }
  177. }
  178. </style>