From 67461f55748c32d885db965bdff6c2cc63eb327b Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 09 二月 2026 13:36:24 +0800
Subject: [PATCH] 推送cid传值,以及打卡签到模块开发
---
src/pages/index.vue | 10
src/pages/login.vue | 529 +++++----
src/pages/attendance/report.vue | 505 +++++++++
src/api/login.js | 9
src/pages.json | 14
src/pages/attendance/checkin.vue | 855 ++++++++++++++++
src/App.vue | 2
src/pages_template/pages/login/index2.vue | 1219 ++++++++++++----------
8 files changed, 2,318 insertions(+), 825 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 5d802fc..9023f62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,6 +28,8 @@
console.log("浣跨敤 plus.push.getClientInfo 鑾峰彇瀹㈡埛绔爣璇�");
plus.push.getClientInfoAsync(info => {
console.log("瀹㈡埛绔帹閫佹爣璇�:", info);
+ uni.setStorageSync("clientid", info.clientid);
+
// 杩欓噷鍙互灏嗗鎴风鏍囪瘑鍙戦�佸埌鏈嶅姟鍣�
});
setTimeout(() => {
diff --git a/src/api/login.js b/src/api/login.js
index 87ab52c..7622fc4 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -48,4 +48,13 @@
method: 'get',
params: params
})
+}
+
+// 鍙戦�佸鎴风鎺ㄩ�佹爣璇嗗埌鏈嶅姟鍣�
+export function updateClientId(data) {
+ return request({
+ url: '/system/client/addOrUpdateClientId',
+ method: 'post',
+ data: data
+ })
}
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 805d0f1..351c7dc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -856,6 +856,20 @@
"navigationBarTitleText": "鍩硅璁板綍",
"navigationStyle": "custom"
}
+ },
+ {
+ "path": "pages/attendance/checkin",
+ "style": {
+ "navigationBarTitleText": "鎵撳崱绛惧埌",
+ "navigationStyle": "custom"
+ }
+ },
+ {
+ "path": "pages/attendance/report",
+ "style": {
+ "navigationBarTitleText": "鑰冨嫟鏃ユ姤",
+ "navigationStyle": "custom"
+ }
}
],
"subPackages": [
diff --git a/src/pages/attendance/checkin.vue b/src/pages/attendance/checkin.vue
new file mode 100644
index 0000000..0cb0fd6
--- /dev/null
+++ b/src/pages/attendance/checkin.vue
@@ -0,0 +1,855 @@
+<template>
+ <view class="attendance-checkin">
+ <!-- 椤甸潰澶撮儴 -->
+ <PageHeader title="鎵撳崱绛惧埌"
+ @back="goBack" />
+ <!-- 浠婃棩鑰冨嫟鍖哄煙 -->
+ <view class="today-attendance">
+ <view class="attendance-header">
+ <text class="attendance-title">浠婃棩鑰冨嫟</text>
+ </view>
+ <!-- 鐝淇℃伅 -->
+ <view class="shift-info">
+ <view class="shift-item">
+ <u-icon name="calendar"
+ color="#348fe2"
+ size="16"></u-icon>
+ <text class="shift-text">鐧界彮: 09:00-18:00</text>
+ </view>
+ <!-- <view v-if="todayRecord?.checkInTime"
+ class="shift-item">
+ <u-icon name="checkmark-circle"
+ color="#4cd964"
+ size="16"></u-icon>
+ <text class="shift-text">{{ todayRecord.checkInTime }}宸叉墦鍗�</text>
+ </view> -->
+ </view>
+ <!-- 鎵撳崱鎸夐挳 -->
+ <view class="checkin-button-container">
+ <view class="checkin-button-wrapper">
+ <view class="checkin-button"
+ :class="{ 'disabled': checkInOutText === '宸叉墦鍗�' }"
+ @click="handleCheckInOut">
+ <text class="checkin-button-text">{{ checkInOutText }}</text>
+ <text class="checkin-time">{{ nowTime.split(' ')[1] }}</text>
+ </view>
+ </view>
+ <!-- 鎵撳崱鑼冨洿鐘舵�� -->
+ </view>
+ </view>
+ <!-- 鎴戠殑鑰冨嫟璁板綍 -->
+ <view class="attendance-records">
+ <view class="records-header">
+ <text class="records-title">浠婃棩鑰冨嫟</text>
+ <view @click="navigateToReport"
+ class="detail-button">鏌ョ湅璇︽儏</view>
+ </view>
+ <!-- 鍛樺伐淇℃伅 -->
+ <view class="employee-info">
+ <view class="info-item">
+ <text class="info-label">閮ㄩ棬</text>
+ <text class="info-value">{{ currentUser.dept }}</text>
+ </view>
+ <view class="info-item">
+ <text class="info-label">濮撳悕</text>
+ <text class="info-value">{{ currentUser.name }}</text>
+ </view>
+ <view class="info-item">
+ <text class="info-label">宸ュ彿</text>
+ <text class="info-value">{{ currentUser.no }}</text>
+ </view>
+ </view>
+ <!-- 浠婃棩鑰冨嫟鐘舵�� -->
+ <view class="today-status">
+ <u-icon :name="todayRecord ? 'checkmark-circle' : 'close-circle'"
+ :color="todayRecord ? '#4cd964' : '#ff3b30'"
+ size="16"></u-icon>
+ <text class="status-text">
+ {{ todayRecord ? `浠婃棩鑰冨嫟: 涓婄彮 ${todayRecord.checkInTime}` : '浠婃棩鏈墦鍗�' }}
+ </text>
+ </view>
+ <!-- 涓嬬彮鑰冨嫟鐘舵�� -->
+ <view v-if="todayRecord && todayRecord.checkOutTime"
+ class="today-status">
+ <u-icon :name="todayRecord ? 'checkmark-circle' : 'close-circle'"
+ :color="todayRecord ? '#4cd964' : '#ff3b30'"
+ size="16"></u-icon>
+ <text class="status-text">
+ {{ `浠婃棩鑰冨嫟: 涓嬬彮 ${todayRecord.checkOutTime}` }}
+ </text>
+ </view>
+ <!-- 鎵撳崱鐘舵�� -->
+ <view v-if="todayRecord"
+ class="today-status">
+ <u-icon :name="todayRecord.status === 'normal' ? 'checkmark-circle' : 'clock'"
+ :color="todayRecord.status === 'normal' ? '#4cd964' : '#ff3b30'"
+ size="16"></u-icon>
+ <text class="status-text">
+ {{ `鎵撳崱鐘舵��: ${todayRecord.statusText}` }}
+ </text>
+ </view>
+ <view v-else
+ class="today-status">
+ <u-icon name="clock"
+ color="#ff3b30"
+ size="16"></u-icon>
+ <text class="status-text">
+ 鎵撳崱鐘舵��: 缂哄崱
+ </text>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script setup>
+ import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+ import PageHeader from "@/components/PageHeader.vue";
+ // 妯℃嫙褰撳墠鐧诲綍鍛樺伐
+ const currentUser = reactive({
+ id: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ });
+
+ // 妯℃嫙鑰冨嫟鍘熷鏁版嵁
+ const rawAttendance = ref([
+ {
+ id: 2,
+ date: "2026-02-08",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "09:15",
+ checkOutTime: "18:05",
+ workHours: 8.8,
+ status: "late",
+ statusText: "杩熷埌",
+ remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
+ },
+ {
+ id: 3,
+ date: "2026-02-07",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:45",
+ checkOutTime: "18:30",
+ workHours: 9.7,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "鍔犵彮0.5灏忔椂",
+ },
+ ]);
+
+ // 褰撳墠鏃堕棿灞曠ず
+ const nowTime = ref("");
+ let timer = null;
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ uni.navigateBack();
+ };
+
+ // 鎵撳崱鑼冨洿鐘舵��
+ const inCheckRange = ref(true);
+
+ // 褰撳墠浣嶇疆
+ const currentLocation = ref(null);
+
+ const updateNowTime = () => {
+ const now = new Date();
+ const Y = now.getFullYear();
+ const M = String(now.getMonth() + 1).padStart(2, "0");
+ const D = String(now.getDate()).padStart(2, "0");
+ const h = String(now.getHours()).padStart(2, "0");
+ const m = String(now.getMinutes()).padStart(2, "0");
+ const s = String(now.getSeconds()).padStart(2, "0");
+ nowTime.value = `${Y}-${M}-${D} ${h}:${m}:${s}`;
+ };
+
+ // 浠婃棩鏃ユ湡
+ const todayStr = computed(() => nowTime.value.slice(0, 10));
+
+ // 褰撴棩褰撳墠鍛樺伐鑰冨嫟璁板綍
+ const todayRecord = computed(() =>
+ rawAttendance.value.find(
+ item => item.userId === currentUser.id && item.date === todayStr.value
+ )
+ );
+
+ // 鎵撳崱鎸夐挳鏂囨湰
+ const checkInOutText = computed(() => {
+ if (!todayRecord.value || !todayRecord.value.checkInTime) {
+ return "涓婄彮鎵撳崱";
+ }
+ if (!todayRecord.value.checkOutTime) {
+ return "涓嬬彮鎵撳崱";
+ }
+ return "宸叉墦鍗�";
+ });
+
+ // 鐢熸垚鏈�杩戞棩鏈�
+ const recentDates = computed(() => {
+ const dates = [];
+ const today = new Date();
+
+ // 鑾峰彇鏈�杩�7澶╃殑鏃ユ湡
+ for (let i = 6; i >= 0; i--) {
+ const date = new Date(today);
+ date.setDate(today.getDate() - i);
+
+ const dateStr = `${date.getFullYear()}-${String(
+ date.getMonth() + 1
+ ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+ const hasRecord = rawAttendance.value.some(item => item.date === dateStr);
+
+ dates.push({
+ date: dateStr,
+ day: date.getDate(),
+ isToday: i === 0,
+ hasRecord,
+ });
+ }
+
+ return dates;
+ });
+
+ // 瀵艰埅鍒拌缁嗘姤鍛婇〉闈�
+ const navigateToReport = () => {
+ uni.navigateTo({
+ url: "/pages/attendance/report",
+ });
+ };
+
+ // 鑾峰彇浣嶇疆鏉冮檺
+ const getLocationPermission = () => {
+ return new Promise((resolve, reject) => {
+ // #ifdef APP-PLUS
+ uni.getAppAuthorizeSetting({
+ success: res => {
+ if (res.authSetting["scope.userLocation"]) {
+ resolve(true);
+ } else {
+ uni.requestAppAuthorize({
+ scope: "scope.userLocation",
+ success: res => {
+ resolve(res.authSetting["scope.userLocation"]);
+ },
+ fail: err => {
+ reject(err);
+ },
+ });
+ }
+ },
+ fail: err => {
+ reject(err);
+ },
+ });
+ // #else
+ // 闈濧PP鐜鐩存帴杩斿洖鎴愬姛
+ resolve(true);
+ // #endif
+ });
+ };
+
+ // 鑾峰彇褰撳墠浣嶇疆
+ const getCurrentLocation = () => {
+ return new Promise((resolve, reject) => {
+ uni.getLocation({
+ type: "wgs84",
+ success: res => {
+ currentLocation.value = res;
+ // 妯℃嫙妫�鏌ユ槸鍚﹀湪鎵撳崱鑼冨洿鍐咃紙瀹為檯椤圭洰涓簲鏍规嵁鍏徃浣嶇疆鍜屽厑璁哥殑鍗婂緞杩涜璁＄畻锛�
+ // 杩欓噷绠�鍗曟ā鎷熶负濮嬬粓鍦ㄨ寖鍥村唴
+ inCheckRange.value = true;
+ resolve(res);
+ },
+ fail: err => {
+ console.error("鑾峰彇浣嶇疆澶辫触:", err);
+ // 澶辫触鏃堕粯璁ゅ厑璁告墦鍗★紙瀹為檯椤圭洰涓簲鏍规嵁涓氬姟闇�姹傚鐞嗭級
+ inCheckRange.value = true;
+ reject(err);
+ },
+ });
+ });
+ };
+
+ // 鎵撳崱閫昏緫锛堜粎鍓嶇妯℃嫙锛�
+ const handleCheckInOut = async () => {
+ // 妫�鏌ユ槸鍚﹀湪鎵撳崱鑼冨洿鍐�
+ if (!inCheckRange.value) {
+ uni.showToast({
+ title: "涓嶅湪鎵撳崱鑼冨洿鍐咃紝鏃犳硶鎵撳崱",
+ icon: "none",
+ });
+ return;
+ }
+
+ const [dateStr, timeStr] = nowTime.value.split(" ");
+ if (!dateStr || !timeStr) return;
+
+ // 涓婄彮鎵撳崱
+ if (!todayRecord.value) {
+ const newId = rawAttendance.value.length
+ ? Math.max(...rawAttendance.value.map(i => i.id)) + 1
+ : 1;
+ const status = timeStr > "09:00:00" ? "late" : "normal";
+ const statusText = status === "late" ? "杩熷埌" : "姝ｅ父";
+ rawAttendance.value.push({
+ id: newId,
+ date: dateStr,
+ userId: currentUser.id,
+ name: currentUser.name,
+ no: currentUser.no,
+ dept: currentUser.dept,
+ checkInTime: timeStr.slice(0, 5),
+ checkOutTime: "",
+ workHours: null,
+ status,
+ statusText,
+ remark: "",
+ });
+ uni.showToast({
+ title: "涓婄彮鎵撳崱鎴愬姛",
+ icon: "success",
+ });
+ } else if (!todayRecord.value.checkOutTime) {
+ // 涓嬬彮鎵撳崱
+ todayRecord.value.checkOutTime = timeStr.slice(0, 5);
+ // 绠�鍗曟寜 9:00-18:00 璁＄畻宸ユ椂
+ const start = todayRecord.value.checkInTime || "09:00";
+ const [sh, sm] = start.split(":").map(v => parseInt(v, 10));
+ const [eh, em] = todayRecord.value.checkOutTime
+ .split(":")
+ .map(v => parseInt(v, 10));
+ const diff = (eh * 60 + em - (sh * 60 + sm)) / 60;
+ todayRecord.value.workHours = Number(Math.max(diff, 0).toFixed(1));
+
+ // 鏃╅��鍒ゆ柇锛�18:00 鍓嶇寮�瑙嗕负鏃╅��锛堝彧绀烘剰锛�
+ if (timeStr < "18:00:00") {
+ if (todayRecord.value.status === "late") {
+ // 鏃㈣繜鍒板張鏃╅��
+ todayRecord.value.status = "late-early";
+ todayRecord.value.statusText = "杩熷埌 + 鏃╅��";
+ } else {
+ // 浠呮棭閫�
+ todayRecord.value.status = "early";
+ todayRecord.value.statusText = "鏃╅��";
+ }
+ } else if (todayRecord.value.status === "normal") {
+ todayRecord.value.statusText = "姝ｅ父";
+ }
+ uni.showToast({
+ title: "涓嬬彮鎵撳崱鎴愬姛",
+ icon: "success",
+ });
+ } else {
+ uni.showToast({
+ title: "浠婃棩宸插畬鎴愪笂涓嬬彮鎵撳崱",
+ icon: "none",
+ });
+ }
+ };
+
+ onMounted(async () => {
+ updateNowTime();
+ timer = setInterval(updateNowTime, 1000);
+
+ // 鑾峰彇浣嶇疆鏉冮檺骞舵鏌ヤ綅缃�
+ try {
+ await getLocationPermission();
+ await getCurrentLocation();
+ } catch (error) {
+ console.error("浣嶇疆鏉冮檺鑾峰彇澶辫触:", error);
+ }
+ });
+
+ onBeforeUnmount(() => {
+ if (timer) {
+ clearInterval(timer);
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ // 鍏ㄥ眬鍙橀噺
+ $primary-color: #2c7be5;
+ $primary-light: #4a90e2;
+ $success-color: #4cd964;
+ $warning-color: #ff9500;
+ $danger-color: #ff3b30;
+ $text-primary: #333333;
+ $text-secondary: #666666;
+ $text-tertiary: #999999;
+ $bg-color: #f5f7fa;
+ $card-bg: #ffffff;
+ $border-color: #e8e8e8;
+ $shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+ $shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+ $shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+
+ .attendance-checkin {
+ min-height: 100vh;
+ background-color: $bg-color;
+ padding-bottom: 30rpx;
+ background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* 浠婃棩鑰冨嫟鍖哄煙 */
+ .today-attendance {
+ background-color: $card-bg;
+ margin: 20rpx;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ padding: 32rpx;
+ transition: all 0.3s ease;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .today-attendance:hover {
+ box-shadow: $shadow-lg;
+ transform: translateY(-2rpx);
+ }
+
+ .attendance-header {
+ margin-bottom: 24rpx;
+ display: flex;
+ align-items: center;
+ }
+
+ .attendance-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: $text-primary;
+ position: relative;
+ padding-left: 16rpx;
+ }
+
+ .attendance-title::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4rpx;
+ height: 20rpx;
+ background-color: $primary-color;
+ border-radius: 2rpx;
+ }
+
+ /* 鐝淇℃伅 */
+ .shift-info {
+ margin-bottom: 36rpx;
+ padding: 20rpx;
+ background-color: rgba($primary-color, 0.05);
+ border-radius: 12rpx;
+ border-left: 4rpx solid $primary-color;
+ }
+
+ .shift-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16rpx;
+ }
+
+ .shift-item:last-child {
+ margin-bottom: 0;
+ }
+
+ .shift-item u-icon {
+ margin-right: 14rpx;
+ transition: all 0.3s ease;
+ }
+
+ .shift-item:hover u-icon {
+ transform: scale(1.1);
+ }
+
+ .shift-text {
+ font-size: 14px;
+ color: $text-secondary;
+ font-weight: 500;
+ }
+
+ /* 鎵撳崱鎸夐挳瀹瑰櫒 */
+ .checkin-button-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 20rpx;
+ flex: 1;
+ justify-content: center;
+ }
+
+ /* 鎵撳崱鎸夐挳 */
+ .checkin-button-wrapper {
+ position: relative;
+ margin-bottom: 36rpx;
+ margin-top: 40rpx;
+ }
+
+ .checkin-button {
+ width: 260rpx;
+ height: 260rpx;
+ border-radius: 50%;
+ background: linear-gradient(135deg, $primary-color, $primary-light);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8rpx 32rpx rgba($primary-color, 0.4);
+ transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .checkin-button::before {
+ content: "";
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(
+ 45deg,
+ transparent,
+ rgba(255, 255, 255, 0.1),
+ transparent
+ );
+ transform: rotate(45deg);
+ animation: shine 3s infinite;
+ opacity: 0;
+ }
+
+ @keyframes shine {
+ 0% {
+ transform: translateX(-100%) rotate(45deg);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.3;
+ }
+ 100% {
+ transform: translateX(100%) rotate(45deg);
+ opacity: 0;
+ }
+ }
+
+ .checkin-button:hover:not(.disabled) {
+ transform: scale(1.08);
+ box-shadow: 0 12rpx 40rpx rgba($primary-color, 0.5);
+ }
+
+ .checkin-button:active:not(.disabled) {
+ transform: scale(0.98);
+ }
+
+ .checkin-button.disabled {
+ background: linear-gradient(135deg, #d1d1d6, #e5e5ea);
+ box-shadow: $shadow-sm;
+ cursor: not-allowed;
+ }
+
+ .checkin-button-text {
+ font-size: 22px;
+ font-weight: 700;
+ color: #ffffff;
+ margin-bottom: 12rpx;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+ z-index: 1;
+ }
+
+ .checkin-time {
+ font-size: 16px;
+ color: rgba(255, 255, 255, 0.95);
+ font-weight: 500;
+ z-index: 1;
+ }
+
+ /* 鎵撳崱鑼冨洿鐘舵�� */
+ .location-status {
+ display: flex;
+ align-items: center;
+ margin-top: 16rpx;
+ padding: 16rpx 24rpx;
+ background-color: rgba($success-color, 0.05);
+ border-radius: 8rpx;
+ border-left: 4rpx solid $success-color;
+ transition: all 0.3s ease;
+ }
+
+ .location-status.warning {
+ background-color: rgba($danger-color, 0.05);
+ border-left-color: $danger-color;
+ }
+
+ .location-status u-icon {
+ margin-right: 10rpx;
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .location-text {
+ font-size: 14px;
+ color: $text-secondary;
+ font-weight: 500;
+ }
+
+ .location-text.warning {
+ color: $danger-color;
+ }
+
+ /* 鑰冨嫟璁板綍鍖哄煙 */
+ .attendance-records {
+ background-color: $card-bg;
+ margin: 0 20rpx 20rpx;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ padding: 32rpx;
+ transition: all 0.3s ease;
+ }
+
+ .attendance-records:hover {
+ box-shadow: $shadow-lg;
+ transform: translateY(-2rpx);
+ }
+
+ .records-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24rpx;
+ padding-bottom: 16rpx;
+ border-bottom: 1rpx solid $border-color;
+ }
+
+ .records-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: $text-primary;
+ position: relative;
+ padding-left: 12rpx;
+ width: 300rpx;
+ }
+
+ .records-title::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3rpx;
+ height: 16rpx;
+ background-color: $primary-color;
+ border-radius: 1.5rpx;
+ }
+
+ .detail-button {
+ font-size: 14px;
+ color: $primary-color;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 8rpx 16rpx;
+ border-radius: 6rpx;
+ float: right;
+ }
+
+ .detail-button:hover {
+ background-color: rgba($primary-color, 0.1);
+ transform: translateX(4rpx);
+ }
+
+ /* 鍛樺伐淇℃伅 */
+ .employee-info {
+ background-color: rgba($primary-color, 0.05);
+ border-radius: 12rpx;
+ padding: 20rpx;
+ margin-bottom: 24rpx;
+ }
+
+ .info-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12rpx;
+ }
+
+ .info-item:last-child {
+ margin-bottom: 0;
+ }
+
+ .info-label {
+ font-size: 13px;
+ color: $text-secondary;
+ font-weight: 500;
+ width: 80rpx;
+ }
+
+ .info-value {
+ font-size: 13px;
+ color: $text-primary;
+ font-weight: 500;
+ flex: 1;
+ }
+
+ /* 鏃ユ湡閫夋嫨鍣� */
+ .date-picker {
+ margin-bottom: 24rpx;
+ }
+
+ .weekday {
+ display: inline-block;
+ width: 44rpx;
+ text-align: center;
+ font-size: 12px;
+ color: $text-tertiary;
+ margin-bottom: 12rpx;
+ font-weight: 500;
+ }
+
+ .date-items {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .date-item {
+ width: 44rpx;
+ height: 44rpx;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: $text-secondary;
+ background-color: rgba($primary-color, 0.05);
+ transition: all 0.3s ease;
+ cursor: pointer;
+ }
+
+ .date-item:hover {
+ background-color: rgba($primary-color, 0.1);
+ transform: scale(1.1);
+ }
+
+ .date-item.active {
+ background-color: $primary-color;
+ color: #ffffff;
+ font-weight: 600;
+ box-shadow: 0 2rpx 8rpx rgba($primary-color, 0.3);
+ }
+
+ .date-item.has-record {
+ position: relative;
+ }
+
+ .date-item.has-record::after {
+ content: "";
+ position: absolute;
+ bottom: 4rpx;
+ width: 8rpx;
+ height: 8rpx;
+ border-radius: 50%;
+ background-color: $success-color;
+ box-shadow: 0 1rpx 2rpx rgba($success-color, 0.3);
+ }
+
+ /* 浠婃棩鑰冨嫟鐘舵�� */
+ .today-status {
+ display: flex;
+ align-items: center;
+ margin-top: 24rpx;
+ padding: 20rpx;
+ background-color: rgba($primary-color, 0.05);
+ border-radius: 12rpx;
+ transition: all 0.3s ease;
+ }
+
+ .today-status:hover {
+ background-color: rgba($primary-color, 0.08);
+ }
+
+ .today-status u-icon {
+ margin-right: 14rpx;
+ transition: all 0.3s ease;
+ }
+
+ .today-status:hover u-icon {
+ transform: scale(1.1);
+ }
+
+ .status-text {
+ font-size: 14px;
+ color: $text-secondary;
+ font-weight: 500;
+ margin-left: 10rpx;
+ }
+
+ /* 鍝嶅簲寮忚皟鏁� */
+ @media (max-width: 375px) {
+ .today-attendance,
+ .attendance-records {
+ margin: 12rpx;
+ padding: 24rpx;
+ }
+
+ .checkin-button {
+ width: 220rpx;
+ height: 220rpx;
+ }
+
+ .checkin-button-text {
+ font-size: 20px;
+ }
+
+ .checkin-time {
+ font-size: 14px;
+ }
+
+ .weekday {
+ width: 38rpx;
+ }
+
+ .date-item {
+ width: 38rpx;
+ height: 38rpx;
+ }
+ }
+
+ /* 鍔ㄧ敾鏁堟灉 */
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20rpx);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .today-attendance,
+ .attendance-records {
+ animation: fadeInUp 0.5s ease-out;
+ }
+
+ .attendance-records {
+ animation-delay: 0.2s;
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/attendance/report.vue b/src/pages/attendance/report.vue
new file mode 100644
index 0000000..8894174
--- /dev/null
+++ b/src/pages/attendance/report.vue
@@ -0,0 +1,505 @@
+<template>
+ <view class="attendance-report">
+ <!-- 椤甸潰澶撮儴 -->
+ <PageHeader title="鑰冨嫟鏃ユ姤"
+ @back="goBack" />
+ <!-- 鎼滅储鍜岀瓫閫夊尯鍩� -->
+ <view class="search-section">
+ <view class="search-bar">
+ <view @click="selectDate"
+ class="search-input">
+ <view class="search-text">{{ searchForm.date? searchForm.date : '璇烽�夋嫨鏃ユ湡' }}</view>
+ </view>
+ <view class="filter-button"
+ @click="clearDate">
+ <u-icon name="close-circle"
+ size="24"
+ color="#999"></u-icon>
+ </view>
+ </view>
+ </view>
+ <!-- 鏃ユ湡閫夋嫨鍣� -->
+ <up-datetime-picker :show="showDatePicker"
+ mode="date"
+ v-model="currentDate"
+ @confirm="handleDateConfirm"
+ @cancel="showDatePicker = false"
+ title="鎼滅储鏃ユ湡" />
+ <view class="record-list">
+ <view v-for="(item) in tableData"
+ :key="item.id"
+ class="record-item-card"
+ :class="{ 'abnormal': item.status !== 'normal' }">
+ <view class="record-item-header">
+ <text class="record-date">{{ item.date }}</text>
+ <u-tag :type="item.status === 'normal' ? 'success' : 'error'"
+ size="small">
+ {{ item.statusText }}
+ </u-tag>
+ </view>
+ <view class="record-item-body">
+ <view class="record-detail">
+ <text class="detail-label">鍛樺伐</text>
+ <text class="detail-value">{{ item.name }} ({{ item.no }})</text>
+ </view>
+ <view class="record-detail">
+ <text class="detail-label">閮ㄩ棬</text>
+ <text class="detail-value">{{ item.dept }}</text>
+ </view>
+ <view class="record-detail">
+ <text class="detail-label">涓婄彮鏃堕棿</text>
+ <text class="detail-value">{{ item.checkInTime ? item.checkInTime : '缂哄崱' }}</text>
+ </view>
+ <view class="record-detail">
+ <text class="detail-label">涓嬬彮鏃堕棿</text>
+ <text class="detail-value">{{ item.checkOutTime? item.checkOutTime : '缂哄崱' }}</text>
+ </view>
+ <view class="record-detail">
+ <text class="detail-label">宸ユ椂</text>
+ <text class="detail-value">{{ item.workHours ? item.workHours + '灏忔椂' : '-' }}</text>
+ </view>
+ <view v-if="item.remark"
+ class="record-detail">
+ <text class="detail-label">澶囨敞</text>
+ <text class="detail-value">{{ item.remark }}</text>
+ </view>
+ </view>
+ </view>
+ <!-- 绌虹姸鎬� -->
+ <view v-if="tableData.length === 0"
+ class="empty-state">
+ <u-icon name="clock-o"
+ size="60"
+ color="#999"></u-icon>
+ <text class="empty-text">鏆傛棤鑰冨嫟璁板綍</text>
+ </view>
+ </view>
+ <!-- 瀵煎嚭鎸夐挳 -->
+ <!-- <view class="export-section">
+ <u-button type="default"
+ size="medium"
+ text="瀵煎嚭鑰冨嫟鏃ユ姤"
+ @click="handleExport"
+ class="export-btn"></u-button>
+ </view> -->
+ </view>
+</template>
+
+<script setup>
+ import { ref, reactive, onMounted } from "vue";
+ import PageHeader from "@/components/PageHeader.vue";
+ import dayjs from "dayjs";
+
+ // 妯℃嫙褰撳墠鐧诲綍鍛樺伐
+ const currentUser = reactive({
+ id: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ });
+
+ // 閮ㄩ棬閫夐」
+ const deptOptions = [
+ { label: "鐢熶骇涓�閮�", value: "鐢熶骇涓�閮�" },
+ { label: "鐢熶骇浜岄儴", value: "鐢熶骇浜岄儴" },
+ { label: "璁惧缁存姢閮�", value: "璁惧缁存姢閮�" },
+ { label: "璐ㄦ閮�", value: "璐ㄦ閮�" },
+ ];
+
+ // 妯℃嫙鑰冨嫟鍘熷鏁版嵁
+ const rawAttendance = ref([
+ {
+ id: 1,
+ date: "2026-02-09",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:58",
+ checkOutTime: "",
+ workHours: null,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "",
+ },
+ {
+ id: 2,
+ date: "2026-02-08",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "09:15",
+ checkOutTime: "18:05",
+ workHours: 8.8,
+ status: "late",
+ statusText: "杩熷埌",
+ remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
+ },
+ {
+ id: 3,
+ date: "2026-02-07",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:45",
+ checkOutTime: "18:30",
+ workHours: 9.7,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "鍔犵彮0.5灏忔椂",
+ },
+ {
+ id: 4,
+ date: "2026-02-06",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:50",
+ checkOutTime: "17:45",
+ workHours: 8.9,
+ status: "early",
+ statusText: "鏃╅��",
+ remark: "瀹朵腑鏈変簨鎻愬墠绂诲紑",
+ },
+ {
+ id: 5,
+ date: "2026-02-05",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:40",
+ checkOutTime: "18:20",
+ workHours: 9.7,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "鍔犵彮0.5灏忔椂",
+ },
+ ]);
+
+ // 鏌ヨ琛ㄥ崟
+ const searchForm = reactive({
+ dept: "",
+ date: "",
+ });
+
+ // 琛ㄦ牸鏁版嵁
+ const tableData = ref([]);
+
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ uni.navigateBack();
+ };
+
+ // 鏃ユ湡閫夋嫨鍣�
+ const showDatePicker = ref(false);
+ const currentDate = ref(new Date());
+
+ // 澶勭悊鏃ユ湡閫夋嫨
+ const handleDateConfirm = e => {
+ currentDate.value = e.value;
+ searchForm.date = dayjs(e.value).format("YYYY-MM-DD");
+ showDatePicker.value = false;
+ handleQuery();
+ };
+
+ // 鏄剧ず鏃ユ湡閫夋嫨鍣�
+ const selectDate = () => {
+ showDatePicker.value = true;
+ };
+
+ // 娓呴櫎鏃ユ湡閫夋嫨
+ const clearDate = () => {
+ searchForm.date = "";
+ handleQuery();
+ };
+
+ // 鏌ヨ
+ const recomputeTable = () => {
+ const list = rawAttendance.value.filter(item => {
+ if (searchForm.dept && item.dept !== searchForm.dept) {
+ return false;
+ }
+ if (searchForm.date && item.date !== searchForm.date) {
+ return false;
+ }
+ return true;
+ });
+ tableData.value = list;
+ };
+
+ const handleQuery = () => {
+ recomputeTable();
+ };
+
+ const resetSearch = () => {
+ searchForm.dept = "";
+ searchForm.date = "";
+ recomputeTable();
+ };
+
+ // 瀵煎嚭锛堟紨绀猴級
+ const handleExport = () => {
+ uni.showToast({
+ title: "褰撳墠涓烘紨绀洪〉闈紝瀵煎嚭鍔熻兘鏈鎺ュ疄闄呮帴鍙�",
+ icon: "none",
+ });
+ };
+
+ onMounted(() => {
+ // 榛樿灞曠ず褰撳ぉ鏁版嵁
+ // const today = new Date();
+ // const Y = today.getFullYear();
+ // const M = String(today.getMonth() + 1).padStart(2, "0");
+ // const D = String(today.getDate()).padStart(2, "0");
+ // searchForm.date = `${Y}-${M}-${D}`;
+ recomputeTable();
+ });
+</script>
+
+<style scoped lang="scss">
+ // 鍏ㄥ眬鍙橀噺
+ $primary-color: #2c7be5;
+ $primary-light: #4a90e2;
+ $success-color: #4cd964;
+ $warning-color: #ff9500;
+ $danger-color: #ff3b30;
+ $text-primary: #333333;
+ $text-secondary: #666666;
+ $text-tertiary: #999999;
+ $bg-color: #f5f7fa;
+ $card-bg: #ffffff;
+ $border-color: #e8e8e8;
+ $shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+ $shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+ $shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+
+ .attendance-report {
+ min-height: 100vh;
+ background-color: $bg-color;
+ padding-bottom: 30rpx;
+ background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+ }
+
+ /* 鎼滅储鍜岀瓫閫夊尯鍩� */
+ .search-section {
+ background-color: $card-bg;
+ margin: 20rpx;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ padding: 20rpx;
+ margin-bottom: 24rpx;
+ transition: all 0.3s ease;
+ }
+
+ .search-section:hover {
+ box-shadow: $shadow-lg;
+ transform: translateY(-2rpx);
+ }
+
+ .search-bar {
+ display: flex;
+ align-items: center;
+ background-color: rgba($primary-color, 0.05);
+ border-radius: 8rpx;
+ padding: 0 16rpx;
+ height: 70rpx;
+ }
+
+ .search-input {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .search-text {
+ font-size: 14px;
+ color: $text-tertiary;
+ height: 70rpx;
+ line-height: 70rpx;
+ margin-left: 8rpx;
+ }
+
+ .filter-button {
+ padding: 8rpx;
+ transition: all 0.3s ease;
+ }
+
+ .filter-button:hover {
+ background-color: rgba($primary-color, 0.1);
+ border-radius: 4rpx;
+ }
+
+ /* 璁板綍鍒楄〃 */
+ .record-list {
+ margin: 0 20rpx 24rpx;
+ }
+
+ .record-item-card {
+ background-color: $card-bg;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ margin-bottom: 24rpx;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ }
+
+ .record-item-card:hover {
+ box-shadow: $shadow-lg;
+ transform: translateY(-2rpx);
+ }
+
+ .record-item-card.abnormal {
+ background-color: rgba($danger-color, 0.05);
+ border-left: 4rpx solid $danger-color;
+ }
+
+ .record-item-header {
+ background-color: rgba($primary-color, 0.05);
+ padding: 20rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1rpx solid $border-color;
+ }
+
+ .record-date {
+ font-size: 14px;
+ font-weight: 600;
+ color: $text-primary;
+ }
+
+ .record-item-body {
+ padding: 24rpx;
+ }
+
+ .record-detail {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16rpx;
+ padding: 8rpx 0;
+ border-bottom: 1rpx solid rgba($border-color, 0.5);
+ }
+
+ .record-detail:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ }
+
+ .detail-label {
+ font-size: 13px;
+ color: $text-secondary;
+ font-weight: 500;
+ }
+
+ .detail-value {
+ font-size: 13px;
+ color: $text-primary;
+ font-weight: 500;
+ }
+
+ /* 绌虹姸鎬� */
+ .empty-state {
+ background-color: $card-bg;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ text-align: center;
+ padding: 120rpx 0;
+ margin: 0 20rpx;
+ transition: all 0.3s ease;
+ }
+
+ .empty-state:hover {
+ box-shadow: $shadow-lg;
+ }
+
+ .empty-text {
+ font-size: 14px;
+ color: $text-tertiary;
+ margin-top: 24rpx;
+ font-weight: 500;
+ }
+
+ /* 瀵煎嚭鎸夐挳 */
+ .export-section {
+ text-align: center;
+ margin: 0 20rpx 30rpx;
+ }
+
+ .export-btn {
+ width: 100%;
+ border-radius: 8rpx;
+ border: 1rpx solid $primary-color;
+ color: $primary-color;
+ transition: all 0.3s ease;
+ }
+
+ .export-btn:hover {
+ background-color: $primary-color;
+ color: #ffffff;
+ box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.3);
+ transform: translateY(-2rpx);
+ }
+
+ /* 鍝嶅簲寮忚皟鏁� */
+ @media (max-width: 375px) {
+ .search-section,
+ .record-list,
+ .empty-state,
+ .export-section {
+ margin: 12rpx;
+ }
+
+ .search-section {
+ padding: 16rpx;
+ }
+
+ .record-item-body {
+ padding: 20rpx;
+ }
+ }
+
+ /* 鍔ㄧ敾鏁堟灉 */
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20rpx);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .search-section,
+ .record-item-card,
+ .empty-state,
+ .export-section {
+ animation: fadeInUp 0.5s ease-out;
+ }
+
+ .record-item-card {
+ animation-delay: 0.1s;
+ }
+
+ .record-item-card:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ .record-item-card:nth-child(3) {
+ animation-delay: 0.3s;
+ }
+
+ .empty-state {
+ animation-delay: 0.2s;
+ }
+
+ .export-section {
+ animation-delay: 0.3s;
+ }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7f0408c..1395867 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -374,6 +374,10 @@
icon: "/static/images/icon/kehubaifang@2x.png",
label: "瀹㈡埛鎷滆",
},
+ {
+ icon: "/static/images/icon/guzhangfenxi@2x.png",
+ label: "鎵撳崱绛惧埌",
+ },
]);
// 鐢熶骇绠℃帶鍔熻兘鏁版嵁
@@ -733,7 +737,11 @@
url: "/pages/safeProduction/safetyTrainingAssessment/index",
});
break;
-
+ case "鎵撳崱绛惧埌":
+ uni.navigateTo({
+ url: "/pages/attendance/checkin",
+ });
+ break;
default:
uni.showToast({
title: `鐐瑰嚮浜�${item.label}`,
diff --git a/src/pages/login.vue b/src/pages/login.vue
index cae7ce2..9135392 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,259 +1,302 @@
<template>
- <view class="normal-login-container">
- <view class="logo-content">
- <text>璐﹀彿瀵嗙爜鐧诲綍</text>
- </view>
- <view class="login-form-content">
- <view class="input-item flex align-center">
- <up-input prefixIcon="account" placeholder="璇疯緭鍏ヨ处鍙�" border="bottom"
- @blur="getUserLoginFacotryList"
- maxlength="30" v-model="loginForm.userName" clearable></up-input>
- </view>
- <view class="input-item flex align-center">
- <up-input prefixIcon="lock" placeholder="璇疯緭鍏ュ瘑鐮�" border="bottom" maxlength="20" v-model="loginForm.password" clearable type="password"></up-input>
- </view>
- <view>
- <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
- </view>
- </view>
- <!-- 璁颁綇瀵嗙爜閫夐」 -->
- <view class="remember-password">
- <up-checkbox
- :customStyle="{marginBottom: '8px'}"
- label="璁颁綇瀵嗙爜"
- name="agree"
- usedAlone
- v-model:checked="rememberPassword"
- >
- </up-checkbox>
- </view>
- </view>
+ <view class="normal-login-container">
+ <view class="logo-content">
+ <text>璐﹀彿瀵嗙爜鐧诲綍</text>
+ </view>
+ <view class="login-form-content">
+ <view class="input-item flex align-center">
+ <up-input prefixIcon="account"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ border="bottom"
+ @blur="getUserLoginFacotryList"
+ maxlength="30"
+ v-model="loginForm.userName"
+ clearable></up-input>
+ </view>
+ <view class="input-item flex align-center">
+ <up-input prefixIcon="lock"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ border="bottom"
+ maxlength="20"
+ v-model="loginForm.password"
+ clearable
+ type="password"></up-input>
+ </view>
+ <view>
+ <button @click="handleLogin"
+ class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
+ </view>
+ </view>
+ <!-- 璁颁綇瀵嗙爜閫夐」 -->
+ <view class="remember-password">
+ <up-checkbox :customStyle="{marginBottom: '8px'}"
+ label="璁颁綇瀵嗙爜"
+ name="agree"
+ usedAlone
+ v-model:checked="rememberPassword">
+ </up-checkbox>
+ </view>
+ </view>
</template>
<script setup>
-import {modal} from "@/plugins";
+ import { modal } from "@/plugins";
-const showToast = (message) => {
- uni.showToast({
- title: message,
- icon: 'none'
- })
-}
-import { userLoginFacotryList} from '@/api/login'
-import { ref, onMounted } from "vue";
-import useUserStore from '@/store/modules/user'
-import { getWxCode } from '@/utils/geek';
-import { wxLogin } from '@/api/oauth';
-import { setToken } from '@/utils/auth';
-import View from "@/pages/procurementManagement/procurementLedger/view.vue";
-const userStore = useUserStore()
-const useWxLogin = ref(false); // 鏄惁浣跨敤寰俊鐧诲綍
-const rememberPassword = ref(false); // 璁颁綇瀵嗙爜
-const loginForm = ref({
- userName: "",
- password: "",
- currentFatoryName: "",
-});
-const factoryList = ref([]) // 鍏徃鍒楄〃
+ const showToast = message => {
+ uni.showToast({
+ title: message,
+ icon: "none",
+ });
+ };
+ import { userLoginFacotryList, updateClientId } from "@/api/login";
+ import { ref, onMounted } from "vue";
+ import useUserStore from "@/store/modules/user";
+ import { getWxCode } from "@/utils/geek";
+ import { wxLogin } from "@/api/oauth";
+ import { setToken } from "@/utils/auth";
+ import View from "@/pages/procurementManagement/procurementLedger/view.vue";
+ const userStore = useUserStore();
+ const useWxLogin = ref(false); // 鏄惁浣跨敤寰俊鐧诲綍
+ const rememberPassword = ref(false); // 璁颁綇瀵嗙爜
+ const loginForm = ref({
+ userName: "",
+ password: "",
+ currentFatoryName: "",
+ });
+ const factoryList = ref([]); // 鍏徃鍒楄〃
-// 淇濆瓨瀵嗙爜鍒版湰鍦板瓨鍌�
-function savePassword() {
- if (rememberPassword.value) {
- uni.setStorageSync('remembered_username', loginForm.value.userName);
- uni.setStorageSync('remembered_password', loginForm.value.password);
- uni.setStorageSync('remember_password', true);
- } else {
- uni.removeStorageSync('remembered_username');
- uni.removeStorageSync('remembered_password');
- uni.setStorageSync('remember_password', false);
- }
-}
+ // 淇濆瓨瀵嗙爜鍒版湰鍦板瓨鍌�
+ function savePassword() {
+ if (rememberPassword.value) {
+ uni.setStorageSync("remembered_username", loginForm.value.userName);
+ uni.setStorageSync("remembered_password", loginForm.value.password);
+ uni.setStorageSync("remember_password", true);
+ } else {
+ uni.removeStorageSync("remembered_username");
+ uni.removeStorageSync("remembered_password");
+ uni.setStorageSync("remember_password", false);
+ }
+ }
-// 浠庢湰鍦板瓨鍌ㄥ姞杞藉瘑鐮�
-function loadPassword() {
- const remembered = uni.getStorageSync('remember_password');
- if (remembered) {
- rememberPassword.value = true;
- const savedUsername = uni.getStorageSync('remembered_username');
- const savedPassword = uni.getStorageSync('remembered_password');
- if (savedUsername) {
- loginForm.value.userName = savedUsername;
- }
- if (savedPassword) {
- loginForm.value.password = savedPassword;
- }
- }
-}
+ // 浠庢湰鍦板瓨鍌ㄥ姞杞藉瘑鐮�
+ function loadPassword() {
+ const remembered = uni.getStorageSync("remember_password");
+ if (remembered) {
+ rememberPassword.value = true;
+ const savedUsername = uni.getStorageSync("remembered_username");
+ const savedPassword = uni.getStorageSync("remembered_password");
+ if (savedUsername) {
+ loginForm.value.userName = savedUsername;
+ }
+ if (savedPassword) {
+ loginForm.value.password = savedPassword;
+ }
+ }
+ }
-if (useWxLogin.value) {
- getWxCode().then(res => {
- console.log(res);
- wxLogin('miniapp',res).then(res => {
- if(res.token != null){
- setToken(res.token);
- loginSuccess()
- }
- });
- })
-}
+ if (useWxLogin.value) {
+ getWxCode().then(res => {
+ console.log(res);
+ wxLogin("miniapp", res).then(res => {
+ if (res.token != null) {
+ setToken(res.token);
+ loginSuccess();
+ }
+ });
+ });
+ }
-function getUserLoginFacotryList() {
- if(loginForm.value.userName){
- userLoginFacotryList({userName:loginForm.value.userName}).then(res => {
- console.log('res',res)
- // 妫�鏌es.data鏄惁涓烘暟缁�
- if (res.data && Array.isArray(res.data)) {
- // 閲嶆柊缁勮鏁版嵁鏍煎紡锛歞eptId鍙樻垚id锛宒eptName鍙樻垚name
- factoryList.value = res.data.map(item => ({
- id: item.deptId,
- name: item.deptName
- }))
- } else {
- // 濡傛灉res.data涓嶆槸鏁扮粍锛岃缃负绌烘暟缁�
- factoryList.value = []
- }
- }).catch(error => {
- showToast('鑾峰彇鍏徃鍒楄〃澶辫触:', error)
- factoryList.value = []
- })
- }else {
- factoryList.value = []
- }
-}
+ function getUserLoginFacotryList() {
+ if (loginForm.value.userName) {
+ userLoginFacotryList({ userName: loginForm.value.userName })
+ .then(res => {
+ console.log("res", res);
+ // 妫�鏌es.data鏄惁涓烘暟缁�
+ if (res.data && Array.isArray(res.data)) {
+ // 閲嶆柊缁勮鏁版嵁鏍煎紡锛歞eptId鍙樻垚id锛宒eptName鍙樻垚name
+ factoryList.value = res.data.map(item => ({
+ id: item.deptId,
+ name: item.deptName,
+ }));
+ } else {
+ // 濡傛灉res.data涓嶆槸鏁扮粍锛岃缃负绌烘暟缁�
+ factoryList.value = [];
+ }
+ })
+ .catch(error => {
+ showToast("鑾峰彇鍏徃鍒楄〃澶辫触:", error);
+ factoryList.value = [];
+ });
+ } else {
+ factoryList.value = [];
+ }
+ }
-async function handleLogin() {
- if (loginForm.value.userName === "") {
- showToast("璇疯緭鍏ユ偍鐨勮处鍙�")
- } else if (loginForm.value.password === "") {
- showToast("璇疯緭鍏ユ偍鐨勫瘑鐮�")
- } else {
- showToast("鐧诲綍涓紝璇疯�愬績绛夊緟...")
- pwdLogin()
- }
-};
-// 瀵嗙爜鐧诲綍
-async function pwdLogin() {
- userStore.loginCheckFactory(loginForm.value).then(() => {
- modal.closeLoading()
- // 鐧诲綍鎴愬姛鍚庝繚瀛樺瘑鐮�
- savePassword();
- loginSuccess()
- }).catch(() => {
- modal.closeLoading()
- })
-};
+ async function handleLogin() {
+ if (loginForm.value.userName === "") {
+ showToast("璇疯緭鍏ユ偍鐨勮处鍙�");
+ } else if (loginForm.value.password === "") {
+ showToast("璇疯緭鍏ユ偍鐨勫瘑鐮�");
+ } else {
+ showToast("鐧诲綍涓紝璇疯�愬績绛夊緟...");
+ pwdLogin();
+ }
+ }
+ // 瀵嗙爜鐧诲綍
+ async function pwdLogin() {
+ userStore
+ .loginCheckFactory(loginForm.value)
+ .then(() => {
+ modal.closeLoading();
+ // 鐧诲綍鎴愬姛鍚庝繚瀛樺瘑鐮�
+ savePassword();
+ loginSuccess();
+ })
+ .catch(() => {
+ modal.closeLoading();
+ });
+ }
-function loginSuccess(result) {
- // 璁剧疆鐢ㄦ埛淇℃伅
- userStore.getInfo().then(res => {
- uni.switchTab({
- url: '/pages/index'
- });
- })
-}
-// 椤甸潰鍔犺浇鏃舵鏌ユ槸鍚︽湁淇濆瓨鐨勫瘑鐮�
-onMounted(() => {
- loadPassword();
- getUserLoginFacotryList()
-});
+ function loginSuccess(result) {
+ // 璁剧疆鐢ㄦ埛淇℃伅
+ userStore.getInfo().then(res => {
+ // 鐧诲綍鎴愬姛鍚庯紝灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ sendClientIdToServer();
+ uni.switchTab({
+ url: "/pages/index",
+ });
+ });
+ }
+
+ // 灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ function sendClientIdToServer() {
+ // 鑾峰彇鏈湴瀛樺偍鐨勫鎴风鏍囪瘑
+ const clientId = uni.getStorageSync("clientid");
+ if (clientId) {
+ console.log("鐧诲綍鎴愬姛锛屽噯澶囧彂閫佸鎴风鏍囪瘑鍒版湇鍔″櫒:", clientId);
+ // 杩欓噷璋冪敤鍚庣鎺ュ彛鍙戦�佸鎴风鏍囪瘑
+ updateClientId({ cid: clientId })
+ .then(res => {
+ console.log("鏈嶅姟鍣ㄥ搷搴�:", res);
+ if (res.code === 200) {
+ console.log("瀹㈡埛绔爣璇嗗凡鎴愬姛鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈嶅姟鍣ㄨ繑鍥為敊璇�:", res.msg);
+ }
+ })
+ .catch(error => {
+ console.log("鍙戦�佸鎴风鏍囪瘑鍒版湇鍔″櫒澶辫触:", error);
+ });
+ // 绀轰緥锛歛pi.updateClientId({ clientId: clientId });
+ // 鐢变簬娌℃湁鍏蜂綋鐨勬帴鍙ｏ紝杩欓噷鍙墦鍗版棩蹇�
+ console.log("瀹㈡埛绔爣璇嗗凡鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈幏鍙栧埌瀹㈡埛绔帹閫佹爣璇�");
+ }
+ }
+ // 椤甸潰鍔犺浇鏃舵鏌ユ槸鍚︽湁淇濆瓨鐨勫瘑鐮�
+ onMounted(() => {
+ loadPassword();
+ getUserLoginFacotryList();
+ });
</script>
<style lang="scss">
-page {
- background-color: #ffffff;
-}
+ page {
+ background-color: #ffffff;
+ }
-.normal-login-container {
- width: 100%;
- height: 100vh;
-
- .logo-content {
- width: 90%;
- font-weight: 400;
- font-size: 30px;
- color: #333333;
- margin: 80px 0 0 30px;
-
- image {
- border-radius: 4px;
- }
-
- .title {
- margin-left: 10px;
- }
- }
- .u-checkbox {
- margin-left: 34px;
- }
-
- .login-form-content {
- text-align: center;
- margin: 58px auto;
- padding: 0 30px;
-
- .input-item {
- margin: 30px auto;
- height: 45px;
-
- .icon {
- font-size: 38rpx;
- margin-left: 10px;
- color: #999;
- }
-
- .input {
- width: 100%;
- font-size: 14px;
- line-height: 20px;
- text-align: left;
- padding-left: 15px;
- }
- }
- .select-container {
- flex: 1;
- border-bottom: 1px solid #e5e5e5;
- padding: 6px 9px;
-
- :deep(.up-select) {
- border: none;
- background: transparent;
-
- .up-select__label {
- font-size: 14px;
- color: #333;
- }
-
- .up-select__value {
- font-size: 14px;
- color: #333;
- }
- }
- }
-
- .login-btn {
- margin-top: 60px;
- height: 50px;
- background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
- box-shadow: 0px 4px 10px 0px rgba(3,88,185,0.2);
- border-radius: 40px 40px 40px 40px;
- }
-
- .xieyi {
- color: #333;
- margin-top: 20px;
- }
-
- .login-code {
- height: 38px;
- float: right;
-
- .login-code-img {
- height: 38px;
- position: absolute;
- margin-left: 10px;
- width: 200rpx;
- }
- }
- }
-}
+ .normal-login-container {
+ width: 100%;
+ height: 100vh;
+
+ .logo-content {
+ width: 90%;
+ font-weight: 400;
+ font-size: 30px;
+ color: #333333;
+ margin: 80px 0 0 30px;
+
+ image {
+ border-radius: 4px;
+ }
+
+ .title {
+ margin-left: 10px;
+ }
+ }
+ .u-checkbox {
+ margin-left: 34px;
+ }
+
+ .login-form-content {
+ text-align: center;
+ margin: 58px auto;
+ padding: 0 30px;
+
+ .input-item {
+ margin: 30px auto;
+ height: 45px;
+
+ .icon {
+ font-size: 38rpx;
+ margin-left: 10px;
+ color: #999;
+ }
+
+ .input {
+ width: 100%;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ padding-left: 15px;
+ }
+ }
+ .select-container {
+ flex: 1;
+ border-bottom: 1px solid #e5e5e5;
+ padding: 6px 9px;
+
+ :deep(.up-select) {
+ border: none;
+ background: transparent;
+
+ .up-select__label {
+ font-size: 14px;
+ color: #333;
+ }
+
+ .up-select__value {
+ font-size: 14px;
+ color: #333;
+ }
+ }
+ }
+
+ .login-btn {
+ margin-top: 60px;
+ height: 50px;
+ background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
+ box-shadow: 0px 4px 10px 0px rgba(3, 88, 185, 0.2);
+ border-radius: 40px 40px 40px 40px;
+ }
+
+ .xieyi {
+ color: #333;
+ margin-top: 20px;
+ }
+
+ .login-code {
+ height: 38px;
+ float: right;
+
+ .login-code-img {
+ height: 38px;
+ position: absolute;
+ margin-left: 10px;
+ width: 200rpx;
+ }
+ }
+ }
+ }
</style>
diff --git a/src/pages_template/pages/login/index2.vue b/src/pages_template/pages/login/index2.vue
index 17922c7..0573fe5 100644
--- a/src/pages_template/pages/login/index2.vue
+++ b/src/pages_template/pages/login/index2.vue
@@ -1,662 +1,719 @@
<template>
- <view>
- <view class="normal-login-container " v-if="page == 'login'">
- <view class="left" @click="back">
- <image src="../../../static/uview/demo/backTop.png" mode="" style="height: 30rpx;"></image>
- </view>
- <view class="scale-in-center">
- <view class="logo-content align-center justify-center flex">
- <text class="title">宸ヤ綔浜哄憳鍏ュ彛</text>
- </view>
- <view class="login-form-content">
- <view class="input-item flex align-center">
- <view class="iconfont icon-user icon"></view>
- <input v-model="loginForm.username" class="input" type="text" placeholder="璇疯緭鍏ヨ处鍙�"
- maxlength="30" />
- </view>
- <view class="input-item flex align-center">
- <view class="iconfont icon-password icon"></view>
- <input v-model="loginForm.password" type="password" class="input" placeholder="璇疯緭鍏ュ瘑鐮�"
- maxlength="20" />
- </view>
- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
- <view class="iconfont icon-code icon"></view>
- <input v-model="loginForm.code" type="number" class="input" placeholder="璇疯緭鍏ラ獙璇佺爜"
- maxlength="4" />
- <view class="login-code">
- <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
- </view>
- </view>
- <view class="action-btn">
- <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
- </view>
- </view>
- </view>
- </view>
-
-
- <!-- 鐧诲綍 -->
- <view v-else>
- <view class="container">
- <view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
- <view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
- ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
- <uni-row>
- <text class="text-first">娆㈣繋浣跨敤</text>
- <text class="text-second">鏍″洯璁垮</text>
- <text class="text-third">棰勭害绯荤粺</text>
- <view :class="{ active: isActive === true, button: isActive !== true }" @click="startplay"
- :style="'animation-play-state:' + play[1]">
- <uni-row>
- <text class="text-fifth">璁垮鐧诲綍</text>
- </uni-row>
- </view>
- <view class="shadow1" :style="'animation-play-state:' + play[1]" />
- <view class="shadow2" :style="'animation-play-state:' + play[1]" />
- <view class="shadow3" :style="'animation-play-state:' + play[1]" />
-
- <image
- style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
- src="../../../static/uview/common/gray-logo.png"></image>
- <text class="text-forth" @click="login()">璐﹀彿瀵嗙爜鐧诲綍</text>
- </uni-row>
- </view>
- </view>
- <view class="sec-masking">
- <uni-row>
- <text class="text-sixth">鐗堟湰鍙�: v1.0</text>
- </uni-row>
- </view>
- </view>
- </view>
- </view>
+ <view>
+ <view class="normal-login-container "
+ v-if="page == 'login'">
+ <view class="left"
+ @click="back">
+ <image src="../../../static/uview/demo/backTop.png"
+ mode=""
+ style="height: 30rpx;"></image>
+ </view>
+ <view class="scale-in-center">
+ <view class="logo-content align-center justify-center flex">
+ <text class="title">宸ヤ綔浜哄憳鍏ュ彛</text>
+ </view>
+ <view class="login-form-content">
+ <view class="input-item flex align-center">
+ <view class="iconfont icon-user icon"></view>
+ <input v-model="loginForm.username"
+ class="input"
+ type="text"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ maxlength="30" />
+ </view>
+ <view class="input-item flex align-center">
+ <view class="iconfont icon-password icon"></view>
+ <input v-model="loginForm.password"
+ type="password"
+ class="input"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ maxlength="20" />
+ </view>
+ <view class="input-item flex align-center"
+ style="width: 60%;margin: 0px;"
+ v-if="captchaEnabled">
+ <view class="iconfont icon-code icon"></view>
+ <input v-model="loginForm.code"
+ type="number"
+ class="input"
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ maxlength="4" />
+ <view class="login-code">
+ <image :src="codeUrl"
+ @click="getCode"
+ class="login-code-img"></image>
+ </view>
+ </view>
+ <view class="action-btn">
+ <button @click="handleLogin"
+ class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- 鐧诲綍 -->
+ <view v-else>
+ <view class="container">
+ <view class="cover slide-top1"
+ :style="'animation-play-state:' + play[2]">
+ <view class="masking slide-top"
+ :class="[collapsedClass, { animating: isAnimating }]"
+ ref="fixedViewRef"
+ :style="'animation-play-state:' + play[0]">
+ <uni-row>
+ <text class="text-first">娆㈣繋浣跨敤</text>
+ <text class="text-second">鏍″洯璁垮</text>
+ <text class="text-third">棰勭害绯荤粺</text>
+ <view :class="{ active: isActive === true, button: isActive !== true }"
+ @click="startplay"
+ :style="'animation-play-state:' + play[1]">
+ <uni-row>
+ <text class="text-fifth">璁垮鐧诲綍</text>
+ </uni-row>
+ </view>
+ <view class="shadow1"
+ :style="'animation-play-state:' + play[1]" />
+ <view class="shadow2"
+ :style="'animation-play-state:' + play[1]" />
+ <view class="shadow3"
+ :style="'animation-play-state:' + play[1]" />
+ <image style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
+ src="../../../static/uview/common/gray-logo.png"></image>
+ <text class="text-forth"
+ @click="login()">璐﹀彿瀵嗙爜鐧诲綍</text>
+ </uni-row>
+ </view>
+ </view>
+ <view class="sec-masking">
+ <uni-row>
+ <text class="text-sixth">鐗堟湰鍙�: v1.0</text>
+ </uni-row>
+ </view>
+ </view>
+ </view>
+ </view>
</template>
<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import useUserStore from '@/store/modules/user'
-import tab from '@/plugins/tab'
-import modal from '@/plugins/modal'
+ import { ref, reactive, computed, onMounted } from "vue";
+ import { updateClientId } from "@/api/login";
+ import useUserStore from "@/store/modules/user";
+ import tab from "@/plugins/tab";
+ import modal from "@/plugins/modal";
-const src = ref("staticimagessoutheast.jpg")
-const isActive = ref(false)
-const isFixedViewVisible = ref(true)
-const animationType = ref("up") // 鍙�夊�硷細right 鎴� up
-const isAnimating = ref(false) // 鎺у埗鍔ㄧ敾鎵ц鐘舵��
-const play = ref(["paused", "paused", "paused"])
-const page = ref("index")
+ const src = ref("staticimagessoutheast.jpg");
+ const isActive = ref(false);
+ const isFixedViewVisible = ref(true);
+ const animationType = ref("up"); // 鍙�夊�硷細right 鎴� up
+ const isAnimating = ref(false); // 鎺у埗鍔ㄧ敾鎵ц鐘舵��
+ const play = ref(["paused", "paused", "paused"]);
+ const page = ref("index");
-const codeUrl = ref("")
-const captchaEnabled = ref(true)
-const loginForm = reactive({
- username: "admin",
- password: "admin123",
- code: "",
- uuid: ''
-})
+ const codeUrl = ref("");
+ const captchaEnabled = ref(true);
+ const loginForm = reactive({
+ username: "admin",
+ password: "admin123",
+ code: "",
+ uuid: "",
+ });
-const collapsedClass = computed(() => {
- return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
-})
+ const collapsedClass = computed(() => {
+ return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
+ });
-onMounted(() => {
- getCode()
-})
+ onMounted(() => {
+ getCode();
+ });
-const login = () => {
- play.value[2] = "running"
- setTimeout(() => { page.value = 'login' }, 1000)
-}
+ const login = () => {
+ play.value[2] = "running";
+ setTimeout(() => {
+ page.value = "login";
+ }, 1000);
+ };
-const back = () => {
- page.value = 'index'
- play.value[0] = "paused"
- play.value[1] = "paused"
- play.value[2] = "paused"
-}
-const startplay = () => {
- play.value[1] = "running"
- isActive.value = true;
- setTimeout(() => { isActive.value = false; }, 300);
- if (isAnimating.value) { return; }
- isAnimating.value = false; // 寮�濮嬪姩鐢绘墽琛�
- play.value[0] = "running"
- isFixedViewVisible.value = !isFixedViewVisible.value;
- setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
-}
+ const back = () => {
+ page.value = "index";
+ play.value[0] = "paused";
+ play.value[1] = "paused";
+ play.value[2] = "paused";
+ };
+ const startplay = () => {
+ play.value[1] = "running";
+ isActive.value = true;
+ setTimeout(() => {
+ isActive.value = false;
+ }, 300);
+ if (isAnimating.value) {
+ return;
+ }
+ isAnimating.value = false; // 寮�濮嬪姩鐢绘墽琛�
+ play.value[0] = "running";
+ isFixedViewVisible.value = !isFixedViewVisible.value;
+ setTimeout(() => {
+ uni.navigateBack({ delta: 1 });
+ }, 1000);
+ };
-// 鑾峰彇鍥惧舰楠岃瘉鐮�
-const getCode = () => {
- let res = {}
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = 'data:image/gif;base64,' + res.img
- loginForm.uuid = res.uuid
- }
-}
+ // 鑾峰彇鍥惧舰楠岃瘉鐮�
+ const getCode = () => {
+ let res = {};
+ captchaEnabled.value =
+ res.captchaEnabled === undefined ? true : res.captchaEnabled;
+ if (captchaEnabled.value) {
+ codeUrl.value = "data:image/gif;base64," + res.img;
+ loginForm.uuid = res.uuid;
+ }
+ };
-// 鐧诲綍鏂规硶
-const handleLogin = async () => {
- if (loginForm.username === "") {
- modal.msgError("璇疯緭鍏ユ偍鐨勮处鍙�")
- } else if (loginForm.password === "") {
- modal.msgError("璇疯緭鍏ユ偍鐨勫瘑鐮�")
- } else if (loginForm.code === "" && captchaEnabled.value) {
- modal.msgError("璇疯緭鍏ラ獙璇佺爜")
- } else {
- modal.loading("鐧诲綍涓紝璇疯�愬績绛夊緟...")
- pwdLogin()
- }
-}
+ // 鐧诲綍鏂规硶
+ const handleLogin = async () => {
+ if (loginForm.username === "") {
+ modal.msgError("璇疯緭鍏ユ偍鐨勮处鍙�");
+ } else if (loginForm.password === "") {
+ modal.msgError("璇疯緭鍏ユ偍鐨勫瘑鐮�");
+ } else if (loginForm.code === "" && captchaEnabled.value) {
+ modal.msgError("璇疯緭鍏ラ獙璇佺爜");
+ } else {
+ modal.loading("鐧诲綍涓紝璇疯�愬績绛夊緟...");
+ pwdLogin();
+ }
+ };
-// 瀵嗙爜鐧诲綍
-const pwdLogin = async () => {
- useUserStore().login(loginForm).then(() => {
- modal.closeLoading()
- loginSuccess()
- }).catch(() => {
- if (captchaEnabled.value) {
- getCode()
- }
- })
-}
+ // 瀵嗙爜鐧诲綍
+ const pwdLogin = async () => {
+ useUserStore()
+ .login(loginForm)
+ .then(() => {
+ modal.closeLoading();
+ loginSuccess();
+ })
+ .catch(() => {
+ if (captchaEnabled.value) {
+ getCode();
+ }
+ });
+ };
-// 鐧诲綍鎴愬姛鍚庯紝澶勭悊鍑芥暟
-const loginSuccess = (result) => {
- // 璁剧疆鐢ㄦ埛淇℃伅
- useUserStore().getInfo().then(res => {
- tab.reLaunch('/pages/index')
- })
-}
+ // 鐧诲綍鎴愬姛鍚庯紝澶勭悊鍑芥暟
+ const loginSuccess = result => {
+ // 璁剧疆鐢ㄦ埛淇℃伅
+ useUserStore()
+ .getInfo()
+ .then(res => {
+ // 鐧诲綍鎴愬姛鍚庯紝灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ sendClientIdToServer();
+ tab.reLaunch("/pages/index");
+ });
+ };
+
+ // 灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ const sendClientIdToServer = () => {
+ // 鑾峰彇鏈湴瀛樺偍鐨勫鎴风鏍囪瘑
+ const clientId = uni.getStorageSync("clientid");
+ if (clientId) {
+ console.log("鐧诲綍鎴愬姛锛屽噯澶囧彂閫佸鎴风鏍囪瘑鍒版湇鍔″櫒:", clientId);
+ // 杩欓噷璋冪敤鍚庣鎺ュ彛鍙戦�佸鎴风鏍囪瘑
+ // 绀轰緥锛歛pi.updateClientId({ clientId: clientId });
+ updateClientId({ cid: clientId })
+ .then(res => {
+ console.log("鏈嶅姟鍣ㄥ搷搴�:", res);
+ if (res.code === 200) {
+ console.log("瀹㈡埛绔爣璇嗗凡鎴愬姛鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈嶅姟鍣ㄨ繑鍥為敊璇�:", res.msg);
+ }
+ })
+ .catch(error => {
+ console.log("鍙戦�佸鎴风鏍囪瘑鍒版湇鍔″櫒澶辫触:", error);
+ });
+ // 鐢变簬娌℃湁鍏蜂綋鐨勬帴鍙ｏ紝杩欓噷鍙墦鍗版棩蹇�
+ console.log("瀹㈡埛绔爣璇嗗凡鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈幏鍙栧埌瀹㈡埛绔帹閫佹爣璇�");
+ }
+ };
</script>
<style lang="scss">
-page {
- background-color: #ffffff;
-}
+ page {
+ background-color: #ffffff;
+ }
-.left {
- display: flex;
- width: 50rpx;
- height: 50rpx;
- position: fixed;
- top: 0px;
- padding: 10rpx;
-}
+ .left {
+ display: flex;
+ width: 50rpx;
+ height: 50rpx;
+ position: fixed;
+ top: 0px;
+ padding: 10rpx;
+ }
-.cover {
- position: absolute;
- width: 100%;
- height: 1250rpx;
- z-index: 9997;
-}
+ .cover {
+ position: absolute;
+ width: 100%;
+ height: 1250rpx;
+ z-index: 9997;
+ }
-.normal-login-container {
- width: 100%;
- margin-top: 200rpx;
+ .normal-login-container {
+ width: 100%;
+ margin-top: 200rpx;
- .logo-content {
- width: 100%;
- font-size: 21px;
- text-align: center;
- padding-top: 15%;
+ .logo-content {
+ width: 100%;
+ font-size: 21px;
+ text-align: center;
+ padding-top: 15%;
- image {
- border-radius: 4px;
- }
+ image {
+ border-radius: 4px;
+ }
- .title {
- margin-left: 10px;
- }
- }
+ .title {
+ margin-left: 10px;
+ }
+ }
- .login-form-content {
- text-align: center;
- margin: 20px auto;
- margin-top: 15%;
- width: 80%;
+ .login-form-content {
+ text-align: center;
+ margin: 20px auto;
+ margin-top: 15%;
+ width: 80%;
- .input-item {
- margin: 20px auto;
- background-color: #f5f6f7;
- height: 45px;
- border-radius: 20px;
+ .input-item {
+ margin: 20px auto;
+ background-color: #f5f6f7;
+ height: 45px;
+ border-radius: 20px;
- .icon {
- font-size: 38rpx;
- margin-left: 10px;
- color: #999;
- }
+ .icon {
+ font-size: 38rpx;
+ margin-left: 10px;
+ color: #999;
+ }
- .input {
- width: 100%;
- font-size: 14px;
- line-height: 20px;
- text-align: left;
- padding-left: 15px;
- }
+ .input {
+ width: 100%;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ padding-left: 15px;
+ }
+ }
- }
+ .login-btn {
+ margin-top: 40px;
+ height: 45px;
+ }
- .login-btn {
- margin-top: 40px;
- height: 45px;
- }
+ .xieyi {
+ color: #333;
+ margin-top: 20px;
+ }
- .xieyi {
- color: #333;
- margin-top: 20px;
- }
+ .login-code {
+ height: 38px;
+ float: right;
- .login-code {
- height: 38px;
- float: right;
+ .login-code-img {
+ height: 38px;
+ position: absolute;
+ margin-left: 10px;
+ width: 200rpx;
+ }
+ }
+ }
+ }
- .login-code-img {
- height: 38px;
- position: absolute;
- margin-left: 10px;
- width: 200rpx;
- }
- }
- }
-}
+ .container {
+ position: relative;
+ }
+ .active {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ z-index: 9999;
+ background: linear-gradient(
+ 180deg,
+ rgba(110, 109, 122, 0.595),
+ rgba(46, 87, 190, 0.714) 70.792%,
+ rgb(17, 120, 222) 100%
+ );
+ box-shadow: inset 0 0 10px 5px rgba(101, 97, 97, 0.5);
+ }
+ .masking {
+ position: absolute;
+ top: -200rpx;
+ width: 100%;
+ height: 1250rpx;
+ background-color: #9acafc;
+ border-radius: 0 0 400rpx 400rpx;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
+ transition: transform 0.3s ease-out;
+ z-index: 9998;
+ padding: 200rpx 0 0 0;
+ }
+ .collapsed-up {
+ transform: translateY(-100%);
+ }
+ .button {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ z-index: 9999;
+ background: linear-gradient(
+ 180deg,
+ rgba(60, 53, 239, 0.595),
+ rgba(63, 117, 255, 0.714) 70.792%,
+ rgb(70, 161, 253) 100%
+ );
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ }
+ .shadow1 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
-.container {
- position: relative;
-}
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-.active {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- z-index: 9999;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple1";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.3s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
- background: linear-gradient(180deg,
- rgba(110, 109, 122, 0.595),
- rgba(46, 87, 190, 0.714) 70.792%,
- rgb(17, 120, 222) 100%);
- box-shadow: inset 0 0 10px 5px rgba(101, 97, 97, 0.5);
-}
+ .shadow2 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
-.masking {
- position: absolute;
- top: -200rpx;
- width: 100%;
- height: 1250rpx;
- background-color: #9acafc;
- border-radius: 0 0 400rpx 400rpx;
- box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
- transition: transform 0.3s ease-out;
- z-index: 9998;
- padding: 200rpx 0 0 0;
-}
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-.collapsed-up {
- transform: translateY(-100%);
-}
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple2";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.4s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0.1s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
-.button {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- transition: background-color 0.3s;
- z-index: 9999;
+ .shadow3 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
- background: linear-gradient(180deg,
- rgba(60, 53, 239, 0.595),
- rgba(63, 117, 255, 0.714) 70.792%,
- rgb(70, 161, 253) 100%);
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple3";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.5s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0.2s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
-}
+ .button.disabled {
+ pointer-events: none;
+ /* 绂佺敤鎸夐挳鐨勭偣鍑讳簨浠� */
+ opacity: 0.5;
+ /* 鍗婇�忔槑鏁堟灉 */
+ }
-.shadow1 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
+ .text-first {
+ position: absolute;
+ width: 256rpx;
+ height: 84rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 250rpx;
+ bottom: 986.67rpx;
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 64rpx;
+ font-weight: 400;
+ line-height: 84rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple1';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.3s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
+ .text-second {
+ position: absolute;
+ width: 256rpx;
+ height: 84rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 350rpx;
+ bottom: 986.67rpx;
-.shadow2 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 64rpx;
+ font-weight: 400;
+ line-height: 84rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple2';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.4s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0.1s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
-
-.shadow3 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
-
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple3';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.5s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0.2s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
-
-.button.disabled {
- pointer-events: none;
- /* 绂佺敤鎸夐挳鐨勭偣鍑讳簨浠� */
- opacity: 0.5;
- /* 鍗婇�忔槑鏁堟灉 */
-}
-
-.text-first {
- position: absolute;
- width: 256rpx;
- height: 84rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 250rpx;
- bottom: 986.67rpx;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 64rpx;
- font-weight: 400;
- line-height: 84rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-second {
- position: absolute;
- width: 256rpx;
- height: 84rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 350rpx;
- bottom: 986.67rpx;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 64rpx;
- font-weight: 400;
- line-height: 84rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-third {
- position: absolute;
- width: 200rpx;
- height: 60rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 450rpx;
- bottom: 615rpx;
- margin: 0 auto;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 50rpx;
- font-weight: 400;
- line-height: 60rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-forth {
- position: absolute;
- width: 180rpx;
- height: 36rpx;
- left: 0;
- right: 0;
- top: 948rpx;
- bottom: 330rpx;
- margin: 0 auto;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 27rpx;
- font-weight: 400;
- line-height: 36rpx;
- letter-spacing: 0rpx;
- text-align: center;
- text-decoration-line: underline;
-}
+ .text-third {
+ position: absolute;
+ width: 200rpx;
+ height: 60rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 450rpx;
+ bottom: 615rpx;
+ margin: 0 auto;
-.text-fifth {
- position: absolute;
- width: 120rpx;
- height: 150rpx;
- left: 0;
- right: 0;
- top: 60rpx;
- bottom: 418rpx;
- margin: 0 auto;
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 50rpx;
+ font-weight: 400;
+ line-height: 60rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 60rpx;
- font-weight: 400;
- line-height: 80rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
+ .text-forth {
+ position: absolute;
+ width: 180rpx;
+ height: 36rpx;
+ left: 0;
+ right: 0;
+ top: 948rpx;
+ bottom: 330rpx;
+ margin: 0 auto;
-.text-sixth {
- position: absolute;
- width: 100rpx;
- height: 17rpx;
- margin: 0 auto;
- top: 710rpx;
- left: 50%;
- transform: translateX(-50%);
- padding: 0 179rpx 7rpx 180rpx;
- z-index: 9997;
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 27rpx;
+ font-weight: 400;
+ line-height: 36rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ text-decoration-line: underline;
+ }
- color: rgb(15, 15, 15);
- font-family: "Microsoft YaHei";
- font-size: 17rpx;
- font-weight: 400;
- line-height: 17rpx;
- letter-spacing: 0;
- text-align: left;
-}
+ .text-fifth {
+ position: absolute;
+ width: 120rpx;
+ height: 150rpx;
+ left: 0;
+ right: 0;
+ top: 60rpx;
+ bottom: 418rpx;
+ margin: 0 auto;
-.sec-masking {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 750rpx;
- background-color: #ffffff;
- z-index: 9996;
-}
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 60rpx;
+ font-weight: 400;
+ line-height: 80rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
-.slide-top {
- -webkit-animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
- animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
-}
+ .text-sixth {
+ position: absolute;
+ width: 100rpx;
+ height: 17rpx;
+ margin: 0 auto;
+ top: 710rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0 179rpx 7rpx 180rpx;
+ z-index: 9997;
-.slide-top1 {
- -webkit-animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
- animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
-}
+ color: rgb(15, 15, 15);
+ font-family: "Microsoft YaHei";
+ font-size: 17rpx;
+ font-weight: 400;
+ line-height: 17rpx;
+ letter-spacing: 0;
+ text-align: left;
+ }
-.scale-in-center {
- animation: scale-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
+ .sec-masking {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 750rpx;
+ background-color: #ffffff;
+ z-index: 9996;
+ }
-@-webkit-keyframes slide-top {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ .slide-top {
+ -webkit-animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ .slide-top1 {
+ -webkit-animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ }
-@-webkit-keyframes slide-top1 {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ .scale-in-center {
+ animation: scale-in-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ @-webkit-keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
-@keyframes ripple1 {
- 0% {
- transform: scale(1);
- }
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
- 100% {
- transform: scale(1.4);
- opacity: 0;
+ @-webkit-keyframes slide-top1 {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes ripple2 {
- 0% {
- transform: scale(1);
- }
+ @keyframes ripple1 {
+ 0% {
+ transform: scale(1);
+ }
- 100% {
- transform: scale(1.5);
- opacity: 0;
+ 100% {
+ transform: scale(1.4);
+ opacity: 0;
+ }
+ }
- }
-}
+ @keyframes ripple2 {
+ 0% {
+ transform: scale(1);
+ }
-@keyframes ripple3 {
- 0% {
- transform: scale(1);
- }
+ 100% {
+ transform: scale(1.5);
+ opacity: 0;
+ }
+ }
- 100% {
- transform: scale(1.6);
- opacity: 0;
+ @keyframes ripple3 {
+ 0% {
+ transform: scale(1);
+ }
- }
-}
+ 100% {
+ transform: scale(1.6);
+ opacity: 0;
+ }
+ }
-@keyframes slide-top {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ @keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes slide-top1 {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ @keyframes slide-top1 {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes scale-in-center {
- 0% {
- transform: scale(0);
- opacity: 1;
- }
+ @keyframes scale-in-center {
+ 0% {
+ transform: scale(0);
+ opacity: 1;
+ }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3