authorization.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="content">
  3. <view class="logo">
  4. <img class="img" src="../../static/ceshi.jpg">
  5. </view>
  6. <button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  7. <img class="img" src="../../static/weixin.svg">
  8. <span>微信一键登录</span>
  9. </button>
  10. </view>
  11. </template>
  12. <script setup>
  13. // import {
  14. // ref
  15. // } from 'vue'
  16. // const code = ref('')
  17. // // 获取code方法
  18. // const login = () => {
  19. // uni.login({
  20. // provider: 'weixin',
  21. // success: res => {
  22. // code.value = res.code
  23. // console.log(code.value);
  24. // // getData()
  25. // }
  26. // });
  27. // }
  28. // // 通过code获取openId 和 session_key
  29. // const getData = () => {
  30. // console.log(123);
  31. // uni.request({
  32. // url: 'https://api.weixin.qq.com/sns/jscode2session',
  33. // method: 'GET',
  34. // data: {
  35. // appid: 'xxx', //你的小程序的APPID
  36. // secret: 'xxx', //你的小程序的secret,
  37. // js_code: code.value, //wx.login 登录成功后的code
  38. // grant_type: 'authorization_code',
  39. // },
  40. // success: (res) => {
  41. // // this.openId = cts.data.openid //openid 用户唯一标识
  42. // // this.unionid = cts.data.unionid //unionid 开放平台唯一标识 当公众号和小程序同时登录过才会有
  43. // // this.session_key = cts.data.session_key //session_key 会话密钥
  44. // // console.log(this.openId, this.session_key)
  45. // console.log(res)
  46. // }
  47. // })
  48. // }
  49. // const getPhoneNumber = (e) => {
  50. // console.log(e);
  51. // }
  52. // login()
  53. </script>
  54. <style lang="scss" scoped>
  55. .content {
  56. width: 100vw;
  57. height: 100vh;
  58. overflow: hidden;
  59. .logo {
  60. margin: 300rpx auto 0;
  61. width: 150rpx;
  62. height: 150rpx;
  63. border-radius: 20rpx;
  64. background-color: skyblue;
  65. .img {
  66. width: 100%;
  67. height: 100%;
  68. border-radius: 20rpx;
  69. }
  70. }
  71. .button {
  72. display: flex;
  73. justify-content: center;
  74. align-items: center;
  75. margin: 150rpx auto 0;
  76. width: 600rpx;
  77. height: 100rpx;
  78. font-size: 32rpx;
  79. color: #fff;
  80. border-radius: 50rpx;
  81. background-color: #1E7DFB;
  82. .img {
  83. margin-right: 20rpx;
  84. width: 50rpx;
  85. height: 50rpx;
  86. color: #fff;
  87. }
  88. }
  89. }
  90. </style>