You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
13 KiB
311 lines
13 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- 通用 -->
|
|
{include file="common/head" /}
|
|
<!-- 当前 -->
|
|
<link rel="stylesheet" href="__TMPL__/static/scss/trade.css">
|
|
<style>
|
|
td{
|
|
border: 1px solid #333;
|
|
vertical-align: middle;
|
|
padding: 10px
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- header start -->
|
|
{include file="common/header" /}
|
|
<!-- header end -->
|
|
<!-- banner start -->
|
|
<div class="bannerList">
|
|
<div class="img"><img src="__TMPL__/static/images/trade/tradeBanner.jpg" alt=""></div>
|
|
<div class="w1280">
|
|
<div class="bannerTitle">交易服务</div>
|
|
</div>
|
|
</div>
|
|
<!-- banner end -->
|
|
<div class="pageListNav">
|
|
<div class="w1280">
|
|
{hcTaglib:subcategory pid="9" item="vo" field="id,title" sort="sort asc"}
|
|
<a href="{:hcUrl('list/index',['id'=>$vo.id])}" class="{$current_cate['id']==$vo.id?'on':''}">{$vo.title|default='--'}</a>
|
|
{/hcTaglib:subcategory}
|
|
</div>
|
|
</div>
|
|
<div class="breedBlock">
|
|
<div class="w1280">
|
|
{hcTaglib:content cid="$current_cate['id']" moduleId='1' limit='1' sort='id asc' item="vo" field="id,title,content"}
|
|
{$vo.content|raw|default=''}
|
|
{/hcTaglib:content}
|
|
</div>
|
|
</div>
|
|
<!-- footer start-->
|
|
{include file="common/footer" /}
|
|
<!-- footer end -->
|
|
<!-- 通用 -->
|
|
{include file="common/foot" /}
|
|
<!-- 当前 -->
|
|
<script src="__TMPL__/static/js/layui.js"></script>
|
|
<script>
|
|
let index = 1;
|
|
for(let i = 1; i < 7; i++){
|
|
initSwiper(i)
|
|
}
|
|
let levelLisSelector = $('.breedBlock .w1280 .levelCont .levelList')
|
|
levelLisSelector.eq(0).css('display','block')
|
|
levelLisSelector.eq(0).children('.content').children('.cont').eq(0).css('display','block')
|
|
initSwiperSlide()
|
|
|
|
|
|
$('.breedBlock .w1280 .type a').click(function(){
|
|
index = $(this).data('index')
|
|
if($(this).hasClass('on')){
|
|
return
|
|
}
|
|
let contClickNum = $(this).index()
|
|
$(this).siblings().removeClass('on')
|
|
$(this).addClass('on')
|
|
levelLisSelector.css('display','none')
|
|
levelLisSelector.eq(contClickNum).stop().fadeIn()
|
|
levelLisSelector.eq(contClickNum).children('.swiperClick').children('.breedSwiper').children('.swiper-wrapper').children('.swiper-slide').removeClass('on')
|
|
levelLisSelector.eq(contClickNum).children('.swiperClick').children('.breedSwiper').children('.swiper-wrapper').children('.swiper-slide').eq(0).addClass('on')
|
|
levelLisSelector.eq(contClickNum).children('.content').children('.cont').css('display','none')
|
|
levelLisSelector.eq(contClickNum).children('.content').children('.cont').eq(0).css('display','block')
|
|
})
|
|
levelLisSelector.each(function(){
|
|
$(this).children('.swiperClick').children('.breedSwiper').children('.swiper-wrapper').children('.swiper-slide').eq(0).addClass('on')
|
|
$(this).children('.content').children('.cont').eq(0).css('display','block')
|
|
})
|
|
// 页内搜索
|
|
$('.tradeSearch .searchBtn').click(function(){
|
|
let searchInput = $('.tradeSearch input').val()
|
|
let cid = $('.w1280 .type a.on').attr('data-id');
|
|
$.ajax({
|
|
'type':'get',
|
|
'url':'/content/list',
|
|
'data':{'category_id':cid,'title':searchInput,'limit':500,'sort':'id asc'},
|
|
'dataType':'json',
|
|
'success':function(res){
|
|
if(res.code == 0){
|
|
// 移除原来的dom结构
|
|
destroyOldDom(index)
|
|
if(res.data.length == 0){
|
|
return false;
|
|
}
|
|
// 创建新的dom结构
|
|
// 1、创建swiper
|
|
createSwiperDom(res.data,index)
|
|
// 2、创建table
|
|
createTableDom(res.data)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
function destroyOldDom(index){
|
|
$('.levelCont .levelList').eq(index-1).children().remove()
|
|
}
|
|
function createTableDom(data){
|
|
let tableStart = `
|
|
<div class="content">
|
|
`
|
|
let tableEnd = `
|
|
</div>
|
|
`
|
|
let tableDom = ''
|
|
data.forEach((vv)=>{
|
|
tableDom += `
|
|
<div class="cont">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>交易所名称</td>
|
|
<td>${vv.mainCate.title}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>商品名称</td>
|
|
<td>${vv.title}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>品种代码</td>
|
|
<td>${vv.sub_title}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>合约单位</td>
|
|
<td>${vv.description}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最小跳动价格</td>
|
|
<td>${vv.main_content.price}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最后交易日</td>
|
|
<td>${vv.main_content.last_day}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>日盘交易时间</td>
|
|
<td>${vv.main_content.daily_time}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>夜盘交易时间</td>
|
|
<td>${vv.main_content.night_time}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最后交易日特殊交易时间</td>
|
|
<td>${vv.main_content.special_time}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交易所保证金</td>
|
|
<td>${vv.main_content.margin}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单笔最大下单(手)</td>
|
|
<td>${vv.main_content.single_order}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割方式</td>
|
|
<td>${vv.main_content.delivery_method}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割费用</td>
|
|
<td>${vv.main_content.delivery_fee}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割结算价</td>
|
|
<td>${vv.main_content.settlement_price}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>最后交割日</td>
|
|
<td>${vv.main_content.delivery_date}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割单位</td>
|
|
<td>${vv.main_content.change_deposit}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第一板结算保证金</td>
|
|
<td>${vv.main_content.first_deposit}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第二板结算保证金</td>
|
|
<td>${vv.main_content.second_deposit}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>临近交割月交易所首次保证金调整</td>
|
|
<td>${vv.main_content.margin_adjustment}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割月保证金</td>
|
|
<td>${vv.main_content.monthly_deposit}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>正常涨跌幅</td>
|
|
<td>${vv.main_content.fall_rate}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第一板结算起涨跌幅</td>
|
|
<td>${vv.main_content.first_rate}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>第二板结算起涨跌幅</td>
|
|
<td>${vv.main_content.second_rate}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>般月份单边限仓</td>
|
|
<td>${vv.main_content.warehouse}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割月限仓</td>
|
|
<td>${vv.main_content.month_limit}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>交割前月限仓</td>
|
|
<td>${vv.main_content.before_delivery}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`
|
|
})
|
|
let tableStr = tableStart + tableDom + tableEnd
|
|
$('.levelCont .levelList').eq(index-1).append(tableStr)
|
|
levelLisSelector.eq(index-1).children('.content').children('.cont').eq(0).css('display','block')
|
|
|
|
};
|
|
function createSwiperDom(data,index){
|
|
let swiperStart = `
|
|
<div class="swiperClick swiperClick${index} ">
|
|
<div class="swiper breedSwiper breedSwiper${index}">
|
|
<div class="swiper-wrapper">
|
|
`
|
|
let swiperEnd = `
|
|
</div>
|
|
</div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
`
|
|
let swiperDom = ''
|
|
data.forEach((vv)=>{
|
|
swiperDom += `
|
|
<div class="swiper-slide">
|
|
<div class="img"><img src="${vv.thumbnail.url}" alt=""></div>
|
|
<p>${vv.title}</p>
|
|
</div>
|
|
`
|
|
})
|
|
let swiperStr = swiperStart + swiperDom + swiperEnd
|
|
$('.levelCont .levelList').eq(index-1).append(swiperStr)
|
|
initSwiperSlide()
|
|
initSwiper(index)
|
|
};
|
|
// 初始化swiper
|
|
function initSwiper(index)
|
|
{
|
|
let swiperStr= `.breedSwiper${index}`;
|
|
let clickStr = `.swiperClick${index}`
|
|
new Swiper(swiperStr, {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 76,
|
|
navigation: {
|
|
nextEl: `${clickStr} .swiper-button-next`,
|
|
prevEl: `${clickStr} .swiper-button-prev`,
|
|
},
|
|
breakpoints: {
|
|
320:{
|
|
spaceBetween: 20,
|
|
},
|
|
1080:{
|
|
spaceBetween: 76,
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// 内容切换
|
|
function tableSwitch(){
|
|
console.log(this)
|
|
let thisIndex = $(this).index()
|
|
$(this).addClass('on')
|
|
$(this).siblings().removeClass('on')
|
|
$('.breedBlock .w1280 .content .cont').css('display','none')
|
|
$(this).parents('.swiperClick').siblings('.content').children('.cont').eq(thisIndex).fadeIn()
|
|
}
|
|
|
|
// 初始化品种swiper的样式和点击事件
|
|
function initSwiperSlide()
|
|
{
|
|
let swiperSlideSelector = $('.breedBlock .w1280 .breedSwiper .swiper-wrapper .swiper-slide')
|
|
swiperSlideSelector.eq(0).addClass('on')
|
|
swiperSlideSelector.click(tableSwitch)
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|