From 0db50921e776525ac6d35fe50e64c605b6be1374 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期四, 04 九月 2025 14:59:11 +0800
Subject: [PATCH] Merge branch 'ID1766-添加推送登录功能' into test
---
src/views/mobile/bedsideAuxiliaryScreen/components/Login/index.vue | 224 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 224 insertions(+), 0 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Login/index.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/index.vue
new file mode 100644
index 0000000..43c53fc
--- /dev/null
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/index.vue
@@ -0,0 +1,224 @@
+<template>
+ <div class="login-dialog-container">
+ <el-dialog
+ v-model="show"
+ center
+ title="个人用户"
+ width="40%"
+ :show-close="false"
+ class="scheduled-task-dialog"
+ :destroy-on-close="true"
+ :close-on-click-modal="false"
+ >
+ <template #header>
+ <div class="setting-dialog-header">
+ <span class="header-title">个人用户</span>
+ <img
+ :src="closeImg"
+ class="header-close"
+ @click="handleCancel"
+ alt=""
+ />
+ </div>
+ </template>
+ <!-- 已登录 -->
+ <div v-if="isLoginng" class="login-dialog-content loging-content">
+ <UserInfo />
+ </div>
+ <!-- 未登录 -->
+ <div v-else class="login-dialog-content">
+ <div class="qr-code-box">
+ <QrCode :value="qrCodeData" :margin="1" />
+ </div>
+ <div class="qr-text">请扫描二维码进行登录操作</div>
+ </div>
+ <template v-if="isLoginng" #footer>
+ <div class="my-button cancel" @click="onLogout">退出登录</div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, computed } from "vue";
+import closeImg from "@/img/close.png";
+import QrCode from "@/components/QrCode/index.vue";
+import UserInfo from "./userInfo.vue";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+export default {
+ name: "LoginDialog",
+ components: { QrCode, UserInfo },
+ setup() {
+ const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+ const state = reactive({
+ show: false,
+ loading: false,
+ });
+
+ const isLoginng = computed(() => {
+ return !!bedsideAuxiliaryScreenStore.token;
+ });
+
+ const qrCodeData = computed(() => {
+ return {
+ deviceCode: bedsideAuxiliaryScreenStore.deviceCode,
+ };
+ });
+
+ const openDialog = () => {
+ state.show = true;
+ };
+
+ const handleCancel = () => {
+ state.show = false;
+ };
+
+ const onLogout = () => {
+ ElMessageBox.confirm("是否确认退出当前登录用户？", "提示", {
+ confirmButtonText: "确认",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ bedsideAuxiliaryScreenStore.logout();
+ ElMessage({
+ type: "success",
+ message: "退出成功！",
+ });
+ })
+ .catch(() => {});
+ };
+
+ return {
+ ...toRefs(state),
+ closeImg,
+ qrCodeData,
+ isLoginng,
+ handleCancel,
+ openDialog,
+ onLogout,
+ };
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.login-dialog-container {
+ ::v-deep(.el-dialog) {
+ padding: 0;
+ border-radius: 6px;
+ overflow: hidden;
+ }
+ ::v-deep(.el-dialog__footer) {
+ padding: 4px;
+ }
+ ::v-deep(.el-upload-dragger) {
+ height: 65px;
+ padding: 0 !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ ::v-deep(.el-upload-dragger .el-icon--upload) {
+ display: none;
+ }
+ ::v-deep(.el-dialog__header) {
+ padding-bottom: 6px;
+ }
+ .setting-dialog-header {
+ position: relative;
+ height: 16px;
+ background: #769aff;
+ .header-title {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+ font-weight: 500;
+ font-size: 8px;
+ color: #ffffff;
+ line-height: 11px;
+ text-align: center;
+ }
+ .header-close {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 6px;
+ width: 15px;
+ height: 15px;
+ transition: transform 0.2s;
+
+ &:active {
+ opacity: 0.6;
+ transform: translateY(-50%) scale(0.95);
+ }
+ }
+ }
+ .login-dialog-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 12px 6px;
+ &.loging-content {
+ border-bottom: 1px solid #d8d8d8;
+ }
+ .qr-code-box {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 2px;
+ }
+ .qr-text {
+ font-size: 4px;
+ color: #769aff;
+ }
+ }
+
+ .my-button {
+ display: inline-block;
+ border-radius: 2px;
+ padding: 0px 10px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 500;
+ font-size: 7px;
+ color: #ffffff;
+ line-height: 16px;
+ letter-spacing: 1px;
+ text-align: center;
+ font-style: normal;
+ transition: transform 0.1s ease, opacity 0.1s ease;
+ cursor: pointer;
+ &:active {
+ transform: scale(0.95);
+ opacity: 0.8;
+ }
+
+ &:not(:first-child) {
+ margin-left: 6px;
+ }
+ &.cancel {
+ background: #fff;
+ color: #000;
+ border: 1px solid #dedede;
+ }
+ &.confirm {
+ background: #769aff;
+ }
+ &.refresh {
+ background: #e6a23c;
+ }
+ }
+}
+</style>
+<style>
+.scheduled-task-dialog {
+ margin: 0 auto;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0