jje_staff/pages/performanceList/performanceList.vue

<template>
  <view class="page">
    <uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" left-icon="left"
                 title="我的业绩" @clickLeft="back"/>
    <view class=" tabs ">
      <u-tabs :list="tabList" :scrollable="false" lineWidth="30" lineColor="#FFE05C"
              :activeStyle="{color: '#333333',fontWeight: 'bold',transform: 'scale(1.05)'}" :current="tabIndex"
              @click="clickTab"></u-tabs>
    </view>

    <view class="flex-col justify-between" style="margin-top: 20rpx">
      <view v-if="tabIndex == 0" class="flex-row justify-start">
        <view class="flex-col justify-center">
          <text class="selectParam">时间:</text>
        </view>
        <view @click="openDate(1)">
          <u-input v-model="selectStartDate" class="selectParamInput" disabled-color="#ffffff"
                   placeholder="开始时间"></u-input>
        </view>
        <view class="flex-col justify-center">
          <text class="selectParam" style="margin-left: 10rpx">-</text>
        </view>

        <view @click="openDate(2)">
          <u-input v-model="selectEndDate" class="selectParamInput" disabled-color="#ffffff"
                   placeholder="结束时间"></u-input>
        </view>
      </view>
      <view class="flex-row justify-start" style="margin-top: 10rpx;">
        <view class="flex-col justify-center">
          <text class="selectParam">项目:</text>
        </view>
        <view @click="openServicePro">
          <u-input v-model="selectServiceName" class="selectParamInput" disabled-color="#ffffff"
                   placeholder="选择服务项目"></u-input>
        </view>

        <view class="flex-col justify-center" style="margin-left: 10rpx;">
          <u-button text="清空" type="primary" size="mini" @click="cancelParam"></u-button>
        </view>
        <view class="totalCount">
          <text class="totalCountLabel">总计:</text>
          <text class="totalCountValue">{{ totalCount }}</text>
          <text class="totalCountLabel">单</text>
        </view>
      </view>
    </view>


    <!-- 订单列表 -->
    <view :style="{'height':windowHeight}">
      <swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
        <swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index">
          <view>
            <mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :tabs="tabList" :height="windowHeight"
                           :selectStartDate="selectStartDate" :selectEndDate="selectEndDate"
                           :selectServiceId="selectServiceId" @updateTotal="updateTotal">
            </mescroll-item>
          </view>
        </swiper-item>
      </swiper>
    </view>


    <u-picker title="服务项目" :show="openServiceProShow" :closeOnClickOverlay="true" :columns="serviceList"
              :keyName="'serviceName'" @cancel="openServiceProCancel" @confirm="openServiceProConfirm"></u-picker>

    <u-datetime-picker title="服务时间" :show="openDateShow" :closeOnClickOverlay="true" mode="date"
                       @cancel="openDateCancel" @confirm="openDateConfirm"></u-datetime-picker>

  </view>
</template>

<script>
import MescrollItem from "./module/mescrollUni-item.vue";

export default {
  components: {
    MescrollItem
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [{
        name: '累计服务'
      }, {
        name: '今日业绩'
      }, {
        name: '本月业绩'
      }],

      dateType: 1,
      selectStartDate: null,
      selectEndDate: null,
      selectServiceId: null,
      selectServiceName: null,
      totalCount: 0,

      windowHeight: '',
      serviceList: [],
      openServiceProShow: false,

      openDateShow: false
    }
  },
  onLoad(e) {
    this.tabIndex = e.index * 1
    this.serviceProjectList()
    let sysInfo = uni.getSystemInfoSync()
    if (this.tabIndex == 0) {
      this.windowHeight = sysInfo.windowHeight - 74 - 130 + 'px' //除标题栏栏外的屏幕可用高度
    } else {
      this.windowHeight = sysInfo.windowHeight - 74 - 90 + 'px' //除标题栏栏外的屏幕可用高度
    }
    // 页面加载后延迟触发初始数据加载，确保组件已挂载
    setTimeout(() => {
      if (this.$refs.MescrollItem && this.$refs.MescrollItem[this.tabIndex]) {
        this.$refs.MescrollItem[this.tabIndex].downCallback()
      }
    }, 300)
  },
  methods: {
    // 更新统计总数
    updateTotal(total) {
      this.totalCount = total
    },

    cancelParam() {
      this.selectStartDate = null
      this.selectEndDate = null
      this.selectServiceId = null
      this.selectServiceName = null
      this.totalCount = 0
      setTimeout(() => {
        this.$refs.MescrollItem[this.tabIndex].downCallback()
      }, 100)
    },

    openDate(dateType) {
      this.dateType = dateType;
      this.openDateShow = true

    },
    openDateCancel() {
      this.openDateShow = false

    },
    openDateConfirm(e) {
      console.log(e)
      const timeFormat = uni.$u.timeFormat;
      if (this.dateType == 1) {
        this.selectStartDate = timeFormat(e.value, 'yyyy-mm-dd')
      }
      if (this.dateType == 2) {
        this.selectEndDate = timeFormat(e.value, 'yyyy-mm-dd')
      }
      this.openDateShow = false
      setTimeout(() => {
        this.$refs.MescrollItem[this.tabIndex].downCallback()
      }, 100)
    },

    openServicePro() {
      console.log('openServicePro')
      this.openServiceProShow = true
    },

    openServiceProCancel() {
      this.openServiceProShow = false
    },

    openServiceProConfirm(e) {
      console.log(e)
      this.openServiceProShow = false
      this.selectServiceId = e.value[0].id
      this.selectServiceName = e.value[0].serviceName
      console.log('++++++++++++++this.$refs+++++++++++++', this.$refs);
      setTimeout(() => {
        this.$refs.MescrollItem[this.tabIndex].downCallback()
      }, 100)
    },

    serviceProjectList() {
      this.serviceList = [];
      this.$api.service.serviceProjectList().then(res => {
        this.$set(this.serviceList, 0, res.data.data)
      })
    },

    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    clickTab(e) {
      this.selectStartDate = null
      this.selectEndDate = null
      this.selectServiceId = null
      this.selectServiceName = null
      this.totalCount = 0
      this.tabIndex = e.index
      // 切换tab时触发数据加载以更新统计
      setTimeout(() => {
        this.$refs.MescrollItem[this.tabIndex].downCallback()
      }, 100)
    },
    swiperChange(e) {
      this.tabIndex = e.detail.current
      // 滑动切换时触发数据加载以更新统计
      setTimeout(() => {
        if (this.$refs.MescrollItem && this.$refs.MescrollItem[this.tabIndex]) {
          this.$refs.MescrollItem[this.tabIndex].downCallback()
        }
      }, 100)
    },
  }
}
</script>

<style scoped lang="scss">
@import './index.rpx.css';
</style>