login.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="login-wrap">
  3. <view class="login-head">
  4. <view v-if="showEnvTips">{{ envTips }}</view>
  5. </view>
  6. <view class="login-body">
  7. <image :src="`../../static/${theme}/logo.png`" class="logo"></image>
  8. <form class="login-form" @submit="AndroidCheckUpdate">
  9. <view class="form-item">
  10. <u-input v-model="form.username" :custom-style="{fontSize:'34upx'}" height="110" type="number" clearable maxlength="11" placeholder="请输入手机号/用户名" />
  11. </view>
  12. <view class="form-item">
  13. <u-input v-model="form.password" :custom-style="{fontSize:'34upx'}" height="110" type="password" :password-icon="true" maxlength="12" placeholder="请输入密码"/>
  14. </view>
  15. <view class="flex-box mt20">
  16. <view class="remember-pass">
  17. <checkbox-group @change="rememberChange">
  18. <label>
  19. <u-checkbox v-model="isRemember" label-size="13px" shape="circle">记住密码</u-checkbox>
  20. </label>
  21. </checkbox-group>
  22. </view>
  23. <view class="forget-pass" @click="forgetPass">忘记密码</view>
  24. </view>
  25. <view class="form-btn-con">
  26. <button class="form-btn" :disabled="isDisabled" :style="{'background':isDisabled?'#e5e5e5':$config('primaryColor')}" form-type="submit">登录</button>
  27. </view>
  28. </form>
  29. </view>
  30. <view class="authUserYs">
  31. <u-checkbox-group width="45rpx" @change="authuserChange">
  32. <u-checkbox v-model="isAuthuserYs" :label-disabled="false" shape="circle">
  33. </u-checkbox>
  34. </u-checkbox-group>
  35. <view>登录代表同意</view>
  36. <view @click="toYsPage">
  37. <text>用户协议</text>及<text>隐私保护政策</text>
  38. </view>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. import { checkVersionToLoadUpdate, setStorageForAppVersion,clzConfirm } from '@/libs/tools'
  44. import { isvalidPhone } from '@/libs/validate.js';
  45. import { login } from '@/api/user.js';
  46. import { getSysVersion } from '@/api/data.js'
  47. export default {
  48. data() {
  49. return {
  50. form: {
  51. username: this.$store.state.vuex_user.account,
  52. password: this.$store.state.vuex_user.password
  53. },
  54. isRemember: true, // 是否记住密码
  55. isAuthuserYs: false, // 是否同意隐私政策
  56. envTips: '',
  57. showEnvTips: false,
  58. theme: ''
  59. };
  60. },
  61. computed: {
  62. isDisabled() {
  63. return this.form.username == '' || this.form.password == ''
  64. }
  65. },
  66. onShow() {
  67. this.isRemember = this.$store.state.vuex_isRemember;
  68. this.envTips = getApp().globalData.envTips;
  69. this.showEnvTips = process.env.NODE_ENV == 'development';
  70. this.theme = getApp().globalData.theme;
  71. //#ifdef APP-PLUS
  72. this.isAuthuserYs = plus.runtime.isAgreePrivacy()
  73. uni.getSystemInfo({
  74. success:(res) => {
  75. console.log(res)
  76. // 获取最新版本信息
  77. plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
  78. wgtinfo.platform = res.platform
  79. getApp().globalData.version = wgtinfo
  80. })
  81. }
  82. })
  83. //#endif
  84. },
  85. methods: {
  86. // 版本更新
  87. AndroidCheckUpdate(){
  88. let _this = this
  89. let version = getApp().globalData.version
  90. uni.showLoading({
  91. title: '正在登录...'
  92. });
  93. getSysVersion({versionType:version.platform=='android'?'ANDROID':'IOS'}).then(ret => {
  94. if(ret.status == 200){
  95. this.$store.state.vuex_versionInfo = ret.data
  96. checkVersionToLoadUpdate(ret.data,0,_this.formSubmit);
  97. }
  98. })
  99. },
  100. // 过滤权限code
  101. fiterAuthCode(data) {
  102. data.permCodes = data.permCodes.filter(item => item.indexOf('_mobile') > 0);
  103. return data;
  104. },
  105. // 表单提交
  106. formSubmit() {
  107. const _this = this;
  108. // 表单校验
  109. if (_this.form.username == '') {
  110. uni.showToast({ icon: 'none', title: '请输入用户名' });
  111. return;
  112. }
  113. if (!isvalidPhone(_this.form.username)) {
  114. uni.showToast({ icon: 'none', title: '请输入正确的手机号码' });
  115. return;
  116. }
  117. if (_this.form.password == '') {
  118. uni.showToast({ icon: 'none', title: '请输入密码' });
  119. return;
  120. }
  121. if (_this.form.password.length < 6 || _this.form.password.length > 12) {
  122. uni.showToast({ icon: 'none', title: '请输入6-12位密码' });
  123. return;
  124. }
  125. if (!_this.isAuthuserYs) {
  126. uni.showToast({ icon: 'none', title: '请同意并阅读用户隐私政策' });
  127. return;
  128. }
  129. // 登录
  130. login(_this.form).then(ret => {
  131. uni.hideLoading();
  132. let res = ret.data ? ret.data : ret;
  133. if (res.status == 200) {
  134. _this.$u.vuex('vuex_token', 'Bearer ' + res.access_token);
  135. _this.$u.vuex('vuex_userData', _this.fiterAuthCode(res.auth_user));
  136. getApp().globalData.token = 'Bearer ' + res.access_token;
  137. //登录成功将用户名密码存储到用户本地
  138. if (_this.isRemember) {
  139. //用户勾选“记住密码”
  140. _this.$u.vuex('vuex_user.account', _this.form.username);
  141. _this.$u.vuex('vuex_user.password', _this.form.password);
  142. } else {
  143. //用户没有勾选“记住密码”
  144. _this.$u.vuex('vuex_user.account', '');
  145. _this.$u.vuex('vuex_user.password', '');
  146. _this.form.username = '';
  147. _this.form.password = '';
  148. }
  149. uni.setStorageSync('loginTimeOut', 'NO');
  150. _this.toMain();
  151. } else {
  152. uni.showToast({ icon: 'none', title: res.message });
  153. }
  154. });
  155. },
  156. toMain() {
  157. // 跳转到首页
  158. uni.redirectTo({
  159. url: '/pages/index'
  160. });
  161. },
  162. // 申请试用
  163. applyTrial() {
  164. uni.navigateTo({
  165. url: '/pages/login/apply-trial'
  166. });
  167. },
  168. // 忘记密码
  169. forgetPass() {
  170. uni.navigateTo({
  171. url: '/pages/login/forget-pass?username=' + this.form.username
  172. });
  173. },
  174. // 判断是否记住密码
  175. rememberChange(e) {
  176. this.isRemember = e.detail.value.length > 0;
  177. },
  178. // 隐私
  179. authuserChange(e) {
  180. this.$u.vuex('vuex_isUsrAuthYs', this.isAuthuserYs);
  181. //#ifdef APP-PLUS
  182. if(!this.isAuthuserYs){
  183. plus.runtime.disagreePrivacy()
  184. }else{
  185. plus.runtime.agreePrivacy()
  186. }
  187. //#endif
  188. },
  189. toYsPage() {
  190. uni.navigateTo({
  191. url: '/pages/login/userAuthYs'
  192. });
  193. }
  194. }
  195. };
  196. </script>
  197. <style scoped lang="scss">
  198. @import './login.scss';
  199. </style>