login.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <view class="content">
  3. <view>
  4. <view>
  5. <view class="logo">
  6. <u-image src="/static/logo.png" width="140" height="140" ></u-image>
  7. </view>
  8. <view class="login-btns">
  9. <u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  10. 微信登录
  11. </u-button>
  12. <u-gap height="30"></u-gap>
  13. <u-button shape="circle" :custom-style="phoneButton" class="login-btn" @click="phoneLogin" type="primary">
  14. 手机号码登录
  15. </u-button>
  16. </view>
  17. </view>
  18. <view class="nologin">
  19. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  20. 暂不登录
  21. </u-button>
  22. </view>
  23. </view>
  24. <view @click="toYs">登录即代表同意<text>隐私政策</text>和<text>服务条款</text></view>
  25. </view>
  26. </template>
  27. <script>
  28. import {
  29. login
  30. } from "@/api/login"
  31. export default {
  32. components: {},
  33. data() {
  34. return {
  35. path: '/pages/index/index',
  36. lanuch: true,
  37. code: '',
  38. wxButton: {
  39. background: '#07c160'
  40. },
  41. phoneButton: {
  42. background: '#00aaff'
  43. }
  44. }
  45. },
  46. mounted() {},
  47. onLoad(option) {
  48. // 开启分享
  49. uni.showShareMenu({
  50. withShareTicket: true,
  51. menus: ['shareAppMessage', 'shareTimeline']
  52. })
  53. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  54. this.wxLogin()
  55. const {
  56. path,
  57. lanuch
  58. } = option;
  59. this.lanuch = (lanuch + '') === 'true';
  60. if (path) {
  61. this.path = decodeURIComponent(path);
  62. }
  63. },
  64. methods: {
  65. cansel(){
  66. this.$store.state.vuex_noLogin = true
  67. uni.reLaunch({
  68. url: '/pages/index/index'
  69. })
  70. },
  71. toYs(){
  72. uni.navigateTo({
  73. url: '/pages/agreement/agreement'
  74. })
  75. },
  76. getPhoneNumber(e) {
  77. let _this = this
  78. uni.showLoading({
  79. mask: true,
  80. title: '加载中'
  81. });
  82. if (!this.code) {
  83. this.wxLogin()
  84. }
  85. console.log(this.code, e)
  86. if (e.target.errMsg === 'getPhoneNumber:ok') {
  87. setTimeout(()=>{
  88. login({
  89. code: _this.code,
  90. encryptedData: e.target.encryptedData,
  91. iv: e.target.iv
  92. }).then(res => {
  93. uni.hideLoading();
  94. _this.code = ''
  95. console.log(res,_this.path, 'login data')
  96. if (res.status == '200') {
  97. getApp().globalData.token = res.data
  98. _this.$u.vuex('vuex_token',res.data)
  99. uni.$emit("getUserInfo")
  100. if (_this.path === '/pages/index/index' || _this.lanuch) {
  101. uni.reLaunch({
  102. url: _this.path
  103. });
  104. } else {
  105. uni.redirectTo({
  106. url: _this.path
  107. });
  108. }
  109. } else {
  110. uni.showToast({
  111. title: res.message,
  112. icon: 'none',
  113. duration: 2500
  114. });
  115. }
  116. });
  117. },300)
  118. } else {
  119. uni.showToast({
  120. title: '授权失败',
  121. icon: 'none',
  122. duration: 2500
  123. });
  124. }
  125. },
  126. // 调微信登录 获取code
  127. wxLogin () {
  128. let _this = this
  129. uni.login({
  130. provider: 'weixin',
  131. success(res) {
  132. console.log(res.code)
  133. _this.code = res.code
  134. }
  135. })
  136. },
  137. // 手机号登录
  138. phoneLogin () {
  139. wx.navigateTo({
  140. url: '/pages/login/phoneLogin'
  141. })
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss">
  147. .content {
  148. width: 100%;
  149. height: 100%;
  150. padding: 40upx;
  151. display: flex;
  152. flex-direction: column;
  153. > view{
  154. text-align: center;
  155. &:first-child{
  156. flex-grow: 1;
  157. height: 80vh;
  158. padding: 20% 10%;
  159. display: flex;
  160. flex-direction: column;
  161. justify-content: space-between;
  162. }
  163. &:last-child{
  164. font-size: 24upx;
  165. text{
  166. color: #07c160;
  167. }
  168. }
  169. .logo{
  170. text-align: center;
  171. display: flex;
  172. justify-content: center;
  173. }
  174. .login-btns{
  175. padding: 60upx 0;
  176. .login-btn{
  177. margin: 30upx 0;
  178. }
  179. }
  180. }
  181. }
  182. </style>