feat:“优惠码导出功能增加筛选功能”

src/common/js/utils.js

@@ -4462,7 +4462,7 @@ export const prefix = (url) => {
 }
 // 获取当前语言
 export function navigatorLanguage() {
-  const navigatorLanguage = (navigator.language || navigator.browserLanguage).toLowerCase()
+  const navigatorLanguage = (navigator.language || navigator.browserLanguage || navigator.languages).toLowerCase()
   const lan = navigatorLanguage.substring(0, 2);
   console.log("当前语言", lan);
   if (lan == 'zh' || lan == 'ja') {

src/utils/i18n.js

@@ -30,7 +30,7 @@ export default createI18n({
     legacy: false,
     globalInjection: true,
     // 默认语言
-    locale: localStorage.getItem('curLang'),
+    locale: localStorage.getItem('curLang') ? localStorage.getItem('curLang') : 'en',
     // 关闭控制台警告
     silentFallbackWarn: true,
     messages: {

src/views/discountCode/codeExport.vue

@@ -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>

src/views/discountCode/codeSearch.vue

@@ -37,27 +37,30 @@
           <!-- 操作 -->
           <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') }}
+      $t('discountCode.clickQuery') }}
             </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')"
-        @confirm="createStratDateConFirm($event)" @cancel="createStratDateShow = false" :min-date="minDate" />
+      <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')"
-        @confirm="createEndDateConFirm($event)" @cancel="createEndDateShow = false" :min-date="minDate" />
+      <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')"
-        @confirm="useStratDateConFirm($event)" @cancel="useStratDateShow = false" :min-date="minDate" />
+      <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')" @confirm="useEndDateConFirm($event)"
-        @cancel="useEndDateShow = false" :min-date="minDate" />
+      <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>
@@ -72,7 +75,20 @@ export default {
   components: {},
   setup(prop, context) {
     const sheetShow = ref(false);
-    const minDate = new Date(2018, 1, 1);
+    // 创建一个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 showSearch = () => { sheetShow.value = true; };
     const code = ref('');
     //加载样式
@@ -115,7 +131,10 @@ export default {
     }
     return {
       sheetShow,
+      startTime,
+      endTime,
       minDate,
+      maxDate,
       showSearch,
       code,
       createStratDate,

src/views/discountCode/index.vue

@@ -47,7 +47,8 @@
           <div v-else class="buttomBox flex-row">
             <div class="buttonItem" @click="payCode()" style="color: #4b6ad1">{{ $t('discountCode.apply') }}</div>
             <div class="buttonItem" @click="isDelete = true">{{ $t('discountCode.delete') }}</div>
-            <div class="buttonItem" @click="exportClick()" style="color: #45be2d">{{ $t('discountCode.export') }}</div>
+            <!-- <div class="buttonItem" @click="exportClick()" style="color: #45be2d">{{ $t('discountCode.export') }}</div> -->
+            <div class="buttonItem" @click="clickExport" style="color: #45be2d">{{ $t('discountCode.export') }}</div>
           </div>
         </div>
         <div class="intervalRow"></div>
@@ -111,6 +112,7 @@
       </van-list>
     </div>
     <codeSearch ref="searchRef" @search="search($event)"></codeSearch>
+    <codeExport ref="exportRef" @exportCode="exportCode($event)"></codeExport>
   </div>
 </template>
 
@@ -121,6 +123,7 @@ import { getdiscountCodeList, discountCodeExport, deleteCode } from "@/service/d
 import { showFailToast, showToast, showConfirmDialog } from "vant";
 import { getLoginUser, $M_ExportFile, styleUrl } from "@/common/js/utils";
 import codeSearch from './codeSearch.vue';
+import codeExport from "./codeExport.vue";
 import dateUtil from "@/utils/dateUtil";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -130,6 +133,7 @@ export default {
     const { t } = useI18n();
     const router = useRouter();
     const searchRef = ref(null);
+    const exportRef = ref(null);
     const user = getLoginUser();
     const loading = ref(false); // 加载状态
     const error = ref(false); // 错误状态
@@ -159,6 +163,11 @@ export default {
       searchParams = Object.assign(searchParams, data);
       searchGetList();
     };
+    // 导出弹窗触发导出
+    const exportCode = (data) => {
+      searchParams = Object.assign(searchParams, data);
+      exportClick();
+    };
     // 查询列表
     const searchGetList = () => {
       discountCodeList.value = [];
@@ -187,6 +196,8 @@ export default {
     };
     // 搜索点击
     const searchClick = () => { searchRef.value.showSearch(); };
+    // 导出点击
+    const clickExport = () => { exportRef.value.showExport(); }
     // 切换tab
     const setIsUse = (data) => { searchParams.isUse = data; searchGetList(); }
     // 点击优惠码
@@ -279,6 +290,7 @@ export default {
 
     return {
       searchRef,
+      exportRef,
       loading,
       error,
       finished,
@@ -292,7 +304,7 @@ export default {
       disCountCodeClick,
       showDate,
       showDateTime,
-      exportClick,
+      // exportClick,
       payCode,
       isExpired,
       isDelete,
@@ -301,9 +313,11 @@ export default {
       selectTotals,
       cancelClk,
       user,
+      clickExport,
+      exportCode,
     };
   },
-  components: { sHeader, codeSearch },
+  components: { sHeader, codeSearch, codeExport },
 };
 </script>
 

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
     //   chunkFilename: `css/[name].${version}.css`
     // }
   },
-  filenameHashing: false,
+  filenameHashing: true,
   configureWebpack: {
     output: {
       // filename: '[name].[hash].js',