login.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <view class="login-wrap">
  3. <view v-if="!buildType" style="text-align: center;color: #999999;padding-top: 40px;">{{ envTips }}</view>
  4. <image src="../../static/logo.jpg" class="logo"></image>
  5. <form class="login-form" @submit="formSubmit">
  6. <view class="form-item">
  7. <u-icon size="34" color="#999" name="account"></u-icon>
  8. <input v-model="form.loginName" class="item-inp" name="loginName" type="number" maxlength="11" placeholder="请输入用户名" />
  9. </view>
  10. <view class="form-item">
  11. <u-icon size="34" color="#999" name="lock"></u-icon>
  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="#2ab4e5" 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. <!-- <text class="apply-btn" @click="applyTrial">还没有账号?马上申请试用</text> -->
  22. </view>
  23. </form>
  24. <view class="authUserYs">
  25. <u-checkbox v-model="isAuthuserYs" value="true" :size="30" :label-size="26" active-color="#2ab4e5" class="login-form-checkbox" @change="authuserChange">登录代表同意</u-checkbox>
  26. <text @click="toYsPage()" style="vertical-align: text-top;font-size: 26rpx;text-decoration: underline;">乐色助手用户协议及隐私保护政策</text>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. import market from "@/js_sdk/dc-market/market.js"
  32. import { checkVersionToLoadUpdate, setStorageForAppVersion,clzConfirm } from '@/libs/tools'
  33. import { isvalidPhone } from '@/libs/validate.js';
  34. import { login } from '@/api/user.js';
  35. import { getSysVersion } from '@/api/data.js'
  36. export default {
  37. data() {
  38. return {
  39. form: {
  40. loginName: this.$store.state.vuex_user.account,
  41. password: this.$store.state.vuex_user.password
  42. },
  43. isRemember: true, // 是否记住密码
  44. isAuthuserYs: false, // 是否同意隐私政策
  45. envTips: '',
  46. buildType: '',
  47. };
  48. },
  49. mounted() {
  50. this.isRemember = this.$store.state.vuex_isRemember;
  51. this.isAuthuserYs = this.$store.state.vuex_isUsrAuthYs;
  52. this.envTips = getApp().globalData.envTips;
  53. this.buildType = getApp().globalData.buildType;
  54. },
  55. onShow() {
  56. console.log(this.$store.state,'----vuex')
  57. //#ifdef APP-PLUS
  58. uni.getSystemInfo({
  59. success:(res) => {
  60. console.log(res)
  61. //检测当前平台,如果是安卓则启动安卓更新
  62. if(res.platform=="android"){
  63. // 获取最新版本信息
  64. plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
  65. getApp().globalData.version = wgtinfo
  66. this.AndroidCheckUpdate()
  67. })
  68. }
  69. }
  70. })
  71. //#endif
  72. },
  73. methods: {
  74. // 获取微信login code
  75. getWechatCode(){
  76. const _this = this
  77. wx.login({
  78. success (res) {
  79. if (res.code) {
  80. //发起网络请求
  81. let formData = JSON.parse(JSON.stringify(_this.form))
  82. formData.code = res.code
  83. _this.submitForm(formData)
  84. } else {
  85. console.log('登录失败,点击“登录”重试!' + res.errMsg)
  86. }
  87. }
  88. })
  89. },
  90. // 安卓版本更新
  91. AndroidCheckUpdate(){
  92. let _this = this
  93. getSysVersion().then(ret => {
  94. if(ret.status == 200){
  95. this.$store.state.vuex_versionInfo = ret.data
  96. let currTimeStamp = new Date(ret.data.publicDate).getTime();
  97. // 判断缓存时间
  98. uni.getStorage({
  99. key: 'tip_version_update_time',
  100. success: function (res) {
  101. let lastTimeStamp = res.data;
  102. //定义提醒的时间间隔,避免烦人的一直提示,一个小时:36000;一天:60*60*1000*24
  103. let tipTimeLength = 60*60*1000*3;
  104. // 强制更新
  105. if(ret.data.forceUpgrade == 1){
  106. tipTimeLength = 0
  107. //进行版本型号的比对 以及下载更新请求
  108. checkVersionToLoadUpdate(ret.data,0,market);
  109. }else{
  110. if((lastTimeStamp+tipTimeLength) <= currTimeStamp){
  111. //重新设置时间戳
  112. setStorageForAppVersion(currTimeStamp);
  113. //进行版本型号的比对 以及下载更新请求
  114. checkVersionToLoadUpdate(ret.data,0,market);
  115. }
  116. }
  117. },
  118. fail:function(res){
  119. setStorageForAppVersion(currTimeStamp);
  120. }
  121. });
  122. }
  123. })
  124. },
  125. // 过滤权限code
  126. fiterAuthCode(data) {
  127. data.permCodes = data.permCodes.filter(item => item.indexOf('_mobile') > 0);
  128. return data;
  129. },
  130. // 表单提交
  131. formSubmit() {
  132. const _this = this;
  133. // 表单校验
  134. if (_this.form.loginName == '') {
  135. uni.showToast({ icon: 'none', title: '请输入用户名' });
  136. return;
  137. }
  138. if (!isvalidPhone(_this.form.loginName)) {
  139. uni.showToast({ icon: 'none', title: '请输入正确的手机号码' });
  140. return;
  141. }
  142. if (_this.form.password == '') {
  143. uni.showToast({ icon: 'none', title: '请输入密码' });
  144. return;
  145. }
  146. if (_this.form.password.length < 6 || _this.form.password.length > 12) {
  147. uni.showToast({ icon: 'none', title: '请输入6-12位密码' });
  148. return;
  149. }
  150. if (!_this.isAuthuserYs) {
  151. uni.showToast({ icon: 'none', title: '请同意并阅读用户隐私政策' });
  152. return;
  153. }
  154. uni.showLoading({
  155. title: '正在登录...'
  156. });
  157. // #ifdef MP-WEIXIN
  158. // 获取微信login code
  159. this.getWechatCode()
  160. // #endif
  161. // #ifndef MP-WEIXIN
  162. this.submitForm(_this.form)
  163. // #endif
  164. },
  165. submitForm(formData){
  166. const _this = this;
  167. // 登录
  168. login(formData).then(res => {
  169. uni.hideLoading();
  170. if (res.status == 200) {
  171. _this.$u.vuex('vuex_token', res.data);
  172. // _this.$u.vuex('vuex_userData', _this.fiterAuthCode(res.auth_user));
  173. getApp().globalData.token = res.data;
  174. //登录成功将用户名密码存储到用户本地
  175. if (_this.isRemember) {
  176. //用户勾选“记住密码”
  177. _this.$u.vuex('vuex_user.account', _this.form.loginName);
  178. _this.$u.vuex('vuex_user.password', _this.form.password);
  179. } else {
  180. //用户没有勾选“记住密码”
  181. _this.$u.vuex('vuex_user.account', '');
  182. _this.$u.vuex('vuex_user.password', '');
  183. _this.form.loginName = '';
  184. _this.form.password = '';
  185. }
  186. uni.setStorageSync('loginTimeOut', 'NO');
  187. console.log('登陆成功')
  188. _this.toMain();
  189. } else {
  190. uni.showToast({ icon: 'none', title: res.message });
  191. }
  192. });
  193. },
  194. toMain() {
  195. // 跳转到首页
  196. uni.switchTab({
  197. url: '/pages/index/index'
  198. });
  199. },
  200. // 申请试用
  201. applyTrial() {
  202. uni.navigateTo({
  203. url: '/pages/login/apply-trial'
  204. });
  205. },
  206. // 忘记密码
  207. forgetPass() {
  208. uni.navigateTo({
  209. url: '/pages/login/forget-pass?username=' + this.form.loginName
  210. });
  211. },
  212. // 判断是否记住密码
  213. rememberChange(e) {
  214. this.isRemember = e.value;
  215. // this.isRemember = e.detail.value.length > 0;
  216. },
  217. // 隐私
  218. authuserChange(e) {
  219. this.isAuthuserYs = e.value;
  220. // this.isAuthuserYs = e.detail.value.length > 0;
  221. this.$u.vuex('vuex_isUsrAuthYs', this.isAuthuserYs);
  222. },
  223. toYsPage() {
  224. uni.navigateTo({
  225. url: '/pages/agreement/agreement'
  226. });
  227. }
  228. }
  229. };
  230. </script>
  231. <style scoped lang="scss">
  232. @import './login.scss';
  233. </style>