authorization.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="container login" :style="{paddingTop:CustomBar+'px'}">
  3. <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
  4. <view class="login-main">
  5. <image class="logo" src="https://static.caimei365.com/app/img/icon/login-logo@3x.png" mode=""></image>
  6. <text class="logo-text">生美/医美采购服务平台</text>
  7. </view>
  8. <view class="login-content">
  9. <text>您暂未授权采美采购小程序获取您的信息,将无法正常使用小程序的功能。如需正常使用,请点击“授权”按钮,并允许头像、昵称等信息的授权。</text>
  10. </view>
  11. <view class="login-form">
  12. <button class="login-btn use" type="primary" open-type="getUserInfo" size="small" @click="getUserProfile" lang="zh_CN">微信授权</button>
  13. <view class="login-btn back" @tap="undGetuserinfo">取消</view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. import {mapState,mapMutations } from 'vuex';
  19. import authorize from '@/common/config/authorize.js'
  20. import wxLogin from "@/common/config/wxLogin.js"
  21. export default{
  22. data() {
  23. return{
  24. nvabarData: { //顶部自定义导航
  25. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  26. showSearch: 0,
  27. title: '微信授权', // 导航栏 中间的标题
  28. haveBack:true,
  29. haveHome:false,
  30. textLeft:this.$store.state.isIphone,
  31. },
  32. CustomBar:this.CustomBar,// 顶部导航栏高度
  33. authorizeType:''
  34. }
  35. },
  36. onLoad(e) {
  37. this.authorizeType = e.type
  38. if(this.authorizeType == '4'){
  39. this.nvabarData.haveBack = false
  40. }
  41. },
  42. computed: {
  43. ...mapState(['hasLogin','userInfo'])
  44. },
  45. methods:{
  46. ...mapMutations(['wxLogin']),
  47. getUserProfile(){
  48. const self = this
  49. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
  50. wx.getUserProfile({
  51. desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  52. success(res) {
  53. console.log('新API',res)
  54. self.wxLogin(res.userInfo)
  55. uni.login({
  56. provider: 'weixin',
  57. scopes: 'auth_user',
  58. success(res) {
  59. self.WxGetUserInfo()
  60. },
  61. fail(err) {
  62. self.$util.msg(err, 2000)
  63. }
  64. })
  65. },
  66. fail() {
  67. self.$util.msg('授权失败', 2000)
  68. }
  69. })
  70. },
  71. Getuserinfo: function (e) {//微信授权(暂时弃用)
  72. if (e.detail.userInfo) {
  73. this.WxGetUserInfo()
  74. }else{
  75. this.$util.msg('授权失败',2000)
  76. }
  77. },
  78. undGetuserinfo(){
  79. this.hanldBackFn()
  80. },
  81. hanldNavigateBack(){
  82. this.hanldBackFn()
  83. },
  84. hanldBackFn(){
  85. switch(this.authorizeType){
  86. case '0':
  87. this.$api.switchTabTo('/pages/tabBar/home/index')
  88. break;
  89. default:
  90. uni.navigateBack({delta: 1})
  91. }
  92. },
  93. WxGetUserInfo(){
  94. let self = this
  95. wx.getUserInfo({
  96. success: res => {
  97. wxLogin.wxLoginAuthorize()
  98. switch(self.authorizeType){
  99. case '0':
  100. self.$api.switchTabTo('/pages/tabBar/home/index')
  101. break;
  102. case '1':
  103. self.$api.navigateTo('/pages/login/login')
  104. break;
  105. case '2':
  106. self.$api.navigateTo('/pages/login/register')
  107. break;
  108. case '3':
  109. self.$api.navigateTo('/pages/login/logincode')
  110. break;
  111. default:
  112. setTimeout(()=>{
  113. uni.navigateBack({delta: 1});
  114. },2000)
  115. }
  116. }
  117. })
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss">
  123. .login{
  124. width: 100%;
  125. height: auto;
  126. .model-warp.none{
  127. display: none;
  128. }
  129. .model-warp.show{
  130. display: block;
  131. }
  132. .login-main{
  133. width: 100%;
  134. display: flex;
  135. flex-direction: column;
  136. align-items: center;
  137. height: auto;
  138. padding:200rpx 0 0 0;
  139. .logo{
  140. width: 200rpx;
  141. height: 170rpx;
  142. display: block;
  143. }
  144. .logo-text{
  145. font-size: $font-size-40;
  146. line-height: 40rpx;
  147. color:$color-system;
  148. margin-top: 40rpx;
  149. }
  150. }
  151. .login-content{
  152. width: 580rpx;
  153. margin: 95rpx auto;
  154. line-height: 40rpx;
  155. font-size: $font-size-24;
  156. color: #666666;
  157. text-align: justify;
  158. }
  159. .login-form{
  160. width: 702rpx;
  161. height: auto;
  162. display: flex;
  163. flex-direction: column;
  164. align-items: center;
  165. margin: 0 auto;
  166. .login-btn{
  167. width: 630rpx;
  168. height: 80rpx;
  169. border-radius: 40rpx;
  170. font-size: $font-size-32;
  171. line-height: 80rpx;
  172. color: #FFFFFF;
  173. text-align: center;
  174. background: linear-gradient(135deg,rgba(4,190,2,1) 0%,rgba(4,183,2,1) 100%);
  175. display: flex;
  176. flex-direction: column;
  177. align-items: center;
  178. &.back{
  179. height: 76rpx;
  180. background: #FFFFFF;
  181. border: 1px solid #08A267;
  182. color: #08A267;
  183. margin-top: 30rpx;
  184. }
  185. }
  186. }
  187. }
  188. </style>