|
|
|
<template>
|
|
|
|
<view class="container">
|
|
|
|
<!-- 背景图 -->
|
|
|
|
<view class="x-c"><image class="logo-bg" src="http://shopro.7wpp.com/imgs/logo_bg.png" mode=""></image></view>
|
|
|
|
<view class="x-c">
|
|
|
|
<image class="logo-bg" src="http://shopro.7wpp.com/imgs/logo_bg.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
<!-- titleview -->
|
|
|
|
<view class="head-box"><cu-custom :isBack="true"></cu-custom></view>
|
|
|
|
<view class="head-box">
|
|
|
|
<cu-custom :isBack="true"></cu-custom>
|
|
|
|
</view>
|
|
|
|
<view class="wrapper">
|
|
|
|
<!-- logo -->
|
|
|
|
<view class="x-c"><image class="logo" :src="sysInfo.logo" mode="widthFix"></image></view>
|
|
|
|
<!-- 登录tab -->
|
|
|
|
<view class="tab-box x-f">
|
|
|
|
<view class="tab-item x-c" @tap="onLoginWay(0)">
|
|
|
|
<text class="tab-title">手机登录</text>
|
|
|
|
<view class="line-box" v-show="loginWay === 0"><text class="triangle"></text></view>
|
|
|
|
</view>
|
|
|
|
<view class="tab-item x-c" @tap="onLoginWay(1)">
|
|
|
|
<text class="tab-title">密码登录</text>
|
|
|
|
<view class="line-box" password v-show="loginWay === 1"><text class="triangle"></text></view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 表单 -->
|
|
|
|
<view class="login-box y-f" v-show="loginWay === 0">
|
|
|
|
<view class="input-item x-c"><input class="inp" v-model="userPhone" type="number" placeholder="请输入手机号" placeholder-class="pl" /></view>
|
|
|
|
<view class="input-item x-c">
|
|
|
|
<input class="inp" v-model="code.value" type="number" placeholder="请输入验证码" placeholder-class="pl" />
|
|
|
|
<button class="cu-btn code-btn" :disabled="code.status" @tap="getCode">{{ code.text }}</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="login-box y-f" v-show="loginWay === 1">
|
|
|
|
<view class="input-item x-c"><input class="inp" v-model="userPhone" type="number" placeholder="请输入账号" placeholder-class="pl" /></view>
|
|
|
|
<view class="input-item x-c"><input class="inp" password v-model="userPassword" type="text" placeholder="请输入密码" placeholder-class="pl" /></view>
|
|
|
|
</view>
|
|
|
|
<!-- 登录按钮 -->
|
|
|
|
<view class="x-c y-f">
|
|
|
|
<button class="cu-btn login-btn mb30" @tap="toLogin">登录</button>
|
|
|
|
<view class="x-bc tip-box ">
|
|
|
|
<button class="cu-btn tip-btn" @tap="jump('/pages/public/register')">立即注册</button>
|
|
|
|
<view class="" v-show="loginWay === 1"><button class="cu-btn tip-btn" @tap="jump('/pages/public/forgot')">忘记密码</button></view>
|
|
|
|
</view>
|
|
|
|
<view class="x-c">
|
|
|
|
<image class="logo" :src="sysInfo.logo" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<!-- 登录tab -->
|
|
|
|
|
|
|
|
<!-- -->
|
|
|
|
<view class="third-party y-f">
|
|
|
|
<!-- #ifdef H5 -->
|
|
|
|
<button class="cu-btn wx-logo-box y-f" @tap="wxLogin">
|
|
...
|
...
|
@@ -63,10 +41,14 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Wechat from '@/common/wechat/wechat';
|
|
|
|
import { mapMutations, mapActions, mapState } from 'vuex';
|
|
|
|
import store from '@/common/store';
|
|
|
|
export default {
|
|
|
|
import Wechat from '@/common/wechat/wechat';
|
|
|
|
import {
|
|
|
|
mapMutations,
|
|
|
|
mapActions,
|
|
|
|
mapState
|
|
|
|
} from 'vuex';
|
|
|
|
import store from '@/common/store';
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
code: {
|
|
...
|
...
|
@@ -85,9 +67,24 @@ export default { |
|
|
|
initData: state => state.init.initData
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onLoad() {
|
|
|
|
onLoad(e) {
|
|
|
|
if (this.$Route.query.token) {
|
|
|
|
this.setTokenAndBack(this.$Route.query.token);
|
|
|
|
}else{
|
|
|
|
console.log(e.user_id !== undefined)
|
|
|
|
if(e.user_id !== undefined){
|
|
|
|
}else{
|
|
|
|
uni.getStorage({
|
|
|
|
key:'share_id',
|
|
|
|
success:function(res){
|
|
|
|
uni.reLaunch({
|
|
|
|
url:'/pages/public/login?user_id='+res.data
|
|
|
|
})
|
|
|
|
console.log('运行结束')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onShow() {},
|
|
...
|
...
|
@@ -107,6 +104,7 @@ export default { |
|
|
|
if (token !== undefined) {
|
|
|
|
this.setTokenAndBack(token);
|
|
|
|
}
|
|
|
|
console.log(token)
|
|
|
|
},
|
|
|
|
onLoginWay(flag) {
|
|
|
|
this.loginWay = flag;
|
|
...
|
...
|
@@ -170,11 +168,11 @@ export default { |
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.container {
|
|
|
|
.container {
|
|
|
|
position: relative;
|
|
|
|
width: 100vw;
|
|
|
|
height: 100vh;
|
|
...
|
...
|
@@ -199,9 +197,9 @@ export default { |
|
|
|
width: 640rpx;
|
|
|
|
height: 300rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.wrapper {
|
|
|
|
.wrapper {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 90;
|
|
|
|
padding-bottom: 40upx;
|
|
...
|
...
|
@@ -211,97 +209,103 @@ export default { |
|
|
|
top: 0;
|
|
|
|
|
|
|
|
// 登录选项卡
|
|
|
|
.tab-box {
|
|
|
|
margin: 60rpx auto 30rpx;
|
|
|
|
width: 608rpx;
|
|
|
|
// .tab-box {
|
|
|
|
// margin: 60rpx auto 30rpx;
|
|
|
|
// width: 608rpx;
|
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
flex: 1;
|
|
|
|
height: 80rpx;
|
|
|
|
position: relative;
|
|
|
|
// .tab-item {
|
|
|
|
// flex: 1;
|
|
|
|
// height: 80rpx;
|
|
|
|
// position: relative;
|
|
|
|
|
|
|
|
.tab-title {
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #845708;
|
|
|
|
}
|
|
|
|
// .tab-title {
|
|
|
|
// font-size: 32rpx;
|
|
|
|
// font-weight: bold;
|
|
|
|
// color: #845708;
|
|
|
|
// }
|
|
|
|
|
|
|
|
.line-box {
|
|
|
|
position: absolute;
|
|
|
|
width: 300rpx;
|
|
|
|
height: 4rpx;
|
|
|
|
background: rgba(233, 181, 98, 1);
|
|
|
|
bottom: 0;
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
// .line-box {
|
|
|
|
// position: absolute;
|
|
|
|
// width: 300rpx;
|
|
|
|
// height: 4rpx;
|
|
|
|
// background: rgba(233, 181, 98, 1);
|
|
|
|
// bottom: 0;
|
|
|
|
// left: 50%;
|
|
|
|
// transform: translateX(-50%);
|
|
|
|
|
|
|
|
.triangle {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
disply: block;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border-width: 10rpx;
|
|
|
|
border-style: solid;
|
|
|
|
border-color: transparent transparent #e9b562 transparent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// .triangle {
|
|
|
|
// position: absolute;
|
|
|
|
// bottom: 0;
|
|
|
|
// left: 50%;
|
|
|
|
// transform: translateX(-50%);
|
|
|
|
// disply: block;
|
|
|
|
// width: 0;
|
|
|
|
// height: 0;
|
|
|
|
// border-width: 10rpx;
|
|
|
|
// border-style: solid;
|
|
|
|
// border-color: transparent transparent #e9b562 transparent;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 输入
|
|
|
|
.login-box {
|
|
|
|
.input-item {
|
|
|
|
height: 108rpx;
|
|
|
|
border-bottom: 1rpx solid rgba(#d0b17b, 0.3);
|
|
|
|
width: 608rpx;
|
|
|
|
// .login-box {
|
|
|
|
// .input-item {
|
|
|
|
// height: 108rpx;
|
|
|
|
// border-bottom: 1rpx solid rgba(#d0b17b, 0.3);
|
|
|
|
// width: 608rpx;
|
|
|
|
|
|
|
|
.inp {
|
|
|
|
flex: 1;
|
|
|
|
height: 100%;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
// .inp {
|
|
|
|
// flex: 1;
|
|
|
|
// height: 100%;
|
|
|
|
// font-size: 28rpx;
|
|
|
|
// }
|
|
|
|
|
|
|
|
.pl {
|
|
|
|
color: #c8963d;
|
|
|
|
}
|
|
|
|
// .pl {
|
|
|
|
// color: #c8963d;
|
|
|
|
// }
|
|
|
|
|
|
|
|
.code-btn {
|
|
|
|
background: none;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #845708;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// .code-btn {
|
|
|
|
// background: none;
|
|
|
|
// font-size: 28rpx;
|
|
|
|
// color: #845708;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 登录
|
|
|
|
.login-btn {
|
|
|
|
width: 630upx;
|
|
|
|
height: 80upx;
|
|
|
|
border-radius: 40rpx;
|
|
|
|
margin-top: 70upx;
|
|
|
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
|
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
// .login-btn {
|
|
|
|
// width: 630upx;
|
|
|
|
// height: 80upx;
|
|
|
|
// border-radius: 40rpx;
|
|
|
|
// margin-top: 70upx;
|
|
|
|
// background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
|
|
|
// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
|
|
// color: #fff;
|
|
|
|
// }
|
|
|
|
|
|
|
|
.tip-box {
|
|
|
|
width: 630rpx;
|
|
|
|
// .tip-box {
|
|
|
|
// width: 630rpx;
|
|
|
|
|
|
|
|
.tip-btn {
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: 400;
|
|
|
|
text-decoration: underline;
|
|
|
|
color: rgba(200, 150, 61, 1);
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// .tip-btn {
|
|
|
|
// font-size: 26rpx;
|
|
|
|
// font-family: PingFang SC;
|
|
|
|
// font-weight: 400;
|
|
|
|
// text-decoration: underline;
|
|
|
|
// color: rgba(200, 150, 61, 1);
|
|
|
|
// background: none;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 一键登录按钮
|
|
|
|
.wx-logo-box {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: 400;
|
|
...
|
...
|
@@ -309,9 +313,11 @@ export default { |
|
|
|
margin-top: 80rpx;
|
|
|
|
background: none;
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.auto-login {
|
|
|
|
width: 80rpx;
|
|
|
|
height: 80rpx;
|
|
...
|
...
|
@@ -319,5 +325,5 @@ export default { |
|
|
|
margin-bottom: 10rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
