Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

master
paulGao 2022-09-20 19:08:16 +08:00
commit a11452a430
3 changed files with 277 additions and 103 deletions

View File

@ -92,3 +92,20 @@ export function resetPassword (params) {
params params
}); });
} }
export function getSCLoginCode(params) {
return request({
url: `/buyer/passport/member/pc_session`,
method: Method.POST,
needToken: false,
params
});
}
export function sCLogin(token,params) {
return request({
url: `/buyer/passport/member/session_login/`+token,
method: Method.POST,
needToken: false,
params
});
}

View File

@ -21,11 +21,47 @@
<div class="form-box" @click='$refs.verify.show = false'> <div class="form-box" @click='$refs.verify.show = false'>
<div class="account-number"> <div class="account-number">
<div class="tab-switch"> <div class="tab-switch">
<span>{{type?'账号登录':'验证码登录'}}</span> <span>{{ type ? '账号登录' : '验证码登录' }}</span>
<span @click="type = !type">{{type?'验证码登录':'账号登录'}}</span> <span @click="type = !type,scannerCodeLoginFLag=false">{{ type ? '验证码登录' : '账号登录' }}</span>
</div> </div>
<div @click="$router.push('signUp')"></div> <!---->
<div @click="scannerCodeLoginFLag=!scannerCodeLoginFLag">{{!scannerCodeLoginFLag ? '' : ''}}</div>
</div> </div>
<!--扫码登录-->
<div v-show="scannerCodeLoginFLag">
<div class="qr-container">
<vue-qr
:text="qrCode"
:margin="0"
colorDark="#000"
colorLight="#fff"
:size="150"
></vue-qr>
</div>
<div class="drag-area">
<!-- 等待扫码-->
<div v-if="scannerCodeLoginStatus === 0" class="pending-scan">
<p>打开手机App/小程序扫码登录</p>
</div>
<!-- 已经扫码-->
<div v-else-if="scannerCodeLoginStatus === 1" class="scanned">
<p>扫码成功等待确认</p>
</div>
<!-- 存在session等待发送给客户端验证-->
<div v-if="scannerCodeLoginStatus === 2" class="scanned">
<p>登录成功正在页面跳转</p>
</div>
<!-- 已经发送登录请求-->
<div v-else-if="scannerCodeLoginStatus === 3" class="quick-logining">
<p>取消登录</p>
</div>
</div>
</div>
<div>
<div v-show="!scannerCodeLoginFLag">
<!-- 账号密码登录 --> <!-- 账号密码登录 -->
<Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true" <Form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
@click.self='$refs.verify.show = false'> @click.self='$refs.verify.show = false'>
@ -36,7 +72,7 @@
</FormItem> </FormItem>
<FormItem prop="password"> <FormItem prop="password">
<i-input type="password" v-model="formData.password" clearable placeholder="密码"> <i-input type="password" v-model="formData.password" clearable placeholder="密码">
<Icon type="md-lock" slot="prepend"> </Icon> <Icon type="md-lock" slot="prepend"></Icon>
</i-input> </i-input>
</FormItem> </FormItem>
<FormItem> <FormItem>
@ -53,21 +89,21 @@
</FormItem> </FormItem>
<FormItem prop="code"> <FormItem prop="code">
<i-input type="text" v-model="formSms.code" placeholder="手机验证码"> <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
<Icon type="ios-text-outline" style="font-weight: bold" slot="prepend" /> <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend"/>
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button> <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
</i-input> </i-input>
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button @click.stop="verifyBtnClick" long <Button @click.stop="verifyBtnClick" long
:type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button> :type="verifyStatus?'success':'default'">{{ verifyStatus ? '验证通过' : '点击完成安全验证' }}
</Button>
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="error" @click="handleSubmit('formSms')" long>登录</Button> <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
</FormItem> </FormItem>
</Form> </Form>
<div class="regist">
<span @click="$router.push('forgetPassword')"></span>
</div> </div>
<div class="other">
<div class="other-login"> <div class="other-login">
<svg t="1631154795933" class="icon" @click="handleWebLogin('QQ')" viewBox="0 0 1024 1024" version="1.1" <svg t="1631154795933" class="icon" @click="handleWebLogin('QQ')" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4969" width="32" height="32"> xmlns="http://www.w3.org/2000/svg" p-id="4969" width="32" height="32">
@ -75,15 +111,23 @@
d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
p-id="4970" fill="#1296db"></path> p-id="4970" fill="#1296db"></path>
</svg> </svg>
<svg t="1631154766336" class="icon" @click="handleWebLogin('WECHAT_PC')" viewBox="0 0 1024 1024" version="1.1" <svg t="1631154766336" class="icon" @click="handleWebLogin('WECHAT_PC')" viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3844" width="32" height="32"> xmlns="http://www.w3.org/2000/svg" p-id="3844" width="32" height="32">
<path <path
d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z" d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
fill="#09BB07" p-id="3845"></path> fill="#09BB07" p-id="3845"></path>
</svg> </svg>
</div>
<div class="register">
<span style="color:red" @click="$router.push('signUp')"></span>
<span @click="$router.push('forgetPassword')"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 拼图验证码 --> <!-- 拼图验证码 -->
<verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify> <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
</div> </div>
@ -108,18 +152,26 @@ import * as RegExp from "@/plugins/RegExp.js";
import { md5 } from "@/plugins/md5.js"; import { md5 } from "@/plugins/md5.js";
import * as apiLogin from "@/api/login.js"; import * as apiLogin from "@/api/login.js";
import { sendSms } from "@/api/common.js"; import { sendSms } from "@/api/common.js";
import { webLogin, loginCallback } from "@/api/login.js"; import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js";
import storage from "@/plugins/storage.js"; import storage from "@/plugins/storage.js";
import verify from "@/components/verify"; import verify from "@/components/verify";
import vueQr from "vue-qr";
export default { export default {
name: "Login", name: "Login",
components: { components: {
verify, verify,
vueQr
}, },
data() { data() {
return { return {
config:require('@/config'), qrCode: '',
qrSessionToken:'',
//
scannerCodeLoginFLag: false,
scannerCodeLoginStatus: 0,
qrCodeTimer:null,
config: require('@/config'),
type: true, // true false type: true, // true false
formData: { formData: {
// //
@ -134,19 +186,19 @@ export default {
verifyStatus: false, // verifyStatus: false, //
ruleInline: { ruleInline: {
// //
username: [{ required: true, message: "请输入用户名" }], username: [{required: true, message: "请输入用户名"}],
password: [ password: [
{ required: true, message: "请输入密码" }, {required: true, message: "请输入密码"},
{ type: "string", min: 6, message: "密码不能少于6位" }, {type: "string", min: 6, message: "密码不能少于6位"},
], ],
mobile: [ mobile: [
{ required: true, message: "请输入手机号码" }, {required: true, message: "请输入手机号码"},
{ {
pattern: RegExp.mobile, pattern: RegExp.mobile,
message: "请输入正确的手机号", message: "请输入正确的手机号",
}, },
], ],
code: [{ required: true, message: "请输入手机验证码" }], code: [{required: true, message: "请输入手机验证码"}],
}, },
codeMsg: "发送验证码", // codeMsg: "发送验证码", //
interval: null, // interval: null, //
@ -154,7 +206,14 @@ export default {
year: new Date().getFullYear(), year: new Date().getFullYear(),
}; };
}, },
watch:{
scannerCodeLoginFLag(val){
!val ? this.clearInterval() : ''
}
},
methods: { methods: {
// //
handleSubmit(name) { handleSubmit(name) {
this.$refs[name].validate((valid) => { this.$refs[name].validate((valid) => {
@ -241,24 +300,7 @@ export default {
.login(data) .login(data)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
this.$Message.success("登录成功"); this.loginSuccess(res.result.accessToken,res.result.refreshToken);
storage.setItem("accessToken", res.result.accessToken);
storage.setItem("refreshToken", res.result.refreshToken);
apiLogin.getMemberMsg().then((res) => {
this.$Spin.hide();
if (res.success) {
storage.setItem("userInfo", res.result);
let query = this.$route.query;
if (query.rePath) {
this.$router.push({
path: query.rePath,
query: JSON.parse(query.query),
});
} else {
this.$router.push("/");
}
}
});
} else { } else {
this.$Spin.hide(); this.$Spin.hide();
this.$Message.error(res.message); this.$Message.error(res.message);
@ -282,17 +324,12 @@ export default {
// //
webLogin(type); webLogin(type);
}, },
}, loginSuccess(accessToken,refreshToken){
mounted() { this.$Message.success("登录成功");
let uuid = this.$route.query.state; storage.setItem("accessToken", accessToken);
if (uuid) { storage.setItem("refreshToken", refreshToken);
storage.setItem("uuid", uuid);
loginCallback(uuid).then((res) => {
if (res.success) {
const result = res.result;
storage.setItem("accessToken", result.accessToken);
storage.setItem("refreshToken", result.refreshToken);
apiLogin.getMemberMsg().then((res) => { apiLogin.getMemberMsg().then((res) => {
this.$Spin.hide();
if (res.success) { if (res.success) {
storage.setItem("userInfo", res.result); storage.setItem("userInfo", res.result);
let query = this.$route.query; let query = this.$route.query;
@ -306,11 +343,90 @@ export default {
} }
} }
}); });
},
async createPCLoginSession() {
getSCLoginCode({}).then(response=>{
this.clearQRLoginInfo();
if (response.code == 200) {
let session = response.result;
this.qrSessionToken = session.token;
if (session.status === 0) {
this.qrCode = session.token;
this.refreshQrCode();
}
this.qrLogin();
}
});
},
async refreshQrCode() {
if (!this.qrCodeTimer) {
this.qrCodeTimer = setInterval(() => {
this.createPCLoginSession();
}, 21 * 1000);
}
},
clearQRLoginInfo(){
this.scannerCodeLoginStatus=0;
this.qrSessionToken='';
if (this.qrCodeTimer) {
clearInterval(this.qrCodeTimer)
}
this.qrCodeTimer= null;
},
async qrLogin() {
if(!this.qrSessionToken) return;
sCLogin(this.qrSessionToken,{beforeSessionStatus:this.scannerCodeLoginStatus}).then(response=>{
if (response.success) {
this.scannerCodeLoginStatus = response.result.status;
switch (response.result.status) {
case 0:
case 1:
this.qrLogin();break;
case 2:
this.loginSuccess(response.result.token.accessToken,response.result.token.refreshToken);
break;
case 3:
this.createPCLoginSession();
break;
default:
this.clearQRLoginInfo();
break
}
} else{
this.clearQRLoginInfo();
}
});
},
},
destroyed() {
this.clearQRLoginInfo();
},
mounted() {
let uuid = this.$route.query.state;
if (uuid) {
storage.setItem("uuid", uuid);
loginCallback(uuid).then((res) => {
if (res.success) {
this.loginSuccess(result.accessToken,result.refreshToken);
} }
}); });
} }
}, },
watch: { watch: {
scannerCodeLoginFLag(v){
if(v){
this.createPCLoginSession();
console.log("二维码登录");
}else{
console.log("取消二维码登录");
this.clearQRLoginInfo();
}
},
type(v) { type(v) {
if (v) { if (v) {
this.$refs.formInline.resetFields(); this.$refs.formInline.resetFields();
@ -327,10 +443,22 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.drag-area{
margin: 10px 0;
}
.login { .login {
height: 100%; height: 100%;
background-color: #f0f2f5; background-color: #f0f2f5;
} }
.other{
display: flex;
align-items: center;
justify-content: space-between;
}
.qr-container{
text-align: center;
margin: 20px 0;
}
.top-content { .top-content {
width: 100%; width: 100%;
height: 80px; height: 80px;
@ -347,19 +475,35 @@ export default {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
width: 150px; width: 150px;
cursor: pointer; cursor: pointer;
} }
div { div {
font-size: 20px; font-size: 20px;
margin-top: 10px; margin-top: 10px;
} }
} }
} }
.pending-scan{
text-align: center;
color:black;
}
.scanned{
text-align: center;
color:green;
}
.quick-logining{
text-align: center;
color:red;
}
.login-carousel { .login-carousel {
width: 100%; width: 100%;
height: 550px; height: 550px;
.demo-carousel { .demo-carousel {
height: 550px; height: 550px;
width: inherit; width: inherit;
@ -382,15 +526,18 @@ export default {
right: 15%; right: 15%;
padding: 20px; padding: 20px;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
.account-number { .account-number {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
font-weight: bold; font-weight: bold;
> div:nth-child(2) { > div:nth-child(2) {
color: $theme_color; color: $theme_color;
cursor: pointer; cursor: pointer;
} }
.tab-switch { .tab-switch {
height: 40px; height: 40px;
font-size: 14px; font-size: 14px;
@ -404,6 +551,7 @@ export default {
span:nth-child(2) { span:nth-child(2) {
cursor: pointer; cursor: pointer;
padding-left: 10px; padding-left: 10px;
&:hover { &:hover {
color: $theme_color; color: $theme_color;
} }
@ -420,7 +568,7 @@ export default {
} }
.other-login { .other-login {
margin: 0 auto;
> svg { > svg {
cursor: pointer; cursor: pointer;
width: 24px; width: 24px;
@ -428,18 +576,22 @@ export default {
height: 24px; height: 24px;
} }
} }
.regist {
.register {
display: flex; display: flex;
justify-content: flex-end;
margin-top: -10px; margin-top: -10px;
span { span {
margin-left: 10px; margin-left: 10px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: $theme_color; color: $theme_color;
} }
} }
} }
.foot { .foot {
position: fixed; position: fixed;
bottom: 4vh; bottom: 4vh;
@ -447,18 +599,22 @@ export default {
left: calc(50% - 184px); left: calc(50% - 184px);
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
font-size: 14px; font-size: 14px;
.help { .help {
margin: 0 auto; margin: 0 auto;
margin-bottom: 1vh; margin-bottom: 1vh;
width: 60%; width: 60%;
.item { .item {
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
:hover { :hover {
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
} }
} }
} }
.icon-hover { .icon-hover {
cursor: pointer; cursor: pointer;
} }

View File

@ -244,6 +244,7 @@
<Modal v-model="qrcodeShow" title="分销商品" width="800"> <Modal v-model="qrcodeShow" title="分销商品" width="800">
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert> <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
<div style="width: 200px; height: 200px; border: 1px solid #eee"> <div style="width: 200px; height: 200px; border: 1px solid #eee">
{{qrcode}}{{qrcodeData}}
<vue-qr <vue-qr
:text="qrcode" :text="qrcode"
:callback="qrcodeData" :callback="qrcodeData"