login.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <view class="content">
  3. <view class="content-logo">
  4. <view class="logo-cont">
  5. <u-image src="/static/login_icon_logo.png" width="160" height="160" class="logo"></u-image>
  6. </view>
  7. <view class="login-btns">
  8. <u-button shape="circle" :custom-style="wxButton" class="login-btn" type="success" :hair-line="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  9. 微信授权登录
  10. </u-button>
  11. </view>
  12. <view class="nologin">
  13. <u-button shape="circle" size="mini" plain lass="login-btn" @click="cansel" type="info">
  14. 暂不登录
  15. </u-button>
  16. </view>
  17. </view>
  18. <view @click="toYs" class="yszc">首次登录会自动创建账号且即代表同意<text class="yszc-text">《乐色超人服务协议》</text>及<text class="yszc-text">《隐私保护政策》</text></view>
  19. </view>
  20. </template>
  21. <script>
  22. import {login} from "@/api/login"
  23. export default {
  24. components: {},
  25. data() {
  26. return {
  27. path: '/pages/index/index',
  28. lanuch: false,
  29. code: '',
  30. wxButton: {
  31. background: '#0DC55F'
  32. },
  33. popupBox:{
  34. padding:'20'
  35. },
  36. cancelBtn:{
  37. background:'#eee',
  38. color:"#07C160",
  39. width:'100px',
  40. height:'35px',
  41. border:0
  42. },
  43. submitBtn:{
  44. width:'100px',
  45. height:'35px'
  46. }
  47. }
  48. },
  49. onLoad(option) {
  50. console.log(option,'==============',option.pageType)
  51. if(option && option.pageType=='order'){
  52. this.path='/pages/index/order'
  53. }
  54. // 开启分享
  55. uni.showShareMenu({
  56. withShareTicket: true,
  57. menus: ['shareAppMessage', 'shareTimeline']
  58. })
  59. // 为解决首次登录异常问题 进入页面先调微信登录获取code
  60. this.wxLogin()
  61. const {
  62. path,
  63. lanuch
  64. } = option;
  65. this.lanuch = (lanuch + '') === 'true';
  66. if (path) {
  67. this.path = decodeURIComponent(path);
  68. }
  69. },
  70. methods: {
  71. cansel(){
  72. this.$store.state.vuex_noLogin = true
  73. uni.reLaunch({
  74. url: '/pages/index/index'
  75. })
  76. },
  77. toYs(){
  78. uni.navigateTo({
  79. url: '/pages/agreement/agreement'
  80. })
  81. },
  82. getPhoneNumber(e) {
  83. let _this = this
  84. uni.showLoading({
  85. mask: true,
  86. title: '加载中'
  87. });
  88. if (!this.code) {
  89. this.wxLogin()
  90. }
  91. console.log(this.code, e)
  92. if (e.target.errMsg === 'getPhoneNumber:ok') {
  93. setTimeout(()=>{
  94. const params={
  95. code: _this.code,
  96. encryptedData: e.target.encryptedData,
  97. iv: e.target.iv,
  98. }
  99. login(params).then(res => {
  100. uni.hideLoading();
  101. _this.code = ''
  102. console.log(res,_this.path, 'login data')
  103. if (res.status == '200') {
  104. getApp().globalData.token = res.data
  105. _this.$u.vuex('vuex_token',res.data)
  106. console.log(getApp().globalData.token,'---------getApp().globalData.token','------登录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. }
  147. </script>
  148. <style lang="scss">
  149. .content{
  150. width: 100%;
  151. height: 100vh;
  152. padding:0 130upx;
  153. margin: 0 auto;
  154. background: #fff;
  155. display: flex;
  156. flex-direction: column;
  157. .content-logo{
  158. flex: 1;
  159. .logo-cont{
  160. display: flex;
  161. flex-direction: column;
  162. align-items: center;
  163. .logo{
  164. display: inline-block;
  165. margin:240upx 256upx 120upx;
  166. }
  167. }
  168. .nologin{
  169. text-align: center;
  170. margin-top: 70upx;
  171. .login-btn{
  172. display: block;
  173. height: 80upx;
  174. }
  175. }
  176. }
  177. .yszc{
  178. font-size: 24upx;
  179. text-align: center;
  180. margin-bottom: 40upx;
  181. .yszc-text{
  182. color:#1995FF;
  183. }
  184. }
  185. }
  186. </style>