<template>
|
<div style="height: 248px;">
|
<!-- :style="'?'':'margin-bottom: 20px;'" -->
|
<div class="wrapper buy-table" style="display:flex;justify-content: space-between; width: 100%;" :style="activeName1 == 'three'?'margin-bottom: 30px;':activeName1 == 'five'?'margin-bottom: 25px;':''">
|
<div class="" style="margin-bottom: 10px;" v-if="activeName1 == 'first' || activeName1 == 'four' || activeName1 == 'start'">
|
<div style="width: 50px;display: flex;justify-content: center;margin-top: 20px;align-items: center;flex-direction: column;cursor: pointer;">
|
<div @click="cut('first')" style=" cursor: pointer; padding: 20px 10px;color: #fff;border-radius: 5px;margin-bottom: 2px;"
|
:class="activeName == 'first'?'current':'currentNone'" class="jiaoyi">
|
<div style="width: 15px;">两融交易</div>
|
</div>
|
<!-- <div @click="cut('two')" :class="activeName == 'two'?'current':'currentNone'" class="jiaoyi" style="padding:20px 10px;color: rgb(255, 255, 255);border-radius: 5px;">
|
<div style="width: 15px;">分仓交易</div>
|
</div> -->
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;width: 100%;">
|
<el-tabs v-model="activeName" class="buy-box-cont" style="width: 47%;">
|
<!-- 两融交易开始 -->
|
<el-tab-pane name="first">
|
<!-- 买 -->
|
<div class="buy-box" style="margin-top: 15px;">
|
<el-form ref="ruleForm" :hide-required-asterisk="true" size="mini" :model="form" label-width="60px">
|
<div class="buy-item" style="display: flex;">
|
<span class="buy-name1">{{detail.name}}</span>
|
<div class="" style="position: relative;">
|
<span class="iconfont icon-triangle-left sanjiao"></span>
|
<span class="buy-code1">{{detail.code}}</span>
|
</div>
|
<span style="font-size:12px;">现价：</span>
|
|
<span style="font-size:12px;color:#B12525;" :class="detail.hcrate < 0 ?'green price':detail.hcrate > 0 ?'red price':'price'">{{detail.nowPrice}}</span>
|
<span style="font-size:12px;margin-left:10px">涨跌幅：</span>
|
<span style="font-size:12px;color:#B12525;" :class="detail.hcrate < 0 ?'green price':detail.hcrate > 0 ?'red price':'price'">{{Number(detail.hcrate).toFixed(3)}}%</span>
|
|
</div>
|
|
|
<el-row class="buy-item">
|
<el-col :span="12"></el-col>
|
<el-col :span="12"></el-col>
|
</el-row>
|
<div style="display: flex;">
|
<div>
|
<div style="display: flex;position: relative;">
|
<el-form-item prop="buyNum" style="margin-bottom:10px;margin-right: 10px;">
|
<el-input placeholder="最小买1手" v-model="form.buyNum" class>
|
<el-select v-model="form.buyNum" title="点击选择手数" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in buyNumList" :key="i.value" :label="i.label" :value="i.value"></el-option>
|
</el-select>
|
<!-- <el-select v-model="form.buyNum" title="点击选择手数" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in buyNumList" :key="i.value" :label="i.label" :value="i.value"></el-option>
|
</el-select> -->
|
</el-input>
|
<span style="position: absolute;right: 6px;top: 0px; font-size: 12px;">手</span>
|
|
<!-- <el-form-item label="手数" prop="buyNum" style="margin-bottom:10px;">
|
<el-input placeholder="手数" v-model="form.buyNum" class="input-with-select">
|
|
<el-button slot="append">手</el-button>
|
</el-input>
|
</el-form-item> -->
|
|
</el-form-item>
|
<el-form-item prop="buyNum" style="margin-bottom:10px;">
|
<el-input placeholder="杠杆" v-model="form.lever" class="input-with-select">
|
<el-select v-model="form.lever" title="点击选择杠杆" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in siteLeverList" :key="i.value" :label="i.label" :value="i.value"></el-option>
|
</el-select>
|
</el-input>
|
<span style="position: absolute;right: 10px;top: 2px; font-size: 12px;">倍</span>
|
</el-form-item>
|
</div>
|
<p class="prompt clearfix">
|
<el-form-item label="方向" prop="buyType">
|
<el-radio-group v-model="form.buyType">
|
<el-radio label="买涨" value="0"></el-radio>
|
<el-radio label="买跌" value="1"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</p>
|
|
<el-row class="buy-item" v-if="!isqihuo">
|
</el-row>
|
<el-row class="buy-item" v-if="isgupiao">
|
<el-col :span="12">
|
<span class="baozheng" style="font-size: 13px;">保证金：</span>
|
<span class="price">{{(price/ form.lever).toFixed(2) || 0}}</span>
|
</el-col>
|
<el-col :span="12">
|
<sapn class="keyong">总手续费：</sapn>
|
<span class="price">{{poundage?poundage:0}}</span>
|
<el-tooltip class="item" effect="dark" :content="'总手续费 = 买入手续费（'+ (settingInfo.buyFee*100) + '%）+ 印花税（'+ (settingInfo.dutyFee*100) + '%） + 点差费（'+ (settingSpreadRate.spreadRate*100).toFixed(2) + '%）'"
|
placement="bottom-end">
|
<!-- <i class="iconfont icon-xiangqing"></i> -->
|
</el-tooltip>
|
</el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="isgupiao">
|
<el-col :span="24"></el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="!isqihuo">
|
<el-col :span="12" v-if="isgupiao">
|
<span class="keyong">需要支付：</span>
|
<span class="price">{{total?total:0}}</span>
|
</el-col>
|
<el-col :span="12" v-if="isgupiao">
|
<span class="keyong">可用资金：{{$store.state.userInfo.enableAmt}}元</span>
|
</el-col>
|
<el-col :span="12" v-if="!isgupiao">
|
<span class="keyong">需要支付：</span>
|
<span class="price">{{total?total:0}}</span>
|
</el-col>
|
<el-col :span="12" v-if="!isgupiao">
|
<span class="keyong">可用资金：{{$store.state.userInfo.enableIndexAmt}}元</span>
|
</el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="isqihuo">
|
<el-col :span="24">
|
<span class="keyong">需要支付：</span>
|
<span class="price">{{total?total:0}} {{futuresInfo.coinCode}}</span>
|
≈
|
<span class="price">{{cnyTotal?cnyTotal:0}} CNY</span>
|
</el-col>
|
<el-col :span="24">
|
<p class="prompt clearfix" v-if="isqihuo">
|
<!-- pull-right -->
|
<span class="keyong">可用资金：{{$store.state.userInfo.enableFuturesAmt}}元</span>
|
</p>
|
</el-col>
|
</el-row>
|
|
<el-row class="buy-item" style="font-size:10px;">
|
<el-checkbox class="check-box" v-model="agree" name="type" style="font-size:10px;"></el-checkbox>我同意
|
<a href="javascript:;" @click="tradeDialogVisible = true">《{{siteInfo.tradeAgreeTitle}}》</a>
|
</el-row>
|
<el-dialog :title="siteInfo.tradeAgreeTitle" class="agree-dialog" :center="true" :visible.sync="tradeDialogVisible"
|
width="80%">
|
<div class="dialog-iframe">
|
<div class="content" style="margin:20px;background:#fff;border-radius:5px;margin-top:60px;line-height:200%;">
|
<p v-for="item in tradeAgreeText.split('。')" :key="item">{{item}}。</p>
|
</div>
|
<!-- <iframe class="iframe-box" :src="$store.state.siteInfo.tradeAgree" frameborder="0"></iframe> -->
|
<div slot="footer" class="text-center dialog-footer clearfix">
|
<el-button type="primary" @click="agreeTrade">我已阅读并同意{{siteInfo.tradeAgreeTitle}}</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</el-form>
|
<div>
|
<el-button :loading="loadingBtn" class="buy-button ru" type="primary" @click="onSubmit('ruleForm')">入仓</el-button>
|
</div>
|
</div>
|
</el-tab-pane>
|
<!-- 两融交易结束 -->
|
|
<!-- 分仓交易开始 -->
|
<el-tab-pane name="two">
|
<!-- 买 -->
|
<!-- :rules="ruleFunds" -->
|
<div class="buy-box" style="margin-top: 15px;">
|
<el-form ref="ruleForm1" :hide-required-asterisk="true" size="mini" :model="form" label-width="60px">
|
<div class="buy-item" style="display: flex; align-items: center;">
|
<span class="buy-name1">{{detail.name}}</span>
|
<div class="" style="position: relative;">
|
<span class="iconfont icon-triangle-left sanjiao"></span>
|
<span class="buy-code1">{{detail.code}}</span>
|
</div>
|
<span style="font-size:12px;">现价：</span>
|
<span style="font-size:12px;color:#B12525;" :class="detail.hcrate < 0 ?'green price':detail.hcrate > 0 ?'red price':'price'">{{detail.nowPrice}}</span>
|
<span style="font-size:12px;margin-left:10px">涨跌幅：</span>
|
<span style="font-size:12px;color:#B12525;" :class="detail.hcrate < 0 ?'green price':detail.hcrate > 0 ?'red price':'price'">{{Number(detail.hcrate).toFixed(3)}}%</span>
|
<div class="zi " style="margin-left: 5px;width: 23%;display: flex;align-items: center;">
|
<span style="font-size: 10px;">子:</span>
|
<el-select v-model="form.subaccountNumber" title="点击选择子账户" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in subaccountList" :key="i.subaccountNumber" :label="i.subaccountNumber" :value="i.subaccountNumber"></el-option>
|
</el-select>
|
</div>
|
</div>
|
<el-row class="buy-item">
|
<el-col :span="12"></el-col>
|
<el-col :span="12"></el-col>
|
</el-row>
|
<div>
|
<div style="display: flex;">
|
<el-form-item prop="buyNum" style="margin-bottom:10px;position: relative;">
|
<el-input placeholder="最小买1手" v-model="form.buyNum" class="input-with-select">
|
<el-select v-model="form.buyNum" title="点击选择手数" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in buyNumList" :key="i.value" :label="i.label" :value="i.value"></el-option>
|
</el-select>
|
<!-- <el-button slot="append">手</el-button> -->
|
</el-input>
|
<span style="position: absolute;right: 6px;top: 0px; font-size: 12px;">手</span>
|
</el-form-item>
|
<el-form-item prop="buyNum" style="margin-bottom:10px;position: relative;">
|
<el-input placeholder="杠杆" v-model="form.lever" class="input-with-select">
|
<el-select v-model="form.lever" title="点击选择杠杆" slot="prepend" placeholder="请选择">
|
<el-option v-for="i in siteLeverList" :key="i.value" :label="i.label" :value="i.value"></el-option>
|
</el-select>
|
<!-- <el-button slot="append">倍</el-button> -->
|
</el-input>
|
<span style="position: absolute;right: 10px;top: 2px; font-size: 12px;">倍</span>
|
</el-form-item>
|
</div>
|
<p class="prompt clearfix">
|
<!-- <span class="pull-left">最小购买{{Number(settingInfo.buyMinNum)/100}}手</span> -->
|
<!-- <span class="pull-right">最大可购买{{Number(settingInfo.buyMaxNum)/100}}手</span> -->
|
<el-form-item label="方向" prop="buyType">
|
<el-radio-group v-model="form.buyType">
|
<el-radio label="买涨" value="0"></el-radio>
|
<el-radio label="买跌" value="1"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</p>
|
|
<el-row class="buy-item" v-if="!isqihuo">
|
<!-- <el-col :span="8">{{form.buyNum * 100}}股</el-col> -->
|
<!-- <el-col class="text-right" :span="16">市值：{{price}}元</el-col> -->
|
</el-row>
|
<el-row class="buy-item" v-if="isgupiao">
|
<el-col :span="12">
|
<span style="font-size: 13px;">保证金：</span>
|
<span class="price">{{(price/ form.lever).toFixed(2) || 0}}</span>
|
</el-col>
|
<el-col :span="12">
|
<sapn class="keyong">总手续费：</sapn>
|
<span class="price">{{poundage?poundage:0}}</span>
|
<el-tooltip class="item" effect="dark" :content="'总手续费 = 买入手续费（'+ (settingInfo.buyFee*100) + '%）+ 印花税（'+ (settingInfo.dutyFee*100) + '%） + 点差费（'+ (settingSpreadRate.spreadRate*100).toFixed(2) + '%）'"
|
placement="bottom-end">
|
<!-- <i class="iconfont icon-xiangqing"></i> -->
|
</el-tooltip>
|
<!-- <span class="prompt pull-right">最小购买{{settingInfo.buyMinAmt}}元</span> -->
|
</el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="isgupiao">
|
<el-col :span="24"></el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="!isqihuo">
|
<el-col :span="12">
|
<sapn class="keyong">需要支付：</sapn>
|
<span class="price">{{total?total:0}}</span>
|
</el-col>
|
<el-col :span="12">
|
<span class="keyong">可用资金：{{$store.state.userInfo.enableAmt}}元</span>
|
</el-col>
|
</el-row>
|
<el-row class="buy-item" v-if="isqihuo">
|
<el-col :span="24">
|
<sapn class="keyong">需要支付：</sapn>
|
<span class="price">{{total?total:0}} {{futuresInfo.coinCode}}</span>
|
≈
|
<span class="price">{{cnyTotal?cnyTotal:0}} CNY</span>
|
</el-col>
|
</el-row>
|
<p class="prompt clearfix" v-if="isqihuo">
|
<!-- pull-right -->
|
<span class="keyong">可用资金：{{this.$store.state.userInfo.userFuturesAmt}}元</span>
|
</p>
|
<el-row class="buy-item" style="font-size:10px;">
|
<el-checkbox class="check-box" v-model="agree" name="type"></el-checkbox>我同意
|
<a href="javascript:;" @click="tradeDialogVisible = true">《{{siteInfo.tradeAgreeTitle}}》</a>
|
</el-row>
|
</div>
|
</el-form>
|
<div>
|
<el-button :loading="loadingBtn" class="buy-button ru" type="primary" @click="onFundsSubmit('ruleForm1')">入仓</el-button>
|
</div>
|
</div>
|
</el-tab-pane>
|
<!-- 分仓交易结束 -->
|
</el-tabs>
|
<div style="position: relative; width: 47.5%;margin-right: 10px;">
|
<buy2 ref="buy2" :activeName="activeName"></buy2>
|
<div class="fage">
|
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
|
<div class="bottom-new-box ">
|
<div class="scrollBoxCont" ref="marqueeBox">
|
<div style="display: flex;" ref="marquee" v-for="(item,index) in transactionNoticeList" :key="index">
|
<div class="bottom-left" style="width: 40%;">
|
<div @click="selectDetails(item,index)" style="cursor: pointer; font-size: 12px;display: flex; justify-content: space-between;padding:6px 0;">
|
<div class="news-list" style="display: flex;">
|
<span style="width: 100px;" v-if="index < 1">【通知公告】</span>
|
<span>•</span>
|
<span>•</span>
|
<p>{{item.artTitle}}</p>
|
</div>
|
<div class="showTime">{{item.addTime}}</div>
|
</div>
|
</div>
|
<div class="bottom-right" style="width: 40%;margin-left: 95px;">
|
<div @click="selectDetails(item,index)" style="cursor: pointer;font-size: 12px;display: flex; justify-content: space-between;padding:6px 0;">
|
<div class="news-list" style="display: flex;">
|
<span>•</span>
|
<span>•</span>
|
<p>{{item.artTitle}}</p>
|
</div>
|
<div class="showTime">{{item.addTime}}</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</div>
|
|
<BuyFutures :handleOptions3="handleOptions3" :futuresInfo="futuresInfo" ref="futuresDialog" />
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../../axios/api";
|
import BuyFutures from "./futuresbuy-dialog";
|
import comNone from '@/pages/transaction/index'
|
import buy2 from "./buy2.vue";
|
|
export default {
|
components: {
|
BuyFutures,
|
buy2,
|
comNone
|
},
|
props: {
|
detailsCont: {
|
|
},
|
cutIndex: {
|
|
},
|
// settingInfo:{
|
// type:Object,
|
// default(){
|
// return {
|
// buyMinAmt:'',
|
// buyMinNum:'',
|
// buyMaxNum:'',
|
// }
|
// }
|
// },
|
handleOptions2: {
|
type: Function,
|
default: function() {},
|
},
|
handleOptions3: {
|
type: Function,
|
default: function() {},
|
},
|
},
|
data() {
|
return {
|
siteInfo:{
|
|
},
|
activeName1:'first',
|
tabPosition: "left",
|
tradeDialogVisible: false, //
|
loading: false,
|
detail: "", // 当前股票的详情
|
activeName: "first",
|
tradeAgreeText: "",
|
list: [{
|
name: "卖五",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "卖四",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "卖三",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "卖二",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "卖一",
|
price: "",
|
volumes: "",
|
},
|
],
|
listbuy: [{
|
name: "买一",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "买二",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "买三",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "买四",
|
price: "",
|
volumes: "",
|
},
|
{
|
name: "买五",
|
price: "",
|
volumes: "",
|
},
|
],
|
buyNumList: [{
|
label: "50手",
|
value: 50,
|
}, ],
|
siteLeverList: [],
|
form: {
|
buyNum: "",
|
buyType: "",
|
lever: "",
|
subaccountNumber: "",
|
},
|
rule: {
|
buyNum: [{
|
required: true,
|
message: "请输入或选择买入手数",
|
trigger: "blur",
|
}, ],
|
buyType: [{
|
required: true,
|
message: "请选择买卖方向",
|
trigger: "blur",
|
}, ],
|
},
|
ruleFunds: {
|
subaccountNumber: [{
|
required: true,
|
message: "请选择子账户",
|
trigger: "blur",
|
}, ],
|
buyNum: [{
|
required: true,
|
message: "请输入或选择买入手数",
|
trigger: "blur",
|
}, ],
|
buyType: [{
|
required: true,
|
message: "请选择买卖方向",
|
trigger: "blur",
|
}, ],
|
},
|
|
settingInfo: {}, // 设置信息
|
agree: false, // 协议
|
buyNumber: 0, // 下单次数
|
loadingBtn: false,
|
futuresInfo: {}, // 期货信息
|
settingSpreadRate: {
|
spreadRate: 0,
|
},
|
isqihuo: false,
|
isgupiao: false,
|
exchangeNumber: "",
|
subaccountList: {},
|
pageNum: 1,
|
newsList: [],
|
width: 0,
|
temi: null
|
};
|
},
|
watch: {
|
change(newVal, oldVal) {
|
if (newVal !== oldVal) {
|
this.getDetail(); // 分时数据
|
}
|
if (!newVal) {
|
clearInterval(this.timer);
|
}
|
},
|
|
},
|
computed: {
|
poundage() {
|
//手续费= 买入手续费+印花税+点差费
|
if (this.form.buyNum) {
|
let payfee = (this.detail.nowPrice * this.form.buyNum * 100).toFixed(2);
|
return (
|
payfee * this.settingInfo.buyFee +
|
payfee * this.settingInfo.dutyFee +
|
payfee * this.settingSpreadRate.spreadRate
|
).toFixed(2);
|
//+ (payfee * this.settingInfo.dutyFee).toFixed(2) + (payfee * this.settingSpreadRate.spreadRate).toFixed(2)
|
} else {
|
return 0;
|
}
|
},
|
total() {
|
if (this.form.buyNum) {
|
if (this.$route.query.code.indexOf("hf_") != -1) {
|
return (
|
(this.detail.depositAmt * this.form.buyNum) /
|
this.form.lever
|
).toFixed(2);
|
} else if (
|
this.$route.query.code.indexOf("sh") != -1 ||
|
this.$route.query.code.indexOf("sz") != -1
|
) {
|
return (
|
(this.detail.depositAmt * this.form.buyNum) /
|
this.form.lever
|
).toFixed(2);
|
} else {
|
if (
|
this.settingSpreadRate == undefined ||
|
this.settingSpreadRate.spreadRate == undefined
|
) {
|
this.settingSpreadRate.spreadRate = 0;
|
}
|
let payfee =
|
(this.detail.nowPrice * this.form.buyNum * 100) / this.form.lever; // this.form.lever
|
return (
|
payfee +
|
payfee * this.settingInfo.buyFee +
|
payfee * this.settingInfo.dutyFee +
|
payfee * this.settingSpreadRate.spreadRate
|
).toFixed(2);
|
}
|
} else {
|
return 0;
|
}
|
// 需支付总价 = 现价 * 股（1手 = 100股）/ 杠杆倍数
|
},
|
cnyTotal() {
|
// 价钱 * 汇率 转为 人民币
|
return (this.total * this.exchangeNumber).toFixed(2);
|
},
|
price() {
|
if (this.form.buyNum) {
|
return (this.detail.nowPrice * this.form.buyNum * 100).toFixed(2);
|
} else {
|
return 0;
|
}
|
// 市值价 = 现价 * 股（1手 = 100股）
|
},
|
change() {
|
return this.$route.query.code;
|
},
|
},
|
created() {
|
this.timer = setInterval(this.getDetail, 5000);
|
setInterval(()=>{
|
this.activeName1 = window.activeName1 || 'first'
|
},100)
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
},
|
mounted() {
|
|
this.getDetail();
|
this.getSettingInfo();
|
this.getInfoSite();
|
this.getUserSubaccount();
|
this.getNoticeList();
|
setTimeout(() => {
|
this.runMarquee()
|
// this.$on('changeActiveName',(res)=>{
|
// console.log(res)
|
// })
|
}, 1000)
|
// this.$nextTick(()=>{
|
// // var scrollBoxDOM = document.getElementById('scrollBox')
|
// var scrollBoxDOM = this.$refs
|
// console.log(scrollBoxDOM.scrollBox,'333333333333333')
|
// // setInterval(()=>{
|
// // // scrollBoxDOM.style.transform = 'translateX(10px)'
|
// // },1000)
|
// })
|
},
|
beforeDestroy() {
|
clearInterval(this.temi)
|
},
|
methods: {
|
runMarquee() {
|
// 获取文字 计算后宽度
|
var width = this.$refs.marquee[0].getBoundingClientRect().width;
|
var marquee = this.$refs.marqueeBox;
|
var disx = 0; // 位移距离
|
// console.log(width)
|
// //设置位移
|
this.temi = setInterval(() => {
|
disx--; // disx-=1; 滚动步长
|
if (-disx >= width) {
|
disx = 10; // 如果位移超过文字宽度，则回到起点 marquee-list的margin值
|
}
|
// marquee.style.transform =
|
marquee.style.transform = 'translateX(' + disx + 'px)'
|
}, 30) //滚动速度
|
},
|
async getNewsList(query) {
|
// 获取资讯列表接口（交易大厅左侧小列表）
|
|
var data = await api.getNewsList(query);
|
if (data.status == 0) {
|
// this.newsList = data.data.list;
|
return data.data.list;
|
}
|
},
|
// 时间转换
|
switchData(list, time) {
|
list.forEach((item) => {
|
var tempStr = item[time] + "";
|
var timestamp = tempStr.slice(0, tempStr.length - 3);
|
var newDate = new Date();
|
newDate.setTime(timestamp * 1000);
|
item[time] = newDate.toLocaleDateString();
|
});
|
},
|
async selectDetails(item, index) {
|
// 选择详情
|
|
var data = await api.getNewsDetailList({
|
id: item.id,
|
});
|
if (data.status == 0) {
|
// this.optionalIndex = item.type
|
var query = {
|
pageNum: 1,
|
pageSize: 15,
|
type: item.type,
|
};
|
// this.newType = item.type
|
// var newsList = await this.getNewsList(query);
|
// this.switchData(newsList, "showTime");
|
this.$emit('selectDetailsItem', data.data)
|
}
|
var data = await api.updateNewsViews({
|
id: item.id,
|
});
|
if (data.status == 0) {}
|
},
|
async getNoticeList() {
|
// 获取交易大厅-中间部分-通知公告
|
let data = await api.getTransactionNoticeList({
|
pageSize: 10,
|
});
|
if (data.status == 0) {
|
this.switchData(data.data.list, "addTime");
|
this.transactionNoticeList = data.data.list;
|
}
|
},
|
cut(type) {
|
var code = this.$route.query.code
|
this.activeName = type;
|
this.$refs.buy2.activeName = type;
|
if(type == 'first'){
|
api.findUserPositionByCode({
|
stockCode: code
|
}).then(data=>{
|
if (data.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
}else{
|
api.findUserFundsPositionByCode({
|
fundsCode:code
|
}).then(res=>{
|
if (res.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
}
|
|
},
|
async queryExchange() {
|
// 基币汇率
|
let data = await api.queryExchange({
|
coinCode: this.futuresInfo.coinCode,
|
});
|
if (data.status === 0) {
|
// 成功
|
this.exchangeNumber = data.data;
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async getDetail() {
|
if (this.$route.query.code.indexOf("hf_") != -1) {
|
// 期货
|
this.isqihuo = true;
|
this.isgupiao = false;
|
} else if (
|
this.$route.query.code.indexOf("sh") != -1 ||
|
this.$route.query.code.indexOf("sz") != -1
|
) {
|
// 指数
|
this.isqihuo = false;
|
this.isgupiao = false;
|
} else {
|
// 股票
|
this.isgupiao = true;
|
this.isqihuo = false;
|
}
|
if (this.$route.query.futuresInfo != undefined) {
|
this.futuresInfo = this.$route.query.futuresInfo;
|
this.queryExchange(); // 获取当前基币汇率
|
}
|
let opts = {
|
code: this.$route.query.code,
|
};
|
let data = await api.getSingleStock(opts);
|
if (data.status === 0) {
|
this.detail = data.data;
|
// 卖
|
this.list[0].price = data.data.sell5;
|
this.list[1].price = data.data.sell4;
|
this.list[2].price = data.data.sell3;
|
this.list[3].price = data.data.sell2;
|
this.list[4].price = data.data.sell1;
|
this.list[0].volumes = data.data.sell5_num;
|
this.list[1].volumes = data.data.sell4_num;
|
this.list[2].volumes = data.data.sell3_num;
|
this.list[3].volumes = data.data.sell2_num;
|
this.list[4].volumes = data.data.sell1_num;
|
// 买
|
this.listbuy[0].price = data.data.buy1;
|
this.listbuy[1].price = data.data.buy2;
|
this.listbuy[2].price = data.data.buy3;
|
this.listbuy[3].price = data.data.buy4;
|
this.listbuy[4].price = data.data.buy5;
|
this.listbuy[0].volumes = data.data.buy1_num;
|
this.listbuy[1].volumes = data.data.buy2_num;
|
this.listbuy[2].volumes = data.data.buy3_num;
|
this.listbuy[3].volumes = data.data.buy4_num;
|
this.listbuy[4].volumes = data.data.buy5_num;
|
if (
|
this.$route.query.code.indexOf("hf_") == -1 &&
|
this.$route.query.code.indexOf("sh") == -1 &&
|
this.$route.query.code.indexOf("sz") == -1
|
) {
|
this.findSpreadRateOne();
|
}
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async getInfoSite() {
|
// 获取网站信息
|
let result = await api.getInfoSite();
|
if (result.status === 0) {
|
this.siteInfo = result.data;
|
this.tradeAgreeText = this.siteInfo.tradeAgreeText;
|
} else {
|
this.$message.error(result.msg);
|
}
|
},
|
async getUserSubaccount() {
|
// 用户操盘中子账户
|
let result = await api.getUserSubaccount();
|
if (result.status === 0) {
|
if (result.data.list.length > 0) {
|
this.subaccountList = result.data.list;
|
if (
|
this.$route.query.sub != undefined &&
|
this.$route.query.sub != ""
|
) {
|
this.form.subaccountNumber = this.$route.query.sub;
|
} else {
|
this.form.subaccountNumber = this.subaccountList[0].subaccountNumber;
|
}
|
}
|
} else {
|
this.$message.error(result.msg);
|
}
|
},
|
async findSpreadRateOne() {
|
// 查询点差费率
|
let opts = {
|
applies: this.detail.hcrate, // 涨跌幅
|
turnover: this.total, //成交额
|
unitprice: this.detail.nowPrice, //股票单价
|
code: this.$route.query.code,
|
};
|
let data = await api.findSpreadRateOne(opts);
|
if (data.status === 0) {
|
// 成功
|
if (data.data != undefined) {
|
this.settingSpreadRate = data.data;
|
}
|
// console.log(this.settingSpreadRate)
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async getSettingInfo() {
|
// 网站设置信息
|
let data = await api.getSetting();
|
if (data.status === 0) {
|
// 成功
|
this.settingInfo = data.data;
|
// 杠杆倍数，如果登录并且有代理先走代理设置杠杆
|
if (
|
this.$store.state.userInfo !== undefined &&
|
this.$store.state.userInfo !== null &&
|
this.$store.state.userInfo.phone !== "" &&
|
this.$store.state.userInfo.siteLever !== null
|
) {
|
this.form.lever = this.$store.state.userInfo.siteLever.split("/")[0];
|
this.siteLeverList = [];
|
for (
|
let i = 0; i < this.$store.state.userInfo.siteLever.split("/").length; i++
|
) {
|
let val = this.$store.state.userInfo.siteLever.split("/")[i];
|
let item = {
|
label: val + "倍",
|
value: val,
|
};
|
this.siteLeverList.push(item);
|
}
|
} else {
|
this.form.lever = data.data.siteLever.split("/")[0];
|
this.siteLeverList = [];
|
for (let i = 0; i < data.data.siteLever.split("/").length; i++) {
|
let val = data.data.siteLever.split("/")[i];
|
let item = {
|
label: val + "倍",
|
value: val,
|
};
|
this.siteLeverList.push(item);
|
}
|
}
|
|
this.buyNumList = [];
|
for (let i = 0; i < 10; i++) {
|
if (i === 0 || i % 2 === 1) {
|
let val = data.data.buyMinNum * i + data.data.buyMinNum;
|
let item = {
|
label: val / 100 + "手",
|
value: val / 100,
|
};
|
this.buyNumList.push(item);
|
}
|
}
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async onSubmit(formName) {
|
// 先判断是否登录
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
if (!this.$store.state.haslogin) {
|
this.$store.state.loginIsShow = true;
|
this.$message.error("请先登录");
|
return;
|
}
|
|
if (!this.agree) {
|
this.$message.error("阅读并同意注册协议才能下单");
|
return;
|
}
|
var regisKong = /^\s*$/g;
|
if (regisKong.test(this.form.buyNum)) {
|
this.$message.error("请输入或选择买入手数");
|
return
|
}
|
if (regisKong.test(this.form.lever)) {
|
|
this.$message.error("请输入或选择杠杆");
|
return
|
}
|
if (regisKong.test(this.form.buyType)) {
|
|
this.$message.error("请选择买卖方向");
|
return
|
}
|
|
this.loadingBtn = true;
|
if (this.$route.query.code.indexOf("hf_") != -1) {
|
//期货买入
|
var qCode = this.$route.query
|
let opts = {
|
FuturesId: this.detail.id,
|
buyNum: this.form.buyNum ? this.form.buyNum : 0,
|
buyType: this.form.buyType === "买涨" ? 0 : 1,
|
lever: this.form.lever ? this.form.lever : 0,
|
};
|
let data = await api.buyFutures(opts);
|
if (data.status === 0) {
|
this.buyNumber++;
|
// this.handleOptions3(this.buyNumber)
|
this.$message.success(data.data);
|
this.getUserInfo(); // 刷新
|
|
|
api.findUserFuturesPositionByCode({
|
futuresGid: qCode.code
|
}).then(data=>{
|
if (data.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
|
|
} else {
|
this.$message.error(data.msg);
|
}
|
} else if (
|
this.$route.query.code.indexOf("sh") != -1 ||
|
this.$route.query.code.indexOf("sz") != -1
|
) {
|
//指数买入
|
var zCode = this.$router.query
|
let opts = {
|
indexId: this.detail.id,
|
buyNum: this.form.buyNum ? this.form.buyNum : 0,
|
buyType: this.form.buyType === "买涨" ? 0 : 1,
|
lever: this.form.lever ? this.form.lever : 0,
|
};
|
this.loadingBtn = true;
|
let data = await api.indexBuy(opts);
|
if (data.status === 0) {
|
this.buyNumber++;
|
// this.handleOptions2(this.buyNumber)
|
this.$message.success(data.data);
|
this.getUserInfo(); // 刷新
|
|
|
|
api.findUserIndexPositionByCode({
|
indexGid: zCode.code
|
}).then(data=>{
|
console.log(data)
|
if (data.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
|
|
} else {
|
this.$message.error(data.msg);
|
}
|
} else {
|
// 股票买入
|
var gCode = this.$route.query
|
let opts = {
|
stockId: this.detail.id,
|
buyNum: this.form.buyNum ? this.form.buyNum * 100 : 0,
|
buyType: this.form.buyType === "买涨" ? 0 : 1,
|
lever: this.form.lever,
|
};
|
let data = await api.buy(opts);
|
if (data.status === 0) {
|
this.buyNumber++;
|
this.handleOptions2(this.buyNumber);
|
this.getUserInfo();
|
this.$message.success(data.data);
|
|
|
|
var data = await api.findUserPositionByCode({
|
stockCode: gCode.code
|
})
|
if (data.status == 0) {
|
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
|
|
} else {
|
this.$message.error(data.msg);
|
}
|
}
|
|
this.loadingBtn = false;
|
}
|
});
|
},
|
onFundsSubmit(formName) {
|
// 先判断是否登录
|
if (!this.$store.state.haslogin) {
|
this.$store.state.loginIsShow = true;
|
this.$message.error("请先登录");
|
return;
|
}
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
if (!this.agree) {
|
this.$message.error("阅读并同意注册协议才能下单");
|
return;
|
}
|
var regisKong = /^\s*$/g;
|
if(regisKong.test(this.ruleFunds.softinputNavBar)){
|
this.$message.error("请选择子账户");
|
return
|
}
|
if (regisKong.test(this.form.buyNum)) {
|
this.$message.error("请输入或选择买入手数");
|
return
|
}
|
if (regisKong.test(this.form.lever)) {
|
|
this.$message.error("请输入或选择杠杆");
|
return
|
}
|
if (regisKong.test(this.form.buyType)) {
|
|
this.$message.error("请选择买卖方向");
|
return
|
}
|
this.loadingBtn = true;
|
var grCode = this.$route.query
|
// 股票买入
|
let opts = {
|
stockId: this.detail.id,
|
buyNum: this.form.buyNum ? this.form.buyNum * 100 : 0,
|
buyType: this.form.buyType === "买涨" ? 0 : 1,
|
lever: this.form.lever,
|
subaccountNumber: this.form.subaccountNumber,
|
};
|
|
|
let data = await api.buyFunds(opts);
|
if (data.status === 0) {
|
this.buyNumber++;
|
this.handleOptions2(this.buyNumber);
|
this.getUserInfo();
|
this.$message.success(data.data);
|
|
|
api.findUserFundsPositionByCode({
|
fundsCode:code
|
}).then(res=>{
|
if (res.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
|
} else {
|
this.$message.error(data.msg);
|
}
|
|
this.loadingBtn = false;
|
}
|
});
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
this.$store.state.userInfo = data.data;
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async getOpation() {
|
// 获取是不是已添加自选
|
let opts = {
|
code: this.$route.query.code,
|
};
|
let data = await api.isOption(opts);
|
if (data.status === 0) {
|
// 0 --> 未添加
|
this.isOptionOpt = false;
|
} else {
|
this.isOptionOpt = true;
|
}
|
},
|
agreeTrade() {
|
// 同意注册协议协议
|
this.agree = true;
|
this.tradeDialogVisible = false;
|
},
|
toTransaction3(row, column, event) {
|
row.nowPrice = this.detail.nowPrice;
|
// 期货交易 先判断是否登录
|
if (this.$store.state.haslogin) {
|
if (+row.transState === 1) {
|
this.futuresInfo = row;
|
this.$refs.futuresDialog.DialogVisible = true;
|
} else {
|
this.$message.error("该期货暂不能交易!");
|
}
|
} else {
|
this.$store.state.loginIsShow = true;
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
/deep/ .el-checkbox__inner {
|
width: 11px;
|
height: 11px;
|
}
|
|
.fage {
|
position: absolute;
|
left: -15px;
|
width: 1px;
|
height: 157px;
|
background-color: #ccc;
|
opacity: 0.2;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
|
.red-bg {
|
.sanjiao {
|
position: absolute;
|
color: #C11815;
|
top: 4px;
|
left: 4px;
|
font-size: 10px;
|
}
|
|
.scrollBoxCont {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
}
|
|
.bottom-new-box {
|
overflow: hidden;
|
height: 29px;
|
width: 100%;
|
background-color: #E5E5E5;
|
padding: 0 15px;
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
}
|
|
.news-list {
|
width: 100%;
|
|
p {
|
width: 90%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.bottom-right p {
|
width: 80%;
|
}
|
}
|
}
|
|
.black-bg {
|
.sanjiao {
|
position: absolute;
|
color: #C11815;
|
top: 4px;
|
left: 4px;
|
font-size: 10px;
|
}
|
|
.scrollBoxCont {
|
align-items: center;
|
display: flex;
|
height: 100%;
|
}
|
|
.bottom-new-box {
|
overflow: hidden;
|
height: 29px;
|
width: 100%;
|
background-color: #343434;
|
padding: 0 15px;
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
}
|
|
.news-list {
|
width: 100%;
|
|
p {
|
width: 90%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.bottom-right p {
|
width: 80%;
|
}
|
}
|
}
|
|
.black-bg .jiaoyi:hover {
|
background: #09576d;
|
}
|
|
.red-bg .jiaoyi:hover {
|
background: rgb(129, 14, 12);
|
}
|
|
/deep/ .el-tabs__nav-scroll {
|
height: 25px;
|
}
|
|
.buy-box .buy-item[data-v-27e7503f] {
|
// margin-bottom: 10px;
|
}
|
|
.el-form-item--mini.el-form-item,
|
.el-form-item--small.el-form-item {
|
margin: 0 !important;
|
}
|
|
/deep/ .el-form-item__content {
|
margin: 0 30px 0 0 !important;
|
}
|
|
.buy-box-cont {
|
margin-left: 20px;
|
box-shadow: none !important;
|
}
|
|
.nowprice-box {
|
height: 40px;
|
line-height: 38px;
|
color: #8b97b0;
|
|
.price {
|
font-size: 16px;
|
}
|
}
|
|
.transaction-table .buy-table {
|
/deep/ th.is-leaf {
|
display: none;
|
}
|
}
|
|
.buy-box {
|
.buy-item {
|
margin-bottom: 6px;
|
|
.price {
|
font-size: 16px;
|
}
|
}
|
|
.prompt {
|
font-size: 12px;
|
color: #606266;
|
margin-top: 10px;
|
}
|
|
.buy-name {
|
font-size: 16px;
|
color: #efbb53;
|
}
|
|
.buy-code {
|
color: #4c5770;
|
font-size: 12px;
|
margin-left: 10px;
|
}
|
|
.buy-button {
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
width: 92%;
|
height: 30px;
|
margin-bottom: 9px;
|
line-height: 5px;
|
}
|
|
.check-box {
|
margin-right: 10px;
|
}
|
|
/deep/ .el-form-item__label {
|
color: #8b97b0;
|
text-align: left;
|
}
|
|
// 涨
|
/deep/ .el-radio__input.is-checked+.el-radio__label {
|
color: #c11815;
|
}
|
|
/deep/ .el-radio__input.is-checked .el-radio__inner {
|
border-color: #c11815;
|
background: #c11815;
|
}
|
|
/deep/ .el-radio {
|
color: #8b97b0;
|
}
|
}
|
|
.dialog-iframe {
|
.iframe-box {
|
width: 100%;
|
height: 460px;
|
}
|
|
.dialog-footer {
|
// height: 300px;
|
margin-top: 20px;
|
}
|
}
|
</style>
|
