VAVABUY/components/nav_filter.vue

<template>
  <view class="menu">
    <view class="menu_item">
      <i class="icon-font icon-filter_2" @click.stop="open"></i>
      <popup ref="popupRef" :title="title" isClose>
        <template #content>
          <view class="cont">
            <view class="filter_item">
              <view class="filter_item_label">
                <trans _t="创建时间" />
              </view>
              <view class="filter_time">
                <uni-datetime-picker v-model="params.begin" :border="false" :end="params.end" type="date"
                  @change="beginChange">
                  <view class="date_time">
                    <view class="time_left">
                      <up-icon name="calendar" color="#a8abb2" size="14" />
                      <trans class="time_text" _t="开始日期" v-if="!params.begin" />
                      <text class="time_text" v-else>{{ params.begin }}</text>
                    </view>
                    <view class="icons" v-if="params.begin" @click.stop="clear('begin')">
                      <up-icon name="close-circle" color="#a8abb2" />
                    </view>
                  </view>
                </uni-datetime-picker>
                <view class="time_splice">—</view>
                <uni-datetime-picker v-model="params.end" type="date" :border="false" @change="endChange"
                  :start="params.begin">
                  <view class="date_time">
                    <view class="time_left">
                      <up-icon name="calendar" color="#a8abb2" size="14"></up-icon>
                      <trans class="time_text" _t="结束日期" v-if="!params.end" />
                      <text class="time_text" v-else>{{ params.end }}</text>
                    </view>
                    <view class="icons" v-if="params.end" @click.stop="clear('end')">
                      <up-icon name="close-circle" color="#a8abb2" />
                    </view>
                  </view>
                </uni-datetime-picker>
              </view>
            </view>
            <template v-if="!isOrderTime">
              <view class="filter_item">
                <view class="filter_item_label">
                  <trans _t="订单时间" />
                </view>
              </view>
              <view class="filter_status">
                <view class="status_item"
                  :class="[(index == orderStatus.length - 1) && (orderStatus.length % 2 != 0) ? 'is-block' : '', active == index ? 'active' : '']"
                  v-for="item, index in orderStatus" :key="index" @click="statusClick(item, index)">
                  {{ item.value }}
                </view>
              </view>
            </template>
          </view>
        </template>
        <template #footer>
          <view class="footer_btn">
            <view class="btn" @click="reset">
              <trans _t="重置" />
            </view>
            <view class="btn btn_search" @click="submit">
              <trans _t="搜索" />
            </view>
          </view>
        </template>
      </popup>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from "vue"
import popup from "@/components/popup";
import { useShopStore } from "@/store";

const useShop = useShopStore();

const props = defineProps({
  title: {
    type: String,
    default: '筛选'
  },
  isOrderTime: Boolean
})
const emit = defineEmits(['submit'])

const popupRef = ref(null);
const active = ref(-1)
const orderStatus = computed(() => useShop.getOrderStatus)
useShop.setOrderStatus();

const params = reactive({
  begin: '',
  end: '',
  status: ''
})

const open = () => {
  popupRef.value && popupRef.value.open();
}
const close = () => {
  popupRef.value && popupRef.value.close();
}

const statusClick = (item, index) => {
  params.status = item.status;
  if (active.value == index) return active.value = -1;
  active.value = index;
}

const beginChange = (time) => {
  // console.log(time);
}
const endChange = (time) => { }

const clear = (value) => {
  params[value] = ''
}

const reset = () => {
  params.begin = ''
  params.end = ''
  params.status = ''
  active.value = -1;
  emit('submit', params);
  close();
}
const submit = () => {
  emit('submit', params);
  close();
}
defineExpose({
  close
})
</script>
<style lang="less" scoped>
.menu {
  &_item {
    .icon-filter_2 {
      font-size: 24px;
      color: var(--text);
      padding-right: 8px;
    }

    .cont {
      width: 100%;

      .filter_item {
        .filter_item_label {
          color: var(--text-01);
          font-size: 28rpx;
          margin-bottom: 24rpx;
        }

        .filter_time {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          /deep/ .uni-calendar-item--checked {
            background-color: var(--black);
          }

          /deep/ .uni-datetime-picker--btn {
            background-color: var(--black);
            border-radius: 16rpx;
            font-size: 28rpx;
          }

          .date_time {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            display: flex;
            height: 42px;
            align-items: center;
            background-color: #f5f6f7;
            padding: 0 11px;
            border-radius: 8px;
            justify-content: space-between;

            .time_left {
              display: flex;
              align-items: center;
            }

            .time_text {
              margin-left: 8px;
              font-size: 26rpx;
              color: #aeaeae;
            }
          }

          .time_splice {
            color: var(--text);
            font-size: 28rpx;
            padding: 0 24rpx;
          }
        }
      }

      .filter_status {
        display: flex;
        gap: 24rpx;
        flex-wrap: wrap;

        .status_item {
          width: calc((100% - 24rpx) / 2);
          font-size: 24rpx;
          font-weight: 400;
          height: 72rpx;
          padding: 16rpx 30rpx;
          border-radius: 16rpx;
          border: 1px solid #dcdfe6;
          background-color: var(--light);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-02);
        }

        .is-block {
          width: 100%;
        }

        .active {
          color: var(--light);
          background-color: var(--black);
        }
      }
    }

    .footer_btn {
      display: flex;
      column-gap: 24rpx;

      .btn {
        flex: 1;
        height: 76rpx;
        padding: 16rpx 30rpx;
        color: var(--black);
        border: 1px solid var(--black);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        font-size: 24rpx;
      }

      .btn_search {
        background-color: var(--black);
        color: var(--light);
      }
    }
  }
}
</style>