From 3e278ce6e2d54020c24c7588cafe9b807fef4af5 Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Mon, 6 May 2024 17:12:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=92=8C?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8F=90=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                            |   2 +
 src/mycomponents/common/comMessage.vue | 723 ++++++++++++-------------
 src/pages.json                         |   8 +-
 src/pages/login/index.vue              | 294 ++++------
 4 files changed, 482 insertions(+), 545 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index c19c9640..677698d8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import * as Pinia from 'pinia'
 // @ts-ignore
 import uView from 'vk-uview-ui'
 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.$time = time
+	app.component('com-message', comMessage)
 
 
 
diff --git a/src/mycomponents/common/comMessage.vue b/src/mycomponents/common/comMessage.vue
index b81f2019..3e32c73b 100644
--- a/src/mycomponents/common/comMessage.vue
+++ b/src/mycomponents/common/comMessage.vue
@@ -11,7 +11,7 @@
 					</rich-text>
 
 				</slot>
-			<view class='split_line'></view>
+				<view class='split_line'></view>
 				<slot name="button">
 					<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">
@@ -29,395 +29,386 @@
 	</view>
 </template>
 
-<script>
+<script setup lang="ts">
 	/**
 	 * modal 模态框
 	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
 	 * */
-	export default {
-		data() {
-			return {
-				timer: null,
-				show: false, // 是否显示
-				iconType: '消息',
-				icon: '../../static/icons/error-circle.svg',
-				title: '', // 提示标题
-				content: '', // 提示内容
-				cancelText: '取消', // 取消按钮的文字  
-				confirmText: '确定', // 确认按钮文字  
-				showCancel: true, // 是否显示取消按钮，默认为 true
-				confirmColor: '#007aff', // 确定按钮颜色
-				cancelColor: null, // 取消按钮颜色
-				showConfirmButton: true, // 是否显示确认按钮
-				showConfirmCountdown: true, // 是否显示确定倒计时
-				showCancelButton: true, // 是否显示取消按钮
-				showClose: false,
-				confirm: false, //为 true 时，表示用户点击了确定按钮
-				cancel: false, //为 true 时，表示用户点击了取消
-				isDisabled: true, //为 true 时，表示用户可以点击，反之则不可以
-				seconds: 0,
-				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);
-							}
-						}
+	 import {
+	 	ref,
+	 	getCurrentInstance
+	 } from 'vue'
+	const timer = ref(null)
+	const show = ref(false) // 是否显示
+	const iconType = ref('消息')
+	const icon = ref('../../static/icons/error-circle.svg')
+	const title = ref('')
+	const content = ref('') // 提示内容
+	const cancelText = ref('取消') // 取消按钮的文字  
+	const confirmText = ref('确定') // 确认按钮文字  
+	const showCancel = ref(true) //  是否显示取消按钮，默认为 true  
+	const confirmColor = ref('#007aff') // 确定按钮颜色 
+	const cancelColor = ref(null) // 取消按钮颜色 
+	const showConfirmButton = ref(true) // 是否显示确认按钮 
+	const showConfirmCountdown = ref(true) // 是否显示确定倒计时 
+	const showCancelButton = ref(true) // 是否显示取消按钮 
+	const showClose = ref(false)
+	const confirm = ref(false) //为 true 时，表示用户点击了确定按钮
+	const cancel = ref(false) //为 true 时，表示用户点击了取消
+	const isDisabled = ref(true) //为 true 时，表示用户可以点击，反之则不可以
+	const seconds = ref(0)
+	const success = () => {
 
-					}
-				});
-			},
-
-			// 打开消息弹框(取消+确定）
-			showSelectMessageModal(mContent, callback) {
-				this.showSelectModal("消息", mContent, callback);
-			},
-
-			// 打开成功弹框(取消+确定）
-			showSelectSuccessModal(mContent, callback) {
-				this.showSelectModal("成功", mContent, callback);
-			},
-
-			// 打开失败弹框(取消+确定）
-			showSelectFailModal(mContent, callback) {
-				this.showSelectModal("失败", mContent, callback);
-			},
-
-			// 打开警告弹框(取消+确定）
-			showSelectWarningModal(mContent, callback) {
-				this.showSelectModal("警告", mContent, callback);
-			},
-
-			// 初始化弹框并打开(取消+确定）
-			showSelectModal(mIconType, mContent, callback) {
-				this.showModal({
-					iconType: mIconType,
-					content: mContent,
-					success: function(res) {
-						if (callback != undefined) {
-							if (res.confirm == true) {
-								callback(true);
-								console.log('用户点击确定')
-							} else {
-								callback(false);
-								console.log('用户点击取消')
-							}
-						}
+	}
+	const open = () => {
+		show.value = true;
+		isDisabled.value = true;
+	}
+	const close = () => {
+		show.value = false
+		isDisabled.value = false;
+	}
+	const confirmClose = () => {
+		if (!isDisabled.value) return
+		isDisabled.value = false
+		// console.log('确定点击')
+		if (show.value) {
+			show.value = false;
+			clearInterval(timer.value) //清空timer
+			success({
+				// cancel: false,
+				confirm: true,
+			});
+		}
+	}
+	const cancelClose = () => {
+		if (!isDisabled.value) return
+		isDisabled.value = false
+		clearInterval(timer.value) //清空timer
+		show.value = false
+		success({
+			// cancel: true,
+			confirm: false,
+		});
+	}
+	// 打开消息弹框(确定+倒计时)
+	const showMessage = (mContent, callback) => {
+		showConfirmCountdownModal("消息", mContent, callback);
+	}
+	// 打开成功弹框(确定+倒计时)
+	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
-				} else {
-					this.cancelColor = '#666F83'
-				}
+	// 打开消息弹框(取消+确定）
+	const showSelectMessageModal = (mContent, callback) => {
+		showSelectModal("消息", mContent, callback);
+	}
 
-				if (data.showConfirmButton === false || data.showConfirmButton === true) {
-					this.showConfirmButton = data.showConfirmButton
-				} else {
-					this.showConfirmButton = true
-				}
+	// 打开成功弹框(取消+确定）
+	const showSelectSuccessModal = (mContent, callback) => {
+		showSelectModal("成功", mContent, callback);
+	}
 
-				if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
-					this.showConfirmCountdown = data.showConfirmCountdown
-				} else {
-					this.showConfirmCountdown = false
-				}
+	// 打开失败弹框(取消+确定）
+	const showSelectFailModal = (mContent, callback) => {
+		showSelectModal("失败", mContent, callback);
+	}
 
-				if (data.showCancelButton === false || data.showCancelButton === true) {
-					this.showCancelButton = data.showCancelButton
-				} else {
-					this.showCancelButton = true
-				}
+	// 打开警告弹框(取消+确定）
+	const showSelectWarningModal = (mContent, callback) => {
+		showSelectModal("警告", mContent, callback);
+	}
 
-				if (data.success) {
-					this.success = data.success
-				} else {
-					this.success = () => {}
-				}
-				setTimeout(res => {
-					this.open();
-				}, 500)
-				if (this.showConfirmCountdown) {
-					this.startTimer();
+	// 初始化弹框并打开(取消+确定）
+	const showSelectModal = (mIconType, mContent, callback) => {
+		showModal({
+			iconType: mIconType,
+			content: mContent,
+			success: function(res) {
+				if (callback != undefined) {
+					if (res.confirm == true) {
+						callback(true);
+						console.log('用户点击确定')
+					} else {
+						callback(false);
+						console.log('用户点击取消')
+					}
 				}
 
-			},
-
-			startTimer() {
-				this.seconds = 3;
-				clearInterval(this.timer)
-				this.timer = setInterval(() => {
-					this.seconds--
-					// console.log("倒计时时间", this.seconds);
-					if (this.seconds <= 0) {
-						this.timeUp()
-						return
+			}
+		});
+	}
+
+	// 打开疑问弹框(确定+倒计时)
+	const showConfirmCountdownQuestionModal = (mContent, callback) => {
+		showConfirmCountdownModal("疑问", mContent, callback);
+	}
+
+	// 初始化弹框并打开(确定+倒计时)
+	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)
-				console.log('时间到')
-				this.confirmClose();
-			},
+	// 打开消息弹框(取消+确定+倒计时)
+	const showSelectCountdownMessageModal = (mContent, callback) => {
+		showSelectCountdownModal("消息", mContent, callback);
+	}
 
-		},
+	// 打开成功弹框(取消+确定+倒计时)
+	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>
 <style lang="scss" scoped>
 	.slot-content {
@@ -476,4 +467,4 @@
 	.def_text {
 		color: $uni-color-primary;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index af76b466..50725bf3 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -49,7 +49,13 @@
 		{
 			"path": "pages/login/index",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationBarTitleText": "登录",
+				"navigationBarBackgroundColor": "#476df5",
+				"h5": {
+					"maxWidth": 1190,
+					"navigationBarTextStyle": "white",
+					"navigationBarBackgroundColor": "#476df5 !important"
+				}
 			}
 		},
 
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 9eccb527..8f5f45b0 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,6 +1,5 @@
 <template>
 	<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>
 		<view class="login_title">
 			<text>您好，欢迎使用</text><br>
@@ -10,16 +9,8 @@
 			<view class="loginbox">
 				<form>
 					<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>
-
-					<!-- <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="conone">
 							<view class="title uni-flex">
@@ -36,7 +27,8 @@
 								用户名
 							</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 class="conone">
@@ -44,28 +36,16 @@
 								<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
 								密码
 							</view>
-							<view class="uni-input-wrapper" >
-								<input class="uni-input" style="padding:25rpx" placeholder="请输入密码" :password="showPassword"
-									v-model="password" />
+							<view class="uni-input-wrapper">
+								<input class="uni-input" style="padding:25rpx" placeholder="请输入密码"
+									:password="showPassword" v-model="password" />
 								<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
 									@click="changePassword">&#xe568;</text>
 							</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 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">
 							<input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;"
 								placeholder="请输入验证码" type="number" v-model="code" />
@@ -84,176 +64,134 @@
 				</form>
 			</view>
 		</view>
-		<comMessage ref="comMessage"></comMessage>
+		<com-message ref="comMessageRef" />
 	</view>
 </template>
 
-<script>
+<script setup lang="ts">
+	import {
+		onLoad,
+		onShow,
+		onNavigationBarButtonTap,
+		onReady
+	} from '@dcloudio/uni-app'
+	import {
+		ref,
+		getCurrentInstance
+	} from 'vue'
 	import {
 		getCaptchaImage
 	} from '@/api/request2.js';
 	import {
-		mapState,
-		mapMutations
-	} from 'vuex'
-	import {
-			useCountStore
-		} from '@/store'
+		useCountStore
+	} from '@/store'
 	// 获取自定义的store
 	const store = useCountStore()
-	export default {
-		components: {},
-		data() {
-			return {
-				smloginmsg: "",
-				tenantName: "闻荫源码",
+	const { proxy } = getCurrentInstance()
+	const smloginmsg = ref('')
+	const tenantName = ref('闻荫源码')
+	const username = ref('')
+	const password = ref('')
+	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: "",
 				password: "",
-				tapstyle: 2,
-				loading: false,
-				showPassword: true,
-				imageSrc: "",
 				code: "",
 				uuid: ""
 			}
-		},
-		// computed: mapState(['forcedLogin', 'hasLogin']),
-		mounted() {
-
-			uni.clearStorageSync()
-			uni.clearStorage(); //清除缓存
-			if (process.env.NODE_ENV === 'development') {
-				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
-					}
-				})
+			//密码登录
+			if (tapstyle.value == 2) {
+				logininfo.username = username.value;
+				logininfo.password = password.value
+				logininfo.code = code.value;
+				logininfo.uuid = uuid.value;
+			} else if (tapstyle.value == 1) {
 			}
+			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>
 
 <style>