<template>
|
<view class="login">
|
<view class="login_bg" :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"></view>
|
<view class="login_box">
|
<view class="login_box_icon">
|
<image src="@/static/icon/logo@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="login_box_title">云易保客户服务系统</view>
|
<view class="login_box_list">
|
<view class="login_box_list_item">
|
<image src="@/static/icon/login_ic_account@2x.png" mode="widthFix"></image>
|
<input type="text" v-model="from.username" placeholder="账号" />
|
</view>
|
<view class="login_box_list_item">
|
<image src="@/static/icon/login_ic_account@2x.png" mode="widthFix"></image>
|
<input type="password" v-model="from.password" placeholder="密码" />
|
</view>
|
<!-- <view class="login_box_list_item">
|
<image src="@/static/icon/login_ic_password@2x.png" mode="widthFix"></image>
|
<input type="text" placeholder="验证码" />
|
<text class="login_box_list_item_code">获取验证码</text>
|
</view> -->
|
</view>
|
<view class="login_box_btn">
|
<u-button text="立即登录" shape="circle" color="#437CB3" size="large" @click="login"></u-button>
|
</view>
|
</view>
|
<view class="a">
|
<view style=" display: inline-flex;align-items: center;">
|
<checkbox-group @change="onCheckboxChange" >
|
<checkbox > </checkbox>
|
</checkbox-group>
|
我已阅读和同意《
|
<view class="c" @click="goAgreement(0)" style="color: dodgerblue;cursor: pointer">服务协议</view>》和《
|
<view class="c" @click="goAgreement(1)" style="color: dodgerblue;cursor: pointer">隐私协议</view>》
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
backgroundImg: require('@/static/background/login_bg@2x.png'),
|
from: {
|
username: '',
|
password: '',
|
readed:false
|
}
|
};
|
},
|
methods: {
|
onCheckboxChange(e){
|
let val = e.detail.value
|
if(val.length>0){
|
this.from.readed =true
|
}else{
|
this.from.readed =false
|
}
|
console.log(this.from.readed)
|
},
|
goAgreement(type){
|
uni.navigateTo({
|
url: `/pages/login/agreement?type=${type}`
|
})
|
},
|
login() {
|
var that = this;
|
if (!that.from.username) return uni.showToast({
|
title: '请输入账号',
|
icon: 'none'
|
})
|
if (!that.from.password) return uni.showToast({
|
title: '请输入密码',
|
icon: 'none'
|
})
|
if (!that.from.readed ) return uni.showToast({
|
title: '请先阅读和同意用户服务隐私协议',
|
icon: 'none'
|
})
|
uni.login({
|
provider: 'weixin',
|
success: async function (loginRes) {
|
let { code } = loginRes;
|
let res = await that.$u.api.loginByWxMini({
|
code,
|
...that.from
|
})
|
if (res.code === 200) {
|
that.$store.commit('setCookies', res.data)
|
let user = await that.$u.api.getUserInfo()
|
if (user.code === 200) {
|
that.$store.commit('setUserInfo', user.data)
|
uni.reLaunch({
|
url: '/pages/index/index'
|
})
|
}
|
}
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.a{
|
font-size:12px;
|
bottom: 10px;
|
position: absolute;
|
width: 100%;
|
display: block;
|
text-align: center;
|
}
|
.b{width: 12px;height: 12px;display: inline; }
|
/* #ifdef MP-WEIXIN */
|
checkbox {
|
transform: scale(0.67);
|
border-radius: 50rpx;
|
}
|
|
checkbox .wx-checkbox-input {
|
border-radius: 50%;
|
border-color: #AAAAAA !important;
|
}
|
|
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
background: #f50;
|
border-color: #f50 !important;
|
color: #fff;
|
}
|
/* #endif */
|
|
|
.c{font-size: 12px;color:darkblue; display: inline;}
|
.login {
|
width: 100vw;
|
height: 100vh;
|
background: linear-gradient( 180deg, rgba(67,124,179,0.2) 0%, rgba(67,124,179,0) 100%);
|
.login_bg {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 50vh;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.login_box {
|
width: 100vw;
|
padding: 0 60rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
box-sizing: border-box;
|
position: relative;
|
top: 50%;
|
transform: translate(0, -70%);
|
.login_box_icon {
|
width: 180rpx;
|
height: 180rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.login_box_title {
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #333333;
|
font-style: normal;
|
margin-top: 40rpx;
|
margin-bottom: 120rpx;
|
}
|
.login_box_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.login_box_list_item {
|
width: 100%;
|
height: 98rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
margin-bottom: 40rpx;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
&:last-child {
|
margin: 0 !important;
|
}
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
.login_box_list_item_code {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #437CB3;
|
font-style: normal;
|
margin-left: 24rpx;
|
}
|
}
|
}
|
.login_box_btn {
|
width: 100%;
|
margin-top: 80rpx;
|
}
|
}
|
}
|
</style>
|
