login.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view :class="['qn-page-' + theme]">
  3. <view class="login-bg">
  4. <view class="logo-view"><image :src="base_set_info.images" mode="aspectFit"></image></view>
  5. </view>
  6. <view class="login-main">
  7. <view class="input-view">
  8. <text class="ibonfont ibonshouji1"></text>
  9. <input type="number" v-model="user_info.mobile" class="input-input" placeholder="请输入手机号" placeholder-style="color:#999" />
  10. </view>
  11. <view class="input-view">
  12. <text class="ibonfont ibonyanzhengma"></text>
  13. <input
  14. type="mobile"
  15. v-model="user_info.password"
  16. placeholder="请输入密码"
  17. class="input-input"
  18. placeholder-style="color:#999"
  19. maxlength="20"
  20. password
  21. data-key="password"
  22. @input="inputChange"
  23. />
  24. </view>
  25. <view class="button-view primary-bg" @click="toLogin">登录1</view>
  26. </view>
  27. <view class="other-view" @click="smsLogin">
  28. <view class="other-tit">短信验证码登录</view>
  29. <view class="other-val">
  30. <text class="ibonfont ibonshouji"></text>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import { mapMutations } from 'vuex';
  37. export default {
  38. data() {
  39. return {
  40. mobile: '',
  41. user_info: {
  42. mobile: '',
  43. password: ''
  44. },
  45. source: 5,
  46. logining: false,
  47. provinceCode: '',
  48. cityCode: '',
  49. districtCode: '',
  50. status: '',
  51. base_set_info: {}
  52. };
  53. },
  54. onLoad() {
  55. this.source = this.$common.source();
  56. this.base_set_info = this.$store.state.baseSet;
  57. },
  58. methods: {
  59. smsLogin() {
  60. this.goPage('/pagesT/public/wxLogin?loginType=2');
  61. },
  62. WXLogin() {
  63. uni.login({
  64. provider: 'weixin',
  65. success: loginRes => {
  66. console.log(loginRes.authResult);
  67. }
  68. });
  69. },
  70. //先获取个人资料
  71. getCustomerInfo(token) {
  72. this.$u.api.getCustomerInfo().then(({data})=>{
  73. if (data.enableStatus === 4) {
  74. uni.clearStorageSync();
  75. uni.showModal({
  76. title: '账号已被禁用,您可以',
  77. content: '联系电话:' + (data.enterpriseMobile||''),
  78. confirmText: '联系客服',
  79. cancelText: '取消',
  80. success: res => {
  81. if (res.confirm) {
  82. uni.makePhoneCall({
  83. phoneNumber: data.enterpriseMobile
  84. });
  85. } else {
  86. }
  87. }
  88. });
  89. return;
  90. }
  91. if (data.status === 3) {
  92. // uni.clearStorageSync();
  93. // 说明资料不完善,跳转到完善资料的页面
  94. uni.showModal({
  95. title: '审核未通过,请重新修改资料',
  96. content: data.auditFailReason || '',
  97. cancelText: '联系客服',
  98. confirmText: '修改资料',
  99. success: res => {
  100. if (res.confirm) {
  101. this.goPage('/pagesT/user/editUserInfo?token=' + token);
  102. } else if (res.cancel) {
  103. uni.makePhoneCall({
  104. phoneNumber: data.enterpriseMobile
  105. });
  106. }
  107. }
  108. });
  109. } else if (data.status === 1) {
  110. // uni.clearStorageSync();
  111. uni.showModal({
  112. title: '账号正在审核中,您可以',
  113. content: '联系电话:' + (data.enterpriseMobile||''),
  114. confirmText: '先去逛逛',
  115. cancelText: '联系客服',
  116. success: res => {
  117. if (res.confirm) {
  118. this.goPage('/pages/index/index', 'switchTab');
  119. } else {
  120. uni.makePhoneCall({
  121. phoneNumber: data.enterpriseMobile
  122. });
  123. }
  124. }
  125. });
  126. } else {
  127. // this.$emit('loginSuccess');
  128. this.goPage(`/pages/index/index`, 'switchTab');
  129. }
  130. });
  131. },
  132. ...mapMutations(['login']),
  133. inputChange(e) {
  134. const key = e.currentTarget.dataset.key;
  135. this[key] = e.detail.value;
  136. },
  137. navBack() {
  138. uni.navigateBack();
  139. },
  140. toLogin() {
  141. console.log('点击登录')
  142. if (!this.user_info.mobile) {
  143. uni.showToast({
  144. title: '请输入您的手机号',
  145. icon: 'none'
  146. });
  147. return false;
  148. }
  149. const re = /^1[23456789]\d{9}$/;
  150. if (!re.test(this.user_info.mobile)) {
  151. uni.showToast({
  152. title: '手机号格式不正确',
  153. icon: 'none'
  154. });
  155. return;
  156. }
  157. if (!this.user_info.password) {
  158. uni.showToast({
  159. title: '请输入您的密码',
  160. icon: 'none'
  161. });
  162. return false;
  163. }
  164. this.$u.api.login({ ...this.user_info, source: this.source }).then(data=>{
  165. const token = data.data.token;
  166. const expireTime = data.data.expireTime;
  167. uni.setStorageSync('token', token);
  168. uni.setStorageSync('expireTime', expireTime);
  169. // 更新登录状态
  170. this.$store.commit('commit_hasLogin', true);
  171. this.getCustomerInfo(token, expireTime);
  172. });
  173. }
  174. }
  175. };
  176. </script>
  177. <style>
  178. @import url('./common.css');
  179. </style>
  180. <style scoped lang="scss">
  181. .other-view {
  182. position: fixed;
  183. left: 0;
  184. width: 100%;
  185. bottom: 300upx;
  186. text-align: center;
  187. color: #999;
  188. font-size: 24upx;
  189. font-weight: 300;
  190. margin-top: 100upx;
  191. .other-val {
  192. .ibonshouji {
  193. font-size: 60upx;
  194. color: $uni-color-warning;
  195. display: inline-block;
  196. margin: 30upx 0 20upx;
  197. }
  198. .ibonweixin {
  199. font-size: 60upx;
  200. color: #75bf65;
  201. display: inline-block;
  202. margin: 30upx 0 20upx;
  203. }
  204. }
  205. .other-tit {
  206. &::after {
  207. content: ' ';
  208. display: inline-block;
  209. width: 200upx;
  210. height: 1upx;
  211. background-color: #ddd;
  212. margin-left: 30upx;
  213. transform: translateY(-6upx);
  214. }
  215. &::before {
  216. content: ' ';
  217. display: inline-block;
  218. width: 200upx;
  219. height: 1upx;
  220. background-color: #ddd;
  221. margin-right: 30upx;
  222. transform: translateY(-6upx);
  223. }
  224. }
  225. .wx-icon {
  226. width: 64upx;
  227. height: 64upx;
  228. margin-top: 50upx;
  229. }
  230. }
  231. </style>