476 lines
9.7 KiB
Vue
476 lines
9.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="topbg">
|
||
<view class="ts">
|
||
<view class="mb-5">欢迎登录</view>
|
||
<view>沪抖团线上展厅</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="edit">
|
||
<view class="logo">
|
||
<image src="../../static/logo.png"></image>
|
||
沪抖团
|
||
</view>
|
||
<view class="toggle cblue" @click="handleToggle">
|
||
切换登录
|
||
</view>
|
||
<!-- 账号，密码登录 -->
|
||
<view class="editem" v-if="!isCode">
|
||
<view class="input">
|
||
<icon class="iconfont icon-gerenzhongxin1 mr-10"></icon>
|
||
<input class="uni-input input100" v-model="account" placeholder="请输入账号" />
|
||
</view>
|
||
<view class="input">
|
||
<icon class="iconfont icon-icon-test5 mr-10"></icon>
|
||
<input type="password" class="uni-input" v-model="password" placeholder="请输入密码" />
|
||
</view>
|
||
<view class="tips size12" @click="$store.commit('changeSecratary', true)">
|
||
忘记密码联系管理员
|
||
</view>
|
||
<view class="btnlogin" @click="handleTelLogin">登录</view>
|
||
</view>
|
||
<!-- 手机号，验证码登录 -->
|
||
<view class="editem" v-if="isCode">
|
||
<view class="input">
|
||
<icon class="iconfont icon-gerenzhongxin1 mr-10"></icon>
|
||
<input class="uni-input input100" v-model="account" placeholder="请输入手机号" />
|
||
</view>
|
||
<view class="input">
|
||
<icon class="iconfont icon-icon-test5 mr-10"></icon>
|
||
<view class="yanzhengma">
|
||
<input class="uni-input" v-model="code" placeholder="验证码" />
|
||
<button class="code" type="none" @click="handleCode" v-model="code"
|
||
:disabled="disabled">{{second<60 ? second+'S后重发':'获取验证码'}}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view class="btnlogin" @click="handleTelLogin">登录</view>
|
||
</view>
|
||
|
||
<view class="register" @click="handleRegister">
|
||
<text>注册</text>
|
||
</view>
|
||
<view class="xieyi">
|
||
<checkbox-group @change="checkboxChange">
|
||
<checkbox :value="1" style="transform:scale(0.8)" />勾选同意沪抖团<text @click="handlexieyi"
|
||
class="bluecolor">《个人信息保护政策》</text>
|
||
</checkbox-group>
|
||
</view>
|
||
</view>
|
||
<!-- 手机号快捷登录 -->
|
||
<view class="wxbtn">
|
||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="value==1">
|
||
<view>
|
||
<image src="../../static/phone0.png"></image>
|
||
</view>
|
||
<text>手机号快捷注册/登录</text>
|
||
</button>
|
||
<button v-else @click="handleIsTel">
|
||
<view>
|
||
<image src="../../static/phone0.png"></image>
|
||
</view>
|
||
<text>手机号快捷注册/登录</text>
|
||
</button>
|
||
</view>
|
||
<!-- 联系人弹框 -->
|
||
<secratary></secratary>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: 0,
|
||
code: "",
|
||
account: "",
|
||
password: "",
|
||
sessionid: "",
|
||
disabled: false,
|
||
second: 60,
|
||
isCode: false,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["HomeContent"]),
|
||
},
|
||
async onLoad() {
|
||
let that = this
|
||
that.login()
|
||
},
|
||
methods: {
|
||
login() {
|
||
let that = this
|
||
uni.login({
|
||
success(res2) {
|
||
if (res2.code) {
|
||
if (res2.errMsg = "login:ok") {
|
||
that.$model.onlogin({
|
||
code: res2.code,
|
||
}).then(res => {
|
||
if (res.code == 2) {
|
||
that.token = null
|
||
that.sessionid = res.data.sessionid
|
||
uni.setStorageSync('sessionid', res.data.sessionid)
|
||
return
|
||
}
|
||
}).catch(e => {})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 登录、
|
||
handleTelLogin() {
|
||
let that = this
|
||
if (that.value == 0) {
|
||
that.$tools.msg("请先勾选同意沪抖团《个人信息保护政策》")
|
||
return
|
||
}
|
||
if (!that.isCode && !that.account) {
|
||
that.$tools.msg("请输入账号")
|
||
return
|
||
}
|
||
if (!that.isCode && !that.password) {
|
||
that.$tools.msg("请输入密码")
|
||
return
|
||
}
|
||
if (!that.isCode && that.password.length < 6) {
|
||
that.$tools.msg("密码长度不能小于6位数")
|
||
return
|
||
}
|
||
if (that.isCode && !(/^1[3456789]\d{9}$/.test(that.account))) {
|
||
that.$tools.msg("请输入正确的手机号")
|
||
return
|
||
}
|
||
if (that.isCode && !that.code) {
|
||
that.$tools.msg("请输入验证码")
|
||
return
|
||
}
|
||
let https = !that.isCode ? that.$model.getlogin({
|
||
account: that.account,
|
||
password: that.password,
|
||
sessionid: that.sessionid,
|
||
}) : that.$model.getloginCode({
|
||
account: that.account,
|
||
code: that.code,
|
||
sessionid: that.sessionid,
|
||
})
|
||
https.then(res => {
|
||
if (res.code != 0) {
|
||
that.$tools.msg(res.message)
|
||
return
|
||
}
|
||
uni.setStorageSync('token', res.data.token)
|
||
uni.setStorageSync('refreshtoken', res.data.refreshtoken)
|
||
uni.setStorageSync('sessionid', res.data.sessionid)
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
}).catch(err => {})
|
||
},
|
||
// 获取验证码
|
||
handleCode() {
|
||
let that = this
|
||
if (!(/^1[3456789]\d{9}$/.test(that.account))) {
|
||
that.$tools.msg("请输入正确的手机号")
|
||
return
|
||
}
|
||
//
|
||
that.$model.getSendCode({
|
||
account: that.account,
|
||
}).then(res => {
|
||
console.log(res)
|
||
if (res.code != 0) {
|
||
that.$tools.msg(res.msg)
|
||
return
|
||
}
|
||
that.disabled = true
|
||
let interval = setInterval(() => {
|
||
--that.second
|
||
}, 1000)
|
||
setTimeout(() => {
|
||
clearInterval(interval)
|
||
that.disabled = false
|
||
that.second = 60
|
||
}, 60000)
|
||
}).catch(err => {})
|
||
},
|
||
// 授权
|
||
getPhoneNumber(res) {
|
||
const that = this
|
||
if (res.detail.errMsg == 'getPhoneNumber:ok') {
|
||
that.$model.getRegisterPhone({
|
||
sessionid: that.sessionid,
|
||
encryptedData: res.detail.encryptedData,
|
||
iv: res.detail.iv,
|
||
}).then(res => {
|
||
if (res.code != 0) return
|
||
that.value = 1
|
||
uni.setStorageSync('token', res.data.token)
|
||
uni.setStorageSync('refreshtoken', res.data.refreshtoken)
|
||
uni.setStorageSync('sessionid', res.data.sessionid)
|
||
setTimeout(function() {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
}, 1000)
|
||
})
|
||
}
|
||
},
|
||
// 注册
|
||
handleRegister() {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/login/add"
|
||
})
|
||
},
|
||
handleToggle() {
|
||
this.phone = ""
|
||
this.isCode = !this.isCode
|
||
},
|
||
handleIsTel() {
|
||
if (this.value == 0) {
|
||
this.$tools.msg("请先确认勾选协议")
|
||
return
|
||
}
|
||
},
|
||
checkboxChange(e) {
|
||
this.value = e.detail.value.length ? e.detail.value[0] : "0"
|
||
console.log(e.detail, e.detail.value)
|
||
},
|
||
handlexieyi() {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/index/detail?content=1"
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
// display: flex;
|
||
overflow: hidden;
|
||
flex-wrap: wrap;
|
||
padding: 0 !important;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.topbg {
|
||
width: 126%;
|
||
position: relative;
|
||
height: 140px;
|
||
left: -13%;
|
||
background: $navColor;
|
||
border-radius: 0 0 60% 60%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.ts {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
color: #fff;
|
||
z-index: 9;
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 15%;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.edit {
|
||
margin: 40rpx auto 0;
|
||
width: calc(82% - 30px);
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
max-height: 780rpx;
|
||
|
||
.logo {
|
||
width: 100%;
|
||
height: 55px;
|
||
// margin-top: 15px;
|
||
color: #000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
|
||
image {
|
||
width: 53px;
|
||
height: 53px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.toggle {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: right;
|
||
font-size: 16px;
|
||
color: $blue;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tips {
|
||
width: 100%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: right;
|
||
}
|
||
|
||
.editem {
|
||
margin-top: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28upx;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
padding: 0 10px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
position: relative;
|
||
text-align: left;
|
||
background-color: #f7f7f7;
|
||
border-radius: 5px;
|
||
|
||
icon {
|
||
color: #666;
|
||
font-size: 22px;
|
||
}
|
||
|
||
input {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
position: absolute;
|
||
left: 35px;
|
||
right: 0px;
|
||
z-index: 88;
|
||
}
|
||
}
|
||
|
||
.btnlogin {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
height: 38px;
|
||
line-height: 38px;
|
||
background: $blue;
|
||
font-weight: 700;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.code {
|
||
width: 110px;
|
||
background: #dfdfdf;
|
||
font-size: 12px;
|
||
margin: 0;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 1.5px;
|
||
line-height: 35px;
|
||
height: 35px;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
.register {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: $blue;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
|
||
text {
|
||
border-bottom: 1px solid $blue;
|
||
}
|
||
}
|
||
|
||
.xieyi {
|
||
font-size: 12px;
|
||
color: #333;
|
||
width: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-top: 30rpx;
|
||
|
||
checkbox-group {
|
||
text-align: left;
|
||
}
|
||
|
||
text {
|
||
border-bottom: 1px solid #333;
|
||
}
|
||
}
|
||
|
||
.wxbtn {
|
||
width: 100%;
|
||
position: absolute;
|
||
margin-top: 10px;
|
||
top: 78%;
|
||
|
||
icon {
|
||
font-size: 25px;
|
||
color: #28c445;
|
||
}
|
||
|
||
|
||
text {
|
||
display: block;
|
||
// width: 100%;
|
||
margin-top: 5px;
|
||
font-size: 15px;
|
||
// color: #666;
|
||
text-align: center;
|
||
border-bottom: 1px solid blue;
|
||
color: blue;
|
||
}
|
||
|
||
button {
|
||
line-height: initial;
|
||
// background: #fff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
justify-content: center;
|
||
}
|
||
|
||
button::after {
|
||
display: none;
|
||
}
|
||
|
||
view {
|
||
width: 100%;
|
||
}
|
||
|
||
image {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style> |