shenze-sysMan/src/views/discountCode/codeSearch.vue

<template>
  <!-- 优惠码 - 搜索弹窗 -->
  <div class="codeSearch flex-col">
    <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field v-model="code" name="code" :label="$t('discountCode.discountCodeNoLabel')"
            :placeholder="$t('discountCode.discountCodeNoPlaceholder')" />
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <label id="van-field-4-label" for="van-field-4-input">{{ $t('discountCode.creationTime') }}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.startTime')"
                  style="text-align: center; width: 50%;" v-model="createStratDate" @click="createStratDateClick()" />
                <span>{{ $t('discountCode.to') }}</span>
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.endTime')"
                  style="text-align: center; width: 50%;" v-model="createEndDate" @click="createEndDateClick()" />
              </div>
            </div>
          </div>
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <label id="van-field-4-label" for="van-field-4-input">{{ $t('discountCode.usageTime') }}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.startTime')"
                  style="text-align: center; width: 50%;" v-model="useStratDate" @click="useStratDateClick()" />
                <span>{{ $t('discountCode.to') }}</span>
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.endTime')"
                  style="text-align: center; width: 50%;" v-model="useEndDate" @click="useEndDateClick()" />
              </div>
            </div>
          </div>
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 1em;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{
              $t('discountCode.clickQuery') }}
            </van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="createStratDateShow" round position="bottom">
      <van-datetime-picker v-model="createStratDate" type="datetime" :title="$t('discountCode.selectFullTime')"
        @confirm="createStratDateConFirm($event)" @cancel="createStratDateCancel()" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="createEndDateShow" round position="bottom">
      <van-datetime-picker v-model="createEndDate" type="datetime" :title="$t('discountCode.selectFullTime')"
        @confirm="createEndDateConFirm($event)" @cancel="createEndDateCancel()" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="useStratDateShow" round position="bottom">
      <van-datetime-picker v-model="useStratDate" type="datetime" :title="$t('discountCode.selectFullTime')"
        @confirm="useStratDateConFirm($event)" @cancel="useStratDateCancel()" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="useEndDateShow" round position="bottom">
      <van-datetime-picker v-model="useEndDate" type="datetime" :title="$t('discountCode.selectFullTime')"
        @confirm="useEndDateConFirm($event)" @cancel="useEndDateCancel()" :min-date="minDate" />
    </van-popup>
  </div>
</template>

<script>
import { ref } from 'vue';
import dateUtil from "@/utils/dateUtil";
import { styleUrl } from "@/common/js/utils";

export default {
  name: 'codeSearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const minDate = new Date(2018, 1, 1);
    const showSearch = () => { sheetShow.value = true; };
    const code = ref('');
    //加载样式
    styleUrl('discountCode');
    // 创建开始时间
    const createStratDate = ref('');
    const createStratDateShow = ref(false);
    const createStratDateClick = () => { if (createStratDate.value === '') { createStratDate.value = new Date(); } createStratDateShow.value = true; }
    const createStratDateConFirm = (data) => { createStratDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss"); createStratDateShow.value = false; }
    const createStratDateCancel = () => { createStratDate.value = dateUtil.formateDate(new Date(createStratDate.value), "yyyy-MM-dd hh:mm:ss"); createStratDateShow.value = false; }
    // 创建结束时间
    const createEndDate = ref('');
    const createEndDateShow = ref(false);
    const createEndDateClick = () => { if (createEndDate.value === '') { createEndDate.value = new Date(); } createEndDateShow.value = true; }
    const createEndDateConFirm = (data) => { createEndDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss"); createEndDateShow.value = false; }
    const createEndDateCancel = () => { createEndDate.value = dateUtil.formateDate(new Date(createEndDate.value), "yyyy-MM-dd hh:mm:ss"); createEndDateShow.value = false; }
    // 使用起始时间
    const useStratDate = ref('');
    const useStratDateShow = ref(false);
    const useStratDateClick = () => { if (useStratDate.value === '') { useStratDate.value = new Date(); } useStratDateShow.value = true; }
    const useStratDateConFirm = (data) => { useStratDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss"); useStratDateShow.value = false; }
    const useStratDateCancel = () => { useStratDate.value = dateUtil.formateDate(new Date(useStratDate.value), "yyyy-MM-dd hh:mm:ss"); useStratDateShow.value = false; }
    // 使用结束时间
    const useEndDate = ref('');
    const useEndDateShow = ref(false);
    const useEndDateClick = () => { if (useEndDate.value === '') { useEndDate.value = new Date(); } useEndDateShow.value = true; }
    const useEndDateConFirm = (data) => { useEndDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss"); useEndDateShow.value = false; }
    const useEndDateCancel = () => { useEndDate.value = dateUtil.formateDate(new Date(useEndDate.value), "yyyy-MM-dd hh:mm:ss"); useEndDateShow.value = false; }

    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {};
      if (code.value !== '') { searchParam.code = code.value; }
      if (createStratDate.value !== '') { searchParam.createStratDate = dateUtil.formateDate(new Date(createStratDate.value), "yyyy/MM/dd hh:mm:ss"); }
      if (createEndDate.value !== '') { searchParam.createEndDate = dateUtil.formateDate(new Date(createEndDate.value), "yyyy/MM/dd hh:mm:ss"); }
      if (useStratDate.value !== '') { searchParam.useStratDate = dateUtil.formateDate(new Date(useStratDate.value), "yyyy/MM/dd hh:mm:ss"); }
      if (useEndDate.value !== '') { searchParam.useEndDate = dateUtil.formateDate(new Date(useEndDate.value), "yyyy/MM/dd hh:mm:ss"); }
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      minDate,
      showSearch,
      code,
      createStratDate,
      createStratDateShow,
      createStratDateClick,
      createStratDateConFirm,
      createStratDateCancel,
      createEndDate,
      createEndDateShow,
      createEndDateClick,
      createEndDateConFirm,
      createEndDateCancel,
      useStratDate,
      useStratDateShow,
      useStratDateClick,
      useStratDateConFirm,
      useStratDateCancel,
      useEndDate,
      useEndDateShow,
      useEndDateClick,
      useEndDateConFirm,
      useEndDateCancel,
      onSubmit
    };
  },
};
</script>

<style lang="less" scoped></style>