500 lines
13 KiB
Vue
500 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>
|