志愿者服务

pages_classify/pages/handle/index.vue

@@ -9,36 +9,44 @@
       <view class="handle-user-info">
         <view class="user-name">
           <text class="user-PlaEde">下单时间：</text>
-          <text>{{ detaile.createTime }}</text>
+          <text>{{ detaile.workDate }}</text>
         </view>
         <view class="user-name">
-          <text class="user-Home">上门时间：</text>
+          <text class="user-PlaEde">上门时间：</text>
           <text>{{ detaile.workDate + ' ' + detaile.workStartTime }}</text>
         </view>
         <view class="user-name">
-          <text class="user-Serve">服务人员：</text>
+          <text class="user-PlaEde">服务人员：</text>
           <text>{{ detaile.clientName }}</text>
         </view>
-        <view class="user-id" style="display: flex">
-          <text class="user-category">服务类别：</text>
+        <view class="user-name" style="display: flex">
+          <text class="user-PlaEde">服务类别：</text>
           <text>{{ detaile.businessTireName }}</text>
         </view>
-        <view class="adress-text">
-          <text class="user-address">地址：</text>
-          <text>{{ detaile.address }}</text>
+        <view class="user-name">
+          <text class="user-seRssEdc">地址：</text>
+          <text class="address-text">{{ detaile.address }}</text>
         </view>
         <view class="handle-remark">
           <view class="remark-title">备注</view>
           <view class="remark-text">{{ detaile.remark || '暂无备注' }}</view>
         </view>
       </view>
+    </view>
 
-      <view class="footer-g">
-        <view class="handle-start" v-if="orderStatus && detaile.serviceStartTime && dateData">
-          服务已开始：<text class="handle-time">{{ dateData }}</text>
-        </view>
-        <Slide ref="verify" @change="change" :sliderText="slideData" :btnType="orderStatus ? 'upload' : 'start'" />
+    <view class="footer-g">
+      <view
+        class="handle-start"
+        v-if="orderStatus && detaile.serviceStartTime && dateData"
+      >
+        服务已开始：<text class="handle-time">{{ dateData }}</text>
       </view>
+      <Slide
+        ref="verify"
+        @change="change"
+        :sliderText="slideData"
+        :btnType="orderStatus ? 'upload' : 'start'"
+      />
     </view>
 
     <!-- <view class="handle-adress">
@@ -52,16 +60,17 @@
         <text class="remark-title">服务时间： {{ detaile.workDate + ' ' + detaile.workStartTime }}</text>
       </view>
     </view> -->
-
-
   </view>
-
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { onLoad, onUnload } from '@dcloudio/uni-app'
-import { getVolunteerOrderInfo, getTimesByDate, getVolunteerFinishSecondOrder } from '@/api/volunteer.js'
+import {
+  getVolunteerOrderInfo,
+  getTimesByDate,
+  getVolunteerFinishSecondOrder,
+} from '@/api/volunteer.js'
 import PositioningMap from '@/pages_classify/components/PositioningMap/index.vue'
 import Slide from '@/pages_classify/components/Slide/index.vue'
 import { useDict } from '@/utils/dict.js'
@@ -91,9 +100,9 @@ const getCurrentLocation = () => {
     // 先检查用户是否授权了位置权限
     uni.getSetting({
       success: (res) => {
-        console.log("TCL: getCurrentLocation -> res", res)
+        console.log('TCL: getCurrentLocation -> res', res)
         // 已授权，直接获取位置
-        getLocation(resolve, reject);
+        getLocation(resolve, reject)
         // if (!res.authSetting['scope.getFuzzyLocation']) {
         //   // 如果用户未授权，先请求授权
         //   uni.authorize({
@@ -123,11 +132,11 @@ const getCurrentLocation = () => {
         // }
       },
       fail: (err) => {
-        console.error('获取设置失败:', err);
-        reject(err);
-      }
-    });
-  });
+        console.error('获取设置失败:', err)
+        reject(err)
+      },
+    })
+  })
 }
 
 // 获取位置的具体实现
@@ -138,25 +147,25 @@ const getLocation = (resolve, reject) => {
     // isHighAccuracy: true, // 高精度
     // highAccuracyExpireTime: 3000, // 高精度过期时间
     success: (res) => {
-      const { longitude, latitude } = res;
-      console.log('当前位置 - 经度:', longitude);
-      console.log('当前位置 - 纬度:', latitude);
+      const { longitude, latitude } = res
+      console.log('当前位置 - 经度:', longitude)
+      console.log('当前位置 - 纬度:', latitude)
       resolve({
         longitude,
-        latitude
-      });
+        latitude,
+      })
     },
     fail: (err) => {
-      console.error('获取位置失败:', err);
+      console.error('获取位置失败:', err)
       // 获取位置失败时向用户提示
       uni.showToast({
         title: '获取位置失败，请确保已开启位置权限',
         icon: 'none',
-        duration: 2000
-      });
-      reject(err);
-    }
-  });
+        duration: 2000,
+      })
+      reject(err)
+    },
+  })
 }
 
 const slideData = computed(() => {
@@ -193,7 +202,9 @@ const getOrderDetail = async () => {
     }
     if (res.data.serviceStartTime) {
       timer = setInterval(() => {
-        const timeDiff = Math.abs(new Date() - new Date(res.data.serviceStartTime))
+        const timeDiff = Math.abs(
+          new Date() - new Date(res.data.serviceStartTime)
+        )
         const units = {
           day: Math.floor(timeDiff / (1000 * 60 * 60 * 24)),
           hour: Math.floor(timeDiff / (1000 * 60 * 60)),
@@ -234,7 +245,9 @@ const change = async (e) => {
 
       const locationData = await getLatLong()
       // 构建参数字符串
-      const params = `secondOrderId=${secondOrderId.value}&serviceStartLongitude=${locationData.longitude.toString()}&serviceStartLatitude=${locationData.latitude.toString()}`
+      const params = `secondOrderId=${
+        secondOrderId.value
+      }&serviceStartLongitude=${locationData.longitude.toString()}&serviceStartLatitude=${locationData.latitude.toString()}`
 
       // 调用开始服务接口，通过URL查询参数传递位置信息
       const res = await getTimesByDate(params)
@@ -254,7 +267,7 @@ const change = async (e) => {
       console.error('开始服务失败', error)
       uni.showToast({
         title: error.message || '开始服务失败',
-        icon: 'none'
+        icon: 'none',
       })
     } finally {
       // uni.hideLoading()
@@ -282,7 +295,7 @@ const change = async (e) => {
       console.error('结束服务失败', error)
       uni.showToast({
         title: error.message || '结束服务失败',
-        icon: 'none'
+        icon: 'none',
       })
       verify.value.initialization()
     } finally {
@@ -320,41 +333,111 @@ onUnload(() => {
 </script>
 <style lang="scss" scoped>
 .handle-user-info {
-  // display: flex;
-  // flex-direction: column;
-  // gap: 10rpx;
   position: absolute;
   top: 531rpx;
   left: 0;
   right: 0;
-  bottom: 0;
-  background: red;
+  background: #FFFFFF;
   width: 750rpx;
-  height: 804rpx;
   border-radius: 20rpx 20rpx 0rpx 0rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+  .user-name {
+    width: 660rpx;
+    height: 50rpx;
+    opacity: 0.4;
+    border-bottom: 1rpx solid rgba(216, 216, 216, 0.8);
+    margin-bottom: 30rpx;
+  }
+  .user-PlaEde {
+    width: 140rpx;
+    height: 40rpx;
+    font-family: PingFang SC;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 40rpx;
+    letter-spacing: normal;
+    color: #7b7b7b;
+  }
+  .seRssEdc {
+    width: 140rpx;
+    height: 40rpx;
+    font-family: PingFang SC;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 40rpx;
+    letter-spacing: normal;
+    color: #7b7b7b;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 224rpx; /* 8个字的大致宽度，28rpx * 8 */
+    display: inline-block;
+  }
+  .user-seRssEdc {
+    height: 40rpx;
+    font-family: PingFang SC;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 40rpx;
+    letter-spacing: normal;
+    color: #7b7b7b;
+  }
+  // 备注
+  .handle-remark {
+    width: 660rpx;
+    height: 50rpx;
+    opacity: 0.4;
+    margin-bottom: 30rpx;
+  }
 
-  // margin-left: 38rpx;
-  // margin-right: 36rpx;
-  // margin-top: 50rpx;
-  // > view {
-  //   padding-bottom: 16rpx;
-  //   border-bottom: 1px solid #f0f0f0;
-  //   margin-bottom: 16rpx;
-  //   font-size: 28rpx;
-  //   color: #333;
-  //   // display: flex;
-  //   // justify-content: flex-start;
-  //   // align-items: center;
-  // }
-  .footer-g {}
+  .remark-title {
+    width: 140rpx;
+    height: 40rpx;
+    font-family: PingFang SC;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 40rpx;
+    letter-spacing: normal;
+    color: #7b7b7b;
+  }
 
-  .slider-verify data-v-346965dc {
-    position: relative;
-    width: 100%;
-    height: 100rpx;
+  .address-text {
+    white-space: nowrap;
     overflow: hidden;
-    border-radius: 50rpx;
-    top: 659rpx;
+    text-overflow: ellipsis;
+    max-width: 480rpx; /* 留出seRssEdc的宽度 */
+    display: inline-block;
+    vertical-align: top;
+    font-size: 28rpx;
   }
 }
+
+.footer-g {
+  position: fixed;
+  bottom: 50rpx;
+  left: 0;
+  right: 0;
+  padding: 0 30rpx;
+  z-index: 10;
+}
+
+.handle-start {
+  text-align: center;
+  margin-bottom: 20rpx;
+  color: #333;
+  font-size: 28rpx;
+}
+
+.handle-time {
+  font-weight: bold;
+  color: #f64a1f;
+}
+
+:deep(.slider-verify) {
+  width: 100%;
+  height: 100rpx;
+  overflow: hidden;
+  border-radius: 50rpx;
+}
 </style>