优化微信网页登录
lemon橪
parent
58f33b05dd
commit
fe0d888da0
|
|
@ -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，但并不保证它绝对可靠。
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
},
|
||||
|
||||
/**点击验证码*/
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue