<template>
|
<div>
|
<div class="headf"><span @click="$router.go(-1)"></span>
|
<div class="wenebn">
|
<h6>{{name}}</h6>
|
<p class="">{{nowPrice}}</p>
|
</div>
|
</div>
|
<div style="height:1.5rem"></div>
|
<div class="goumais">
|
<!-- 买入价格 -->
|
<div class="price-section">
|
<label class="section-label">{{ $t("hj130") }}</label>
|
<div class="erty price-input">
|
<input type="number" class="inpy" v-model="buyPrice" disabled :placeholder="nowPrice.toString()">
|
<a class="current-price-btn" @click="setCurrentPrice">{{ $t("hj81") }}</a>
|
</div>
|
</div>
|
<!-- 买入数量 -->
|
<div class="quantity-section">
|
<label class="section-label">{{ $t("jy87") }}</label>
|
<div class="erty quantity-input">
|
<input :placeholder="$t('jy87')" type="number" class="inpy" v-model="buyNum"
|
@input="buyNum = buyNum.replace(/^(0+)|[^\d]+/g, ''); updateHandlingFee()">
|
<a>{{ $t("hj117") }}</a>
|
</div>
|
</div>
|
<!-- 仓位选择 -->
|
<div class="position-section">
|
<label class="section-label">{{ $t("hj226") }}</label>
|
<div class="position-buttons">
|
<div class="position-btn" :class="{ active: selectedPosition === '1/4' }" @click="selectPosition('1/4')">{{ $t('hj258') }}</div>
|
<div class="position-btn" :class="{ active: selectedPosition === '1/3' }" @click="selectPosition('1/3')">{{ $t('hj259') }}</div>
|
<div class="position-btn" :class="{ active: selectedPosition === '1/2' }" @click="selectPosition('1/2')">{{ $t('hj260') }}</div>
|
<div class="position-btn" :class="{ active: selectedPosition === 'full' }" @click="selectPosition('full')">{{ $t('hj261') }}</div>
|
</div>
|
</div>
|
<!-- 金额信息 -->
|
<div class="amount-info">
|
<p class="plm">
|
<span>{{ $t("hj54") }}</span>
|
<a>¥{{ (userinfo.enableAmt || userinfo.userAmt || 0).toFixed(2) }}</a>
|
</p>
|
<p class="plm">
|
<span>{{ $t("hj44") }}</span>
|
<a>¥{{ handlingFee }}</a>
|
</p>
|
<p class="plm">
|
<span>{{ $t("jy88") }}</span>
|
<a class="red-amount">¥{{ getActualAmount() }}</a>
|
</p>
|
</div>
|
</div>
|
<div class="mail" @click="setBuy">{{ $t("hj85") }}{{ $t("jy150") }}</div>
|
</div>
|
</template>
|
<script>
|
import * as api from '@/axios/api'
|
import { Toast } from 'vant'
|
export default {
|
components: {
|
|
},
|
props: {},
|
data() {
|
return {
|
showPicker: false,
|
currentItem: '',
|
userinfo: {},
|
settingdetail: {},
|
siteLeverList: [],
|
nowPrice: 0,
|
buyType: 0, // 0 买入 1 卖出
|
buyNum: '', //买入数量
|
lever: '', //杠杆倍数
|
name:'',
|
code:'',
|
id:'',
|
buying: false,
|
buyPrice: '',
|
selectedPosition: '',
|
handlingFee: '0.00'
|
}
|
},
|
mounted() {
|
if (this.$route.query.code) {
|
this.code = this.$route.query.code
|
}
|
if (this.$route.query.name) {
|
this.name = this.$route.query.name
|
}
|
if (this.$route.query.id) {
|
this.id = this.$route.query.id
|
}
|
if (this.$route.query.m) {
|
this.nowPrice = Number(this.$route.query.m)
|
this.buyPrice = this.nowPrice.toString()
|
}
|
this.getUserInfo()
|
this.getuserSetting()
|
},
|
watch: {
|
buyPrice() {
|
this.updateHandlingFee()
|
},
|
buyNum() {
|
this.updateHandlingFee()
|
}
|
},
|
methods: {
|
setCurrentPrice() {
|
this.buyPrice = this.nowPrice.toString()
|
this.updateHandlingFee()
|
},
|
selectPosition(position) {
|
this.selectedPosition = position
|
if (this.userinfo.enableAmt && this.buyPrice) {
|
let availableAmount = parseFloat(this.userinfo.enableAmt || this.userinfo.userAmt || 0)
|
let currentPrice = parseFloat(this.buyPrice) || 0
|
let positionRatio = 0
|
|
switch(position) {
|
case '1/4':
|
positionRatio = 0.25
|
break
|
case '1/3':
|
positionRatio = 0.333
|
break
|
case '1/2':
|
positionRatio = 0.5
|
break
|
case 'full':
|
positionRatio = 1
|
break
|
}
|
|
// 计算可买入的手数（1手=100股）
|
let maxAmount = availableAmount * positionRatio
|
let maxHands = Math.floor(maxAmount / (currentPrice * 100))
|
this.buyNum = maxHands.toString()
|
this.updateHandlingFee()
|
}
|
},
|
async updateHandlingFee() {
|
if (this.buyPrice && this.buyNum) {
|
await this.getHandlingFee()
|
} else {
|
this.handlingFee = '0.00'
|
}
|
},
|
async getHandlingFee() {
|
if (!this.buyPrice || !this.buyNum) {
|
return '0.00'
|
}
|
try {
|
let opt = {
|
nowPrice: this.buyPrice,
|
buyNum: Number(this.buyNum) * 100
|
}
|
let data = await api.getFee(opt)
|
if (data.status === 0) {
|
this.handlingFee = (data.data || 0).toFixed(2)
|
return this.handlingFee
|
} else {
|
return '0.00'
|
}
|
} catch (error) {
|
console.error('获取手续费失败:', error)
|
return '0.00'
|
}
|
},
|
getActualAmount() {
|
if (this.buyPrice && this.buyNum) {
|
let price = parseFloat(this.buyPrice) || 0
|
let num = parseFloat(this.buyNum) || 0
|
return (price * num * 100).toFixed(2)
|
}
|
return '0.00'
|
},
|
onConfirm(item) {
|
console.log(item)
|
this.showPicker = false
|
this.lever = item.value
|
},
|
async getuserSetting() {
|
var opt = {};
|
var data = await api.getSetting(opt);
|
this.settingdetail = data.data;
|
this.siteLever = this.settingdetail.siteLever.split("/")
|
this.lever = this.siteLever[0];
|
this.siteLeverList = [];
|
for (let i = 0; i < this.siteLever.length; i++) {
|
let val = this.siteLever[i];
|
let item = {
|
text: val + this.$t('hj112'),
|
value: val
|
};
|
this.siteLeverList.push(item);
|
}
|
this.buyNum = this.settingdetail.buyMinNum / 100;
|
},
|
async getbuyVipQc() {
|
if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
|
this.$message.error(this.$t('jy137') + this.settingdetail.buyMinNum / 100 + this.$t('hj117'));
|
return
|
}
|
if (this.buyNum * 100 > this.settingdetail.buyMaxNum) {
|
this.$message.error(this.$t('jy138') + this.settingdetail.buyMaxNum / 100 + this.$t('hj117'));
|
return
|
}
|
var opt = {
|
buyNum: this.buyNum * 100,
|
stockCode: this.currentItem.c,
|
lever: 1,
|
buyType: this.buyType,
|
};
|
var data = await api.buyVipQc(opt);
|
if (data.status == 0) {
|
this.$toast(this.$t('jy139'));
|
} else {
|
this.$toast(data.msg);
|
}
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
this.userinfo = data.data;
|
}
|
},
|
//买卖
|
setBuy() {
|
if (!this.$store.state.userInfo.idCard) {
|
Toast(this.$t('hj111'))
|
this.$router.push('/smrz')
|
return
|
}
|
if (!this.buyPrice) {
|
Toast(this.$t('jy532'))
|
return
|
}
|
if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
|
this.$message.error(this.$t('jy137') + this.settingdetail.buyMinNum / 100 + this.$t('hj117'));
|
return
|
}
|
if (this.buyNum * 100 > this.settingdetail.buyMaxNum) {
|
this.$message.error(this.$t('jy138') + this.settingdetail.buyMaxNum / 100 + this.$t('hj117'));
|
return
|
}
|
if (this.buying) {
|
return;
|
}
|
this.buying = true
|
let opts = {}
|
opts = {
|
buyNum: Number(this.buyNum) * 100, // 单位为手
|
lever: this.lever,
|
buyType :0,
|
stockId: this.id,
|
}
|
this.gpBuy(opts)
|
|
},
|
//股票买入
|
async gpBuy(opts) {
|
opts.stockId = this.id
|
let data = await api.buy(opts)
|
this.buying = false
|
if (data.status === 0) {
|
Toast(data.data)
|
this.getUserInfo()
|
this.$router.push('/warehouse')
|
} else {
|
if (data.msg.indexOf(this.$t('jy249')) > -1) {
|
Toast(this.$t('hj113'))
|
} else {
|
Toast(data.msg)
|
}
|
|
}
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.headf {
|
height: 1.17rem;
|
position: fixed;
|
background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
|
top: 0;
|
left: 0;
|
width: 100%;
|
border-bottom: 1px solid #ececec;
|
z-index: 33;
|
|
span {
|
position: absolute;
|
width: 0.266rem;
|
height: 0.45rem;
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82ePd/Xr5n38KwRNR7bE0APMK1OHdtTwAWQGZcdQbZngPMc+QImK0O2Z4GzgIxLuqoE2Z4DTgMyJuk6K08yZHseOAnIqKSbRo2TINsLwHFARiTdxkaVQrYXgaOADEu6K3a7LWR7CTjMD2XdaYq0rZHtFWA/Rz6BIUn3reau6RvZXgX28kMfOfLQbnj/QbbXgN380HuOPJZtwB/I9jqwE5ABSc9lyJ8a2d4AtgPSL+klBfmFbG8CWwHpk/SaivxAtjMgg7Inq0mvpLcqSHehTOvKpzU+oSvFDlj99gesOJCDkp7Kip+yIknT3XL7C0tbum9lMbIMHKQkQEqwJWVSKZTPWTElq0dt6GYxt6uHf8DqX0cBq39BBqz+lR2w+j8RAfv9rfkGqF24CUdT9E4AAAAASUVORK5CYII=) no-repeat 50%;
|
background-size: 100%;
|
left: 0.4rem;
|
top: 0.37rem;
|
}
|
|
.wenebn {
|
text-align: center;
|
width: 8rem;
|
margin: 0 auto;
|
|
h6 {
|
color: #fff;
|
font-size: .4rem;
|
padding-top: 0.133rem;
|
font-weight: 500;
|
}
|
|
p {
|
font-size: .32rem;
|
color: #fff;
|
margin-top: 0.133rem;
|
}
|
}
|
}
|
|
.goumais {
|
width: 9.21rem;
|
margin: 0 auto;
|
padding: 0.4rem 0;
|
|
.price-section, .quantity-section, .position-section {
|
margin-bottom: 0.4rem;
|
|
.section-label {
|
display: block;
|
color: #333;
|
font-size: 0.35rem;
|
margin-bottom: 0.2rem;
|
}
|
}
|
|
.erty {
|
width: 100%;
|
height: 1.07rem;
|
border: 0.0266rem solid #999;
|
border-radius: 0.13rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.inpy {
|
height: 1.07rem;
|
flex: 1;
|
margin-left: 0.266rem;
|
background: transparent;
|
font-size: .37rem;
|
color: #000;
|
border: none;
|
outline: none;
|
}
|
|
a {
|
height: 0.64rem;
|
border-left: 0.0266rem solid #999;
|
width: 1.5rem;
|
margin-right: 0.266rem;
|
text-align: center;
|
font-size: .32rem;
|
color: #666;
|
line-height: .64rem;
|
|
&.current-price-btn {
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.position-buttons {
|
display: flex;
|
gap: 0.2rem;
|
margin-top: 0.2rem;
|
|
.position-btn {
|
flex: 1;
|
height: 0.8rem;
|
border: 0.0266rem solid #999;
|
border-radius: 0.13rem;
|
text-align: center;
|
line-height: 0.8rem;
|
font-size: 0.32rem;
|
color: #666;
|
cursor: pointer;
|
transition: all 0.3s;
|
|
&.active {
|
border-color: #f33030;
|
background: #f33030;
|
color: #fff;
|
}
|
}
|
}
|
|
.amount-info {
|
margin-top: 0.4rem;
|
}
|
|
.plm {
|
width: 100%;
|
margin: 0.2rem 0;
|
display: flex;
|
justify-content: space-between;
|
|
span {
|
color: #999;
|
font-size: .32rem;
|
}
|
|
a {
|
color: #333;
|
font-size: .32rem;
|
|
&.red-amount {
|
color: #f33030;
|
}
|
}
|
}
|
}
|
|
.mail {
|
width: 9.21rem;
|
height: 1.2rem;
|
border-radius: 0.13rem;
|
line-height: 1.2rem;
|
margin: 0.8rem auto;
|
color: #fff;
|
font-size: .43rem;
|
text-align: center;
|
background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
|
cursor: pointer;
|
}
|
</style>
|
