453530270@qq.com
3 years ago
101 changed files with 18920 additions and 15593 deletions
@ -0,0 +1,2 @@ |
|||||
|
# jiaoyi |
||||
|
|
||||
File diff suppressed because it is too large
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 288 B After Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 754 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -1,276 +1,333 @@ |
|||||
<template> |
<template> |
||||
<!-- colto-section --> |
<!-- colto-section --> |
||||
<footer class="footer mt-5"> |
<footer class="footer"> |
||||
<div class="footer-upper-section"> |
<div class="footer-upper-section"> |
||||
<div class="item_left" style="width:33%"> |
<div class="item_left" style="width:40%;"> |
||||
<div class="logo"> |
<div class="logo"> |
||||
<!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> --> |
<!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> --> |
||||
<div style="width:200px;height:100px"> |
<div style="width:300px;height:150px"> |
||||
<img :src="appConfig.head_logo" alt="logo" style="width:100%;height:100%;object-fit: contain;"/> |
<img :src="appConfig.head_logo" alt="logo" style="width:100%;height:100%;object-fit: contain;"/> |
||||
</div> |
</div> |
||||
|
|
||||
<!-- <span>{{$t('common.footerTips1')}}</span> --> |
<!-- <span>{{$t('common.footerTips1')}}</span> --> |
||||
</div> |
</div> |
||||
<!-- <p class="foot_p">{{$t('common.footerTips2',{name:appConfig.name})}}</p> --> |
<span>{{ $t('common.footerTips1') }}</span> |
||||
<!-- <p class="foot_p">{{$t('common.footerTips3')}}</p> --> |
<p class="foot_p">{{ $t('common.footerTips2', {name: appConfig.name}) }}</p> |
||||
</div> |
<!-- <p class="foot_p">{{$t('appConfig.name')}}</p> --> |
||||
<div class="item_right" style="width:66%"> |
|
||||
<div class="item"> |
|
||||
<p class="item_p">{{ $t("common.college") }}</p> |
|
||||
<p class="foot_p"> |
|
||||
<router-link :to="college[0].url">{{ college[0].label }}</router-link> |
|
||||
<br /> |
|
||||
<router-link :to="college[1].url">{{ college[1].label }}</router-link> |
|
||||
</p> |
|
||||
<p class="foot_p"> |
|
||||
<router-link :to="college[2].url">{{ college[2].label }}</router-link> |
|
||||
<br /> |
|
||||
<router-link :to="college[3].url">{{ college[3].label }}</router-link> |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="item"> |
|
||||
<p class="item_p">{{ $t("common.service") }}</p> |
|
||||
<p class="foot_p"> |
|
||||
<router-link :to="service[0].url">{{ service[0].label }}</router-link> |
|
||||
<br /> |
|
||||
<router-link :to="service[1].url">{{ service[1].label }}</router-link> |
|
||||
</p> |
|
||||
<p class="foot_p"> |
|
||||
<router-link :to="service[2].url">{{ service[2].label }}</router-link> |
|
||||
<br /> |
|
||||
<router-link :to="service[3].url">{{ service[3].label }}</router-link> |
|
||||
</p> |
|
||||
</div> |
|
||||
|
|
||||
<div class="item item2"> |
<p class="foot_p">{{ $t('common.footerTips3') }}</p> |
||||
<p class="item_p" style="width:100%">{{ $t("common.contactUs") }}</p> |
|
||||
<p class="foot_p" style="width:100%"> |
|
||||
{{ $t("common.email") }}: |
|
||||
</p> |
|
||||
<p class="foot_p" style="width:100%"> |
|
||||
{{email}} |
|
||||
</p> |
|
||||
<p class="foot_p" style="width:100%"> |
|
||||
<br /><br /> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="container" v-if="0"> |
|
||||
<div class="row"> |
|
||||
<!-- <div class="col-lg-2 col-md-3 mb-4"> |
|
||||
<div class="footer-logo"> |
|
||||
<a href="#"> |
|
||||
<img :src="logo.imgurl" alt="img" class="img-responsive" /> |
|
||||
<img :src="appConfig.foot_logo" alt="logo" /> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> --> |
|
||||
<!-- 服务列表 --> |
|
||||
<div class="col-lg-1 col-md-3 mb-4"> |
|
||||
<div class="footer-info-list"> |
|
||||
<h4>{{ $t("common.service") }}</h4> |
|
||||
<ul> |
|
||||
<li v-for="(item, index) in service" :key="index"> |
|
||||
<router-link :to="item.url">{{ item.label }}</router-link> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
</div> |
||||
</div> |
<div class="item" style="width:30%"> |
||||
<!-- 学院列表 --> |
<p class="item_p" style="text-align: center; font-size:16px">{{ $t("common.service") }}</p> |
||||
<div class="col-lg-1 col-md-3 mb-4"> |
<p class="foot_p" style="text-align: center;"> |
||||
<div class="footer-info-list"> |
<router-link :to="service[0].url">{{ service[0].label }}</router-link> |
||||
<h4>{{ $t("common.college") }}</h4> |
</p> |
||||
<ul> |
<p class="foot_p" style="text-align: center;"> |
||||
<li v-for="item in college" :key="item.id"> |
|
||||
<router-link :to="item.url">{{ item.label}}</router-link> |
<router-link :to="service[1].url">{{ service[1].label }}</router-link> |
||||
</li> |
</p> |
||||
</ul> |
<p class="foot_p" style="text-align: center;"> |
||||
|
<router-link :to="service[2].url">{{ service[2].label }}</router-link> |
||||
|
|
||||
|
<!-- <router-link :to="service[3].url">{{ service[3].label }}</router-link>--> |
||||
|
</p> |
||||
|
<p class="foot_p" style="text-align: center;"> |
||||
|
<router-link :to="service[3].url">{{ service[3].label }}</router-link> |
||||
|
</p> |
||||
</div> |
</div> |
||||
</div> |
<!-- <div class="item item1"> |
||||
|
<p class="item_p">{{ $t("common.college") }}</p> |
||||
|
<p class="foot_p" > |
||||
|
<router-link :to="college[0].url">{{ college[0].label }}</router-link>  |
||||
|
<router-link :to="college[1].url">{{ college[1].label }}</router-link> |
||||
|
</p> |
||||
|
<p class="foot_p"> |
||||
|
<router-link :to="college[2].url">{{ college[2].label }}</router-link>  |
||||
|
<router-link :to="college[3].url">{{ college[3].label }}</router-link> |
||||
|
</p> |
||||
|
</div> --> |
||||
|
<div class="item" style="width:30%;margin-top: 74px;"> |
||||
|
|
||||
|
|
||||
|
<p class="item_p" style="text-align: start; font-size:16px;">{{ $t("common.contactUs") }}</p> |
||||
|
<p class="foot_p" style="text-align: start; font-size:16px;"> |
||||
|
{{ $t("common.email") }}:{{ email }} |
||||
|
</p> |
||||
|
<div class="icon_foot"> |
||||
|
<img src="../assets/img/chat.png"> |
||||
|
<!--<div class="icon_img" v-for="(item,index) in list" :key="item">--> |
||||
|
<!-- <img :src="item.src"/>--> |
||||
|
<!--</div>--> |
||||
|
</div> |
||||
|
<!-- <p class="foot_p" style="width:100%"> |
||||
|
{{email}} |
||||
|
</p> --> |
||||
|
|
||||
<!-- 联系我们 --> |
|
||||
<div class="col-lg-2 col-md-6"> |
|
||||
<div class="footer-info-list"> |
|
||||
<h4>{{$t('common.contactUs')}}</h4> |
|
||||
<ul class="contact-info"> |
|
||||
<li> |
|
||||
{{ $t("common.email") }}: |
|
||||
<span>{{email}}</span> |
|
||||
</li> |
|
||||
<!-- <li> |
|
||||
Phone: <span>{{contactinfo.mobile}}</span> |
|
||||
</li> --> |
|
||||
</ul> |
|
||||
<ul class="social-style-two"> |
|
||||
<li> |
|
||||
<a href="#"> |
|
||||
<i class="fab fa-facebook-f"></i> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#"> |
|
||||
<i class="fab fa-twitter"></i> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#"> |
|
||||
<i class="fab fa-google-plus-g"></i> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#"> |
|
||||
<i class="fab fa-github"></i> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#"> |
|
||||
<i class="fab fa-linkedin-in"></i> |
|
||||
</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
</div> |
||||
</div> |
|
||||
<div class="col-lg-4 col-md-6 border-left" v-if="0"> |
<!-- <div class="container"> |
||||
<div class="pl-2 "> |
<div class="row"> --> |
||||
<div class="mb-2"> |
<!-- <div class="col-lg-2 col-md-3 mb-4"> |
||||
{{$t('common.footerTips1')}} |
<div class="footer-logo"> |
||||
|
<a href="#"> |
||||
|
<img :src="logo.imgurl" alt="img" class="img-responsive" /> |
||||
|
<img :src="appConfig.foot_logo" alt="logo" /> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
<!-- 服务列表 --> |
||||
|
<!-- <div class="col-lg-1 col-md-3 mb-4"> |
||||
|
<div class="footer-info-list"> |
||||
|
<h4>{{ $t("common.service") }}</h4> |
||||
|
<ul> |
||||
|
<li v-for="(item, index) in service" :key="index"> |
||||
|
<router-link :to="item.url">{{ item.label }}</router-link> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
<!-- 学院列表 --> |
||||
|
<!-- <div class="col-lg-1 col-md-3 mb-4"> |
||||
|
<div class="footer-info-list"> |
||||
|
<h4>{{ $t("common.college") }}</h4> |
||||
|
<ul> |
||||
|
<li v-for="item in college" :key="item.id"> |
||||
|
<router-link :to="item.url">{{ item.label}}</router-link> |
||||
|
</li> |
||||
|
</ul> |
||||
</div> |
</div> |
||||
<div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div> |
</div> --> |
||||
<div class="mb-2">{{$t('common.footerTips3')}}</div> |
|
||||
|
|
||||
</div> |
<!-- 联系我们 --> |
||||
</div> |
<!-- <div class="col-lg-2 col-md-6"> |
||||
|
<div class="footer-info-list"> |
||||
|
<h4>{{$t('common.contactUs')}}</h4> |
||||
|
<ul class="contact-info"> |
||||
|
<li> |
||||
|
{{ $t("common.email") }}: |
||||
|
<span>{{email}}</span> |
||||
|
</li> |
||||
|
<li> |
||||
|
Phone: <span>{{contactinfo.mobile}}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<ul class="social-style-two"> |
||||
|
<li> |
||||
|
<a href="#"> |
||||
|
<i class="fab fa-facebook-f"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a href="#"> |
||||
|
<i class="fab fa-twitter"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a href="#"> |
||||
|
<i class="fab fa-google-plus-g"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a href="#"> |
||||
|
<i class="fab fa-github"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a href="#"> |
||||
|
<i class="fab fa-linkedin-in"></i> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
<!-- <div class="col-lg-4 col-md-6 border-left"> |
||||
|
<div class="pl-2 "> |
||||
|
<div class="mb-2"> |
||||
|
{{$t('common.footerTips1')}} |
||||
|
</div> |
||||
|
<div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div> |
||||
|
<div class="mb-2">{{$t('common.footerTips3')}}</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> --> |
||||
|
<!-- </div> --> |
||||
|
<!-- </div> --> |
||||
</div> |
</div> |
||||
</div> |
<div class="footer-bottom"> |
||||
</div> |
<!-- 版权信息 --> |
||||
<div class="footer-bottom"> |
<div class="container"> |
||||
<!-- 版权信息 --> |
<div class="footer-bottom-wrap"> |
||||
<div class="container"> |
<!-- © --> |
||||
<div class="footer-bottom-wrap"> |
<div class="copyright-text text-center">{{ appConfig.copyright }}</div> |
||||
<!-- © --> |
</div> |
||||
<div class="copyright-text text-center">{{appConfig.copyright}}</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</footer> |
||||
</div> |
|
||||
</footer> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import College from "@/api/college"; |
import College from "@/api/college"; |
||||
import ContactUs from "@/api/contactUs"; |
import ContactUs from "@/api/contactUs"; |
||||
import {mapState} from 'vuex' |
import {mapState} from 'vuex' |
||||
|
|
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
service: [], |
service: [], |
||||
college: [], |
college: [], |
||||
email: "" |
email: "", |
||||
}; |
list: [ |
||||
}, |
{src: 'https://www.rsncoin.com/static/flag/discord.png'}, |
||||
computed:{ |
{src: 'https://www.rsncoin.com/static/flag/telegram.png'}, |
||||
...mapState({ |
{src: 'https://www.rsncoin.com/static/flag/tiktok.png'}, |
||||
appConfig:'appConfig' |
{src: 'https://www.rsncoin.com/static/flag/twitter.png'}, |
||||
}) |
{src: 'https://www.rsncoin.com/static/flag/reddit.png'}, |
||||
}, |
{src: 'https://www.rsncoin.com/static/flag/ins.png'}, |
||||
methods: { |
{src: 'https://www.rsncoin.com/static/flag/cap.jpg'}, |
||||
getCollegeLinks() { |
{src: 'https://www.rsncoin.com/static/flag/vk.png'}, |
||||
College.getCategoryList() |
{src: 'https://www.rsncoin.com/static/flag/youtube.jpg'}, |
||||
.then(list => { |
] |
||||
list.forEach(item => { |
}; |
||||
this.college.push({ |
}, |
||||
url: `/college/list/${item.id}`, |
computed: { |
||||
label: item.name |
...mapState({ |
||||
}); |
appConfig: 'appConfig' |
||||
}); |
|
||||
}) |
}) |
||||
.catch(err => {}); |
|
||||
}, |
}, |
||||
|
methods: { |
||||
|
getCollegeLinks() { |
||||
|
College.getCategoryList() |
||||
|
.then(list => { |
||||
|
list.forEach(item => { |
||||
|
this.college.push({ |
||||
|
url: `/college/list/${item.id}`, |
||||
|
label: item.name |
||||
|
}); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
getServiceLink() { |
getServiceLink() { |
||||
College.getServiceList() |
College.getServiceList() |
||||
.then(list => { |
.then(list => { |
||||
list.forEach(item => { |
list.forEach(item => { |
||||
this.service.push({ |
this.service.push({ |
||||
url: `/service/${item.id}`, |
url: `/service/${item.id}`, |
||||
label: item.name |
label: item.name |
||||
}); |
}); |
||||
}); |
}); |
||||
}) |
}) |
||||
.catch(err => {}); |
.catch(err => { |
||||
|
}); |
||||
|
}, |
||||
|
getEmial() { |
||||
|
ContactUs.contact() |
||||
|
.then(data => { |
||||
|
this.email = data.contact; |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
}); |
||||
|
} |
||||
}, |
}, |
||||
getEmial() { |
created() { |
||||
ContactUs.contact() |
this.getCollegeLinks(); |
||||
.then(data => { |
this.getServiceLink(); |
||||
this.email = data.contact; |
this.getEmial(); |
||||
}) |
|
||||
.catch(err => {}); |
|
||||
} |
} |
||||
}, |
|
||||
created() { |
|
||||
this.getCollegeLinks(); |
|
||||
this.getServiceLink(); |
|
||||
this.getEmial(); |
|
||||
} |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.footer-upper-section{ |
.footer-upper-section { |
||||
padding: 0; |
padding: 0; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
height: 324px; |
height: 324px; |
||||
// margin-left: 233px; |
// margin-left: 233px; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
padding:0 133px; |
padding: 0 133px; |
||||
.item_left{ |
|
||||
width: 454px; |
.item_left { |
||||
// margin-right: 300px; |
width: 454px; |
||||
.logo{ |
// margin-right: 300px; |
||||
display: flex; |
.logo { |
||||
align-items: center; |
display: flex; |
||||
color: #172636; |
align-items: center; |
||||
justify-content: space-between; |
color: #172636; |
||||
width: 100%; |
justify-content: space-between; |
||||
font-size: 16px; |
width: 100%; |
||||
margin-bottom: 17px; |
font-size: 16px; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.item_right{ |
.item_right { |
||||
display: flex; |
display: flex; |
||||
height: 99px; |
height: 99px; |
||||
|
|
||||
.item{ |
.item { |
||||
min-width: 250px; |
min-width: 250px; |
||||
// border-right: 1px solid #303D4B; |
// border-right: 1px solid #303D4B; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 0 15px; |
padding: 0 15px; |
||||
.item_p{ |
|
||||
font-size: 16px; |
.item_p { |
||||
color: #172636; |
font-size: 16px; |
||||
|
color: #172636; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item1 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.item2 { |
||||
|
padding-left: 64px; |
||||
|
} |
||||
|
|
||||
|
.item:last-child { |
||||
|
border: none; |
||||
} |
} |
||||
} |
|
||||
.item2{ |
|
||||
padding-left: 64px; |
|
||||
} |
|
||||
.item:last-child{ |
|
||||
border: none; |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
} |
} |
||||
.foot_p{ |
|
||||
|
.foot_p { |
||||
color: #797979; |
color: #797979; |
||||
font-size: 14px; |
font-size: 14px; |
||||
margin: 0; |
margin: 0; |
||||
a:hover{ |
|
||||
color: #326AEB; |
a:hover { |
||||
|
color: #797979; |
||||
|
} |
||||
|
|
||||
|
a:visited { |
||||
|
color: #797979; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon_foot { |
||||
|
margin-top: 5px; |
||||
|
height: 130px; |
||||
|
width: 180px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.icon_img { |
||||
|
height: 30px; |
||||
|
width: 30px; |
||||
|
margin: 0px 5px; |
||||
|
|
||||
|
|
||||
|
img { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
} |
||||
} |
} |
||||
// a:visited{ |
} |
||||
// color: #326AEB; |
|
||||
// } |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
|||||
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,874 @@ |
|||||
|
<template> |
||||
|
<div class="col-md-6"> |
||||
|
<div class="px-4 py-2 heading"> |
||||
|
<!--<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" style="width:100%;float: right">--> |
||||
|
<!-- <div class="d-flex align-items-center">--> |
||||
|
<!-- <div class="coin d-flex align-items-center">--> |
||||
|
<!-- <el-popover--> |
||||
|
<!-- placement="bottom"--> |
||||
|
<!-- ref="popover"--> |
||||
|
<!-- width="400"--> |
||||
|
<!-- trigger="click">--> |
||||
|
<!-- <div slot="reference">--> |
||||
|
<!-- {{ activeContract.pair_name }}11111111--> |
||||
|
<!-- <!– <el-button size="mini">--> |
||||
|
<!-- <i class="el-icon-arrow-down"></i>--> |
||||
|
<!-- </el-button> –>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </el-popover>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div--> |
||||
|
<!-- class="price px-3 border-right"--> |
||||
|
<!-- :class="{--> |
||||
|
<!-- decreace: activeContract.increase < 0,--> |
||||
|
<!-- increace: activeContract.increase >= 0--> |
||||
|
<!-- }"--> |
||||
|
<!-- >--> |
||||
|
<!-- <span class="current">{{ activeContract.price }}$</span>--> |
||||
|
<!-- --> |
||||
|
<!-- <span class="zf">{{ activeContract.increaseStr }}</span>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <!– 币种价值数据 –>--> |
||||
|
<!-- <div class="d-flex fn-12">--> |
||||
|
<!-- <div class="item px-2">--> |
||||
|
<!-- <div class="title mb-1 text-secondary">--> |
||||
|
<!-- 24h {{ $t("contract.h7") }}--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div>--> |
||||
|
<!-- {{ activeContract.high }}--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="item px-2">--> |
||||
|
<!-- <div class="title mb-1 text-secondary">--> |
||||
|
<!-- 24h {{ $t("contract.h8") }}--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div>--> |
||||
|
<!-- {{ activeContract.low }}--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="item px-2">--> |
||||
|
<!-- <div class="title mb-1 text-secondary">--> |
||||
|
<!-- 24h {{ $t("contract.h9") }}--> |
||||
|
<!-- <!– （{{ $t("contract.e2") }}） –>--> |
||||
|
<!-- (USDT)--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div>--> |
||||
|
<!-- {{ activeContract.vol }}--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div><theme-change /></div> --> |
||||
|
<!--</div>--> |
||||
|
<!-- <theme-change/> --> |
||||
|
<el-tooltip placement="bottom" effect="light"> |
||||
|
<div slot="content" class="market"> |
||||
|
<div class="coin p-md color-light fn-20"> |
||||
|
<img :src="detail.coin_icon" width="20" height="20" alt=""> |
||||
|
{{detail.full_name}} |
||||
|
</div> |
||||
|
<div class="list"> |
||||
|
<div class="d-flex justify-between p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c3')}}：</div> |
||||
|
<div class="color-light"> |
||||
|
{{detail.total_issuance}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex justify-between p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c4')}}：</div> |
||||
|
<div class="color-light"> |
||||
|
{{detail.total_circulation}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex justify-between p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c5')}}：</div> |
||||
|
<div class="color-light"> |
||||
|
{{detail.crowdfunding_price}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex justify-between p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c6')}}：</div> |
||||
|
<div class="color-light"> |
||||
|
{{detail.publish_time}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class=" p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c7')}}：</div> |
||||
|
<div class="color-light ov"> |
||||
|
{{detail.white_paper_link}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class=" p-x-md p-y-xs"> |
||||
|
<div>{{$t('nav.c8')}}：</div> |
||||
|
<div class="color-light ov"> |
||||
|
{{detail.official_website_link}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="p-md"> |
||||
|
<div class="fn-20 color-light"> |
||||
|
{{$t('nav.c9')}} |
||||
|
</div> |
||||
|
<div class="p-y-md edit-content" v-html="detail.coin_content"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <el-button><img src="../../assets/img/shuoming.png" width="20" height="20" alt=""></el-button> --> |
||||
|
</el-tooltip> |
||||
|
|
||||
|
</div> |
||||
|
<!-- 生成K线图 --> |
||||
|
<k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line> |
||||
|
|
||||
|
<!-- 交易处理 --> |
||||
|
<div class="market-trade "> |
||||
|
<ul class="nav nav-pills"> |
||||
|
<li class="nav-item"> |
||||
|
<a href :class="[`nav-link`, {active:!isCondition&&isMarket}]" @click.prevent="isCondition=false;isMarket=true;"> |
||||
|
{{ $t("common.market") }} |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;"> |
||||
|
{{ $t("common.limit") }}</a> |
||||
|
</li> |
||||
|
|
||||
|
<!-- <li class="nav-item"> |
||||
|
<a href :class="[`nav-link`, {active:isCondition&&!isMarket}]" @click.prevent="isCondition=true;isMarket=false;"> |
||||
|
{{ $t("common.stop-limit") }}</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a href :class="[`nav-link`, {active:isCondition&&isMarket}]" @click.prevent="isCondition=true;isMarket=true;"> |
||||
|
{{ $t("common.stop-market") }}</a> |
||||
|
</li> --> |
||||
|
</ul> |
||||
|
<div class="tab-content"> |
||||
|
<div class="tab-pane fade show active"> |
||||
|
<div class="d-flex justify-content-between"> |
||||
|
<!------------- Buy Order --------------> |
||||
|
<div class="market-trade-buy"> |
||||
|
|
||||
|
<!-- Trigger Price --> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.trigger"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.buy[0] }} |
||||
|
</span> |
||||
|
<div class="input-group" v-if="isCondition" slot="reference"> |
||||
|
<input type="number" v-model="buyorder.trigger_price" class="form-control" :placeholder="$t('exchange.trigger-price')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.from}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
|
||||
|
<template v-if="isMarket"> |
||||
|
<div class="input-group"> |
||||
|
<!-- Market Price --> |
||||
|
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitPrice"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.buy[1] }} |
||||
|
</span> |
||||
|
<div class="input-group" slot="reference"> |
||||
|
<!-- Entrust Price --> |
||||
|
<input type="number" v-model="buyorder.entrust_price" class="form-control" :placeholder="$t('exchange.enter-price')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.from}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
|
||||
|
<!-- Amount/Total --> |
||||
|
<template v-if="isMarket"> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.marketTotal"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.buy[3] }} |
||||
|
</span> |
||||
|
<div class="input-group" slot="reference"> |
||||
|
<input type="number" v-model="buyTotal" class="form-control" min=0 :placeholder="$t('exchange.enter-total')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.from}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitAmount"> |
||||
|
<!-- 提示框的内容 --> |
||||
|
<span class="content"> |
||||
|
<!-- 图标 --> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
<!-- 提示 --> |
||||
|
{{ msgList.buy[2] }} |
||||
|
</span> |
||||
|
<div class="input-group" slot="reference"> |
||||
|
<input type="number" v-model="buyorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.to}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
|
||||
|
<!-- Percent --> |
||||
|
<ul class="market-trade-list"> |
||||
|
<li v-for="(item,index) in percentage" :key="index" :class="{buyPercentActive:index == buyPercentIndex}" @click="renderBuyAmount(item.value, index)"> |
||||
|
<a href="javascript:void 0">{{ item.label }}</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<!-- Total --> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.orderTotal"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.buy[5] }} |
||||
|
</span> |
||||
|
<p slot="reference"> |
||||
|
{{$t('exchange.order-total')}} |
||||
|
<span> <b>{{buyTotal}}</b> {{pair.from}} </span> |
||||
|
</p> |
||||
|
</el-popover> |
||||
|
|
||||
|
<!-- Available --> |
||||
|
<p> |
||||
|
{{ $t('exchange.amount') }} |
||||
|
<span> {{toBalance}} {{pair.to}}</span><br /> |
||||
|
{{ $t('exchange.balance') }} |
||||
|
<span> {{fromBalance}} {{pair.from}}</span> |
||||
|
</p> |
||||
|
<button class="btn buy" @click="handleBuyOrder">{{ $t("common.buy") }} {{pair.to}}</button> |
||||
|
</div> |
||||
|
|
||||
|
<!------------ Sell Order -----------> |
||||
|
<div class="market-trade-sell"> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.trigger"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.sell[0] }} |
||||
|
</span> |
||||
|
<!-- Trigger Price --> |
||||
|
<div class="input-group" v-if="isCondition" slot="reference"> |
||||
|
<input type="number" v-model="sellorder.trigger_price" class="form-control" min=0 :placeholder="$t('exchange.trigger-price')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.from}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
|
||||
|
<template v-if="isMarket"> |
||||
|
<div class="input-group"> |
||||
|
<!-- Market Price --> |
||||
|
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitPrice"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.sell[1] }} |
||||
|
</span> |
||||
|
<div class="input-group" slot="reference"> |
||||
|
<!-- Entrust Price --> |
||||
|
<input type="number" v-model="sellorder.entrust_price" class="form-control" min=0 :placeholder="$t('exchange.enter-price')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.from}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
|
||||
|
<!-- Amount --> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitAmount"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.sell[2] }} |
||||
|
</span> |
||||
|
<div class="input-group" slot="reference"> |
||||
|
<input type="number" v-model="sellorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
||||
|
<div class="input-group-append"> |
||||
|
<span class="input-group-text">{{pair.to}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
|
||||
|
<ul class="market-trade-list"> |
||||
|
<li v-for="(item,index) in percentage" :key="index" :class="{sellPercentActive:index == sellPercentIndex}" @click="renderSellAmount(item.value, index)"> |
||||
|
<a href="javascript:void 0">{{ item.label }}</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<!-- Total --> |
||||
|
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.orderTotal"> |
||||
|
<span class="content"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
{{ msgList.sell[5] }} |
||||
|
</span> |
||||
|
<p slot="reference"> |
||||
|
{{ $t('exchange.order-total') }} |
||||
|
<span> |
||||
|
<b>{{sellTotal}}</b> {{pair.from}} </span> |
||||
|
</p> |
||||
|
</el-popover> |
||||
|
|
||||
|
<p> |
||||
|
{{$t('exchange.amount')}} |
||||
|
<span> {{toBalance}} {{pair.to}} </span><br /> |
||||
|
{{ $t('exchange.balance') }} |
||||
|
<span> {{fromBalance}} {{pair.from}}</span> |
||||
|
</p> |
||||
|
<button class="btn sell" @click="handleSellOrder">{{ $t("common.sell") }} {{pair.to}}</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Exchange from "@/api/exchange"; |
||||
|
import Market from "@/api/market"; |
||||
|
import Contract from "@/api/contract"; |
||||
|
export default { |
||||
|
|
||||
|
props: ["isLogin", "socket", "symbol", "pair", "buyorder", "sellorder", "fromBalance", "toBalance", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
contractList: [], |
||||
|
detail:[], |
||||
|
isMarket: true, |
||||
|
isCondition: false, |
||||
|
userBanlance: null, |
||||
|
|
||||
|
cacheTotal: 0, // 存放市价单输入的总值 |
||||
|
cachePrice: null, // 存放最新价格 |
||||
|
|
||||
|
activeContract:[], |
||||
|
// 气泡弹框内容和触发 |
||||
|
visibles: { |
||||
|
"buy": { |
||||
|
limitPrice: false, // 限制价格 |
||||
|
limitAmount: false, // 限制数量 |
||||
|
marketTotal: false, // 限制总额 |
||||
|
marketAmount: false, // 市价数量 |
||||
|
trigger: false, // 触发价格 |
||||
|
orderTotal: false, // 订单总额 |
||||
|
}, |
||||
|
"sell": { |
||||
|
limitPrice: false, |
||||
|
limitAmount: false, |
||||
|
marketTotal: false, |
||||
|
marketAmount: false, |
||||
|
trigger: false, |
||||
|
orderTotal: false, |
||||
|
}, |
||||
|
}, |
||||
|
msgList: { |
||||
|
"buy": Array(6).fill(''), // 5个空字符串的数组 |
||||
|
"sell": Array(6).fill('') |
||||
|
}, |
||||
|
// 百分比集合 |
||||
|
percentage: [{ |
||||
|
label: "25%", |
||||
|
value: 0.25 |
||||
|
}, |
||||
|
{ |
||||
|
label: "50%", |
||||
|
value: 0.5 |
||||
|
}, |
||||
|
{ |
||||
|
label: "75%", |
||||
|
value: 0.75 |
||||
|
}, |
||||
|
{ |
||||
|
label: "100%", |
||||
|
value: 1 |
||||
|
}, |
||||
|
], |
||||
|
// |
||||
|
buyPercentIndex: null, |
||||
|
sellPercentIndex: null, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
|
||||
|
|
||||
|
_activeContract(val) { |
||||
|
Market.getMarketList().then(data => { |
||||
|
|
||||
|
let contractList = data[0] |
||||
|
.map(item => item.marketInfoList) |
||||
|
.flat() |
||||
|
.find(item => item.symbol == this.activeSymbol) || {} |
||||
|
|
||||
|
}).catch(err => {}); |
||||
|
|
||||
|
|
||||
|
// console.log("market detail") |
||||
|
// console.log(val) |
||||
|
// let contractList = this.contractList |
||||
|
// .map(item => item.marketInfoList) |
||||
|
// .flat() |
||||
|
// .find(item => item.symbol == this.activeSymbol) || {} |
||||
|
// if (val.price) { |
||||
|
// delete contractList.price |
||||
|
// } |
||||
|
// console.log(contractList) |
||||
|
return contractList; |
||||
|
}, |
||||
|
|
||||
|
// 获取type类型值 |
||||
|
type() { |
||||
|
if (!this.isCondition) { |
||||
|
return this.isMarket ? 2 : 1; |
||||
|
} else { |
||||
|
return this.isMarket ? 4 : 3; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
theme() { |
||||
|
return localStorage.theme ? localStorage.theme : "light"; |
||||
|
}, |
||||
|
|
||||
|
buyTotal: { |
||||
|
get() { |
||||
|
if (!this.isMarket) { |
||||
|
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
||||
|
} else { |
||||
|
return this.cacheTotal; |
||||
|
} |
||||
|
}, |
||||
|
set(val) { |
||||
|
// 根据总值 计算数量 |
||||
|
if (!this.isMarket) { |
||||
|
this.buyorder.amount = Math.division(val, this.buyorder.entrust_price); |
||||
|
} else { // 市价单 缓存总值 |
||||
|
this.cacheTotal = val; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
sellTotal: { |
||||
|
get() { |
||||
|
return Math.multiple(this.sellorder.entrust_price, this.sellorder.amount); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 当前语言 |
||||
|
lang() { |
||||
|
let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en'; |
||||
|
return localStorage.lang || browser_Lang; |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
custom(newVal) { |
||||
|
console.log(newVal) |
||||
|
}, |
||||
|
|
||||
|
type() { |
||||
|
// 切换订单类型时 清空价格和数量 |
||||
|
// 数量改变时 触发percentage更新 |
||||
|
this.reset(); |
||||
|
}, |
||||
|
|
||||
|
// 有新交易时触发 给限价单设定初始价格 |
||||
|
newTrade(newVal, oldVal) { |
||||
|
// if (!this.isMarket ) { |
||||
|
|
||||
|
// 新交易对有trade数据 |
||||
|
if (!oldVal && newVal) { // 没值到初始化值 |
||||
|
// 修改order里面price的值 |
||||
|
this.cachePrice = newVal.price; |
||||
|
this.reset(); |
||||
|
} |
||||
|
|
||||
|
// 切换交易对时 清空了数据 |
||||
|
if (oldVal && !newVal) { // 有值到没值的过程 |
||||
|
this.cachePrice = null; |
||||
|
this.reset(); |
||||
|
} |
||||
|
// } |
||||
|
}, |
||||
|
symbol(){ |
||||
|
this.getCoinInfo() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 获取合约市场 |
||||
|
getMarketList() { |
||||
|
|
||||
|
Contract.getMarketList().then(res => { |
||||
|
this.contractList = res[0]; |
||||
|
//console.log("%c%s","color:green","market res") |
||||
|
let tmpList = res[0].marketInfoList; |
||||
|
for(i=0;i<tmpList.length;i++){ |
||||
|
let tcurCoin = tmpList[i] |
||||
|
if(tcurCoin.symbol.toLowerCase()+"usdt" === this.symbol){ |
||||
|
this.activeContract = tcurCoin |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// |
||||
|
this.activeContract = filterList |
||||
|
// 默认值 |
||||
|
let firstParent = res[0]; |
||||
|
if (firstParent) { |
||||
|
let first = firstParent.marketInfoList[0]; |
||||
|
if (first) this.activeSymbol = first.symbol; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
getCoinInfo(){ |
||||
|
// console.log(this.symbol.indexOf('usdt')!=-1) |
||||
|
if(this.symbol.indexOf('usdt')!=-1){ |
||||
|
var market=this.symbol.substring(0,this.symbol.length-4); |
||||
|
}else{ |
||||
|
var market=this.symbol.substring(0,this.symbol.length-3); |
||||
|
} |
||||
|
console.log("%c%s","#ccff00","currnet market") |
||||
|
console.log(market) |
||||
|
let data = { |
||||
|
coin_name:market, |
||||
|
lang:this.lang |
||||
|
} |
||||
|
|
||||
|
//点击会跟随变化 |
||||
|
let tmpList = this.contractList.marketInfoList; |
||||
|
for(i=0;i<tmpList.length;i++){ |
||||
|
let tcurCoin = tmpList[i] |
||||
|
if(tcurCoin.symbol.toLowerCase()+"usdt" === this.symbol){ |
||||
|
this.activeContract = tcurCoin |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Market.getCoinInfo(data).then(res => { |
||||
|
this.detail = res |
||||
|
}).catch(err => { |
||||
|
}); |
||||
|
}, |
||||
|
renderBuyAmount(val, index) { |
||||
|
console.info(val) |
||||
|
console.info(this.buyorder) |
||||
|
if (!this.buyorder.entrust_price) { |
||||
|
this.visibles.buy.limitPrice = true; |
||||
|
this.msgList.buy[1] = this.$t('nav.set'); |
||||
|
this.clearAll(); |
||||
|
return; |
||||
|
} |
||||
|
this.buyPercentIndex = index; |
||||
|
this.buyTotal = Math.multiple(this.fromBalance, val); |
||||
|
}, |
||||
|
|
||||
|
renderSellAmount(val, index) { |
||||
|
if (!this.sellorder.entrust_price) { |
||||
|
this.visibles.sell.limitPrice = true; |
||||
|
this.msgList.sell[1] = this.$t('nav.set'); |
||||
|
this.clearAll(); |
||||
|
return; |
||||
|
} |
||||
|
this.sellPercentIndex = index; |
||||
|
this.sellorder.amount = Math.multiple(this.toBalance, val); |
||||
|
}, |
||||
|
|
||||
|
handleBuyOrder() { |
||||
|
|
||||
|
// 执行前端的有效性验证 |
||||
|
if (!this.chkValidate(this.buyorder, this.buyTotal, "buy")) return; |
||||
|
|
||||
|
const baseArgs = { |
||||
|
symbol: this.pair.to.concat('/', this.pair.from), |
||||
|
type: this.type, |
||||
|
}; |
||||
|
|
||||
|
// 区分限价、市价和条件委托单 |
||||
|
// 1、限价单买入时 需要的参数：价格、数量、 |
||||
|
// 2、市价单买入时 需要的参数：总值 |
||||
|
// 3、条件单买入时 需要的参数：触发价、价格数量或者总值 |
||||
|
// 4、卖出时 需要价格和数量 |
||||
|
Exchange.storeEntrust(Object.assign(this.buyorder, { |
||||
|
total: this.buyTotal, |
||||
|
}, baseArgs)).then(data => { |
||||
|
// 触发父组件的方法 更新余额和订单 |
||||
|
this.$emit('update'); |
||||
|
// 清空表单 |
||||
|
this.reset(); |
||||
|
}).catch(err => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
handleSellOrder() { |
||||
|
// 执行前端的有效性验证 |
||||
|
if (!this.chkValidate(this.sellorder, this.sellTotal, "sell")) return; |
||||
|
// console.info(this.sellTotal) |
||||
|
const baseArgs = { |
||||
|
symbol: this.pair.to.concat('/', this.pair.from), |
||||
|
type: this.type, |
||||
|
}; |
||||
|
Exchange.storeEntrust(Object.assign(this.sellorder, { |
||||
|
total: this.sellTotal |
||||
|
}, baseArgs)).then(data => { |
||||
|
// 触发父组件的方法 更新余额和订单 |
||||
|
this.$emit('update'); |
||||
|
// 清空表单 |
||||
|
this.reset(); |
||||
|
}).catch(err => { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
reset() { |
||||
|
|
||||
|
// 如果没有newTrade时 则没有缓存价格 重置为最小值0 |
||||
|
// 由于输入框去除了精度空值 这里还需要手动设置精度值 |
||||
|
let price = this.cachePrice || 0; |
||||
|
// console.info(price) |
||||
|
// console.info(this.priceDecimals) |
||||
|
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
||||
|
this.buyorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
||||
|
|
||||
|
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
||||
|
// console.info(this.sellorder.entrust_price) |
||||
|
this.sellorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
||||
|
|
||||
|
// 清空数量 |
||||
|
this.buyorder.amount = 0; |
||||
|
this.sellorder.amount = 0; |
||||
|
|
||||
|
// total赋值会触发set方法 |
||||
|
// this.buyTotal = 0; |
||||
|
// this.cacheTotal = 0; |
||||
|
|
||||
|
// 去除百分比样式 |
||||
|
this.buyPercentIndex = -1; |
||||
|
this.sellPercentIndex = -1; |
||||
|
}, |
||||
|
|
||||
|
clearAll() { |
||||
|
// 5s后统一清除提示框 |
||||
|
setTimeout(function () { |
||||
|
Object.keys(this.visibles.buy).forEach(key => this.visibles.buy[key] = false); |
||||
|
Object.keys(this.visibles.sell).forEach(key => this.visibles.sell[key] = false); |
||||
|
}.bind(this), 5000); |
||||
|
}, |
||||
|
|
||||
|
empty(val) { |
||||
|
let ret; |
||||
|
switch (typeof val) { |
||||
|
case "number": |
||||
|
ret = val == 0; |
||||
|
break; |
||||
|
case "string": |
||||
|
ret = val == "0" || /^\s?$/.test(val); |
||||
|
break; |
||||
|
case "boolean": |
||||
|
ret = val; |
||||
|
break; |
||||
|
default: |
||||
|
ret = Boolean(val); |
||||
|
break; |
||||
|
} |
||||
|
return ret; |
||||
|
}, |
||||
|
|
||||
|
chkValidate(order, total, orderType) { |
||||
|
// |
||||
|
// 验证登录 |
||||
|
if (!this.isLogin) { |
||||
|
this.$confirm(this.$t('nav.login'), { |
||||
|
confirmButtonText:this.$t('common.confirmBtn'), |
||||
|
cancelButtonText: this.$t('common.cancelBtn'), |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.$router.push(`/sign-in`); |
||||
|
}).catch(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let flag = true; |
||||
|
|
||||
|
switch (this.type) { |
||||
|
|
||||
|
case 1: // limit |
||||
|
if (this.empty(order.entrust_price)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].limitPrice = true; |
||||
|
this.msgList[orderType][1] = this.$t('nav.a1'); |
||||
|
} else if (this.empty(order.amount)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].limitAmount = true; |
||||
|
this.msgList[orderType][2] = this.$t('nav.a2'); |
||||
|
} else { |
||||
|
if (order.amount < this.minQty) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].limitAmount = true; |
||||
|
this.msgList[orderType][2] = this.$t('nav.a3')+`${this.minQty}`; |
||||
|
} |
||||
|
|
||||
|
if (total < this.minTotal) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].orderTotal = true; |
||||
|
this.msgList[orderType][5] = this.$t('exchange.total')+`${this.minTotal}`; |
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
|
||||
|
case 2: // market |
||||
|
if (order.direction == "buy") { // 买 |
||||
|
if (this.empty(total)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketTotal = true; |
||||
|
this.msgList[orderType][3] = this.$t('nav.a4'); |
||||
|
} else if (this.total < this.minTotal) { |
||||
|
flag = false; |
||||
|
this.visibles.marketTotal = true; |
||||
|
this.msgList[3] = this.$t('nav.a5')+` ${this.minTotal}`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (order.direction == "sell") { // 卖 |
||||
|
if (this.empty(order.amount)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketAmount = true; |
||||
|
this.msgList[orderType][4] = this.$t('nav.a6'); |
||||
|
} else if (order.amount < this.minQty) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketAmount = true; |
||||
|
this.msgList[orderType][4] = this.$t('nav.a7')+` ${this.minQty}`; |
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
|
||||
|
case 3: // stop-limit |
||||
|
|
||||
|
if (this.empty(order.trigger_price)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].trigger = true; |
||||
|
this.msgList[orderType][0] = this.$t('nav.a8') |
||||
|
} else if (this.empty(order.entrust_price)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].limitPrice = true; |
||||
|
this.msgList[orderType][1] = this.$t('nav.a9') |
||||
|
} else if (this.empty(order.amount)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].limitAmount = true; |
||||
|
this.msgList[orderType][2] = this.$t('nav.b1') |
||||
|
} |
||||
|
break; |
||||
|
|
||||
|
case 4: // stop-market |
||||
|
if (this.empty(order.trigger_price)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].trigger = true; |
||||
|
this.msgList[orderType][0] = this.$t('nav.b2') |
||||
|
} else { |
||||
|
|
||||
|
if (order.direction == "buy") { |
||||
|
if (this.empty(total)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketTotal = true; |
||||
|
this.msgList[orderType][3] = this.$t('nav.b3') |
||||
|
} else if (total < this.minTotal) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketTotal = true; |
||||
|
this.msgList[orderType][3] = this.$t('nav.b5')+` ${this.minTotal}` |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (order.direction == "sell") { |
||||
|
if (this.empty(order.amount)) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketAmount = true; |
||||
|
this.msgList[orderType][4] = this.$t('nav.b6') |
||||
|
} else if (order.amount < this.minQty) { |
||||
|
flag = false; |
||||
|
this.visibles[orderType].marketAmount = true; |
||||
|
this.msgList[orderType][4] =this.$t('nav.b7')+ ` ${this.minQty}` |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
// 清除所有样式 |
||||
|
this.clearAll(); |
||||
|
|
||||
|
// 返回验证结果 |
||||
|
return flag; |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.getMarketList(); |
||||
|
this.getCoinInfo() |
||||
|
this.reset(); |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.buyPercentActive { |
||||
|
a:link { |
||||
|
font-weight: bold; |
||||
|
background: #26a69a; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sellPercentActive { |
||||
|
a:link { |
||||
|
font-weight: bold; |
||||
|
background: #ef5350; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-group-text { |
||||
|
width: 68px; |
||||
|
@include flexible(row, center, center); |
||||
|
} |
||||
|
|
||||
|
.market-trade { |
||||
|
border: none; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
.market{ |
||||
|
width: 300px; |
||||
|
height: 500px; |
||||
|
overflow: scroll; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 10px; |
||||
|
display: -webkit-box; |
||||
|
color: black; |
||||
|
.ov{ |
||||
|
width: 100%; |
||||
|
table-layout:fixed; |
||||
|
word-break:break-all; |
||||
|
overflow:hidden; |
||||
|
} |
||||
|
} |
||||
|
.p-y-xs{ |
||||
|
padding: 5px 0; |
||||
|
} |
||||
|
.el-button{ |
||||
|
padding: 0!important; |
||||
|
background: transparent!important; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 720 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 34 KiB |
Loading…
Reference in new issue