login.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <view class="container">
  3. <img src="../../static/index/logo.png" />
  4. <view class="msg">靖安乡村民宿</view>
  5. <view class="btn" @click="handleLogin">授权登录</view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {}
  12. },
  13. methods: {
  14. // 授权登录按钮回调
  15. handleLogin() {
  16. // 获取code
  17. uni.login({
  18. //使用微信登录
  19. provider: 'weixin',
  20. success: (res) => {
  21. this.loginReq(res.code)
  22. }
  23. })
  24. },
  25. // 解密用户信息请求
  26. async loginReq(code) {
  27. const res = await this.$myRequest({
  28. url: '/mhotel/ampauthorizationUser.action',
  29. data: {
  30. code
  31. }
  32. })
  33. // console.log(res)
  34. if (res.code === 200) {
  35. uni.setStorageSync('openid', res.data.openid)
  36. uni.setStorageSync('userInfo', res.data)
  37. uni.showToast({
  38. title: '授权成功',
  39. icon: 'success',
  40. mask: true
  41. })
  42. uni.$emit('changeFlag', {
  43. data: true
  44. })
  45. setTimeout(() => {
  46. uni.navigateBack(1)
  47. }, 1500)
  48. }
  49. }
  50. }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. .container {
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. height: 100vh;
  59. background-color: #fff;
  60. img {
  61. margin-top: 116rpx;
  62. width: 138rpx;
  63. height: 138rpx;
  64. }
  65. .msg {
  66. margin-top: 32rpx;
  67. font-size: 32rpx;
  68. font-weight: bold;
  69. }
  70. .btn {
  71. position: absolute;
  72. // left: 20rpx;
  73. bottom: 74rpx;
  74. display: flex;
  75. justify-content: center;
  76. align-items: center;
  77. width: 710rpx;
  78. height: 96rpx;
  79. color: #fff;
  80. font-size: 32rpx;
  81. border-radius: 64rpx;
  82. background-color: #096562;
  83. }
  84. }
  85. </style>