jiangping
2024-06-28 43942a545271345ce26e40d82bb97138c5ea7611
h5/pages/driver/taskDetail.vue
@@ -1,7 +1,11 @@
<template>
   <view class="main_app">
      <view class="status_wrap">
         <image class="bg" src="../../static/driver/bg_renwu@2x.png" mode=""></image>
      <image
        class="bg"
        src="../../static/driver/bg_renwu@2x.png"
        mode=""
      ></image>
         <view class="name">作业已完成</view>
         <view class="id_card">皖AD1212</view>
         <view class="status">作业完成</view>
@@ -37,7 +41,11 @@
            <view class="value">
               <view class="">0 公里</view>
               <view class="btn" @click="getLocation">
                  <u-icon name="map" :color="$store.state.primaryColor" class="mr6"></u-icon>
            <u-icon
              name="map"
              :color="$store.state.primaryColor"
              class="mr6"
            ></u-icon>
                  重新定位
               </view>
            </view>
@@ -59,7 +67,15 @@
            <view class="value">2022</view>
         </view> -->
         <view class="signIn_wrap" @click="handleSignIn">
            <image :src="param.status == '0' ? require('@/static/driver/btn_qiandao@2x.png') : require('@/static/driver/btn_qiandao_fail@2x.png')" class="img" mode="widthFix"></image>
        <image
          :src="
            param.status == '0'
              ? require('@/static/driver/btn_qiandao@2x.png')
              : require('@/static/driver/btn_qiandao_fail@2x.png')
          "
          class="img"
          mode="widthFix"
        ></image>
            <view class="handle">签到</view>
            <view class="time">09:10</view>
         </view>
@@ -72,7 +88,15 @@
      </view>
      
      <!-- modal -->
      <u-popup :show="showDetail" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true" mode="bottom" @close="showDetail = false">
    <u-popup
      :show="showDetail"
      :round="10"
      :safeAreaInsetBottom="true"
      closeOnClickOverlay
      :closeable="true"
      mode="bottom"
      @close="showDetail = false"
    >
               <view class="detail_modal">
                  <view class="modal_title">运单详情</view>
                  <view class="id_card">
@@ -134,7 +158,7 @@
               status: '0'
            },
            showDetail: false,
         };
    }
      },
      methods: {
         handleSignIn() {
@@ -145,10 +169,10 @@
            uni.getLocation({
               type: 'wgs84',
               success: function (res) {
                  console.log('当前位置的经度:' + res.longitude);
                  console.log('当前位置的纬度:' + res.latitude);
          console.log('当前位置的经度:' + res.longitude)
          console.log('当前位置的纬度:' + res.latitude)
               }
            });
      })
         }
      }
   }
@@ -158,14 +182,14 @@
.main_app{
   padding: 0;
   .main_content{
      background: #FFFFFF;
    background: #ffffff;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      padding: 16rpx 30rpx;
      position: relative;
      bottom: 32rpx;
      .line{
         padding: 24rpx 0 28rpx;
         border-bottom: 1rpx solid #E5E5E5;
      border-bottom: 1rpx solid #e5e5e5;
         display: flex;
         .label{
            width: 150rpx;
@@ -190,7 +214,7 @@
      }
      .warnning{
         display: flex;
         color: #ED4545;
      color: #ed4545;
         align-items: center;
         margin: 40rpx 0;
      }
@@ -206,7 +230,7 @@
         justify-content: center;
         align-items: center;
         .handle{
            font-weight: 500;
        font-weight: 600;
            font-size: 40rpx;
            line-height: 56rpx;
         }
@@ -237,7 +261,7 @@
         z-index: -1;
      }
      .name{
         font-weight: 500;
      font-weight: 600;
         font-size: 40rpx;
         line-height: 56rpx;
         margin-bottom: 12rpx;
@@ -251,12 +275,11 @@
         top: 30rpx;
         height: 68rpx;
         line-height: 68rpx;
         background: #FFFFFF;
      background: #ffffff;
         padding: 0 24rpx;
         border-radius: 34rpx 0rpx 0rpx 34rpx;
         font-size: 26rpx;
         color: $uni-color-primary;
      }
   }
   .space{
@@ -278,7 +301,7 @@
         width: 336rpx;
         font-size: 36rpx;
         color: #333333;
         background: #FFFFFF;
      background: #ffffff;
         border-radius: 48rpx;
         border: 1rpx solid #999999;
      }
@@ -292,7 +315,7 @@
.detail_modal{
   padding: 36rpx 30rpx;
   .modal_title{
      font-weight: 500;
    font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      line-height: 44rpx;
@@ -301,14 +324,14 @@
   }
   .contract_list{
      .list{
         background: #F7F7F7;
      background: #f7f7f7;
         border-radius: 8rpx;
         padding: 20rpx;
         .line{
            display: flex;
            margin-bottom: 20rpx;
            &:nth-of-type(3n){
               border-top: 1rpx solid #E5E5E5;
          border-top: 1rpx solid #e5e5e5;
               padding-top: 20rpx;
            }
            .label{
@@ -322,7 +345,7 @@
         }
      }
      .title{
         font-weight: 500;
      font-weight: 600;
         font-size: 30rpx;
         color: $uni-color-primary;
         margin-bottom: 12rpx;
@@ -353,7 +376,7 @@
      width: 750rpx;
      height: 2rpx;
      margin: 30rpx -30rpx;
      border: 1rpx solid #E5E5E5;
    border: 1rpx solid #e5e5e5;
   }
   .id_card{
      border-radius: 8rpx;
@@ -366,14 +389,14 @@
      text-align: center;
      margin-bottom: 30rpx;
      .last{
         background: #E9F5F6;
      background: #e9f5f6;
         width: 60rpx;
         border-radius: 8rpx 0rpx 0rpx 8rpx;
         border: 1rpx solid #DFDEDE;
      border: 1rpx solid #dfdede;
      }
      .name{
         width: 186rpx;
         border: 1rpx solid #DFDEDE;
      border: 1rpx solid #dfdede;
      }
   }
}