<template>
|
<div class="home_right">
|
<div class="deal_type">
|
<div
|
class="deal_item flex-center bt"
|
:class="{ deal_item_active: active == 0 }"
|
@click="changeTab(0)"
|
>
|
{{ $t("buy") }}
|
</div>
|
<div
|
v-if="!!positionSn"
|
class="deal_item flex-center bt"
|
:class="{ deal_item_active: active == 1 }"
|
@click="changeTab(1)"
|
>
|
{{ $t("hj121") }}
|
</div>
|
</div>
|
<!-- buy -->
|
<div class="submit_form" v-if="active == 0">
|
<el-input
|
v-model="bform.price"
|
style="text-align: end"
|
oninput="value=value.replace(/[^\d.]/g,'')"
|
disabled
|
>
|
<div slot="prefix" class="inp_prefix flex-center">{{ $t("bp") }}</div>
|
</el-input>
|
|
<el-input
|
v-model="bform.num"
|
style="text-align: end"
|
oninput="value=value.replace(/[^\d.]/g,'')"
|
>
|
<div slot="prefix" class="inp_prefix flex-center">{{ $t("sl") }}</div>
|
</el-input>
|
|
<div class="slider_box">
|
<el-slider v-model="bVal" :marks="marks"> </el-slider>
|
</div>
|
|
<div class="info_item flex-between">
|
<div class="label">{{ $t("tc") }}</div>
|
<div class="value">
|
{{ obj.type | currencySymbol }}
|
{{ (obj.nowPrice * bform.num) | _toLocaleString }}
|
<!-- <div v-if="obj.type != $mc">
|
≈ $
|
{{ (obj.nowPrice * bform.num * rate(obj.type)) | _toLocaleString }}
|
</div> -->
|
</div>
|
</div>
|
|
<div class="info_item flex-between">
|
<div class="label">{{ $t("hj48") }}</div>
|
<div class="value">
|
{{ CurrentMoneyData.symbol }} {{ CurrentMoneyData.availableBalance }}
|
</div>
|
</div>
|
|
<div class="submit_btns">
|
<div class="bt flex-center" @click="buy(0)">{{ $t("gm") }}</div>
|
<div class="bt flex-center" @click="buy(1)">{{ $t("hj78") }}</div>
|
</div>
|
</div>
|
<!-- sell -->
|
<div class="submit_form" v-else-if="active == 1">
|
<div class="position_list">
|
<div class="title">{{ $t("确认平仓") }}</div>
|
|
<div class="position_item position_item_active">
|
<div>
|
{{ $t("sl") }}:
|
<span class="total">{{ this.pages.orderNum }}</span>
|
</div>
|
<el-tag size="small">{{ $t("sto") }}</el-tag>
|
</div>
|
</div>
|
|
<el-input
|
v-model="sform.price"
|
style="text-align: end"
|
oninput="value=value.replace(/[^\d.]/g,'')"
|
disabled
|
>
|
<div slot="prefix" class="inp_prefix flex-center">{{ $t("sp") }}</div>
|
</el-input>
|
|
<el-input
|
v-model="sform.num"
|
style="text-align: end"
|
oninput="value=value.replace(/[^\d.]/g,'')"
|
>
|
<div slot="prefix" class="inp_prefix flex-center">{{ $t("sl") }}</div>
|
</el-input>
|
|
<div class="slider_box">
|
<el-slider v-model="sVal" :marks="marks"> </el-slider>
|
</div>
|
|
<div class="info_item flex-between">
|
<div class="label">{{ $t("tc") }}</div>
|
<div class="value">
|
{{ obj.type | currencySymbol }}
|
{{ (obj.nowPrice * sform.num) | _toLocaleString }}
|
<!-- <div v-if="obj.type != $mc">
|
≈ $
|
{{ (obj.nowPrice * sform.num * rate(obj.type)) | _toLocaleString }}
|
</div> -->
|
</div>
|
</div>
|
|
<div class="submit_btns">
|
<div class="bt bt2 flex-center" @click="sell()">{{ $t("hj121") }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mixins from "@/mixins/myMixins"; // 混入
|
import * as api from "@/axios/api";
|
import deth from "@/utils/deTh";
|
export default {
|
name: "HomeRight",
|
mixins: [mixins],
|
data() {
|
return {
|
active: 0,
|
bform: {
|
price: "",
|
num: 1,
|
},
|
sform: {
|
price: "",
|
num: 1,
|
},
|
bVal: 0,
|
sVal: 0,
|
marks: {
|
25: "25%",
|
50: "50%",
|
75: "75%",
|
100: "100%",
|
},
|
depositAmount: "", // 存款金额
|
moneyData: [], // 账户金额
|
pages: {}, // 已购买股票信息
|
};
|
},
|
props: {
|
obj: {
|
type: Object,
|
default: () => {},
|
},
|
positionSn: {
|
type: String,
|
default: null,
|
},
|
},
|
computed: {
|
// 当前账户金额
|
CurrentMoneyData() {
|
let obj = {};
|
this.moneyData.forEach((i) => {
|
if (i.accectType == this.obj.type) {
|
obj = i;
|
}
|
});
|
return obj;
|
},
|
},
|
watch: {
|
obj: {
|
handler(val) {
|
this.sform.price = this.bform.price =
|
Math.floor(val.nowPrice * 100) / 100 || 0;
|
},
|
immediate: true,
|
},
|
// 通过进度条来计算数量
|
bVal(val) {
|
this.bform.num = Math.floor(
|
(this.CurrentMoneyData.availableBalance * (val / 100)) /
|
this.obj.nowPrice
|
);
|
},
|
sVal(val) {
|
this.sform.num = Math.ceil(this.pages.orderNum * (val / 100));
|
},
|
positionSn(val) {
|
if (!!val) {
|
this.getInfoSite();
|
} else {
|
this.active = 0;
|
}
|
},
|
},
|
created() {
|
this.getMoney();
|
this.getExchangeRate();
|
},
|
methods: {
|
changeTab(index) {
|
this.active = index;
|
},
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
this.moneyData = data.data;
|
}
|
},
|
// 买卖,买:0,卖:1
|
buy: deth.debounce(async function (val) {
|
let opt = {
|
buyType: val,
|
lever: 1,
|
buyNum: this.bform.num,
|
stockId: this.obj.id,
|
};
|
let data = await api.buy(opt);
|
if (data.status === 0) {
|
this.$message.success(data.msg);
|
this.getMoney();
|
} else {
|
this.$message.error(data.msg);
|
}
|
}, 500),
|
// 获取已购买股票信息
|
async getInfoSite() {
|
var res = {
|
positionSn: this.positionSn,
|
};
|
let data = await api.findByPostionSn(res);
|
if (data.status === 0) {
|
this.pages = data.data;
|
}
|
},
|
// 平仓
|
sell: deth.debounce(async function () {
|
let opt = {
|
positionSn: this.positionSn,
|
number: this.sform.num,
|
};
|
let data = await api.sell(opt);
|
if (data.status == 0) {
|
this.$message.success(data.msg);
|
this.getInfoSite();
|
}
|
}),
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.home_right {
|
width: 100%;
|
.submit_form {
|
padding: 16px;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
::v-deep .el-input__inner {
|
text-align: end;
|
}
|
|
.position_list {
|
background-color: #f7f7f7;
|
padding: 10px;
|
border-radius: 8px;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
.position_item {
|
background-color: #fff;
|
padding: 10px;
|
border-radius: 8px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 12px;
|
cursor: pointer;
|
border: 1px solid #fff;
|
|
.total {
|
font-size: 16px;
|
}
|
}
|
|
.position_item_active {
|
border: 1px solid #c4d600;
|
background-color: #e6f9ef;
|
}
|
|
.title {
|
font-weight: 700;
|
text-align: center;
|
}
|
}
|
|
.inp_prefix {
|
height: 100%;
|
padding-left: 10px;
|
}
|
|
.slider_box {
|
padding: 0 16px 20px;
|
}
|
|
.info_item {
|
font-size: 12px;
|
border-top: 1px solid #f5f5f5;
|
padding-top: 10px;
|
|
.label {
|
color: #999;
|
}
|
}
|
|
.submit_btns {
|
display: flex;
|
gap: 16px;
|
padding: 16px 0;
|
|
.bt {
|
flex: 1;
|
background-color: #07c160;
|
color: #fff;
|
font-size: 16px;
|
font-weight: 700;
|
padding: 10px;
|
box-sizing: border-box;
|
height: 40px;
|
border-radius: 40px;
|
}
|
.bt2 {
|
background-color: #dfb758;
|
}
|
}
|
}
|
|
.deal_type {
|
display: flex;
|
gap: 16px;
|
padding: 16px;
|
|
.deal_item {
|
flex: 1;
|
background-color: #ddd;
|
font-size: 16px;
|
font-weight: 700;
|
padding: 10px;
|
box-sizing: border-box;
|
height: 40px;
|
border-radius: 40px;
|
}
|
|
.deal_item_active {
|
color: #fff;
|
background-color: #07c160;
|
}
|
.deal_item_active:nth-child(2) {
|
background-color: #dfb758;
|
}
|
}
|
}
|
</style>
|
