zengh
2022-09-14 8ea19a6bb34daab1410f6186992a4c1e90299c92
pages/clockSignIn/clockSignIn.vue
@@ -1,15 +1,6 @@
<template>
   <view class="content">
      <!-- 自定义顶部导航栏 -->
      <!-- <view class="uni-nav-bar-info" :fixed="true" :status-bar="true">
         <view class="uni-nav-bar-left" @click="goBack()">
            <image src="../../static/images/nav/back02.png" />
         </view>
         <view class="title" slot="default">考勤打卡</view>
         <view class="right">
            <view class="title-right">打卡记录</view>
         </view>
      </view> -->
      <u-navbar 
         :is-back="true" 
         title="考勤打卡" 
@@ -39,14 +30,24 @@
                     </view>
                  </view>
               </view>
               <view class="clock-position">
                  <image src="../../static/images/clock/position01.png"></image>
                  <view class="clock-position">您已进入考勤范围:&nbsp;万科中心</view>
               <view class="clock-position-info">
                  <view class="clock-position-box">
                     <view class="clock-position" v-if="isPositionThan==true">
                        <image src="../../static/images/clock/position01.png"/>
                        &nbsp;您已进入考勤范围:&nbsp;{{address}}</view>
                     <view class="clock-position" v-if="isPositionThan==false">
                        <image src="../../static/images/clock/position01.png"/>
                        &nbsp;不在考勤范围:&nbsp;{{address}}</view>
                  </view>
               </view>
               <view class="down-time">下班时间:&nbsp;18:00</view>
            </view>
         </view>
      </view>
      <iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
          src="https://apis.map.qq.com/tools/geolocation?key=T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG&referer=myapp">
      </iframe>
      <!-- <web-view :src="urls"></web-view> -->
   </view>
</template>
@@ -58,9 +59,11 @@
            urls: '',
            nowTime:'',
            name:'',
            code:'',
            jd:'',
            wd:'',
            address:'',
            isPositionThan:false,
            background:{
               backgroundColor:"#0BB9C8"
            }
@@ -79,7 +82,7 @@
         this.getOneselfInFo();
         //long 转换为字符串
         var code = JSON.stringify(this.$store.state.puserID.toString());
         this.urls = "http://s16s652780.51mypc.cn/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
         this.urls = "http://106.225.193.35:83/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
      },
      methods: {
         //获取当前位置信息
@@ -89,10 +92,18 @@
                type: 'wgs84',
               geocode:'true',
                success: function (res) {
                  // debugger;
                    console.log('当前位置:' + res);
                    console.log('当前位置longitude:' + res.longitude);
                    console.log('当前位置latitude:' + res.latitude);
                  //114.921652006005 25.8457176283118
                  // that.jd =  '114.921652006005';
                  // that.wd =  '25.8457176283118';
                  that.jd =  res.longitude;
                  that.wd =  res.latitude;
                  //通过经纬度换算详细地址
                  that.getAddress();
                  //位置比对
                  that.positionThan();
                }
            });
         },
@@ -100,16 +111,56 @@
         goBack() {
            uni.navigateBack({})
         },
         //通过经纬度换算详细地址
         getAddress(){
            var that = this;
            uni.request({
               url: `https://fmap.sf-express.com/rgeo/api`,
               method: "GET",
               data:{
                  x: that.jd,
                  y: that.wd,
                  ak: '1986afc8a5744263971b7f2482253dfc'
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(res) {
                  that.address = res.data.result.pois[0].name
               }
            })
         },
         //比对考勤位置
         positionThan(){
            var that = this;
            uni.request({
               url: this.$store.state.piAPI + `/attendance/positionThan`,
               method: "GET",
               data:{
                  number: this.code,
                  jd: this.jd,
                  wd: this.wd
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(resdata) {
                  //不在考勤范围内
                  resdata.data.data==true?that.isPositionThan = true:that.isPositionThan = false;
               }
            })
         },
         
         //获取个人信息
         getOneselfInFo() {
             var that = this;
             //保安信息查询
            uni.request({
               url:'http://s16s652780.51mypc.cn/api/blade-user/details?id='+this.$store.state.puserID,
               url:that.$store.state.piAPI + '/blade-user/details?id='+this.$store.state.puserID,
               method:'POST',
               success(resdata) {
                  that.name = resdata.data.data.realName;
                  that.code = resdata.data.data.code;
               }
            })
         },
@@ -117,38 +168,39 @@
         //去打卡
         goClock() {
             var that = this;
             axios({
                 method: "POST",
                 url: this.$store.state.piAPI + `/attendance/AppSave`,
                 params: {
                     number: this.$store.state.puserID,
                     name: this.name,
                     clockTime: this.getNowTime(1),
                     jd: this.jd,
                     wd: this.wd,
                     address: this.address
                 },
             }).then((resdata) => {
                 //不在考勤范围内
                 if (resdata.data.code == 400) {
                     layui.use('layer', function() {
                         var layer = layui.layer;
                         layer.msg('打卡失败,不在考勤范围', {
                             icon: 0
                         });
                     });
                 }
                 //打卡成功
                 if (resdata.data.code == 200) {
                     layui.use('layer', function() {
                         var layer = layui.layer;
                         layer.msg('打卡成功!', {
                             icon: 1
                         });
                     });
                 }
             });
             uni.request({
                url: this.$store.state.BaopiAPI + `/attendance/AppSave`,
               method: "POST",
               data:{
                   number: this.code,
                   name: this.name,
                   clockTime: this.getNowTime(1),
                   jd: this.jd,
                   wd: this.wd,
                   address: this.address
               },
               header:{
                  'Content-type':'application/x-www-form-urlencoded'
               },
               success(resdata) {
                  //不在考勤范围内
                  if (resdata.data.code == 400) {
                     uni.showToast({
                         title: '不在考勤范围,打卡失败!',
                        icon:'none',
                         duration: 2000
                     });
                  }
                  //打卡成功
                  if (resdata.data.code == 200) {
                     uni.showToast({
                         title: '打卡成功!',
                        icon:'success',
                         duration: 2000
                     });
                  }
               }
             })
         },
         
         //获取当前时间
@@ -178,10 +230,10 @@
             }
             var nowstr = null;
             if (type == 1) {
                 nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
                 nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
             }
             if (type == 2) {
                 nowstr = year + "年" + month + "月" + date + "日  " + hour + ":" + minute + ":" + second;
                 nowstr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
             }
            if (type == 3) {
                nowstr = hour + ":" + minute + ":" + second;
@@ -254,7 +306,7 @@
            justify-items: center;
            
            image {
               // background-color: #00BFFF;
               background-color: #00BFFF;
               width: 1.6rem;
               height: 1.6rem;
            }
@@ -365,7 +417,7 @@
                     height: 6rem;
                     border-radius: 100px;
                     color: #FFFFFF;
                     background-image: linear-gradient(to bottom,#65CBA9,#66D0AC);
                     background-image: linear-gradient(to bottom,#0FD0E1,#0FD0E1);
                     display: flex;
                     flex-direction: column;
                     align-items: center;
@@ -376,19 +428,36 @@
                     }
                  }
               }
               .clock-position-info{
                  width: 100%;
                  display: flex;
                  // align-items: center;
                  // justify-content: center;
                  text-align: center;
               }
               .clock-position-box {
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  font-size: 0.8rem;
               }
            
               .clock-position{
                  width: 100%;
                  height: 2rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  // float: left;
                  // display: flex;
                  // align-items: center;
                  // justify-content: center;
                  
                  image{
                     width: 2rem;
                     height: 1.5rem;
                     margin-left: 2rem;
                     width: 1.5rem;
                     height: 1.2rem;
                     float: left;
                     // margin-left: 2rem;
                  }
               }