login.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="login">
  3. <app-math-card v-for="(item,index) in mathLists"
  4. :key="index"
  5. :cover-image="item.coverImage"
  6. :title="item.title"
  7. :index="index"
  8. :custom-style="{marginLeft:index % 2 === 1 ? '20rpx' : 0}"
  9. @open="handleOpen"
  10. >
  11. </app-math-card>
  12. <u-popup v-model="modal.show" mode="bottom" :mask-close-able="false" border-radius="15">
  13. <view class="popup-content">
  14. <view class="title">需要获取您的用户信息</view>
  15. <view class="btn-popup main-between">
  16. <button @click="handleLogin" class="btn main-center cross-center">确定</button>
  17. </view>
  18. </view>
  19. </u-popup>
  20. </view>
  21. </template>
  22. <script>
  23. import appMathCard from "@/components/index/app-math-card"
  24. import mathLists from "@/core/math-lists.js"
  25. export default {
  26. components:{
  27. appMathCard
  28. },
  29. data() {
  30. return {
  31. mathLists: mathLists,
  32. redirect: '',
  33. code: '',
  34. modal: {
  35. show: false
  36. },
  37. }
  38. },
  39. methods: {
  40. login(){
  41. console.log('-->data',this.vuex_user_secne)
  42. return
  43. let _this = this;
  44. uni.showLoading({title: '登录中...'})
  45. uni.login({
  46. provider: 'weixin',
  47. success: res => {
  48. _this.code = res.code;
  49. uni.getUserInfo({
  50. provider: 'weixin',
  51. success: data => {
  52. let params = {
  53. code: res.code,
  54. encryptedData: data.encryptedData,
  55. iv:data.iv,
  56. signature:data.signature
  57. }
  58. _this.$u.api.login(params).then(loginRes => {
  59. uni.hideLoading();
  60. _this.$u.vuex(_this.$const.USER_TOKEN,loginRes.token)
  61. _this.$u.vuex(_this.$const.USER_DATA,loginRes.user)
  62. if(loginRes.user.nickname === '微信用户'){
  63. _this.modal.show = true;
  64. }else{
  65. _this.handleRedirect();
  66. }
  67. })
  68. },
  69. fail: error => {
  70. _this.$u.toast('获取用户信息失败')
  71. }
  72. });
  73. }
  74. });
  75. },
  76. handleLogin(){
  77. let _this = this;
  78. uni.getUserProfile({
  79. desc: '获取用户信息',
  80. success: data => {
  81. console.log('-->data',data)
  82. let params = {
  83. encryptedData: data.encryptedData,
  84. iv: data.iv,
  85. }
  86. _this.$u.api.userUpdate(params).then(res => {
  87. _this.$u.vuex(_this.$const.USER_DATA, res)
  88. _this.handleRedirect();
  89. })
  90. },
  91. fail: err => {
  92. _this.$u.toast('获取用户信息失败')
  93. uni.reLaunch({
  94. url: this.redirect
  95. });
  96. }
  97. });
  98. },
  99. handleRedirect(){
  100. console.log('-->data',this.redirect)
  101. uni.reLaunch({
  102. url: this.redirect
  103. });
  104. },
  105. handleBind(){
  106. this.$u.api.userBind({scene:this.scene}).then(res => {
  107. })
  108. }
  109. },
  110. onLoad(options) {
  111. if(options.redirect){
  112. let redirect = options.redirect;
  113. delete options.redirect;
  114. let arr = [];
  115. for (const key in options) {
  116. arr.push(`${key}=${options[key]}`)
  117. }
  118. this.redirect = `/${redirect}?${arr.join("&")}`
  119. }else{
  120. this.redirect = '/pages/index/index'
  121. }
  122. if(!this.vuex_user_token){
  123. this.login()
  124. }
  125. }
  126. }
  127. </script>
  128. <style lang="scss" scoped>
  129. .login{
  130. position: relative;
  131. height: 100vh;
  132. overflow: hidden;
  133. .bg{
  134. position: absolute;
  135. top: 0;
  136. left: 0;
  137. width: 100%;
  138. height: 100vh;
  139. }
  140. }
  141. .popup-content{
  142. height: 280rpx;
  143. position: relative;
  144. .title{
  145. padding: 20rpx 30rpx;
  146. font-weight: 600;
  147. font-size: 42rpx;
  148. }
  149. .btn-popup{
  150. position: absolute;
  151. bottom: 0;
  152. width: 100%;
  153. }
  154. .btn{
  155. background: $main-color;
  156. color: #fff;
  157. border-radius: 0;
  158. font-size: 28rpx;
  159. height: 100rpx;
  160. flex: 1;
  161. &.cancel{
  162. background: #f5f5f5;
  163. color: #666;
  164. }
  165. &:after{
  166. content: unset;
  167. }
  168. }
  169. }
  170. </style>