logion.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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. that.$msg("授权成功");
  61. if(this.successlogion) {
  62. uni.navigateBack();
  63. }
  64.      },
  65.      fail(res) {
  66. that.showDialog(false);
  67. that.$msg("授权失败")
  68.      }
  69.     })
  70. },
  71. // 获取手机号码
  72. decryptPhoneNumber(e) {
  73. console.log(e);
  74. if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
  75. console.log(e);
  76. } else {
  77. console.log('用户同意提供手机号');
  78. console.log(this.getcode);
  79. let encryptedData = e.detail.encryptedData;
  80. let iv = e.detail.iv;
  81. console.log(this.userInfo);
  82. // 调取注册账号
  83. this.request({
  84. url: '/v1/entry/mp_account',
  85. method:'POST',
  86. data: {
  87. code: this.getcode.code,
  88. encryptedData: encryptedData,
  89. iv: iv,
  90. name: this.userInfo.nickName,
  91. avatar: this.userInfo.avatarUrl
  92. },
  93. success: (res) => {
  94. let token = res.data.data.token;
  95. this.setOpenid(token);
  96. this.islogionsuccess(true);
  97. uni.navigateBack();
  98. },
  99. fail: (res) => {
  100. this.islogionsuccess(false);
  101. this.setOpenid('');
  102. this.$msg("获取失败")
  103.      }
  104. })
  105. }
  106. },
  107. }
  108. }
  109. </script>
  110. <style>
  111. </style>