<template>
|
<view class="box">
|
<view class="box_login">
|
<view class="box_login_head">预选清单-主播端</view>
|
<view class="box_login_item">
|
<view class="box_login_item_icon">
|
<image src="@/static/ic_account@2x.png" mode="widthFix"></image>
|
</view>
|
<input v-model="from.account" placeholder-class="box_login_item_pl" type="text" placeholder="请输入账号" />
|
</view>
|
<view class="box_login_item">
|
<view class="box_login_item_icon">
|
<image src="@/static/ic_passwd@2x.png" mode="widthFix"></image>
|
</view>
|
<input type="password" v-model="from.password" placeholder-class="box_login_item_pl" placeholder="请输入密码" v-if="!isSee" />
|
<input type="text" v-model="from.password" placeholder-class="box_login_item_pl" placeholder="请输入密码" v-else />
|
<view class="box_login_item_see" @click="isSee = !isSee">
|
<image src="@/static/ic_visible@2x.png" mode="widthFix" v-if="!isSee"></image>
|
<image src="@/static/ic_invisible@2x.png" mode="widthFix" v-else></image>
|
</view>
|
</view>
|
<view class="box_login_btn" @click="logins">登录</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { loginH5, getByLogin, getUserInfo } from '@/apis/index.js'
|
|
export default {
|
data() {
|
return {
|
isSee: false,
|
from: {
|
account: '',
|
password: ''
|
}
|
};
|
},
|
methods: {
|
logins() {
|
if (!this.from.account) return uni.showToast({ title: '账号不能为空', icon: 'error', duration: 2000 });
|
if (!this.from.password) return uni.showToast({ title: '密码不能为空', icon: 'error', duration: 2000 });
|
loginH5({
|
password: this.from.password,
|
username: this.from.account
|
}).then(async(res) => {
|
this.$store.commit('setToken', res.data)
|
let user = await getUserInfo()
|
this.$store.commit('setUser', user.data)
|
let result = await getByLogin()
|
this.$store.commit('setConfig', result.data)
|
uni.showToast({ title: '登录成功', icon: 'success', duration: 2000 });
|
uni.redirectTo({ url: '/pages/index/index' });
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100vw;
|
min-height: 100vh;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-image: url('@/static/bg.jpg');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
.box_login {
|
width: 600px;
|
height: 460px;
|
padding: 60px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: space-between;
|
box-sizing: border-box;
|
background: linear-gradient(180deg, #518198 0%, #033B58 100%);
|
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
|
border-radius: 8px;
|
.box_login_head {
|
font-size: 36px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
.box_login_item {
|
width: 100%;
|
height: 72px;
|
background: rgba(0,224,255,0.18);
|
border-radius: 8px;
|
padding: 0 24px;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
border: 2px solid #3C8BAD;
|
margin-top: 30px;
|
.box_login_item_icon {
|
flex-shrink: 0;
|
width: 30px;
|
height: 30px;
|
margin-right: 20px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.box_login_item_see {
|
flex-shrink: 0;
|
width: 30px;
|
height: 30px;
|
cursor: pointer;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
.box_login_item_pl {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: rgba(255,255,255,0.5);
|
}
|
}
|
.box_login_btn {
|
width: 100%;
|
height: 72px;
|
line-height: 72px;
|
text-align: center;
|
background: rgba(0,224,255,0.7) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
|
border-radius: 8px;
|
margin-top: 30px;
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
