feat:“更换数据统计筛选栏样式”

src/App.vue

@@ -117,7 +117,7 @@ span,
 p {
   // color: #333333;
   font-family: "Arial", sans-serif;
-  font-size: 13px;
+  font-size: 12px;
   // .van-dialog {
   //   font-size: 0.4rem;
   // }
@@ -128,9 +128,16 @@ p {
   .van-dialog {
     width: 85%;
   }
-
+  
+  .van-dropdown-menu__title {
+    font-size: 10px;
+    color: #404d74;
+    width: 70px;
+    text-align: center;
+  }
 }
 
+
 html {
   height: 100%;
   // overflow: hidden;

src/components/typeDownMenu/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <van-dropdown-menu class="titleMenu" swipe-threshold="3">
+    <!-- 用户 -->
+    <!-- <van-dropdown-item v-if="isShowAdmin()" :title="adminTypeTitle" v-model="adminType" :options="adminList"
+      @change="adminTypeChange" /> -->
+    <!-- 设备类型 -->
+    <van-dropdown-item :title="machineTypeTitle" v-model="machineType" :options="machineList"
+      @change="machineTypeChange" />
+    <!-- 账号类型 -->
+    <van-dropdown-item v-if="isShowAdminAndCompany()" :title="foreignTypeTitle" v-model="foreignType"
+      :options="foreignList" @change="foreignTypeChange" />
+    <!-- 公司平台 -->
+    <van-dropdown-item v-if="isShowCompany()" :title="companyTypeTitle" v-model="companyType" :options="companyList"
+      @change="companyTypeChange" />
+    <!-- 支付方式 -->
+    <van-dropdown-item :title="paymentTypeTitle" v-model="paymentType" :options="payList" @change="paymentTypeChange" />
+    <!-- 设备筛选 -->
+    <van-dropdown-item v-if="isShowDevice()" :title="deviceTypeTitle" v-model="deviceType" :options="deviceList"
+      @change="deviceTypeChange" />
+    <!-- 订单状态 -->
+    <van-dropdown-item v-if="!isHome" :title="orderStatusTitle" v-model="orderStatus" :options="orderStatusList"
+      @change="orderStatusChange" />
+  </van-dropdown-menu>
+</template>
+
+<script>
+import { onMounted, toRefs, reactive, ref } from "vue";
+import { getAdminList, getEquipmentList } from '@/service/typeSelectList';
+import { getLoginUser } from '@/common/js/utils';
+import { useI18n } from 'vue-i18n';
+
+export default {
+  name: "typeSelectList",
+  components: {},
+  props: {
+    // 是否首页
+    isHome: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const user = getLoginUser(); // 获取登录用户
+
+    const { t } = useI18n();
+    // 支付方式
+    const paymentType = ref(null);
+    // 支付方式标题
+    const paymentTypeTitle = ref(t('typeSelectList.paymentMethod'));
+    // 支付方式列表
+    const payList = ref(user.ifForeign === '0' ? [
+      { text: t('typeSelectList.whole'), value: '' },
+      { text: t('typeSelectList.mainSweepOfAlipay'), value: 'ALIPAY_NATIVE' },
+      { text: t('typeSelectList.weChatScanning'), value: 'WEIXIN_NATIVE' },
+      { text: t('typeSelectList.antiScanningOfAlipay'), value: 'ALIPAY_CARD' },
+      { text: t('typeSelectList.weChatBackScanning'), value: 'WEIXIN_CARD' }
+    ] : [
+      { text: t('typeSelectList.whole'), value: '' },
+      { text: t('typeSelectList.noPaymentRequired'), value: 0 },
+      { text: t('typeSelectList.coin'), value: 1 },
+      { text: t('typeSelectList.notes'), value: 2 },
+      { text: t('typeSelectList.coinsNotes'), value: 3 },
+      { text: t('typeSelectList.creditCard'), value: 4 },
+      { text: t('typeSelectList.electronicPayment'), value: 5 },
+    ]);
+    // 选择支付方式
+    const paymentTypeChange = (value) => {
+      paymentTypeTitle.value = payList.value.find(payList => payList.value === value).text;
+      searchParams.payType = value;
+      outputDate();
+    }
+
+
+    // 公司平台
+    const companyType = ref(null);
+    // 公司平台标题
+    const companyTypeTitle = ref(t('typeSelectList.companies'));
+    // 公司平台列表
+    const companyList = [
+      { text: t('typeSelectList.whole'), value: '' },
+      { text: t('typeSelectList.sz'), value: '0' },
+      { text: t('typeSelectList.sc'), value: '1' },
+    ];
+    // 选择公司平台
+    const companyTypeChange = (value) => {
+      companyTypeTitle.value = companyList.find(companyList => companyList.value === value).text;
+      searchParams.companyType = value;
+      outputDate();
+    }
+
+    // 账号类型
+    const foreignType = ref(null);
+    // 账号类型标题
+    const foreignTypeTitle = ref(t('typeSelectList.ifForeignes'));
+    // 账号地区列表
+    const foreignList = [
+      { text: t('typeSelectList.mainland'), value: '0' },
+      { text: t('typeSelectList.overseas'), value: '1' },
+    ];
+    // 选择账号类型
+    const foreignTypeChange = (value) => {
+      foreignTypeTitle.value = foreignList.find(foreignList => foreignList.value === value).text;
+      if (value == "0") {
+        payList.value = [
+          { text: t('typeSelectList.whole'), value: '' },
+          { text: t('typeSelectList.mainSweepOfAlipay'), value: 'ALIPAY_NATIVE' },
+          { text: t('typeSelectList.weChatScanning'), value: 'WEIXIN_NATIVE' },
+          { text: t('typeSelectList.antiScanningOfAlipay'), value: 'ALIPAY_CARD' },
+          { text: t('typeSelectList.weChatBackScanning'), value: 'WEIXIN_CARD' }
+        ];
+      } else {
+        payList.value = [
+          { text: t('typeSelectList.whole'), value: '' },
+          { text: t('typeSelectList.noPaymentRequired'), value: 0 },
+          { text: t('typeSelectList.coin'), value: 1 },
+          { text: t('typeSelectList.notes'), value: 2 },
+          { text: t('typeSelectList.coinsNotes'), value: 3 },
+          { text: t('typeSelectList.creditCard'), value: 4 },
+          { text: t('typeSelectList.electronicPayment'), value: 5 },
+        ];
+      }
+      searchParams.ifForeign = value;
+      outputDate();
+    }
+
+    // 设备类型
+    const machineType = ref(null);
+    // 设备类型标题
+    const machineTypeTitle = ref(t('typeSelectList.machines'));
+    // 设备类型列表
+    const machineList = [
+      { text: t('typeSelectList.whole'), value: '' },
+      { text: t('typeSelectList.MG'), value: '0' },
+      { text: t('typeSelectList.POP'), value: '1' },
+    ];
+    // 选择设备类型
+    const machineTypeChange = (value) => {
+      machineTypeTitle.value = machineList.find(machineList => machineList.value === value).text;
+      searchParams.machineType = value;
+      outputDate();
+    }
+
+    // 设备筛选
+    const deviceType = ref(null);
+    // 设备筛选标题
+    const deviceTypeTitle = ref(t('typeSelectList.allDevices'));
+    // 设备列表
+    const deviceList = ref([]);
+    // 获取设备列表
+    const getDeviceListFun = async () => {
+      const { data } = await getEquipmentList({ adminId: user.id });
+      if (data.code === '00000') {
+        deviceList.value = data.data.map(item => {
+          return { text: item.name != null ? item.name : item.clientId, value: item.id }
+        });
+        deviceList.value.unshift({ text: t('typeSelectList.allDevices'), value: '' });
+      }
+    }
+    // 设备选择
+    const deviceTypeChange = (value) => {
+      deviceTypeTitle.value = deviceList.value.find(deviceList => deviceList.value === value).text;
+      if (deviceTypeTitle.value != t('typeSelectList.allDevices')) {
+        searchParams.equipmentId = value;
+      } else {
+        searchParams.equipmentId = '';
+      }
+      outputDate();
+    }
+
+    // 订单状态
+    const orderStatus = ref(null);
+    // 订单状态标题
+    const orderStatusTitle = ref(t('typeSelectList.orderStatus'));
+    // 订单状态列表
+    const orderStatusList = [
+      { text: t('typeSelectList.whole'), value: '' },
+      { text: t('typeSelectList.unpaid'), value: 0 },
+      { text: t('typeSelectList.paid'), value: 1 },
+      { text: t('typeSelectList.refunding'), value: 2 },
+      { text: t('typeSelectList.refunded'), value: 3 },
+    ]
+    // 选择订单状态
+    const orderStatusChange = (value) => {
+      orderStatusTitle.value = orderStatusList.find(orderStatusList => orderStatusList.value === value).text;
+      searchParams.status = value;
+      outputDate();
+    }
+
+    // 商户筛选
+    const adminType = ref(null);
+    // 商户筛选标题
+    const adminTypeTitle = ref(t('typeSelectList.thisMerchant'));
+    // 商户列表
+    const adminList = ref([]);
+    // 获取商户列表
+    const getAdminListFun = async () => {
+      const { data } = await getAdminList({ adminId: user.id });
+      if (data.code === '00000') {
+        adminList.value = data.data.map(item => {
+          return { text: item.username, value: item.id }
+        });
+        adminList.value.unshift({ text: t('typeSelectList.allSuboUsers'), value: 'all' });
+        adminList.value.unshift({ text: t('typeSelectList.thisMerchant'), value: 'this' });
+      }
+    }
+    // 选择商户
+    const adminTypeChange = (value) => {
+      adminTypeTitle.value = adminList.value.find(adminList => adminList.value === value).text;
+      searchParams.adminType = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : '';
+      searchParams.userName = (adminTypeTitle.value === t('typeSelectList.allSuboUsers')) ? 'all' : (adminTypeTitle.value === t('typeSelectList.thisMerchant')) ? user.username : adminTypeTitle.value;
+      outputDate();
+    }
+
+
+    // 筛选参数
+    let searchParams = reactive({
+      userName: user.username,
+      adminType: '',
+      clientId: '',
+      payType: '',
+      productNo: '',
+      equipmentId: '',
+      companyType: '',
+      machineType: '',
+      ifForeign: '',
+    });
+
+
+    // 是否商户
+    const isShowAdmin = () => { return (user && user.type === 1); }
+    // 是否管理员
+    const isShowCompany = () => { return (user && user.type === 0); }
+    // 是否管理员和公司人员
+    const isShowAdminAndCompany = () => { return (user && user.type < 2); }
+    // 是否商户及子账户
+    const isShowDevice = () => { return (user && (user.type === 2 || user.type === 3)); }
+    // 返回参数
+    const outputDate = () => { emit('upselectdata', searchParams); }
+
+    onMounted(() => {
+      getAdminListFun();
+      getDeviceListFun();
+    });
+    return {
+      ...toRefs(searchParams),
+      // 是否商户
+      isShowAdmin,
+      // 是否管理员
+      isShowCompany,
+      // 是否商户及子账户
+      isShowDevice,
+      // 是否管理员和公司人员
+      isShowAdminAndCompany,
+      // 商家选择
+      adminList,
+      adminType,
+      adminTypeTitle,
+      adminTypeChange,
+
+      // 订单状态
+      orderStatusList,
+      orderStatus,
+      orderStatusTitle,
+      orderStatusChange,
+
+      // 设备选择
+      deviceList,
+      deviceType,
+      deviceTypeTitle,
+      deviceTypeChange,
+
+      // 设备类型选择
+      machineList,
+      machineType,
+      machineTypeTitle,
+      machineTypeChange,
+
+      // 账号类型选择
+      foreignList,
+      foreignType,
+      foreignTypeTitle,
+      foreignTypeChange,
+
+      // 公司平台选择
+      companyList,
+      companyType,
+      companyTypeTitle,
+      companyTypeChange,
+
+      // 支付方式选择
+      payList,
+      paymentType,
+      paymentTypeTitle,
+      paymentTypeChange,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import "@/common/style/common.less";
+</style>

src/styles/home/index.less

@@ -113,12 +113,9 @@
       background: url("../../assets/home/outer.png") top center no-repeat;
       background-size: 100% 100%;
       // width: 100%;
-      margin-top: 0.5rem;
-      padding: 0.5rem 0.5rem;
+      // margin-top: 0.5rem;
+      padding: 15px 15px;
 
-      // .block5 {
-      //   width: 100%;
-      //   cursor: pointer;
 
       .topTitle {
         width: 100%;

src/styles/orderCenter/index.less

@@ -73,7 +73,7 @@
       background: url("../../assets/home/outer.png") top center no-repeat;
       background-size: 100% 100%;
       // width: 100%;
-      margin-top: 20px;
+      // margin-top: 20px;
 
       // .block5 {
       //   width: 100%;

src/views/home/index.vue

@@ -30,7 +30,8 @@
       </div> -->
       <!-- 时间选择 -->
       <dateSelectList v-if="showDataDiv" @update="update($event)"></dateSelectList>
-      <typeSelectList v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeSelectList>
+      <!-- <typeSelectList v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeSelectList> -->
+      <typeDownMenu v-if="showDataDiv" :isHome="true" @upselectdata="upselectdata($event)"></typeDownMenu>
       <!-- 订单数据 -->
       <div v-if="showDataDiv" class="o-plr-8 o-pt-10">
         <div class="salesData flex-col" @click="pushOrderCenter">
@@ -157,7 +158,8 @@ import { onMounted, ref, nextTick } from "vue";
 import sHeader from "../../components/SimpleHeader";
 // import navBar from "../../components/NavBar";
 import dateSelectList from "../../components/dateSelectList";
-import typeSelectList from "../../components/typeSelectList";
+// import typeSelectList from "../../components/typeSelectList";
+import typeDownMenu from "../../components/typeDownMenu";
 import { getLoginUser, $M_Menus, Format_time, styleUrl } from "../../common/js/utils";
 import { useRouter } from "vue-router";
 import {
@@ -179,7 +181,8 @@ export default {
     sHeader,
     // navBar,
     dateSelectList,
-    typeSelectList,
+    // typeSelectList,
+    typeDownMenu,
     kDialog,
     kNoData,
     // [Popup.name]: Popup,

src/views/orderCenter/index.vue

@@ -26,7 +26,8 @@
         </div>
         <!-- <img class="img1" referrerpolicy="no-referrer" src="@/assets/line.png" /> -->
         <dateSelectList @update="update($event)"></dateSelectList>
-        <typeSelectList @upselectdata="upselectdata($event)"></typeSelectList>
+        <!-- <typeSelectList @upselectdata="upselectdata($event)"></typeSelectList> -->
+        <typeDownMenu @upselectdata="upselectdata($event)"></typeDownMenu>
         <!-- 销售数据 -->
         <div v-if="!noData(salesVolume, salesNumber, orderNumber)" class="o-plr-8 o-pt-15">
           <div class="salesData flex-col">
@@ -295,12 +296,13 @@ import { getLoginUser, $M_IsDate, Format_time, $M_ExportFile, styleUrl } from ".
 import { getHuifuId } from "../../service/huifuMch/index";
 import dateUtil from "../../utils/dateUtil";
 import dateSelectList from "../../components/dateSelectList";
-import typeSelectList from "../../components/typeSelectList";
+// import typeSelectList from "../../components/typeSelectList";
+import typeDownMenu from "../../components/typeDownMenu";
 import { getStatistics } from "../../service/home";
 import { useI18n } from "vue-i18n";
 export default {
   name: "order",
-  components: { sHeader, orderSearch, dateSelectList, typeSelectList, kNoData, kDialog },
+  components: { sHeader, orderSearch, dateSelectList, typeDownMenu, kNoData, kDialog },
   setup() {
     // 批量修改弹窗
     const kDialogRef = ref(null);