pwLogin.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <view class="pw-login-wrap">
  3. <!-- <view v-if="!buildType" style="text-align: center;color: #999999;padding-top: 40px;">{{ envTips }}</view> -->
  4. <view class="logo">
  5. <u-image src="/static/logo.jpg" width="140" height="140" ></u-image>
  6. </view>
  7. <form class="login-form" @submit="formSubmit">
  8. <view class="form-item">
  9. <input v-model="form.loginName" class="item-inp" name="loginName" type="text" maxlength="30" placeholder="请输入用户名" />
  10. </view>
  11. <view class="form-item">
  12. <input v-model="form.password" class="item-inp" name="password" password type="text" maxlength="12" placeholder="请输入密码" />
  13. </view>
  14. <view class="flex-box" style="margin-top: 60upx;">
  15. <view class="remember-pass">
  16. <u-checkbox v-model="isRemember" value="true" :size="30" :label-size="26" active-color="#07c160" class="login-form-checkbox" @change="rememberChange">记住密码</u-checkbox>
  17. </view>
  18. </view>
  19. <view class="form-btn-con">
  20. <button class="form-btn" form-type="submit">登录</button>
  21. </view>
  22. </form>
  23. </view>
  24. </template>
  25. <script>
  26. import { checkVersionToLoadUpdate, setStorageForAppVersion,clzConfirm } from '@/libs/tools'
  27. import { isvalidPhone } from '@/libs/validate.js';
  28. import { loginPhone } from '@/api/user.js';
  29. import { getSysVersion } from '@/api/data.js'
  30. export default {
  31. data() {
  32. return {
  33. form: {
  34. loginName: this.$store.state.vuex_user.account,
  35. password: this.$store.state.vuex_user.password
  36. },
  37. isRemember: true, // 是否记住密码
  38. envTips: '',
  39. buildType: '',
  40. };
  41. },
  42. mounted() {
  43. this.isRemember = this.$store.state.vuex_isRemember || true;
  44. this.envTips = getApp().globalData.envTips;
  45. this.buildType = getApp().globalData.buildType;
  46. },
  47. onShow() {
  48. },
  49. methods: {
  50. // 获取微信login code
  51. getWechatCode(){
  52. const _this = this
  53. wx.login({
  54. success (res) {
  55. if (res.code) {
  56. //发起网络请求
  57. let formData = JSON.parse(JSON.stringify(_this.form))
  58. formData.code = res.code
  59. _this.submitForm(formData)
  60. } else {
  61. console.log('登录失败,点击“登录”重试!' + res.errMsg)
  62. }
  63. }
  64. })
  65. },
  66. // 表单提交
  67. formSubmit() {
  68. const _this = this;
  69. // 表单校验
  70. if (_this.form.loginName == '') {
  71. uni.showToast({ icon: 'none', title: '请输入用户名' });
  72. return;
  73. }
  74. if (_this.form.password == '') {
  75. uni.showToast({ icon: 'none', title: '请输入密码' });
  76. return;
  77. }
  78. if (_this.form.password.length < 6 || _this.form.password.length > 12) {
  79. uni.showToast({ icon: 'none', title: '请输入6-12位密码' });
  80. return;
  81. }
  82. uni.showLoading({
  83. title: '正在登录...'
  84. });
  85. // #ifdef MP-WEIXIN
  86. // 获取微信login code
  87. this.getWechatCode()
  88. // #endif
  89. // #ifndef MP-WEIXIN
  90. this.submitForm(_this.form)
  91. // #endif
  92. },
  93. submitForm(formData){
  94. const _this = this;
  95. // 登录
  96. loginPhone(formData).then(res => {
  97. uni.hideLoading();
  98. if (res.status == 200) {
  99. _this.$u.vuex('vuex_token', res.data);
  100. getApp().globalData.token = res.data;
  101. //登录成功将用户名密码存储到用户本地
  102. if (_this.isRemember) {
  103. //用户勾选“记住密码”
  104. _this.$u.vuex('vuex_user.account', _this.form.loginName);
  105. _this.$u.vuex('vuex_user.password', _this.form.password);
  106. } else {
  107. //用户没有勾选“记住密码”
  108. _this.$u.vuex('vuex_user.account', '');
  109. _this.$u.vuex('vuex_user.password', '');
  110. _this.form.loginName = '';
  111. _this.form.password = '';
  112. }
  113. uni.setStorageSync('loginTimeOut', 'NO');
  114. _this.toMain();
  115. } else {
  116. uni.showToast({ icon: 'none', title: res.message });
  117. }
  118. });
  119. },
  120. toMain() {
  121. // 跳转到首页
  122. uni.switchTab({
  123. url: '/pages/index/index'
  124. });
  125. },
  126. // 忘记密码
  127. forgetPass() {
  128. uni.navigateTo({
  129. url: '/pages/login/forget-pass?username=' + this.form.loginName
  130. });
  131. },
  132. // 判断是否记住密码
  133. rememberChange(e) {
  134. this.isRemember = e.value;
  135. },
  136. toYsPage() {
  137. uni.navigateTo({
  138. url: '/pages/agreement/agreement'
  139. });
  140. }
  141. }
  142. };
  143. </script>
  144. <style scoped lang="scss">
  145. @import './login.scss';
  146. </style>