From 7a52988eb65d0e50cc56e9da8e0088dfc5f9e416 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 02 Jul 2025 15:41:31 +0800
Subject: [PATCH] style
---
src/views/optional/index.vue | 751 ++++++---------------------------------------------------
1 files changed, 87 insertions(+), 664 deletions(-)
diff --git a/src/views/optional/index.vue b/src/views/optional/index.vue
index fb75467..2b5bc5f 100644
--- a/src/views/optional/index.vue
+++ b/src/views/optional/index.vue
@@ -1,681 +1,104 @@
<template>
- <section class="pb-20">
- <div class="container-box">
- <header class="header">
- <div class="flex-l" @click="handleShowPopup">
- <div class="icon">
- <img src="@/assets/image/optional/left-icon.png" alt="">
- </div>
- <span class="title">{{ optionalType == 1 ? activeInfo.listName : optionalName }}</span>
- </div>
- <div class="icon-group">
- <!-- <div class="icon search" @click="onRoute('/optional/search')">
- <img src="@/assets/image/optional/search.png" alt="">
- </div> -->
- <!-- <div class="icon setting">
- <img src="@/assets/image/optional/setting.png" alt="" @click="onRoute('/optional/setting')">
- </div> -->
- </div>
- </header>
- <div class="has-data">
- <section class="option-container">
- <div class="flex-l" @click="onRoute('/optional/editGroupList')">
- <div class="icon">
- <img src="@/assets/image/optional/edit.png" alt="">
- </div>
- <span class="title">{{ t('editList') }}</span>
- </div>
- <div class="flex-r flex items-center">
- <span class="title">{{ t('最新价') }}</span>
- <div class="search flex items-center">
- <div class="filter-box ml-10">
- <div class="w-14 h-12 " :class="[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(1)">
- </div>
- <div class="w-14 h-12" :class="[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(2)">
- </div>
- </div>
- </div>
- </div>
- </section>
- <section class="market-container">
- <div class="symbol-table">
- <ul>
- <li class="flex" @click="itemClick(item)" v-for="(item, index) in itemList" :key="index">
- <div class="flex-l">
- <div class="flex-l-item logo">
- <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" alt="">
- </div>
- <div class="flex-l-item name-title">
- <p v-if="item.type == 'cryptos'" class="name-short">{{ item.symbol_data.toUpperCase() }}</p>
- <p v-else class="name-short">{{ item.symbol }}</p>
- <p class="name">{{ item.name }}</p>
- </div>
- </div>
- <div class="flex-r">
- <div class="flex-r-item chart-box">
- <m-echarts :dataObj="item" :ratio="item.change_ratio" :index="index" />
- </div>
- <div class="flex-r-item data-box">
- <div class="data-item" :class="[item.change_ratio < 0 ? 'bg-red' : 'bg-green']">{{ item.close }}</div>
- <p class="value" :class="[item.change_ratio < 0 ? 'color-red' : 'color-green']">
- {{ item.change_ratio < 0 ? item.net_change : '+' + item.net_change }} {{
- item.change_ratio }}%</p>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <!-- <div class="add-btn-group">
- <div class="add-icon icon">
- <img src="@/assets/image/optional/add.png" alt="">
- </div>
- <span @click="onRoute('/optional/search')">{{ t('addStock') }}</span>
- </div> -->
- </section>
+<div class="status_bar">
+ <div class="my-20 mx-17 h-172 box-border text-white pt-40 px-20 bgimglx">
+ <div class="text-17 font-medium block">帳戶總金額</div>
+ <div class="text-34 font-medium block">{{symbol}}</div>
+ <div class="flex items-center mt-20">
+ <div class="flex items-center rounded-14 bg-#3640f0 px-10">
+ <div class="text-13 font-bold">儲值</div>
</div>
- <!-- <div class="no-data" v-if="itemList.length == 0">
- <img src="@/assets/image/optional/no-data.png" alt="">
- <p class="text">{{ t('暂无股票') }}</p> -->
- <!-- <div class="add-btn">
- <span>+ {{ t('添加') }}</span>
- </div> -->
- <!-- </div> -->
- <van-popup overlay-class="left-modal" v-model:show="show" position="left"
- :style="{ width: '75%', height: '100%', background: '#1F233D' }" round safe-area-inset-top safe-area-inset-bottom>
- <div class="modal-inner-box">
- <p>{{ t('myPortfolio') }}</p>
- <div class="sidebar">
- <van-sidebar v-model="activeSideBarIndex">
- <!-- <van-sidebar-item @click="openType('all', 'ETF')" :title="t('全部股票')" /> -->
- <van-sidebar-item :title="`${item.listName}(${item.symbolCount})`" @click="openId(item)"
- v-for="(item, index) in optionalList" :key="index" />
- <!-- <van-sidebar-item @click="openType('indices', 'ETF')" :title="`ETF(${fixedData.indices || 0})`" /> -->
- <!-- <van-sidebar-item @click="openType('US-stocks', t('UsStocks'))"
- :title="`${t('UsStocks')}(${fixedData['US-stocks'] || 0})`" /> -->
- <van-sidebar-item @click="openType('cryptos', t('digitalCurrency'))"
- :title="`${t('digitalCurrency')}(${fixedData.cryptos || 0})`" />
- <!-- <van-sidebar-item @click="openType('forex', t('外汇'))" :title="`${t('外汇')}(${fixedData.forex || 0})`" /> -->
- </van-sidebar>
- </div>
- <footer class="footer-container">
- <!-- <div class="btn-group flex">
- <div class="btn-item flex-1" @click="onRoute('/optional/groupListManagement')">
- <div class="icon">
- <img src="@/assets/image/optional/edit.png" alt="">
- </div>
- <p>{{ t("managementPortfolio") }}</p>
- </div>
- <div class="line"></div>
- <div class="btn-item flex-1" @click="onRoute('/optional/groupAdd')">
- <div class="icon">
- <img src="@/assets/image/optional/add-icon.png" alt="">
- </div>
- <p>{{ t("addList") }}</p>
- </div>
- </div> -->
- </footer>
- </div>
- </van-popup>
+ <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10">
+ <div class="text-13 font-bold">提現</div>
+ </div>
+ <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10">
+ <div class="text-13 font-bold">兌換</div>
+ </div>
+ <div class="flex flex-1 justify-end">
+ <img src="@/assets/imgs/icon-order.png" class="w-14 h-15" draggable="false">
+ </div>
</div>
- </section>
+ </div>
+</div>
+
+<!-- 货币列表部分 -->
+<div class="pt-20 px-15">
+ <!-- DOGE 货币卡片 -->
+ <div
+ v-for="(currency, index) in currencies"
+ :key="index"
+ class="p-14 mb-15"
+ style="border: 0.5px solid rgb(243, 243, 243);"
+ >
+ <div class="text-14 title pb-10" style="border-bottom: 0.5px solid rgb(243, 243, 243);">
+ {{ currency.name }}
+ </div>
+ <div class="text-12 pt-10">
+ <div class="flex justify-between items-center">
+ <div style="color: rgb(150, 150, 150);">可用({{ currency.name }})</div>
+ <div class="title text-blue-600">{{ currency.mark_price }}</div>
+ </div>
+ <div class="my-16 flex justify-between items-center">
+ <div style="color: rgb(150, 150, 150);">處理中({{ currency.name }})</div>
+ <div>{{ 0 }}</div>
+ </div>
+ <div class="flex justify-between items-center">
+ <div style="color: rgb(150, 150, 150);">轉換(USDT)</div>
+ <div></div>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+
</template>
-
+
<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { useUserStore } from '@/store/user';
-import { useRoute, useRouter } from 'vue-router';
-import { Popup, Sidebar, SidebarItem } from 'vant';
-import { _itemUserOptionalList, _itemUserOptionalListAdd, _listItemsById } from '@/service/quotes.api'
-import { _getQuotes, _listItemsByType } from '@/service/quotes.api'
-import { OPCIONA_LIST, CITAS_LIST, IS_LOAD } from '@/store/types.store'
-import { useQuotesStore } from '@/store/quotes.store'
-import { showLoadingToast, closeToast } from 'vant';
-import {
- contractOrder
-} from "@/service/trade.api.js";
-import { useI18n } from 'vue-i18n'
-import MEcharts from "@/components/ex-echarts/index.vue";
-import { HOST_URL } from '@/config'
+import { ref, onMounted } from 'vue';
+import { _getContractBySymbolType, _contractOrder } from '@/service/etf.api';
-const { t } = useI18n()
-const router = useRouter()
-const route = useRoute()
-const show = ref(false)
-const activeSideBarIndex = ref(0)
-const optionalList = ref([])
-const activeInfo = ref({})
-const itemList = ref([])
-const interval = ref(null)
-const fixedData = ref({})
-const optionalType = ref(1)
-const optionalName = ref('')
-const sortVal = ref(0)
-const quotesStore = useQuotesStore()
-const useStore = useUserStore();
-onMounted(async () => {
- // if (!useStore.userInfo.token) {
- // router.push('/login')
- // return false
- // }
- if (quotesStore.$state.isLoad === 1) {
- showLoadingToast({
- message: t('加载中...'),
- duration: 0
- });
- quotesStore[IS_LOAD](2)
- }
- await getMyCoinsList()
- itemList.value = quotesStore.$state.citasList
- IntervalFun()
+onMounted(() => {
+ getSymbol();
+ getOrderList();
+});
+// 货币数据
+const currencies = ref([
+ // {
+ // name: 'DOGE',
+ // mark_price: 0,
+ // },
+]);
-})
+const symbol = ref('0.00'); // 总金额
+// 总金额
+const getSymbol = async () => {
+ const response = await _getContractBySymbolType('cryptos');
+ symbol.value = response.money_contract || symbol.value;
+};
-const openType = (val, name) => {
- quotesStore[IS_LOAD](3)
- openByTypeItem(val, name)
-}
-const openId = (item) => {
- quotesStore[IS_LOAD](3)
- quotesStore[OPCIONA_LIST]([])
- quotesStore[CITAS_LIST]([])
- activeInfo.value = item
- byIdItem(item.listId)
- show.value = false
-}
-const handleShowPopup = () => {
- show.value = true;
-}
-
-const onRoute = (path) => {
- router.push(path)
-}
-//获取我的自选列表
-const getMyCoinsList = () => {
- let params = {}
- optionalList.value = []
- if (!useStore.userInfo.token) { //没登陆
- optionalType.value = 3
- optionalName.value = t('all')
- let obj = [
- { symbol: 'AAPL' },
- { symbol: 'MSFT' },
- { symbol: 'btcusdt' },
- { symbol: 'ethusdt' },
- { symbol: 'SH518880' },
- { symbol: '.IXIC' },
- { symbol: '.DJI' },
- ]
- quotesStore[OPCIONA_LIST](obj)
- activeSideBarIndex.value = 0
- } else {
- activeSideBarIndex.value = 1
- _itemUserOptionalList(params).then(data => {
- closeToast()
- fixedData.value = data.count
- optionalList.value = data.list || []
- if (optionalList.value.length > 0) {
- activeInfo.value = optionalList.value[0]
- byIdItem(activeInfo.value.listId)
- }
- })
- }
-}
-//根据id获取列表
-const byIdItem = (id) => {
- if (!useStore.userInfo.token) {
- return
- }
- optionalType.value = 1
- let obj = {
- id: id
- }
- if (quotesStore.$state.isLoad === 3) {
- showLoadingToast({
- message: t('加载中...'),
- duration: 0
- });
- quotesStore[IS_LOAD](2)
- }
- _listItemsById(obj).then((res) => {
- closeToast()
- let arry = []
- quotesStore[OPCIONA_LIST]([])
- res.map((item) => {
- let objData = {
- symbol: item.symbol
- }
- arry.push(objData)
- })
- console.log(arry, 222)
- quotesStore[OPCIONA_LIST](arry)
- if (arry.length == 0) {
- quotesStore[CITAS_LIST]([])
- }
- })
-}
-//根据type获取列表
-const openByTypeItem = (val, name) => {
- if (!useStore.userInfo.token) {
- return
- }
- if (quotesStore.$state.isLoad === 3) {
- showLoadingToast({
- message: t('加载中...'),
- duration: 0
- });
- quotesStore[IS_LOAD](2)
- }
- show.value = false
- if (val === 'all') {
- optionalType.value = 3
- optionalName.value = t('all')
- let obj = [
- { symbol: 'AAPL' },
- { symbol: 'MSFT' },
- { symbol: 'btcusdt' },
- { symbol: 'ethusdt' },
- { symbol: 'SH518880' },
- { symbol: '.IXIC' },
- { symbol: '.DJI' },
- ]
- quotesStore[OPCIONA_LIST](obj)
- activeSideBarIndex.value = 0
-
- } else {
- quotesStore[OPCIONA_LIST]([])
- quotesStore[CITAS_LIST]([])
- optionalType.value = 2
- optionalName.value = name
- let obj = {
- type: val
- }
- _listItemsByType(obj).then((res) => {
- closeToast()
- let arry = []
- quotesStore[OPCIONA_LIST]([])
- res.map((item) => {
- let objData = {
- symbol: item.symbol
- }
- arry.push(objData)
- })
- console.log(arry, 2222)
- quotesStore[OPCIONA_LIST](arry)
- if (arry.length == 0) {
- quotesStore[CITAS_LIST]([])
- }
- })
- }
-}
-
-// const openByIdItem = (item) => {
-// quotesStore[IS_LOAD](3)
-// quotesStore[OPCIONA_LIST]([])
-// quotesStore[CITAS_LIST]([])
-// activeInfo.value = item
-// byIdItem(item.listId)
-// show.value = false
-// }
-//跳转界面
-const itemClick = (item) => {
- console.log(item)
- if (item.type == "cryptos") { //跳转虚拟币
- router.push('/cryptos/trendDetails/' + item.symbol+'?isOptional=1')
- } else if (item.type == "indices") { //efg
- router.push('/quotes/detail?symbol=' + item.symbol+'&isOptional=1')
- } else if (item.type == "US-stocks") { //美股
- router.push('/quotes/usStockDetail?symbol=' + item.symbol+'&isOptional=1')
- } else {
- router.push('/foreign/coinChart?symbol=' + item.symbol+'&isOptional=1')
- }
-}
-//数字排序
-const orderListAsc = (filed, type = "asc") => {
- return (a, b) => {
- if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
- return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
+const getOrderList = async () => {
+ const params = {
+ type: 'orders',
+ page_no: 1,
+ page_size: 'all',
+ symbolType: 'cryptos'
};
-}
-const listSort = (val) => {
- sortVal.value = val
-}
-const IntervalFun = () => {
- interval.value = setInterval(() => {
- closeToast()
- if (quotesStore.$state.opcionalList.length > 0) {
- console.log(quotesStore.$state.opcionalList)
- _getQuotes(quotesStore.$state.opcionalList).then((data) => {
- itemList.value = data
- if (sortVal.value == 1) {
- itemList.value = itemList.value.sort(orderListAsc('close'))
- quotesStore[CITAS_LIST](itemList.value)
- } else {
- itemList.value = itemList.value.sort(orderListAsc('close', 'ask'))
- quotesStore[CITAS_LIST](itemList.value)
- }
- })
- } else {
- itemList.value = []
- }
- }, 2000)
-}
+ const response = await _contractOrder(params);
+ console.log(response, 'response')
+ // 处理订单数据
+ currencies.value = response
+};
-onBeforeUnmount(() => {
- if (interval.value) {
- console.log(interval.value)
- clearInterval(interval.value)
- }
-})
</script>
+
<style lang="scss" scoped>
-:deep(.van-sidebar) {
- width: 100%;
-}
+@import "@/assets/css/deepseek_css_20250625_30ff932.css";
-:deep(.van-sidebar-item) {
- background-color: $main2_background;
- color: $text_color;
- padding: 12px;
-}
-
-:deep(.van-sidebar-item--select) {
- background-color: #1C2946;
- color: $color_main;
-}
-
-.container-box {
- padding: 0 12px 50px 12px;
-
- .name-title {
- width: 100px;
- }
-
- .green {
- color: $green;
- }
-
- .red {
- color: $red;
- }
-
- .header {
- display: flex;
- height: 28px;
-
- .flex-l {
- flex: 1;
- display: inline-flex;
-
- .icon {
- display: inline-block;
- width: 24px;
- height: 28px;
- padding: 6px 4px;
-
- img {
- height: 16px;
- width: 12px;
- }
- }
- }
-
- .title {
- font-weight: 700;
- font-size: 20px;
- line-height: 28px;
- color: $mainTextColor;
- }
-
- .icon-group {
- width: 100px;
- text-align: right;
-
- .icon {
- display: inline-block;
- width: 28px;
- height: 28px;
- padding: 4px;
- margin-left: 16px;
- }
- }
-
-
- }
-
- .no-data {
- margin-top: 30%;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- img {
- width: 98px;
- height: 108px;
- }
-
- .text {
- margin: 30px 0;
- font-size: 14px;
- color: #747A8F;
- }
-
- .add-btn {
- width: 134px;
- height: 38px;
- border: 1px solid #0083DA;
- border-radius: 6px;
- color: #0083DA;
- text-align: center;
- line-height: 36px;
- }
- }
-
- .option-container {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- font-size: 12px;
- color: #747A8F;
-
- .flex-l {
- display: inline-flex;
- align-items: center;
-
- .icon {
- width: 20px;
- height: 20px;
- margin-right: 8px;
- }
- }
-
- .flex-r {
- display: inline-flex;
- align-items: center;
-
- .icon {
- width: 20px;
- height: 20px;
- margin-left: 8px;
- }
- }
- }
-
- .market-container {
- padding: 10px 0 60px;
-
- .symbol-table {
- line-height: 22px;
-
- li {
- padding: 16px 0;
- border-bottom: 1px solid $border_color;
- }
-
- .flex-l {
- display: flex;
- width: 130px;
- align-items: center;
-
- .logo {
- width: 28px;
- height: 28px;
- margin-right: 6px;
- }
-
- .name-short {
- font-weight: 600;
- font-size: 14px;
- }
-
- .name {
- font-size: 12px;
- color: #B8BDD1;
- }
- }
-
- .flex-r {
- display: flex;
- flex: 1;
- align-items: center;
- font-size: 12px;
- text-align: center;
-
- .flex-r-item {
- flex: 1;
- align-self: center;
- }
-
- .data-box {
- padding: 0 6px;
-
- .data-item {
- text-align: center;
- height: 24px;
- line-height: 24px;
- border-radius: 4px;
- color: $text_color;
- font-weight: 600;
- font-size: 14px;
- }
-
- .bg-red {
- background: $red;
- }
-
- .bg-green {
- background: $green;
- }
-
- .value {
- font-weight: 300;
- margin-top: 4px;
- }
-
- }
- }
- }
-
- .add-btn-group {
- display: flex;
- align-items: center;
- margin-top: 20px;
- font-size: 12px;
- line-height: 24px;
- color: $color_main;
-
- .icon {
- width: 16px;
- height: 16px;
- margin-right: 8px;
- }
- }
-
- }
-
- .modal-inner-box {
- padding: 30px 0 50px;
-
- >p {
- padding-left: 12px;
- font-weight: 700;
- font-size: 16px;
- }
-
- .sidebar {
- margin-top: 10px;
- width: 100%;
- }
- }
-
- .footer-container {
- position: absolute;
- width: 100%;
- bottom: 0px;
- border-top: 1px solid #2B314A;
-
- .line {
- margin: 10px 0;
- width: 1px;
- height: 40px;
- background-color: #2B314A;
- }
-
- .btn-item {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 13px;
- height: 60px;
- }
-
- .icon {
- margin-right: 4px;
- width: 18px;
- height: 18px;
- }
- }
-
-}
-
-.color-red {
- color: $red;
-}
-
-.color-green {
- color: $green;
-}
-
-.filter-box {
- .icon_top1 {
- background: url('../../assets/image/icon_top1.png') no-repeat center;
- background-size: 100% 100%;
- width: 10px;
- height: 6px;
- }
-
- .icon_top2 {
- background: url('../../assets/image/icon_top2.png') no-repeat center;
- background-size: 100% 100%;
- margin-top: 1px;
- width: 10px;
- height: 6px;
- }
-
- .icon_top1_active {
- background: url('../../assets/image/icon_top3.png') no-repeat center;
- background-size: 100% 100%;
- width: 10px;
- height: 6px;
- }
-
- .icon_top2_active {
- background: url('../../assets/image/icon_top4.png') no-repeat center;
- background-size: 100% 100%;
- margin-top: 1px;
- width: 10px;
- height: 6px;
- }
+.bgimglx {
+ background: url('@/assets/imgs/position-card.png') no-repeat;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3