index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <view class="appBox">
  3. <div class="shading">
  4. <image :src="logoUrl" v-if="logoUrl" />
  5. <image src="/static/images/logo2.png" v-else />
  6. </div>
  7. <mobileLogin :isUp="isUp" :isShow="isShow" :platform="platform" :isPos="isPos" :appleShow="appleShow" :authKey="authKey" @wechatPhone="wechatPhone"></mobileLogin>
  8. </view>
  9. </template>
  10. <script>
  11. const app = getApp();
  12. import sendVerifyCode from "@/mixins/SendVerifyCode";
  13. import {
  14. registerVerify,
  15. getCodeApi,
  16. getUserInfo,
  17. phoneSilenceAuth,
  18. } from "@/api/user";
  19. import mobileLogin from '@/components/login_mobile/index.vue'
  20. export default {
  21. name: 'login_mobile',
  22. data() {
  23. return {
  24. options: '',
  25. keyCode: '',
  26. account: '',
  27. codeNum: '',
  28. isUp: true,
  29. authKey: '',
  30. logoUrl: '',
  31. isShow: false,
  32. isPos: false,
  33. platform: '', // 手机平台
  34. appleShow: '' //是否是苹果登录
  35. }
  36. },
  37. components: {
  38. mobileLogin
  39. },
  40. mixins: [sendVerifyCode],
  41. onLoad: function(options) {
  42. let that = this;
  43. // 获取系统信息
  44. uni.getSystemInfo({
  45. success(res) {
  46. that.platform = res.platform;
  47. }
  48. });
  49. const {
  50. code,
  51. state,
  52. scope,
  53. back_url,
  54. appleShow
  55. } = options;
  56. that.options = options
  57. if (options.authKey) that.authKey = options.authKey
  58. if (options.appleShow) that.appleShow = options.appleShow
  59. },
  60. methods: {
  61. wechatPhone() {
  62. this.$Cache.clear('snsapiKey');
  63. if (this.options.back_url) {
  64. let url = uni.getStorageSync('snRouter');
  65. url = url.indexOf('/pages/index/index') != -1 ? '/' : url;
  66. if (url.indexOf('/pages/users/wechat_login/index') !== -1) {
  67. url = '/';
  68. }
  69. if (!url) {
  70. url = '/pages/index/index';
  71. }
  72. this.isUp = false
  73. uni.showToast({
  74. title: '登录成功',
  75. icon: 'none'
  76. })
  77. setTimeout(res => {
  78. location.href = url
  79. }, 800)
  80. } else {
  81. uni.navigateBack()
  82. }
  83. },
  84. // 获取验证码
  85. async code() {
  86. let that = this;
  87. if (!that.account) return that.$util.Tips({
  88. title: '请填写手机号码'
  89. });
  90. if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
  91. title: '请输入正确的手机号码'
  92. });
  93. await registerVerify(that.account).then(res => {
  94. that.$util.Tips({
  95. title: res.msg
  96. });
  97. that.sendCode();
  98. }).catch(err => {
  99. return that.$util.Tips({
  100. title: err
  101. })
  102. })
  103. },
  104. // 获取验证码api
  105. getCode() {
  106. let that = this
  107. getCodeApi().then(res => {
  108. that.keyCode = res.data.key;
  109. }).catch(res => {
  110. that.$util.Tips({
  111. title: res
  112. });
  113. });
  114. },
  115. close() {
  116. this.$emit('close', false)
  117. },
  118. // #ifdef MP
  119. phoneSilenceAuth(code) {
  120. let self = this
  121. // TODO @芋艿:貌似这里没做
  122. phoneSilenceAuth({
  123. code: code,
  124. spid: app.globalData.spid,
  125. phone: this.account,
  126. captcha: this.codeNum
  127. }).then(res => {
  128. this.$store.commit('LOGIN', {
  129. token: res.data.token
  130. });
  131. this.$store.commit("SETUID", res.data.uid);
  132. this.getUserInfo();
  133. }).catch(error => {
  134. self.$util.Tips({
  135. title: error
  136. })
  137. })
  138. },
  139. // #endif
  140. /**
  141. * 获取个人用户信息
  142. */
  143. getUserInfo: function() {
  144. let that = this;
  145. getUserInfo().then(res => {
  146. uni.hideLoading();
  147. that.userInfo = res.data
  148. that.$store.commit("UPDATE_USERINFO", res.data);
  149. // #ifdef MP
  150. that.$util.Tips({
  151. title: '登录成功',
  152. icon: 'success'
  153. }, {
  154. tab: 3
  155. })
  156. that.close()
  157. // #endif
  158. // #ifdef H5
  159. that.$emit('wechatPhone', true)
  160. // #endif
  161. });
  162. },
  163. }
  164. }
  165. </script>
  166. <style>
  167. page {
  168. height: 100%;
  169. }
  170. </style>
  171. <style lang="scss" scoped>
  172. .appBox {
  173. background-color: #fff;
  174. height: 100%;
  175. display: flex;
  176. flex-direction: column;
  177. justify-content: center;
  178. overflow: hidden;
  179. }
  180. .shading {
  181. display: flex;
  182. align-items: center;
  183. justify-content: center;
  184. width: 100%;
  185. image {
  186. width: 180rpx;
  187. height: 180rpx;
  188. }
  189. }
  190. page {
  191. background-color: #fff !important;
  192. }
  193. .ChangePassword .phone {
  194. font-size: 32rpx;
  195. font-weight: bold;
  196. text-align: center;
  197. margin-top: 55rpx;
  198. }
  199. .ChangePassword .list {
  200. width: 580rpx;
  201. margin: 53rpx auto 0 auto;
  202. }
  203. .ChangePassword .list .item {
  204. width: 100%;
  205. height: 110rpx;
  206. border-bottom: 2rpx solid #f0f0f0;
  207. }
  208. .ChangePassword .list .item input {
  209. width: 100%;
  210. height: 100%;
  211. font-size: 32rpx;
  212. }
  213. .ChangePassword .list .item .placeholder {
  214. color: #b9b9bc;
  215. }
  216. .ChangePassword .list .item input.codeIput {
  217. width: 340rpx;
  218. }
  219. .ChangePassword .list .item .code {
  220. font-size: 32rpx;
  221. background-color: #fff;
  222. }
  223. .ChangePassword .list .item .code.on {
  224. color: #b9b9bc !important;
  225. }
  226. .ChangePassword .confirmBnt {
  227. font-size: 32rpx;
  228. width: 580rpx;
  229. height: 90rpx;
  230. border-radius: 45rpx;
  231. color: #fff;
  232. margin: 92rpx auto 0 auto;
  233. text-align: center;
  234. line-height: 90rpx;
  235. }
  236. </style>