498 lines
13 KiB
Vue
498 lines
13 KiB
Vue
<!--登录页面-->
|
|
<script>
|
|
|
|
import ApiConstant from "@/common/ApiConstant";
|
|
import Request from '@/common/request'
|
|
import StaticConstant from "@/common/StaticConstant";
|
|
import commonTool from "../../common/js/commonTool";
|
|
import {stringIsNotEmpty} from "../../common/util";
|
|
|
|
let request = new Request()
|
|
export default {
|
|
name: "home",
|
|
components: {},
|
|
computed: {
|
|
StaticConstant() {
|
|
return StaticConstant
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
systemName:'',
|
|
checkFlag: false,
|
|
showType: 1,
|
|
formData: {
|
|
userName: '',
|
|
password: '',
|
|
password2:''
|
|
},
|
|
isTick: true,
|
|
showFlag:false
|
|
}
|
|
},
|
|
onReady() {
|
|
},
|
|
onShow(){
|
|
// #ifdef MP-TOUTIAO
|
|
this.dyLogin()
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.showFlag =true
|
|
// #endif
|
|
},
|
|
methods: {
|
|
//其他设备下线提示
|
|
otherSystemMessage(r){
|
|
if (r.result.loginState && r.result.loginState === 'more') {
|
|
uni.showToast({
|
|
title: '其他设备已下线，请稍等',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
//刷新到首页
|
|
reloadHome(){
|
|
setTimeout(function () {
|
|
wx.reLaunch({
|
|
url: '/pages/zyb/home',
|
|
})
|
|
}, 500)
|
|
},
|
|
//抖音登录
|
|
dyLogin(){
|
|
//今日头条用户信息授权
|
|
let that = this
|
|
uni.login({
|
|
provider: 'toutiao',
|
|
success: function(loginRes) {
|
|
console.log(loginRes);
|
|
request.post(ApiConstant.User.dyLogin, {
|
|
code: loginRes.code,
|
|
anonymousCode: loginRes.anonymousCode,
|
|
}).then(r => {
|
|
console.log('请求登录', r)
|
|
if (r.success) {
|
|
console.log(r)
|
|
that.otherSystemMessage(r)
|
|
//token
|
|
uni.setStorageSync('token', r.result.token)
|
|
//用户信息
|
|
if (r.result.userInfo) {
|
|
uni.setStorageSync('userInfo', r.result.userInfo)
|
|
}
|
|
//vip信息
|
|
commonTool.checkVipInfo(r.result.vipInfo)
|
|
//重新打开首页
|
|
that.reloadHome()
|
|
} else {
|
|
uni.showToast({
|
|
title: r.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
}).finally(() => {
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getPhoneNumber(e) {
|
|
console.log(e.detail.errMsg);
|
|
console.log(e.detail.iv);
|
|
console.log(e.detail.encryptedData);
|
|
if (!this.checkFlag) {
|
|
uni.showToast({
|
|
title: '请阅读后同意《'+this.systemName+'用户协议》',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
var sessionKey = ''
|
|
if (e && e.detail && e.detail.code) {
|
|
//选择授权
|
|
uni.login({
|
|
success: (res) => {
|
|
console.log('获取code', res)
|
|
if (res.code) {
|
|
let code = res.code
|
|
request.post(ApiConstant.User.wxLogin, {
|
|
code: code,
|
|
encryptedData: e.detail.encryptedData,
|
|
iv: e.detail.iv
|
|
}).then(r => {
|
|
console.log('请求登录', r)
|
|
if (r.success) {
|
|
console.log(r)
|
|
this.otherSystemMessage(r)
|
|
//token
|
|
uni.setStorageSync('token', r.result.token)
|
|
//用户信息
|
|
if (r.result.userInfo) {
|
|
uni.setStorageSync('userInfo', r.result.userInfo)
|
|
}
|
|
|
|
//vip信息
|
|
commonTool.checkVipInfo(r.result.vipInfo)
|
|
//重新打开首页
|
|
this.reloadHome()
|
|
} else {
|
|
uni.showToast({
|
|
title: '微信授权登录失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
}).finally(() => {
|
|
});
|
|
} else {
|
|
uni.showModal({
|
|
title: '未获取到code'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: '授权失败,请同意授权',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
console.log(e)
|
|
},
|
|
//密码登录
|
|
pwdLogin() {
|
|
if (!stringIsNotEmpty(this.formData.userName)) {
|
|
uni.showToast({
|
|
title: '请输入用户名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!stringIsNotEmpty(this.formData.password)) {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
request.post(ApiConstant.User.login, {
|
|
username: this.formData.userName,
|
|
password: this.formData.password
|
|
}).then(r => {
|
|
if (r.success) {
|
|
console.log(r)
|
|
this.otherSystemMessage(r)
|
|
//token
|
|
uni.setStorageSync('token', r.result.token)
|
|
//用户信息
|
|
if (r.result.userInfo) {
|
|
uni.setStorageSync('userInfo', r.result.userInfo)
|
|
}
|
|
//vip信息
|
|
commonTool.checkVipInfo(r.result.vipInfo)
|
|
//重新打开首页
|
|
this.reloadHome()
|
|
} else {
|
|
uni.showToast({
|
|
title: r.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
}).finally(() => {
|
|
});
|
|
|
|
},
|
|
register(){
|
|
if (!stringIsNotEmpty(this.formData.userName)) {
|
|
uni.showToast({
|
|
title: '请输入手机号码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let phoneNumberPattern = /^1[3-9]\d{9}$/;
|
|
let isValidPhoneNumber = phoneNumberPattern.test(this.formData.userName);
|
|
if (!isValidPhoneNumber) {
|
|
uni.showToast({
|
|
title: '手机号码格式不正确',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!stringIsNotEmpty(this.formData.password)) {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (this.formData.password!==this.formData.password2) {
|
|
uni.showToast({
|
|
title: '两次密码不一致',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
request.post(ApiConstant.User.register, {
|
|
username: this.formData.userName,
|
|
password: this.formData.password
|
|
}).then(r => {
|
|
if (r.success) {
|
|
console.log(r)
|
|
setTimeout(function () {
|
|
uni.showToast({
|
|
title: '注册成功',
|
|
icon: 'none'
|
|
})
|
|
}, 100)
|
|
//token
|
|
uni.setStorageSync('token', r.result.token)
|
|
//用户信息
|
|
if (r.result.userInfo) {
|
|
uni.setStorageSync('userInfo', r.result.userInfo)
|
|
}
|
|
//vip信息
|
|
commonTool.checkVipInfo(r.result.vipInfo)
|
|
//重新打开首页
|
|
this.reloadHome()
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: r.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
}).finally(() => {
|
|
});
|
|
},
|
|
//显示密码输入框
|
|
showPwdInput() {
|
|
},
|
|
gotoMianze() {
|
|
uni.navigateTo({
|
|
url: '/pages/zyb/other/disclaimer'
|
|
})
|
|
},
|
|
gotoXieyi() {
|
|
uni.navigateTo({
|
|
url: '/pages/zyb/other/userAgreement'
|
|
})
|
|
|
|
},
|
|
checkboxChange(r) {
|
|
console.log(r)
|
|
if (r.detail.value && r.detail.value.length > 0) {
|
|
this.checkFlag = true
|
|
} else {
|
|
this.checkFlag = false
|
|
}
|
|
}
|
|
},
|
|
onload() {
|
|
this.systemName = commonTool.getSystemName()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="header" style="border-top:3rpx solid #f6f6f6"></view>
|
|
<view class="content" v-if="showFlag">
|
|
<view class="textcenter">
|
|
<view class="flex">
|
|
<view class="title">
|
|
{{ StaticConstant.systemName }}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="textcenter">
|
|
<text class="low-title">
|
|
<!-- 全国<text style="font-size: 35rpx">600</text>万+考生的选择-->
|
|
艺术生 更轻松的报志愿
|
|
</text>
|
|
</view>
|
|
|
|
<view style="margin-top: 200rpx" v-if="showType===1">
|
|
<button class='login-but' v-if="!checkFlag" @click="getPhoneNumber">
|
|
/*#ifdef MP-TOUTIAO*/
|
|
抖音一键登录
|
|
/*#endif*/
|
|
/*#ifdef MP-WEIXIN*/
|
|
手机号快捷登录
|
|
/*#endif*/
|
|
</button>
|
|
/*#ifdef MP-TOUTIAO*/
|
|
<button class='login-but' v-if="checkFlag" @click="dyLogin">
|
|
抖音一键登录
|
|
</button>
|
|
/*#endif*/
|
|
/*#ifdef MP-WEIXIN*/
|
|
<button class='login-but' v-if="checkFlag" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
手机号快捷登录
|
|
</button>
|
|
/*#endif*/
|
|
<button class='login-pwd-but margin-top-20' @click="showType=2">
|
|
账号密码登录
|
|
</button>
|
|
</view>
|
|
<view style="margin-top: 180rpx" class="uni-padding-wrap border-top" v-if="showType===2">
|
|
<view class="forms">
|
|
<view class="form-item">
|
|
<view class="form-item-view form-input">
|
|
<input class="uni-input" type="text"
|
|
v-model="formData.userName"
|
|
name="contactPersonPhone"
|
|
:placeholder="'请输入用户名或手机号'"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-item-view form-input">
|
|
<input class="uni-input" type="password" password="true"
|
|
v-model="formData.password"
|
|
name="password"
|
|
:placeholder="'请输入密码'"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<button class='login-but margin-top-20' :disabled="!checkFlag" :class="checkFlag?'':'login-but-disabled'"
|
|
@click="pwdLogin">
|
|
登录
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<text @click="showType=1" class="redOrange">快捷登录</text>
|
|
</view>
|
|
</view>
|
|
<!--注册-->
|
|
<view style="margin-top: 180rpx" class="uni-padding-wrap border-top" v-if="showType===3">
|
|
<view class="forms">
|
|
<view class="form-item">
|
|
<view class="form-item-view form-input">
|
|
<input class="uni-input" type="text"
|
|
v-model="formData.userName"
|
|
name="contactPersonPhone"
|
|
:placeholder="'请输入手机号'"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-item-view form-input">
|
|
<input class="uni-input" type="password" password="true"
|
|
v-model="formData.password"
|
|
name="password"
|
|
:placeholder="'请输入密码'"/>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-item-view form-input">
|
|
<input class="uni-input" type="password" password="true"
|
|
v-model="formData.password2"
|
|
name="password2"
|
|
:placeholder="'请再次输入密码'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<text @click="showType=1" class="redOrange">快捷登录</text>
|
|
</view>
|
|
</view>
|
|
<view class="uni-flex flex" style="margin-top: 100rpx">
|
|
<checkbox-group @change="checkboxChange">
|
|
<label>
|
|
<checkbox value="cb"/>
|
|
登录代表{{ systemName }}
|
|
<text style="color: #4975fd" @click="gotoXieyi">{{systemName}}用户协议、</text>
|
|
<text style="color: #4975fd" @click="gotoMianze">免责声明</text>，并授权使用您的{{ systemName }}账号信息（如昵称、头像）以便您统一管理
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
margin-top: 200rpx;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
}
|
|
|
|
.uni-form-item .title {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
/*表单 start*/
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.form-item-label {
|
|
width: 20%;
|
|
}
|
|
|
|
.form-item-view {
|
|
width: 100%;
|
|
min-height: 80rpx;
|
|
}
|
|
|
|
.form-input {
|
|
border: 1rpx solid #e6e6e6;
|
|
}
|
|
|
|
.uni-input {
|
|
border: none;
|
|
}
|
|
|
|
.textcenter {
|
|
text-align: center;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
/*标题*/
|
|
.title {
|
|
font-family: "Bookshelf Symbol 7";
|
|
margin: 0 auto;
|
|
//color:white;
|
|
font-size: 90rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/*小标题*/
|
|
.low-title {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.login-pwd-but {
|
|
color: #222222;
|
|
width: 500rpx;
|
|
background: #eeeeee;
|
|
//background-color: ;
|
|
border-radius: 10rpx;
|
|
font-weight: 550;
|
|
}
|
|
|
|
///登录按钮
|
|
.login-but {
|
|
color: white;
|
|
width: 500rpx;
|
|
//background: linear-gradient(rgba(52, 145, 212, 0.83), #3658d0);
|
|
background: linear-gradient(#f96543, #f96543);
|
|
//background-color: ;
|
|
border-radius: 10rpx;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.login-but-disabled {
|
|
background: #eeeeee;
|
|
}
|
|
</style>
|