You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
5.9 KiB
281 lines
5.9 KiB
<!-- 登录页面 -->
|
|
<template>
|
|
<view class="login bx">
|
|
|
|
<!-- 背景图片 -->
|
|
<view class="bg-box">
|
|
<image @click="showSelectLanguageProp" class="language" src="@/static/login/language.png" mode="aspectFit"></image>
|
|
<image src="@/static/logo.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 加载效果 -->
|
|
<loading :loading="loading" @close="closeLoading"></loading>
|
|
|
|
<view v-if="!loading" class="main">
|
|
<!-- 登录标题 -->
|
|
<view class="login-title">
|
|
|
|
<view class="title">{{ $t('page.login.title') }}</view>
|
|
|
|
<view class="login-descript">{{ $t('page.login.please-login') }}</view>
|
|
|
|
</view>
|
|
|
|
<!-- 输入框列表 -->
|
|
<view class="input-list">
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.login.username') }}</view>
|
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.login.username-placeholder')" />
|
|
</view>
|
|
|
|
<view class="input-item">
|
|
<view class="input-descript">{{ $t('page.login.password') }}</view>
|
|
|
|
<input v-model="form.pass" type="password" :placeholder="$t('page.login.password-placeholder')" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 忘记密码 -->
|
|
<view class="forgot-password">
|
|
<text @click="forgetPass">{{ $t('page.login.forgot-password') }}</text>
|
|
</view>
|
|
|
|
<!-- 按钮组 -->
|
|
<view class="btns">
|
|
|
|
<view @click="Login" class="now-login-btn">{{ $t('page.login.login') }}</view>
|
|
|
|
<view @click="toRegister" class="now-register-btn">{{ $t('page.login.register') }}</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 切换语言 -->
|
|
<changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
|
|
|
|
<!-- 客服列表 -->
|
|
<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
|
|
|
|
<!-- 初始页面 -->
|
|
<pageInit></pageInit>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
|
|
import serviceList from '@/components/serviceList/serviceList.vue';
|
|
import pageInit from '@/components/pageInit/pageInit.vue'
|
|
import loading from '@/components/pageInit/loading.vue'
|
|
|
|
export default {
|
|
components : { changeLanguage , serviceList , pageInit , loading },
|
|
data() {
|
|
return {
|
|
form: {
|
|
account: '',
|
|
pass: '',
|
|
loginIp : ''
|
|
},
|
|
showSelectLanguage : false,
|
|
showService : false,
|
|
serverList : [],
|
|
loading : true
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
//登录
|
|
Login() {
|
|
this.$play()
|
|
let _self = this;
|
|
let { account , pass } = this.form
|
|
if(account.trim() == ''){
|
|
return uni.showToast({title: this.$t('page.login.accountEmpty'),icon : 'none'});
|
|
}
|
|
if(pass.trim() == ''){
|
|
return uni.showToast({title: this.$t('page.login.passEmpty'),icon : 'none'});
|
|
}
|
|
|
|
return uni.request({
|
|
url: 'https://api.ipify.org?format=json',
|
|
success: function(res) {
|
|
_self.form.loginIp = res.data.ip;
|
|
_self.request('login', {}, _self.form).then(res => {
|
|
if(res.code == 200){
|
|
localStorage.setItem("userInfo",JSON.stringify(res.result.userInfo))
|
|
localStorage.setItem("token", res.result.token)
|
|
uni.navigateTo({
|
|
url: '/pages/home/home'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
//跳转注册页面
|
|
toRegister() {
|
|
this.$play()
|
|
uni.navigateTo({
|
|
url: '/pages/register/register'
|
|
})
|
|
},
|
|
|
|
//显示选择语言弹框
|
|
showSelectLanguageProp(){
|
|
this.$play()
|
|
this.showSelectLanguage = true
|
|
},
|
|
|
|
//关闭语言选择弹框
|
|
closeSelectLanguageProp(){
|
|
this.showSelectLanguage = false
|
|
},
|
|
|
|
//显示客服列表
|
|
revealServiceList(){
|
|
this.$play()
|
|
this.showService = true;
|
|
},
|
|
|
|
//关闭客服列表
|
|
closeServiceList(){
|
|
this.showService = false;
|
|
},
|
|
|
|
//关闭加载效果
|
|
closeLoading(){
|
|
this.loading = false;
|
|
},
|
|
|
|
//忘记密码
|
|
forgetPass(){
|
|
this.request('forgetPass').then(res => {
|
|
if(res.code == 200){
|
|
this.serverList = res.result
|
|
this.revealServiceList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
margin: 0px auto;
|
|
background: black;
|
|
background-image: url('@/static/login/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 20rpx;
|
|
|
|
.bg-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40%;
|
|
|
|
.language {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
|
|
.login-title {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #B0C73B;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.login-descript {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.input-list {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 40rpx 0rpx;
|
|
|
|
.input-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid #B0C73B;
|
|
padding: 20rpx;
|
|
border-radius: 5rpx;
|
|
margin-bottom: 25rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
|
|
.input-descript {
|
|
color: #B0C73B;
|
|
}
|
|
|
|
input {
|
|
color: #B0C73B;
|
|
}
|
|
}
|
|
}
|
|
|
|
.forgot-password {
|
|
color: #B0C73B;
|
|
text-align: center;
|
|
|
|
text {
|
|
border-bottom: 1rpx solid #ccc;
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
padding: 0rpx 10rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.now-login-btn,
|
|
.now-register-btn {
|
|
background: #B0C73B;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.now-login-btn {
|
|
height: 90rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.now-register-btn {
|
|
height: 60rpx;
|
|
width: 90%;
|
|
font-size: 28rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|