refactor(clockIn): 打卡页样式修改，新增外出类型打卡

pages/mine/clockIn/clockIn.vue

@@ -9,7 +9,7 @@
 		</view>
 		<!-- 打卡记录 -->
 		<view class="record">
-			<view class="record-item" v-if="nowTime != '' && nowTime <= '12:00:00' || signName == '上班签到'">
+			<!-- <view class="record-item" v-if="nowTime != '' && nowTime <= '12:00:00' || signName == '上班签到'">
 				<text class="ygoa-icon icon-goToWork"></text>
 				<text class="title">上班</text>
 				<text class="time">{{ signInTime || '未打卡' }}</text>
@@ -21,6 +21,16 @@
 				<text class="time">{{ signOutTime || '未打卡' }}</text>
 				<text class="signStatus" v-if="!isSignOutStatusDisabled" style="color: #e64340;">({{ signOutStatusName
 					}})</text>
+			</view> -->
+			<view class="record-item" @click="changeAttType">
+				<text class="ygoa-icon icon-goToWork"></text>
+				<text class="title">打卡类型</text>
+				<picker mode="selector" :range="typeRanges" @change="onTypeRangeChange" class="attTypePicker">
+					<text class="time">
+						{{ selectedTypeRange }}
+					</text>
+					<text class="time">(点击切换)</text>
+				</picker>
 			</view>
 			<view class="record-item" @click="getAddress">
 				<text class="ygoa-icon icon-location"></text>
@@ -36,10 +46,12 @@
 		</atl-map>
 		<!-- 打卡按钮 -->
 		<view class="footer">
-			<button type="default" @click="signInOrOut" style="background-color: #3c9cff; color: #fcfcfc;"
+			<!-- <button type="default" @click="signInOrOut" style="background-color: #3c9cff; color: #fcfcfc;"
 				v-if="signName == '上班签到'">上班签到</button>
 			<button type="default" @click="signInOrOut" style="background-color: #1aad19; color: #fcfcfc;"
-				v-else-if="signName == '下班签退'">下班签退</button>
+				v-else-if="signName == '下班签退'">下班签退</button> -->
+			<button type="default" @click="signInOrOut" style="background-color: #3c9cff; color: #fcfcfc;"
+				>{{selectedTypeRange}}打卡</button>
 		</view>
 	</view>
 </template>
@@ -70,18 +82,13 @@ onMounted(() => {
 	getAddress();
 });
 
-function showNowTime() {
-	intervalId.value = setInterval(() => {
-		nowTime.value = getNowTime()
-	}, 1000); // 每1秒更新一次
-}
+
 // 当前日期和时间相关信息
 const currentDate = ref('2023-04-01');
 const currentDay = ref('星期三');
 const nowTime = ref(''); // 当前时间
 const weekArr = reactive(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']); // 星期数组
 
-
 // 初始化日期
 function dateInit() {
 	showNowTime();
@@ -101,6 +108,11 @@ function dateInit() {
 	// }
 }
 
+function showNowTime() {
+	intervalId.value = setInterval(() => {
+		nowTime.value = getNowTime()
+	}, 1000); // 每1秒更新一次
+}
 
 const signInTime = ref(''); // 上班签到时间
 const signOutTime = ref(''); // 下班签到时间
@@ -142,56 +154,89 @@ function getTodayAtt() {
 					return (currentTime > latestTime) ? current : latest;
 				});
 			}
-
+			//打卡状态修改
+			//打了上班卡
 			if (time1 !== undefined) {
 				// console.log('getTime1',time1);
 				signInTime.value = time1.att_time.split(' ')[1];
-				signName.value = '下班签退';
-				if (isTimeInRange(subOneMinute(signInTime.value), ...configStore.lateTimeRange)) {//迟到
-					signInStatusName.value = '迟到';
-					isSignInStatusDisabled.value = false;
-				} else if (isTimeInRange(signInTime.value, configStore.lateTimeRange[1], '23:59:59')) {
-					signInStatusName.value = '旷工';
-					isSignInStatusDisabled.value = false;
-				}
-			} else if (new Date().getHours() >= 12) {
-				signName.value = '下班签退'
-			} else {
-				signName.value = '上班签到';
+				selectedTypeRange.value='下班'
+				// signName.value = '下班签退';
+				// if (isTimeInRange(subOneMinute(signInTime.value), ...configStore.lateTimeRange)) {//迟到
+				// 	signInStatusName.value = '迟到';
+				// 	isSignInStatusDisabled.value = false;
+				// } else if (isTimeInRange(signInTime.value, configStore.lateTimeRange[1], '23:59:59')) {
+				// 	signInStatusName.value = '旷工';
+				// 	isSignInStatusDisabled.value = false;
+				// }
+			} 
+			// else if (new Date().getHours() >= 12) {
+			// 	signName.value = '下班签退'
+			// } 
+			else {
+				// signName.value = '上班签到';
+				selectedTypeRange.value='上班'
 			}
+			//打了下班卡
 			if (time2 !== undefined) {
 				signOutTime.value = time2.att_time.split(' ')[1];
-				if (isTimeInRange(signOutTime.value, "00:00:00", configStore.earlyTimeRange[0])) {//旷工
-					signOutStatusName.value = '旷工';
-					isSignOutStatusDisabled.value = false;
-				}
-				else if (isTimeInRange(signOutTime.value, ...configStore.earlyTimeRange)) {
-					signOutStatusName.value = '早退';
-					isSignOutStatusDisabled.value = false;
-				}
-				else {
-					isSignOutStatusDisabled.value = true; //隐藏早退状态
-				}
+				// if (isTimeInRange(signOutTime.value, "00:00:00", configStore.earlyTimeRange[0])) {//旷工
+				// 	signOutStatusName.value = '旷工';
+				// 	isSignOutStatusDisabled.value = false;
+				// }
+				// else if (isTimeInRange(signOutTime.value, ...configStore.earlyTimeRange)) {
+				// 	signOutStatusName.value = '早退';
+				// 	isSignOutStatusDisabled.value = false;
+				// }
+				// else {
+				// 	isSignOutStatusDisabled.value = true; //隐藏早退状态
+				// }
 			}
 		}
 	})
 }
 
-
+const typeRanges=ref(['上班','下班','外出','外出返回'])
+const selectedTypeRange=ref('上班')
+//打卡类型切换
+function onTypeRangeChange(event){
+	const selectedIndex = event.detail.value;
+	selectedTypeRange.value=typeRanges.value[selectedIndex]
+}
 
 
 //上班卡或下班卡
 function signInOrOut() {
-	if ('上班签到' == signName.value) {
-		signIn();
-	} else {
-		signOut();
+	// if ('上班签到' == signName.value) {
+	// 	signIn();
+	// } else {
+	// 	signOut();
+	// }
+	switch(selectedTypeRange.value){
+		case '上班':
+			signIn()
+			break
+		case '下班':
+			signOut()
+			break
+		case '外出':
+		case '外出返回':
+			otherTypeClockIn()
+			break		
 	}
 }
 
+//外出或外出返回等其他类型的打卡
+function otherTypeClockIn(){
+	//拿到打卡类型
+	const signIn = typeRanges.value.indexOf(selectedTypeRange.value)+1
+	getAddress().then(() => {
+		clockIn(signIn);
+	});
+}
+
 //上班签到
 function signIn() {
-	const now = getNowTime();
+	// const now = getNowTime();
 	const signIn = 1;
 	getAddress().then(() => {
 		clockIn(signIn);
@@ -393,7 +438,7 @@ const polygons = reactive([{
 // 打卡
 function clockIn(attType) {
 	// 发起打卡请求相关业务逻辑
-	//判断是否已经打过卡
+	//判断是否已经打过上班卡
 	if (isClockIn(attType)) {
 		return;
 	}
@@ -413,15 +458,15 @@ function clockIn(attType) {
 	};
 	createAttendance(params).then(res => {
 		if ("success" == res.returnMsg) {
-			getTodayAtt(); //更新今日考勤数据
-			isToFillClock(attType, localString.substring(11, 19));
-			// return true;
+			if(1==attType || 2==attType){
+				getTodayAtt(); //更新今日考勤数据
+			}	
+			isToFillClock(attType, localString.substring(11, 19));//判断考勤状态是否异常
 		} else {
 			uni.showToast({
 				title: "未在指定范围，打卡失败",
 				icon: 'none'
 			});
-			// return false;
 		}
 	})
 	// const _polygons = polygons.map((polygon) => {
@@ -477,21 +522,18 @@ function isToFillClock(attType, time) {
 			.catch(() => {
 				$tab.navigateTo('/pages/mine/checkIn/checkIn')
 			})
+	}else{
+		$modal.msgSuccess('打卡成功')
+		setTimeout(() => {
+			$tab.navigateBack()
+		}, 1000)
 	}
 
 }
 
-//判断是否已经打卡
+//判断是否已经打过上班卡
 function isClockIn(attType) {
-	var attTypeData = '';
-	switch (attType) {
-		case 1:
-			attTypeData = signInTime.value;
-			break;
-		case 2:
-			break;
-	}
-	if ('' !== attTypeData) {
+	if (1==attType && '' != signInTime.value) {
 		$modal.showToast('请勿重复打卡')
 		return true;
 	}
@@ -576,6 +618,13 @@ function isClockIn(attType) {
 			color: orange;
 			/* margin-left: auto; */
 		}
+		picker{
+			width: 73%;
+			text-align: right;
+			.attType{
+				font-size: calc(0.8rem + 0px);
+			}
+		}
 	}
 }
 
@@ -588,9 +637,12 @@ function isClockIn(attType) {
 
 .footer {
 	width: 100%;
-	margin-top: 20rpx;
+	// margin-top: 20rpx;
 	display: flex;
 	justify-content: space-around;
+	position: sticky;
+	z-index: 10;
+	bottom: 10px;
 
 	button {
 		font-size: calc(18px + .5*(1rem - 16px));