gypsy-crm-frontend-vu/pages/follow/index.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true" :bgColor="'#f8f9f9'">
    <cwg-header :title="t('Documentary.console.item1')" :showBack="false" />
    <uni-loading v-if="loading" />
    <uni-row v-else class="demo-uni-row uni-row1" :gutter="20">
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="uni-col-left">
        <uni-row>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="custom-number">
              <view class="title">
                <view class="tit">
                  <text>{{ t('Documentary.console.item4') }}</text>
                </view>
                <view class="select">
                  <cwg-dropdown :menu-list="loginOptions.map(item => ({
                        label: item.platform + ' - ' + item.login + ' - ' + groupTypeName(item.type) + ' - ' + t('Custom.Deposit.AvailableBalance') + groupCurrency(item.currency) + item.balance,
                        value: item
                      }))" @menuClick="handleCommand">
                    <view class="el-dropdown-link crm-cursor">
                      <text v-if="locale === 'es'">Selecciona</text>
                      <text v-else>{{ t('placeholder.choose') }}</text>
                      <cwg-icon name="crm-chevron-down" :size="14" color="#6c8595" />
                    </view>
                  </cwg-dropdown>
                </view>
              </view>
              <view
                class="content"
                style="
                  height: 40px;
                  display: inline-block;
                  font-size: 15px;
                  color: #eb3f57;
                  font-weight: bold;
                "
              >
                <view style="margin-bottom: 5px">
                  {{ ChartSet.platform || '--' }} - {{ ChartSet.login || '--' }} -
                  {{ groupTypeName(ChartSet.type) || '--' }}
                </view>
                <view>
                  <text>{{ t('Custom.Deposit.AvailableBalance') }}</text>
                  :
                  {{ groupCurrency1(ChartSet.currency) }}
                  {{ numberFormat(ChartSet.balance || '0.00') }}
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="custom-money">
              <view class="left">
                <view class="tit">
                  <text>{{ t('Documentary.console.item5') }}</text>
                </view>
                <view class="num red">
                  <text>{{ numberFormat(ChartSetDate.position || '0.00') }}</text>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col
            :xs="24"
            :sm="12"
            :md="isDealLogin ? 8 : 12"
            :lg="isDealLogin ? 4 : 6"
            :xl="isDealLogin ? 4 : 6"
          >
            <view class="custom-money">
              <view class="left">
                <view class="tit">
                  <text>{{ t('Documentary.console.item6') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.equity || '0.00') }}</text>
                </view>
              </view>
              <view class="right">
                <view class="tit">
                  <text>{{ t('Documentary.console.item9') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.equityIncrement || '0.00') }}</text>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col
            :xs="24"
            :sm="12"
            :md="isDealLogin ? 8 : 12"
            :lg="isDealLogin ? 4 : 6"
            :xl="isDealLogin ? 4 : 6"
          >
            <view class="custom-money">
              <view class="left">
                <view class="tit">
                  <text>{{ t('Documentary.console.item7') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.balance || '0.00') }}</text>
                </view>
              </view>
              <view class="right">
                <view class="tit">
                  <text>{{ t('Documentary.console.item9') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.balanceIncrement || '0.00') }}</text>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" v-if="isDealLogin">
            <view class="custom-money">
              <view class="left">
                <view class="tit">
                  <text>{{ t('Documentary.console.item8') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.profit || '0.00') }}</text>
                </view>
              </view>
              <view class="right">
                <view class="tit">
                  <text>{{ t('Documentary.console.item9') }}</text>
                </view>
                <view class="num">
                  <text>{{ numberFormat(ChartSetDate.profitIncrement || '0.00') }}</text>
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </uni-col>
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="uni-col-right">
        <view class="dashboard-container">
          <view class="account-info1" v-if="isDealLogin">
            <uni-row>
              <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <view class="custom-money custom-money-left">
                  <view class="header">
                    <view class="tit">
                      <text class="tab">{{ t('Documentary.console.item23') }}</text>
                    </view>
                    <view class="num" @click="toDocumentary1">
                      <cwg-icon name="crm-sz" :size="18" color="#6c8595" />
                    </view>
                  </view>
                  <view class="bottomCol">
                    <uni-row>
                      <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                        <view class="bo-left1">
                          <view>
                            <text>{{ t('Documentary.console.item26') }}</text>
                          </view>
                          <view class="blue-font">
                            <text>{{ numberFormat(dealDate.followNum || '0') }}</text>
                          </view>
                        </view>
                      </uni-col>
                      <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                        <view class="bo-left1">
                          <view>
                            <text>{{ t('Documentary.console.item9') }}</text>
                          </view>
                          <view class="blue-font">
                            <text>{{ numberFormat(dealDate.followNumIncrement || '0') }}</text>
                          </view>
                        </view>
                      </uni-col>
                      <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                        <view class="bo-left1">
                          <view>
                            <text>{{ t('Documentary.console.item29') }}</text>
                          </view>
                          <view class="blue-font">
                            <text>{{ numberFormat(dealDate.position || '0') }}</text>
                          </view>
                        </view>
                      </uni-col>
                      <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
                        <view class="bo-right1">
                          <view>
                            <text>{{ t('Documentary.console.item30') }}</text>
                          </view>
                          <view class="blue-font">
                            <text>{{ numberFormat(dealDate.closed || '0') }}</text>
                          </view>
                        </view>
                      </uni-col>
                    </uni-row>
                  </view>
                </view>
              </uni-col>
            </uni-row>
          </view>

          <view class="account-info1" v-else>
            <uni-row>
              <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <view class="custom-money custom-money-right">
                  <view class="header">
                    <view class="tit">
                      <text class="tab">{{ t('Documentary.console.item27') }}</text>
                    </view>
                    <view class="num">
                      <view class="btn crm-cursor" @click="dialogFllowApplyOpen">
                        +
                        <text>{{ t('Documentary.TundManagement.item12') }}</text>
                      </view>
                    </view>
                  </view>
                  <view class="bottom">
                    <view class="tab">
                      <cwg-tabel
                        :data="SubscribeProfitDate"
                        class="crm_tab"
                        :api="listApi"
                        :columns="[
                          { label: t('Documentary.console.item32'), prop: 'nickname', align: 'center', slot: 'nickname' },
                          { label: t('Documentary.console.item33'), prop: 'nickname2', align: 'center', slot: 'nickname2' },
                          { label: t('Documentary.console.item34'), prop: 'startTime', align: 'center', slot: 'startTime' },
                          { label: t('Documentary.console.item35'), prop: 'endTime', align: 'center', slot: 'endTime' }
                        ]"
                        style="width: 100%"
                        :show-operation="false"
                        :showPagination="false"
                      >
                        <template #nickname="{ row }">
                          <text>{{ row.nickname || '--' }}</text>
                        </template>
                        <template #nickname2="{ row }">
                          <text>{{ row.nickname || '--' }}</text>
                        </template>
                        <template #startTime="{ row }">
                          <text>{{ row.startTime || '--' }}</text>
                        </template>
                        <template #endTime="{ row }">
                          <text>{{ row.endTime || '--' }}</text>
                        </template>
                      </cwg-tabel>
                    </view>
                  </view>
                </view>
              </uni-col>
            </uni-row>
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!-- 申请成为信号源弹窗 -->
    <applySignalDialog
      :visible="isApplySignalVisible"
      :loginOptions="loginOptions"
      @close="isApplySignalVisible = false"
      @confirm="onApplySignalConfirm"
    />
  </cwg-page-wrapper>
</template>

<script setup>
  import { ref, computed, watch, onMounted ,nextTick} from 'vue'
  import { useI18n } from 'vue-i18n'
  import useRouter from '@/hooks/useRouter'
  import { ibApi } from '@/service/ib'
  import config from '@/config/index'
  import useUserStore from '@/stores/use-user-store'
  import { useStorage } from '@/hooks/useStorage'
  import QrCode from '@/components/QrCode.vue'
  import applySignalDialog from './components/applySignalDialog.vue'
  import { useFilters } from '@/composables/useFilters'
  import { isAfterJuly28 } from '@/utils/dateUtils'
  import { documentaryApi } from '@/service/documentary'

  const { t, locale } = useI18n()
  const loading = ref(false)
  const router = useRouter()
  const { Code } = config
  const { userInfo } = useUserStore()
  const { numberFormat } = useFilters()
  const listApi = ref(documentaryApi.followDailySubscribeProfit)
  const ibData = ref({
      customAmount: 0,
      ibAmount: 0,
    },
  )
  const selectedSpreadId = ref('')
  const spreadList = ref([])
  const excludeShowLoginTypes = ref([])
  const pammManagerValid = ref()
  const dialogPercent = ref(false)
  const dialogPercentData = ref({
    oldPercent: '',
    mamListId: '',
    oldOwnerId: '',
    oldAccountId: '',
    percent: '',
  })

  const getCustomLoginDown = async () => {
    const res = await documentaryApi.followCustomDropdown()
    if (res.code === Code.StatusOK) {
      if (res.data?.length > 0) {
        const options = res.data[0]
        loginOptions.value = res.data
        isDealLogin.value = options.isDealLogin
        ChartSet.value = {
          login: options.login,
          leverage: '1:' + options.leverage,
          platform: options.platform,
          groupTypeName: options.groupTypeName,
          type: options.type,
          balance: options.balance,
          currency: options.currency || '',
        }
      }
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }

  const loginOptions = ref([])
  const ChartSet = ref({})
  const ChartSetDate = ref({})
  const isDealLogin = ref(false)
  const dealDate = ref({})
  const SubscribeProfitDate = ref([])

  const groupTypeName = (type) => {
    if (!type) return '--'
    if (type == 1) return t('AccountType.ClassicAccount')
    if (type == 2) return t('AccountType.SeniorAccount')
    if (type == 5) return t('AccountType.SpeedAccount')
    if (type == 6) return t('AccountType.SpeedAccount')
    if (type == 7) return t('AccountType.StandardAccount')
    if (type == 8) return t('AccountType.CentAccount')
    return type
  }

  const groupCurrency = (type) => {
    console.log(type,'usd')
    if (type == 'GBP') {
      return ': £'
    } else if (type == 'USD') {
      return ': $'
    } else if (type == 'EUR') {
      return ': €'
    } else if (type == 'USC') {
      return ': ￠'
    } else {
      return ': $'
    }
  }

  const groupCurrency1 = (type) => {
    if (type == "GBP") {
      return "£";
    } else if (type == "USD") {
      return "$";
    } else if (type == "EUR") {
      return "€";
    } else if (type == "USC") {
      return "￠";
    } else {
      return "$";
    }
  }

  const handleCommand = ({ value }) => {
    const data = {...value.value}
    console.log(123,data)

    isDealLogin.value = data.isDealLogin
    ChartSet.value = {
      login: data.login,
      leverage: '1:' + data.leverage,
      platform: data.platform,
      groupTypeName: data.groupTypeName,
      type: data.type,
      balance: data.balance,
      currency: data.currency || '',
    }
  }

  const getDailyCompare = async (login) => {
    const res = await documentaryApi.followDailyCompare({ login })
    if (res.code === Code.StatusOK) {
      ChartSetDate.value = res.data ?? {}
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }

  const getDailyDeal = async (login) => {
    const res = await documentaryApi.followDailyDeal({ login })
    if (res.code === Code.StatusOK) {
      dealDate.value = res.data ?? {}
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }

  const getDailySubscribeProfit = async (login) => {
    const res = await documentaryApi.followDailySubscribeProfit({ login })
    if (res.code === Code.StatusOK) {
      SubscribeProfitDate.value = res.data?.data ?? []
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }
  watch(()=>ChartSet.value.login,async (login)=>{
    await getDailyCompare(login)
    if (isDealLogin.value) {
      await getDailyDeal(login)
    } else {
      await getDailySubscribeProfit(login)
    }
  })


  const toDocumentary1 = () => {
    router.push({ path: '/pages/follow/trading-center' })
  }

  const dialogFllowApplyOpen = () => {
    isApplySignalVisible.value = true
  }

  const isApplySignalVisible = ref(false)
  const onApplySignalConfirm = () => {
    isApplySignalVisible.value = false
  }

  onMounted(async () => {
    loading.value = true
    await getCustomLoginDown()
    loading.value = false
  })

</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .demo-uni-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 auto!important;
  }

  .uni-col-left {
    //display: flex;
    //flex-direction: column;
  }

  .uni-col-right {
    display: flex;
    flex-direction: column;
  }

  .dashboard-container {
    min-height: 10vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mam-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* 卡片通用样式 */
  .card {
    background: var(--color-white);
    color: #333;
    padding: px2rpx(12) px2rpx(16);
    border-radius: 4px;
    margin-bottom: px2rpx(20);
    box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
  }

  .custom-number, .custom-money {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: 100px;
  }

  .custom-number .title, .custom-money .left .tit, .custom-money .right .tit {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }

  .custom-number .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .custom-money {
    display: flex;
    flex-direction: column;
  }

  .custom-money .left, .custom-money .right {
    flex: 1;
  }

  .custom-money .num {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  .custom-money .num.red {
    color: #eb3f57;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6c8595;
    font-size: 12px;
  }

  .account-info1 {
    margin-bottom: 20px;
  }

  .custom-money-left .header,
  .custom-money-right .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: px2rpx(15);
  }

  .custom-money-left .tab,
  .custom-money-right .tab {
    font-size: px2rpx(16);
    font-weight: 600;
    color: #333;
  }

  .bottomCol {
    font-size: 16px;
    color: #868686;

    .bo-left1 {
      margin: 20px 0;
      padding: 20px 0;
      border-right: 1px dashed #989898;
      text-align: center;
      font-size: 16px;
    }


    .bo-right1 {
      margin: 20px 0px;
      padding: 20px 0;
      text-align: center;
      font-size: 16px;

    }
  }

  .blue-font {
    margin-top: px2rpx(15);
    color: #007aff;
    font-weight: 600;
    font-size: px2rpx(24);
  }

  .subscribe-table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    overflow: hidden;
  }

  .subscribe-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 1px solid #ebeef5;
  }

  .subscribe-head {
    background: #f5f7fa;
    border-top: none;
  }

  .subscribe-cell {
    padding: 10px 8px;
    font-size: 12px;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .custom-dialog-content {
    padding: px2rpx(20);

    .info-text {
      color: #333;
      font-size: px2rpx(14);
      line-height: px2rpx(36);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .header-title {
    font-size: px2rpx(14);
    font-weight: 600;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .action-btn {
    background: #ffde02;
    border: none;
    border-radius: 50%;
    width: px2rpx(32);
    height: px2rpx(32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    &:after {
      border: none;
    }
  }

  /* 余额区域 */
  .balance-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
  }

  .balance-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .balance-amount {
    font-size: px2rpx(20);
    font-weight: 700;
    line-height: 1;
  }

  .balance-decimal {
    font-size: px2rpx(16);
    font-weight: 500;
    line-height: 1;
  }

  .balance-currency {
    font-size: px2rpx(16);
    font-weight: 500;
  }

  .total-earnings {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(20, 29, 34, 0.6);
    font-size: px2rpx(12);
  }

  .total-value {
    align-self: flex-end;
  }

  /* 合作伙伴卡片 */
  .partner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .link-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
  }

  .link-btn {
    height: px2rpx(32);
    background-color: rgb(108, 133, 149);
    line-height: px2rpx(32);
    color: var(--color-white);
    border-radius: px2rpx(16);
    font-size: px2rpx(14);
    margin: 0;
  }

  .code-content {
    display: flex;
    justify-content: center;
  }

  .code-input {
    width: 50%;
    max-width: px2rpx(178);
    margin-right: px2rpx(20);
  }

  .custom-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .con {
      cursor: pointer;
      text-align: center;
      font-size: px2rpx(16);
      margin: 5px;
    }

    .num {
      font-weight: bold;
    }

    .des {
      margin-top: px2rpx(5);

    }
  }

  .dia-content {
    padding: 20rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .label {
    font-weight: 500;
    margin-bottom: 8rpx;
  }

  .btn {
    text-align: center;
    background-color: #4497ff;
    font-size: px2rpx(16);
    color: #fff;
    padding: px2rpx(10);
    border-radius: px2rpx(4);
  }

  .crm-cursor {
    cursor: pointer;
  }

  .link {
    display: flex;
    margin-top: 20rpx;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: px2rpx(35);
      margin: 0 px2rpx(10);
    }
  }

  .qrCode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
  }

  .mam-card {
    .add-mam-btn {
      display: flex;
      background-color: var(--color-error);
      align-items: center;
      gap: 8rpx;
      height: px2rpx(32);
      line-height: px2rpx(32);
      padding: 0 px2rpx(12);
      margin: 0;
    }
  }

  .mam-line {
    display: flex;
    justify-content: center;
    gap: 6rpx;
    line-height: 1.5;
  }

  .mam-ops {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10rpx;
  }

  .mam-op {
    color: #2b5aed;
    font-size: px2rpx(12);
    line-height: 1.4;
  }
</style>