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

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Documentary.title')" :showBack="false" />
    <uni-loading v-if="loading" />
    <uni-row v-else class="demo-uni-row uni-row1" :gutter="20">
      <uni-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" class="mb-3">
        <cwg-combox :clearable="false" v-model:value="login"
                    :options="loginOptions.map(item => ({
                    text: item.platform + ' - ' + item.login + ' - ' + groupTypeName(item.type) + ' - ' + t('Custom.Deposit.AvailableBalance') + groupCurrency(item.currency) + item.balance,
                    value: item
                  }))" :placeholder="locale === 'es'?'Selecciona':t('placeholder.choose')" @change="handleCommand"/>

      </uni-col>
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="uni-col-left">
        <uni-row :gutter="10">
          <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="height: 100%">
            <view class="card tab-card shadow-none">
              <view>
                <image class="icon-img" src="/static/images/dollar.png" alt="dollar"/>
              </view>
              <view class="table-tit">
                <view class="tit mb-1">
                  <text>{{ t('Documentary.console.item5') }}</text>
                </view>
                <view class="money">
                  <h3>${{ numberFormat(ChartSetDate.position || '0.00') }}</h3>
                </view>
              </view>
            </view>
          </uni-col>
<!--          <uni-col :xs="24" :sm="12" :md="isDealLogin ? 8 : 12" :lg="isDealLogin ? 4 : 6" :xl="isDealLogin ? 4 : 6">-->
          <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="height: 100%">
            <view class="card tab-card shadow-none bg-danger bg-opacity-10">
              <view>
                <image class="icon-img" src="/static/images/money.png" alt="money"/>
              </view>
              <view class="table-tit">
                <view class="tit mb-1 text-danger">
                  <text>{{ t('Documentary.console.item6') }}</text>
                </view>
                <view class="money d-flex">
                  <h3>${{ numberFormat(ChartSetDate.equity || '0.00') }}</h3>
                </view>
                <view>
                  <view class="tit-1 text-danger">
                    <text class="yest">{{ t('Documentary.console.item9') }}</text>
                    <text>${{ numberFormat(ChartSetDate.equityIncrement || '0.00') }}</text>
                  </view>
                </view>
              </view>
            </view>
          </uni-col>
<!--          <uni-col :xs="24" :sm="12" :md="isDealLogin ? 8 : 12" :lg="isDealLogin ? 4 : 6" :xl="isDealLogin ? 4 : 6">-->
          <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="height: 100%">
            <view class="card tab-card shadow-none bg-success bg-opacity-10">
              <view>
                <image class="icon-img" src="/static/images/wallet.png" alt="wallet"/>
              </view>
              <view class="table-tit">
                <view class="tit mb-1 text-success">
                  <text>{{ t('Documentary.console.item7') }}</text>
                </view>
                <view class="num">
                  <h3>${{ numberFormat(ChartSetDate.balance || '0.00') }}</h3>
                </view>
                <view class=" ">
                  <view class="tit-1 text-success">
                    <text class="yest">{{ t('Documentary.console.item9') }}</text>
                    <text >${{ numberFormat(ChartSetDate.balanceIncrement || '0.00') }}</text>
                  </view>
                </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 h3">{{ t('Documentary.console.item23') }}</text>
                    </view>
                    <view class="num cursor-pointer" @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">
                      <view class="tab h3">{{ t('Documentary.console.item27') }}</view>
                    </view>
                      <button class="btn btn-danger btn-shadow waves-effect" @click="dialogFllowApplyOpen">
                        <view class="d-flex align-items-center">
                        <cwg-icon name="crm-plus" :size="14" color="#fff" />
                        <text>{{ t('Documentary.TundManagement.item12') }}</text>
                        </view>
                      </button>
                  </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]
      login.value = res.data[0]
      loginOptions.value = res.data
      console.log(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 login = 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 handleCommand = (value) => {
  const data = { ...value }

  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-management' })
}

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: var(--bs-heading-color);
  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: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  padding: 15px;

  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: px2rpx(125);
}

.custom-number .title,
.custom-money .left .tit,
.custom-money .right .tit {
  font-size: 14px;
  color: var(--bs-heading-color);
  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: var(--bs-heading-color);
}

.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(20);
  font-weight: 600;
  color: var(--bs-heading-color);
}

.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: var(--bs-heading-color);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

  .info-text {
    color: var(--bs-heading-color);
    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 {
  margin: 0;
  //text-align: center;
  //background-color: rgb(var(--bs-danger-rgb));
  //font-size: px2rpx(16);
  //color: #fff;
  //padding: px2rpx(10) px2rpx(20);
  //border-radius: px2rpx(8);
}

.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;
}
.tab-card{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: px2rpx(15);
  padding: px2rpx(20);
  height: 100%;
  min-height: px2rpx(115);

  .icon-img{
    width: px2rpx(50);
    height: px2rpx(50);
  }
  .table-tit{
    .tit{
      color: var(--bs-body-color);
      gap: px2rpx(15);
    }
    .tit-1{
      font-size: px2rpx(12);
      font-weight: 500;
    }
    .yest{
      margin-right: px2rpx(10);
    }
  }

}
</style>