| | |
| | | <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="考勤打卡" |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="clock-position"> |
| | | <image src="../../static/images/clock/position01.png"></image> |
| | | <view class="clock-position">您已进入考勤范围: 万科中心</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"/> |
| | | 您已进入考勤范围: {{address}}</view> |
| | | <view class="clock-position" v-if="isPositionThan==false"> |
| | | <image src="../../static/images/clock/position01.png"/> |
| | | 不在考勤范围: {{address}}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="down-time">下班时间: 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> |
| | |
| | | urls: '', |
| | | nowTime:'', |
| | | name:'', |
| | | code:'', |
| | | jd:'', |
| | | wd:'', |
| | | address:'', |
| | | isPositionThan:false, |
| | | background:{ |
| | | backgroundColor:"#0BB9C8" |
| | | } |
| | |
| | | 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: { |
| | | //获取当前位置信息 |
| | |
| | | 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(); |
| | | } |
| | | }); |
| | | }, |
| | |
| | | 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; |
| | | } |
| | | }) |
| | | }, |
| | |
| | | //去打卡 |
| | | 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 |
| | | }); |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | //获取当前时间 |
| | |
| | | } |
| | | 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; |
| | |
| | | justify-items: center; |
| | | |
| | | image { |
| | | // background-color: #00BFFF; |
| | | background-color: #00BFFF; |
| | | width: 1.6rem; |
| | | height: 1.6rem; |
| | | } |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | } |
| | | |
| | | |