logion.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <view>
  3. <view v-if='!hasLogin'>
  4. <view style="text-align: center;margin: 100upx;font-size: 36upx;">欢迎回来</view>
  5. <view style="width: 50%;margin: 0 auto;">
  6. <button @click="wxlogion" type="primary" open-type='getUserInfo'>
  7. 授权登录
  8. </button>
  9. </view>
  10. </view>
  11. <view v-if='hasLogin&& !successlogion'>
  12. <view style="text-align: center;margin: 100upx;font-size: 36upx;">获取您手机号码权限</view>
  13. <view style="width: 50%;margin: 0 auto;">
  14. <button type="primary" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号登录</button>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import {
  21. mapMutations,mapState
  22. } from 'vuex'
  23. export default {
  24. props:{
  25. showdialog:{
  26. default: false,
  27. type: Boolean
  28. },
  29. ishow:{
  30. default: true,
  31. type: Boolean
  32. },
  33. },
  34. data() {
  35. return{
  36. show: false
  37. }
  38. },
  39. computed:{
  40. ...mapState([
  41. 'hasLogin', // 用户是否同意授权
  42. 'userInfo', // 同意授权用户头像
  43. 'successlogion', // 同意手机号授权 登录成功
  44. 'sessionId', // 登录成功的token
  45. 'getcode', // logion时候获取的code session_key oppen_id
  46. ]),
  47. },
  48. onLoad(){
  49. console.log(this.successlogion);
  50. },
  51. methods:{
  52. ...mapMutations(['login','showDialog', 'setOpenid', 'setcode','islogionsuccess']),
  53. // 授权用户信息头像
  54. wxlogion() {
  55. let that = this;
  56.     uni.getUserInfo({
  57.      success: (res) => {
  58. that.login(res.userInfo);
  59. that.showDialog(true); // 改变haslogion的值
  60. console.log(this.userInfo);
  61. that.$msg("授权成功");
  62. if(this.successlogion) {
  63. uni.navigateBack();
  64. }
  65.      },
  66.      fail(res) {
  67. that.showDialog(false);
  68. that.$msg("授权失败")
  69.      }
  70.     })
  71. },
  72. // 获取手机号码
  73. decryptPhoneNumber(e) {
  74. console.log(e);
  75. if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  76. console.log(e);
  77. } else {
  78. console.log('用户同意提供手机号');
  79. console.log(this.getcode);
  80. let encryptedData = e.detail.encryptedData;
  81. let iv = e.detail.iv;
  82. console.log(this.userInfo);
  83. // 调取注册账号
  84. this.request({
  85. url: '/v1/entry/mp_account',
  86. method:'POST',
  87. data: {
  88. code: this.getcode.code,
  89. encryptedData: encryptedData,
  90. iv: iv,
  91. name: this.userInfo.nickName,
  92. avatar: this.userInfo.avatarUrl
  93. },
  94. success: (res) => {
  95. let token = res.data.data.token;
  96. this.setOpenid(token);
  97. this.islogionsuccess(true);
  98. uni.navigateBack();
  99. }
  100. })
  101. }
  102. },
  103. }
  104. }
  105. </script>
  106. <style>
  107. </style>