ebike-plus-wx-maintenance/src/pages-sub/common/carDetail.vue

<script lang="ts" setup>
import { getEbikeDetailForWorkAPI } from '@/api/operator'
import { systemInfo } from '@/utils/systemInfo'
import detaileTools from './components/detaileTools.vue'
import detailModule from './components/detailModule.vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const touchBoxShow = ref(true)
const currentOffset = ref(0) // 当前滑动偏移量（相对初始位置）
const initialTop = 100 // 假设初始 top 是 100px
const currentOpacity = ref(0)
const carDetail = ref<any>({})
const currentIndex = ref(0) // 当前选中的 tabbar index
const pageNum = ref(1)
const bikeId = ref('')
const tabList = ref([
  {
    name: '基本信息',
  },
])

function tabClick(item: any) {
  const { index } = item
  currentIndex.value = index
  // touchBoxShow.value = index === 0
}

function handleTouchMove(e: any) {
  const offsetTop = e.currentTarget.offsetTop
  // console.log(offsetTop)
  currentOffset.value = offsetTop
  // console.log((offsetTop / 200) * 1)
  // console.log(Math.min(1, (offsetTop / 200) * 1))
}

function handleTouchEnd(e: any) {
  const { curTop } = e
  if (curTop <= 310) {
    currentOpacity.value = 1
    return
  }
  else if (curTop > 600) {
    currentOpacity.value = 0
    return
  }
}
// 返回
function handleBack() {
  uni.navigateBack()
}

async function getEbikeDetailForWork() {
  uni.showLoading({
    title: '加载中...',
  })
  try {
    const res = await getEbikeDetailForWorkAPI(bikeId.value)
    console.log(res)
    if (res) {
      carDetail.value = res
      carDetail.value.bikeCode = bikeId.value
    }
  }
  catch (e) {
    console.error('获取车辆详情报错------>', e)
  }
  finally {
    uni.hideLoading()
  }
}

onLoad((query) => {
  query.bikeCode = '42548803223'
  const { bikeCode } = query
  if (bikeCode) {
    bikeId.value = bikeCode
    getEbikeDetailForWork()
  }
})
</script>

<template>
  <view
    class="detail_container"
    :style="{
      height: `${systemInfo.windowHeight}px`,
      backgroundColor: '#f9f9f9',
    }"
  >
    <!-- 头部 -->
    <view class="detail_container_header">
      <!-- 返回 -->
      <view
        class="back_bar"
        :style="{
          height: `${systemInfo.statusBarHeight + 44}px`,
        }"
      >
        <view class="icon_back">
          <uv-icon name="arrow-left" color="#222222" size="24" @click="handleBack" />
          <text class="text">车辆详情</text>
        </view>
      </view>
      <!-- tab 栏 -->
      <view class="tab_bar">
        <uv-tabs
          :list="tabList"
          line-color="#222222"
          :active-style="{
            color: '#222222',
            fontSize: '30rpx',
            fontWeight: 'bold',
          }"
          :item-style="{
            padding: '8px 15px',
          }"
          :inactive-style="{
            color: '#222222',
            fontSize: '28rpx',
          }"
          @click="tabClick"
        />
      </view>
    </view>
    <!-- 填充区：为了解决ios回弹的问题 -->
    <view
      :style="{ width: '100%', height: `${systemInfo.statusBarHeight + 44 + 46}px` }"
    />
    <!-- 内容区域 -->
    <view
      class="detail_container_content"
      :style="{
        height: `${systemInfo.safeArea.height - (44 + (systemInfo.safeAreaInsets.bottom ? systemInfo.safeAreaInsets.bottom : 46))}px`,
      }"
    >
      <view
        class="content_slide"
        :style="{
          transform: `translateX(${(-currentIndex * 100) / pageNum}%)`,
          transition: 'transform .3s ease-in-out',
        }"
      >
        <!-- 基本信息 -->
        <view class="content_item">
          <detailModule :data="carDetail" />
        </view>
      </view>
    </view>

    <!-- 滑动栏 -->
    <you-touchbox
      v-show="touchBoxShow"
      :custom-style="{
        backgroundColor: '#ffffff',
        borderTopLeftRadius: '20px',
        borderTopRightRadius: '20px',
        boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.4)',

      }"
      min-top="100"
      max-top="300"
      @touch-change="handleTouchMove"
      @touch-end="handleTouchEnd"
    >
      <detaileTools :bike-code="bikeId" />
    </you-touchbox>
    <!-- 蒙层 -->
    <view
      :style="{
        opacity: currentOpacity,
        pointerEvents: currentOpacity > 0 ? 'auto' : 'none',
      }"
      class="mask"
    />
  </view>
</template>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  overflow-y: hidden;

  &_header {
    width: 100%;
    position: fixed;
    z-index: 9999;
    background-color: white;

    .back_bar {
      width: 100%;
      position: relative;

      .icon_back {
        position: absolute;
        display: flex;
        align-items: center;
        bottom: 25rpx;
        left: 30rpx;

        .text {
          font-family: SourceHanSansCN-Medium;
          font-size: 34rpx;
          color: #222222;
          letter-spacing: 0;
          font-weight: 500;
        }
      }
    }

    .tab_bar {
      width: 100%;
      padding-bottom: 7px;
    }
  }

  &_content {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    .content_slide {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-y: auto;

      .content_item {
        width: 100%; /* 或者使用 100% 如果父容器固定宽度 */
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  transition: opacity 0.3s ease;
  // pointer-events: none; /* 不拦截点击 */
}
</style>