打卡优化

pagesClockin/index.vue

@@ -1,220 +1,272 @@
-<template>
-	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
-		<cus-header title='打卡' bgColor="transparent" :showback="false"></cus-header>
-		<image class="topbg" :src="imgBase+'clockingin/topbg.png'" mode="widthFix"></image>
-		<div class="info">
-			<div class="i_avatar">
-				<image :src="imgBase+'clockingin/default_avatar.png'"></image>
-			</div>
-			<div class="i_name_date">
-				<p>{{username}}</p>
-				<p class="date">{{dateweek}}</p>
-			</div>
-		</div>
-		<div class="card">
-			<div class="c_title">今日打卡</div>
-			<div class="c_worktime">
-				<div class="cw_pre">
-					<p>上班{{workingTime||'08:30'}}</p>
-					<div class="cwp_time">
-						<image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
-						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
-						<span>打卡{{sbClockTime||'- -'}}</span>
-					</div>
-					<div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
-				</div>
-				<div class="cw_pre">
-					<p>下班{{offWorkTime||'17:30'}}</p>
-					<div class="cwp_time">
-						<image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
-						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
-						<span>{{xbClockTime||'- -'}}</span>
-					</div>
-					<div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
-				</div>
-			</div>
-			<div class="c_clock">
-			<!-- 	<div class="cc_box" :style="{'background-image':'url('+imgBase+(canClock?'clockingin/clock_active_bg.png':'clockingin/clock_inactive_bg.png')+')'}" @tap="clock"> -->
-				<div class="cc_box" :style="{'background-image':'url('+imgBase+'clockingin/clock_active_bg.png)'}" @tap="clock">
-					<p>{{isSW?'上班':'下班'}}打卡</p>
-					<p class="time">{{currentSFM}}</p>
-				</div>
-				<div class="cc_location">
-					<!-- <image :src="imgBase+(canClock?'clockingin/location_active.png':'clockingin/location_inactive.png')"></image> -->
-					<image :src="imgBase+'clockingin/location_active.png'"></image>
-					<span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
-					<span v-else>当前定位不在考勤范围内</span>
-				</div>
-			</div>
-			<!-- <p style="text-align: center;font-size: 32rpx;padding: 20rpx 0;font-weight: bold;">当前定位直线距离：{{distance}}米</p> -->
-		</div>
-		<u-popup :show="show" @close="close" mode="center" :round="32" :customStyle="{'width':'calc(100% - 120rpx)'}">
-			<div class="up_box">
-				<div class="upb_close">
-					<image :src="imgBase+'clockingin/close.png'" @tap="close"></image>
-				</div>
-				<image class="upb_text" :src="imgBase+'clockingin/clock_success.png'"></image>
-				<p class="upb_time">打卡时间 {{clockTime}}</p>
-				<image class="upb_img" :src="imgBase+'clockingin/clock_success2.png'"></image>
-				<div class="upb_btn" @tap="close">我知道了</div>
-			</div>
-		</u-popup>
-		<Tabbar :tabbarIndex="0"></Tabbar>
-	</view>
-</template>
-
-<script>
-	var timer = null,timer2 = null;
-	const QQMapWX = require('../static/lib/qqmap-wx-jssdk.min.js');
-	const qqmapsdk = new QQMapWX({
-	  key: 'V3NBZ-6NRKT-QOQXY-LU6RY-PNHJ5-QDBTQKEY'
-	});
-	import { wgs84togcj02 } from '@/utils/coordtransform.js';
-	import Tabbar from '@/components/CusTabbar/clock.vue'
-	export default {
-		components:{ Tabbar },
-		data(){
-			return {
-				username:'',
-				dateweek:'',
-				workingTime:'',
-				offWorkTime:'',
-				sbClockTime:'',
-				xbClockTime:'',
-				isSW:true,//是否是上午，12点前是上午/12点前上午打过卡就是下午了，12点后是下午
-				currentSFM:new Date().Format('hh:mm:ss'),
-				show:false,
-				canClock:false,
-				clockTime:'',
-				distance: null,
-				targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
-					latitude: 31.962084,
-					longitude: 117.020446
-				},
-				userInfo:null,
-				canClick:true
-			}
-		},
-		created() {
-			this.getDateWeek();
-			this.getCurrentSFM();
-			this.getCurrentHour();
-			if(uni.getStorageSync('userInfo')){
-				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
-				this.username = this.userInfo.realName;
-			}
-		},
-		onUnload() {
-			clearInterval(timer)
-			clearInterval(timer2)
-		},
-		mounted() {
-			this.getRules();
-			this.getCurrentLocation();
-			timer2 = setInterval(()=>{
-				this.getCurrentLocation();
-			},5000)
-			this.getUserInfo();
-		},
-		methods:{
-			getRules(){
-				this.$api.get('/wms/outsourced/attendance/rule').then(res=>{
-					if(res.data.code!==0) return this.$showToast(res.data.msg)
-					this.workingTime = res.data.data.workingTime.slice(0,5);
-					this.offWorkTime = res.data.data.offWorkTime.slice(0,5);
-				})
-			},
-			getUserInfo(){
-				this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
-					if(res.data.code!==0) return this.$showToast(res.data.msg)
-					this.sbClockTime = res.data.data?.checkInTime;
-					this.xbClockTime = res.data.data?.clockOutTime;
-					if(new Date().getHours()<12&&!this.sbClockTime) this.isSW = true
-					else this.isSW = false;
-				})
-			},
-			getDateWeek(){
-				let date = new Date().Format('yyyy年MM月dd日');
-				let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
-				let week = cfg[new Date().getDay()];
-				this.dateweek = date+' 星期'+week;
-			},
-			getCurrentSFM(){
-				timer = setInterval(()=>{
-					this.currentSFM = new Date().Format('hh:mm:ss');
-				},1000)
-			},
-			getCurrentHour(){
-				this.isSW =  new Date().getHours()>12?false:true;
-			},
-			clock(){
-				if(!this.canClick) return
-				
-				let url = this.isSW?'/wms/outsourced/attendance/checkIn':'/wms/outsourced/attendance/clockOut';
-				let params = {outUserId:this.userInfo?.id};
-				params[this.isSW?'checkInTime':'clockOutTime'] = new Date().Format('yyyy-MM-dd hh:mm');
-				if(!this.canClock){
-					uni.navigateTo({
-						url:`/pagesClockin/fieldService?url=${url}&outUserId=${this.userInfo?.id}&isSW=${this.isSW?1:0}`
-					})
-					return
-				} 
-				this.canClick = false;
-				this.$api.post(url,params).then(res=>{
-					if(res.data.code!==0) return this.$showToast(res.data.msg);
-					this.clockTime = new Date().Format('hh:mm');
-					this.show = true;
-					this.canClick = true;
-				})
-			},
-			close(){
-				this.show = false;
-				this.getUserInfo();
-			},
-			// 获取当前位置
-			async getCurrentLocation() {
-			  try {
-				const res = await uni.getLocation({
-				  type: 'gcj02', // 腾讯地图使用GCJ-02坐标系/
-				  isHighAccuracy: true
-				});
-				let origin = wgs84togcj02(res[1].longitude,res[1].latitude);
-				let target = wgs84togcj02(this.targetLocation.longitude,this.targetLocation.latitude);
-				this.calculateDistance(
-				  origin[1],
-				  origin[0],
-				  target[1],
-				  target[0]
-				);
-				this.canClock = this.distance<=50;
-			  } catch (err) {
-				uni.showToast({
-				  title: '获取位置失败，请检查权限设置',
-				  icon: 'none'
-				});
-			  }
-			},
-			// 计算两点间距离
-			calculateDistance(lat1, lng1, lat2, lng2) {
-			  qqmapsdk.calculateDistance({
-				mode: 'straight', // 直线距离
-				from: `${lat1},${lng1}`,
-				to: `${lat2},${lng2}`,
-				success: (res) => {
-				  if(res.result && res.result.elements.length > 0) {
-					this.distance = res.result.elements[0].distance;
-				  }
-				},
-				fail: (err) => {
-				  uni.showToast({
-					title: '距离计算失败',
-					icon: 'none'
-				  });
-				}
-			  });
-			}
-		}
-	}
+<template>
+  <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+    <cus-header title='打卡' bgColor="transparent" :showback="false"></cus-header>
+    <image class="topbg" :src="imgBase+'clockingin/topbg.png'" mode="widthFix"></image>
+
+    <div class="info">
+      <div class="i_avatar">
+        <image :src="imgBase+'clockingin/default_avatar.png'"></image>
+      </div>
+      <div class="i_name_date">
+        <p>{{username}}</p>
+        <p class="date">{{dateweek}}</p>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="c_title">今日打卡</div>
+
+      <div class="c_worktime">
+        <div class="cw_pre">
+          <p>上班{{workingTime||'08:30'}}</p>
+          <div class="cwp_time">
+            <image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
+            <image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
+            <span>打卡{{sbClockTime||'- -'}}</span>
+          </div>
+          <div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
+        </div>
+
+        <div class="cw_pre">
+          <p>下班{{offWorkTime||'17:30'}}</p>
+          <div class="cwp_time">
+            <image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
+            <image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
+            <span>{{xbClockTime||'- -'}}</span>
+          </div>
+          <div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
+        </div>
+      </div>
+
+      <div class="c_clock">
+        <!-- 将按钮点击统一走 clock()；禁用时不响应 -->
+        <div class="cc_box"
+             :style="{'background-image':'url('+imgBase+'clockingin/clock_active_bg.png)'}"
+             @tap="!canClick?null:clock">
+          <p>{{isSW?'上班':'下班'}}打卡</p>
+          <p class="time">{{currentSFM}}</p>
+        </div>
+
+        <div class="cc_location">
+          <image :src="imgBase+'clockingin/location_active.png'"></image>
+          <span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
+          <span v-else>当前定位不在考勤范围内</span>
+        </div>
+      </div>
+    </div>
+
+    <u-popup :show="show" @close="close" mode="center" :round="32" :customStyle="{'width':'calc(100% - 120rpx)'}">
+      <div class="up_box">
+        <div class="upb_close">
+          <image :src="imgBase+'clockingin/close.png'" @tap="close"></image>
+        </div>
+        <image class="upb_text" :src="imgBase+'clockingin/clock_success.png'"></image>
+        <p class="upb_time">打卡时间 {{clockTime}}</p>
+        <image class="upb_img" :src="imgBase+'clockingin/clock_success2.png'"></image>
+        <div class="upb_btn" @tap="close">我知道了</div>
+      </div>
+    </u-popup>
+
+    <Tabbar :tabbarIndex="0"></Tabbar>
+  </view>
+</template>
+
+<script>
+  var timer = null, timer2 = null;
+  const QQMapWX = require('../static/lib/qqmap-wx-jssdk.min.js');
+  const qqmapsdk = new QQMapWX({
+    key: 'V3NBZ-6NRKT-QOQXY-LU6RY-PNHJ5-QDBTQKEY'
+  });
+  import { wgs84togcj02 } from '@/utils/coordtransform.js';
+  import Tabbar from '@/components/CusTabbar/clock.vue'
+
+  export default {
+    components:{ Tabbar },
+    data(){
+      return {
+        username:'',
+        dateweek:'',
+        workingTime:'',
+        offWorkTime:'',
+        sbClockTime:'',
+        xbClockTime:'',
+        isSW:true, // true: 上班打卡；false: 下班打卡
+        currentSFM:new Date().Format('hh:mm:ss'),
+        show:false,
+        canClock:false,  // 是否在考勤范围
+        clockTime:'',
+        distance: null,
+		targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
+          latitude: 31.962084,
+          longitude: 117.020446
+        },
+        userInfo:null,
+        canClick:true,   // 防连点：统一入口控制
+        navigating:false,// 防止重复 navigateTo
+      }
+    },
+    created() {
+      this.getDateWeek();
+      this.getCurrentSFM();
+      this.getCurrentHour();
+      if(uni.getStorageSync('userInfo')){
+        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
+        this.username = this.userInfo.realName;
+      }
+    },
+    onUnload() {
+      clearInterval(timer)
+      clearInterval(timer2)
+    },
+    mounted() {
+      this.getRules();
+      this.getCurrentLocation();
+      timer2 = setInterval(()=>{
+        this.getCurrentLocation();
+      },5000)
+      this.getUserInfo();
+    },
+    methods:{
+      getRules(){
+        this.$api.get('/wms/outsourced/attendance/rule').then(res=>{
+          if(res.data.code!==0) return this.$showToast(res.data.msg)
+          this.workingTime = res.data.data.workingTime.slice(0,5);
+          this.offWorkTime = res.data.data.offWorkTime.slice(0,5);
+        }).catch(()=>{})
+      },
+      getUserInfo(){
+        // 回读服务端状态
+        this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
+          if(res.data.code!==0) return this.$showToast(res.data.msg)
+          this.sbClockTime = res.data.data?.checkInTime;
+          this.xbClockTime = res.data.data?.clockOutTime;
+          if(new Date().getHours()<12 && !this.sbClockTime) this.isSW = true
+          else this.isSW = false;
+        }).catch(()=>{})
+      },
+      getDateWeek(){
+        let date = new Date().Format('yyyy年MM月dd日');
+        let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
+        let week = cfg[new Date().getDay()];
+        this.dateweek = date+' 星期'+week;
+      },
+      getCurrentSFM(){
+        clearInterval(timer)
+        timer = setInterval(()=>{
+          this.currentSFM = new Date().Format('hh:mm:ss');
+        },1000)
+      },
+      getCurrentHour(){
+        this.isSW =  new Date().getHours()<12;
+      },
+
+      async clock(){
+        if(!this.canClick) return;
+        this.canClick = false;           // 一进入就关点击
+        const isSWNow = this.isSW;       // 固定本次动作类型
+        try {
+          const url = isSWNow ? '/wms/outsourced/attendance/checkIn'
+                              : '/wms/outsourced/attendance/clockOut';
+          const params = { outUserId: this.userInfo?.id };
+          params[isSWNow ? 'checkInTime' : 'clockOutTime'] = new Date().Format('yyyy-MM-dd hh:mm');
+
+          // 不在范围：跳转到外勤页面；防重复跳转
+          if(!this.canClock){
+            if(this.navigating){
+              return;
+            }
+            this.navigating = true;
+            uni.navigateTo({
+              url:`/pagesClockin/fieldService?url=${url}&outUserId=${this.userInfo?.id}&isSW=${isSWNow?1:0}`,
+              complete: ()=>{ /* 交给子页处理，当前页可允许再次点击 */
+                this.canClick = true;
+              }
+            })
+            return;
+          }
+
+          // 发请求
+          const res = await this.$api.post(url, params);
+          if(res.data.code!==0){
+            this.$showToast(res.data.msg || '打卡失败');
+            return;
+          }
+
+          // 成功：先本地更新，立刻切换态，避免在回读之前再次点到同一类型
+          this.clockTime = new Date().Format('hh:mm');
+          if(isSWNow){
+            this.sbClockTime = this.clockTime;
+            this.isSW = false; // 立刻切到“下班打卡”
+          }else{
+            this.xbClockTime = this.clockTime;
+          }
+
+          // 展示成功弹窗，弹窗期间保持禁用
+          this.show = true;
+
+        } catch (e) {
+          this.$showToast('网络异常，请重试');
+        } finally {
+          // 若弹窗展示中，保持禁用；否则放开
+          if(!this.show){
+            this.canClick = true;
+          }
+        }
+      },
+
+      // 弹窗关闭：这里再回读一次，并恢复点击
+      close(){
+        this.show = false;
+        this.getUserInfo();   // 与后端对齐一次
+        this.canClick = true; // 现在再允许点击
+        this.navigating = false;
+      },
+
+      // 获取当前位置
+      async getCurrentLocation() {
+        try {
+          const res = await uni.getLocation({
+            type: 'gcj02', // 腾讯地图使用GCJ-02坐标系
+            isHighAccuracy: true
+          });
+          let origin = wgs84togcj02(res[1].longitude,res[1].latitude);
+          let target = wgs84togcj02(this.targetLocation.longitude,this.targetLocation.latitude);
+          this.calculateDistance(
+            origin[1],
+            origin[0],
+            target[1],
+            target[0]
+          );
+        } catch (err) {
+          uni.showToast({
+            title: '获取位置失败，请检查权限设置',
+            icon: 'none'
+          });
+        }
+      },
+
+      // 计算两点间距离
+      calculateDistance(lat1, lng1, lat2, lng2) {
+        qqmapsdk.calculateDistance({
+          mode: 'straight', // 直线距离
+          from: `${lat1},${lng1}`,
+          to: `${lat2},${lng2}`,
+          success: (res) => {
+            if(res.result && res.result.elements.length > 0) {
+              this.distance = res.result.elements[0].distance;
+              this.canClock = this.distance <= 50;
+            }
+          },
+          fail: () => {
+            uni.showToast({
+              title: '距离计算失败',
+              icon: 'none'
+            });
+          }
+        });
+      }
+    }
+  }
 </script>
 
 <style scoped lang="less">