h5WxLogin.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="content">
  3. <view class="force-login-wrap">
  4. <view class="force-login__content y-f">
  5. <view class="logo">
  6. <view class="logo-img">
  7. <image src="/static/logo.png"></image>
  8. </view>
  9. <view class="title">芳华未来</view>
  10. </view>
  11. <view class="login-notice">为了提供更优质的服务,请先登录</view>
  12. <view class="btns">
  13. <view class="author-btn" @click="loginByMp()">微信授权登录</view>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. const isWechat = () => {
  21. return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
  22. }
  23. import { loginByMp } from '@/api/user'
  24. export default {
  25. data() {
  26. return {
  27. code:null,
  28. }
  29. },
  30. onLoad(option) {
  31. this.getWechatCode();
  32. // setTimeout(()=>{
  33. // this.goToLanch();
  34. // },2000);
  35. },
  36. onUnload() {
  37. },
  38. mounted() {
  39. },
  40. methods: {
  41. loginByMp(){
  42. if(this.code==null){
  43. return;
  44. }
  45. uni.showLoading({
  46. title:"处理中..."
  47. });
  48. let that=this;
  49. var data={code:this.code}
  50. loginByMp(data).then(res => {
  51. uni.hideLoading();
  52. if(res.code==200){
  53. uni.setStorageSync('AppToken',res.token);
  54. uni.setStorageSync('userInfo',JSON.stringify(res.user));
  55. uni.$emit('refreshIM');
  56. that.goToLanch();
  57. // uni.switchTab({
  58. // url:"/pages/user/index"
  59. // });
  60. // uni.navigateBack({
  61. // animationType: 'pop-out',
  62. // animationDuration: 200
  63. // });
  64. }
  65. else{
  66. uni.showToast({title: res.msg,icon: 'none'});
  67. }
  68. },
  69. err => {
  70. }
  71. );
  72. },
  73. getWechatCode() {
  74. if (isWechat) {
  75. let appid = "wx7a3715e6f0d22c56"; //微信APPid
  76. let code = this.getUrlCode().code; //是否存在code
  77. let local = window.location.href;
  78. if (code == null || code === "") {
  79. //不存在就打开上面的地址进行授权
  80. window.location.href =
  81. "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
  82. appid +
  83. "&redirect_uri=" +
  84. encodeURIComponent(local) +
  85. "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
  86. } else {
  87. this.code = code;
  88. }
  89. }
  90. },
  91. getUrlCode(){
  92. // 截取url中的code方法
  93. var url = location.search;
  94. var theRequest = new Object();
  95. if (url.indexOf("?") != -1) {
  96. var str = url.substr(1);
  97. var strs = str.split("&");
  98. for (var i = 0; i < strs.length; i++) {
  99. theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
  100. }
  101. }
  102. console.log(theRequest);
  103. return theRequest;
  104. },
  105. goToLanch(){
  106. let beforLoginUrl=uni.getStorageSync('beforLoginPage');
  107. console.log("beforLoginUrl:"+beforLoginUrl);
  108. uni.reLaunch({
  109. url:beforLoginUrl
  110. });
  111. }
  112. },
  113. }
  114. </script>
  115. <style lang="scss">
  116. .container {
  117. flex: 1;
  118. display: flex;
  119. flex-direction: column;
  120. justify-content: flex-start;
  121. position: relative;
  122. }
  123. .force-login-wrap {
  124. width: 100%;
  125. height: 100%;
  126. overflow: hidden;
  127. z-index: 11111;
  128. top: 0;
  129. .force-login__content {
  130. position: absolute;
  131. left: 50%;
  132. top: 40%;
  133. transform: translate(-50%, -50%);
  134. .logo{
  135. display: flex;
  136. flex-direction: column;
  137. justify-content: center;
  138. align-items: center;
  139. .logo-img{
  140. border: 4upx solid #FFFFFF;
  141. box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
  142. border-radius: 50%;
  143. width: 80px;
  144. height: 80px;
  145. image{
  146. border-radius: 50%;
  147. width: 100%;
  148. height: 100%;
  149. overflow: hidden;
  150. }
  151. }
  152. .title{
  153. margin-top: 20rpx;
  154. font-size: 35rpx;
  155. font-family: PingFang SC;
  156. font-weight: bold;
  157. color: #000;
  158. margin-bottom: 30rpx;
  159. }
  160. }
  161. .login-notice {
  162. font-size: 28rpx;
  163. font-family: PingFang SC;
  164. font-weight: 400;
  165. color: #000;
  166. line-height: 44rpx;
  167. width: 500rpx;
  168. text-align: center;
  169. margin-bottom: 80rpx;
  170. }
  171. .btns{
  172. position: relative;
  173. width: 630rpx;
  174. height: 80rpx;
  175. .author-btn{
  176. display: flex;
  177. justify-content: center;
  178. align-items: center;
  179. z-index:100;
  180. position: absolute;
  181. width: 630rpx;
  182. height: 80rpx;
  183. background: linear-gradient(to right, #FF5C03 0%, #E2C99E 100%);
  184. background: -moz-linear-gradient(to right, #FF5C03 0%, #E2C99E 100%);
  185. // box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
  186. border-radius: 40rpx;
  187. font-size: 30rpx;
  188. font-family: PingFang SC;
  189. font-weight: 500;
  190. color: rgba(255, 255, 255, 1);
  191. }
  192. }
  193. }
  194. }
  195. </style>