|
@@ -0,0 +1,167 @@
|
|
|
|
+<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.export') }}
|
|
|
|
+ </van-button>
|
|
|
|
+ </van-row>
|
|
|
|
+ </van-form>
|
|
|
|
+ </div>
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-popup v-model:show="createStratDateShow" round position="bottom">
|
|
|
|
+ <van-date-picker :title="$t('discountCode.selectFullTime')" v-model="startTime"
|
|
|
|
+ @confirm="createStratDateConFirm($event)" @cancel="createStratDateShow = false" :min-date="minDate"
|
|
|
|
+ :max-date="maxDate" />
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-popup v-model:show="createEndDateShow" round position="bottom">
|
|
|
|
+ <van-date-picker :title="$t('discountCode.selectFullTime')" v-model="endTime"
|
|
|
|
+ @confirm="createEndDateConFirm($event)" @cancel="createEndDateShow = false" :min-date="minDate"
|
|
|
|
+ :max-date="maxDate" />
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-popup v-model:show="useStratDateShow" round position="bottom">
|
|
|
|
+ <van-date-picker :title="$t('discountCode.selectFullTime')" v-model="startTime"
|
|
|
|
+ @confirm="useStratDateConFirm($event)" @cancel="useStratDateShow = false" :min-date="minDate"
|
|
|
|
+ :max-date="maxDate" />
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-popup v-model:show="useEndDateShow" round position="bottom">
|
|
|
|
+ <van-date-picker :title="$t('discountCode.selectFullTime')" v-model="endTime"
|
|
|
|
+ @confirm="useEndDateConFirm($event)" @cancel="useEndDateShow = false" :min-date="minDate" :max-date="maxDate" />
|
|
|
|
+ </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);
|
|
|
|
+
|
|
|
|
+ // 创建一个Date对象,表示当前时间
|
|
|
|
+ const dateTime = new Date();
|
|
|
|
+ // 获取当前时间的年份
|
|
|
|
+ const currentYear = dateTime.getFullYear();
|
|
|
|
+ // 获取当前时间的月份(注意,月份是从0开始的,所以要加1)
|
|
|
|
+ const currentMonth = dateTime.getMonth() + 1;
|
|
|
|
+ // 获取当前时间的日期
|
|
|
|
+ const currentDate = dateTime.getDate();
|
|
|
|
+
|
|
|
|
+ const startTime = ref([currentYear, currentMonth, currentDate]);
|
|
|
|
+ const endTime = ref([currentYear, currentMonth, currentDate]);
|
|
|
|
+ const minDate = new Date(2022, 0, 1);
|
|
|
|
+ const maxDate = new Date();
|
|
|
|
+ const showExport = () => { sheetShow.value = true; };
|
|
|
|
+ const code = ref('');
|
|
|
|
+ //加载样式
|
|
|
|
+ styleUrl('discountCode');
|
|
|
|
+ // 创建开始时间
|
|
|
|
+ const createStratDate = ref('');
|
|
|
|
+ const createStratDateShow = ref(false);
|
|
|
|
+ const createStratDateClick = () => { createStratDateShow.value = true; }
|
|
|
|
+ const createStratDateConFirm = ({ selectedValues }) => { createStratDate.value = selectedValues.join("-") + " 00:00:00"; 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 = () => { createEndDateShow.value = true; }
|
|
|
|
+ const createEndDateConFirm = ({ selectedValues }) => { createEndDate.value = selectedValues.join("-") + " 23:59:59"; 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 = () => { useStratDateShow.value = true; }
|
|
|
|
+ const useStratDateConFirm = ({ selectedValues }) => { useStratDate.value = selectedValues.join("-") + " 00:00:00"; 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 = () => { useEndDateShow.value = true; }
|
|
|
|
+ const useEndDateConFirm = ({ selectedValues }) => { useEndDate.value = selectedValues.join("-") + " 23:59:59"; 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('exportCode', searchParam);
|
|
|
|
+ sheetShow.value = false;
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ sheetShow,
|
|
|
|
+ minDate,
|
|
|
|
+ maxDate,
|
|
|
|
+ startTime,
|
|
|
|
+ endTime,
|
|
|
|
+
|
|
|
|
+ showExport,
|
|
|
|
+ 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>
|