From f1aaecc9dc0a3d680f2f693ee963d5d060e75734 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 09 Jan 2026 16:18:43 +0800
Subject: [PATCH] 1
---
src/page/kline/buyStock.vue | 388 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 213 insertions(+), 175 deletions(-)
diff --git a/src/page/kline/buyStock.vue b/src/page/kline/buyStock.vue
index 915c220..07b43e8 100644
--- a/src/page/kline/buyStock.vue
+++ b/src/page/kline/buyStock.vue
@@ -4,62 +4,54 @@
<div class="wenebn">
<h6>{{name}}</h6>
<p class="">{{nowPrice}}</p>
- <!-- <p class="">{{ currentItem.p }} {{ currentItem.zdp ? currentItem.zdp.toFixed(2) + '%' : '0.00%' }}</p> -->
</div>
</div>
- <div style="height:1.5rem">
-
- </div>
+ <div style="height:1.5rem"></div>
<div class="goumais">
- <div class="xiaoge"><span><img
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABEklEQVQ4jaVSwUoDMRScl2alsIuIB89C9Su8iHqrWryKFy12Tz36cd79BfFiS13woKAfINuMpG7SbGjL2r5bJvMmM0Ow6ci6++eDIifwoNc2ILIvIh3VlH9287IdCcwCNBLo5cVxmmZf3fu3g0ABBJoJALJrAK1arR2H2GUjSxxc5cXR6fVz4s6mWvizXWFiHSwQuOiPDw35lGZZL3zNZZ5jAi50INK2ZBJbAeYzewHn4PJudNK9fd2Lyaau6jOHDixHKa0fkyQZhmSfOSqMQQRTubAfSRPQ4YUsKSzEfIS43VWFhQ6coIrJqwqr9TLDAEViPCUnDi/L6QeBgkp5zBDvBvj+KcvPOcYJyVGt638PgF/kfWPjHkHUbAAAAABJRU5ErkJggg==">{{ $t('jy18') }}</span>
- <div class="rtyh">
- <div class="kunk"><input :placeholder="$t('jy125')" v-model="buyNum"
- @input="buyNum = buyNum.replace(/^(0+)|[^\d]+/g, '')" type="number"><a class="shou">{{ $t('hj117') }}</a>
- </div>
+ <!-- 买入价格 -->
+ <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>
- <p class="shougu">1{{ $t('hj117') }}=100{{ $t('jy96') }}</p>
- <div class="xiaoge">
- <span class="eduleft"><img class="eduleftimg"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABp0lEQVQ4jZXRTUsbURgF4HPeSZuIm9goFOpXQrtrQaiICG4KGVGxwU1WwYWgpeBPKCn1X2jSrHQjbiJaYUoX7nXlQhAUg13ED2bcuTH3lTstbarNtJ6Bgbnc59yXO0REcrNHgxTZpkgnQGj4AErL7Df2WhZYLI7jgdxTReUveATkQiwK2xMCP3i7sz5wPTl71GXxl8+ZC7tnYq5GEVmQSBxchTg3XytKLFZ3nFh96t3px3Djz0n4L5wtHKTa2tvPAC4a1YYCiw1jnoo4WYqsShS2648TCdqTjKqAdCiixijD+wAgUdhmq5y+NKpFkB9AFo3RT14lff7jQgWMws15M3OYiscT3C71Xg7n99s6Up0bDdUBTs+d1EF+9/1gtBVujsXJJ6kNJV/fGOOKAlVVvEp2JN2H4m9Lz3bF876+V+iKAmtT87XcQ3D4N+0r0bcs2bGxEsCCAvnN5d7q/+BfBTbx/rJkXbekQAFkfmupJyyJwn8U2DzqL4vbNIkfBF4UvlcQlqQrvycRZ98AmVbYxrm7YK6qeuy/3Mw8f9Gt5NCNMeOtMADcAijV/2tFJVE6AAAAAElFTkSuQmCC">{{ $t('jy135') }}</span>
- <div class="eduright">
- <a class="ertyu">¥{{ userinfo.userAmt }}</a>
+ <!-- 买入数量 -->
+ <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="rtyh">
- <!-- <div class="fangxi">
- <a class="fanh" :class="buyType == 0 ? 'xuk' : ''" @click="buyType = 0">买涨</a>
- <a class="fanh" :class="buyType == 1 ? 'xuk' : ''" @click="buyType = 1">买跌</a>
- </div> -->
- </div>
- <div class="xiaoge">
- <span class="eduleft"><img
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB7UlEQVQ4ja2SwWsTQRjF3zc7MbuJpQgFD1LbIIIHQbwKFtEexGJ7iKigUovm6klP/gEG6s2LJUgPWulBRawH0cQUMYqHCiUVFEPSePNiEsWa2t15sjGpW8mKgu8wwwzzfvO9b0aOnS9dIDm/XK0WF7LDxD/KB6xCZBMgHw35FJCs63m5B9M7q3+DkrGzb+NaR+5AJEJihcB+EdVLoESRLMnct2Yz//jmrk9dAf6QTJVnACnezSTSe4fzamBwcA9FDgKYhMgyRLYD8to1JqcsK1ur1wvPZ3c3A4DKDIHivUwi3SGPTJR6dSRSX3PdrZalt0CpowRGIbIPkO8ECi55WSVTlbQhRwG5NHaufKoDaHVTpHXHXGbg3dxU/9WHU/1DJC4SKHvAGkT1ac+YW0pZ875BLOvNr3A/zea3zARcAyw8ur5t3F/r+zd2LAFY6tYe06mkrcOpD1EqtRmQ6NBEpefZdOKLDnse36zWK2kjtT5OyBWKwHZi/tZJFQYI9qCjwouXt2uNhlOrNxyxrDOtCGEA23HoeWZDhM+LSe/VIrzgudAKms1VzzebQIRuCgUYMu6bCYn/CbABf2j8fY9tO7MEDlCpGCHwG2aIFQPkldYnnlzr+xoaIRq1T0PkSNDcnmNQasQzXP9o/0cAfgDTaMAiD+M0wAAAAABJRU5ErkJggg==">{{ $t('jy532') }}</span>
- <div class="rtyh" @click="showPicker = true">
- <div class="kunk">
- <input placeholder="请选择" disabled="disabled" v-model="lever" class="canwei">
- <img class="gangganicon"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGCAYAAAAVMmT4AAAAAXNSR0IArs4c6QAAAGRJREFUKFNjnDFjhiUjI2Pr////GRlwAEZGxpcsLCypYAUzZ87MYWBgmMTAwIBNw8v///87ZWRkXINL4tAAVwgyFMUkNA0oCjEUIzmp+v///84gq5G9gdVT/f39AoWFhR/Q/QsATGgt64otJQ8AAAAASUVORK5CYII=">
- </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="xiaoge">
- <span class="eduleft"><img
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACEElEQVQ4jY1TPWhTURg9331vcdP6PzSpTtahi0InFS2CjakxEoNgFNrykqibTgpqdXDTRVAbWsRJfNBBGqKmFasoWBCEWEX8qfkRcWptHRTk3SPJa14ebah+cIcL55x7zvm4gqUjB/s+diplxAnEACGBEYe0R4c3TwKgn+EJRPs+bDcMs0o6DMhqTY4CYusqXam4iPRockaUsh1H29mhtleeQMz6/JhEJ0SyJOyZ2dkHEyPbfvlf2hF7vWJVS0u3iIo7ZBgik9nB1i64AtOM9n/qaBKn6YSsUkc4/bUWRWEhFIk//ytAVLFuelWvgstz0JOqnN2fLKcX4z0Hvj4RsYqnI8lSoH4PJ8tXCJwRpV7W8VpcvNnUgUg7RJ5GUpUuDZwkcEyTe3KDrQUskJU/Qq0DaTh4lM+nSIw7ZIHAUU3uzmUChUYH4uFdAZE5AGvrgN9FS08Xi0kCF0WpXblM4J3foDLNdZr44UUgOQaRBIBnddBUfiengKvNtyC9GnzY2ILIZWUYiQPJcugfy8DeE99jDlk9lzyB+5ngG615SgN2yCpFlyEfp8gdivRO3Nr43q3fN+FU5QiBIUBuz83Pn3t+d+vPGjH9bSVEXaPIIYdMPLm5IestbPEr3Va5XRnGsAMENTFAEVOUMeCQb5Vp9o9dX/PFj2/2nbFl3wsJtm1KUOQCRFED58dvrL+3BAjgL/OP2zMWLMK9AAAAAElFTkSuQmCC">{{ $t('jy136') }}</span>
- <div class="eduright"><a class="ertyu"> ¥{{ (nowPrice * buyNum * 100 ).toFixed(2) }}</a>
- </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 class="xiaoge">
- <span class="eduleft"><img
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAbdJREFUOE+N0z9IG1EcB/Dv76URtGiXekEsgRCHunToXZrV5A7XIB0LzeTUreJQMnTRrYODCFUchDpauulwgSCK4AUXyVAIpVCKuUtSIdr8UfJ+5bB3TVLUu+3de78P3/vd7xEGHgaophofJSFLxJ3B/X9rYsUyH1HvAbe4qukbTDQHxlakaL69DXA040IpmqM+4BWDEBGMvS4o7gG2mo4LUOay3l2LfS+0XbQP6C0eb1Ze1kYmspIx7QKVZ7MPEZYZIbDNQFw5D/+k8m7HBwaLqVS6qiaMeQ+wNeMLETLepzCwGLHMDz7gaPobEK0yo0rA9c1BHgGwphTzuZqaSkqIDAS9Y5avScoj5aRQ9oGqZrwHsWy2O6u9DYueHjQI6LrvKmoqKYTI/Wq0Xz39enjR1wMXkITfbqzbf9n/O30J7gLqyeTYZTMc8ohoa7TZ18T7EjiaUWAg5gGCsDxumeuBEzjPZ6ZCHBrygFYY9pPjfD0wYCf0zwSK+gnAK4+t/KfAwJmWfvGAQsMecIXOt0lr/0dgwEnoGwAm/UFi2owUzZ3AwL2XyVb1BRK0BPDfKQw+DYqVH/sD+c0JIKaNn8sAAAAASUVORK5CYII=">手续费</span>
- <div class="eduright"><a class="ertyu">HKD26600640.90</a></div>
- </div> -->
</div>
- <div class="mail" @click="setBuy">{{ $t('hj85') }}</div>
- <van-popup v-model="showPicker" round position="bottom">
- <van-picker :columns="siteLeverList" @cancel="showPicker = false" @confirm="onConfirm" show-toolbar />
- </van-popup>
+ <div class="mail" @click="setBuy">{{ $t("hj85") }}{{ $t("jy150") }}</div>
</div>
</template>
<script>
@@ -74,8 +66,8 @@
return {
showPicker: false,
currentItem: '',
- userinfo: '',
- settingdetail: '',
+ userinfo: {},
+ settingdetail: {},
siteLeverList: [],
nowPrice: 0,
buyType: 0, // 0 买入 1 卖出
@@ -85,6 +77,9 @@
code:'',
id:'',
buying: false,
+ buyPrice: '',
+ selectedPosition: '',
+ handlingFee: '0.00'
}
},
mounted() {
@@ -99,13 +94,89 @@
}
if (this.$route.query.m) {
this.nowPrice = Number(this.$route.query.m)
+ this.buyPrice = this.nowPrice.toString()
}
- // this.currentItem = JSON.parse(decodeURIComponent(this.$route.query.item))
-
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
@@ -164,6 +235,10 @@
this.$router.push('/smrz')
return
}
+ if (!this.buyPrice) {
+ Toast('请输入价格')
+ return
+ }
if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
this.$message.error(this.$t('jy137') + this.settingdetail.buyMinNum / 100 + this.$t('hj117'));
return
@@ -172,29 +247,13 @@
this.$message.error(this.$t('jy138') + this.settingdetail.buyMaxNum / 100 + this.$t('hj117'));
return
}
- // if (!this.agree) {
- // Toast('需同意合作协议才能交易!')
- // } else if (isNull(this.selectNumber) && isNull(this.autoNumber)) {
- // Toast('请选择购买手数')
- // } else if (isNull(this.selectType)) {
- // Toast('请选择买卖方向')
- // } else if(isNull(this.subaccountNumber)) {
- // Toast('请选择子账户')
- // } else {}
if (this.buying) {
return;
}
this.buying = true
let opts = {}
opts = {
- // stockId: this.detail.id,
- // buyNum: this.selectNumber ? this.selectNumber * 100 : 0, // 单位为手
- // buyType: this.selectType,
- // lever: this.selectCycle ? this.selectCycle : 0,
- // subaccountNumber:this.subaccountNumber
- //买入是买涨buyType:0, 卖出是买跌buyType:1,卖出的状态是0，买入的状态是1
buyNum: Number(this.buyNum) * 100, // 单位为手
- //buyNum: (this.num.match(/\d+/g))[0] * 100, // 单位为手
lever: this.lever,
buyType :0,
stockId: this.id,
@@ -224,18 +283,6 @@
}
</script>
<style lang="less" scoped>
-/deep/ .van-picker__cancel{
- font-size: 0.4rem;
-}
-/deep/ .van-picker__confirm{
- font-size: 0.4rem;
-}
-/deep/ .van-picker__toolbar{
- height: 1.3rem;
-}
-/deep/ .van-picker-column{
- font-size: 0.4rem;
-}
.headf {
height: 1.17rem;
position: fixed;
@@ -279,115 +326,105 @@
.goumais {
width: 9.21rem;
margin: 0 auto;
+ padding: 0.4rem 0;
- .xiaoge {
- margin-top: 10px;
+ .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;
- height: 1.50rem;
justify-content: space-between;
align-items: center;
- margin: 5px 0;
+
+ .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 {
- display: flex;
- align-items: center;
- color: #333;
- font-size: .43rem;
- line-height: 1.5rem;
-
- img {
- width: 0.43rem;
- height: 0.43rem;
- margin-right: 0.133rem;
- }
- }
-
- .rtyh {
- background-color: rgb(245, 245, 245);
- width: 4.75rem;
- border: 1px solid rgb(224, 224, 224);
- border-radius: 5px;
- display: flex;
-
-
- .kunk {
- border-radius: 0.08rem;
- display: flex;
- align-items: center;
-
- input {
- color: #000;
- font-size: .37rem;
- background-color: rgb(245, 245, 245);
- width: 4rem;
- padding-left: 10px;
- height: 1.07rem !important;
- }
-
- a {
- color: #333;
- font-size: .4rem;
- line-height: 1.07rem;
- margin-right: 0.266rem;
- }
-
- .gangganicon {
- width: 0.26rem;
- height: 0.24rem;
- }
- }
- }
-
- .eduleft {
- display: flex;
- align-items: center;
-
- .eduleftimg {
- width: 0.43rem;
- height: 0.43rem;
- margin-right: 0.13rem;
- }
- }
-
- .eduright {
- justify-content: space-between;
- }
-
- .ertyu {
- color: #333;
- font-size: .4rem;
- line-height: 1.5rem;
- }
- }
-
- .fangxi {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: .4rem;
- text-align: center;
- margin-top: 20px;
-
- .fanh {
- width: 49%;
- height: 1.07rem;
- line-height: 1.07rem;
- border-radius: 5px;
color: #999;
- border: 1px solid #e0e0e0;
+ font-size: .32rem;
}
- .xuk {
- color: #fff;
- background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
- border: 1px solid #fff;
+ a {
+ color: #333;
+ font-size: .32rem;
+
+ &.red-amount {
+ color: #f33030;
+ }
}
}
-}
-
-.shougu {
- color: rgb(153, 153, 153);
- text-align: right;
}
.mail {
@@ -400,5 +437,6 @@
font-size: .43rem;
text-align: center;
background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
+ cursor: pointer;
}
</style>
--
Gitblit v1.9.3