login.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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: false,
  37. code: '',
  38. url:'', // 二维码参数
  39. wxButton: {
  40. background: '#07c160'
  41. },
  42. phoneButton: {
  43. background: '#00aaff'
  44. }
  45. }
  46. },
  47. mounted() {},
  48. onLoad(option) {
  49. if(option.q !=undefined){
  50. this.url=decodeURIComponent(option.q)
  51. }
  52. // 开启分享
  53. uni.showShareMenu({
  54. withShareTicket: true,
  55. menus: ['shareAppMessage', 'shareTimeline']
  56. })
  57. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  58. this.wxLogin()
  59. const {
  60. path,
  61. lanuch
  62. } = option;
  63. this.lanuch = (lanuch + '') === 'true';
  64. if (path) {
  65. this.path = decodeURIComponent(path);
  66. }
  67. },
  68. methods: {
  69. cansel(){
  70. this.$store.state.vuex_noLogin = true
  71. uni.reLaunch({
  72. url: '/pages/index/index'
  73. })
  74. },
  75. toYs(){
  76. uni.navigateTo({
  77. url: '/pages/agreement/agreement'
  78. })
  79. },
  80. getPhoneNumber(e) {
  81. let _this = this
  82. uni.showLoading({
  83. mask: true,
  84. title: '加载中'
  85. });
  86. if (!this.code) {
  87. this.wxLogin()
  88. }
  89. console.log(this.code, e)
  90. if (e.target.errMsg === 'getPhoneNumber:ok') {
  91. setTimeout(()=>{
  92. const params={
  93. code: _this.code,
  94. encryptedData: e.target.encryptedData,
  95. iv: e.target.iv,
  96. }
  97. if(_this.url){
  98. params.encode=_this.url
  99. }
  100. login(params).then(res => {
  101. uni.hideLoading();
  102. _this.code = ''
  103. console.log(res,_this.path, 'login data')
  104. if (res.status == '200') {
  105. getApp().globalData.token = res.data
  106. _this.$u.vuex('vuex_token',res.data)
  107. uni.$emit("getUserInfo")
  108. if (_this.path === '/pages/index/index' || _this.lanuch) {
  109. uni.reLaunch({
  110. url: _this.path
  111. });
  112. } else {
  113. uni.redirectTo({
  114. url: _this.path
  115. });
  116. }
  117. } else {
  118. uni.showToast({
  119. title: res.message,
  120. icon: 'none',
  121. duration: 2500
  122. });
  123. }
  124. });
  125. },300)
  126. } else {
  127. uni.showToast({
  128. title: '授权失败',
  129. icon: 'none',
  130. duration: 2500
  131. });
  132. }
  133. },
  134. // 调微信登录 获取code
  135. wxLogin () {
  136. let _this = this
  137. uni.login({
  138. provider: 'weixin',
  139. success(res) {
  140. console.log(res.code)
  141. _this.code = res.code
  142. }
  143. })
  144. },
  145. // 手机号登录
  146. phoneLogin () {
  147. if(this.url){
  148. wx.navigateTo({
  149. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch+'&encode='+this.url
  150. })
  151. }else{
  152. wx.navigateTo({
  153. url: '/pages/login/phoneLogin?path='+this.path+'&lanuch='+this.lanuch
  154. })
  155. }
  156. }
  157. }
  158. }
  159. </script>
  160. <style lang="scss">
  161. .content {
  162. width: 100%;
  163. height: 100%;
  164. padding: 40upx;
  165. display: flex;
  166. flex-direction: column;
  167. > view{
  168. text-align: center;
  169. &:first-child{
  170. flex-grow: 1;
  171. height: 80vh;
  172. padding: 20% 10%;
  173. display: flex;
  174. flex-direction: column;
  175. justify-content: space-between;
  176. }
  177. &:last-child{
  178. font-size: 24upx;
  179. text{
  180. color: #07c160;
  181. }
  182. }
  183. .logo{
  184. text-align: center;
  185. display: flex;
  186. justify-content: center;
  187. }
  188. .login-btns{
  189. padding: 60upx 0;
  190. .login-btn{
  191. margin: 30upx 0;
  192. }
  193. }
  194. }
  195. }
  196. </style>