crm-app-vue3/pages/orderDetailRefactored/components/OrderDetailView.vue

<template>
  <view
    class="order-detail-view"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
  >
    <!-- 单 scroll-view：先滚完当前页再进入下一页，避免误触下拉刷新 -->
    <scroll-view
      scroll-y
      class="page-scroll-view"
      :scroll-top="snapScrollTop >= 0 ? snapScrollTop : undefined"
      :scroll-into-view="scrollIntoView"
      :scroll-with-animation="true"
      :show-scrollbar="false"
      @scroll="onScroll"
    >
      <view id="page0" class="page-section" :style="{ minHeight: sectionMinHeight }">
        <view class="page-item">
          <PageOne :order-detail="orderDetail" :order-id="orderId" :current-receipt="currentReceipt" @next="handleNext" />
        </view>
      </view>
      <view id="page1" class="page-section" :style="{ minHeight: sectionMinHeight }">
        <view class="page-item">
          <PageTwo
            :order-detail="orderDetail"
            :order-id="orderId"
            :current-receipt="currentReceipt"
            :follow-up-list="followUpList"
            @next="handleNext"
            @update-file-ids="handleUpdateFileIds"
            @price-updated="$emit('price-updated')"
            @follow-saved="loadFollowUpList"
          />
        </view>
      </view>
      <view id="page2" class="page-section" :style="{ minHeight: sectionMinHeight }">
        <view class="page-item">
          <PageThree
            ref="pageThreeRef"
            :order-detail="orderDetail"
            :order-id="orderId"
            :current-receipt="currentReceipt"
            @next="handleNext"
            @save="handleNeedSave"
            @confirm-pay="handleConfirmPay"
            @update-file-ids="handleUpdateFileIds"
            @price-updated="$emit('price-updated')"
          />
        </view>
      </view>
      <view id="page3" class="page-section" :style="{ minHeight: sectionMinHeight }">
        <view class="page-item">
          <PageFour
            :order-detail="orderDetail"
            :current-receipt="currentReceipt"
            @next="handleNext"
            @confirm-warehouse="handleConfirmWarehouse"
            @update-order-detail="$emit('update-order-detail', $event)"
          />
        </view>
      </view>
    </scroll-view>

    <!-- 页面导航（点击仍可切换） -->
    <ul class="page-navigation">
      <li
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="handleTabClick(index)"
      >
        {{ tab }}
      </li>
    </ul>
  </view>
</template>

<script>
import PageOne from './PageOne.vue'
import PageTwo from './PageTwo.vue'
import PageThree from './PageThree.vue'
import PageFour from './PageFour.vue'

export default {
  name: 'OrderDetailView',
  components: {
    PageOne,
    PageTwo,
    PageThree,
    PageFour
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => ({})
    },
    topInfo: {
      type: Object,
      default: () => ({})
    },
    orderId: {
      type: String,
      default: ''
    },
    currentReceipt: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const sys = typeof uni !== 'undefined' ? uni.getSystemInfoSync() : { windowHeight: 600 }
    const sectionMinHeight = (sys.windowHeight || 600) - 100 + 'px' // 一屏高度，留出导航等
    return {
      activeIndex: 0,
      tabs: ['一', '二', '三', '四'],
      scrollTop: 0,
      scrollIntoView: '',
      sectionMinHeight,
      sectionTops: [0],
      scrollTopLock: null,
      // 吸住效果：仅在有意义的数值时控制 scroll-top，-1 表示不控制
      snapScrollTop: -1,
      scrollEndTimer: null,
      snapInProgress: false,
      // 阻止在非顶部时触发页面下拉刷新（由 touch 捕获）
      touchStartY: 0,
      // 表单数据
      formData: {
        formOne: {},
        formTwo: {},
        formThree: {},
        formFour: {}
      },
      pageThreeForm: {},
      fileIds: '',
      // 跟进记录
      followUpList: []
    }
  },
  mounted() {
    this.$nextTick(() => this.measureSectionTops())
  },
  updated() {
    this.$nextTick(() => this.measureSectionTops())
  },
  watch: {
    orderDetail: {
      handler(newVal) {
        if (newVal && newVal.clueId) {
          this.loadFollowUpList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 加载跟进记录
     */
    async loadFollowUpList() {
      try {
        const res = await uni.$u.api.getDuplicateOrderFollowListByClueId({
          clueId: this.orderDetail.clueId
        })
        const data = res.data || {}
        const followUpList = []
        // 按日期键升序合并，保证“最后一条”=“最新一条”，回显才能拿到最新
        const dates = Object.keys(data).filter(Boolean).sort()
        for (const key of dates) {
          const list = data[key] || []
          followUpList.push(...list)
        }
        // 再按 createTime 排一次，同一天内多条时也保证时间顺序
        followUpList.sort((a, b) => {
          const t1 = a.createTime || ''
          const t2 = b.createTime || ''
          return t1.localeCompare(t2)
        })
        this.followUpList = followUpList
      } catch (error) {
        console.error('获取跟进记录失败:', error)
        uni.$u.toast('获取跟进记录失败')
      }
    },

    /**
     * 测量各段顶部位置，用于根据 scrollTop 计算当前页
     */
    measureSectionTops() {
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.page-section')
        .fields({ size: true }, (res) => {
          if (!res || !res.length) return
          const tops = [0]
          for (let i = 0; i < res.length - 1; i++) {
            tops.push(tops[i] + (res[i].height || 0))
          }
          this.sectionTops = tops
        })
        .exec()
    },

    /**
     * 滚动时更新当前页索引
     */
    onScroll(e) {
      const scrollTop = e.detail?.scrollTop ?? 0
      if (this.scrollTopLock !== null) return
      this.scrollTop = scrollTop
      // 吸附过程中不更新页索引、不启动“滚动结束”定时器，避免释放控制后误触二次吸附到第一页
      if (this.snapInProgress) return
      const tops = this.sectionTops
      if (tops.length) {
        let idx = 0
        for (let i = tops.length - 1; i >= 0; i--) {
          if (scrollTop >= tops[i] - 10) {
            idx = i
            break
          }
        }
        if (idx !== this.activeIndex) {
          this.activeIndex = idx
          this.tryRefreshPageThree(idx)
        }
      }
      if (this.scrollEndTimer) clearTimeout(this.scrollEndTimer)
      this.scrollEndTimer = setTimeout(() => this.doSnap(), 150)
    },

    /**
     * 滚动停止后吸附到当前所在页的起始位置（轮播吸住感）
     */
    doSnap() {
      this.scrollEndTimer = null
      const tops = this.sectionTops
      if (!tops.length) return
      const scrollTop = this.scrollTop
      let nearest = tops.length - 1
      for (let i = tops.length - 1; i >= 0; i--) {
        if (scrollTop >= tops[i] - 2) {
          nearest = i
          break
        }
      }
      const targetTop = tops[nearest]
      if (Math.abs(scrollTop - targetTop) < 2) {
        this.snapInProgress = false
        return
      }
      this.snapInProgress = true
      this.snapScrollTop = targetTop
      this.activeIndex = nearest
      this.tryRefreshPageThree(nearest)
      setTimeout(() => {
        this.snapScrollTop = -1
        // 释放后仍保持 snapInProgress 一段时间，避免“释放”触发的 scroll 事件再次触发 doSnap 吸到第一页
        setTimeout(() => {
          this.snapInProgress = false
        }, 200)
      }, 350)
    },

    tryRefreshPageThree(index) {
      if (index === 2 && this.$refs.pageThreeRef) {
        const ref = Array.isArray(this.$refs.pageThreeRef) ? this.$refs.pageThreeRef[0] : this.$refs.pageThreeRef
        if (ref && ref.refreshImageList) ref.refreshImageList()
      }
    },

    /**
     * 触摸开始：记录 Y，用于避免误触页面下拉刷新
     */
    onTouchStart(e) {
      this.touchStartY = e.touches && e.touches[0] ? e.touches[0].clientY : 0
    },

    /**
     * 触摸移动：在非全局顶部时用 catch 阻止事件冒泡到页面，减少触发下拉刷新
     */
    onTouchMove(e) {
      if (this.scrollTop > 20 && e.cancelable) {
        e.stopPropagation()
      }
    },

    /**
     * 处理下一步：滚动到下一页
     */
    handleNext({ nowPage, form }) {
      if (nowPage) {
        this.formData[nowPage] = form
      }
      const nextIndex = Math.min(this.activeIndex + 1, this.tabs.length - 1)
      this.scrollToSection(nextIndex)
      this.activeIndex = nextIndex
      if (nextIndex === 2 && this.$refs.pageThreeRef) {
        const ref = Array.isArray(this.$refs.pageThreeRef) ? this.$refs.pageThreeRef[0] : this.$refs.pageThreeRef
        if (ref && ref.refreshImageList) ref.refreshImageList()
      }
    },

    /**
     * 处理保存
     */
    handleNeedSave({ nowPage, form, fileIds }) {
      this.pageThreeForm = form
      this.fileIds = fileIds
    },

    /**
     * 处理确认支付
     */
    async handleConfirmPay() {
      try {
        const response = await uni.$u.api.saveOrderFileAndTransfer({
          id: this.orderId,
          clueId: this.orderDetail.clueId
        })
        uni.$u.toast(response.msg || '支付成功')
      } catch (error) {
        console.error('支付失败:', error)
        uni.$u.toast(`支付失败：${error}`)

        //支付失败回滚支付信息
        await uni.$u.api.updateClueOrderForm({
          id: this.orderDetail.id,
          paymentMethod: ''
        })
      }
    },

    /**
     * 处理确认入库
     */
    async handleConfirmWarehouse({ warehouseInfo }) {
      try {
        const params = {
          searchValue: this.orderDetail.searchValue,
          createBy: this.orderDetail.createBy,
          createTime: this.orderDetail.createTime,
          updateBy: this.orderDetail.updateBy,
          updateTime: this.orderDetail.updateTime,
          params: this.orderDetail.params,
          id: this.currentReceipt.id,
          sendFormId: this.orderId,
          clueId: this.orderDetail.clueId,
          item: warehouseInfo.item || '',
          code: warehouseInfo.codeStorage || '',
          phone: this.orderDetail.phone,
          tableFee: warehouseInfo.watchPrice || '',
          benefitFee: warehouseInfo.benefitFee || '',
          freight: warehouseInfo.freight || '',
          checkCodeFee: warehouseInfo.checkCodeFee || '',
          receiptRemark: `${warehouseInfo.remarks || ''};${warehouseInfo.uploadedImage || ''}`,
          repairAmount: warehouseInfo.repairAmount || '',
          grossPerformance: warehouseInfo.grossPerformance || '',
          expressOrderNo: warehouseInfo.expressOrderNo || '',
          fileIds: this.fileIds,
          customerServiceName: warehouseInfo.customerServiceName || '1',
          deptId: this.orderDetail.deptId,
          category: warehouseInfo.category || this.orderDetail.category,
          delFlag: this.orderDetail.delFlag,
          idCard: this.pageThreeForm.idNumber || '',
          paymentMethod: '小葫芦线上支付',
          bankCardNumber: this.pageThreeForm.bankAccount || '',
          bankName: this.pageThreeForm.bankName || '',
          customName: this.pageThreeForm.customName || ''
        }

        if (this.currentReceipt.id) {
          await uni.$u.api.updateReceiptForm(params)
        } else {
          await uni.$u.api.addReceiptForm(params)
        }
        uni.$u.toast('入库成功')
      } catch (error) {
        console.error('入库失败:', error)
        uni.$u.toast('入库失败')
      }
    },

    /**
     * 滚动到指定页（用于点击导航、下一步）
     */
    scrollToSection(index) {
      if (this.scrollEndTimer) clearTimeout(this.scrollEndTimer)
      this.scrollEndTimer = null
      this.snapInProgress = true
      this.scrollIntoView = 'page' + index
      this.$nextTick(() => {
        setTimeout(() => {
          this.scrollIntoView = ''
          setTimeout(() => {
            this.snapInProgress = false
          }, 100)
        }, 300)
      })
      this.activeIndex = index
      this.tryRefreshPageThree(index)
    },

    /**
     * 处理标签点击
     */
    handleTabClick(index) {
      this.scrollToSection(index)
    },

    /**
     * 更新 fileIds
     */
    handleUpdateFileIds(fileIds) {
      if (this.currentReceipt) {
        this.$set(this.currentReceipt, 'fileIds', fileIds)
        this.fileIds = fileIds
      }
    }
  }
}
</script>

<style scoped lang="scss">
.order-detail-view {
  position: relative;
  padding: 20rpx;
  height: calc(100vh - 200rpx);
  min-height: calc(100vh - 200rpx);
}

.page-scroll-view {
  width: 100%;
  height: 100%;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-section {
  width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-item {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.page-navigation {
  position: fixed;
  right: 20rpx;
  top: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
  color: #000;
  font-size: 20rpx;
  font-weight: 800;
  z-index: 100;

  li {
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    width: 70rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin-bottom: 20rpx;
    transition: all 0.3s ease-in-out;
    font-weight: 800;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    cursor: pointer;

    &.active {
      color: #fff;
      opacity: 1;
      background-color: rgb(37 99 235 / 1);
    }

    &:hover {
      opacity: 0.9;
      transform: scale(1.05);
    }
  }
}
</style>