fix: NFT黑屏修复+充值模块重写+市场页USDC
This commit is contained in:
testadmin
@@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<div style="width: 100%">
|
||||||
|
<v-chart :options="polar" :style="'width: ' + width + ';height:' + height + ';'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ECharts from "vue-echarts"; // 在 webpack 环境下指向 components/ECharts.vue
|
||||||
|
import echarts from "echarts";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
symbol: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default: "1day",
|
||||||
|
},
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
default: 7,
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "up",
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "150px",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "50px",
|
||||||
|
},
|
||||||
|
useTestData: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
name: "ChartBox",
|
||||||
|
data() {
|
||||||
|
console.log("颜色", this.color);
|
||||||
|
return {
|
||||||
|
books: ["book0", "book1"],
|
||||||
|
msg: "this is BookList",
|
||||||
|
polar: {
|
||||||
|
animation: true,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||||
|
splitLine: false,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: false,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
type: "line",
|
||||||
|
symbol: "none",
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)", // 0% 处的颜色，修复透明度值
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.7,
|
||||||
|
color:
|
||||||
|
this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)", // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线点的颜色
|
||||||
|
lineStyle: {
|
||||||
|
color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线的颜色
|
||||||
|
width: 0.4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
"v-chart": ECharts,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateChart() {
|
||||||
|
// 更新图表颜色
|
||||||
|
this.polar.series[0].itemStyle.normal.color =
|
||||||
|
this.color == "up" ? "#00f0ff" : "#ff494a";
|
||||||
|
this.polar.series[0].itemStyle.normal.lineStyle.color =
|
||||||
|
this.color == "up" ? "#00f0ff" : "#ff494a";
|
||||||
|
this.polar.series[0].areaStyle.normal.color.colorStops[0].color =
|
||||||
|
this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)";
|
||||||
|
this.polar.series[0].areaStyle.normal.color.colorStops[1].color =
|
||||||
|
this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
color(val) {
|
||||||
|
this.updateChart();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.updateChart();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.useTestData) {
|
||||||
|
console.log("使用测试数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有提供symbol，则使用测试数据
|
||||||
|
if (!this.symbol) {
|
||||||
|
console.warn("Chart Warning: No symbol provided, using test data");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let that = this;
|
||||||
|
let now = parseInt(new Date().valueOf() / 1000);
|
||||||
|
let start = now - 3600 * 24 * 7;
|
||||||
|
this.$http
|
||||||
|
.get("/api/currency/new_timeshar", {
|
||||||
|
params: {
|
||||||
|
symbol: this.symbol + "/USDC",
|
||||||
|
from: start,
|
||||||
|
to: parseInt(new Date().valueOf() / 1000),
|
||||||
|
period: this.period,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data && res.data.data && res.data.data.length > 0) {
|
||||||
|
let rsp = res.data;
|
||||||
|
let invoke = rsp.data.reverse().slice(0, this.count).reverse();
|
||||||
|
let data = [];
|
||||||
|
let data1 = [];
|
||||||
|
invoke.forEach((x) => {
|
||||||
|
data.push(x.id);
|
||||||
|
data1.push(x.close);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 确保data1中有数据再进行处理
|
||||||
|
if (data1.length > 0) {
|
||||||
|
let min = Math.min.apply(null, data1);
|
||||||
|
for (let i = 0; i < data1.length; i++) {
|
||||||
|
data1[i] = data1[i] - min;
|
||||||
|
}
|
||||||
|
console.log("data=====", data);
|
||||||
|
that.polar.xAxis.data = data;
|
||||||
|
that.polar.series[0].data = data1;
|
||||||
|
} else {
|
||||||
|
console.error("Chart Error: No data points found");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error("Chart Error: Invalid or empty response data");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Chart Error:", error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,588 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<indexHeader></indexHeader>
|
||||||
|
<secondaryHead :text="$t('deposit.title')"></secondaryHead>
|
||||||
|
|
||||||
|
<div class="deposit-page bit-center-wrap">
|
||||||
|
<div class="deposit-title">{{ $t('deposit.title') }}</div>
|
||||||
|
|
||||||
|
<div class="deposit-main">
|
||||||
|
<div class="deposit-left">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>{{ $t('deposit.selectCurrency') }}</label>
|
||||||
|
<el-select v-model="selectedCurrency" @change="onCurrencyChange" :placeholder="$t('deposit.selectCurrency')" class="currency-select">
|
||||||
|
<el-option v-for="name in currencyNames" :key="name" :value="name" :label="name">
|
||||||
|
<div class="currency-option">
|
||||||
|
<img v-if="getCurrencyLogo(name)" :src="$utils.isBaseUrl(getCurrencyLogo(name))" class="coin-logo" />
|
||||||
|
<span>{{ name }}</span>
|
||||||
|
</div>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group" v-if="depositAddress">
|
||||||
|
<label>{{ $t('deposit.depositTo') }}: <span class="wallet-label">{{ $t('deposit.walletAccount') }}</span></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chain-tags" v-if="availableChains.length > 1">
|
||||||
|
<label>{{ $t('deposit.selectChain') }}</label>
|
||||||
|
<div class="tags-row">
|
||||||
|
<span v-for="(chain, idx) in availableChains" :key="idx"
|
||||||
|
class="chain-tag" :class="{ active: selectedChainIndex === idx }"
|
||||||
|
@click="selectedChainIndex = idx">
|
||||||
|
{{ chain.chainName }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chain-tags" v-else-if="availableChains.length === 1">
|
||||||
|
<label>{{ $t('deposit.network') }}</label>
|
||||||
|
<div class="tags-row">
|
||||||
|
<span class="chain-tag active">{{ availableChains[0].chainName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="qr-section" v-if="depositAddress">
|
||||||
|
<div class="qr-container">
|
||||||
|
<div class="qr-frame">
|
||||||
|
<img :src="qrCodeUrl" class="qr-img" alt="QR Code" />
|
||||||
|
</div>
|
||||||
|
<button class="save-qr-btn" @click="saveQrCode">{{ $t('deposit.saveQr') }}</button>
|
||||||
|
</div>
|
||||||
|
<div class="deposit-warnings">
|
||||||
|
<div class="warning-item">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span>{{ $t('deposit.warning1', { currency: selectedCurrency, chain: chainDisplayName }) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="warning-item">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span>{{ $t('deposit.warning2', { currency: selectedCurrency }) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="warning-item">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span>{{ $t('deposit.warning3') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="warning-item">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span>{{ $t('deposit.warning4') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="address-box" v-if="depositAddress">
|
||||||
|
<label>{{ $t('deposit.depositAddress') }}</label>
|
||||||
|
<div class="address-row">
|
||||||
|
<span class="address-text">{{ depositAddress }}</span>
|
||||||
|
<span class="copy-btn" @click="copyAddress">
|
||||||
|
<i class="el-icon-document-copy"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="no-address" v-if="!loading && !depositAddress && selectedCurrency">
|
||||||
|
<p>{{ $t('deposit.addressUnavailable') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="deposit-records">
|
||||||
|
<div class="records-header">
|
||||||
|
<span class="records-title">{{ $t('deposit.rechargeRecord') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="records-table" v-if="recData.length > 0">
|
||||||
|
<div class="table-header">
|
||||||
|
<span class="col col-currency">{{ $t('deposit.selectCurrency') }}</span>
|
||||||
|
<span class="col col-amount">{{ $t('deposit.amount') }}</span>
|
||||||
|
<span class="col col-time">{{ $t('deposit.time') }}</span>
|
||||||
|
<span class="col col-address">{{ $t('deposit.address') }}</span>
|
||||||
|
<span class="col col-hash">{{ $t('deposit.hash') }}</span>
|
||||||
|
<span class="col col-status">{{ $t('deposit.status') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-row" v-for="(item, index) in recData" :key="index">
|
||||||
|
<span class="col col-currency">{{ item.name }}</span>
|
||||||
|
<span class="col col-amount">{{ item.amount }}</span>
|
||||||
|
<span class="col col-time">{{ item.created_at }}</span>
|
||||||
|
<span class="col col-address" :title="item.address">{{ item.address ? item.address.substring(0,10) + '...' : '-' }}</span>
|
||||||
|
<span class="col col-hash" :title="item.hash || item.txid">{{ (item.hash || item.txid) ? (item.hash || item.txid).substring(0,10) + '...' : '-' }}</span>
|
||||||
|
<span class="col col-status" :class="{'status-ok': item.status == 1, 'status-pending': item.status == 0, 'status-fail': item.status == 2}">
|
||||||
|
{{ item.status == 1 ? $t('deposit.statusSuccess') : item.status == 2 ? $t('deposit.statusFailed') : $t('deposit.statusPending') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="no-data" v-else>{{ $t('deposit.noRecords') }}</div>
|
||||||
|
<el-pagination v-if="recTotal > recLimit"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="recTotal"
|
||||||
|
:page-size="recLimit"
|
||||||
|
:current-page.sync="recPage"
|
||||||
|
@current-change="fetchRecords"
|
||||||
|
class="pagination">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<indexFooter></indexFooter>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import indexHeader from "@/view/indexHeader";
|
||||||
|
import indexFooter from "@/view/indexFooter";
|
||||||
|
import secondaryHead from "@/components/secondaryHead";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "deposit",
|
||||||
|
components: { indexHeader, indexFooter, secondaryHead },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
rechargeList: [],
|
||||||
|
currencyGroups: {},
|
||||||
|
currencyNames: [],
|
||||||
|
selectedCurrency: "",
|
||||||
|
selectedChainIndex: 0,
|
||||||
|
recData: [],
|
||||||
|
recPage: 1,
|
||||||
|
recTotal: 0,
|
||||||
|
recLimit: 10,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
availableChains() {
|
||||||
|
return this.currencyGroups[this.selectedCurrency] || [];
|
||||||
|
},
|
||||||
|
currentItem() {
|
||||||
|
return this.availableChains[this.selectedChainIndex] || {};
|
||||||
|
},
|
||||||
|
depositAddress() {
|
||||||
|
return this.currentItem.address_erc || this.currentItem.address_omni || "";
|
||||||
|
},
|
||||||
|
qrCodeUrl() {
|
||||||
|
if (!this.depositAddress) return "";
|
||||||
|
return "/api/qrcode?text=" + encodeURIComponent(this.depositAddress);
|
||||||
|
},
|
||||||
|
chainDisplayName() {
|
||||||
|
return this.currentItem.chainName || this.currentItem.name || "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchRechargeData();
|
||||||
|
if (localStorage.getItem("token")) {
|
||||||
|
this.fetchRecords();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchRechargeData() {
|
||||||
|
this.loading = true;
|
||||||
|
this.$http({
|
||||||
|
url: "/api/currency/recharge",
|
||||||
|
method: "get",
|
||||||
|
headers: { Authorization: localStorage.getItem("token") },
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.data.type === "ok") {
|
||||||
|
this.rechargeList = res.data.message.recharge || [];
|
||||||
|
this.processRechargeData(this.rechargeList);
|
||||||
|
}
|
||||||
|
}).catch(() => { this.loading = false; });
|
||||||
|
},
|
||||||
|
|
||||||
|
processRechargeData(list) {
|
||||||
|
var groups = {};
|
||||||
|
list.forEach(function(item) {
|
||||||
|
if (item.status != 1) return;
|
||||||
|
var parts = item.name.split("-");
|
||||||
|
var baseName = parts[0];
|
||||||
|
var chainName = parts.length > 1 ? parts[1] : item.name;
|
||||||
|
if (!groups[baseName]) groups[baseName] = [];
|
||||||
|
groups[baseName].push(Object.assign({}, item, { baseName: baseName, chainName: chainName }));
|
||||||
|
});
|
||||||
|
this.currencyGroups = groups;
|
||||||
|
this.currencyNames = Object.keys(groups);
|
||||||
|
if (this.currencyNames.length > 0) {
|
||||||
|
this.selectedCurrency = this.currencyNames[0];
|
||||||
|
this.selectedChainIndex = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrencyLogo(name) {
|
||||||
|
var chains = this.currencyGroups[name];
|
||||||
|
if (chains && chains.length > 0 && chains[0].logo) {
|
||||||
|
return chains[0].logo;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
|
||||||
|
onCurrencyChange() {
|
||||||
|
this.selectedChainIndex = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
copyAddress() {
|
||||||
|
var input = document.createElement("input");
|
||||||
|
input.value = this.depositAddress;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
input.remove();
|
||||||
|
this.$message.success(this.$t("deposit.copySuccess"));
|
||||||
|
},
|
||||||
|
|
||||||
|
saveQrCode() {
|
||||||
|
window.open(this.qrCodeUrl, "_blank");
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchRecords() {
|
||||||
|
this.$http({
|
||||||
|
url: "/api/recharge/log?page=" + this.recPage + "&limit=" + this.recLimit + "&lang=" + (localStorage.getItem("lang") || "en"),
|
||||||
|
method: "get",
|
||||||
|
headers: { Authorization: localStorage.getItem("token") },
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.data.type === "ok") {
|
||||||
|
this.recData = res.data.message.data || [];
|
||||||
|
this.recTotal = res.data.message.total || 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.deposit-page {
|
||||||
|
padding: 20px 0 60px;
|
||||||
|
min-height: 70vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-main {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-left {
|
||||||
|
flex: 1;
|
||||||
|
background: #111a2e;
|
||||||
|
border: 1px solid #1e2d45;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8a94a6;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallet-label {
|
||||||
|
color: #00cce1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-logo {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-tags {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-tags label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8a94a6;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-tag {
|
||||||
|
padding: 6px 18px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #2a3a55;
|
||||||
|
color: #8a94a6;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-tag:hover {
|
||||||
|
border-color: #00cce1;
|
||||||
|
color: #00cce1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-tag.active {
|
||||||
|
background: rgba(0, 204, 225, 0.12);
|
||||||
|
color: #00cce1;
|
||||||
|
border-color: #00cce1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-section {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-frame {
|
||||||
|
padding: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-img {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-qr-btn {
|
||||||
|
padding: 8px 24px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #42C18D, #47B487);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-qr-btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-warnings {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ff6b6b;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-item .dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff6b6b;
|
||||||
|
margin-top: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-box label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8a94a6;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #0d1421;
|
||||||
|
border: 1px solid #1e2d45;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
word-break: break-all;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #00cce1;
|
||||||
|
font-size: 18px;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-address {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
color: #8a94a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-records {
|
||||||
|
margin-top: 30px;
|
||||||
|
background: #111a2e;
|
||||||
|
border: 1px solid #1e2d45;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.records-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.records-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.records-table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header, .table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #1e2d45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
color: #8a94a6;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col { flex: 1; padding: 0 4px; }
|
||||||
|
.col-currency { flex: 0.6; }
|
||||||
|
.col-amount { flex: 0.8; }
|
||||||
|
.col-time { flex: 1.2; }
|
||||||
|
.col-address { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.col-hash { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.col-status { flex: 0.6; text-align: center; }
|
||||||
|
|
||||||
|
.status-ok { color: #42C18D; }
|
||||||
|
.status-pending { color: #f0ad4e; }
|
||||||
|
.status-fail { color: #ff4040; }
|
||||||
|
|
||||||
|
.no-data {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #8a94a6;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin-top: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme overrides for Element UI */
|
||||||
|
.deposit-page >>> .el-select .el-input__inner {
|
||||||
|
background-color: #0d1421;
|
||||||
|
border-color: #1e2d45;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-page >>> .el-select .el-input__inner:focus {
|
||||||
|
border-color: #00cce1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-page >>> .el-pagination .btn-prev,
|
||||||
|
.deposit-page >>> .el-pagination .btn-next,
|
||||||
|
.deposit-page >>> .el-pagination .el-pager li {
|
||||||
|
background: #0d1421;
|
||||||
|
color: #8a94a6;
|
||||||
|
border: 1px solid #1e2d45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-page >>> .el-pagination .el-pager li.active {
|
||||||
|
color: #00cce1;
|
||||||
|
border-color: #00cce1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile responsive */
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.deposit-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-main {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-left {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-section {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deposit-warnings {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-time, .col-address, .col-hash {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-currency { flex: 1; }
|
||||||
|
.col-amount { flex: 1; }
|
||||||
|
.col-status { flex: 0.8; }
|
||||||
|
|
||||||
|
.deposit-records {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,756 @@
|
|||||||
|
<template>
|
||||||
|
<div class="market" style="height: 100%;">
|
||||||
|
|
||||||
|
<div class="ssk">
|
||||||
|
<el-input placeholder="搜索" size="small" prefix-icon="el-icon-search" v-model="input1">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="cm-tabs-group">
|
||||||
|
|
||||||
|
|
||||||
|
<span class="cm-tab" :class="{'active-btn-bg':cmtabsCurrent == 100}" @click="cmTab(100)">
|
||||||
|
<span>{{$t('zx')}}</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="cm-tab" :class="{'active-btn-bg':cmtabsCurrent == item.id}" v-for="(item,index) in cmtabs"
|
||||||
|
@click="cmTab(item.id)" :key="index">{{item.pcname}}</span>
|
||||||
|
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="tabs-box">
|
||||||
|
<el-tabs v-model="tabsName" @tab-click="handleClick">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-tab-pane v-for="(item,index) in tabsList" :label="item.text" :name="item.type"></el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="tbs2">
|
||||||
|
<div class="tb2itme" :class="{'tb2itmeAvtive':tabsName2==item.type}" v-for="(item,index) in tabsList2[tabsName]"
|
||||||
|
@click="handleClick2(item.type)">{{item.text}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="m_filter">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="tabtitle fColor1 ft14 curPer flex">
|
||||||
|
<!-- <span>JNB</span>
|
||||||
|
<span>JNB</span>-->
|
||||||
|
<!-- <span v-for="(tab,index) in tabList " :key="index" :class="index==index1?'active':''" @click="changeType(index,tab.name,tab.id)">{{tab.name}}</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="coin-title clear" v-if="false">
|
||||||
|
<div>
|
||||||
|
<span style="color:#00a4d8;">{{ $t('market.currency') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('market.lastprice') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('market.change') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="line"></div> -->
|
||||||
|
<div class="coin-wrap scroll sdgvs" style="height: 90%; overflow: auto;">
|
||||||
|
<!-- :class="index==index2?'active_p':''" -->
|
||||||
|
<!-- <li class="currency_p" v-for="(item,index) in marketList " :key="index"
|
||||||
|
@click="quota_shift(index,item.legal_id,item.legal_name,item.currency_name,item.currency_id,item.change,item.lever_share_num)"
|
||||||
|
v-if="item.is_display == 1" v-show="item.currency_name!='USDC'">
|
||||||
|
<div style="white-space: nowrap; display: flex; justify-content: space-between; padding-right: 2rem;">
|
||||||
|
|
||||||
|
<div class="cscs">
|
||||||
|
<img :src="$utils.isBaseUrl(item.logo)" style="width: 24px; height: 24px;">
|
||||||
|
<div class="c-sdwa">
|
||||||
|
<span>{{ item.currency_name }} / USDC
|
||||||
|
|
||||||
|
<img src="@/assets/116.png" />
|
||||||
|
</span>
|
||||||
|
<span>{{ item.type }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span>{{ item.now_price|toFixedN(4) }}</span>
|
||||||
|
<span
|
||||||
|
:class="{'green':item.change>=0,'red':item.change<0}">{{ (item.change - 0).toFixed(2) }}%</span>
|
||||||
|
</div>
|
||||||
|
</li> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="hq-item" v-for="(item,index) in marketList " :key="index"
|
||||||
|
@click="quota_shift(index,item.legal_id,item.legal_name,item.currency_name,item.currency_id,item.change,item.lever_share_num,item.logo)">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<i class="el-icon-star-on" style="font-size: 16px;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="cscs">
|
||||||
|
<img :src="$utils.isBaseUrl(item.logo)" class="asd-logo">
|
||||||
|
<div class="c-sdwa">
|
||||||
|
<div class="fghf">{{ item.currency_name }} / USDC
|
||||||
|
|
||||||
|
<img class="qklx-img" src="@/assets/116.png" />
|
||||||
|
</div>
|
||||||
|
<div class="qklx">{{ item.type }}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dsd-right">
|
||||||
|
<span class="dr-s">{{ item.now_price|toFixedN(4) }}</span>
|
||||||
|
<span class="dr-x" :class="{'green2':item.change>=0}">{{ (item.change - 0).toFixed(2) }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "market",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsList: [{
|
||||||
|
type: '0',
|
||||||
|
text: "自選"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '1',
|
||||||
|
text: "現貨"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '2',
|
||||||
|
text: "合約"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '3',
|
||||||
|
text: "期權"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tabsName: '0',
|
||||||
|
tabsList2: [
|
||||||
|
[],
|
||||||
|
|
||||||
|
[{
|
||||||
|
type: '1',
|
||||||
|
text: "數字貨幣"
|
||||||
|
}],
|
||||||
|
[{
|
||||||
|
|
||||||
|
type: '1',
|
||||||
|
text: "數字貨幣"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '2',
|
||||||
|
text: "外匯"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '3',
|
||||||
|
text: "美股"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '4',
|
||||||
|
text: "韓股"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[{
|
||||||
|
|
||||||
|
type: '1',
|
||||||
|
text: "數字貨幣"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '2',
|
||||||
|
text: "外匯"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '3',
|
||||||
|
text: "美股"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '4',
|
||||||
|
text: "韓股"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '7',
|
||||||
|
text: "港股"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '5',
|
||||||
|
text: "ETF"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: '6',
|
||||||
|
text: "NFT"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
],
|
||||||
|
tabsName2: 1,
|
||||||
|
input1: "",
|
||||||
|
ids: 0,
|
||||||
|
isShow: 0,
|
||||||
|
tabList: [],
|
||||||
|
marketList: [],
|
||||||
|
newData: ["MTS", "$0.076128", "-1.11%"],
|
||||||
|
legal_index: this.$route.params.legal_index,
|
||||||
|
currency_index: this.$route.params.currency_index,
|
||||||
|
tradeDatas: "",
|
||||||
|
index2: 0,
|
||||||
|
index1: 0,
|
||||||
|
dataList: [],
|
||||||
|
selectedId: "",
|
||||||
|
shareNum: '',
|
||||||
|
cmtabs: [],
|
||||||
|
cmtabsCurrent: 0,
|
||||||
|
quotationList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
toFixedN(val, n) {
|
||||||
|
return (val - 0).toFixed(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function() {
|
||||||
|
this.socket(localStorage.getItem("token"));
|
||||||
|
let that = this;
|
||||||
|
//法币列表
|
||||||
|
this.$http({
|
||||||
|
url: "/api/" + "currency/quotation_new",
|
||||||
|
method: "get",
|
||||||
|
data: {},
|
||||||
|
headers: {
|
||||||
|
Authorization: localStorage.getItem("token")
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
that.tabList = res.data.message;
|
||||||
|
var msg = res.data.message;
|
||||||
|
var arr_quota = [];
|
||||||
|
let index = 0;
|
||||||
|
let indexs = 0;
|
||||||
|
if (!localStorage.getItem("index1")) {
|
||||||
|
index = that.index1;
|
||||||
|
} else {
|
||||||
|
index = localStorage.getItem("index1");
|
||||||
|
that.index1 = localStorage.getItem("index1");
|
||||||
|
}
|
||||||
|
if (!localStorage.getItem("index2")) {
|
||||||
|
indexs = that.index2;
|
||||||
|
} else {
|
||||||
|
indexs = localStorage.getItem("index2");
|
||||||
|
that.index2 = localStorage.getItem("index2");
|
||||||
|
}
|
||||||
|
that.marketList = res.data.message[index].quotation;
|
||||||
|
that.selectedId = res.data.message[index].quotation[that.index2].legal_id;
|
||||||
|
that.dataList = res.data.message;
|
||||||
|
that.shareNum = res.data.message[index].quotation[that.index2].lever_share_num;
|
||||||
|
window.localStorage.setItem("shareNum", that.shareNum);
|
||||||
|
//默认法币id和name
|
||||||
|
if (!localStorage.getItem("legal_id") && !localStorage.getItem("currency_id") && !
|
||||||
|
localStorage.getItem("legal_name") && !localStorage.getItem("currency_name")) {
|
||||||
|
that.currency_name = msg[index].quotation[indexs].currency_name;
|
||||||
|
that.currency_id = msg[index].quotation[indexs].currency_id;
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"currency_name",
|
||||||
|
msg[index].quotation[indexs].currency_name
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"legal_id",
|
||||||
|
msg[index].quotation[indexs].legal_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"currency_id",
|
||||||
|
msg[index].quotation[indexs].currency_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_currency_name",
|
||||||
|
msg[index].quotation[indexs].currency_name
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_legal_id",
|
||||||
|
msg[index].quotation[indexs].legal_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_currency_id",
|
||||||
|
msg[index].quotation[indexs].currency_id
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
that.currency_name = window.localStorage.getItem("currency_name");
|
||||||
|
that.currency_id = window.localStorage.getItem("currency_id");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
if (
|
||||||
|
window.localStorage.getItem("index2") &&
|
||||||
|
window.localStorage.getItem("index1")
|
||||||
|
) {
|
||||||
|
this.index2 = window.localStorage.getItem("index2");
|
||||||
|
this.index1 = window.localStorage.getItem("index1");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
var that = this;
|
||||||
|
eventBus.$on("toNew", function(data) {
|
||||||
|
// console.log(data);
|
||||||
|
if (data) {
|
||||||
|
var newprice = data.newprice;
|
||||||
|
var cname = data.istoken;
|
||||||
|
var newup = Number(data.newup).toFixed(2);
|
||||||
|
// console.log(newup)
|
||||||
|
if (newup >= 0) {
|
||||||
|
newup = "+" + Number(newup).toFixed(2) + "%";
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.next()
|
||||||
|
.css("color", "#55a067");
|
||||||
|
} else {
|
||||||
|
newup = newup + "%";
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.next()
|
||||||
|
.css("color", "#cc4951");
|
||||||
|
}
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.html("$" + newprice)
|
||||||
|
.next()
|
||||||
|
.html(newup);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventBus.$on('updateDaymarkey', res => {
|
||||||
|
|
||||||
|
// console.log(res,'接受到更新数据');
|
||||||
|
if (res !== undefined && res.currency_id !== undefined) {
|
||||||
|
for (let i = 0; i < that.marketList.length; i++) {
|
||||||
|
if (that.marketList[i] == undefined) {
|
||||||
|
console.log(i);
|
||||||
|
} else {
|
||||||
|
if (that.marketList[i].currency_id == res.currency_id && res.legal_id == 3) {
|
||||||
|
that.marketList[i].now_price = res.close;
|
||||||
|
that.marketList[i].change = res.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('没有的', res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.marketSocket();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(item) {
|
||||||
|
console.log('indsd', item.index)
|
||||||
|
this.tabsName = item.index
|
||||||
|
this.tabsName2 = '1'
|
||||||
|
},
|
||||||
|
handleClick2(index) {
|
||||||
|
|
||||||
|
this.tabsName2 = index
|
||||||
|
},
|
||||||
|
changeType(index, currency, currency_id) {
|
||||||
|
this.index1 = index;
|
||||||
|
this.index2 = null;
|
||||||
|
$(".currency_p p").removeClass("active_p");
|
||||||
|
|
||||||
|
this.isShow = index;
|
||||||
|
this.ids = "a";
|
||||||
|
// this.currency_name = currency;
|
||||||
|
// this.currency_id = currency_id;
|
||||||
|
this.marketList = this.dataList[index].quotation;
|
||||||
|
},
|
||||||
|
getSymbols(callback) {
|
||||||
|
if (this.address.length <= 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$http({
|
||||||
|
url: "/api/" + "wallet/list?user_id=" + this.address || "",
|
||||||
|
type: "GET"
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
this.accountInfo = res.data.message;
|
||||||
|
this.dataList = res.data.message.list;
|
||||||
|
|
||||||
|
callback && callback();
|
||||||
|
} else {}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
return error;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
marketSocket() {
|
||||||
|
var that = this;
|
||||||
|
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||||
|
that.sockets.subscribe("daymarket", msg => {
|
||||||
|
if (msg.type == "daymarket") {
|
||||||
|
for (var i = 0; i < that.quotationList.length; i++) {
|
||||||
|
if (
|
||||||
|
that.quotationList[i].legal_id == msg.legal_id &&
|
||||||
|
that.quotationList[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.quotationList[i].now_price = msg.now_price;
|
||||||
|
// that.quotationList[i].spread = msg.spread;
|
||||||
|
that.quotationList[i].change = msg.change;
|
||||||
|
that.quotationList[i].volume = msg.volume;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//币种切换
|
||||||
|
quota_shift(idx, id, legal_name, currency_name, currency_id, change, shareNum, logo) {
|
||||||
|
window.localStorage.setItem("downUp", change);
|
||||||
|
window.localStorage.setItem("legal_id_cur", currency_id);
|
||||||
|
|
||||||
|
window.localStorage.setItem("index1", this.index1);
|
||||||
|
window.localStorage.setItem("index2", idx);
|
||||||
|
window.localStorage.setItem("shareNum", shareNum);
|
||||||
|
window.localStorage.setItem("bzlogo", logo);
|
||||||
|
this.ids = idx;
|
||||||
|
var tradeDatas = {
|
||||||
|
currency_id: currency_id,
|
||||||
|
legal_id: id,
|
||||||
|
currency_name: currency_name,
|
||||||
|
leg_name: legal_name
|
||||||
|
};
|
||||||
|
window.localStorage.setItem("legal_id", id);
|
||||||
|
window.localStorage.setItem("currency_id", currency_id);
|
||||||
|
window.localStorage.setItem("legal_name", legal_name);
|
||||||
|
window.localStorage.setItem("currency_name", currency_name);
|
||||||
|
var symbol = currency_name + "/" + legal_name;
|
||||||
|
window.localStorage.setItem("symbol", symbol);
|
||||||
|
location.reload();
|
||||||
|
//向兄弟组件传数据
|
||||||
|
// eventBus.$emit('toTrade',tradeDatas);
|
||||||
|
// eventBus.$emit('toExchange',tradeDatas)
|
||||||
|
},
|
||||||
|
|
||||||
|
//socket连接封装
|
||||||
|
socket(token) {
|
||||||
|
var that = this;
|
||||||
|
//console.log("socket");
|
||||||
|
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||||
|
that.sockets.subscribe("kline", msg => {
|
||||||
|
if (msg.type == 'kline' && msg.period == '1min') {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 0; i < that.marketList.length; i++) {
|
||||||
|
if (that.marketList[i].legal_id == msg.legal_id && that.marketList[i]
|
||||||
|
.currency_id == msg.currency_id) {
|
||||||
|
// console.log('旧数据',that.quotationList[i].now_price)
|
||||||
|
// console.log('wss新数据',msg.now_price)
|
||||||
|
// console.log('------------------------')
|
||||||
|
that.marketList[i].now_price = msg.close;
|
||||||
|
// that.quotationList[i].change = msg.change;
|
||||||
|
// that.marketList[i].change = (((msg.close - msg.open) / msg.open) * 100).toFixed(2);
|
||||||
|
// that.marketList[i].volume = msg.volume;
|
||||||
|
// that.marketList[i].high = msg.high;
|
||||||
|
// that.marketList[i].low = msg.low;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
that.sockets.subscribe("daymarket", msg => {
|
||||||
|
if (msg.type == "daymarket") {
|
||||||
|
for (var i = 0; i < that.marketList.length; i++) {
|
||||||
|
if (that.marketList[i].legal_id == msg.legal_id && that.marketList[i]
|
||||||
|
.currency_id == msg.currency_id) {
|
||||||
|
that.marketList[i].change = msg.change;
|
||||||
|
that.marketList[i].volume = msg.volume * 15;
|
||||||
|
that.marketList[i].high = msg.high;
|
||||||
|
that.marketList[i].low = msg.low;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.m_title {
|
||||||
|
height: 55px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
line-height: 25px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sadfs {}
|
||||||
|
|
||||||
|
.m_search input {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #52688c;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_search{position: absolute;width: 146px;right: 20px;top: -4px;height: 26px;border-radius: 3px;padding: 4px 8px 4px 0;} */
|
||||||
|
/* .m_search input{position: absolute;left: 0;top: 10px;z-index: 2;width: 100%;padding: 5px 40px 5px 8px;height: 26px;border-radius: 3px;background: transparent;border: 1px solid #52688c;} */
|
||||||
|
.m_search img {
|
||||||
|
width: 16px;
|
||||||
|
height: 15px;
|
||||||
|
position: absolute;
|
||||||
|
right: 35px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 123;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_filter{padding: 10px 0 15px;} */
|
||||||
|
.m_filter {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle {
|
||||||
|
padding: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle span {
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title div {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
color: #637085;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title img {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px auto;
|
||||||
|
border-bottom: 1px solid rgb(48, 59, 75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap {
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li {
|
||||||
|
height: 39.2px;
|
||||||
|
line-height: 39.2px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span {
|
||||||
|
display: block;
|
||||||
|
// width: 33%;
|
||||||
|
// float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span:last-child {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title {
|
||||||
|
div:first-child {
|
||||||
|
text-indent: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency_p {
|
||||||
|
p {
|
||||||
|
span:first-child {
|
||||||
|
text-align: left;
|
||||||
|
text-indent: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .coin-wrap li:nth-child(odd){background-color: #181b2a;} */
|
||||||
|
.green {
|
||||||
|
color: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_p {
|
||||||
|
background-color: #2b3648;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p:hover {
|
||||||
|
|
||||||
|
background: rgba(0, 164, 261, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sdgvs {
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cscs {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-sdwa {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hq-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asd-logo {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .dr-s {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .dr-x {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .green2 {
|
||||||
|
color: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fghf {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qklx {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssk {
|
||||||
|
padding: 20px 30px 10px;
|
||||||
|
color: #fff;
|
||||||
|
// height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-box {
|
||||||
|
padding: 0 30px;
|
||||||
|
border-bottom: 1px solid #232437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.market ::v-deep {
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
|
||||||
|
height: 1px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbs2 {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条轨道样式 */
|
||||||
|
.tbs2::-webkit-scrollbar {
|
||||||
|
// width: 2px; /* 设置滚动条宽度 */
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条滑块样式 */
|
||||||
|
.tbs2::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #888;
|
||||||
|
/* 设置滑块背景颜色 */
|
||||||
|
border-radius: 4px;
|
||||||
|
/* 设置滑块圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb2itme {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #888;
|
||||||
|
background-color: unset;
|
||||||
|
margin-right: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb2itmeAvtive {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.sdgvs {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
.coin-wrap li {
|
||||||
|
|
||||||
|
color: #ced0d4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,785 @@
|
|||||||
|
<template>
|
||||||
|
<div class="market" style="height: 100%">
|
||||||
|
<div class="ssk">
|
||||||
|
<el-input
|
||||||
|
:placeholder="$t('zjde152')"
|
||||||
|
@input="inputChange"
|
||||||
|
size="small"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
v-model="sousuo"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cm-tabs-group">
|
||||||
|
<span
|
||||||
|
class="cm-tab"
|
||||||
|
:class="{ 'active-btn-bg': cmtabsCurrent == item.id }"
|
||||||
|
v-for="(item, index) in cmtabs"
|
||||||
|
@click="cmTab(item.id)"
|
||||||
|
:key="index"
|
||||||
|
>{{ item.pcname }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="tabs-box">
|
||||||
|
<el-tabs v-model="tabsName" @tab-click="handleClick">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-tab-pane v-for="(item,index) in tabsList" :label="item.text" :name="item.type"></el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="tbs2">
|
||||||
|
<div class="tb2itme" :class="{'tb2itmeAvtive':tabsName2==item.type}" v-for="(item,index) in tabsList2[tabsName]"
|
||||||
|
@click="handleClick2(item.type)">{{item.text}}</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="m_filter">
|
||||||
|
<div class="tabtitle fColor1 ft14 curPer flex">
|
||||||
|
<!-- <span>JNB</span>
|
||||||
|
<span>JNB</span>-->
|
||||||
|
<!-- <span v-for="(tab,index) in tabList " :key="index" :class="index==index1?'active':''" @click="changeType(index,tab.name,tab.id)">{{tab.name}}</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="coin-title clear" v-if="false">
|
||||||
|
<div>
|
||||||
|
<span style="color: #00a4d8">{{ $t("market.currency") }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t("market.lastprice") }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t("market.change") }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="line"></div> -->
|
||||||
|
<div class="coin-wrap scroll sdgvs" style="height: 90%; overflow: auto; color: #fff">
|
||||||
|
<!-- :class="index==index2?'active_p':''" -->
|
||||||
|
<!-- <li class="currency_p" v-for="(item,index) in marketList " :key="index"
|
||||||
|
@click="quota_shift(index,item.legal_id,item.legal_name,item.currency_name,item.currency_id,item.change,item.lever_share_num)"
|
||||||
|
v-if="item.is_display == 1" v-show="item.currency_name!='USDC'">
|
||||||
|
<div style="white-space: nowrap; display: flex; justify-content: space-between; padding-right: 2rem;">
|
||||||
|
|
||||||
|
<div class="cscs">
|
||||||
|
<img :src="$utils.isBaseUrl(item.logo)" style="width: 24px; height: 24px;">
|
||||||
|
<div class="c-sdwa">
|
||||||
|
<span>{{ item.currency_name }} / USDC
|
||||||
|
|
||||||
|
<img src="@/assets/116.png" />
|
||||||
|
</span>
|
||||||
|
<span>{{ item.type }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span>{{ item.now_price|toFixedN(4) }}</span>
|
||||||
|
<span
|
||||||
|
:class="{'green':item.change>=0,'red':item.change<0}">{{ (item.change - 0).toFixed(2) }}%</span>
|
||||||
|
</div>
|
||||||
|
</li> -->
|
||||||
|
<div
|
||||||
|
class="hq-item"
|
||||||
|
v-for="(item, index) in cmtabsCurrent == 100 ? intersection : quotationList"
|
||||||
|
:key="index"
|
||||||
|
@click="
|
||||||
|
goTrade(
|
||||||
|
item.legal_id,
|
||||||
|
item.currency_id,
|
||||||
|
item.legal_name,
|
||||||
|
item.currency_name,
|
||||||
|
item.now_price,
|
||||||
|
item.change,
|
||||||
|
item.volume,
|
||||||
|
item.cny_price,
|
||||||
|
item.logo,
|
||||||
|
item.id
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div @click.stop="addZX(item, iszx(item.currency_id))">
|
||||||
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
:style="{ color: iszx(item.currency_id) ? '#f0c163' : '' }"
|
||||||
|
style="font-size: 16px"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
<div class="cscs">
|
||||||
|
<img :src="$utils.isBaseUrl(item.logo)" class="asd-logo" />
|
||||||
|
<div class="c-sdwa">
|
||||||
|
<div class="fghf">
|
||||||
|
{{ item.currency_name }} / USDC
|
||||||
|
|
||||||
|
<img class="qklx-img" src="@/assets/116.png" />
|
||||||
|
</div>
|
||||||
|
<div class="qklx">{{ item.type }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dsd-right">
|
||||||
|
<span class="dr-s">{{ item.now_price | toFixedN(4) }}</span>
|
||||||
|
<span class="dr-x" :class="{ green2: item.change >= 0 }"
|
||||||
|
>{{ (item.change - 0).toFixed(2) }}%</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "market",
|
||||||
|
filters: {
|
||||||
|
numFilters: function (value, num) {
|
||||||
|
if (!value) {
|
||||||
|
return "0.0000";
|
||||||
|
}
|
||||||
|
value = (value - 0).toFixed(parseInt(num)).toString();
|
||||||
|
return value.slice(0) + " ";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rlist: [
|
||||||
|
{
|
||||||
|
title: this.$t("zjde60"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$t("zjde61"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tindex: 1,
|
||||||
|
sousuo: "",
|
||||||
|
dqIndex: 0,
|
||||||
|
hot: [],
|
||||||
|
increase: [],
|
||||||
|
quotation: [],
|
||||||
|
quotation2: [],
|
||||||
|
loginFlag: false,
|
||||||
|
lang: "en",
|
||||||
|
price: 12312.22,
|
||||||
|
share_bit: 121325.55,
|
||||||
|
share_ethereum: 12318978.77,
|
||||||
|
trade: 318978.77,
|
||||||
|
night_mode: 0,
|
||||||
|
intersection: [],
|
||||||
|
zix: [],
|
||||||
|
cmtabs: [],
|
||||||
|
cmtabsCurrent: 0,
|
||||||
|
quotationList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.night_mode = localStorage.getItem("night_mode") || 0;
|
||||||
|
this.lang = window.localStorage.getItem("lang");
|
||||||
|
|
||||||
|
let t = localStorage.getItem("token");
|
||||||
|
t && (this.loginFlag = true);
|
||||||
|
|
||||||
|
this.getMarket();
|
||||||
|
this.getRange();
|
||||||
|
this.getQuotation();
|
||||||
|
this.connect();
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
// mounted() {
|
||||||
|
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
cmTab(index) {
|
||||||
|
this.cmtabsCurrent = index;
|
||||||
|
if (index != 100) {
|
||||||
|
this.getList2();
|
||||||
|
}
|
||||||
|
window.localStorage.setItem("cmtabsCurrent", index);
|
||||||
|
},
|
||||||
|
getMarket() {
|
||||||
|
let duizhao = {
|
||||||
|
外汇: this.$t("homeContent.外汇"),
|
||||||
|
美股: this.$t("homeContent.美股"),
|
||||||
|
期货: this.$t("homeContent.期货"),
|
||||||
|
数字货币: this.$t("homeContent.数字货币"),
|
||||||
|
};
|
||||||
|
this.$http({
|
||||||
|
url: "/api/currency/bclass",
|
||||||
|
method: "get",
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.data.code == 1) {
|
||||||
|
var data = res.data.data;
|
||||||
|
data = data.filter((item) => item.pcname === "数字货币");
|
||||||
|
for (const item of data) {
|
||||||
|
const { pcname = "" } = item;
|
||||||
|
if (duizhao[pcname]) {
|
||||||
|
item["pcname"] = duizhao[pcname];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.cmtabs = data;
|
||||||
|
let cmtabsCurrent = window.localStorage.getItem("cmtabsCurrent");
|
||||||
|
const validIds = this.cmtabs.map((i) => String(i.id));
|
||||||
|
if (cmtabsCurrent && validIds.includes(String(cmtabsCurrent))) {
|
||||||
|
this.cmtabsCurrent = cmtabsCurrent;
|
||||||
|
} else if (this.cmtabs.length > 0) {
|
||||||
|
this.cmtabsCurrent = this.cmtabs[0].id;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getList2();
|
||||||
|
|
||||||
|
// console.log('data23454',data)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getList2() {
|
||||||
|
layer.load();
|
||||||
|
this.$http({
|
||||||
|
url: `/api/currency/quotation_huang?is_class=${this.cmtabsCurrent}`,
|
||||||
|
method: "get",
|
||||||
|
}).then((res) => {
|
||||||
|
let quotation = res.data.message[0].quotation;
|
||||||
|
this.quotationList = [...quotation];
|
||||||
|
//todo
|
||||||
|
this.$mitt.$emit("currenyChange", quotation);
|
||||||
|
layer.closeAll();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
iszx(id) {
|
||||||
|
if (this.intersection.length == 0) return false;
|
||||||
|
let zss = this.intersection.filter((item) => item.currency_id == id);
|
||||||
|
|
||||||
|
return zss.length ? true : false;
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$http({
|
||||||
|
url: `/api/optional/list`,
|
||||||
|
method: "get",
|
||||||
|
headers: {
|
||||||
|
Authorization: localStorage.getItem("token") || "",
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
|
// console.log('自选', res.data.message)
|
||||||
|
this.zix = res.data.message;
|
||||||
|
let intersection = [];
|
||||||
|
|
||||||
|
this.quotation2.forEach((obj1) => {
|
||||||
|
let obj2 = res.data.message.find((obj) => obj.currency_id === obj1.currency_id);
|
||||||
|
if (obj2) {
|
||||||
|
intersection.push(obj1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// console.log('intersection', intersection)
|
||||||
|
this.intersection = intersection;
|
||||||
|
|
||||||
|
// this.orderList = res.data.message.order_list
|
||||||
|
// this.dataList = res.data.message
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addZX(item, flas) {
|
||||||
|
// this.$http.post("api/optional/add", {
|
||||||
|
// currency_id: item.currency_id,
|
||||||
|
// Authorization: localStorage.getItem("token") || ""
|
||||||
|
|
||||||
|
// }).then(res => {
|
||||||
|
// if (res.data.type == "ok") {
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
// // layer.msg(res.message);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
console.log("flas", flas);
|
||||||
|
layer.load();
|
||||||
|
if (flas) {
|
||||||
|
this.$http({
|
||||||
|
url: `/api/optional/del`,
|
||||||
|
method: "post",
|
||||||
|
data: {
|
||||||
|
id: this.zix.filter((val) => val.currency_id == item.currency_id)[0].id,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
Authorization: localStorage.getItem("token") || "",
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
|
layer.closeAll();
|
||||||
|
this.getList();
|
||||||
|
// this.orderList = res.data.message.order_list
|
||||||
|
// this.dataList = res.data.message
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$http({
|
||||||
|
url: `/api/optional/add`,
|
||||||
|
method: "post",
|
||||||
|
data: {
|
||||||
|
currency_id: item.currency_id,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
Authorization: localStorage.getItem("token") || "",
|
||||||
|
},
|
||||||
|
}).then((res) => {
|
||||||
|
layer.closeAll();
|
||||||
|
this.getList();
|
||||||
|
// this.orderList = res.data.message.order_list
|
||||||
|
// this.dataList = res.data.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zfdf(index) {
|
||||||
|
this.tindex = index;
|
||||||
|
},
|
||||||
|
inputChange(e) {
|
||||||
|
// .indexOf(e) != -1
|
||||||
|
if (e) {
|
||||||
|
let data = this.quotation2.filter((item) => item.currency_name.includes(e));
|
||||||
|
this.quotationList = data;
|
||||||
|
} else {
|
||||||
|
this.quotationList = this.quotation2;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getQuotation() {
|
||||||
|
const that = this;
|
||||||
|
this.$http.get("api/currency/quotation_new", {}).then((res) => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
that.quotation = res.data.message[0].quotation;
|
||||||
|
that.quotation2 = res.data.message[0].quotation;
|
||||||
|
this.getList();
|
||||||
|
} else {
|
||||||
|
// layer.msg(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getRange() {
|
||||||
|
const that = this;
|
||||||
|
this.$http.get("api/currency/rangeNew", {}).then((res) => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
that.hot = res.data.message.hot;
|
||||||
|
that.increase = res.data.message.increase;
|
||||||
|
} else {
|
||||||
|
// layer.msg(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//去币币交易页
|
||||||
|
goTrade(
|
||||||
|
l_id,
|
||||||
|
c_id,
|
||||||
|
l_name,
|
||||||
|
c_name,
|
||||||
|
now_price,
|
||||||
|
change,
|
||||||
|
volume,
|
||||||
|
cny_price,
|
||||||
|
logo,
|
||||||
|
leverTradeId
|
||||||
|
) {
|
||||||
|
console.log(
|
||||||
|
"111",
|
||||||
|
l_id,
|
||||||
|
c_id,
|
||||||
|
l_name,
|
||||||
|
c_name,
|
||||||
|
now_price,
|
||||||
|
change,
|
||||||
|
volume,
|
||||||
|
cny_price,
|
||||||
|
logo,
|
||||||
|
leverTradeId
|
||||||
|
);
|
||||||
|
window.localStorage.setItem("currency_id", c_id);
|
||||||
|
window.localStorage.setItem("legal_id", l_id);
|
||||||
|
window.localStorage.setItem("currency_name", c_name);
|
||||||
|
window.localStorage.setItem("legal_name", l_name);
|
||||||
|
window.localStorage.setItem("symbol", c_name + "/" + l_name);
|
||||||
|
window.localStorage.setItem("bzlogo", logo);
|
||||||
|
window.localStorage.setItem("leverTradeId", leverTradeId);
|
||||||
|
window.localStorage.setItem("cmtabsCurrent", this.cmtabsCurrent);
|
||||||
|
// console.log('logo',logo)
|
||||||
|
// this.$router.push('/leverdealCenter')
|
||||||
|
location.reload();
|
||||||
|
},
|
||||||
|
connect() {
|
||||||
|
var that = this;
|
||||||
|
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||||
|
that.sockets.subscribe("kline", (msg) => {
|
||||||
|
// console.log(msg.type);
|
||||||
|
if (msg.type == "kline" && msg.period == "1min") {
|
||||||
|
for (var i = 0; i < that.quotationList.length; i++) {
|
||||||
|
if (
|
||||||
|
that.quotationList[i].legal_id == msg.legal_id &&
|
||||||
|
that.quotationList[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.quotationList[i].now_price = msg.close * 1;
|
||||||
|
// that.quotation[i].change = (((msg.close - msg.open) / msg.open) * 100).toFixed(2)
|
||||||
|
// that.quotation[i].volume = msg.volume * 1;
|
||||||
|
// that.quotation[i].high = msg.high * 1;
|
||||||
|
// that.quotation[i].low = msg.low * 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < that.hot.length; i++) {
|
||||||
|
if (
|
||||||
|
that.hot[i].legal_id == msg.legal_id &&
|
||||||
|
that.hot[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.hot[i].now_price = msg.close * 1;
|
||||||
|
// that.quotation[i].change = (((msg.close - msg.open) / msg.open) * 100).toFixed(2)
|
||||||
|
// that.quotation[i].volume = msg.volume * 1;
|
||||||
|
// that.quotation[i].high = msg.high * 1;
|
||||||
|
// that.quotation[i].low = msg.low * 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < that.increase.length; i++) {
|
||||||
|
if (
|
||||||
|
that.increase[i].legal_id == msg.legal_id &&
|
||||||
|
that.increase[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.increase[i].now_price = msg.close * 1;
|
||||||
|
// that.quotation[i].change = (((msg.close - msg.open) / msg.open) * 100).toFixed(2)
|
||||||
|
// that.quotation[i].volume = msg.volume * 1;
|
||||||
|
// that.quotation[i].high = msg.high * 1;
|
||||||
|
// that.quotation[i].low = msg.low * 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.sockets.subscribe("daymarket", (msg) => {
|
||||||
|
if (msg.type == "daymarket") {
|
||||||
|
for (var i = 0; i < that.quotationList.length; i++) {
|
||||||
|
if (
|
||||||
|
that.quotationList[i].legal_id == msg.legal_id &&
|
||||||
|
that.quotationList[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.quotationList[i].volume = msg.volume * 15;
|
||||||
|
that.quotationList[i].high = msg.high * 1;
|
||||||
|
that.quotationList[i].low = msg.low * 1;
|
||||||
|
that.quotationList[i].change = msg.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < that.hot.length; i++) {
|
||||||
|
if (
|
||||||
|
that.hot[i].legal_id == msg.legal_id &&
|
||||||
|
that.hot[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.hot[i].volume = msg.volume * 15;
|
||||||
|
that.hot[i].high = msg.high * 1;
|
||||||
|
that.hot[i].low = msg.low * 1;
|
||||||
|
that.hot[i].change = msg.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var i = 0; i < that.increase.length; i++) {
|
||||||
|
if (
|
||||||
|
that.increase[i].legal_id == msg.legal_id &&
|
||||||
|
that.increase[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.increase[i].volume = msg.volume * 15;
|
||||||
|
that.increase[i].high = msg.high * 1;
|
||||||
|
that.increase[i].low = msg.low * 1;
|
||||||
|
that.increase[i].change = msg.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.m_title {
|
||||||
|
height: 55px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
line-height: 25px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sadfs {
|
||||||
|
}
|
||||||
|
|
||||||
|
.m_search input {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #52688c;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_search{position: absolute;width: 146px;right: 20px;top: -4px;height: 26px;border-radius: 3px;padding: 4px 8px 4px 0;} */
|
||||||
|
/* .m_search input{position: absolute;left: 0;top: 10px;z-index: 2;width: 100%;padding: 5px 40px 5px 8px;height: 26px;border-radius: 3px;background: transparent;border: 1px solid #52688c;} */
|
||||||
|
.m_search img {
|
||||||
|
width: 16px;
|
||||||
|
height: 15px;
|
||||||
|
position: absolute;
|
||||||
|
right: 35px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 123;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_filter{padding: 10px 0 15px;} */
|
||||||
|
.m_filter {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle {
|
||||||
|
padding: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle span {
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title div {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
color: #637085;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title img {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px auto;
|
||||||
|
border-bottom: 1px solid rgb(48, 59, 75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap {
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li {
|
||||||
|
height: 39.2px;
|
||||||
|
line-height: 39.2px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span {
|
||||||
|
display: block;
|
||||||
|
// width: 33%;
|
||||||
|
// float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span:last-child {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title {
|
||||||
|
div:first-child {
|
||||||
|
text-indent: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.currency_p {
|
||||||
|
p {
|
||||||
|
span:first-child {
|
||||||
|
text-align: left;
|
||||||
|
text-indent: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .coin-wrap li:nth-child(odd){background-color: #181b2a;} */
|
||||||
|
.green {
|
||||||
|
color: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_p {
|
||||||
|
background-color: #2b3648;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p:hover {
|
||||||
|
background: rgba(0, 164, 261, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sdgvs {
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cscs {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-sdwa {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hq-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asd-logo {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .dr-s {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .dr-x {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsd-right .green2 {
|
||||||
|
color: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fghf {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qklx {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ssk {
|
||||||
|
padding: 20px 30px 10px;
|
||||||
|
color: #fff;
|
||||||
|
// height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-box {
|
||||||
|
padding: 0 30px;
|
||||||
|
border-bottom: 1px solid #232437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.market ::v-deep {
|
||||||
|
.el-input__inner {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__active-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbs2 {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条轨道样式 */
|
||||||
|
.tbs2::-webkit-scrollbar {
|
||||||
|
// width: 2px; /* 设置滚动条宽度 */
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条滑块样式 */
|
||||||
|
.tbs2::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #888;
|
||||||
|
/* 设置滑块背景颜色 */
|
||||||
|
border-radius: 4px;
|
||||||
|
/* 设置滑块圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb2itme {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #888;
|
||||||
|
background-color: unset;
|
||||||
|
margin-right: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb2itmeAvtive {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-tabs-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #31323f;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-tabs-group::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
width: 10px;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-tabs-group::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #666;
|
||||||
|
border-radius: 10px;
|
||||||
|
min-width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cm-tab {
|
||||||
|
height: 39px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2px 8px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-btn-bg {
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.sdgvs {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
.coin-wrap li {
|
||||||
|
color: #ced0d4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,416 @@
|
|||||||
|
<template>
|
||||||
|
<div class="market" style="height: 100%;">
|
||||||
|
<div class="m_filter">
|
||||||
|
<div class="tabtitle fColor1 ft14 curPer flex">
|
||||||
|
<!-- <span>JNB</span>
|
||||||
|
<span>JNB</span>-->
|
||||||
|
<!-- <span v-for="(tab,index) in tabList " :key="index" :class="index==index1?'active':''" @click="changeType(index,tab.name,tab.id)">{{tab.name}}</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="coin-title clear">
|
||||||
|
<div>
|
||||||
|
<span style="color:#00a4d8;">{{ $t('market.currency') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('market.lastprice') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('market.change') }}</span>
|
||||||
|
<!--<img src="../assets/images/select0.png" alt>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<ul class="coin-wrap scroll" style="height: 90%; overflow: auto; padding-bottom: 100px;">
|
||||||
|
<li
|
||||||
|
class="currency_p"
|
||||||
|
v-for="(item,index) in marketList "
|
||||||
|
:class="index==index2?'active_p':''"
|
||||||
|
:key="index"
|
||||||
|
@click="quota_shift(index,item.legal_id,item.legal_name,item.currency_name,item.currency_id,item.change,item.lever_share_num)"
|
||||||
|
v-if="item.is_display == 1">
|
||||||
|
<p>
|
||||||
|
<span>{{ item.currency_name }}</span>
|
||||||
|
<span>{{ item.now_price|toFixedN(4) }}</span>
|
||||||
|
<span :class="{'green':item.change>=0,'red':item.change<0}">{{ (item.change - 0).toFixed(2) }}%</span>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "market",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ids: 0,
|
||||||
|
isShow: 0,
|
||||||
|
tabList: [],
|
||||||
|
marketList: [],
|
||||||
|
newData: ["MTS", "$0.076128", "-1.11%"],
|
||||||
|
legal_index: this.$route.params.legal_index,
|
||||||
|
currency_index: this.$route.params.currency_index,
|
||||||
|
tradeDatas: "",
|
||||||
|
index2: 0,
|
||||||
|
index1: 0,
|
||||||
|
dataList: [],
|
||||||
|
selectedId: "",
|
||||||
|
shareNum: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
toFixedN(val, n) {
|
||||||
|
return (val - 0).toFixed(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.socket(localStorage.getItem("token"));
|
||||||
|
let that = this;
|
||||||
|
//法币列表
|
||||||
|
this.$http({
|
||||||
|
url: "/api/" + "currency/quotation_new",
|
||||||
|
method: "get",
|
||||||
|
data: {},
|
||||||
|
headers: {Authorization: localStorage.getItem("token")}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
that.tabList = res.data.message;
|
||||||
|
var msg = res.data.message;
|
||||||
|
var arr_quota = [];
|
||||||
|
let index = 0;
|
||||||
|
let indexs = 0;
|
||||||
|
if (!localStorage.getItem("index1")) {
|
||||||
|
index = that.index1;
|
||||||
|
} else {
|
||||||
|
index = localStorage.getItem("index1");
|
||||||
|
that.index1 = localStorage.getItem("index1");
|
||||||
|
}
|
||||||
|
if (!localStorage.getItem("index2")) {
|
||||||
|
indexs = that.index2;
|
||||||
|
} else {
|
||||||
|
indexs = localStorage.getItem("index2");
|
||||||
|
that.index2 = localStorage.getItem("index2");
|
||||||
|
}
|
||||||
|
that.marketList = res.data.message[index].quotation;
|
||||||
|
that.selectedId = res.data.message[index].quotation[that.index2].legal_id;
|
||||||
|
that.dataList = res.data.message;
|
||||||
|
that.shareNum = res.data.message[index].quotation[that.index2].lever_share_num;
|
||||||
|
window.localStorage.setItem("shareNum", that.shareNum);
|
||||||
|
//默认法币id和name
|
||||||
|
if (!localStorage.getItem("legal_id") && !localStorage.getItem("currency_id") && !localStorage.getItem("legal_name") && !localStorage.getItem("currency_name")) {
|
||||||
|
that.currency_name = msg[index].quotation[indexs].currency_name;
|
||||||
|
that.currency_id = msg[index].quotation[indexs].currency_id;
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"currency_name",
|
||||||
|
msg[index].quotation[indexs].currency_name
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"legal_id",
|
||||||
|
msg[index].quotation[indexs].legal_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"currency_id",
|
||||||
|
msg[index].quotation[indexs].currency_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_currency_name",
|
||||||
|
msg[index].quotation[indexs].currency_name
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_legal_id",
|
||||||
|
msg[index].quotation[indexs].legal_id
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
"lever_currency_id",
|
||||||
|
msg[index].quotation[indexs].currency_id
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
that.currency_name = window.localStorage.getItem("currency_name");
|
||||||
|
that.currency_id = window.localStorage.getItem("currency_id");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
if (
|
||||||
|
window.localStorage.getItem("index2") &&
|
||||||
|
window.localStorage.getItem("index1")
|
||||||
|
) {
|
||||||
|
this.index2 = window.localStorage.getItem("index2");
|
||||||
|
this.index1 = window.localStorage.getItem("index1");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
var that = this;
|
||||||
|
eventBus.$on("toNew", function (data) {
|
||||||
|
// console.log(data);
|
||||||
|
if (data) {
|
||||||
|
var newprice = data.newprice;
|
||||||
|
var cname = data.istoken;
|
||||||
|
var newup = Number(data.newup).toFixed(2);
|
||||||
|
// console.log(newup)
|
||||||
|
if (newup >= 0) {
|
||||||
|
newup = "+" + Number(newup).toFixed(2) + "%";
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.next()
|
||||||
|
.css("color", "#55a067");
|
||||||
|
} else {
|
||||||
|
newup = newup + "%";
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.next()
|
||||||
|
.css("color", "#cc4951");
|
||||||
|
}
|
||||||
|
$("span[data-name='" + cname + "']")
|
||||||
|
.html("$" + newprice)
|
||||||
|
.next()
|
||||||
|
.html(newup);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventBus.$on('updateDaymarkey', res => {
|
||||||
|
|
||||||
|
// console.log(res,'接受到更新数据');
|
||||||
|
if (res !== undefined && res.currency_id !== undefined) {
|
||||||
|
for (let i = 0; i < that.marketList.length; i++) {
|
||||||
|
if (that.marketList[i] == undefined) {
|
||||||
|
console.log(i);
|
||||||
|
} else {
|
||||||
|
if (that.marketList[i].currency_id == res.currency_id && res.legal_id==3) {
|
||||||
|
that.marketList[i].now_price = res.close;
|
||||||
|
that.marketList[i].change = res.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('没有的', res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.marketSocket();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeType(index, currency, currency_id) {
|
||||||
|
this.index1 = index;
|
||||||
|
this.index2 = null;
|
||||||
|
$(".currency_p p").removeClass("active_p");
|
||||||
|
|
||||||
|
this.isShow = index;
|
||||||
|
this.ids = "a";
|
||||||
|
// this.currency_name = currency;
|
||||||
|
// this.currency_id = currency_id;
|
||||||
|
this.marketList = this.dataList[index].quotation;
|
||||||
|
},
|
||||||
|
getSymbols(callback) {
|
||||||
|
if (this.address.length <= 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$http({
|
||||||
|
url: "/api/" + "wallet/list?user_id=" + this.address || "",
|
||||||
|
type: "GET"
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.data.type == "ok") {
|
||||||
|
this.accountInfo = res.data.message;
|
||||||
|
this.dataList = res.data.message.list;
|
||||||
|
|
||||||
|
callback && callback();
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
return error;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
marketSocket() {
|
||||||
|
var that = this;
|
||||||
|
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||||
|
that.sockets.subscribe("daymarket", msg => {
|
||||||
|
if (msg.type == "daymarket") {
|
||||||
|
for (var i = 0; i < that.quotationList.length; i++) {
|
||||||
|
if (
|
||||||
|
that.quotationList[i].legal_id == msg.legal_id &&
|
||||||
|
that.quotationList[i].currency_id == msg.currency_id
|
||||||
|
) {
|
||||||
|
that.quotationList[i].now_price = msg.now_price;
|
||||||
|
// that.quotationList[i].spread = msg.spread;
|
||||||
|
that.quotationList[i].change = msg.change;
|
||||||
|
that.quotationList[i].volume = msg.volume;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//币种切换
|
||||||
|
quota_shift(idx, id, legal_name, currency_name, currency_id, change, shareNum) {
|
||||||
|
window.localStorage.setItem("downUp", change);
|
||||||
|
window.localStorage.setItem("legal_id_cur", currency_id);
|
||||||
|
|
||||||
|
window.localStorage.setItem("index1", this.index1);
|
||||||
|
window.localStorage.setItem("index2", idx);
|
||||||
|
window.localStorage.setItem("shareNum", shareNum);
|
||||||
|
this.ids = idx;
|
||||||
|
var tradeDatas = {
|
||||||
|
currency_id: currency_id,
|
||||||
|
legal_id: id,
|
||||||
|
currency_name: currency_name,
|
||||||
|
leg_name: legal_name
|
||||||
|
};
|
||||||
|
window.localStorage.setItem("legal_id", id);
|
||||||
|
window.localStorage.setItem("currency_id", currency_id);
|
||||||
|
window.localStorage.setItem("legal_name", legal_name);
|
||||||
|
window.localStorage.setItem("currency_name", currency_name);
|
||||||
|
var symbol = currency_name + "/" + legal_name;
|
||||||
|
window.localStorage.setItem("symbol", symbol);
|
||||||
|
location.reload();
|
||||||
|
//向兄弟组件传数据
|
||||||
|
// eventBus.$emit('toTrade',tradeDatas);
|
||||||
|
// eventBus.$emit('toExchange',tradeDatas)
|
||||||
|
},
|
||||||
|
|
||||||
|
//socket连接封装
|
||||||
|
socket(token) {
|
||||||
|
var that = this;
|
||||||
|
//console.log("socket");
|
||||||
|
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||||
|
that.$socket.on("daymarket", msg => {
|
||||||
|
if (msg.type == "daymarket") {
|
||||||
|
if (that.selectedId && that.selectedId == msg.legal_id) {
|
||||||
|
let lists = that.marketList;
|
||||||
|
for (let i in lists) {
|
||||||
|
if (lists[i].currency_id == msg.currency_id) {
|
||||||
|
that.marketList[i].volume = msg.volume;
|
||||||
|
that.marketList[i].now_price = msg.now_price;
|
||||||
|
that.marketList[i].change = msg.change;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.m_title {
|
||||||
|
height: 55px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
line-height: 25px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m_search input {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #52688c;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_search{position: absolute;width: 146px;right: 20px;top: -4px;height: 26px;border-radius: 3px;padding: 4px 8px 4px 0;} */
|
||||||
|
/* .m_search input{position: absolute;left: 0;top: 10px;z-index: 2;width: 100%;padding: 5px 40px 5px 8px;height: 26px;border-radius: 3px;background: transparent;border: 1px solid #52688c;} */
|
||||||
|
.m_search img {
|
||||||
|
width: 16px;
|
||||||
|
height: 15px;
|
||||||
|
position: absolute;
|
||||||
|
right: 35px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 123;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .m_filter{padding: 10px 0 15px;} */
|
||||||
|
.m_filter {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle {
|
||||||
|
padding: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtitle span {
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title div {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
color: #637085;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title img {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px auto;
|
||||||
|
border-bottom: 1px solid rgb(48, 59, 75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap {
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li {
|
||||||
|
height: 39.2px;
|
||||||
|
line-height: 39.2px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #cdd6e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span {
|
||||||
|
display: block;
|
||||||
|
width: 33%;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li span:last-child {
|
||||||
|
color: #cc4951;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-title{
|
||||||
|
div:first-child{
|
||||||
|
text-indent: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.currency_p{
|
||||||
|
p{
|
||||||
|
span:first-child{
|
||||||
|
text-align: left;
|
||||||
|
text-indent: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .coin-wrap li:nth-child(odd){background-color: #181b2a;} */
|
||||||
|
.coin-wrap li span.green {
|
||||||
|
color: #55a067;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_p {
|
||||||
|
background-color: #2b3648;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-wrap li p:hover {
|
||||||
|
background-color: #2b3648;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -0,0 +1,478 @@
|
|||||||
|
<template>
|
||||||
|
<div class="k-line-area bg-1d1d29">
|
||||||
|
<Handicap ></Handicap>
|
||||||
|
<div class="xh-mian">
|
||||||
|
<div class="x-left" >
|
||||||
|
<tv-top></tv-top>
|
||||||
|
</div>
|
||||||
|
<div class="x-rtght">
|
||||||
|
<div class="xr-head">
|
||||||
|
<div class="xr-l">
|
||||||
|
<div class="kx" >
|
||||||
|
<klineChart></klineChart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="xd">
|
||||||
|
|
||||||
|
<trade :lastPrice="lastPrice" :leverTradeId="leverTradeId"
|
||||||
|
:currencyName="currencyName"></trade>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ss-right">
|
||||||
|
|
||||||
|
<div class="tabs-box">
|
||||||
|
<el-tabs v-model="hlIndex" @tab-click="handleClick">
|
||||||
|
<el-tab-pane v-for="(item,index) in htlist" :label="item.text"
|
||||||
|
:name="item.type"></el-tab-pane>
|
||||||
|
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<!-- <tv-top></tv-top> -->
|
||||||
|
<exchange style="width: 100%;" v-if="hlIndex==0"></exchange>
|
||||||
|
|
||||||
|
<trade2 style="width: 100%;" v-if="hlIndex==1"></trade2>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="order-list">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<transactions :leverTradeId="leverTradeId" v-if="leverTradeId"></transactions>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="new-tb" v-if="false" >
|
||||||
|
<div class="kx" style="display: flex; flex-direction: column;" v-if="hlIndex==3 || pcshow">
|
||||||
|
<div class="by">{{$t('zjde79')}}</div>
|
||||||
|
<div id="tv_chart_container" style="flex: 1;">
|
||||||
|
<klineChart></klineChart>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="subplot-box">
|
||||||
|
<div class="sx-item" :class="{hpAvtive:subplot==item.text}" v-for="(item,index) in subplotList" @click="setSubIndicator(item.text)">{{item.text}}</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="Handicap">
|
||||||
|
<div class="hp-top">
|
||||||
|
<div @click="hlIndex=3" class="ht-i djasdjh" :class="{hpAvtive:hlIndex==3}">{{$t('zjde79')}}</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div @click="zfdf(index)" class="ht-i" v-for="(item,index) in htlist"
|
||||||
|
:class="{hpAvtive:hlIndex==index}">{{item.text}}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<exchange style="width: 100%;" v-if="hlIndex==0"></exchange>
|
||||||
|
|
||||||
|
<trade2 style="width: 100%;" v-if="hlIndex==1"></trade2>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <levertrade style="width: 25rem;"></levertrade> -->
|
||||||
|
<div class="dsads">
|
||||||
|
<trade style="width: 100%;" :lastPrice="lastPrice" :leverTradeId="leverTradeId"
|
||||||
|
:currencyName="currencyName"></trade>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import market from '@/view/market';
|
||||||
|
import exchange from "@/view/lever/lever_exchange";
|
||||||
|
import trade from "@/mhyjy/second-trade";
|
||||||
|
import TvTop from '@/view/tvTop.vue'
|
||||||
|
import trade2 from '@/view/complete';
|
||||||
|
import Handicap from "@/components/Handicap"
|
||||||
|
import klineChart from "@/components/klineChart"
|
||||||
|
import transactions from "@/mhyjy/second_transactions";
|
||||||
|
|
||||||
|
import {
|
||||||
|
init,
|
||||||
|
dispose,
|
||||||
|
indicator,
|
||||||
|
paint,
|
||||||
|
|
||||||
|
} from 'klinecharts'
|
||||||
|
let instance;
|
||||||
|
export default {
|
||||||
|
name: "tv",
|
||||||
|
components: {
|
||||||
|
market,
|
||||||
|
exchange,
|
||||||
|
trade,
|
||||||
|
trade2,
|
||||||
|
Handicap,
|
||||||
|
klineChart,
|
||||||
|
TvTop,
|
||||||
|
transactions
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
leverTradeId: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
toFixedN(val, n) {
|
||||||
|
return (val - 0).toFixed(n);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
htlist: [{
|
||||||
|
text: this.$t('zjde80')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: this.$t('zjde81')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
hlIndex: 0,
|
||||||
|
pcshow: true,
|
||||||
|
showMarketlist: false,
|
||||||
|
widget: null,
|
||||||
|
symbolInfo: null,
|
||||||
|
feed: null,
|
||||||
|
wsEx: null,
|
||||||
|
ws: null,
|
||||||
|
lists: [],
|
||||||
|
newData: '',
|
||||||
|
symbol: '',
|
||||||
|
priceScale: 10000,
|
||||||
|
histime: '',
|
||||||
|
leftName: "",
|
||||||
|
rightName: "",
|
||||||
|
lastPrice: "0.0000",
|
||||||
|
change: '0.00',
|
||||||
|
highPrice: '0.0000',
|
||||||
|
lowPrice: '0.0000',
|
||||||
|
volumn: '0.00',
|
||||||
|
rateNum: 1,
|
||||||
|
loadingK: false,
|
||||||
|
chart: null,
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var curScreenWidth = document.documentElement.clientWidth;
|
||||||
|
if (curScreenWidth < 800) {
|
||||||
|
this.hlIndex = 3
|
||||||
|
} else {
|
||||||
|
this.pcshow = true
|
||||||
|
}
|
||||||
|
this.symbol = window.localStorage.getItem('symbol');
|
||||||
|
|
||||||
|
this.leftName = window.localStorage.getItem("legal_name") || "";
|
||||||
|
this.rightName = window.localStorage.getItem("currency_name") || "";
|
||||||
|
this.currencyId = window.localStorage.getItem("legal_id");
|
||||||
|
this.legalId = window.localStorage.getItem("currency_id");
|
||||||
|
// this.init(this.legalId, this.currencyId);
|
||||||
|
this.downUp = window.localStorage.getItem("downUp");
|
||||||
|
|
||||||
|
},
|
||||||
|
sockets: {},
|
||||||
|
computed: {
|
||||||
|
listenState() { //监听交易对
|
||||||
|
return this.symbol;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
listenState: function(a, b) { //监听交易对
|
||||||
|
if (a != b && b != '') {
|
||||||
|
this.widget.setSymbol(a, localStorage.getItem('tim'), function onReadyCallback() {}) //切换币种
|
||||||
|
// this.$store.state.symbol=b
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
instance = this;
|
||||||
|
// this.createWidget();
|
||||||
|
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.removeWidget();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
handleClick(item) {
|
||||||
|
// console.log('indsd', item.index)
|
||||||
|
// this.tabsName = item.index
|
||||||
|
// this.tabsName2 = '1'
|
||||||
|
this.hlIndex = item.index
|
||||||
|
var curScreenWidth = document.documentElement.clientWidth;
|
||||||
|
if (curScreenWidth < 800) {
|
||||||
|
|
||||||
|
this.pcshow = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
zfdf(index) {
|
||||||
|
this.hlIndex = index
|
||||||
|
var curScreenWidth = document.documentElement.clientWidth;
|
||||||
|
if (curScreenWidth < 800) {
|
||||||
|
|
||||||
|
this.pcshow = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showMarketList() {
|
||||||
|
this.showMarketlist = !0
|
||||||
|
},
|
||||||
|
closeMarketList() {
|
||||||
|
this.showMarketlist = !1
|
||||||
|
},
|
||||||
|
connect(real) { //封装推送数据
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
createWidget() {
|
||||||
|
let _this = this;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
|
||||||
|
this.chart = init('tv_chart_container')
|
||||||
|
this.chart.createIndicator('VOL')
|
||||||
|
|
||||||
|
let to = new Date().getTime()
|
||||||
|
let form = new Date().getTime() - (60 * 1000)
|
||||||
|
this.$http({
|
||||||
|
url: `/api/currency/new_timeshar?from=${form}&to=${to}&symbol=BTC/USDC&period=1min`,
|
||||||
|
method: 'get',
|
||||||
|
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data.data
|
||||||
|
let list = data.map(item => {
|
||||||
|
return {
|
||||||
|
close: item.close,
|
||||||
|
high: item.high,
|
||||||
|
low: item.low,
|
||||||
|
open: item.open,
|
||||||
|
timestamp: item.time,
|
||||||
|
volume: item.volume
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.kList = list
|
||||||
|
this.chart.applyNewData(list)
|
||||||
|
this.updateData2()
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// 为图表添加数据
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setSubIndicator(name) {
|
||||||
|
this.subplot = name
|
||||||
|
this.chart.createIndicator(name)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新数据
|
||||||
|
updateData2() {
|
||||||
|
console.log('触发了', )
|
||||||
|
this.sockets.subscribe('kline', msg => {
|
||||||
|
if (msg.type == 'kline') {
|
||||||
|
if (msg.symbol == localStorage.getItem('symbol')) {
|
||||||
|
|
||||||
|
let data = this.kList[this.kList.length - 1]
|
||||||
|
data.close = msg.close
|
||||||
|
this.chart.updateData(data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
createFeed() {
|
||||||
|
|
||||||
|
},
|
||||||
|
updateData(data) {
|
||||||
|
if (data) {
|
||||||
|
this.$emit('real-time', data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateWidget(item) {
|
||||||
|
|
||||||
|
},
|
||||||
|
removeWidget() {
|
||||||
|
|
||||||
|
},
|
||||||
|
overrides() {}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.info-wrap {
|
||||||
|
// line-height: 50px;
|
||||||
|
padding-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #c7cce6;
|
||||||
|
padding: 0.9rem 0;
|
||||||
|
border: 1px solid #dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrap .bz {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ccc;
|
||||||
|
border-right: 1px solid #dcdcdc;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrap .rmyg {
|
||||||
|
padding: 0 2rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rmyg .jg {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrap div span {
|
||||||
|
// line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asd {
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-tb {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kx {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 0.0625rem solid #2c2c3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.by {
|
||||||
|
color: #333;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-bottom: 0.0625rem solid #2c2c3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Handicap {
|
||||||
|
width: 23rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hp-top {
|
||||||
|
display: flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-bottom: 0.0625rem solid #2c2c3e;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsads {
|
||||||
|
width: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ht-i {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.djasdjh {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.subplot-box {
|
||||||
|
display: flex;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.new-tb {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.xd{
|
||||||
|
|
||||||
|
}
|
||||||
|
.djasdjh {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Handicap {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsads {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kx {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Handicap {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dsads {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.by {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hpAvtive {
|
||||||
|
color: #f0c163;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sx-item {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
.kx {
|
||||||
|
border-right: 0.0625rem solid #2c313e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hp-top,
|
||||||
|
.by {
|
||||||
|
border-color: #2c313e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.by {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user