PageOptions.vue

<template>
  <view class="page-options" :class="{ 'as-comp': as === 'comp' }" :style="compStyle">
    <view class="mall">
      <MallSelectNvue :current-store="storeVal" :has-store="hasStore" :choose-group="chooseGroup"
        @change="handleMallChange" @storeChange="handlStoreChange">
        <template v-if="$slots.leftIcon" #leftIcon>
          <slot name="leftIcon"></slot>
        </template>
        <template v-if="$slots.rightIcon" #rightIcon>
          <slot name="rightIcon"></slot>
        </template>
      </MallSelectNvue>
    </view>
    <view class="date-picker">
      <DatePicker @change="handleDateChange" :has-today="hasToday" @modalChange="handleModalChange" 
                 :type="dateType"  ref="datePickerRef">
        <template #filter v-if="hasFilterSlots">
          <view class="filter" @tap="handleSelectFilterItem">
            <text class="filter_text">{{ showText }}</text>
            <uv-icon name="arrow-down-fill" class="filter_icon" size="10rpx" color="#202328" />
          </view>
        </template>
      </DatePicker>
    </view>
  </view>
  <IndicatorsFilter ref="filterRef" :options="options" :options-props="optionsProps" @change="handleIndicatorChange"
    @modalChange="handleModalChange" />
</template>

<script setup>
  import {
    onLoad
  } from "@dcloudio/uni-app";
  import {
    getStageObj
  } from "@/utils";
  import {
    getMallByGroupAndLabelApi
  } from "@/api";
  import {
    ref,
    onMounted,
    computed,
    onBeforeUnmount
  } from "vue";
  import DatePicker from "./DatePicker.nvue";
  import MallSelectNvue from "./MallSelect.nvue";
  import IndicatorsFilter from "./IndicatorsFilter.nvue";
  const props = defineProps({
    compStyle: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array,
      default: () => [],
    },
    optionsProps: {
      type: Object,
      default: () => ({
        label: "label",
        value: "value",
      }),
    },
    hasToday: {
      type: Boolean,
      default: false,
    },
    as: {
      type: String,
      default: "page", // page:页面，comp: 组件
    },
    hasStore: {
      type: String,
      default: "1",
    },
    chooseGroup: {
      type: String,
      default: "0",
    },
    defaultType: {
      type: String,
      default: "store",
    },
    // 新增日期参数
    defaultDate: {
      type: String,
      default: "",
    },
    dateType: {
      type: String,
      default: "last7days",
    },
  });
  const emit = defineEmits(["change", "modalChange"]);
  const indicatorText = ref("");
  const showText = computed(() => {
    return indicatorText.value ?
      indicatorText.value :
      props.options?.[0]?.[props.optionsProps.label];
  });
  onBeforeUnmount((e) => {
    console.log("page-remove");
  });
  
  // 日期选择器引用
  const datePickerRef = ref(null);
  
  // 设置日期类型和日期
  const setDateTypeAndDate = (type, date) => {
    if (datePickerRef.value) {
      console.log('暴露出方法');
      
      datePickerRef.value.setDateType(type, date);
    }
  };
  const handleModalChange = (val) => {
    emit("modalChange", val);
  };

  // 有筛选项
  const hasFilterSlots = computed(() => props.options.length > 0);
  const filterRef = ref(null);
  const handleSelectFilterItem = () => {
    filterRef.value?.open();
  };
  const handleIndicatorChange = (val) => {
    storeParams.value = {
      ...storeParams.value,
      indicatorKey: val[props.optionsProps.value],
    };
    indicatorText.value = val[props.optionsProps.label];
    emit("change", storeParams.value, "indicatorKey");
  };

  const storeVal = ref({});
  if (props.defaultType === "store") {
    storeVal.value = getStageObj("store") || {};
    console.log(storeVal.value, "---");
  }
  // onLoad(() => {

  // })
  const flag = ref(false); // 增加自锁
  const storeParams = ref({});
  const handleMallChange = (e) => {
    console.log(e, "mall");
    storeParams.value = {
      ...storeParams.value,
      ...e,
    };
    if (flag.value) {
      emit("change", storeParams.value, "groupStore");
    }
    flag.value = true;
  };
  const handleDateChange = (e) => {
    console.log(e, "date");
    const [startDate, endDate] = e.range;
    storeParams.value = {
      ...storeParams.value,
      startDate,
      endDate,
      ...e,
    };
    console.log(storeParams.value, 'storeParams.value-----传参');
    
    emit("change", storeParams.value, "datePicker");
  };
  // 选择的门店更改时，更新storage中
  const handlStoreChange = (val) => {
    console.log(val, "-s-s-s-s-s-s-s");
    uni.setStorageSync("store", JSON.stringify(val));
  };
  
  // 暴露方法给父组件
  defineExpose({
    setDateTypeAndDate
  });
</script>

<style lang="scss" scoped>
  .mall-select {}

  .page-options {
    box-sizing: border-box;
    width: 750rpx;
    // position: sticky;
    /* #ifdef H5 */
    // top: 44px;
    /* #endif */
    /* #ifndef H5 */
    // top: 0;
    /* #endif */
    z-index: 999;
    background-color: #f2f3f6;
    display: flex;
    flex-direction: column;
    align-items: center;

    .mall {
      padding-bottom: 20rpx;
      width: 750rpx;
      height: 72rpx;
      z-index: 990;
      background-color: #3277fb;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .page-options-block {
      // height: 42rpx;
      height: 72rpx;
    }

    .date-picker {
      width: 750rpx;
      padding: 16rpx 20rpx;
    }
  }

  .as-comp {
    // height: 84rpx;
    /* #ifdef H5 */
    top: 0;
    /* #endif */

    /* #ifndef H5 */
    position: sticky;
    top: 0;
    z-index: 9999;

    // background-color: #f00;
    /* #endif */
    .mall {
      height: 0;
      padding: 0;
      overflow: hidden;
    }

    .page-options-block {
      height: 0;
      margin-bottom: 0;
    }
  }
  .filter {
    margin-left: auto;
    background-color: #fff;
    border-radius: 12rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;


    &_text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 50rpx;
      color: #202328;
      font-size: 24rpx;
    }
  }
</style>