androidCnToWechatGrt/pagesClockin/index.vue

<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">
	.tabPage{
		padding: 0 24rpx 188rpx;
		background: #F4F8FB;
		
		.topbg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
	
		.info{
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 48rpx 24rpx;
			display: flex;
			align-items: center;
			.i_avatar{
				width: 98rpx;
				height: 98rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.i_name_date{
				padding-left: 24rpx;
				p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #1D2129;
					line-height: 36rpx;
					&.date{
						font-size: 28rpx;
						color: #657588;
						line-height: 28rpx;
						margin-top: 22rpx;
					}
				}
			}
		}
	
		.card{
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 44rpx 24rpx 211rpx;
			margin-top: 20rpx;
			
			.c_title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
			}
			
			.c_worktime{
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				.cw_pre{
					width: calc(50% - 15rpx);
					background: #F5F8FA;
					border-radius: 16rpx;
					position: relative;
					padding: 36rpx 20rpx;
					box-sizing: border-box;
					&>p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;
						line-height: 32rpx;
					}
					.cwp_time{
						display: flex;
						align-items: center;
						margin-top: 32rpx;
						image{
							width: 28rpx;
							height: 28rpx;
						}
						span{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
							line-height: 36rpx;
							margin-left: 12rpx;
						}
					}
					.cwp_status{
						width: 108rpx;
						height: 54rpx;
						border-radius: 0rpx 16rpx 0rpx 12rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 24rpx;
						line-height: 54rpx;
						text-align: center;
						position: absolute;
						top: 0;
						right: 0;
						&.active{
							color: #14D08E;
							background: rgba(20, 204, 140, 0.08);
						}
						&.inactive{
							color: #86909C;
							background: #EFEFEF;
						}
					}
				}
			}
		
			.c_clock{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 117rpx;
				
				.cc_box{
					width: 306rpx;
					height: 306rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					p{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						&.time{
							font-size: 32rpx;
							line-height: 45rpx;
							margin-top: 8px;
						}
					}
				}
				
				.cc_location{
					margin-top: 64rpx;
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
					}
					span{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #86909C;
						line-height: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	
		.up_box{
			background: linear-gradient( 134deg, #E7F4FD 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.upb_close{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.upb_text{
				width: 210rpx;
				height: 50rpx;
				margin-top: 16rpx;
			}
			.upb_time{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				line-height: 32rpx;
				margin-top: 36rpx;
			}
			.upb_img{
				width: 344rpx;
				height: 194rpx;
				margin-top: 216rpx;
			}
			.upb_btn{
				width: 446rpx;
				height: 88rpx;
				background: #0171F6;
				border-radius: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin-top: 112rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>