司机称重页面，签到页面

付延余

2023-03-21 d36eb757af8867278125c6999fcaa5bdb902151c

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

@@ -3,40 +3,80 @@
   <view class="punchTheClock">
      <!-- 打卡按钮 -->
      <view class="punchTheClock_container">
         <view class="punchTheClock_btn">签到/打卡</view>
         <view class="punchTheClock_text"><text>未进入考勤区域</text></view>
         <view class="punchTheClock_btn">
            <view class="">
               <p>签到/打卡</p>
               <p>{{ nowTime }}</p>
            </view>
         </view>
         <view class="punchTheClock_text">
            <u-icon name="map" color="#51e30d" size="30"></u-icon>
            <text>未进入矿场区域</text>
         </view>
      </view>
   </view>
</template>

<script>
import { todayDate } from '@/utils/util.js';
export default {
   data() {
      return {};
   onLoad(params){
      if(params.orderPlanId){
         this.orderPlanId = params.orderPlanId
      }
   },
   methods: {}
   data() {
      return {
         nowTime: '',
         orderPlanId:null
      };
   },
   onShow() {
      this.todayDate();
   },
   methods: {
      todayDate() {
         setInterval(() => {
            this.nowTime = todayDate('hms');
         }, 1000);
      },
      // 签到
      arrive(){
         this.$reqPost('arrive', { id: this.orderPlanId }, 'params').then(res => {
            console.log(res, '签到');
         });
      }
   }
};
</script>

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