<template>
|
<div>
|
<div class="noticecontainer">
|
<div class="jiaoyimain">
|
<!-- <div class="jiaoyileft">
|
<div :class="buyType == 0 ? 'jiaoyileft_active' : ''" @click="buyType = 0">
|
买 入
|
</div>
|
<div :class="buyType == 1 ? 'jiaoyileft_active' : ''" @click="buyType = 1">
|
卖出
|
</div>
|
</div> -->
|
<div class="jiaoyiright">
|
<div class="jiaoyiname">
|
{{ stockdetail.name }}（{{ $route.query.pid }}）
|
<span :class="stockdetail.hcrate < 0 ? 'greens' : 'reds'">{{ stockdetail.nowPrice }}</span>
|
<div class="jiaoyiname_right">
|
<!-- <span class="everylist">{{$t('xfbzj')}}({{ $route.query.stock_type == 'hk' ? 'HK$' :
|
$route.query.stock_type == 'us' ? '$' : '￥'
|
}})： -->
|
<!-- <span v-if="$route.query.stock_type == 'hk'">{{ (stockdetail.nowPrice * leftform.buyNum * 100 / leftform.lever / 0.9).toFixed(2)}}</span>
|
<span v-if="$route.query.stock_type == 'us'">{{ (stockdetail.nowPrice * leftform.buyNum * 100 / leftform.lever / 7.1).toFixed(2)}}</span> -->
|
<!-- <span>{{ (stockdetail.nowPrice * leftform.buyNum * 100 /
|
leftform.lever).toFixed(2)
|
}}</span>
|
</span> -->
|
<span class="everylist" v-if="$route.query.is_zhishu != 0">{{$t('hj48')}}({{ $route.query.stock_type
|
==
|
'hk' ? 'HK$' : $route.query.type == 'US' ? '$' : '₹'
|
}})：
|
{{$route.query.type == 'US'?userData.enableIndexAmt:userData.enableAmt}}
|
</span>
|
<span class="everylist" v-else>{{$t('hj103')}}({{ $route.query.type == 'hk' ? 'HK$' :
|
$route.query.type == 'US' ? '$' : '₹'
|
}})：
|
{{ $route.query.type == 'hk' ? (userData.userAmt / 0.9).toFixed(2) :
|
$route.query.type == 'US' ? (userData.userAmt / 7.1).toFixed(2) :
|
userData.userAmt
|
}}
|
</span>
|
</div>
|
</div>
|
<div class="jiaoyibottom">
|
<div class="notice_every">
|
<el-form ref="form" :model="leftform" label-width="120px">
|
<div class="twoinput">
|
<el-form-item :label="$t('mmfx')">
|
<el-switch v-model="buyType" active-color="#13ce66" inactive-color="#409EFF"
|
:inactive-text="$t('hj85')" :active-text="$t('hj84')" inactive-value="0" active-value="1">
|
</el-switch>
|
</el-form-item>
|
<el-form-item :label="$t('mmfx')">
|
<el-switch v-model="buyselltype" active-color="#13ce66" inactive-color="#409EFF"
|
:inactive-text="$t('hj108')" :active-text="$t('hj109')">
|
</el-switch>
|
</el-form-item>
|
<el-form-item :label="$t('hj104')">
|
<el-switch v-model="iszhiying" active-color="#13ce66" inactive-color="#409EFF">
|
</el-switch>
|
</el-form-item>
|
<el-form-item :label="$t('hj105')">
|
<el-switch v-model="iszhisun" active-color="#13ce66" inactive-color="#409EFF">
|
</el-switch>
|
</el-form-item>
|
</div>
|
<div class="twoinput">
|
<el-form-item :label="$t('mrtj')" v-if="buyselltype == true">
|
<el-input v-model="leftform.targetPrice"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('hj100')">
|
<el-input v-model="leftform.buyNum"
|
@input="leftform.buyNum = leftform.buyNum.replace(/^(0+)|[^\d]+/g, '')">
|
</el-input>
|
</el-form-item>
|
<el-form-item :label="$t('hj107')">
|
<el-select v-model="leftform.lever" :placeholder="$t('hj275')">
|
<el-option v-for="item in siteLeverList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="$t('zyjg')" v-if="iszhiying">
|
<el-input v-model="leftform.profitTarget"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('zsjg')" v-if="iszhisun">
|
<el-input v-model="leftform.stopLoss"></el-input>
|
</el-form-item>
|
</div>
|
</el-form>
|
<div class="buysellmain">
|
<div class="btns" @click="getbuy" :class="buyType == 0 ? 'greenbg' : 'redbg'">
|
{{ buyType == 0 ? $t('hj85') : $t('hj84') }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as api from "@/axios/api";
|
export default {
|
data() {
|
return {
|
buyType: 0, // 0买入 1卖出
|
stockdetail: '', // 股票详情
|
leftform: { // 买入卖出表单
|
buyNum: '', // 买入数量
|
lever: '', // 杠杆倍数
|
targetPrice: '', // 买入条件
|
profitTarget: '', // 止盈价格
|
stopLoss: '', // 止损价格
|
},
|
settingdetail: '', // 设置详情
|
siteLeverList: [], // 杠杆列表
|
iszhiying: false, // 是否止盈
|
iszhisun: false, // 是否止损
|
userData: '', // 用户信息
|
buyselltype: false, // 买卖类型
|
}
|
},
|
filters: {
|
formatTime(value, that) {
|
if (value) {
|
return that.dayjs(value).format('YYYY-MM-DD HH:mm:ss')
|
} else {
|
return '--'
|
}
|
}
|
},
|
created() {
|
this.getinit();
|
|
},
|
methods: {
|
async getbuy() {
|
if (this.leftform.buyNum < this.settingdetail.buyMinNum) {
|
this.$message.error(this.$t('hj277') + this.settingdetail.buyMinNum + this.$t('hj117'));
|
return
|
}
|
if (this.leftform.buyNum > this.settingdetail.buyMaxNum) {
|
this.$message.error(this.$t('hj278') + this.settingdetail.buyMaxNum + this.$t('hj117'));
|
return
|
}
|
if (this.iszhiying && this.leftform.profitTarget < this.stockdetail.nowPrice) {
|
this.$message.error(this.$t('zytips') + this.stockdetail.nowPrice);
|
return
|
}
|
if (this.iszhisun && this.leftform.stopLoss > this.stockdetail.nowPrice) {
|
this.$message.error(this.$t('zstips') + this.stockdetail.nowPrice);
|
return
|
}
|
// 挂单
|
if (this.buyselltype) {
|
var opt = {
|
buyNum: this.leftform.buyNum * 100,
|
stockId: this.$route.query.is_zhishu == 0 ? this.stockdetail.code : this.stockdetail.gid,
|
lever: this.leftform.lever,
|
buyType: this.buyType,
|
profitTarget: this.iszhiying == true ? this.leftform.profitTarget : undefined,
|
stopLoss: this.iszhisun == true ? this.leftform.stopLoss : undefined,
|
targetPrice: this.buyselltype == true ? this.leftform.targetPrice : undefined,
|
};
|
var data = await api.startguadan(opt);
|
if (data.status == 0) {
|
this.$message.success(this.$t('gdcg'));
|
} else {
|
this.$message.error(data.msg);
|
}
|
} else {
|
// 市单价 股票买入卖出
|
if (this.$route.query.is_zhishu == 0) {
|
var opt = {
|
buyNum: this.leftform.buyNum * 100,
|
stockId: this.stockdetail.id,
|
lever: this.leftform.lever,
|
buyType: this.buyType,
|
profitTarget: this.iszhiying == true ? this.leftform.profitTarget : undefined,
|
stopLoss: this.iszhisun == true ? this.leftform.stopLoss : undefined,
|
targetPrice: this.buyselltype == true ? this.leftform.targetPrice : undefined,
|
};
|
var data = await api.buy(opt);
|
if (data.status == 0) {
|
this.$message.success(this.$t('hj276'));
|
} else {
|
this.$message.error(data.msg);
|
}
|
} else {
|
// 市单价 指数买入卖出
|
var opt = {
|
buyNum: this.leftform.buyNum * 100,
|
stockId: this.stockdetail.id,
|
lever: this.leftform.lever,
|
buyType: this.buyType,
|
profitTarget: this.leftform.profitTarget,
|
stopLoss: this.leftform.stopLoss,
|
targetPrice: this.buyselltype == true ? this.leftform.targetPrice : undefined,
|
};
|
var data = await api.buy(opt);
|
if (data.status == 0) {
|
this.$message.success(this.$t('hj276'));
|
} else {
|
this.$message.error(data.msg);
|
}
|
}
|
}
|
},
|
|
getinit() {
|
this.getstockdetail();
|
// if (this.$route.query.stock_type != 'US') {
|
// this.getstockdetail();
|
// } else {
|
// this.getUsstockdetail();
|
// }
|
this.getuserSetting()
|
this.getUserInfo();
|
},
|
async getUserInfo() {
|
let data = await api.getUserInfo();
|
if (data.status == 0) {
|
this.userData = data.data;
|
}
|
},
|
async getuserSetting() {
|
var opt = {};
|
var data = await api.getSetting(opt);
|
this.settingdetail = data.data;
|
this.siteLever = this.settingdetail.siteLever.split("/")
|
this.leftform.lever = this.siteLever[0];
|
this.siteLeverList = [];
|
for (let i = 0; i < this.siteLever.length; i++) {
|
let val = this.siteLever[i];
|
let item = {
|
label: val + this.$t('hj112'),
|
value: val
|
};
|
this.siteLeverList.push(item);
|
}
|
this.leftform.buyNum = this.settingdetail.buyMinNum / 100;
|
},
|
async getstockdetail() {
|
var opt = {
|
code: this.$route.query.pid,
|
stockType: this.$route.query.type,
|
};
|
var data = await api.getSingleStockGg(opt);
|
this.stockdetail = data.data.stock
|
this.leftform.profitTarget = data.data.stock.nowPrice
|
this.leftform.stopLoss = data.data.stock.nowPrice
|
this.leftform.targetPrice = data.data.stock.nowPrice
|
this.$parent.getcloseLoading();
|
},
|
async getUsstockdetail() {
|
var opt = {
|
code: this.$route.query.code,
|
stockType: this.$route.query.stock_type,
|
};
|
var data = await api.getSingleStockByCode(opt);
|
this.stockdetail = data.data.stock
|
this.leftform.profitTarget = data.data.stock.nowPrice
|
this.leftform.stopLoss = data.data.stock.nowPrice
|
this.leftform.targetPrice = data.data.stock.nowPrice
|
this.$parent.getcloseLoading();
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
/deep/ .el-switch__label {
|
color: #fff !important;
|
}
|
|
/deep/ .el-switch__label.is-active {
|
color: #409EFF !important;
|
}
|
|
.greens {
|
color: #168740 !important;
|
}
|
|
.reds {
|
color: #ed3a3b !important;
|
}
|
|
.greenbg {
|
background: #168740 !important;
|
}
|
|
.redbg {
|
background: #ed3a3b !important;
|
}
|
|
.selected {
|
text-align: unset !important;
|
float: unset !important;
|
}
|
|
/deep/ .el-form-item {
|
margin-bottom: 10px !important;
|
}
|
|
.noticecontainer {
|
display: flex;
|
|
.jiaoyimain {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
|
.jiaoyileft {
|
height: 208px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
div {
|
width: 15px;
|
height: 50%;
|
padding: 0 10px;
|
display: flex;
|
justify-content: center;
|
font-size: 14px;
|
border: 1px solid #4a4b51;
|
color: #c9c9c9;
|
letter-spacing: 2px;
|
writing-mode: vertical-rl;
|
}
|
|
.jiaoyileft_active {
|
color: #fff;
|
background: #19567f;
|
}
|
}
|
|
.jiaoyiright {
|
height: 208px;
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
|
.jiaoyiname {
|
display: flex;
|
justify-content: center;
|
font-size: 14px;
|
padding: 10px;
|
color: #c9c9c9;
|
|
.jiaoyiname_right {
|
color: #f0be83;
|
margin-left: 30px;
|
|
.everylist {
|
margin-left: 20px;
|
}
|
}
|
}
|
|
.jiaoyibottom {
|
display: flex;
|
justify-content: space-between;
|
color: #c9c9c9;
|
|
.notice_every {
|
width: 100%;
|
// height: calc(208px - 35px);
|
// overflow-y: scroll;
|
|
&::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
background-color: rgb(37, 38, 42);
|
}
|
|
&::-webkit-scrollbar-track {
|
background-color: rgb(37, 38, 42);
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background-color: rgb(37, 38, 42);
|
}
|
|
&::-webkit-scrollbar-corner {
|
width: 8px;
|
height: 8px;
|
display: none;
|
}
|
|
.titles {
|
text-align: center;
|
letter-spacing: 2px;
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 10px;
|
}
|
|
.twoinput {
|
display: flex;
|
justify-content: center;
|
color: #f0be83;
|
}
|
|
/deep/ .el-form-item__label {
|
color: #f0be83 !important;
|
}
|
|
/deep/ .el-input__inner {
|
height: 30px !important;
|
line-height: 30px !important;
|
}
|
|
.buysellmain {
|
display: flex;
|
justify-content: center;
|
margin-bottom: 20px;
|
|
.btns {
|
padding: 12px 60px;
|
color: #fff;
|
text-align: center;
|
border-radius: 4px;
|
font-size: 16px;
|
letter-spacing: 2px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
