微信登陆不跳转
程
parent
6ee0abd150
commit
165df678b3
|
|
@ -12,143 +12,68 @@
|
|||
<!-- 手机号 -->
|
||||
<div v-show="!enableUserPwdBox">
|
||||
<div v-show="current == 0">
|
||||
<u-input
|
||||
:custom-style="inputStyle"
|
||||
:placeholder-style="placeholderStyle"
|
||||
placeholder="请输入手机号 (11位)"
|
||||
class="mobile"
|
||||
focus
|
||||
v-model="mobile"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
/>
|
||||
<div
|
||||
:class="!enableFetchCode ? 'disable' : 'fetch'"
|
||||
@click="fetchCode"
|
||||
class="btn"
|
||||
>
|
||||
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
|
||||
class="mobile" focus v-model="mobile" type="number" maxlength="11" />
|
||||
<div :class="!enableFetchCode ? 'disable' : 'fetch'" @click="fetchCode" class="btn">
|
||||
获取验证码
|
||||
</div>
|
||||
</div>
|
||||
<!-- 输入验证码 -->
|
||||
<div v-show="current == 1" class="box-code">
|
||||
<verifyCode
|
||||
type="bottom"
|
||||
@confirm="submit"
|
||||
boxActiveColor="#D8D8D8"
|
||||
v-model="code"
|
||||
isFocus
|
||||
boxNormalColor="#D8D8D8"
|
||||
cursorColor="#D8D8D8"
|
||||
/>
|
||||
<verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
|
||||
boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
|
||||
|
||||
<div class="fetch-btn">
|
||||
<u-verification-code
|
||||
change-text="验证码已发送（x）"
|
||||
end-text="重新获取验证码"
|
||||
unique-key="page-login"
|
||||
:seconds="seconds"
|
||||
@end="end"
|
||||
@start="start"
|
||||
ref="uCode"
|
||||
@change="codeChange"
|
||||
></u-verification-code>
|
||||
<u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" unique-key="page-login"
|
||||
:seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
|
||||
</u-verification-code>
|
||||
<span @tap="fetchCode" :style="{ color: codeColor }">
|
||||
{{ tips }}</span
|
||||
>
|
||||
{{ tips }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 帐号密码登录 -->
|
||||
<div v-show="enableUserPwdBox">
|
||||
<u-input
|
||||
:custom-style="inputStyle"
|
||||
:placeholder-style="placeholderStyle"
|
||||
placeholder="请输入用户名"
|
||||
class="mobile"
|
||||
focus
|
||||
v-model="userData.username"
|
||||
/>
|
||||
<u-input
|
||||
:custom-style="inputStyle"
|
||||
:placeholder-style="placeholderStyle"
|
||||
placeholder="请输入密码"
|
||||
class="mobile"
|
||||
focus
|
||||
v-model="userData.password"
|
||||
type="password"
|
||||
/>
|
||||
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入用户名"
|
||||
class="mobile" focus v-model="userData.username" />
|
||||
<u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入密码"
|
||||
class="mobile" focus v-model="userData.password" type="password" />
|
||||
|
||||
<div
|
||||
:class="!enableUserBtnColor ? 'disable' : 'fetch'"
|
||||
@click="passwordLogin"
|
||||
class="btn"
|
||||
>
|
||||
<div :class="!enableUserBtnColor ? 'disable' : 'fetch'" @click="passwordLogin" class="btn">
|
||||
帐号密码登录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" v-show="current != 1">
|
||||
<u-checkbox-group :icon-size="24" width="45rpx">
|
||||
<u-checkbox
|
||||
shape="circle"
|
||||
v-model="enablePrivacy"
|
||||
active-color="#FF5E00"
|
||||
></u-checkbox>
|
||||
<u-checkbox shape="circle" v-model="enablePrivacy" active-color="#FF5E00"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<div class="tips">
|
||||
未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span
|
||||
@click="navigateToPrivacy('privacy')"
|
||||
>《隐私协议》</span>
|
||||
未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('privacy')">《隐私协议》</span>
|
||||
<span @click="navigateToPrivacys('user')">
|
||||
《用户协议》
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="current != 1"
|
||||
class="user-password-tips"
|
||||
@click="enableUserPwdBox = !enableUserPwdBox"
|
||||
>
|
||||
<div v-if="current != 1" class="user-password-tips" @click="enableUserPwdBox = !enableUserPwdBox">
|
||||
{{ !enableUserPwdBox ? "帐号密码" : "手机号" }}登录
|
||||
</div>
|
||||
|
||||
<!-- 循环出当前可使用的第三方登录模式 -->
|
||||
<div class="flex login-list">
|
||||
<div
|
||||
v-if="item.code"
|
||||
:style="{ background: item.color }"
|
||||
class="login-item"
|
||||
v-for="(item, index) in loginList"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
v-if="item.title != 'APPLE'"
|
||||
color="#fff"
|
||||
size="42"
|
||||
:name="item.icon"
|
||||
@click="navigateLogin(item)"
|
||||
>
|
||||
<div v-if="item.code" :style="{ background: item.color }" class="login-item"
|
||||
v-for="(item, index) in loginList" :key="index">
|
||||
<u-icon v-if="item.title != 'APPLE'" color="#fff" size="42" :name="item.icon"
|
||||
@click="navigateLogin(item)">
|
||||
</u-icon>
|
||||
<u-image
|
||||
v-else
|
||||
src="/static/appleidButton@2x.png"
|
||||
:lazy-load="false"
|
||||
@click="navigateLogin(item)"
|
||||
width="80"
|
||||
height="80"
|
||||
/>
|
||||
<u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)"
|
||||
width="80" height="80" />
|
||||
</div>
|
||||
</div>
|
||||
<myVerification
|
||||
v-if="codeFlag"
|
||||
@send="verification"
|
||||
class="verification"
|
||||
ref="verification"
|
||||
business="LOGIN"
|
||||
/>
|
||||
<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification"
|
||||
business="LOGIN" />
|
||||
</div>
|
||||
<view v-else>
|
||||
<wechatH5Login />
|
||||
|
|
@ -157,21 +82,40 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { openIdLogin, loginCallback } from "@/api/connect.js";
|
||||
import api from "@/config/api.js";
|
||||
import { sendMobile, smsLogin, userLogin } from "@/api/login";
|
||||
import myVerification from "@/components/verification/verification.vue"; //验证码模块
|
||||
import uuid from "@/utils/uuid.modified.js"; // uuid
|
||||
import verifyCode from "@/components/verify-code/verify-code";
|
||||
import { getUserInfo } from "@/api/members";
|
||||
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import wechatH5Login from "./wechatH5Login.vue";
|
||||
import { webConnect } from "@/api/connect.js";
|
||||
import { md5 } from "@/utils/md5.js";
|
||||
import {
|
||||
openIdLogin,
|
||||
loginCallback
|
||||
} from "@/api/connect.js";
|
||||
import api from "@/config/api.js";
|
||||
import {
|
||||
sendMobile,
|
||||
smsLogin,
|
||||
userLogin
|
||||
} from "@/api/login";
|
||||
import myVerification from "@/components/verification/verification.vue"; //验证码模块
|
||||
import uuid from "@/utils/uuid.modified.js"; // uuid
|
||||
import verifyCode from "@/components/verify-code/verify-code";
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/api/members";
|
||||
import {
|
||||
whetherNavigate
|
||||
} from "@/utils/Foundation"; //登录跳转
|
||||
import storage from "@/utils/storage.js"; //缓存
|
||||
import wechatH5Login from "./wechatH5Login.vue";
|
||||
import {
|
||||
webConnect
|
||||
} from "@/api/connect.js";
|
||||
import {
|
||||
md5
|
||||
} from "@/utils/md5.js";
|
||||
|
||||
export default {
|
||||
components: { myVerification, verifyCode, wechatH5Login },
|
||||
export default {
|
||||
components: {
|
||||
myVerification,
|
||||
verifyCode,
|
||||
wechatH5Login
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -185,8 +129,7 @@ export default {
|
|||
codeColor: "#999", //按钮验证码颜色
|
||||
lightColor: this.$lightColor,
|
||||
seconds: 60, //默认验证码等待时间
|
||||
loginTitleWay: [
|
||||
{
|
||||
loginTitleWay: [{
|
||||
title: "欢迎登录",
|
||||
desc: "登录后更精彩，美好生活即将开始",
|
||||
},
|
||||
|
|
@ -201,7 +144,7 @@ export default {
|
|||
},
|
||||
showBack: false,
|
||||
enableFetchCode: false,
|
||||
enableUserBtnColor:false,
|
||||
enableUserBtnColor: false,
|
||||
enablePrivacy: false, //隐私政策
|
||||
mobile: "", //手机号
|
||||
code: "", //验证码
|
||||
|
|
@ -347,15 +290,15 @@ export default {
|
|||
current(val) {
|
||||
val ? (this.showBack = true) : (this.showBack = false);
|
||||
},
|
||||
userData:{
|
||||
handler(val){
|
||||
if(this.userData.username && this.userData.password) {
|
||||
userData: {
|
||||
handler(val) {
|
||||
if (this.userData.username && this.userData.password) {
|
||||
this.enableUserBtnColor = true;
|
||||
}else{
|
||||
} else {
|
||||
this.enableUserBtnColor = false;
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
deep: true,
|
||||
|
||||
},
|
||||
mobile: {
|
||||
|
|
@ -422,11 +365,11 @@ export default {
|
|||
storage.setUserInfo(user.data.result);
|
||||
storage.setHasLogin(true);
|
||||
});
|
||||
getCurrentPages().length > 1
|
||||
? uni.navigateBack({
|
||||
getCurrentPages().length > 1 ?
|
||||
uni.navigateBack({
|
||||
delta: getCurrentPages().length - 2,
|
||||
})
|
||||
: uni.switchTab({
|
||||
}) :
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
}
|
||||
|
|
@ -461,7 +404,7 @@ export default {
|
|||
// #ifdef MP-ALIPAY
|
||||
scopes: "auth_user", //支付宝小程序需设置授权类型
|
||||
// #endif
|
||||
success: function (res) {
|
||||
success: function(res) {
|
||||
uni.setStorageSync("type", item.code);
|
||||
//微信小程序意外的其它方式直接在storage中写入openid
|
||||
// #ifndef MP-WEIXIN
|
||||
|
|
@ -479,7 +422,7 @@ export default {
|
|||
//获取用户信息
|
||||
uni.getUserInfo({
|
||||
provider: item.appcode,
|
||||
success: function (infoRes) {
|
||||
success: function(infoRes) {
|
||||
//写入用户信息
|
||||
uni.setStorageSync("nickname", infoRes.userInfo.nickName);
|
||||
uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
|
||||
|
|
@ -536,7 +479,9 @@ export default {
|
|||
*/
|
||||
storage.setUserInfo(user.data.result);
|
||||
storage.setHasLogin(true);
|
||||
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
/**
|
||||
* 计算出当前router路径
|
||||
* 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
|
||||
|
|
@ -591,7 +536,10 @@ export default {
|
|||
/**
|
||||
* 执行登录
|
||||
*/
|
||||
smsLogin({ mobile: this.mobile, code: this.code }, this.clientType).then(
|
||||
smsLogin({
|
||||
mobile: this.mobile,
|
||||
code: this.code
|
||||
}, this.clientType).then(
|
||||
(res) => {
|
||||
this.getUserInfoMethods(res);
|
||||
}
|
||||
|
|
@ -644,9 +592,9 @@ export default {
|
|||
});
|
||||
console.log(val)
|
||||
},
|
||||
navigateToPrivacys(val){
|
||||
navigateToPrivacys(val) {
|
||||
uni.navigateTo({
|
||||
url:"/pages/mine/help/tips?type="+ val,
|
||||
url: "/pages/mine/help/tips?type=" + val,
|
||||
})
|
||||
},
|
||||
// 点击获取验证码
|
||||
|
|
@ -762,55 +710,65 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.wrapper {
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
.title {
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: calc(104rpx);
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
font-size: 56rpx;
|
||||
color: #333;
|
||||
}
|
||||
.box-code {
|
||||
}
|
||||
|
||||
.box-code {
|
||||
margin-top: 78rpx;
|
||||
}
|
||||
.desc,
|
||||
.desc-light {
|
||||
}
|
||||
|
||||
.desc,
|
||||
.desc-light {
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
color: #333333;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.desc {
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #333;
|
||||
}
|
||||
.desc-light {
|
||||
}
|
||||
|
||||
.desc-light {
|
||||
color: #999999;
|
||||
> span {
|
||||
|
||||
>span {
|
||||
color: #333;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.mobile {
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.disable {
|
||||
}
|
||||
|
||||
.disable {
|
||||
background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
|
||||
}
|
||||
.fetch {
|
||||
}
|
||||
|
||||
.fetch {
|
||||
background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
|
||||
}
|
||||
.btn {
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 100px;
|
||||
width: 590rpx;
|
||||
margin-top: 97rpx;
|
||||
|
|
@ -819,17 +777,20 @@ page {
|
|||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.tips {
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-top: 32rpx;
|
||||
width: 546rpx;
|
||||
> span {
|
||||
|
||||
>span {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
.fetch-btn {
|
||||
}
|
||||
|
||||
.fetch-btn {
|
||||
width: 370rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
|
@ -840,18 +801,18 @@ page {
|
|||
color: #999;
|
||||
|
||||
margin: 71rpx auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.login-list {
|
||||
.login-list {
|
||||
display: flex;
|
||||
width: 590rpx;
|
||||
position: absolute;
|
||||
top: 1200rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-item {
|
||||
.login-item {
|
||||
width: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
height: 80rpx;
|
||||
|
|
@ -860,11 +821,11 @@ page {
|
|||
align-items: center;
|
||||
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-password-tips {
|
||||
.user-password-tips {
|
||||
text-align: center;
|
||||
color: $main-color;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"appid": "wx98ebde1da5b340d4",
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.27.0",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"enhance": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmRelationList": [],
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
}
|
||||
},
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "lilishop-uniapp",
|
||||
"setting": {
|
||||
"compileHotReLoad": true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue