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