司机日计划通知单增加创建时间，称重页面样式优化

yangan

2023-11-16 700c025aa912047fbd71975d4c6f8bb930ba82f8

 pages/driver-page/driver-index/bill-of-lading-details/punchTheClock/punchTheClock.vue

@@ -1,135 +1,201 @@
<template>
   <!-- 打卡 -->
   <view class="punchTheClock">
      <view class="editIn">
         <u-button text=" 更改入场"
                  type="primary"
                  plain
                  @click="rcsqClick"
                  shape="circle"
                :disabled="coalDetailsData.status >= 3"></u-button>
      </view>
      <!-- 打卡按钮 -->
      <view class="punchTheClock_container">
         <view class="punchTheClock_btn" @click="arrive">
         <view class="punchTheClock_btn"
            @click="arrive">
            <view>
               <p>签到/打卡</p>
               <p>{{ coalStatus == 1 ? '已签到' : '签到/打卡' }}</p>
               <p>{{ nowTime }}</p>
            </view>
         </view>
         <view class="punchTheClock_text">
         <!-- <view class="punchTheClock_text">
            <u-icon name="map" color="#51e30d" size="30"></u-icon>
            <text>未进入矿场区域</text>
         </view>
         </view> -->
      </view>
	
	
   </view>
</template>

<script>
import { todayDate } from '@/utils/util.js';
export default {
   onLoad(params) {
      if (params.orderPlanId) {
         this.punchTheClockObj.id = params.orderPlanId;
      }
   },
   data() {
      return {
         nowTime: '',
         punchTheClockObj: {
            latitude: null,
            longitude: null,
            id: null
         }
      };
   },
   onShow() {
      this.todayDate();
      // 获取权限信息
      wx.getSetting({
         success(res) {
            if (!res.authSetting['scope.userFuzzyLocation']) {
               wx.authorize({
                  scope: 'scope.userFuzzyLocation',
                  success(res) {
                     console.log(res);
                     if (res.errMsg == 'authorize:ok') {
                        // 获取位置信息
                        this.getFuzzyLocation();
                     }
   import { todayDate } from '@/utils/util.js';
   export default {
      onLoad(params) {
         console.log(params,'params')
         this.punchTheClockObj.tmcoa = params.tmId.toString();
         this.orderPlanId = params.orderPlanId;
         this.coalStatus = params.coalStatus;
         this.yyId = params.yyId;
      },
      data() {
         return {
            nowTime: '',
            coalStatus: 0,
            orderPlanId:'',
            yyId:null,
            coalDetailsData:{},
            punchTheClockObj: {
               tmcoa: null,
               latA: null,
               latB: null
            },
            getYuYueDataParams: {
               deptId: '',
               filedId: '',
               sendDate: ''
            },
         };
      },
      onShow() {
         this.init();
         this.getSetting(); //获取授权
         this.getFuzzyLocation(); //获取位置
         this.todayDate(); //当前时间
      },
      methods: {
         init(){
            uni.showLoading({
               title: '加载中'
            });
            this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  this.coalDetailsData = res.data;
                  console.log(res, '通知单详情');
                  // 获取入场申请操作后的预约列表的参数
                  this.getYuYueDataParams.deptId = res.data.deptId;
                  this.getYuYueDataParams.filedId = res.data.filedId;
                  this.getYuYueDataParams.sendDate = res.data.sendDate;
               } else { 
                  this.$u.toast('加载失败');
               }
            })
         },
         // 入场申请
         rcsqClick() {
            uni.navigateTo({
               url: `/pages/driver-page/appointment/appointment?type=入场申请&takeCoalId=${this.orderPlanId}&yyId=${this.yyId}&filedId=${this.getYuYueDataParams.filedId}&deptId=${
               this.getYuYueDataParams.deptId
            }&sendDate=${this.getYuYueDataParams.sendDate}`
            });
         },
         getSetting() {
            // 获取权限信息
            wx.getSetting({
               success(res) {
                  if (!res.authSetting['scope.userFuzzyLocation']) {
                     wx.authorize({
                        scope: 'scope.userFuzzyLocation',
                        success(res) {
                           uni.showToast({
                              title: '授权成功！'
                           });
                        }
                     });
                  }
               },
               fail() {
                  console.log('获取失败');
               }
            });
         },
         getFuzzyLocation() {
            let that = this;
            wx.getFuzzyLocation({
               type: 'wgs84',
               success(res) {
                  console.log(res, '获取位置', that);
                  that.punchTheClockObj.latB = res.latitude;
                  that.punchTheClockObj.latA = res.longitude;
               }
            });
         },
         todayDate() {
            setInterval(() => {
               this.nowTime = todayDate('hms');
            }, 1000);
         },
         // 签到
         arrive() {
            if (this.punchTheClockObj.latA && this.punchTheClockObj.latB) {
               console.log(this.punchTheClockObj);
               this.$reqPost('arrive', this.punchTheClockObj, 'params').then(res => {
                  console.log(res, '签到');
                  if (res.code == 0) {
                     this.$u.toast('签到成功');
                     // 如果是签到后才能更改时间，点签到完成就别返回主界面了，更改完后再返回
                     // setTimeout(() => {
                     //    uni.navigateBack({
                     //          delta: 1
                     //       },
                     //       500
                     //    );
                     // });
                  } else {
                     this.$u.toast(res.msg ? res.msg : '签到失败');
                  }
               });
            } else {
               this.getFuzzyLocation();
               this.$u.toast('暂获取不到到当前位置');
            }
         },
         fail() {
            console.log('获取失败');
         }
      });
   },
   methods: {
      getFuzzyLocation() {
         wx.getFuzzyLocation({
            type: 'wgs84',
            success(res) {
               console.log(res, '获取位置');
               this.punchTheClockObj.latitude = res.latitude;
               this.punchTheClockObj.longitude = res.longitude;
            }
         });
      },
      todayDate() {
         setInterval(() => {
            this.nowTime = todayDate('hms');
         }, 1000);
      },
      // 签到
      arrive() {
         if (this.punchTheClockObj.latitude && this.punchTheClockObj.longitude) {
            this.$reqPost('arrive', this.punchTheClockObj, 'params').then(res => {
               console.log(res, '签到');
               if (res.code == 0) {
                  this.$u.toast('签到成功');
                  setTimeout(() => {
                     uni.navigateBack(
                        {
                           delta: 1
                        },
                        500
                     );
                  });
               } else {
                  this.$u.toast(res.data ? res.data : '签到失败');
               }
            });
         } else {
            this.$u.toast('暂获取不到到当前位置');
         }
      }
   }
};
   };
</script>

<style lang="scss" scoped>
.punchTheClock {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   .punchTheClock_container {
      .punchTheClock_btn {
         width: vww(240);
         height: vww(240);
         color: #ffffff;
         font-size: vww(20);
         border-radius: 50%;
         background-color: #36d4e5;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .punchTheClock_text {
         display: flex;
         justify-content: center;
         margin-top: vww(20);
         color: #b8b8b8;
         .text {
            margin-left: vww(5);
<style lang="scss"
   scoped>
   .punchTheClock {
      height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      position: relative;

      .punchTheClock_container {
         .punchTheClock_btn {
            width: vww(240);
            height: vww(240);
            color: #ffffff;
            font-size: vww(20);
            border-radius: 50%;
            background-color: #36d4e5;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
               text-align: center;
            }
         }

         .punchTheClock_text {
            display: flex;
            justify-content: center;
            margin-top: vww(20);
            color: #b8b8b8;

            .text {
               margin-left: vww(5);
            }
         }
      }
      .editIn{
         position: absolute;
            right:10rpx;
          top: 15rpx;
      }
   }
}
</style>
</style>