From d25a45190cee44b36296693d5022a0ce9ae9b698 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Wed, 20 Mar 2024 17:19:05 +0800
Subject: [PATCH] 注册页面的客服地址错误
---
src/components/trade-deep-data/index.vue | 481 +++++++++++++++++++++++++++++------------------------
1 files changed, 262 insertions(+), 219 deletions(-)
diff --git a/src/components/trade-deep-data/index.vue b/src/components/trade-deep-data/index.vue
index a765bb5..091255a 100644
--- a/src/components/trade-deep-data/index.vue
+++ b/src/components/trade-deep-data/index.vue
@@ -1,236 +1,279 @@
<template>
- <div class="deep-data">
- <div class="flex justify-between text-grey font-24">
- <div>
- <div>{{ $t('价格') }}</div>
- <div class="mt-5">(USDT)</div>
- </div>
- <div class="text-right items-end justify-end">
- <div class="">{{ $t('数量') }}</div>
- <div class="mt-5">({{ symbol.toUpperCase() || '--' }})</div>
- </div>
- </div>
- <div v-if="showType == 0 || showType == 1" class="flex justify-between pt-6 pb-6 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onPrice(item.price)" :style="{
- 'background': `linear-gradient(to right,${theme == 'dark' ? '#111111' : 'transparent'} 0%` +
- (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
- (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
- }">
- <div class="text-green">{{ item.price || '--' }}</div>
- <div class="text-right textColor" v-if="symbol == 'shib'">{{ fixDate(item.amount, $i18n) || '--' }}</div>
- <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
- </div>
- <div class="text-red pt-16 font-34 font-700 text-center">{{ approximately || '--' }}
- </div>
- <div class="approximately-text pb-10 font-20 text-center">≈{{ price || '--' }}</div>
- <div v-if="showType == 0 || showType == 2" class="flex justify-between pt-6 pb-6 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onPrice(item.price)" :style="{
- 'background': `linear-gradient(to right,${theme == 'dark' ? '#111111' : 'transparent'} 0%` +
- (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
- (item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
- }">
- <div class="text-red ">{{ item.price || '--' }}</div>
- <div class="text-right textColor" v-if="symbol == 'shib'">{{ fixDate(item.amount, $i18n) || '--' }}</div>
- <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
- </div>
+ <div class="deep-data">
+ <div class="flex justify-between text-grey font-24">
+ <div>
+ <div>{{ $t("价格") }}</div>
+ <div class="mt-5">(USDT)</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}</div>
+ <div class="mt-5">({{ symbol.toUpperCase() || "--" }})</div>
+ </div>
</div>
+ <div
+ v-if="showType == 0 || showType == 1"
+ class="flex justify-between pt-8 pb-8 font-26"
+ v-for="(item, index) in greenData"
+ :key="index"
+ @click="onPrice(item.price)"
+ :style="{
+ background:
+ `linear-gradient(to right,${
+ theme == 'dark' ? '#111111' : 'transparent'
+ } 0%` +
+ (item.amount / greenData[greenData.length - 1].amount) * 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (item.amount / greenData[greenData.length - 1].amount) * 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }"
+ >
+ <div class="text-green">{{ item.price || "--" }}</div>
+ <div class="text-right textColor" v-if="symbol == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else>{{ item.amount || "--" }}</div>
+ </div>
+ <div class="pt-30 pb-30">
+ <div class="text-red pt-16 font-34 font-700 text-center">
+ {{ approximately || "--" }}
+ </div>
+ <div class="approximately-text pb-10 font-20 text-center">
+ ≈{{ price || "--" }}
+ </div>
+ </div>
+ <div
+ v-if="showType == 0 || showType == 2"
+ class="flex justify-between pt-8 pb-8 font-26"
+ v-for="(item, index) in redData"
+ :key="item + index"
+ @click="onPrice(item.price)"
+ :style="{
+ background:
+ `linear-gradient(to right,${
+ theme == 'dark' ? '#111111' : 'transparent'
+ } 0%` +
+ (item.amount / greenData[greenData.length - 1].amount) * 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (item.amount / greenData[greenData.length - 1].amount) * 100 +
+ '%,rgba(246,70,93,.1) 100%)',
+ }"
+ >
+ <div class="text-red">{{ item.price || "--" }}</div>
+ <div class="text-right textColor" v-if="symbol == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else>{{ item.amount || "--" }}</div>
+ </div>
+ </div>
</template>
<script>
-import { WS_URL } from '@/config'
-let DEEP_LENGTH = 6
+import { WS_URL } from "@/config";
+let DEEP_LENGTH = 6;
import { fixDate } from "@/utils/utis";
-import { _getHomeList } from '@/API/home.api'
-import { mapGetters } from 'vuex';
+import { _getHomeList } from "@/API/home.api";
+import { mapGetters } from "vuex";
export default {
- name: 'TradeDeepData',
- props: {
- symbol: {
- type: String,
- },
- price: {
- type: String
- },
- showType: {
- type: Number,
- default: 0
- },
- selectValue: {
- type: Number,
- }
+ name: "TradeDeepData",
+ props: {
+ symbol: {
+ type: String,
},
- data() {
- const init = []
- for (let i = 0; i < DEEP_LENGTH; i++) {
- init.push({ amount: '', price: '' })
- }
- return {
- fixDate,
- greenData: init,
- redData: init,
- socket: null,
- approximately: ''
- }
+ price: {
+ type: String,
},
- computed: {
- ...mapGetters({
- theme: 'home/theme'
- }),
+ showType: {
+ type: Number,
+ default: 0,
},
- mounted() {
- // this.startDeepSocket()
- if (this.showType == 1 || this.showType == 2) {
- DEEP_LENGTH = 12
- } else {
- DEEP_LENGTH = 6
- }
- this.getHomeList()
-
+ selectValue: {
+ type: Number,
},
- watch: {
-
- symbol(val) {
- this.startDeepSocket()
- this.getHomeList()
- },
- showType(val) {
- if (val == 1 || val == 2) {
- DEEP_LENGTH = 12
- } else {
- DEEP_LENGTH = 6
- }
- },
- },
- methods: {
- getHomeList() {
- _getHomeList(this.symbol).then((res) => {
- let numberText = res[0].close
- let numberLength = (numberText.substring(numberText.indexOf('.') + 1, numberText.length)).length
- console.log(numberLength)
- let arry = []
- let str = '0.'
- for (let j = 0; j < numberLength - 1; j++) {
- str = str + '0'
- arry.push(str)
- }
- let newArry = []
- arry.map((item) => {
- let obj = {
- name: item + '1',
- value: (item.substring(item.indexOf('.') + 1, item.length)).length + 1
- }
- newArry.push(obj)
- })
- if (numberLength <= 2) {
- let obj = [
- {
- name: '0.1',
- value: 1,
- },
- {
- name: '1',
- value: -1,
- },
- {
- name: '10',
- value: -2,
- },
- {
- name: '100',
- value: -3,
- }
- ]
- newArry = newArry.concat(obj)
- }
- if (this.symbol == 'shib') {
- newArry = newArry.slice(-4)
- }
- let dataObj = {
- arry: newArry,
- numberLength: numberLength
- }
- this.$emit('getList', dataObj)
- })
- },
- startDeepSocket() { // 开启socket链接
- this.closeSocket()
- console.log('start deep')
- this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`)
- this.socket.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.handleDeep(_data)
- }
- }
- },
- handleDeep(data) { // 格式化数据
- this.deepData = data
- if (this.selectValue >= 1) {
- this.deepData.asks.map((item) => {
- item.price = parseFloat(item.price).toFixed(this.selectValue)
- })
- this.deepData.bids.map((item) => {
- item.price = parseFloat(item.price).toFixed(this.selectValue)
- })
- } else {
- if (this.selectValue == -1) {
- this.deepData.asks.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.'))
- })
- this.deepData.bids.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.'))
- })
- }
- if (this.selectValue == -2) {
- this.deepData.asks.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.') - 1) + '0'
- })
- this.deepData.bids.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.') - 1) + '0'
- })
- }
- if (this.selectValue == -3) {
- this.deepData.asks.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.') - 2) + '00'
- })
- this.deepData.bids.map((item) => {
- item.price = item.price.substring(0, item.price.indexOf('.') - 2) + '00'
- })
- }
- // this.selectValue
- }
- const { asks, bids } = data
- //获取小数位数
- this.redData = asks.sort((prev, next) => prev.price - next.price).slice(0, DEEP_LENGTH)
- this.greenData = bids.sort((prev, next) => prev.price - next.price).slice(0, DEEP_LENGTH)
- this.approximately = this.deepData.asks[1].price
- },
- onPrice(price) {
- this.$emit('price', price)
- },
- closeSocket() {
- this.socket && this.socket.close()
- this.socket = null
- },
- },
- activated() {
- this.startDeepSocket()
- },
- deactivated() {
- this.closeSocket()
- },
- beforeDestroy() { //
- this.socket && this.socket.close()
- this.socket = null
+ },
+ data() {
+ const init = [];
+ for (let i = 0; i < DEEP_LENGTH; i++) {
+ init.push({ amount: "", price: "" });
}
-
-}
+ return {
+ fixDate,
+ greenData: init,
+ redData: init,
+ socket: null,
+ approximately: "",
+ };
+ },
+ computed: {
+ ...mapGetters({
+ theme: "home/theme",
+ }),
+ },
+ mounted() {
+ // this.startDeepSocket()
+ if (this.showType == 1 || this.showType == 2) {
+ DEEP_LENGTH = 12;
+ } else {
+ DEEP_LENGTH = 6;
+ }
+ this.getHomeList();
+ },
+ watch: {
+ symbol(val) {
+ this.startDeepSocket();
+ this.getHomeList();
+ },
+ showType(val) {
+ if (val == 1 || val == 2) {
+ DEEP_LENGTH = 12;
+ } else {
+ DEEP_LENGTH = 6;
+ }
+ },
+ },
+ methods: {
+ getHomeList() {
+ _getHomeList(this.symbol).then((res) => {
+ let numberText = res[0].close;
+ let numberLength = numberText.substring(
+ numberText.indexOf(".") + 1,
+ numberText.length
+ ).length;
+ console.log(numberLength);
+ let arry = [];
+ let str = "0.";
+ for (let j = 0; j < numberLength - 1; j++) {
+ str = str + "0";
+ arry.push(str);
+ }
+ let newArry = [];
+ arry.map((item) => {
+ let obj = {
+ name: item + "1",
+ value:
+ item.substring(item.indexOf(".") + 1, item.length).length + 1,
+ };
+ newArry.push(obj);
+ });
+ if (numberLength <= 2) {
+ let obj = [
+ {
+ name: "0.1",
+ value: 1,
+ },
+ {
+ name: "1",
+ value: -1,
+ },
+ {
+ name: "10",
+ value: -2,
+ },
+ {
+ name: "100",
+ value: -3,
+ },
+ ];
+ newArry = newArry.concat(obj);
+ }
+ if (this.symbol == "shib") {
+ newArry = newArry.slice(-4);
+ }
+ let dataObj = {
+ arry: newArry,
+ numberLength: numberLength,
+ };
+ this.$emit("getList", dataObj);
+ });
+ },
+ startDeepSocket() {
+ // 开启socket链接
+ this.closeSocket();
+ console.log("start deep");
+ this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
+ this.socket.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.handleDeep(_data);
+ }
+ };
+ },
+ handleDeep(data) {
+ // 格式化数据
+ this.deepData = data;
+ if (this.selectValue >= 1) {
+ this.deepData.asks.map((item) => {
+ item.price = parseFloat(item.price).toFixed(this.selectValue);
+ });
+ this.deepData.bids.map((item) => {
+ item.price = parseFloat(item.price).toFixed(this.selectValue);
+ });
+ } else {
+ if (this.selectValue == -1) {
+ this.deepData.asks.map((item) => {
+ item.price = item.price.substring(0, item.price.indexOf("."));
+ });
+ this.deepData.bids.map((item) => {
+ item.price = item.price.substring(0, item.price.indexOf("."));
+ });
+ }
+ if (this.selectValue == -2) {
+ this.deepData.asks.map((item) => {
+ item.price =
+ item.price.substring(0, item.price.indexOf(".") - 1) + "0";
+ });
+ this.deepData.bids.map((item) => {
+ item.price =
+ item.price.substring(0, item.price.indexOf(".") - 1) + "0";
+ });
+ }
+ if (this.selectValue == -3) {
+ this.deepData.asks.map((item) => {
+ item.price =
+ item.price.substring(0, item.price.indexOf(".") - 2) + "00";
+ });
+ this.deepData.bids.map((item) => {
+ item.price =
+ item.price.substring(0, item.price.indexOf(".") - 2) + "00";
+ });
+ }
+ // this.selectValue
+ }
+ const { asks, bids } = data;
+ //获取小数位数
+ this.redData = asks
+ .sort((prev, next) => prev.price - next.price)
+ .slice(0, DEEP_LENGTH);
+ this.greenData = bids
+ .sort((prev, next) => prev.price - next.price)
+ .slice(0, DEEP_LENGTH);
+ this.approximately = this.deepData.asks[1].price;
+ },
+ onPrice(price) {
+ this.$emit("price", price);
+ },
+ closeSocket() {
+ this.socket && this.socket.close();
+ this.socket = null;
+ },
+ },
+ activated() {
+ this.startDeepSocket();
+ },
+ deactivated() {
+ this.closeSocket();
+ },
+ beforeDestroy() {
+ //
+ this.socket && this.socket.close();
+ this.socket = null;
+ },
+};
</script>
<style lang="scss" scoped>
.approximately-text {
- @include themify() {
- color: themed("text_color1");
- }
+ @include themify() {
+ color: themed("text_color1");
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3