首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
281
pages/ctms/login/login.vue
Normal file
281
pages/ctms/login/login.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<image src="@/static/logo.png" mode="aspectFit"></image>
|
||||
<text v-if="userinfo.mobile" class="tip">您当前已登陆账号：{{userinfo.username}}</text>
|
||||
</view>
|
||||
<uni-notice-bar text="在这里,您可以通过邮箱或手机号进行登陆。" />
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">账号</view>
|
||||
<input class="uni-input" name="username" v-model="FormData.username" placeholder="您的手机号或用户名" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">密码</view>
|
||||
<input class="uni-input" name="passwd" v-model="FormData.passwd" type="password" placeholder="" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">持久登陆</view>
|
||||
<view>
|
||||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<uni-row class="demo-uni-row" width="100%">
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-success" form-type="submit">登陆</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-default" type="default" form-type="reset">重置</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<button class="btn btn-info" type="default" @click="goToSms">使用验证码登陆</button>
|
||||
<button class="btn btn-info" type="warn" @click="logout">注销</button>
|
||||
<button :hidden="true" class="btn btn-success" type="primary" @click="authApp">一键授权</button>
|
||||
<button class="btn btn-primary" type="primary" @click="goToReg">注册</button>
|
||||
<button class="btn btn-info" type="default" @click="callMe">技术支持</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
|
||||
<view class="footer" v-if="FormData.username">
|
||||
您好，您刚填写的用户名是：{{FormData.username}}。如果您在登陆过程中遇到任何问题，请联系技术部门或您的直属管理人员解决。
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import graceChecker from "@/common/graceChecker.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import hi from '@/common/util.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
FormData: {
|
||||
username: '',
|
||||
passwd: ''
|
||||
},
|
||||
isLong: 1,
|
||||
uniIdRedirectUrl: '',
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async authApp() {
|
||||
//TODO 主包内单独设计一个授权页面，子项目则调用并确认，后端接收用户数据并自动注册绑定到子项目。
|
||||
var res = await ctms.user.oneKeyAuth();
|
||||
if (res) {
|
||||
this.userinfo = res;
|
||||
utils.toast('授权完成！');
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
//定义表单规则
|
||||
var rule = [{
|
||||
name: "username",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "用户名不能为空"
|
||||
},
|
||||
{
|
||||
name: "passwd",
|
||||
checkType: "string",
|
||||
checkRule: "8,32",
|
||||
errorMsg: "密码不对"
|
||||
}
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (!checkRes) {
|
||||
uni.showToast({
|
||||
title: graceChecker.error,
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
//请求封装
|
||||
ctms.user.login(formData).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "登陆成功!",
|
||||
icon: "success"
|
||||
});
|
||||
if (this.uniIdRedirectUrl) {
|
||||
uni.redirectTo({
|
||||
url: this.uniIdRedirectUrl
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空登陆表单数据')
|
||||
},
|
||||
async logout() {
|
||||
var res = await ctms.user.logout();
|
||||
if (res) {
|
||||
uni.reLaunch({
|
||||
url: '../tabbar/index/index'
|
||||
})
|
||||
}
|
||||
this.userinfo = {};
|
||||
},
|
||||
goToReg() {
|
||||
uni.navigateTo({
|
||||
url: './reg'
|
||||
})
|
||||
},
|
||||
goToSms() {
|
||||
uni.navigateTo({
|
||||
url: './loginSms?uniIdRedirectUrl=' + encodeURIComponent(this.uniIdRedirectUrl)
|
||||
})
|
||||
},
|
||||
callMe: function(e) {
|
||||
var phone = config.kfPhone;
|
||||
// hi.tel(phone);
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
|
||||
},
|
||||
onLoad: function(o) {
|
||||
var user = ctms.user.checkLogin();
|
||||
this.userinfo = user;
|
||||
// 自动跳转到登录页面时会携带uniIdRedirectUrl参数
|
||||
if (o.uniIdRedirectUrl) {
|
||||
this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("login.css");
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user