234 lines
7.7 KiB
Vue
234 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-table :data="datalist" style="width: 100%">
|
|
<el-table-column prop="code" label="交易品种" width="100" align="center"/>
|
|
<el-table-column prop="currency" label="名称" align="center" />
|
|
<el-table-column label="卖价" align="center" prop="sellPic"/>
|
|
<el-table-column label="买价" align="center" prop="buyPic" />
|
|
<el-table-column prop="diffAmo" label="涨跌金额" align="center" />
|
|
<el-table-column prop="diffPer" label="涨跌率" align="center" />
|
|
<el-table-column prop="range" label="振幅" align="center" />
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" size="mini" @click="trading(scope.row)">交易</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination :total="10" />
|
|
<el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
|
|
<el-tab-pane
|
|
v-for="(item, index) in tabsArr"
|
|
:key="index"
|
|
:label="item.label"
|
|
:name="item.name"
|
|
>
|
|
<components :is="item.name" v-if="item.name == nowName" :id="id"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- 交易 -->
|
|
<el-dialog title="交易" :visible.sync="colseDialogVisible" width="30%" append-to-body>
|
|
<el-form :model="tradingVolume" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="交易品种:">
|
|
<el-select v-model="tradingVolume.tradingCode" placeholder="活动区域" style="width: 100%">
|
|
<el-option :label="tradingVolume.code" :value="tradingVolume.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="名 称:">
|
|
<el-input v-model="tradingVolume.name" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="类 型:">
|
|
<el-select v-model="tradingVolume.transactionType" placeholder="请选择开仓类型" style="width: 100%" @change="transaction">
|
|
<el-option label="市价开仓" value="市价开仓" />
|
|
<el-option label="挂单开仓" value="挂单开仓" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="RegistrationVisible" label="买卖类型:">
|
|
<el-select placeholder="活动区域" style="width: 100%" v-model="tradingVolume.buySellType">
|
|
<el-option label="限价买进" value="buyLimit" />
|
|
<el-option label="限价卖出" value="sellLimit" />
|
|
<el-option label="止损买进" value="buyStop" />
|
|
<el-option label="止损卖出" value="sellStop"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="tradingVolume.transactionType !== '挂单开仓'" label="买 卖">
|
|
<el-radio-group v-model="tradingVolume.buySellType">
|
|
<el-radio label="买入" ></el-radio>
|
|
<el-radio label="卖出" ></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="交 易 量:">
|
|
<el-input v-model="tradingVolume.transactionVolume" />
|
|
</el-form-item>
|
|
<el-form-item v-if="RegistrationVisible" label="价 位:">
|
|
<el-input v-model="tradingVolume.priceCommission" />
|
|
</el-form-item>
|
|
<div class="dialog-inline" style="display: flex">
|
|
<el-form-item label="止 损:">
|
|
<el-input placeholder="请输入" v-model="tradingVolume.stopLoss" />
|
|
</el-form-item>
|
|
<el-form-item label="止 盈:">
|
|
<el-input placeholder="请输入" v-model="tradingVolume.stopWin" />
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item v-if="RegistrationVisible" label="有效期限">
|
|
<el-date-picker v-model="tradingVolume.validityTime" style="width: 100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
|
|
</el-form-item>
|
|
<el-form-item label="可用资金:">
|
|
<template>
|
|
<span style=" font-size: 18px; font-weight: bold; font-family: Microsoft YaHei; color: #1d2129; ">9661.00美元</span>
|
|
<div class="price">6.90494 / 6.90498</div>
|
|
</template>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="determine">确定</el-button>
|
|
<el-button type="info" @click="colseDialogVisible = false">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import tabs1 from './components/current.vue'
|
|
import tabs3 from './components/deals.vue'
|
|
import tabs2 from './components/orders.vue'
|
|
import * as Simulated from "@/api/Simulated.js"
|
|
import { getmemberId } from "@/utils/auth.js"
|
|
export default {
|
|
props:{
|
|
id:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
},
|
|
components: {
|
|
tabs1,
|
|
tabs2,
|
|
tabs3
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 'tabs1',
|
|
nowName: 'tabs1',
|
|
colseDialogVisible: false,
|
|
RegistrationVisible: false,
|
|
|
|
value1: '',
|
|
varietieslist:[],
|
|
datalist:null,
|
|
tabsArr: [
|
|
{
|
|
label: '当前持仓',
|
|
name: 'tabs1'
|
|
},
|
|
{
|
|
label: '现有挂单',
|
|
name: 'tabs2'
|
|
},
|
|
{
|
|
label: '历史成交',
|
|
name: 'tabs3'
|
|
}
|
|
],
|
|
member: [],
|
|
|
|
tradingVolume:{
|
|
tradingCode:'',
|
|
name:'',
|
|
transactionType:'',
|
|
buySellType:'',
|
|
transactionVolume:null,
|
|
stopLoss:null,
|
|
stopWin:null,
|
|
memberId: getmemberId(),
|
|
trainingId:this.$route.query.id,
|
|
priceCommission:null,
|
|
validityTime:null
|
|
}
|
|
|
|
}
|
|
},
|
|
created(){
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
getlist(){
|
|
Simulated.getMarketQuotation().then((res)=>{
|
|
this.datalist=res.filter(item=>item.currency!== "美元指数")
|
|
})
|
|
},
|
|
handleClick(tab) {
|
|
tab.name == 'tabs1' ? this.nowName = tab.name : (tab.name = 'tabs2' ? this.nowName = tab.name : this.nowName = tab.name)
|
|
},
|
|
transaction(value) {
|
|
if (value !== '挂单开仓' || value === '') {
|
|
this.RegistrationVisible = false
|
|
} else {
|
|
this.RegistrationVisible = true
|
|
}
|
|
},
|
|
availableFunds() {
|
|
Simulated.getMemberById(this.tradingVolume.memberId).then((res)=>{
|
|
this.member=res
|
|
})
|
|
},
|
|
Price(code){
|
|
Simulated.getMarketQuotationByCode(code).then((res)=>{
|
|
console.log(res,'code');
|
|
})
|
|
},
|
|
trading(data){
|
|
console.log(data,'data');
|
|
this.colseDialogVisible=true
|
|
this.availableFunds()
|
|
this.Price(data.code)
|
|
this.tradingVolume.tradingCode=data.code
|
|
this.tradingVolume.name=data.currency
|
|
},
|
|
determine(){
|
|
this.tradingVolume.transactionType === '市价开仓' ? this.tradingVolume.transactionType = 'sjkc' : this.tradingVolume.transactionType = 'gdkc'
|
|
this.tradingVolume.buySellType == '买入' ? this.tradingVolume.buySellType = 'buy' : this.tradingVolume.buySellType = 'sell'
|
|
Simulated.transactionMarketQuotation(this.tradingVolume).then((res)=>{
|
|
console.log(res,'res');
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.el-radio {
|
|
margin-right: 70px;
|
|
}
|
|
::v-deep.el-tabs {
|
|
background: #f8f8f9;
|
|
padding: 0 20px;
|
|
.el-tabs__nav-wrap::after {
|
|
background: transparent;
|
|
}
|
|
.el-tabs__item {
|
|
background: #f8f8f9 !important;
|
|
margin-right: 0px !important;
|
|
&.is-active {
|
|
background-color: #3c9cf5;
|
|
color: #3c9cf5 !important;
|
|
}
|
|
}
|
|
}
|
|
.pagination-container {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
::v-deep .price {
|
|
max-width: calc(100% - 136px);
|
|
min-height: 60px;
|
|
background: #f2f3f4;
|
|
border-radius: 4px;
|
|
margin-left: 20px;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
color: #1d2129;
|
|
}
|
|
</style>
|