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.
443 lines
12 KiB
443 lines
12 KiB
<template>
|
|
<view class="pages">
|
|
<!-- <uni-section title="使用uni-ui表单" type="line">
|
|
<uni-card :is-shadow="false" :isFull="true" :border="true">
|
|
<text>
|
|
使用uni-ui的组件创建表单，提交时使用的request.api.js中的网络请求方式，在VUEX里发起登录请求并将结果保存到本地。先调用VUEX，在VUEX中发送网络请求。
|
|
</text>
|
|
</uni-card>
|
|
<uni-card title="uni-ui的表单" :thumbnail="avatar" sub-title="输入框为uni-easyinput" extra="使用uni-forms"
|
|
note="Tips">
|
|
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
|
<uni-forms-item label="账号:" name="userName">
|
|
<uni-easyinput prefixIcon="person" type="text" v-model="formData.userName"
|
|
placeholder="请输入账号" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="密码:" name="password">
|
|
<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
|
|
placeholder="请输入密码" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button @click="dologin">登录</button>
|
|
</uni-card>
|
|
</uni-section> -->
|
|
|
|
<!-- <text class="text1">
|
|
汇融云仓贷后监管平台
|
|
</text>
|
|
<text class="text2">
|
|
欢迎您
|
|
</text>
|
|
|
|
<view class="login">
|
|
|
|
<view class="item">
|
|
<image style="width: 17px;height: 17px;" src="../../static/newApp/wd.png" mode="aspectFill"></image>
|
|
<input class="input" @input="nameInput" v-model="formData.userName" placeholder="请输入用户名"
|
|
maxlength="11" />
|
|
</view>
|
|
|
|
<view class="item">
|
|
<image style="width: 20px;height: 20px;" src="../../static/newApp/srmm.png" mode="aspectFill"></image>
|
|
<input class="input" @input="paswordInput" v-model="formData.password" placeholder="请输入密码" />
|
|
</view>
|
|
|
|
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 8px;justify-content: space-between;">
|
|
<view @click="boxChange">
|
|
<checkbox class="checkbox" :checked="rememberPsw" >记住密码</checkbox>
|
|
</view>
|
|
|
|
|
|
<text class="forget" @click="forget">忘记密码？</text>
|
|
</view>
|
|
|
|
<u-button class="btn" @click="dologin">登录</u-button>
|
|
|
|
<text style="font-size: 13px;color: #ababab;margin-top: 50px;">—— 第三方登录方式 ——</text>
|
|
|
|
<image style="width: 30px;height: 30px; margin-top: 20px;margin-bottom: 30px;"
|
|
src="../../static/newApp/wx.png" mode="aspectFill" @click="weixin"></image>
|
|
|
|
</view> -->
|
|
|
|
<view style="display: flex;flex-direction: row; color: #000;margin-top: 120px;">
|
|
<view style="display: flex;flex-direction: column; align-items: center;">
|
|
<text style="font-size: 30px;color: #898989;">汇融云仓</text>
|
|
<text style="font-size: 25px;color: #898989;">贷后监管平台</text>
|
|
</view>
|
|
|
|
<!-- <image src="../../static/newApp/yydlogo.png" mode="aspectFill"
|
|
style="margin-left: 20px; width: 85px;height: 60px;"></image> -->
|
|
|
|
</view>
|
|
|
|
<view class="input" style="margin-top: 70px;">
|
|
|
|
<image style="width: 30px;height: 30px;" src="../../static/loginIcon/sjh.png" mode="aspectFill"></image>
|
|
<input class="input-item" @input="nameInput" v-model="formData.userName" placeholder="请输入手机号"
|
|
maxlength="11" />
|
|
</view>
|
|
|
|
|
|
<view class="input" style="margin-top: 10px;">
|
|
|
|
<image style="width: 30px;height: 30px;" src="../../static/loginIcon/mm.png" mode="aspectFill"></image>
|
|
<input class="input-item" @input="paswordInput" v-model="formData.password" :password="showPassword"
|
|
placeholder="请输入密码" />
|
|
<image style="width: 25px;height: 25px; margin-left: 10px;" :src="img1" mode="aspectFill" @click="showPas"></image>
|
|
</view>
|
|
|
|
<view style="display: flex;flex-direction: row;width: 80%;margin-top: 8px;justify-content: space-between;">
|
|
<view @click="boxChange">
|
|
<checkbox class="checkbox" :checked="rememberPsw">记住密码</checkbox>
|
|
</view>
|
|
|
|
|
|
<text class="forget" @click="forget">忘记密码？</text>
|
|
</view>
|
|
|
|
<button class="btn" @click="dologin">登录</button>
|
|
|
|
<text style="font-size: 13px;color: #ababab;margin-top: 50px;">───── 第三方登录方式 ─────</text>
|
|
|
|
<image style="width: 45px;height: 45px; margin-top: 20px;" src="../../static/loginIcon/wx.png" mode="aspectFill"
|
|
@click="weixin"></image>
|
|
<text style="font-size: 14px;color: #898989; margin-top: 5px;">微信授权登录</text>
|
|
|
|
<view style="display: flex;align-items: center;margin-top: 50px;">
|
|
|
|
<image :src="img2" style="width: 20px;height: 20px;" mode="aspectFill" @click="selectClick"></image>
|
|
<text style="margin-left: 5px;font-size: 14px;color: #898989;">我已阅读并同意</text>
|
|
<text style="margin-left: 5px;font-size: 16px;color: #197CD0;" @click="fwxy">用户协议</text>
|
|
<text style="margin-left: 5px;font-size: 14px;color: #898989;">&</text>
|
|
<text style="margin-left: 5px;font-size: 16px;color: #197CD0;" @click="yszc">隐私政策</text>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showPassword: true,
|
|
selectType:false,
|
|
rememberPsw: true, //复选框状态 默认勾选
|
|
// avatar: '/static/uniui.png',
|
|
// vavatar: '/static/uview/common/logo.png',
|
|
// 表单数据
|
|
formData: {
|
|
userName: '',
|
|
password: ''
|
|
},
|
|
img1: "/static/loginIcon/notShow.png",
|
|
img2: "/static/loginIcon/wgx.png",
|
|
// rules: {
|
|
// // 对name字段进行必填验证
|
|
// name: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '账号不可以为空'
|
|
// }]
|
|
// },
|
|
// // 对passwd字段进行必填验证
|
|
// passwd: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '密码不可以为空'
|
|
// }]
|
|
// }
|
|
// },
|
|
}
|
|
},
|
|
mounted() {
|
|
//取出缓存中的账号、密码
|
|
const loginName = uni.getStorageSync('loginName');
|
|
const loginPasword = uni.getStorageSync('loginPasword');
|
|
console.log("缓存的账号:", loginName)
|
|
console.log("缓存的密码:", loginPasword)
|
|
//有账号、密码就赋值给文本，没有就清空
|
|
if (loginName && loginPasword) {
|
|
this.formData.userName = loginName;
|
|
this.formData.password = loginPasword;
|
|
}
|
|
},
|
|
methods: {
|
|
nameInput(event) {
|
|
this.formData.userName = event.target.value
|
|
},
|
|
paswordInput(event) {
|
|
this.formData.password = event.target.value;
|
|
},
|
|
showPas(){
|
|
this.showPassword=!this.showPassword
|
|
this.img1 = this.showPassword?"/static/loginIcon/notShow.png":"/static/loginIcon/isShow.png"
|
|
},
|
|
selectClick(){
|
|
this.selectType =!this.selectType
|
|
this.img2= this.selectType?"/static/loginIcon/xz.png":"/static/loginIcon/wgx.png"
|
|
},
|
|
fwxy() {
|
|
uni.navigateTo({
|
|
url: '/pages/login/fwxy'
|
|
})
|
|
},
|
|
yszc() {
|
|
uni.navigateTo({
|
|
url: '/pages/login/yszc'
|
|
})
|
|
},
|
|
boxChange() {
|
|
this.rememberPsw = !this.rememberPsw;
|
|
console.log('rememberPsw:', this.rememberPsw)
|
|
},
|
|
dologin() {
|
|
let _this = this
|
|
if (this.auth()) {
|
|
this.$api.login(_this.formData).then((resp) => {
|
|
// if (resp.success) {
|
|
//勾选就缓存账号、密码
|
|
if (_this.rememberPsw) {
|
|
console.log('rememberPsw1:', _this.rememberPsw)
|
|
uni.setStorageSync('loginName', this.formData.userName);
|
|
uni.setStorageSync('loginPasword', this.formData.password);
|
|
} else { //销毁缓存中的账号、密码
|
|
console.log('rememberPsw2:', _this.rememberPsw)
|
|
uni.removeStorageSync('loginName');
|
|
uni.removeStorageSync('loginPasword');
|
|
}
|
|
|
|
console.log('MMMM:', resp)
|
|
getApp().globalData = resp
|
|
// getApp().globalData.username = uinfo.name
|
|
// getApp().globalData.token = uinfo.token
|
|
// getApp().globalData.sid = uinfo.sid
|
|
// getApp().globalData.mobile = uinfo.mobile
|
|
// getApp().globalData.name = uinfo.name
|
|
// getApp().globalData.isAdmin = uinfo.isAdmin
|
|
// getApp().globalData.roleName = uinfo.roleName
|
|
// getApp().globalData.staffSid = uinfo.staffSid
|
|
console.log('gd--:', getApp().globalData)
|
|
// uni.redirectTo({
|
|
// url: '/pages/index/index',
|
|
// })
|
|
uni.switchTab({
|
|
url: '/pages/home/WorkFragment'
|
|
});
|
|
|
|
}).catch(e => {
|
|
console.log('eeeee', e)
|
|
})
|
|
|
|
// this.$refs.form
|
|
// .validate()
|
|
// .then(r => {
|
|
// _this.$store
|
|
// .dispatch('login', _this.formData)
|
|
// .then(uinfo => {
|
|
// console.log('MMMM:', uinfo)
|
|
// getApp().globalData = uinfo
|
|
// // getApp().globalData.username = uinfo.name
|
|
// // getApp().globalData.token = uinfo.token
|
|
// // getApp().globalData.sid = uinfo.sid
|
|
// // getApp().globalData.mobile = uinfo.mobile
|
|
// // getApp().globalData.name = uinfo.name
|
|
// // getApp().globalData.isAdmin = uinfo.isAdmin
|
|
// // getApp().globalData.roleName = uinfo.roleName
|
|
// // getApp().globalData.staffSid = uinfo.staffSid
|
|
// console.log('gd--:', getApp().globalData)
|
|
// // uni.redirectTo({
|
|
// // url: '/pages/index/index',
|
|
// // })
|
|
// uni.switchTab({
|
|
// url: '/pages/home/WorkFragment'
|
|
// });
|
|
|
|
// })
|
|
// .catch(er => {
|
|
// console.log('EEEE:', er)
|
|
// })
|
|
// })
|
|
// .catch(err => {
|
|
// console.log('eeee:', err)
|
|
// })
|
|
}
|
|
|
|
},
|
|
//校验
|
|
auth() {
|
|
if (this.formData.userName.length < 1 || this.formData.userName == '' && this.formData.password.length <
|
|
1 || this.formData
|
|
.password == '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请输入用户名与密码'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.formData.userName.length < 1 || this.formData.userName == '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请输入用户名'
|
|
});
|
|
return false;
|
|
}
|
|
if (this.formData.password.length < 1 || this.formData.password == '') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请输入密码'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if(!this.selectType){
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请阅读并同意勾选"用户协议"和"隐私政策"'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
forget() {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '暂不支持'
|
|
});
|
|
},
|
|
weixin() {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '暂不支持'
|
|
});
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// .pages {
|
|
// display: flex;
|
|
// height: 100%;
|
|
// padding-left: 35px;
|
|
// padding-right: 35px;
|
|
|
|
// flex-direction: column;
|
|
// background-image: url("../../static/newApp/dlybj.png");
|
|
|
|
// .text1 {
|
|
// margin-top: 120px;
|
|
// color: #fff;
|
|
// font-size: 25px;
|
|
// }
|
|
|
|
// .text2 {
|
|
// margin-top: 10px;
|
|
// color: #fff;
|
|
// font-size: 29px;
|
|
// }
|
|
|
|
// .login {
|
|
// display: flex;
|
|
// margin-top: 20px;
|
|
// padding: 22px 45px;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// background-image: url("../../static/newApp/bbj.png");
|
|
// background-size: 100% 100%;
|
|
|
|
// .item {
|
|
// padding: 10px 10px;
|
|
// margin-top: 23px;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// border: 1px solid #bbb;
|
|
// border-radius: 6px;
|
|
|
|
// .input {
|
|
// margin-left: 5px;
|
|
// width: 150px;
|
|
// font-size: 14px;
|
|
// color: #000;
|
|
// }
|
|
// }
|
|
|
|
// .checkbox {
|
|
// zoom: 80%;
|
|
// font-size: 16px;
|
|
// color: #ababab;
|
|
// }
|
|
|
|
// .forget {
|
|
// font-size: 13px;
|
|
// color: #ababab;
|
|
// }
|
|
|
|
// .btn {
|
|
// margin-top: 35px;
|
|
// border-radius: 5px;
|
|
// background-color: #0B80E7;
|
|
// color: #fff;
|
|
// font-size: 12px;
|
|
// text-align: center;
|
|
// font-family: Microsoft Yahei
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.pages {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.input {
|
|
display: flex;
|
|
width: 70%;
|
|
padding: 10px 15px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 2px solid #f1f1f1;
|
|
|
|
.input-item {
|
|
flex: 1;
|
|
margin-left: 5px;
|
|
padding-right: 5px;
|
|
color: #000;
|
|
font-size: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
.checkbox {
|
|
zoom: 80%;
|
|
font-size: 16px;
|
|
color: #0797ED;
|
|
}
|
|
|
|
.forget {
|
|
font-size: 13px;
|
|
color: #0797ED;
|
|
}
|
|
|
|
.btn {
|
|
width: 70%;
|
|
margin-top: 35px;
|
|
border-radius: 5px;
|
|
background-color: #0B80E7;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
font-family: Microsoft Yahei
|
|
}
|
|
}
|
|
</style>
|