yudao-mall-uniapp/pages/XDHome/technician/orderGrabbingTechnician/orderGrabbingTechnician.vue

<!-- 抢单技师 -->
<template>
  <view class="body" :style="'padding-top:' + bottomHeight">
    <!-- 导航 -->
    <view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
      <view class="ss-flex-2 ss-col-center">
        <text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
        <view style="margin-left: 15rpx; color: #444; font-size: 28rpx">等待技师接单</view>
      </view>
      <view class="ss-flex-1"></view>
    </view>
    <!-- 项目导航 -->
<!--    <view class="service-info-box">
      <view class="service-item" style="color: #34afc7; border-bottom: 1rpx solid #34afc7"
        >精油按摩</view
      >
      <view class="service-item">小儿推拿</view>
      <view class="service-item">头疗</view>
      <view class="service-item">全身SPA</view>
      <view class="service-item">采耳</view>
      <view class="service-item">小儿推拿</view>
      <view class="service-item">小儿推拿</view>
    </view> -->
    <view class="gud-box">
      <!-- 每个服务项目的订单号 -->
      <view class="orderNumber">订单号：4b003256b7854ki14145e2</view>
      <view class="wait-box">等待技师接单中......</view>
      <view class="tips-box"
        >技师通常需要<text style="color: #34afc7">3~5分钟</text>接单，请耐心等待</view
      >
    </view>
    <!-- 中部 -->
    <view class="list-wrap">
      <scroll-view scroll-y="true" class="list">
        <view class="list-scroll-view">
          <!-- 抢单技师列表 -->
          <view class="grabOrder-list" v-for="i in 9">
            <!-- 左右布局 -->
            <view style="width: 180rpx; min-height: 180rpx">
              <image
                class="wh"
                referrerpolicy="no-referrer"
                src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png"
              />
            </view>
            <view class="ss-flex-1" style="margin-left: 20rpx; margin-top: 5rpx">
              <view class="hang-text-box">技师：王零</view>
              <view class="hang-text-box">预约时间：2024-09-04 12:15:00</view>
              <view class="hang-text-box ss-flex-2 ss-col-center">
                <view style="min-width: 120rpx">服务项目：</view>
                <view>精油按摩，小儿推拿</view>
              </view>
              <view class="hang-text-box ss-flex-2 ss-col-center">
                <view style="min-width: 120rpx">服务地址：</view>
                <view>山东省烟台市莱山区华庭路橡树湾小区10-515</view>
              </view>
              <view class="ss-flex-2 ss-col-center">
                <view class="ss-flex-1"></view>
                <view class="choose-see">选她</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
   <!-- <view class="ss-flex-2 ss-col-center">
      <view class="ss-flex-1"></view>
      <view class="choose-see" style="margin: 10rpx 20rpx; font-size: 26rpx" @click="jumpGrab"
        >去结算</view
      >
    </view> -->
  </view>
</template>
<script setup>
  import { reactive, ref } from 'vue';
  import { computed } from 'vue';
  import {
    onLoad,
    onPageScroll,
    onPullDownRefresh,
    onReady,
    onReachBottom,
    onShow,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  // 隐藏原生tabBar
  // uni.hideTabBar();

  // 跳转到抢单页面
  const jumpGrab = async () => {
    uni.redirectTo({
      url: '/pages/XDHome/technician/grabOrders/grabOrders',
    });
  };

  // 返回上一页
  const backPage = async () => {
    uni.redirectTo({
      url: '/pages/XDHome/technician/grabOrders/grabOrders',
    });
  };
  //获取顶部安全距离
  const app = uni.getSystemInfoSync();
  const bottomHeightOne = app.statusBarHeight + 'rpx';
  const bottomHeight = ref(bottomHeightOne);
</script>
<style scoped lang="scss">
  .gud-box {
    width: 95%;
    margin-left: 2.5%;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    padding: 20rpx;
    padding-bottom: 10rpx;
  }
  .choose-see {
    padding: 5rpx 20rpx;
    font-size: 24rpx;
    color: #fff;
    background-color: #35afca;
    border-radius: 5rpx;
  }

  .hang-text-box {
    font-size: 24rpx;
    color: #4b525a;
    margin-bottom: 10rpx;
  }

  .grabOrder-list {
    position: relative;
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
  }

  .tips-box {
    font-size: 18rpx;
    color: #555;
    text-align: center;
    margin-top: 10rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #999;
  }

  .wait-box {
    font-size: 40rpx;
    color: #e40516;
    margin-top: 30rpx;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2rpx;
  }

  .orderNumber {
    font-size: 20rpx;
    color: #686e76;
    border-bottom: 1rpx solid #999;
    padding: 5rpx;
    padding-bottom: 15rpx;
  }

  .service-item {
    font-size: 26rpx;
    padding: 5rpx 30rpx;
    color: #555;
    box-sizing: border-box;
  }

  .service-info-box {
    position: relative;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 20rpx;
    box-sizing: border-box;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
  }

  .icon-navigation {
    font-size: 32rpx;
    color: #333;
    font-weight: 700;
  }

  // 上中下布局样式
  .body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #eeeef0;
  }

  // 中部滚动
  .list-wrap {
    flex-grow: 1;
    position: relative;
    width: 95%;
    margin-left: 2.5%;
    box-sizing: border-box;
  }

  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10rpx;
  }

  .list-scroll-view {
    background-color: #fff;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    padding: 20rpx;
    box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
    padding-bottom: 40rpx;
    padding-top: 5rpx;
  }

  .course-card {
    width: 47vw;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  // 底部
  .tools {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .tools-item {
    width: 45px;
    text-align: center;
    font-size: 14px;
    padding: 20px;
  }
</style>