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

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

definePage({
  style: {
    navigationBarTitleText: '车辆详情',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const touchBoxShow = ref(true)
const currentOffset = ref(0) // 当前滑动偏移量（相对初始位置）
const initialTop = 100 // 假设初始 top 是 100px
const currentOpacity = ref(0)

const currentIndex = ref(0) // 当前选中的 tabbar index
const pageNum = ref(1)
const tabList = ref([
  {
    name: '车辆信息',
  },
])
const bikeId = ref('')
const carDetail = ref<any>({})
const contentItemInnerConfig = reactive({
  height: 300,
})

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

function handleTouchStart(e: any) {

}

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
  }
}

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) => {
  contentItemInnerConfig.height = 48
  // 获取车辆编号
  const { bikeCode } = query
  if (bikeCode) {
    bikeId.value = bikeCode
    getEbikeDetailForWork()
  }
})
</script>

<template>
  <view class="detail_container">
    <!-- 详情页头部 -->
    <view class="header_tabs">
      <uv-tabs
        :list="tabList"
        line-color="#ffffff"
        :active-style="{
          color: '#ffffff',
          fontWeight: 'bold',
        }"
        :item-style="{
          padding: '8px 15px',
        }"
        :inactive-style="{
          color: '#ffffff',
          fontSize: '30rpx',
        }"
        @click="tabClick"
      />
    </view>
    <!-- 内容区域 -->
    <view class="content_wrapper">
      <view
        class="content_slide"
        :style="{
          transform: `translateX(${(-currentIndex * 100) / pageNum}%)`,
          transition: 'transform .3s ease-in-out',
        }"
      >
        <!-- 车辆详情 -->
        <view class="content_item">
          <view
            class="content_item_inner"
            :style="{
              height: `calc(100vh - ${contentItemInnerConfig.height}px)`,
            }"
          >
            <detailModule :data="carDetail" />
          </view>
        </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-start="handleTouchStart"
      @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%;

  .header_tabs {
    width: 100%;
    position: relative;
    padding-bottom: 10rpx;
    background-color: #1488f5;
  }

  .content_wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    .content_slide {
      display: flex;
      width: max-content;

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

        .content_item_inner {
          width: 100%;
          background-color: #f2f2f2;
        }
      }
    }
  }
}

.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>