544 lines
11 KiB
Vue
544 lines
11 KiB
Vue
<template>
|
|
<view class="bg">
|
|
<!-- <image src="@/static/image/logo.png" mode="scaleToFill" class="logo" /> -->
|
|
<!-- <view class="btn">
|
|
<u-button v-if="isLogoutShow" @click="login" color="transparent">点击登录</u-button>
|
|
</view>-->
|
|
<view class="back-wrapper">
|
|
<view class="back-inner">
|
|
<view class="back" v-if="isShowCaptcha" @tap="back">
|
|
<u-icon name="arrow-left" color="white" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main-wrapper">
|
|
<view class="main">
|
|
<view class="title-wrapper">
|
|
<view class="title">
|
|
<view class="title-01">登录</view>
|
|
<view class="title-02">品之鉴</view>
|
|
</view>
|
|
<view class="title-wrapper__desc"
|
|
>若为未注册账号则将自动转入品之鉴注册页</view
|
|
>
|
|
</view>
|
|
|
|
<transition-group name="fade">
|
|
<view class="phone-login-wrapper" v-show="!isShowCaptcha">
|
|
<view class="phone-wrapper">
|
|
<view class="name">手机号</view>
|
|
<u--input
|
|
placeholder="请输入手机号"
|
|
border="none"
|
|
:focus="true"
|
|
v-model="phone"
|
|
@change="handleChange"
|
|
></u--input>
|
|
</view>
|
|
|
|
<view class="agreement-wrapper">
|
|
<u-checkbox-group
|
|
v-model="checked"
|
|
iconPlacement="left"
|
|
placement="row"
|
|
inactiveColor="#76C458"
|
|
@change="handleChange"
|
|
>
|
|
<u-checkbox
|
|
name="yes"
|
|
shape="circle"
|
|
activeColor="#76C458"
|
|
></u-checkbox>
|
|
<view class="know">
|
|
已阅读并同意
|
|
<text @click="agreementHandle('service')"
|
|
>《软件许可及服务协议》</text
|
|
>
|
|
<text @click="agreementHandle('privacy')"
|
|
>&《隐私保护政策》</text
|
|
>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
|
|
<view
|
|
class="captcha-btn"
|
|
:style="{
|
|
background: disabled ? '#dadadc' : '#76c558'
|
|
}"
|
|
@tap="getCaptcha"
|
|
>获取验证码</view
|
|
>
|
|
|
|
<view class="btns-wrapper">
|
|
<view class="btns-wrapper__weixin">
|
|
<u-button
|
|
v-if="isShow"
|
|
open-type="getPhoneNumber"
|
|
@getphonenumber="getPhoneNumber"
|
|
color="transparent"
|
|
text="微信登录"
|
|
></u-button>
|
|
</view>
|
|
|
|
<view class="btns-wrapper__youke" @click="goRouter"
|
|
>游客访问</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="fill-captcha-wrapper" v-show="isShowCaptcha">
|
|
<view class="fill-captcha-wrapper__tip">
|
|
<view class="tip-01">已发送验证码至</view>
|
|
<view class="tip-02">{{ phone }}</view>
|
|
</view>
|
|
|
|
<view
|
|
class="form-view-class"
|
|
:class="captcha ? 'code_login_ipt' : ''"
|
|
>
|
|
<u-code-input
|
|
:maxlength="6"
|
|
:space="5"
|
|
:focus="true"
|
|
v-model="captcha"
|
|
@finish="handleFinish"
|
|
></u-code-input>
|
|
</view>
|
|
|
|
<view
|
|
class="resend-wrapper"
|
|
:style="{
|
|
color: timer === null ? '#76c558' : '#8d8d8d'
|
|
}"
|
|
>
|
|
<view @tap="resendCaptcha">重新发送</view>
|
|
<view v-if="timer !== null">({{ time }}s)</view>
|
|
</view>
|
|
</view>
|
|
</transition-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
code: '',
|
|
openId: '',
|
|
isShow: true,
|
|
isNew: false,
|
|
isShowCaptcha: false,
|
|
phone: '',
|
|
checked: [],
|
|
disabled: true,
|
|
captcha: '',
|
|
time: 60,
|
|
timer: null,
|
|
isPhoneLogin: false
|
|
}
|
|
},
|
|
methods: {
|
|
goRouter() {
|
|
uni.switchTab({
|
|
url: '/pages/home/index'
|
|
})
|
|
},
|
|
async getPhoneNumber(e) {
|
|
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
|
// 用户允许或去手机号
|
|
let res = await this.$api.login.getTel({ code: e.detail.code })
|
|
if (res.status == 0) {
|
|
uni.setStorageSync('token', res.data.token)
|
|
uni.setStorageSync('telNum', res.data.telNum)
|
|
this.isPhoneLogin = false
|
|
uni.setStorageSync('phoneLogin', this.isPhoneLogin)
|
|
if (res.data.isNew) {
|
|
uni.reLaunch({
|
|
url: '/pages/realName/realName'
|
|
})
|
|
} else {
|
|
uni.reLaunch({
|
|
url: '/pages/home/index'
|
|
})
|
|
}
|
|
} else {
|
|
this.$common.msgToast(res.msg)
|
|
}
|
|
} else {
|
|
this.$common.msgToast('请不要拒绝哟~重新点击登录')
|
|
}
|
|
},
|
|
//获取openId
|
|
async getOpenId() {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: async (res) => {
|
|
console.log('res.code', res.code)
|
|
this.code = res.code
|
|
let res1 = await this.$api.login.login({ code: res.code })
|
|
if (res1.status == 0) {
|
|
if (
|
|
res1.data.accountInfo.isNew ||
|
|
!uni.getStorageSync('telNum')
|
|
) {
|
|
this.isShow = true
|
|
// this.isNew = res1.data.accountInfo.isNew
|
|
} else {
|
|
uni.reLaunch({
|
|
url: '/pages/home/index'
|
|
})
|
|
}
|
|
uni.setStorageSync('token', res1.data.token)
|
|
} else {
|
|
this.$common.msgToast(res1.msg)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
handleChange() {
|
|
this.$nextTick(() => {
|
|
if (this.phone.length === 11 && this.checked.length > 0) {
|
|
this.disabled = false
|
|
} else {
|
|
this.disabled = true
|
|
}
|
|
})
|
|
},
|
|
agreementHandle(type) {
|
|
uni.navigateTo({
|
|
url: '/pages/realName/agreement?type=' + type
|
|
})
|
|
},
|
|
async getCaptcha() {
|
|
if (!this.disabled) {
|
|
const res = await this.$api.login.getTelCaptcha({
|
|
Telnum: this.phone
|
|
})
|
|
if (res.status === 0) {
|
|
this.$common.msgToast('验证码已发送')
|
|
this.isShowCaptcha = true
|
|
this.timer = setInterval(() => {
|
|
if (this.time > 0) this.time--
|
|
else {
|
|
clearInterval(this.timer)
|
|
this.time = 60
|
|
this.timer = null
|
|
}
|
|
}, 1000)
|
|
} else {
|
|
this.$common.msgToast('验证码发送失败，请稍后再试')
|
|
}
|
|
}
|
|
},
|
|
resendCaptcha() {
|
|
if (this.timer === null) {
|
|
this.getCaptcha()
|
|
}
|
|
},
|
|
async handleFinish(e) {
|
|
const res = await this.$api.login.checkTelCaptcha({
|
|
telnum: this.phone,
|
|
code: e
|
|
})
|
|
if (res.status === 0) {
|
|
this.$common.msgToast('请稍等')
|
|
uni.setStorageSync('token', res.data.token)
|
|
uni.setStorageSync('telNum', this.phone)
|
|
if (!res.data.isNew) {
|
|
uni.reLaunch({
|
|
url: `/pages/home/index`
|
|
})
|
|
} else {
|
|
this.isPhoneLogin = true
|
|
uni.setStorageSync('phoneLogin', this.isPhoneLogin)
|
|
uni.reLaunch({
|
|
url: `/pages/realName/realName`
|
|
})
|
|
}
|
|
} else {
|
|
this.$common.msgToast(res.msg)
|
|
}
|
|
},
|
|
back() {
|
|
this.isShowCaptcha = false
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.time = 60
|
|
this.timer = null
|
|
}
|
|
}
|
|
// info判断用户是401就让他获取openId
|
|
// async info() {
|
|
// const res = await this.$api.mine.info();
|
|
// if (res.status === 0) {
|
|
// if (res.data.isNew) {
|
|
// //登录未注册
|
|
// uni.reLaunch({
|
|
// url: "/pages/realName/realName"
|
|
// });
|
|
// } else {
|
|
// //登录已注册
|
|
// uni.reLaunch({
|
|
// url: "/pages/home/index"
|
|
// });
|
|
// }
|
|
// } else if (res.status === 401) {
|
|
// this.getOpenId();
|
|
// } else {
|
|
// this.$common.msgToast(res.msg);
|
|
// }
|
|
// }
|
|
},
|
|
onLoad() {
|
|
// if (!uni.getStorageSync("telNum")) {
|
|
// this.getOpenId();
|
|
// }
|
|
// this.info();
|
|
// this.getOpenId()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.u-button {
|
|
background: red;
|
|
}
|
|
|
|
.bg {
|
|
background: url('https://e-cdn.fontree.cn/fonchain-main/prod/image/6248/avatar/8178c309-54da-4e45-89d1-25c3f0cc80e9.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 100vh;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// flex-direction: column;
|
|
// position: relative;
|
|
|
|
.ykfw {
|
|
height: 50rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 40rpx;
|
|
color: #fff;
|
|
}
|
|
// .logo {
|
|
// margin-top: 250rpx;
|
|
// width: 398rpx;
|
|
// height: 744rpx;
|
|
// }
|
|
|
|
.back-wrapper {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.back-inner {
|
|
width: 80vw;
|
|
|
|
.back {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
background-color: #76c558;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-wrapper {
|
|
width: 100%;
|
|
height: calc(100vh - 200rpx);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.main {
|
|
width: 80vw;
|
|
height: 670rpx;
|
|
|
|
.title-wrapper {
|
|
margin-top: 40rpx;
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
|
|
.title-02 {
|
|
color: #76c558;
|
|
}
|
|
}
|
|
|
|
&__desc {
|
|
color: #8d8d8d;
|
|
}
|
|
}
|
|
|
|
.phone-login-wrapper {
|
|
margin-top: 100rpx;
|
|
|
|
.phone-wrapper {
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
width: 100%;
|
|
height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 24rpx;
|
|
|
|
.name {
|
|
width: 120rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
border-right: 1rpx solid #d1d1d1;
|
|
}
|
|
|
|
/deep/ .u-input {
|
|
margin-left: 40rpx;
|
|
}
|
|
}
|
|
|
|
.agreement-wrapper {
|
|
font-size: 28rpx;
|
|
margin: 46rpx 0 10rpx 0;
|
|
|
|
.know {
|
|
margin-top: 20upx;
|
|
font-size: 28upx;
|
|
color: #8d8d8d;
|
|
|
|
text {
|
|
color: #76c458;
|
|
}
|
|
}
|
|
}
|
|
|
|
.captcha-btn {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
color: #fff;
|
|
background-color: #dadadc;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btns-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
|
|
&__weixin {
|
|
/deep/ .u-button {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
font-size: 30rpx !important;
|
|
color: #76c558 !important;
|
|
}
|
|
}
|
|
|
|
&__youke {
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fill-captcha-wrapper {
|
|
margin-top: 50rpx;
|
|
|
|
&__tip {
|
|
height: 40rpx;
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
|
|
.tip-01 {
|
|
color: #8d8d8d;
|
|
}
|
|
|
|
.tip-02 {
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.form-view-class {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
/deep/ .u-code-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.u-code-input__item {
|
|
width: calc(80vw / 7) !important;
|
|
height: 92rpx !important;
|
|
background-color: #ffffff !important;
|
|
border: none !important;
|
|
border-radius: 20rpx;
|
|
|
|
&:first-child {
|
|
// 隐藏第一个框的光标
|
|
.u-code-input__item__cursor {
|
|
width: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-code-input__input {
|
|
height: 92rpx !important;
|
|
width: 100%;
|
|
left: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.code_login_ipt {
|
|
//该类名作用为在验证码输入框有值时将验证码输入框的input挪出屏幕。
|
|
/deep/ .u-code-input__input {
|
|
height: 100% !important;
|
|
width: 0 !important;
|
|
left: -999rpx !important;
|
|
}
|
|
}
|
|
|
|
.resend-wrapper {
|
|
display: flex;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
transform: translateX(100%);
|
|
}
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: 0.5 linear;
|
|
}
|
|
.fade-enter-to,
|
|
.fade-leave {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
uni-button:after {
|
|
border: 0px;
|
|
}
|
|
}
|
|
</style>
|