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" readonly 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" readonly 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" readonly 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>

    </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"  >
						</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,

				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' //除标题栏栏外的屏幕可用高度
      }
		},
		methods: {

      cancelParam(){
        this.selectStartDate = null
        this.selectEndDate = null
        this.selectServiceId = null
        this.selectServiceName = null
        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.tabIndex = e.index
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current

			},
		}
	}
</script>

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