shenze-sysMan/src/views/distributionSet/index.vue

<template>
  <!-- 分销设置 -->
  <div class="distributionSetIdx">
    <s-header :name="$t('distributionSet.distributionSettings')" :noback="false"></s-header>
    <div class="o-h">
      <div style="height: 75px">
        <div class="o-plr-14 o-ptb-10 kBordBott">
          <div class="headCon l-flex-between">
            <div class="leftCon l-flex-RC">
              <img class="leftImg o-mr-6" src="../../assets//distributionSet/leftIcon.png" alt="" />
              <span class="leftTxt c-text-15 c-text-w6">
                {{ $t('distributionSet.total') }}<span class="leftNum c-text-20">{{ total }}</span>
                {{ $t('distributionSet.leftTitle') }}
              </span>
            </div>
            <div @click="toDetail" class="rightCon c-text-12">
              + {{ $t('distributionSet.rightAdd') }}
            </div>
          </div>
        </div>
        <kTabs tabWidth="100%" @tabchg="tabChg" :tabList="tabList"></kTabs>
      </div>
      <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
          :offset="300" :immediate-check="false">
          <div v-for="item in tableData" :key="item.id" @click="toDetail(item)"
            class="o-plr-14 o-ptb-16 contentCon kBordBott">
            <div class="content l-flex-between">
              <div>
                <span class="titleName c-text-13">{{ $t('distributionSet.equipName') }}：</span>
                <span class="valueName c-text-13">{{
                  item.equipmentName
                }}</span>
              </div>
              <van-icon color="#B9BAD0" size="20" name="arrow" />
            </div>
            <div v-if="item.agencyProportion" class="content l-flex-RC">
              <div class="l-flex-RC">
                <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}：</span>
                <span class="valueName valueName1 c-text-line1 c-text-13">{{
                  item.agencyName
                }}</span>
              </div>
              <div class="o-ml-30">
                <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}：</span>
                <span class="valueName c-text-13">{{ item.agencyProportion }}%</span>
              </div>
            </div>
            <div v-if="item.merchantProportion" class="content l-flex-RC">
              <div class="l-flex-RC">
                <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}：</span>
                <span class="valueName valueName1 c-text-line1 c-text-13">{{
                  item.merchantName
                }}</span>
              </div>
              <div class="o-ml-30">
                <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}：</span>
                <span class="valueName c-text-13">{{ item.merchantProportion }}%</span>
              </div>
            </div>
            <div v-if="item.personageProportion" class="content l-flex-RC">
              <div class="l-flex-RC">
                <span class="titleName c-text-13">{{ $t('distributionSet.partners') }}：</span>
                <span class="valueName valueName1 c-text-line1 c-text-13">{{
                  item.personageName
                }}</span>
              </div>
              <div class="o-ml-30">
                <span class="titleName c-text-13">{{ $t('distributionSet.distProp') }}：</span>
                <span class="valueName c-text-13">{{ item.personageProportion }}%</span>
              </div>
            </div>
            <div class="content l-flex-RC">
              <div>
                <span class="titleName c-text-13">{{ $t('distributionSet.applTime') }}：</span>
                <span class="valueName c-text-13">{{
                  Format_time(item.createDate, "YYYY-MM-DD HH:MM")
                }}</span>
              </div>
              <div v-if="tabActive === 1" class="effective c-text-15 c-text-w5 o-ml-20">
                {{ $t('distributionSet.reviewed') }}
              </div>
            </div>
            <div v-if="tabActive === 0" class="approval c-text-15 c-text-w5 o-mt-6">
              {{ $t('distributionSet.apprPend') }}
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// 导入公用方法
import { Format_time } from "../../common/js/utils";
// 导入接口
import { Api_getPageProportion } from "../../service/distributionSet";
import { onMounted, toRefs, ref, reactive } from "vue";
import sHeader from "../../components/SimpleHeader";
import { useRouter } from "vue-router";
import { getLoginUser, styleUrl } from "../../common/js/utils";
import kTabs from "../../components/commom/kTabs/index.vue";
import { useI18n } from 'vue-i18n';

export default {
  components: { sHeader, kTabs },
  setup() {
    const { t } = useI18n();
    const router = useRouter();

    const total =  ref(0);
    // 点击去详情
    const toDetail = (e) => {
      if (e) {
        router.push({
          path: "distributionDetail",
          query: { id: e.id, type: tabActive.value, clientId: e.clientId },
        });
      } else {
        router.push("/distributionDetail");
      }
    };
    const user = getLoginUser(); // 获取登录用户

    const tabList = ref([
      {
        name: t('distributionSet.apprPend'),
        icon: "",
        id: 1,
      },
      {
        name: t('distributionSet.reviewed'),
        icon: "",
        id: 2,
      },
    ]);

    const tabActive = ref(0);
    // 点击tab
    const tabChg = (e) => {
      tabActive.value = e;
      onRefresh(1);
      total.value = 0;
    };
    // 分页
    const pageNo = ref(1);
    const pageSize = ref(20);
    let ruleData = reactive({
      tableData: [],
    });
    // 上拉刷新
    const loading = ref(true);
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    onMounted(() => {
      // 加载样式
      styleUrl('distributionSet');
      onRefresh();
    });
    // 下拉刷新
    const onRefresh = (idx) => {
      ruleData.tableData = [];
      // 解决请求两次问题
      if (!idx) {
        finished.value = false;
      }
      loading.value = true;
      // 初始化分页
      pageNo.value = 1;
      pageSize.value = 20;
      getList();
    };
    // 上拉加载
    const onLoad = () => {
      pageNo.value++;
      getList();
    };
    const getList = () => {
      let param = {
        type: tabActive.value,
        adminId: user.id,
        current: pageNo.value,
        size: pageSize.value,
      };
      Api_getPageProportion(param).then((res) => {
        const { data } = res.data;
        refreshing.value = false;
        // 加入删除选中状态
        if (data.records.length > 0) {
          data.records.forEach((item) => {
            item.checked = false;
          });
        }
        ruleData.tableData.push(...data.records);
        console.log(ruleData.tableData);
        // 加载状态结束
        loading.value = false;
        // // 总共
        total.value = data.total;
        if (ruleData.tableData.length >= data.total) {
          finished.value = true;
        }
      });
    };

    return {
      toDetail,
      pageNo,
      pageSize,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
      getList,
      ...toRefs(ruleData),
      tabChg,
      tabActive,
      tabList,
      Format_time,
      total,
    };
  },
};
</script>

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