logion.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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. console.log(res.userInfo);
  59. that.login(res.userInfo);
  60. that.showDialog(true); // 改变haslogion的值
  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. // 调取注册账号
  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. },
  91. success: (res) => {
  92. let token = res.data.data.token;
  93. this.setOpenid(token);
  94. this.islogionsuccess(true);
  95. uni.navigateBack();
  96. }
  97. })
  98. }
  99. },
  100. }
  101. }
  102. </script>
  103. <style>
  104. </style>