上一版是10.10的, 这版才是原始源码

admin

2026-01-06 42faef34194c466f03e29d75a63ae502e4213044

 src/views/quotes/components/BuySellTradeTab.vue

@@ -5,9 +5,9 @@
      <div class="line-first flex">
        <div class="line-first-l">
          <p>
            <span>{{ t("最新价") }} {{ chartData.close }}</span>&nbsp;
            <span class="red">{{ chartData?.changeRatio }}%</span>&nbsp;
            <span class="red">{{ chartData?.netChange }}</span>&nbsp;
            <span>{{ t("最新价") }} {{ chartData.close }}</span>&nbsp; <span class="red">{{
              chartData?.changeRatio
            }}</span>&nbsp; <span class="red">{{ chartData?.netChange }}</span>&nbsp;
          </p>
        </div>
        <!-- <div class="line-first-r">
@@ -38,8 +38,7 @@
    </div> -->
    <div class="orderbook-container flex justify-between px-30 py-30">
      <div
        :class="{ 'trade-order-area': true, 'sell-box': props.isSell, 'trade-order-area-full': ['JP-stocks', 'HK-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType) }"
        :style="{ width: `${['US-stocks'].includes(symbolType) ? '100%' : ''}` }">
        :class="{ 'trade-order-area': true, 'sell-box': props.isSell, 'trade-order-area-full': ['JP-stocks', 'HK-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType) }">
        <!-- TODO: 搜索 -->
        <!-- <div class="name-input" @click="showSearch = true"> -->
        <div class="name-input">
@@ -52,8 +51,7 @@
              <img src="@/assets/image/quotes/grey-select.png" alt="select-icon" class="select-icon" />
            </div>
            <div class="option-box" v-show="isShow">
              <div class="text-30" v-for="(item, index) in selectData" :key="item.type"
                @click="selectItem(item, index)">
              <div class="text-30" v-for="(item, index) in selectData" :key="item.type" @click="selectItem(item, index)">
                {{ item.title }}
              </div>
            </div>
@@ -110,60 +108,56 @@
          </span>
        </p>
      </div>
      <template v-if="!['US-stocks'].includes(symbolType)">
        <div class="trade-deep-data"
          v-if="!['HK-stocks', 'JP-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType)">
          <keep-alive>
            <trade-deep-data :symbol="symbol" v-if="symbol" :price="form.price" class="trade-deep-container"
              @newPrice="getNewPrice" />
          </keep-alive>
        </div>
        <div class="trade-deep-data" v-else>
          <div class="index-card flex-r"
            v-if="!['HK-stocks', 'JP-stocks', 'UK-stocks', 'DE-stocks', 'BZ-stocks'].includes(symbolType)">
            <div class="flex-r-item">
              <p>
                <span class="label">{{ $t('最高') }}</span>
                <span class="value">{{ formatMoney(chartData?.high) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('最低') }}</span>
                <span class="value">{{ formatMoney(chartData?.low) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('成交量') }}</span>
                <span class="value">{{ formatMoney(chartData?.volume) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('换手率') }}</span>
                <span class="value">{{
                  chartData?.turnoverRate ? formatMoney(chartData?.turnoverRate) + '%' : '-'
                }}</span>
              </p>
              <p>
                <span class="label">{{ t('marketValue') }}</span>
                <span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('amplitude') }}</span>
                <span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('pb') }}</span>
                <span class="value">{{ formatMoney(chartData?.pb) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('eps') }}</span>
                <span class="value">{{ formatMoney(chartData?.eps) }}</span>
              </p>
              <p>
                <span class="label">{{ $t('navps') }}</span>
                <span class="value">{{ formatMoney(chartData?.navps) }}</span>
              </p>
            </div>
      <div class="trade-deep-data" v-if="!['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType)">
        <keep-alive>
          <trade-deep-data :symbol="symbol" v-if="symbol" :price="form.price" class="trade-deep-container"
            @newPrice="getNewPrice" />
        </keep-alive>
      </div>
      <div class="trade-deep-data" v-else>
        <div class="index-card flex-r" v-if="!['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(symbolType)">
          <div class="flex-r-item">
            <p>
              <span class="label">{{ $t('最高') }}</span>
              <span class="value">{{ formatMoney(chartData?.high) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('最低') }}</span>
              <span class="value">{{ formatMoney(chartData?.low) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('成交量') }}</span>
              <span class="value">{{ formatMoney(chartData?.volume) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('换手率') }}</span>
              <span class="value">{{
                chartData?.turnoverRate ? formatMoney(chartData?.turnoverRate) + '%' : '-'
              }}</span>
            </p>
            <p>
              <span class="label">{{ t('marketValue') }}</span>
              <span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('amplitude') }}</span>
              <span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('pb') }}</span>
              <span class="value">{{ formatMoney(chartData?.pb) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('eps') }}</span>
              <span class="value">{{ formatMoney(chartData?.eps) }}</span>
            </p>
            <p>
              <span class="label">{{ $t('navps') }}</span>
              <span class="value">{{ formatMoney(chartData?.navps) }}</span>
            </p>
          </div>
        </div>
      </template>
      </div>
    </div>
    <!-- <div class="orderbook-container flex justify-between px-30 py-30 hk-stocks-orderbook" v-else>
      <div :class="{ 'trade-order-area': true, 'sell-box': props.isSell }">
@@ -249,8 +243,7 @@
            <!-- <li>{{ t('成交历史') }}</li> -->
          </ul>
        </div>
        <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img"
          @click="goHistory" />
        <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img" @click="goHistory" />
      </div>
    </div>
    <section class="etf-container">
@@ -261,8 +254,8 @@
              @cancelOrder="cancelOrder" />
          </div>
          <div class="pl-10 pr-10 pb-50" v-else-if="tabType == '2'">
            <history-item :unit="currentUnit(symbolType)" v-for="item in entrustList" :key="item.order_no"
              :coinPrice="coinPrice" :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
            <history-item :unit="currentUnit(symbolType)" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
              :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
          </div>
          <div class="pl-5 pr-5" v-else>
            <div class="mb-10 border-b assets-box">
@@ -270,10 +263,10 @@
              <ul>
                <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-2">
                  <div class="flex items-center">
                    <!-- <img :src="item.symbol
                    <img :src="item.symbol
                      ? `${HOST_URL}/symbol/${item.symbol.toLowerCase()}.png`
                      : require('@/assets/loading-default.png')
                      " class="w-15 h-15 rounded-full mr-5 usdt-icon" /> -->
                      " class="w-15 h-15 rounded-full mr-5 usdt-icon" />
                    <p class="flex flex-col">
                      <strong class="text-28 textColor mb-6">{{
                        item.symbol.toUpperCase()
@@ -285,7 +278,7 @@
                    <strong class="text-28 textColor mb-6">{{ item.usable }}</strong>
                    <span class="text-28 text-grey">
                      {{ currency.currency_symbol }}
                      {{ item.usableUsdt ? formatNumberWithComma(item.usableUsdt * currency.rate) : "0.0" }}
                      {{ item.usableUsdt ? (item.usableUsdt * currency.rate).toFixed(2) : "0.0" }}
                    </span>
                  </div>
                </li>
@@ -311,7 +304,7 @@
                    <strong class="text-28 textColor mb-6">{{ item.usable }}</strong>
                    <span class="text-28 text-grey">
                      {{ currency.currency_symbol }}
                      {{ item.usableUsdt ? formatNumberWithComma(item.usableUsdt * currency.rate) : "0.0" }}
                      {{ item.usableUsdt ? (item.usableUsdt * currency.rate).toFixed(2) : "0.0" }}
                    </span>
                  </div>
                </li>
@@ -391,8 +384,8 @@
      </section>
      <div class="kline-container flex" v-if="showKlineChart">
        <div class="chart-index">
          <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol"
            @data="onData" :key="`${symbol}-${timeValue}`" />
          <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
            :key="`${symbol}-${timeValue}`" />
        </div>
      </div>
    </div>
@@ -437,7 +430,6 @@
import { SET_STAGE } from "@/store/types.store";
import { formatMoney } from '@/utils/index.js'
import { currentUnit } from '@/utils/coinUnit.js'
import { formatNumberWithComma } from '@/utils/utis';

const thStore = themeStore();
const THEME = thStore.theme;
@@ -457,26 +449,53 @@
  },
});
const filterOne = ref([
  { name: '1' + t('分'), paramsValue: '1', seconds: 1 * 60 * 1000, index: 12, },
  { name: '1' + t('周'), paramsValue: 'W', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
  { name: '1' + t('月'), paramsValue: 'M', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
  { name: '1' + t('天'), paramsValue: 'D', seconds: 1 * 24 * 60 * 60 * 1000, index: 4, },
  { name: t("分时"), paramsValue: "timeSharing", seconds: 1 * 60 * 1000, index: 0 },
  {
    name: "1" + t("天"),
    paramsValue: "1day",
    seconds: 1 * 24 * 60 * 60 * 1000,
    index: 1,
  },
  {
    name: "1" + t("周"),
    paramsValue: "1week",
    seconds: 7 * 24 * 60 * 60 * 1000,
    index: 2,
  },
  {
    name: "1" + t("月"),
    paramsValue: "1mon",
    seconds: 30 * 24 * 60 * 60 * 1000,
    index: 3,
  },
  {
    name: "5" + t("天"),
    paramsValue: "5day",
    seconds: 5 * 24 * 60 * 60 * 1000,
    index: 4,
  },
  {
    name: t("season"),
    paramsValue: "1quarter",
    seconds: 3 * 30 * 24 * 60 * 60 * 1000,
    index: 5,
  },
  {
    name: t("Year"),
    paramsValue: "1year",
    seconds: 12 * 30 * 24 * 60 * 60 * 1000,
    index: 6,
  },
]);
const filterTwo = ref([
  { name: '60' + t('分'), paramsValue: '60', seconds: 60 * 60 * 1000, index: 7, },
  { name: '45' + t('分'), paramsValue: '45', seconds: 45 * 60 * 1000, index: 8, },
  { name: '30' + t('分'), paramsValue: '30', seconds: 30 * 60 * 1000, index: 9, },
  { name: '15' + t('分'), paramsValue: '15', seconds: 15 * 60 * 1000, index: 10, },
  { name: '5' + t('分'), paramsValue: '5', seconds: 5 * 60 * 1000, index: 11, },

  // { name: "120" + t("分"), paramsValue: "120min", seconds: 2 * 60 * 60 * 1000, index: 7 },
  // { name: "60" + t("分"), paramsValue: "60min", seconds: 1 * 60 * 60 * 1000, index: 8 },
  // { name: "30" + t("分"), paramsValue: "30min", seconds: 30 * 60 * 1000, index: 9 },
  // { name: "15" + t("分"), paramsValue: "15min", seconds: 15 * 60 * 1000, index: 10 },
  // { name: "5" + t("分"), paramsValue: "5min", seconds: 5 * 60 * 1000, index: 11 },
  // { name: "1" + t("分"), paramsValue: "1min", seconds: 1 * 60 * 1000, index: 12 },
  { name: "120" + t("分"), paramsValue: "120min", seconds: 2 * 60 * 60 * 1000, index: 7 },
  { name: "60" + t("分"), paramsValue: "60min", seconds: 1 * 60 * 60 * 1000, index: 8 },
  { name: "30" + t("分"), paramsValue: "30min", seconds: 30 * 60 * 1000, index: 9 },
  { name: "15" + t("分"), paramsValue: "15min", seconds: 15 * 60 * 1000, index: 10 },
  { name: "5" + t("分"), paramsValue: "5min", seconds: 5 * 60 * 1000, index: 11 },
  { name: "1" + t("分"), paramsValue: "1min", seconds: 1 * 60 * 1000, index: 12 },
]);
const timeLabelActive = ref(12);
const timeLabelActive = ref(1);
const chartType = ref("");
const quotesStore = useQuotesStore();
const userStore = useUserStore();
@@ -563,9 +582,9 @@
onMounted(async () => {
  initPage(props.symbolFlag);
  handleClickSelectTime({
    paramsValue: "1",
    paramsValue: "1day",
    seconds: 1 * 24 * 60 * 60 * 1000,
    index: 12,
    index: 1,
  });
});

@@ -687,9 +706,9 @@
    router.push(`/quotes/detail?symbol=${symbol.value}&tabActive=7&symbolType=A-stocks&type=A-stocks`)
  } else if (symbolType === "UK-stocks") {
    router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=9&symbolType=UK-stocks`)
  } else if (symbolType === "DE-stocks") {
  }else if (symbolType === "DE-stocks") {
    router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=10&symbolType=DE-stocks`)
  } else if (symbolType === "BZ-stocks") {
  }else if (symbolType === "BZ-stocks") {
    router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=11&symbolType=BZ-stocks`)
  } else {
    router.push(`/quotes/usStockDetail?symbol=${symbol.value}&tabActive=4&symbolType=HK-stocks`)
@@ -740,8 +759,8 @@
      return;
    }
    if (currentType.value === "open") {
      form.volume = parseFloat(form.total).toFixed(5);
      form.total = ((parseFloat(form.total) / parseFloat(form.price))).toFixed(5)
        form.volume = parseFloat(form.total).toFixed(5);
        form.total = ((parseFloat(form.total) / parseFloat(form.price))).toFixed(5)
    } else {
      form.volume = parseFloat(form.total) / parseFloat(form.price);
      form.volume = form.volume.toFixed(5);
@@ -753,7 +772,7 @@
      return;
    }
    if (currentType.value === "open") {
      form.total = form.volume
        form.total = form.volume
      volume = parseFloat(form.volume) * parseFloat(form.price);
    } else {
      volume = form.volume;
@@ -837,7 +856,7 @@
    getOrderList();
    if (type === "open") {
      //console.log('开仓数据')
      Axios.tradeBuyToken({ type: symbolType }).then((res) => {
      Axios.tradeBuyToken({ type : symbolType}).then((res) => {
        initOpen.volume = res.volume;
        initOpen.fee = res.fee;
        initOpen.session_token = res.session_token;
@@ -1317,7 +1336,6 @@
      display: flex;
      flex-direction: column;
      width: 210px;
      // width: 100%;
      font-size: 12px;
      margin-right: 12px;