sfms3.0
/
sfms3.0-uniapp
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登录页面和消息提示组件

pull/1/head
张立 9 months ago
parent
18a518be06
commit
3e278ce6e2
4 changed files with 482 additions and 545 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/main.ts
  2. 723
      src/mycomponents/common/comMessage.vue
  3. 8
      src/pages.json
  4. 294
      src/pages/login/index.vue

2
src/main.ts
View File

@ -3,6 +3,7 @@ import * as Pinia from 'pinia'
// @ts-ignore // @ts-ignore
import uView from 'vk-uview-ui' import uView from 'vk-uview-ui'
import App from './App.vue' import App from './App.vue'
import comMessage from '@/mycomponents/common/comMessage.vue'
@ -30,6 +31,7 @@ export function createApp() {
app.config.globalProperties.$modal = modal app.config.globalProperties.$modal = modal
// 时间对象 // 时间对象
app.config.globalProperties.$time = time app.config.globalProperties.$time = time
app.component('com-message', comMessage)

723
src/mycomponents/common/comMessage.vue
View File

@ -11,7 +11,7 @@
</rich-text> </rich-text>
</slot> </slot>
<view class='split_line'></view> <view class='split_line'></view>
<slot name="button"> <slot name="button">
<view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;"> <view class="uni-flex uni-row u-col-center space-between" style="width: 100%;height: 48px;">
<view v-if="showCancelButton" class="cance_button" @tap="cancelClose"> <view v-if="showCancelButton" class="cance_button" @tap="cancelClose">
@ -29,395 +29,386 @@
</view> </view>
</template> </template>
<script> <script setup lang="ts">
/** /**
* modal 模态框 * modal 模态框
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
* */ * */
export default { import {
data() { ref,
return { getCurrentInstance
timer: null, } from 'vue'
show: false, // 是否显示 const timer = ref(null)
iconType: '消息', const show = ref(false) // 是否显示
icon: '../../static/icons/error-circle.svg', const iconType = ref('消息')
title: '', // 提示标题 const icon = ref('../../static/icons/error-circle.svg')
content: '', // 提示内容 const title = ref('')
cancelText: '取消', // 取消按钮的文字 const content = ref('') // 提示内容
confirmText: '确定', // 确认按钮文字 const cancelText = ref('取消') // 取消按钮的文字
showCancel: true, // 是否显示取消按钮，默认为 true const confirmText = ref('确定') // 确认按钮文字
confirmColor: '#007aff', // 确定按钮颜色 const showCancel = ref(true) // 是否显示取消按钮，默认为 true
cancelColor: null, // 取消按钮颜色 const confirmColor = ref('#007aff') // 确定按钮颜色
showConfirmButton: true, // 是否显示确认按钮 const cancelColor = ref(null) // 取消按钮颜色
showConfirmCountdown: true, // 是否显示确定倒计时 const showConfirmButton = ref(true) // 是否显示确认按钮
showCancelButton: true, // 是否显示取消按钮 const showConfirmCountdown = ref(true) // 是否显示确定倒计时
showClose: false, const showCancelButton = ref(true) // 是否显示取消按钮
confirm: false, //为 true 时，表示用户点击了确定按钮 const showClose = ref(false)
cancel: false, //为 true 时，表示用户点击了取消 const confirm = ref(false) //为 true 时，表示用户点击了确定按钮
isDisabled: true, //为 true 时，表示用户可以点击，反之则不可以 const cancel = ref(false) //为 true 时，表示用户点击了取消
seconds: 0, const isDisabled = ref(true) //为 true 时，表示用户可以点击，反之则不可以
success: () => {} // 回调方法 const seconds = ref(0)
} const success = () => {
},
methods: {
open() {
this.show = true;
this.isDisabled = true;
},
close() {
this.$.refs.modal.popupClose();
this.isDisabled = false;
},
confirmClose() {
if (!this.isDisabled) return
this.isDisabled = false
// console.log('确定点击')
if (this.show) {
this.show = false;
clearInterval(this.timer) //清空timer
this.$.refs.modal.popupClose();
this.success({
// cancel: false,
confirm: true,
});
}
},
cancelClose() {
if (!this.isDisabled) return
this.isDisabled = false
clearInterval(this.timer) //清空timer
this.$.refs.modal.popupClose();
this.success({
// cancel: true,
confirm: false,
});
},
// 打开消息弹框(确定+倒计时)
showMessage(mContent, callback) {
this.showConfirmCountdownModal("消息", mContent, callback);
},
// 打开成功弹框(确定+倒计时)
showSuccessMessage(mContent, callback) {
this.showConfirmCountdownModal("成功", mContent, callback);
},
// 打开失败弹框(确定）
showErrorMessage(mContent, callback) {
this.showConfirmModal("失败", mContent, callback);
},
// 显示崩溃消息(无确定）
showBreakMessage(mContent, callback) {
this.showNoButtonModal("失败", mContent, callback);
},
// 打开疑问弹框(取消+确定）
showQuestionMessage(mContent, callback) {
this.showSelectModal("疑问", mContent, callback);
},
// 打开警告弹框(确定+倒计时)
showWarningMessage(mContent, callback) {
this.showConfirmCountdownModal("警告", mContent, callback);
},
// 打开失败弹框(确定+倒计时)
showConfirmCountdownFailModal(mContent, callback) {
this.showConfirmCountdownModal("失败", mContent, callback);
},
// 打开消息弹框(确定）
showConfirmMessageModal(mContent, callback) {
this.showConfirmModal("消息", mContent, callback);
},
// 打开成功弹框(确定）
showConfirmSuccessModal(mContent, callback) {
this.showConfirmModal("成功", mContent, callback);
},
// 打开警告弹框(确定）
showConfirmWarningModal(mContent, callback) {
this.showConfirmModal("警告", mContent, callback);
},
// 打开疑问弹框(确定）
showConfirmQuestionModal(mContent, callback) {
this.showConfirmModal("疑问", mContent, callback);
},
// 初始化弹框并打开(确定）
showNoButtonModal(mIconType, mContent, callback) {
this.showModal({
iconType: mIconType,
content: mContent,
showConfirmButton:false,
showCancelButton: false,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
}
}
}
});
},
// 初始化弹框并打开(确定）
showConfirmModal(mIconType, mContent, callback) {
this.showModal({
iconType: mIconType,
content: mContent,
showCancelButton: false,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
}
}
} }
}); const open = () => {
}, show.value = true;
isDisabled.value = true;
// 打开消息弹框(取消+确定） }
showSelectMessageModal(mContent, callback) { const close = () => {
this.showSelectModal("消息", mContent, callback); show.value = false
}, isDisabled.value = false;
}
// 打开成功弹框(取消+确定） const confirmClose = () => {
showSelectSuccessModal(mContent, callback) { if (!isDisabled.value) return
this.showSelectModal("成功", mContent, callback); isDisabled.value = false
}, // console.log('确定点击')
if (show.value) {
// 打开失败弹框(取消+确定） show.value = false;
showSelectFailModal(mContent, callback) { clearInterval(timer.value) //清空timer
this.showSelectModal("失败", mContent, callback); success({
}, // cancel: false,
confirm: true,
// 打开警告弹框(取消+确定） });
showSelectWarningModal(mContent, callback) { }
this.showSelectModal("警告", mContent, callback); }
}, const cancelClose = () => {
if (!isDisabled.value) return
// 初始化弹框并打开(取消+确定） isDisabled.value = false
showSelectModal(mIconType, mContent, callback) { clearInterval(timer.value) //清空timer
this.showModal({ show.value = false
iconType: mIconType, success({
content: mContent, // cancel: true,
success: function(res) { confirm: false,
if (callback != undefined) { });
if (res.confirm == true) { }
callback(true); // 打开消息弹框(确定+倒计时)
console.log('用户点击确定') const showMessage = (mContent, callback) => {
} else { showConfirmCountdownModal("消息", mContent, callback);
callback(false); }
console.log('用户点击取消') // 打开成功弹框(确定+倒计时)
} const showSuccessMessage = (mContent, callback) => {
} showConfirmCountdownModal("成功", mContent, callback);
}
// 打开失败弹框(确定）
const showErrorMessage = (mContent, callback) => {
console.log(333)
showConfirmModal("失败", mContent, callback);
}
// 显示崩溃消息(无确定）
const showBreakMessage = (mContent, callback) => {
showNoButtonModal("失败", mContent, callback);
}
// 打开疑问弹框(取消+确定）
const showQuestionMessage = (mContent, callback) => {
showSelectModal("疑问", mContent, callback);
}
// 打开警告弹框(确定+倒计时)
const showWarningMessage = (mContent, callback) => {
showConfirmCountdownModal("警告", mContent, callback);
}
// 打开失败弹框(确定+倒计时)
const showConfirmCountdownFailModal = (mContent, callback) => {
showConfirmCountdownModal("失败", mContent, callback);
}
// 打开消息弹框(确定）
const showConfirmMessageModal = (mContent, callback) => {
showConfirmModal("消息", mContent, callback);
}
// 打开成功弹框(确定）
const showConfirmSuccessModall = (mContent, callback) => {
showConfirmModal("成功", mContent, callback);
}
// 打开警告弹框(确定）
const showConfirmWarningModal = (mContent, callback) => {
showConfirmModal("警告", mContent, callback);
}
// 打开疑问弹框(确定）
const showConfirmQuestionModal = (mContent, callback) => {
showConfirmModal("疑问", mContent, callback);
}
// 初始化弹框并打开(确定）
const showNoButtonModal = (mIconType, mContent, callback) => {
showModal({
iconType: mIconType,
content: mContent,
showConfirmButton: false,
showCancelButton: false,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
} }
});
},
// 打开疑问弹框(确定+倒计时)
showConfirmCountdownQuestionModal(mContent, callback) {
this.showConfirmCountdownModal("疑问", mContent, callback);
},
// 初始化弹框并打开(确定+倒计时)
showConfirmCountdownModal(mIconType, mContent, callback) {
this.showModal({
iconType: mIconType,
content: mContent,
showCancelButton: false,
showConfirmCountdown: true,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
}
}
}
});
},
// 打开消息弹框(取消+确定+倒计时)
showSelectCountdownMessageModal(mContent, callback) {
this.showSelectCountdownModal("消息", mContent, callback);
},
// 打开成功弹框(取消+确定+倒计时)
showSelectCountdownSuccessModal(mContent, callback) {
this.showSelectCountdownModal("成功", mContent, callback);
},
// 打开失败弹框(取消+确定+倒计时)
showSelectCountdownFailModal(mContent, callback) {
this.showSelectCountdownModal("失败", mContent, callback);
},
// 打开警告弹框(取消+确定+倒计时)
showSelectCountdownWarningModal(mContent, callback) {
this.showSelectCountdownModal("警告", mContent, callback);
},
// 打开疑问弹框(取消+确定+倒计时)
showSelectCountdownQuestionModal(mContent, callback) {
this.showSelectCountdownModal("疑问", mContent, callback);
},
// 初始化弹框并打开(取消+确定+倒计时)
showSelectCountdownModal(mIconType, mContent, callback) {
this.showModal({
iconType: mIconType,
content: mContent,
showConfirmCountdown: true,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
console.log('用户点击确定')
} else {
callback(false);
console.log('用户点击取消')
}
}
}
});
},
// 初始化弹框并打开
showModal(data) {
if (data.iconType) {
this.iconType = data.iconType
switch (data.iconType) {
case '消息':
this.icon = '/static/icons/error-circle.svg';
break;
case '成功':
this.icon = '/static/icons/checkmark-circle.svg';
break;
case '失败':
this.icon = '/static/icons/close-circle.svg';
break;
case '警告':
this.icon = '/static/icons/warning.svg';
break;
case '疑问':
this.icon = '/static/icons/question-circle.svg';
break;
default:
break;
}
}
// image
if (data.title) {
this.title = data.title
}
if (data.content) {
this.content = data.content
} else {
this.content = ''
}
if (data.cancelText) {
this.cancelText = data.cancelText
} else {
this.cancelText = '取消'
}
if (data.confirmText) {
this.confirmText = data.confirmText
} else {
this.confirmText = '确定'
} }
if (data.showCancel === false || data.showCancel === true) { }
this.showCancel = data.showCancel });
} else { }
this.showCancel = true // 初始化弹框并打开(确定）
const showConfirmModal = (mIconType, mContent, callback) => {
console.log(222)
showModal({
iconType: mIconType,
content: mContent,
showCancelButton: false,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
}
} }
if (data.confirmColor) { }
this.confirmColor = data.confirmColor });
} else { }
this.confirmColor = '#007aff'
}
if (data.cancelColor) { // 打开消息弹框(取消+确定）
this.cancelColor = data.cancelColor const showSelectMessageModal = (mContent, callback) => {
} else { showSelectModal("消息", mContent, callback);
this.cancelColor = '#666F83' }
}
if (data.showConfirmButton === false || data.showConfirmButton === true) { // 打开成功弹框(取消+确定）
this.showConfirmButton = data.showConfirmButton const showSelectSuccessModal = (mContent, callback) => {
} else { showSelectModal("成功", mContent, callback);
this.showConfirmButton = true }
}
if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) { // 打开失败弹框(取消+确定）
this.showConfirmCountdown = data.showConfirmCountdown const showSelectFailModal = (mContent, callback) => {
} else { showSelectModal("失败", mContent, callback);
this.showConfirmCountdown = false }
}
if (data.showCancelButton === false || data.showCancelButton === true) { // 打开警告弹框(取消+确定）
this.showCancelButton = data.showCancelButton const showSelectWarningModal = (mContent, callback) => {
} else { showSelectModal("警告", mContent, callback);
this.showCancelButton = true }
}
if (data.success) { // 初始化弹框并打开(取消+确定）
this.success = data.success const showSelectModal = (mIconType, mContent, callback) => {
} else { showModal({
this.success = () => {} iconType: mIconType,
} content: mContent,
setTimeout(res => { success: function(res) {
this.open(); if (callback != undefined) {
}, 500) if (res.confirm == true) {
if (this.showConfirmCountdown) { callback(true);
this.startTimer(); console.log('用户点击确定')
} else {
callback(false);
console.log('用户点击取消')
}
} }
}, }
});
startTimer() { }
this.seconds = 3;
clearInterval(this.timer) // 打开疑问弹框(确定+倒计时)
this.timer = setInterval(() => { const showConfirmCountdownQuestionModal = (mContent, callback) => {
this.seconds-- showConfirmCountdownModal("疑问", mContent, callback);
// console.log("倒计时时间", this.seconds); }
if (this.seconds <= 0) {
this.timeUp() // 初始化弹框并打开(确定+倒计时)
return const showConfirmCountdownModal = (mIconType, mContent, callback) => {
showModal({
iconType: mIconType,
content: mContent,
showCancelButton: false,
showConfirmCountdown: true,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
} else {
callback(false);
} }
}, 1000) }
}, }
});
}
timeUp() { // 打开消息弹框(取消+确定+倒计时)
// clearInterval(this.timer) const showSelectCountdownMessageModal = (mContent, callback) => {
console.log('时间到') showSelectCountdownModal("消息", mContent, callback);
this.confirmClose(); }
},
}, // 打开成功弹框(取消+确定+倒计时)
const showSelectCountdownSuccessModal = (mContent, callback) => {
showSelectCountdownModal("成功", mContent, callback);
}
// 打开失败弹框(取消+确定+倒计时)
const showSelectCountdownFailModal = (mContent, callback) => {
showSelectCountdownModal("失败", mContent, callback);
}
// 打开警告弹框(取消+确定+倒计时)
const showSelectCountdownWarningModal = (mContent, callback) => {
showSelectCountdownModal("警告", mContent, callback);
}
// 打开疑问弹框(取消+确定+倒计时)
const showSelectCountdownQuestionModal = (mContent, callback) => {
showSelectCountdownModal("疑问", mContent, callback);
}
// 初始化弹框并打开(取消+确定+倒计时)
const showSelectCountdownModal = (mIconType, mContent, callback) => {
showModal({
iconType: mIconType,
content: mContent,
showConfirmCountdown: true,
success: function(res) {
if (callback != undefined) {
if (res.confirm == true) {
callback(true);
console.log('用户点击确定')
} else {
callback(false);
console.log('用户点击取消')
}
}
}
});
}
// 初始化弹框并打开
const showModal = (data) => {
if (data.iconType) {
iconType.value = data.iconType
switch (data.iconType) {
case '消息':
icon.value = '/static/icons/error-circle.svg';
break;
case '成功':
icon.value = '/static/icons/checkmark-circle.svg';
break;
case '失败':
icon.value = '/static/icons/close-circle.svg';
break;
case '警告':
icon.value = '/static/icons/warning.svg';
break;
case '疑问':
icon.value = '/static/icons/question-circle.svg';
break;
default:
break;
}
}
// image
if (data.title) {
title.value = data.title
}
if (data.content) {
content.value = data.content
} else {
content.value = ''
}
if (data.cancelText) {
cancelText.value = data.cancelText
} else {
cancelText.value = '取消'
}
if (data.confirmText) {
confirmText.value = data.confirmText
} else {
confirmText.value = '确定'
}
if (data.showCancel === false || data.showCancel === true) {
showCancel.value = data.showCancel
} else {
showCancel.value = true
}
if (data.confirmColor) {
confirmColor.value = data.confirmColor
} else {
confirmColor.value = '#007aff'
}
if (data.cancelColor) {
cancelColor.value = data.cancelColor
} else {
cancelColor.value = '#666F83'
}
if (data.showConfirmButton === false || data.showConfirmButton === true) {
showConfirmButton.value = data.showConfirmButton
} else {
showConfirmButton.value = true
}
if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
showConfirmCountdown.value = data.showConfirmCountdown
} else {
showConfirmCountdown.value = false
}
if (data.showCancelButton === false || data.showCancelButton === true) {
showCancelButton.value = data.showCancelButton
} else {
showCancelButton.value = true
}
if (data.success) {
success = data.success
} else {
success = () => {}
}
setTimeout(res => {
open();
}, 500)
if (showConfirmCountdown.value) {
startTimer();
}
}
const startTimer = () => {
seconds.value = 3;
clearInterval(timer.value)
timer.value = setInterval(() => {
seconds.value--
// console.log("倒计时时间", this.seconds);
if (seconds.value <= 0) {
timeUp()
return
}
}, 1000)
}
const timeUp = () => {
// clearInterval(this.timer)
console.log('时间到')
confirmClose();
} }
defineExpose({ showErrorMessage }) // 提供 open 方法，用于打开弹窗
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.slot-content { .slot-content {
@ -476,4 +467,4 @@
.def_text { .def_text {
color: $uni-color-primary; color: $uni-color-primary;
} }
</style> </style>

8
src/pages.json
View File

@ -49,7 +49,13 @@
{ {
"path": "pages/login/index", "path": "pages/login/index",
"style": { "style": {
"navigationBarTitleText": "登录" "navigationBarTitleText": "登录",
"navigationBarBackgroundColor": "#476df5",
"h5": {
"maxWidth": 1190,
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#476df5 !important"
}
} }
}, },

294
src/pages/login/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<view class="content"> <view class="content">
<!-- <image mode="widthFix" class="loginimg" src="../../static/login.png"></image> -->
<image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image> <image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image>
<view class="login_title"> <view class="login_title">
<text>您好，欢迎使用</text><br> <text>您好，欢迎使用</text><br>
@ -10,16 +9,8 @@
<view class="loginbox"> <view class="loginbox">
<form> <form>
<view class="mytab"> <view class="mytab">
<!-- <view class="mytabline" :class="tapstyle == 1?'active':''" @click="tapchenge(1)">扫码登录</view> -->
<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view> <view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view>
</view> </view>
<!-- <view class="mybox" v-if="tapstyle == 1">
<view class="conone">
<uni-easyinput prefixIcon="scan" class="uni-input" type="password" v-model="smloginmsg"
name="nickname" placeholder="扫码登录"></uni-easyinput>
</view>
</view> -->
<view class="mybox" v-if="tapstyle == 2"> <view class="mybox" v-if="tapstyle == 2">
<view class="conone"> <view class="conone">
<view class="title uni-flex"> <view class="title uni-flex">
@ -36,7 +27,8 @@
用户名 用户名
</view> </view>
<view> <view>
<input class="uni-input" style="padding:25rpx" placeholder="请输入用户名" v-model="username" /> <input class="uni-input" style="padding:25rpx" placeholder="请输入用户名"
v-model="username" />
</view> </view>
</view> </view>
<view class="conone"> <view class="conone">
@ -44,28 +36,16 @@
<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image> <image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
密码 密码
</view> </view>
<view class="uni-input-wrapper" > <view class="uni-input-wrapper">
<input class="uni-input" style="padding:25rpx" placeholder="请输入密码" :password="showPassword" <input class="uni-input" style="padding:25rpx" placeholder="请输入密码"
v-model="password" /> :password="showPassword" v-model="password" />
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
@click="changePassword">&#xe568;</text> @click="changePassword">&#xe568;</text>
</view> </view>
<!-- <view class="uni-input-wrapper">
<input class="uni-input" type="password" name="password"
:password="showPassword"
placeholder="请输入密码" v-model="password"></input>
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
</view> -->
</view> </view>
</view> </view>
<view style="display: flex;flex-direction: row;"> <view style="display: flex;flex-direction: row;">
<!-- <view class="uni-input">
<input class="" placeholder="请输入验证码"
v-model="code"
style="background-color: lightgray;padding-top: 40rpx;padding-bottom: 40rpx;margin-right: 20rpx;" />
</view> -->
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;" <input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;"
placeholder="请输入验证码" type="number" v-model="code" /> placeholder="请输入验证码" type="number" v-model="code" />
@ -84,176 +64,134 @@
</form> </form>
</view> </view>
</view> </view>
<comMessage ref="comMessage"></comMessage> <com-message ref="comMessageRef" />
</view> </view>
</template> </template>
<script> <script setup lang="ts">
import {
onLoad,
onShow,
onNavigationBarButtonTap,
onReady
} from '@dcloudio/uni-app'
import {
ref,
getCurrentInstance
} from 'vue'
import { import {
getCaptchaImage getCaptchaImage
} from '@/api/request2.js'; } from '@/api/request2.js';
import { import {
mapState, useCountStore
mapMutations } from '@/store'
} from 'vuex'
import {
useCountStore
} from '@/store'
// 获取自定义的store // 获取自定义的store
const store = useCountStore() const store = useCountStore()
export default { const { proxy } = getCurrentInstance()
components: {}, const smloginmsg = ref('')
data() { const tenantName = ref('闻荫源码')
return { const username = ref('')
smloginmsg: "", const password = ref('')
tenantName: "闻荫源码", const tapstyle = ref(2)
const loading = ref(false)
const showPassword = ref(true)
const imageSrc = ref('')
const code = ref('')
const uuid = ref('')
const comMessageRef = ref('')
// 返回首页
onNavigationBarButtonTap((e) => {
if (e.index === 0) {
uni.navigateTo({
url: "/pages/config/config"
})
}
})
onReady(() => {
console.log()
})
onLoad(() => {
uni.clearStorageSync()
uni.clearStorage(); //清除缓存
if (import.meta.env.VITE_USER_NODE_ENV === 'development') {
username.value = "admin"
password.value = "123456";
}
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: "#476DF5 !important"
})
// #ifdef APP-PLUS
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#476DF5"
})
// #endif
getCode()
})
const handelerlogin = () => {
if (username.value === '') {
proxy.$modal.showToast('用户名不能为空')
} else if (password.value === '') {
proxy.$modal.showToast('密码不能为空')
} else if (code.value === '') {
proxy.$modal.showToast('验证码不能为空')
} else {
// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
let logininfo = {
username: "", username: "",
password: "", password: "",
tapstyle: 2,
loading: false,
showPassword: true,
imageSrc: "",
code: "", code: "",
uuid: "" uuid: ""
} }
}, //密码登录
// computed: mapState(['forcedLogin', 'hasLogin']), if (tapstyle.value == 2) {
mounted() { logininfo.username = username.value;
logininfo.password = password.value
uni.clearStorageSync() logininfo.code = code.value;
uni.clearStorage(); //清除缓存 logininfo.uuid = uuid.value;
if (process.env.NODE_ENV === 'development') { } else if (tapstyle.value == 1) {
this.username = "admin"
this.password = "123456";
}
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: "#476DF5 !important"
})
// #ifdef APP-PLUS
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#476DF5"
})
// #endif
},
//返回首页
onNavigationBarButtonTap(e) {
if (e.index === 0) {
uni.navigateTo({
url: "/pages/config/config"
})
}
},
onLoad() {
getCaptchaImage().then(res => {
if (res) {
var code = res.data.img;
let base64 = 'data:image/jpeg;base64,' + code
// console.log("图标", base64)
this.imageSrc = base64.replace(/[\r\n]/g, "")
this.uuid = res.data.uuid
}
}).catch(error => {
this.showErrorMessage(error);
})
},
methods: {
// ...mapMutations(['login']),
handelerlogin() {
if (this.username === '') {
uni.showToast({
title: '用户名不能为空',
icon: 'none',
mask: true
})
} else if (this.password === '') {
uni.showToast({
title: '密码不能为空',
icon: 'none',
mask: true
})
} else if (this.code === '') {
uni.showToast({
title: '验证码不能为空',
icon: 'none',
mask: true
})
} else {
// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
let logininfo = {
username: "",
password: "",
code: "",
uuid: ""
}
if (this.tapstyle == 2) //密码登录
{
logininfo.username = this.username;
logininfo.password = this.password
logininfo.code = this.code;
logininfo.uuid = this.uuid;
} else if (this.tapstyle == 1) {
// let arr = Base64.decode(this.smloginmsg).split(':')
// logininfo.username = arr[0];
// logininfo.password = arr[1]
}
let params = JSON.stringify(logininfo);
console.log('params', params);
this.newLogin(logininfo)
}
},
async newLogin(logininfo) {
uni.showLoading({
title: "正在登录",
mask: true
})
await store.Login(logininfo)
// await this.$store.dispatch('Login', logininfo);
// await this.$store.dispatch('GetTenantIdInfo', this.tenantName)
uni.hideLoading()
uni.setStorageSync('hasLogin', true)
uni.switchTab({
url: '/pages/index/index'
});
uni.setStorageSync('username', this.username);
},
tapchenge(e) {
this.tapstyle = e
},
onchange(e) {
const value = e.detail.value
},
changePassword: function() {
this.showPassword = !this.showPassword;
},
showErrorMessage(message) {
this.$refs.comMessage.showErrorMessage(message, res => {
if (res) {
}
});
},
getCode() {
getCaptchaImage().then(res => {
if (res) {
var code = res.data.img;
let base64 = 'data:image/jpeg;base64,' + code
this.imageSrc = base64.replace(/[\r\n]/g, "")
this.uuid = res.data.uuid
}
})
} }
let params = JSON.stringify(logininfo);
newLogin(logininfo)
} }
} }
const newLogin = async (logininfo) => {
proxy.$modal.loading('正在登录')
await store.Login(logininfo)
proxy.$modal.closeLoading()
uni.setStorageSync('hasLogin', true)
uni.switchTab({
url: '/pages/index/index'
});
uni.setStorageSync('username', username.value);
}
const tapchenge = (e) => {
tapstyle.value = e
}
const onchange = (e) => {
const value = e.detail.value
}
const changePassword = () => {
showPassword.vlaue = !showPassword.vlaue;
}
const showErrorMessage = (message) => {
console.log(comMessag1e.value)
comMessageRef.value.showErrorMessage(message, res => { });
}
const getCode = () => {
getCaptchaImage().then(res => {
if (res) {
var code = res.data.img;
let base64 = 'data:image/jpeg;base64,' + code
imageSrc.value = base64.replace(/[\r\n]/g, "")
uuid.value = res.data.uuid
}
}).catch(error => {
showErrorMessage(error)
})
}
</script> </script>
<style> <style>

Write Preview
Loading…
Cancel
Save