<template>
|
<div>
|
<div class="kuange">
|
<!-- <div class="kdan" @click="shengoujilu"><img
|
src="data:image/png;base64,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">
|
<p>申购记录</p>
|
</div> -->
|
<div class="kdan" @click="sharerecordDz"><img
|
src="data:image/png;base64,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">
|
<p>{{ $t("jy3") }}</p>
|
</div>
|
</div>
|
<div class="dbox">
|
<div class="daz">
|
<span class="d1">{{ $t("MingCheng") }}</span>
|
<span class="d2">{{ $t("hj81") }}</span>
|
</div>
|
</div>
|
<div class="list" v-for="(item, index) in dazongList" :key="index">
|
<div class="lbox">
|
<div class="top-section">
|
<div class="lb1">
|
<h6>{{ item.stockName }}</h6>
|
<p>
|
<span v-if="item.stockType == 'sz'">{{ $t("jy83") }}</span>
|
<span class="sh" v-if="item.stockType == 'sh'">{{ $t("jy84") }}</span>
|
<span class="bj" v-if="item.stockType == 'bj'">{{ $t("jy85") }}</span>
|
<a :class="item.stockType == 'sh' ? 'shbg' : item.stockType == 'bj' ? 'bjbg' : ''">{{
|
item.stockGid
|
}}</a>
|
</p>
|
</div>
|
<div class="top-right">
|
<div class="lb2">
|
<div class="price-value">{{ item.price }}{{ $t('jy51') }}</div>
|
<div class="price-label">{{ $t("hj81") }}</div>
|
</div>
|
<div class="lb3"><a @click="getdetail(item)">{{ $t("hj238") }}</a></div>
|
</div>
|
</div>
|
<div class="middle-section">
|
<div class="share-info">
|
<span class="label">{{ $t('dz_share') }}:</span>
|
<span class="value">{{ formatAmount(item.stockShare || 0) }}</span>
|
</div>
|
<div class="surplus-info">
|
<span class="label">{{ $t('dz_completed') }}:</span>
|
<span class="value">{{ formatAmount(item.stockSurplus || 0) }}</span>
|
</div>
|
</div>
|
<div class="progress-section">
|
<div class="progress-bar">
|
<div class="progress-fill" :style="{ width: getProgressPercent(item) + '%' }">
|
<div class="progress-text-wrap">
|
<div class="progress-text">{{ getProgressPercent(item) }}%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<van-popup v-model="show" round position="bottom">
|
<div class="boxd">
|
<!-- 顶部份额和已完成金额 -->
|
<!-- <div class="popup-header">
|
<span class="header-left">{{ $t("dz_share") }}: {{ formatAmount(currentItem.stockShare || 0) }}</span>
|
<span class="header-right">{{ $t("dz_completed") }}: {{ formatAmount(currentItem.stockSurplus || 0) }}</span>
|
</div> -->
|
<!-- 标题和关闭按钮 -->
|
<div class="boxh">
|
<span class="close-btn" @click="show = false">×</span>
|
<h5>{{ $t("hj85") }}</h5>
|
</div>
|
<!-- 价格输入 -->
|
<div class="price-section">
|
<div class="erty price-input">
|
<input type="number" class="inpy" v-model="price" disabled :placeholder="currentItem.price || ''">
|
<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="num"
|
@input="num = num.replace(/^(0+)|[^\d]+/g, '')">
|
<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 || 0).toFixed(2) }}</a>
|
</p>
|
<p class="plm">
|
<span>{{ $t("jy88") }}</span>
|
<a class="red-amount">¥{{ getActualAmount() }}</a>
|
</p>
|
</div>
|
<!-- 密码输入 -->
|
<!-- <div class="password-section">
|
<div class="erty">
|
<input :placeholder="$t('jy89')" type="password" class="inpy" v-model="password">
|
</div>
|
</div> -->
|
<!-- 下单按钮 -->
|
<div class="maik" @click="getxiadan">{{ $t("hj85") }}{{ $t("jy150") }}</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import * as api from '@/axios/api'
|
export default {
|
components: {
|
|
},
|
props: {},
|
data() {
|
return {
|
show: false,
|
dazongList: [],
|
num: '',
|
currentItem: {},
|
userinfo: {},
|
password: '',
|
price: '',
|
selectedPosition: ''
|
}
|
},
|
mounted() {
|
this.stockgetDzList()
|
this.getUserInfo()
|
},
|
methods: {
|
sharerecordDz(){
|
this.$router.push({path:'/sharerecordDz'})
|
},
|
getdetail(item) {
|
this.currentItem = item
|
this.price = item.price || ''
|
this.num = ''
|
this.selectedPosition = ''
|
this.password = ''
|
this.show = true
|
},
|
setCurrentPrice() {
|
if (this.currentItem.price) {
|
this.price = this.currentItem.price
|
}
|
},
|
selectPosition(position) {
|
this.selectedPosition = position
|
if (this.userinfo.enableAmt && this.price) {
|
let availableAmount = parseFloat(this.userinfo.enableAmt) || 0
|
let currentPrice = parseFloat(this.price) || 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.num = maxHands.toString()
|
}
|
},
|
getActualAmount() {
|
if (this.price && this.num) {
|
let price = parseFloat(this.price) || 0
|
let num = parseFloat(this.num) || 0
|
return (price * num * 100).toFixed(2)
|
}
|
return '0.00'
|
},
|
async getxiadan() {
|
if (!this.price) {
|
this.$toast('请输入价格')
|
return
|
}
|
if (!this.num) {
|
this.$toast(this.$t('jy87'))
|
return
|
}
|
// if (!this.password) {
|
// this.$toast(this.$t('jy89'))
|
// return
|
// }
|
var opt = {
|
stockCode: this.currentItem.stockCode,
|
password: this.password,
|
num: this.num * 100,
|
price: this.price
|
}
|
let res = await api.buyStockDz(opt)
|
// 先关闭弹窗，避免遮罩层遮挡 Toast
|
this.show = false
|
if (res.status == 0) {
|
this.$nextTick(() => {
|
this.$toast(this.$t('dz_buySuccess'))
|
})
|
this.stockgetDzList()
|
} else {
|
this.$nextTick(() => {
|
this.$toast(res.msg)
|
})
|
}
|
},
|
async stockgetDzList() {
|
let res = await api.stockgetDzList()
|
if (res.status == 0) {
|
this.dazongList = res.data
|
}
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
this.userinfo = data.data;
|
}
|
},
|
getProgressPercent(item) {
|
if (!item.stockShare || item.stockShare === 0) {
|
return 0;
|
}
|
const percent = (item.stockSurplus || 0) / item.stockShare * 100;
|
return Math.min(100, Math.max(0, Math.round(percent * 100) / 100));
|
},
|
formatAmount(amount) {
|
return Number(amount).toLocaleString('zh-CN', {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2
|
});
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.dbox {
|
width: 100%;
|
padding-bottom: 0.266rem;
|
border-bottom: 1px solid #e0e0e0;
|
|
.daz {
|
width: 9.35rem;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
color: #666;
|
font-size: .35rem;
|
}
|
|
.d1 {
|
flex: 1;
|
text-align: left;
|
}
|
|
.d2 {
|
flex: 1;
|
text-align: right;
|
}
|
}
|
}
|
.kuange {
|
width: 5.34rem;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
|
.kdan {
|
width: 2.14rem;
|
text-align: center;
|
margin: 0 auto;
|
margin-bottom: 0.5rem;
|
img {
|
width: 0.51rem;
|
height: 0.51rem;
|
}
|
|
p {
|
color: #333;
|
font-size: .35rem;
|
margin-top: 0.24rem;
|
}
|
}
|
}
|
|
.list {
|
width: 100%;
|
padding: 0.4rem 0.3rem;
|
margin-bottom: 0.3rem;
|
background: #fff;
|
border-radius: 0.25rem;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
.lbox {
|
width: 9.35rem;
|
margin: 0 auto;
|
|
.top-section {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 0.4rem;
|
|
.lb1 {
|
flex: 1;
|
h6 {
|
color: #333;
|
font-size: .4rem;
|
font-weight: 600;
|
margin-bottom: 0.13rem;
|
}
|
|
p {
|
color: #333;
|
font-size: .32rem;
|
margin: 0;
|
|
span {
|
width: 0.4rem;
|
height: 0.4rem;
|
background: #4caf50;
|
border-radius: 0.05rem;
|
padding: 0.04rem;
|
text-align: center;
|
line-height: .4rem;
|
color: #fff;
|
font-size: .3rem;
|
display: inline-block;
|
margin-right: 0.1rem;
|
}
|
|
a {
|
display: inline-block;
|
height: 0.4rem;
|
line-height: .4rem;
|
padding: 0 0.11rem;
|
background: rgba(59, 79, 222, .1);
|
border-radius: 0.05rem;
|
color: #3b4fde;
|
font-size: .32rem;
|
vertical-align: middle;
|
}
|
|
.bj {
|
background: #ea6248;
|
}
|
|
.sh {
|
background: #aa3bde;
|
}
|
|
.shbg {
|
color: #aa3bde;
|
background: rgba(170, 59, 222, .1);
|
}
|
|
.bjbg {
|
color: #ea6248;
|
background: rgba(234, 98, 72, .1);
|
}
|
}
|
}
|
|
.top-right {
|
display: flex;
|
align-items: flex-end;
|
gap: 0.2rem;
|
|
.lb2 {
|
// text-align: right;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.price-value {
|
color: #d73d3d;
|
font-size: .4rem;
|
font-weight: 600;
|
}
|
.price-label {
|
color: #999;
|
font-size: .28rem;
|
margin-top: 0.15rem;
|
}
|
}
|
|
.lb3 {
|
a {
|
display: inline-block;
|
width: 1.6rem;
|
height: 100%;
|
background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
|
border-radius: 0.35rem;
|
text-align: center;
|
color: #fff;
|
font-size: .32rem;
|
line-height: .67rem;
|
}
|
}
|
}
|
}
|
|
.middle-section {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 0.1rem;
|
|
.share-info, .surplus-info {
|
display: flex;
|
align-items: center;
|
gap: 0.1rem;
|
|
.label {
|
color: #666;
|
font-size: .32rem;
|
}
|
|
.value {
|
color: #333;
|
font-size: .32rem;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.progress-section {
|
width: 100%;
|
height: 10px; /* 核心：降低整体容器高度，匹配图片紧凑感 */
|
display: flex;
|
align-items: center;
|
}
|
|
.progress-bar {
|
position: relative;
|
width: 100%;
|
height: 100%; /* 跟随外层容器高度 */
|
background: #f0f0f0;
|
border-radius: 8px; /* 圆角适配小高度，更精致 */
|
overflow: visible;
|
}
|
|
.progress-fill {
|
position: relative;
|
height: 100%;
|
background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
|
transition: width 0.3s ease;
|
border-radius: 8px; /* 同步圆角 */
|
min-width: 40px;
|
display: flex;
|
align-items: center;
|
}
|
|
.progress-text-wrap {
|
position: absolute;
|
right: 0;
|
top: -0.15556rem;
|
height: 300%;
|
}
|
|
.progress-text {
|
font-size: 14px; /* 缩小字体适配小高度 */
|
color: #fff;
|
background-color: red;
|
padding: 0 10px; /* 紧凑内边距，不宽不高 */
|
height: 100%;
|
border-radius: 18px; /* 圆角和进度条一致，适配小高度 */
|
font-weight: 600;
|
white-space: nowrap;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
max-width: max-content;
|
}
|
}
|
}
|
|
.boxd {
|
background: #fff;
|
border-radius: 0.266rem 0.266rem 0 0;
|
padding-bottom: 0.53rem;
|
|
.popup-header {
|
background: #4a4a4a;
|
color: #fff;
|
padding: 0.3rem 0.53rem;
|
display: flex;
|
justify-content: space-between;
|
font-size: 0.32rem;
|
|
.header-left, .header-right {
|
color: #fff;
|
}
|
}
|
|
.boxh {
|
height: 1.2rem;
|
border-bottom: 0.0266rem solid #e0e0e0;
|
text-align: center;
|
line-height: 1.2rem;
|
color: #333;
|
font-size: 0.43rem;
|
width: 9.48rem;
|
margin: 0 auto;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.close-btn {
|
position: absolute;
|
left: 0.266rem;
|
width: 0.8rem;
|
height: 0.8rem;
|
font-size: 0.6rem;
|
color: #999;
|
line-height: 0.8rem;
|
text-align: center;
|
cursor: pointer;
|
}
|
|
h5 {
|
color: #333;
|
font-size: 0.43rem;
|
font-weight: 500;
|
margin: 0;
|
}
|
}
|
|
.price-section {
|
padding: 0.4rem 0.53rem 0;
|
}
|
|
.quantity-section, .position-section {
|
padding: 0.4rem 0.53rem 0;
|
|
.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;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
&.price-input {
|
margin-top: 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: #3b4fde;
|
background: rgba(59, 79, 222, 0.1);
|
color: #3b4fde;
|
}
|
}
|
}
|
|
.amount-info {
|
padding: 0.4rem 0.53rem 0;
|
}
|
|
.password-section {
|
padding: 0.4rem 0.53rem 0;
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.maik {
|
width: 9.21rem;
|
height: 1.07rem;
|
background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
|
border-radius: 0.26rem;
|
margin: 0.4rem auto 0;
|
text-align: center;
|
line-height: 1.07rem;
|
color: #fff;
|
font-size: .37rem;
|
cursor: pointer;
|
}
|
}
|
</style>
|
