优化微信网页登录

pages/cart/payment/payOrder.vue

@@ -260,7 +260,7 @@
 								 
 							},
 							fail: (e) => {
-								console.log(e);
+								console.log(this);
 								this.exception = e;
 								uni.showModal({
 									content: "支付失败,如果您已支付，请勿反复支付",
@@ -298,7 +298,7 @@
 								WeixinJSBridge.invoke(
 									"getBrandWCPayRequest",
 									response.result,
-									function(res) {
+									(res) => {
 										if (res.err_msg == "get_brand_wcpay_request:ok") {
 											// 使用以上方式判断前端返回,微信团队郑重提示：
 											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

pages/passport/codeLogin.vue

@@ -29,7 +29,6 @@ import storage from "@/utils/storage.js"; //缓存
 import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
 import myVerification from "@/components/verification/verification.vue"; //验证码模块
 import uuid from "@/utils/uuid.modified.js"; // uuid
-import api from "@/config/api.js";
 export default {
   components: {
     myVerification,
@@ -192,21 +191,8 @@ export default {
     },
     // 跳转到一键登录
     clickLogin() {
-      // #ifndef APP-PLUS
-      //判断是否微信浏览器
-      var ua = window.navigator.userAgent.toLowerCase();
-      if (ua.match(/MicroMessenger/i) == "micromessenger") {
-        let code = "WECHAT";
-        let buyer = api.buyer;
-        window.open(buyer + `/connect/login/web/` + code, "_self");
-      }
-      else{
       this.$emit("open", "click");
-      }
+      
-      // #endif
-      // #ifdef APP-PLUS
-      this.$emit("open", "click");
-      // #endif
     },
 
     /**点击验证码*/

pages/passport/login.vue

@@ -1,5 +1,7 @@
 <template>
-  <view v-if="mpWechatLogin">
+  <view>
+    <!--  -->
+    <view v-if="codeLogin">
       <!-- 背景 -->
       <view class="login-ball bg-linear-gradient small"></view>
 
@@ -23,6 +25,10 @@
         同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
       </div>
     </view>
+    <view v-if="wechatLogin">
+      <wechatH5Login />
+    </view>
+  </view>
 </template>
 <script>
 import codeLogin from "./codeLogin";
@@ -32,25 +38,9 @@ import storage from "@/utils/storage.js";
 import { loginCallback } from "@/api/connect.js";
 import { webConnect } from "@/api/connect.js";
 import config from "@/config/config";
+import wechatH5Login from "./wechatH5Login.vue";
 export default {
   onShow() {
-    // #ifdef MP-WEIXIN
-    this.mpWechatLogin = false;
-    if (this.$options.filters.isLogin("auth")) {
-      getCurrentPages().length > 1
-        ? uni.navigateBack({
-            delta: getCurrentPages().length - 2,
-          })
-        : uni.switchTab({
-            url: "/pages/tabbar/home/index",
-          });
-    } else {
-      uni.navigateTo({
-        url: "/pages/passport/wechatMPLogin",
-      });
-    }
-    // #endif
-
     //#ifdef H5
     let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
     if (isWXBrowser) {
@@ -67,7 +57,8 @@ export default {
     return {
       config,
       lightColor: this.$lightColor,
-      mpWechatLogin: true, //是否加载微信登录
+      wechatLogin: false, //是否加载微信公众号登录
+      codeLogin: false, //是否加载正常验证码登录
       value: true, //隐私政策
       loginData: {
         code: true, //验证码登录
@@ -80,6 +71,23 @@ export default {
   components: {
     codeLogin,
     onClickLogin,
+    wechatH5Login,
+  },
+  mounted() {
+    // #ifndef APP-PLUS
+    //判断是否微信浏览器
+    var ua = window.navigator.userAgent.toLowerCase();
+    if (ua.match(/MicroMessenger/i) == "micromessenger") {
+      this.wechatLogin = true;
+      return;
+  
+    } else {
+      this.codeLogin = true;
+    }
+    // #endif
+    // #ifdef APP-PLUS
+    this.codeLogin = true;
+    // #endif
   },
 
   onLoad(options) {

pages/passport/wechatH5Login.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="container">
+    <u-navbar :custom-back="back" title="公众网页登录"></u-navbar>
+    <view class="wx-auth-container">
+      <div class="box">
+        <view class="logo-info">
+          <text class="title">欢迎进入{{ projectName }}</text>
+        </view>
+        <view class="small-tips">
+          <view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
+          <view>您的公开信息（昵称、头像）</view>
+        </view>
+        <view class="btns">
+          <button @click="getUserProfile()" class="btn-auth">使用微信授权</button>
+          <div @click="backToHome" class="btn-callback">暂不登录</div>
+        </view>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script>
+import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
+import config from "@/config/config";
+import api from "@/config/api.js";
+export default {
+  data() {
+    return {
+      // 授权信息展示，商城名称
+      projectName: config.name,
+    };
+  },
+
+  //微信小程序进入页面，先获取code，否则几率出现code和后续交互数据不对应情况
+  mounted() {
+    // 小程序默认分享
+    uni.showShareMenu({ withShareTicket: true });
+  },
+  methods: {
+    back() {
+      whetherNavigate();
+    },
+    getUserProfile() {
+      let code = "WECHAT";
+      let buyer = api.buyer;
+      window.open(buyer + `/connect/login/web/` + code, "_self");
+    },
+    backToHome() {
+      uni.switchTab({
+        url: `/pages/tabbar/home/index`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+.wx-auth-container {
+  width: 100%;
+  
+  margin-top: 20%;
+}
+
+.logo-info {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 20rpx;
+  flex-direction: column;
+  font-weight: bold;
+}
+
+image {
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  -webkit-transform: scale(2.5);
+  transform: scale(2.5);
+}
+
+text.title,
+text.shop {
+  display: inline-block;
+  font-size: 60rpx;
+  color: #333;
+}
+
+.box {
+  margin: 0 32rpx;
+}
+
+/* 文字提示*/
+.small-tips {
+  width: 94%;
+  padding: 20rpx;
+  font-size: 24rpx;
+  margin: 0 0 20rpx;
+  color: #999;
+}
+
+.btn-auth {
+  width: 92%;
+  background: $light-color;
+  color: #fff;
+  margin: 0 auto 40rpx;
+  border-radius: 100px;
+  animation: mymove 5s infinite;
+  -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
+  animation-direction: alternate; /*轮流反向播放动画。*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  /* Safari 和 Chrome */
+  -webkit-animation: mymove 5s infinite;
+  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
+  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
+}
+.btn-callback {
+  text-align: center;
+  font-size: 30rpx;
+  background: #ededed;
+  height: 90rpx;
+  line-height: 90rpx;
+  border-radius: 100px;
+  width: 92%;
+  margin: 0 auto;
+}
+
+.btns {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+}
+
+@keyframes mymove {
+  0% {
+    transform: scale(1); /*开始为原始大小*/
+  }
+  25% {
+    transform: scale(1.1); /*放大1.1倍*/
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+}
+</style>