pet_uni/pages/OrderDetail/components/startService.vue

<script setup>

import FomItem from "./fomItem.vue";
import {reactive, ref, defineProps} from "vue";
import {onReady} from "@dcloudio/uni-app";
import {orderServiceInfo} from "../../../api/order";
import {imghost} from "../../../config/host";

const service = reactive({startService:{}});

const props = defineProps({id: {type:[Number,String]}})


const staticImage = {
  petGun:imghost +'/pet_gun.png',
}
getDetail()
const show = ref(false);
function getDetail(){
  let id = props.id
  orderServiceInfo(id).then(res => {
    service.value =res.data;
    show.value = true;
    // service.endService =res.data.endService;

  })
}
const imageUrl = ref('');
const imageShow = ref(false);
function showBigImage(imgUrl){
  imageUrl.value = imgUrl;
  imageShow.value = true;
}

const videoUrl = ref('');
const videoShow = ref(false);
function showBigVideo(videoUrl) {
  videoUrl.value = videoUrl;
  videoShow.value = true;
}
</script>

<template>
  <view v-if="show">
    <view v-if="service?.startService" class="pet-detail-bottom-container">
      <view class="pet-detail-container">
        <view class="pet-detail-gun col">
          <image class="img" mode="heightFix" :src="staticImage.petGun"/>
        </view>
        <view class="pet-detail-content">
          <view class="content-item"><view>开始订单</view></view>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.arrival_time" name="到达时间" type="text"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.worker_confirm" name="宠物师确认" type="media"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.hand_disinfect" name="手部消毒" type="media"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.body_disinfect" name="全身消毒" type="media"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.key" name="钥匙开启/收取" type="media"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.key_info" name="钥匙描述" type="text"></FomItem>
          <FomItem @showBigImage="showBigImage" @showBigVideo="showBigVideo" :data="service.startService.service_tools" name="服务工具" type="text"></FomItem>
        </view>

        <view class="pet-detail-background"></view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.pet-detail-bottom-container{
  padding:15rpx;
  .pet-detail-container{
    .pet-detail-gun{
      width:100%;
      text-align: center;
      .img{
        height:90rpx;
      }

      position: absolute;
      top:-70rpx;
      left:0;
    }
    position: relative;
    .pet-detail-content{
      padding:50rpx 0;
      border: 3rpx solid #262626;
      background:{
        color:#FFFFFF;
      }
      border-radius: 26rpx;
      .content-item{
        align-items: center;
        padding:15rpx 30rpx;
        .item-icon{
          width:32rpx;
          height:32rpx;
          .img{
            width:32rpx;
            height:32rpx;
          }
        }
        .item-title{
          font-size: 30rpx;
          font-weight: 500;
          color: #111111;
          margin-left:3rpx;
        }
        .item-content {
          font-size: 30rpx;
          font-weight: 400;
          color: #4D4D4D;
          margin-left:10rpx;
          &.item-textarea{
            width:100%;
            padding:30rpx;
            background:{
              color:#F2F8F8;
            }
            margin-left:0;
            margin-top:20rpx;
            min-height:100rpx;
          }
        }

        &.pet-detail-video-group{
          .video-title{
            .img{
              height:35rpx;
            }
          }
          .video-content{
            padding:0rpx;
            position: relative;
            .video-content-container{
              height:300rpx;
              background-color:rgba(0,0,0,1);
              border-radius: 16rpx;
              position: relative;
              z-index: 2;
              .img{
                height:250rpx;
              }
            }
            .video-content-background{
              width:100%;
              height:100%;
              position: absolute;
              top:10rpx;
              left:10rpx;
              z-index: 1;
              border:1rpx solid #000;
              border-radius: 16rpx;
            }
          }
        }
        &.pet-detail-photo-group{
          box-sizing: border-box;
          .video-content{
            box-sizing: border-box;
          }
          .video-title{
            .img{
              height:35rpx;
            }
          }
          .photo-item{

            box-sizing: border-box;
            padding:10rpx;
            .photo-item-container{
              position: relative;
              box-sizing: border-box;
              .photo-content{
                box-sizing: border-box;
                position: relative;
                border:1rpx solid #000;
                border-radius: 20rpx;
                z-index: 2;

              }
              .photo-background{
                box-sizing: border-box;
                position: absolute;
                top:10rpx;
                left:0;
                z-index: 1;
                width:100%;
                height:100%;
                border:1rpx solid #000;
                border-radius: 20rpx;
              }
            }

            .img{
              width:100%;
            }
          }
        }
      }
    }
    .pet-detail-background{
      position: absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      z-index: -1;
      border-radius: 26rpx;
      transform: rotateZ(2grad);
      background:{
        color:#4DC3B8;
      }
    }
  }
}
</style>