first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/promote/index.vue

@@ -1,70 +1,121 @@
<template>
  <div class="font-26 promote">
    <assets-head :title="$t('推荐')" />
    <div class="advise w-828 h-220 p-40 box-border flex flex-col items-start justify-center"
      :class="{ 'h-260 ': $i18n.locale !== 'CN' }">
      <span v-if="$i18n.locale === 'CN'" class="font-600 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
      <span v-else class="font-900 w-445 font-55">{{ $t('邀请好友，一起赚币') }}</span>
      <span class="w-500 mt-20 font-40 font-600" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
    <div
      class="advise w-828 h-220 p-40 box-border flex flex-col items-start justify-center"
      :class="{ 'h-260 ': $i18n.locale !== 'CN' }"
    >
      <span
        v-if="$i18n.locale === 'CN'"
        class="font-600 font-50"
        style="color: #273549"
        >{{ $t("邀请好友，一起赚币") }}</span
      >
      <span v-else class="font-900 w-445 font-55">{{
        $t("邀请好友，一起赚币")
      }}</span>
      <span class="w-500 mt-20 font-40 font-600" style="color: #273549">{{
        $t("马上充值即刻获取佣金")
      }}</span>
    </div>
    <div class="performance-title">
      <div class="performance-title-1 flex-col flex items-start"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('我的总推广') }}
        <div class="performance-text text-left">{{ promote_list.total && promote_list.total.children }}</div>
      <div
        class="performance-title-1 flex-col flex items-start"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }"
      >
        {{ $t("我的总推广") }}
        <div class="performance-text text-left">
          {{ promote_list.total && promote_list.total.children }}
        </div>
      </div>
      <div class="performance-title-2  flex-col flex items-center"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('总充值') }}
        <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1).toFixed(2)
          :
          '0.00' }}</div>
      <div
        class="performance-title-2 flex-col flex items-center"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }"
      >
        {{ $t("总充值") }}
        <div class="performance-text2 text-left">
          {{
            promote_list.recharge_sum
              ? (promote_list.recharge_sum * 1).toFixed(2)
              : "0.00"
          }}
        </div>
      </div>
      <div class="flex items-center w-160 justify-end colorMain" style="align-self: start">
        <div class="performance-title-3" @click="$router.push('/promote/rules')">{{ $t('规则') }}</div>
      <div
        class="flex items-center w-160 justify-end colorMain"
        style="align-self: start"
      >
        <div
          class="performance-title-3"
          @click="$router.push('/promote/rules')"
        >
          {{ $t("规则") }}
        </div>

        <img class="performance-title-4" src="../../assets/image/promote/right.png" />
        <img
          class="performance-title-4"
          src="../../assets/image/promote/right.png"
        />
      </div>
    </div>
    <div class="numberOfPeople">
      <div class="numberOfPeople-text flex flex-col align-center">
        {{ $t('一代人数') }}
        <div class="mt-20 numberOfPeople-text4 text-center">{{ promote_list.total && promote_list.total.level_1
        }}</div>
        {{ $t("一代人数") }}
        <div class="mt-20 numberOfPeople-text4 text-center">
          {{ promote_list.total && promote_list.total.level_1 }}
        </div>
      </div>
      <div class="numberOfPeople-text2 flex flex-col align-center">
        {{ $t('二代人数') }}
        <div class="mt-20 numberOfPeople-text5 flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_2
        }}</div>
        {{ $t("二代人数") }}
        <div class="mt-20 numberOfPeople-text5 flex-1 text-center">
          {{ promote_list.total && promote_list.total.level_2 }}
        </div>
      </div>
      <!--      <div style="flex: 1;"></div>-->
      <div class="numberOfPeople-text3 flex flex-col align-center">
        {{ $t('三代人数') }}
        <div class="mt-20 numberOfPeople-text6  flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_3
        }}</div>
        {{ $t("三代人数") }}
        <div class="mt-20 numberOfPeople-text6 flex-1 text-center">
          {{ promote_list.total && promote_list.total.level_3 }}
        </div>
      </div>
    </div>
    <div class="Recommend">
      <div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
      <div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">
        {{ $t("立即推广") }}
      </div>
    </div>
    <div class="segmentation-max"></div>
    <div class="MyRecommendation-title">{{ $t('我的推广') }}</div>
    <div style="width: 100%;">
    <div class="MyRecommendation-title">{{ $t("我的推广") }}</div>
    <div style="width: 100%">
      <van-tabs ref="tabs" v-model="active" sticky animated @change="onChange">
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
        <van-tab
          :title="item.title"
          v-for="item in selectData"
          :key="item.title"
          :name="item.type"
        >
          <div class="Recommendation-tab-title">
            <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
            <div class="Recommendation-tab-title1">{{ $t("用户名") }}</div>
            <div class="Recommendation-tab-title1">{{ $t("总人数") }}</div>
            <div class="Recommendation-tab-title1">{{ $t("总充值") }}</div>
          </div>
          <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
            :loading-text="$t('加载中...')">
            <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('没有更多了')"
            @load="onLoad"
            :loading-text="$t('加载中...')"
          >
            <div
              v-for="(item, index) in promote_list_data"
              :key="index"
              class="Recommendation-tab"
            >
              <div class="Recommendation-tab1">{{ item.username }}</div>
              <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
              <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
              <div class="Recommendation-tab1">
                {{ (item.recharge_sum * 1).toFixed(2) }}
              </div>
            </div>
          </van-list>
        </van-tab>
@@ -73,14 +124,14 @@
  </div>
</template>
<script>
import { Tab, Tabs } from 'vant';
import Axiospromote from '@/API/promote.js'
import { List } from 'vant';
import { Tab, Tabs } from "vant";
import Axiospromote from "@/API/promote.js";
import { List } from "vant";
import assetsHead from "@/components/assets-head";
export default {
  data() {
    return {
      active: '1',
      active: "1",
      level: 1,
      page_no: 1,
      promote_list: [],
@@ -90,11 +141,11 @@
      finished: false,
      pageSize: 10,
      selectData: [
        { title: this.$t('一代'), type: '1' },
        { title: this.$t('二代'), type: '2' },
        { title: this.$t('三代'), type: '3' },
      ]
    }
        { title: this.$t("一代"), type: "1" },
        { title: this.$t("二代"), type: "2" },
        { title: this.$t("三代"), type: "3" },
      ],
    };
  },
  components: {
    assetsHead,
@@ -107,47 +158,52 @@
  },
  methods: {
    init() {
      this.promote_data()
      this.promote_data();
    },
    onLoad() {
      // 异步更新数据
      this.promote_data()
      this.promote_data();
    },
    promote_data() {
      const t = this
      const t = this;
      this.loading = true;
      Axiospromote.promote({ level: t.level, page_no: t.page_no }).then((res) => {
        console.log(111, res)
        t.promote_list = res.data
        this.promote_list_data = [...this.promote_list_data, ...res.data.list]
        // console.log(logs)
        this.loading = false
        if (res.data.list.length < this.pageSize) {
          this.finished = true
        } else {
          this.page_no++
      Axiospromote.promote({ level: t.level, page_no: t.page_no }).then(
        (res) => {
          console.log(111, res);
          t.promote_list = res.data;
          this.promote_list_data = [
            ...this.promote_list_data,
            ...res.data.list,
          ];
          // console.log(logs)
          this.loading = false;
          if (res.data.list.length < this.pageSize) {
            this.finished = true;
          } else {
            this.page_no++;
          }
          this.$refs.tabs && this.$refs.tabs.resize();
        }
        this.$refs.tabs && this.$refs.tabs.resize();
      })
      );
    },
    onClickLeft() {
      this.$router.push('/')
      this.$router.push("/");
    },
    ShareQRCode_push() {
      this.$router.push('/ShareQRCode')
      this.$router.push("/ShareQRCode");
    },
    onChange(e) {
      this.promote_list_data = []
      this.finished = false
      this.page_no = 1
      this.level = e
      this.promote_list_data = [];
      this.finished = false;
      this.page_no = 1;
      this.level = e;
      this.loading = true;
      if (this.loading) {
        this.promote_data()
        this.promote_data();
      }
    }
    },
  },
}
};
</script>
<style lang="scss" scoped>
.promote {
@@ -166,8 +222,6 @@
    }
  }
}



.advise {
  background: url("./invite-bg.png") no-repeat center center;
@@ -194,7 +248,7 @@
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  color: #848E9C;
  color: #848e9c;

  &.performance-title-1-1 {
    width: 250px;
@@ -209,7 +263,7 @@
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  color: #848E9C;
  color: #848e9c;

  &.performance-title-1-1 {
    font-size: 26px;
@@ -243,7 +297,7 @@
  font-style: normal;
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  color: #2ebd85;
  margin-top: 22px;
}

@@ -252,7 +306,7 @@
  font-style: normal;
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  color: #2ebd85;
  margin-top: 22px;
}

@@ -274,7 +328,7 @@
  font-weight: 400;
  text-align: center;
  font-size: 26px;
  color: #848E9C;
  color: #848e9c;
}

.numberOfPeople2 {
@@ -300,7 +354,6 @@
    color: themed("text_color");
  }
}


.Recommend {
  padding-right: 35px;
@@ -363,7 +416,7 @@
  font-size: 30px;
  line-height: 85px;
  text-align: center;
  color: #868D9A;
  color: #868d9a;
}

.Recommendation-tab {