shenze-sysMan/src/views/taskMessage/joinpayMchCheck/index.vue

<template>
  <!-- 提现账号审批 -->
  <div class="taskMessagePage flex-col">
    <s-header :name="$t('taskMessage.withdrawalAccountApproval')" :noback="false"></s-header>
    <div class="taskMessageBox">
      <div class="searchRow flex-row justify-between">
        <div class="flex-col">
          <div class="flex-row justify-between bd3">
            <div class="flex-col outer4 joinPayMchCheckIcon"></div>
            <span class="flex-col txt2">{{ $t('taskMessage.total') }}<span class="discountNumber">{{ alarmHistoryTotal }}</span>{{ $t('taskMessage.recordsInTotal') }}</span>
          </div>
        </div>
        <div class="l-flex-RC">
          <div @click="noticeClk" class="main5 l-flex-RC">
            <img class="label2 o-mr-5" src="../../../assets/device/searchIcon.png" />
            <span class="txt3">{{ $t('taskMessage.search') }}</span>
          </div>
        </div>
      </div>
      <kTabs ref="kTabsRef" tabWidth="100%" @tabclk="tabClk" :tabList="tabList"></kTabs>
      <div class="flex-col">
        <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                  :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false" @load="onLoad">
          <div class="listBox">
            <div v-for="(item, index) in alarmHistoryList" :key="index" class="listItem" @click="pushInfo(item)">
              <div class="itemBox">
                <div class="itemRow l-flex-between">
                  <div class="l-flex-RC">
                    <span class="itemTitle">{{ $t('taskMessage.merchantName') }}:&nbsp;</span>{{ payType==0 ? item.altMchName:item.regName }}
                  </div>
                  <van-icon color="#B9BAD0" name="arrow" />
                </div>
                <div class="itemRow">
                  <span class="itemTitle">{{ $t('taskMessage.contactName') }}:&nbsp;</span>{{ payType==0 ? item.busiContactName:item.name }}
                </div>
                <div class="itemRow">
                  <span class="itemTitle">{{ $t('taskMessage.contactPhoneNumber') }}:&nbsp;</span>{{ payType==0 ? item.busiContactMobileNo:item.phone }}
                </div>
                <div class="itemRow">
                  <span class="itemTitle">{{ $t('taskMessage.applicationTime') }}:&nbsp;</span>{{ showDateTime(item.createDate) }}
                </div>
                <div class="itemRow">
                  <span class="itemTitle">{{ $t('taskMessage.approvalTime') }}:&nbsp;</span>{{ showDateTime(item.modifyDate) }}
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <!-- 筛选弹窗 -->
    <kDialog :dialogTitle="$t('taskMessage.equipmentInit.searchPop.title')"
             :confirmBtnTxt="$t('taskMessage.equipmentInit.searchPop.filterBtn')" ref="kDialogRef" @confirmclk="confirmClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field clearable v-model="searchForm.merchantName" :placeholder="
            $t('taskMessage.equipmentInit.searchPop.merchantNamePlace')
          " :label="$t('taskMessage.equipmentInit.searchPop.merchantName')" />
          <van-field @click-input="busiInpClk" readonly clearable v-model="searchForm.stateName"
                     :placeholder="$t('taskMessage.equipmentInit.searchPop.statePlace')"
                     :label="$t('taskMessage.equipmentInit.searchPop.state')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.stateName" @click="searchForm.state = ''; searchForm.stateName = ''"
                          class="o-mr-6" name="clear" />
                <van-icon @click="busiInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </template>
    </kDialog>
    <!-- 状态选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker :title="$t('taskMessage.equipmentInit.searchPop.statePlace')" :columns="tabList"
                  :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { useRouter } from "vue-router";
import dateUtil from "@/utils/dateUtil";
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import { getTaskJoinpayMchCheckList } from "@/service/taskMessage";
import kDialog from "@/components/commom/kDialog/index.vue";
import kTabs from "@/components/commom/kTabs/index.vue";
import { useI18n } from "vue-i18n";
export default {
  components: { sHeader, kDialog, kTabs },
  setup() {
    // 筛选弹窗
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    const kDialogRef = ref(null);
    const busiPopShow = ref(false);
    const payType = ref(0); // 支付平台，0为汇聚，1为汇付;
    const searchForm = reactive({
      merchantName: "",
      state: "",
      stateName: '',
    });
    // 点击商家输入框
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    // 点击状态弹窗确定按钮
    const busiPopConfirm = (e) => {
      busiPopShow.value = false;
      searchForm.state = e.id;
      searchForm.stateName = e.name;
    };
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 如果是点击筛选的确定按钮
    const isSearchConfirm = ref(false);
    // tab的组件
    const kTabsRef = ref(null);
    // 点击右侧按钮
    const confirmClk = () => {
      isSearchConfirm.value = true;
      // 如果什么筛选条件都没，要默认一个，不然会报错
      if (searchForm.state === '') {
        searchParams.type = '0';
      } else {
        searchParams.type = searchForm.state;
      }
      // 改变tab状态
      kTabsRef.value.chgActive(searchParams.type);
      searchGetList();
    };
    const { t } = useI18n();
    // tabs组件
    const tabList = ref([
      {
        name: t('taskMessage.joinpayMchCheck.convergence'),
        icon: "",
        id: 0,
      },
      {
        name: t('taskMessage.joinpayMchCheck.huifu'),
        icon: "",
        id: 1,
      },
    ]);
    // 点击tab
    const tabClk = (e) => {
      isSearchConfirm.value = false;
      if (!isSearchConfirm.value) {
        searchParams.type = e.name;
        searchGetList()

      }
      payType.value = e.name;
      console.log(e, 'e11111111')
    }
    const router = useRouter();
    const user = getLoginUser();
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    const alarmHistoryList = ref([]); // 列表集合
    const alarmHistoryTotal = ref(0); // 列表总数
    let searchParams = reactive({
      adminId: "", // 当前登录账户的id
      type: "0", // 类型 汇聚: 0, 杉德: 1
      current: 1, // 当前页
      size: 20, // 页大小
    });
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
      }
    };
    // 查询列表
    const searchGetList = () => {
      alarmHistoryList.value = [];
      searchParams.current = 1;
      getList();
    };
    // 获取设备初始化审批列表数据
    const getList = async () => {
      searchParams.userName = searchForm.merchantName;
      const { data } = await getTaskJoinpayMchCheckList(
          Object.assign({}, searchParams)
      );
      if (data.code === "00000") {
        // 列表值叠加
        alarmHistoryList.value = alarmHistoryList.value.concat(
            data.data.records
        );
        alarmHistoryTotal.value = data.data.total;
        if (alarmHistoryList.value.length === data.data.total) {
          finished.value = true;
        }
        loading.value = false;
      } else {
        Toast.fail(data.message);
      }
    };
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('taskMessage');
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
      }
    });
    const showDateTime = (date) => {
      return date
          ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
          : "";
    };
    const pushInfo = (item) => {
      router.push({
        path: "taskJoinPayMchCheckInfo",
        query: { infoId: item.id, infoType: searchParams.type },
      });
    };

    return {
      loading,
      error,
      finished,
      onLoad,
      alarmHistoryList,
      alarmHistoryTotal,
      showDateTime,
      pushInfo,
      kDialogRef,
      noticeClk,
      confirmClk,
      busiInpClk,
      busiPopConfirm,
      busiPopShow,
      searchForm,
      busiPopFieldName,
      tabList,
      kTabsRef,
      tabClk,
      payType,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";
</style>