考勤打卡样式调整

Administrator

2021-07-03 efb4cd6d80bccd0f94b7fa9b93d1df3920eedbc9

 pages/clockSignIn/clockSignIn.vue

@@ -1,7 +1,7 @@
<template>
   <view class="content">
      <!-- 自定义顶部导航栏 -->
      <view class="uni-nav-bar-info" :fixed="true" :status-bar="true">
      <!-- <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>
@@ -9,7 +9,16 @@
         <view class="right">
            <view class="title-right">打卡记录</view>
         </view>
      </view>
      </view> -->
      <u-navbar 
         :is-back="true" 
         title="考勤打卡" 
         :background="background"
         back-icon-color="#FFF"
         title-color="#FFF"
         >
         <view class="navbar-right" slot="right">考勤记录</view>	
      </u-navbar>
      <view class="clock-time-background"></view>
      <view class="clock-time">
         <view class="clock-info">
@@ -24,7 +33,7 @@
                  <view class="btn1">
                     <view class="btn0">
                        <view class="btn">
                           <view class="btn-title">打卡</view>
                           <view class="btn-title" @click="goClock()">打卡</view>
                           <view class="btn-time">{{nowTime}}</view>
                        </view>
                     </view>
@@ -47,7 +56,14 @@
      data() {
         return {
            urls: '',
            nowTime:''
            nowTime:'',
            name:'',
            jd:'',
            wd:'',
            address:'',
            background:{
               backgroundColor:"#0BB9C8"
            }
         }
      },
      mounted() {
@@ -59,6 +75,8 @@
         }, 1000);
      },
      onLoad: function(options) {
         //获取个人信息
         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;
@@ -66,20 +84,71 @@
      methods: {
         //获取当前位置信息
         getNowPosition(){
            var that = this;
            uni.getLocation({
                type: 'wgs84',
               geocode:'true',
                success: function (res) {
                  debugger;
                  // debugger;
                    console.log('当前位置：' + res);
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                  that.jd =  res.longitude;
                  that.wd =  res.latitude;
                }
            });
         },
         //返回上一页
         goBack() {
            uni.navigateBack({})
         },
			
         //获取个人信息
         getOneselfInFo() {
             var that = this;
             //保安信息查询
            uni.request({
               url:'http://s16s652780.51mypc.cn/api/blade-user/details?id='+this.$store.state.puserID,
               method:'POST',
               success(resdata) {
                  that.name = resdata.data.data.realName;
               }
            })
         },
			
         //去打卡
         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
                         });
                     });
                 }
			
             });
         },
         
         //获取当前时间
@@ -128,7 +197,8 @@
   page{
      width: 100%;
      height: 100%;
      background-color: #FCFBFC;
      /* background-color: #FCFBFC; */
      background-color: #F7f7f7;
   }
</style>

@@ -156,6 +226,14 @@
      justify-content: center;
   }
   
	
   .navbar-right{
      color: #fff;
      font-size: 0.7rem;
      margin-right: 1.5rem;
      margin-top: 0.2rem;
   }
	
   .content{
      width: 100%;
      height: 100%;
@@ -165,7 +243,8 @@
         flex-direction: row;
         align-items: center;
         // background-color:#0078A8;
         width: 100%;
         width: 92%;
         margin: 0 auto;
         height: 50px;
         margin-top: 20px;
         
@@ -176,7 +255,6 @@
            
            image {
               // background-color: #00BFFF;
               margin-left: 1rem;
               width: 1.6rem;
               height: 1.6rem;
            }
@@ -209,7 +287,8 @@
      .clock-time-background{
         width: 100%;
         height: 15rem;
         background-color: #F5F5F5;
         // background-color: #F5F5F5;
         background-color: #F3F3F3;
      }