From cf0d36bbe155ecdfd8bca429666405e830d0dc7a Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Sat, 12 Nov 2022 04:22:49 +0800
Subject: [PATCH] 最新
---
src/page/trading/buy.vue | 566 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 529 insertions(+), 37 deletions(-)
diff --git a/src/page/trading/buy.vue b/src/page/trading/buy.vue
index 5c80beb..dd46dda 100644
--- a/src/page/trading/buy.vue
+++ b/src/page/trading/buy.vue
@@ -8,10 +8,10 @@
</div>
<div class="right_title">
<div class="t_t">
- <span>{{ '人民币' }}</span>
+ <span>{{ name }}</span>
</div>
<div class="b_t">
- <span>{{ 'CNY' }}</span>
+ <span>{{ code }}</span>
</div>
</div>
</div>
@@ -19,7 +19,7 @@
<div class="cot">
<div class="lefts">
<div class="top_new">
- <span>{{ '1.34609' }}</span>
+ <span>{{ nowPrice }}</span>
</div>
<div class="bottom_es">
<span>{{ '买入价' }}</span>
@@ -27,47 +27,82 @@
</div>
<div class="rights">
<div class="ese">
- <div class="mr"
- v-for="(item, index) in tradingArr"
- :key="index"
- @click="handleTradingClick(index)"
- :class="tabsCurrentIndex === index ? 'active' : ''"
+ <div class="mc"
+ @click="handleTradingClick(0)"
+ :class="tabsCurrentIndex === 0 ? 'actives' : ''"
>
- <span>{{ item }}</span>
+ <span>卖出</span>
+ </div>
+
+ <div class="mr"
+ @click="handleTradingClick(1)"
+ :class="tabsCurrentIndex === 1 ? 'active' : ''"
+ >
+ <span>买入</span>
</div>
</div>
</div>
</div>
</div>
- <div class="price_tabs">
+
+ </div>
+
+ <div class="price_tabs">
<div class="tabs">
<div class="tab_item"
v-for="(item, index) in priceTabs"
:key="index"
@click="handleTabsClick(item, index)"
:class="priceTabsCurrentIndex === index ? 'active' : ''"
+
>
<span>{{ item }}</span>
</div>
</div>
<div class="tabs_content">
+ <div class="num" v-show="priceTabsCurrentIndex==1">
+ <span>{{ '当价格满足条件时买入' }}</span>
+ </div>
+ <div class="tr_es flexJy" v-show="priceTabsCurrentIndex==1">
+ <div class="top_input">
+ <input type="text" v-model="nums" onkeyup="value=value.replace(/[^\d]/g,'')" >
+ </div>
+ <div class="right_sw flexJy" style="width:auto;">
+ <div class="addorj" @click="gdJian">
+ <img src="@/assets/img/ic_number_jian.png"/>
+ </div>
+ <div class="addorj" ></div>
+ <div class="addorj" @click="typeof nums =='string'?nums = Number((nums.match(/\d+/g))[0])+1:nums++">
+ <img src="@/assets/img/ic_number_add.png"/>
+ </div>
+ </div>
+ </div>
<div class="num">
<span>{{ '交易数量(手)' }}</span>
</div>
- <div class="tr_es">
+ <div class="tr_es flexJy">
<div class="top_input">
- <input type="text" v-model="num">
+ <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="num">
+ </div>
+ <div class="right_sw flexJy" style="width:auto;">
+ <div class="addorj" @click="jyslJian">
+ <img src="@/assets/img/ic_number_jian.png"/>
+ </div>
+ <div class="addorj" ></div>
+ <div class="addorj" @click="typeof num =='string'?num = Number((num.match(/\d+/g))[0])+1:num++">
+ <img src="@/assets/img/ic_number_add.png"/>
</div>
</div>
- <div class="tr_rs gg">
+ </div>
+ <div class="tr_rs gg" @click="showGg=true">
<div class="top_bzz">
<span>{{ '杠杆' }}</span>
- <span>{{ '200X' }}</span>
+ <span>{{ selectCycle+'X' }}</span>
</div>
- <div class="bottom_bzz">
+ <!-- <div class="bottom_bzz">
<span>{{ }}</span>
<span>{{ }}</span>
- </div>
+ </div> -->
</div>
<div class="tr_rs">
<div class="top_bzz">
@@ -75,46 +110,153 @@
<span>{{ '可用余额(¥)' }}</span>
</div>
<div class="bottom_bzz">
- <span>{{ '5.00' }}</span>
- <span>{{ '49,698.61' }}</span>
+ <!-- <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span> -->
+ <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span>
+ <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
+ <span
+ v-if="$store.state.userInfo&&type!='0'"
+ style="white-space: nowarp;"
+ >
+ {{ '¥' + $store.state.userInfo.userIndexAmt
+ }}
+ </span>
+ <span
+ v-if="$store.state.userInfo.userAmt!=undefined&&type=='0'"
+ style="white-space: nowarp;"
+ >
+ {{ '¥ ' + $store.state.userInfo.userAmt
+ }}
+ </span>
</div>
</div>
</div>
</div>
<div class="switchs">
- <div class="zy"
- v-for="(item, index) in profitArr"
- :key="index"
- >
+ <div class="zy">
<div class="left_zy">
- <span>{{ item.name }}</span>
+ <span>止盈</span>
</div>
<div class="right_sw">
- <van-switch v-model="item.checked" />
+ <van-switch v-model="checkedZy" />
</div>
</div>
+ <div class="zy" v-show="checkedZy">
+ <div class="left_zy">
+ <input v-model="profitTarget" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" @input="zyInt"/>
+ </div>
+ <div class="right_sw" style="width:auto;">
+ <div class="addorj" @click="zYjian">
+ <img src="@/assets/img/ic_number_jian.png"/>
+ </div>
+ <div class="addorj" ></div>
+ <div class="addorj" @click="profitTarget=(Number(profitTarget)+1).toFixed(2)">
+ <img src="@/assets/img/ic_number_add.png"/>
+ </div>
+ </div>
+ </div>
+ <div class="zy">
+ <div class="left_zy">
+ <span>止损</span>
+ </div>
+ <div class="right_sw">
+ <van-switch v-model="checkedZs" />
+ </div>
+ </div>
+ <div class="zy" v-show="checkedZs">
+ <div class="left_zy">
+ <input v-model="zhisun" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" @input="zsInt"/>
+ </div>
+ <div class="right_sw" style="width:auto;">
+ <div class="addorj" @click="zhisun--">
+ <img src="@/assets/img/ic_number_jian.png"/>
+ </div>
+ <div class="addorj" ></div>
+ <div class="addorj" @click="zSjia">
+ <img src="@/assets/img/ic_number_add.png"/>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="zy">
+ <div class="left_zy">
+ <span>追踪止损</span>
+ </div>
+ <div class="right_sw">
+ <van-switch v-model="profitArr[2].checked" />
+ </div>
+ </div> -->
</div>
- <div class="btn_buy">
- <div>
- <span>{{ '买入' }}</span>
+ <div class="btn_buy" @click="gdOrSetBuy()" >
+ <div :class="tabsCurrentIndex == 0 ? 'maichu':''">
+ <span>{{ tabsCurrentIndex==0?'卖出':'买入' }}</span>
</div>
</div>
- </div>
</div>
+ <van-action-sheet
+ v-model="showGg"
+ :actions="siteLeverList"
+ cancel-text="取消"
+ description="选择杠杆"
+ close-on-click-action
+ @select="onSelect"
+/>
</div>
</template>
<script>
+import * as api from "@/axios/api";
+import {
+ Toast
+} from "mint-ui";
export default {
name: 'trBuy',
+ created() {
+ if(this.$route.query.t){
+ this.tabsCurrentIndex= Number(this.$route.query.t)
+ console.log(this.tabsCurrentIndex)
+ }
+ if(this.$route.query.m){
+ this.nowPrice= Number(this.$route.query.m)
+ this.profitTarget = Number(this.$route.query.m)
+ this.zhisun = Number(this.$route.query.m)
+ this.nums = Number(this.$route.query.m)
+ }
+ 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.type){
+ this.type= this.$route.query.type
+ }
+ },
data() {
return {
tradingArr: ['卖出', '买入'],
tabsCurrentIndex: 0,
priceTabs: ['市单价', '挂单'],
priceTabsCurrentIndex: 0,
- num: 0.01,
+ num: 1,
+ nums: 1,
profit: false,
+ nowPrice: 0,
+ type: 0,
+ code: '',
+ name: '',
+ settingInfo:[],
+ selectCycle: 20,
+ siteLeverList:[],
+ checkedZy:false,
+ checkedZs:false,
+ buying:false,
+ zhisun:0,
+ showGg: false,
+ profitTarget: 0,
+ actions: [
+ { name: '100X', subname: '需付保证金：' },
+ { name: '200X', subname: '需付保证金：'},
+ { name: '300X', subname: '需付保证金：' },
+ ],
profitArr: [
{
name: '止盈',
@@ -131,6 +273,11 @@
]
}
},
+ mounted() {
+ this.getUserInfo();
+ this.getSettingInfo();
+
+ },
methods: {
handleBack() {
this.$router.go(-1);
@@ -140,7 +287,250 @@
},
handleTabsClick(item, index) {
this.priceTabsCurrentIndex = index;
+ },
+ jyslJian(){
+ if(typeof this.num =='string'){
+ this.num = 1
+ }else{
+ if(this.num>1){
+ if(typeof this.num =='string'){
+ this.num = Number((this.num.match(/\d+/g))[0])-1
+ }else{
+ this.num--
+ }
+ }else{
+ this.num=1
+ }
}
+ },
+ gdJian(){
+ if(typeof this.nums =='string'){
+ this.nums = this.nowPrice
+ }else{
+ if(this.nums>1){
+ if(typeof this.nums =='string'){
+ this.nums = Number((this.nums.match(/\d+/g))[0])-1
+ }else{
+ this.nums--
+ }
+ }else{
+ this.nums=1
+ }
+ }
+ },
+ zYjian(){
+ if((Number(this.profitTarget)-1).toFixed(2)<this.nowPrice){
+ this.profitTarget = this.nowPrice
+ }else{
+ this.profitTarget=(Number(this.profitTarget)-1).toFixed(2)
+ }
+
+ },
+ zSjia(){
+ if((Number(this.zhisun)+1).toFixed(2)>this.nowPrice){
+ this.zhisun = this.nowPrice
+ }else{
+ this.zhisun++
+ }
+ },
+ zsInt(e){
+ if(typeof e.target.value =='string'){
+ this.zhisun = this.nowPrice
+ }else{
+ if(Number(e.target.value)>this.nowPrice){
+ this.zhisun = this.nowPrice
+ }
+ }
+
+ },
+ zyInt(e){
+ if(typeof e.target.value =='string'){
+ this.profitTarget = this.nowPrice
+ }else{
+ if(Number(e.target.value)<Number(this.nowPrice)){
+ this.profitTarget = Number(this.nowPrice)
+ }
+ }
+ },
+ onSelect(val){
+ this.selectCycle = val.gg
+
+ },
+ gdOrSetBuy(){
+ if(this.priceTabsCurrentIndex==0){
+ this.setBuy()
+ }else{
+ this.gdBuy()
+ }
+ },
+ //挂单
+ async gdBuy(){
+ if(this.buying){
+ return;
+ }
+ this.buying = true
+ let opts={
+ stockId:this.code,
+ buyNum:this.num * 100,
+ lever: this.selectCycle ? this.selectCycle : 0,
+ targetPrice:this.nums,
+ }
+ if(this.tabsCurrentIndex==0){
+ opts.buyType=1
+ }else{
+ opts.buyType=0
+ }
+ if(this.checkedZy){
+ //opts.profitTarget = this.profitTarget.substring(0,this.profitTarget.indexOf(".")+3)
+ opts.profitTarget = this.profitTarget
+ }
+ if(this.checkedZs){
+ opts.stopTarget = this.zhisun
+ }
+ let data = await api.guadan(opts)
+ this.buying = false
+ if (data.status === 0) {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg,'elAlertType':'success'});
+ this.getUserInfo()
+ this.$router.push('/warehouse?index=1')
+ } else {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
+ }
+ },
+ //买卖
+ setBuy(){
+ if (!this.$store.state.userInfo.idCard) {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': '您还未实名认证,请先实名认证了再下单'});
+ this.$router.push('/authentication')
+ 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: this.num * 100, // 单位为手
+ //buyNum: (this.num.match(/\d+/g))[0] * 100, // 单位为手
+ lever: this.selectCycle ? this.selectCycle : 0,
+ }
+ if(this.tabsCurrentIndex==0){
+ opts.buyType=1
+ }else{
+ opts.buyType=0
+ }
+ if(this.checkedZy){
+ //opts.profitTarget = this.profitTarget.substring(0,this.profitTarget.indexOf(".")+3)
+ opts.profitTarget = this.profitTarget
+ }
+ if(this.checkedZs){
+ opts.stopLoss = this.zhisun
+ }
+ if(this.type==0){
+ //股票
+ this.gpBuy(opts)
+ // opts.stockId= this.code,
+ // data = await api.buy(opts)
+ }else{
+ //指数
+ this.zsBuy(opts)
+ // opts.indexId= this.code,
+ // data = await api.indexBuy(opts)
+ }
+
+
+ },
+ //股票买入
+ async gpBuy(opts){
+ opts.stockId= this.code
+ let data = await api.buy(opts)
+ this.buying = false
+ if (data.status === 0) {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg,'elAlertType':'success'});
+ this.getUserInfo()
+ this.$router.push('/orderlist?index=2')
+ } else {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
+ }
+ },
+ //指数买入
+ async zsBuy(opts){
+ opts.indexId= this.type
+ let data = await api.indexBuy(opts)
+ this.buying = false
+ if (data.status === 0) {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg,'elAlertType':'success'});
+ this.getUserInfo()
+ this.$router.push('/orderlist?index=2')
+ } else {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
+ }
+ },
+ async getUserInfo() {
+ // 获取用户信息
+ // let showcookie = this.getCookie('USER_TOKEN');
+ let data = await api.getUserInfo();
+ if (data.status === 0) {
+ // this.getProductSetting()
+ this.$store.state.userInfo = data.data;
+ } else {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
+ }
+ this.$store.state.user = this.user;
+ },
+ async getSettingInfo () {
+ // 网站设置信息
+ let data = await api.getSetting()
+ if (data.status === 0) {
+ // 成功
+ this.settingInfo = data.data
+ // 杠杆倍数
+ //data.data.siteLever根据/分割成数组
+ //this.siteLeverList = data.data.siteLever.split('/')
+
+
+ this.selectCycle = data.data.siteLever
+ if(this.$store.state.userInfo !== undefined && this.$store.state.userInfo !== null && this.$store.state.userInfo.phone !== '' && this.$store.state.userInfo.siteLever != null){
+ this.selectCycle = this.$store.state.userInfo.siteLever.split('/')[0]
+ this.siteLeverList = []
+ for (let i = 0; i < this.$store.state.userInfo.siteLever.split('/').length; i++) {
+ let val = this.$store.state.userInfo.siteLever.split('/')[i]
+ let item = { label: val + '倍', value: val }
+ this.siteLeverList.push(item)
+ }
+ } else {
+ this.selectCycle = data.data.siteLever.split('/')[0]
+ this.siteLeverList = []
+ for (let i = 0; i < data.data.siteLever.split('/').length; i++) {
+
+ let val = data.data.siteLever.split('/')[i]
+ var ccet = (Number(this.nowPrice)/ Number(val)).toFixed(2)
+ //let item = { label: val + '倍', value: val ,bzj:ccet}
+ let item = { name: val + 'X', subname: '需付保证金：' + ccet,gg:val,bzj:ccet}
+ this.siteLeverList.push(item)
+ }
+ }
+
+ } else {
+ this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
+ }
+ },
}
};
</script>
@@ -148,11 +538,13 @@
<style scoped lang="less">
.buy_page {
width: 100%;
- height: calc(100% - 1.7rem);
+ min-height: 100vh;
+ background-color: #fff;
> .content {
width: 100%;
- height: 100%;
+ height: calc(100% - 1.6rem);
position: relative;
+ background-color: rgb(241,242,246);
}
}
.top_cny {
@@ -237,7 +629,7 @@
width: 65%;
height: 80%;
display: flex;
- justify-content: space-between;
+ justify-content: center;
> div {
width: 45%;
height: 70%;
@@ -255,6 +647,13 @@
font-weight: 600;
}
}
+ .actives{
+ background: #fff;
+ color: rgb(212,71,78);
+ span {
+ font-weight: 600;
+ }
+ }
}
}
}
@@ -262,10 +661,11 @@
}
.price_tabs {
width: 100%;
- height: 7rem;
+ height: auto;
padding: .2rem .8rem;
background: #fff;
margin-top: .1rem;
+ border-radius: 0.3rem;
.tabs {
width: 100%;
height: .8205rem;
@@ -295,14 +695,17 @@
.num {
width: 100%;
height: .5rem;
+ line-height: 0.5rem;
+ position: relative;
+ top: 0.2rem;
}
.tr_es {
width: 100%;
height: 1.3rem;
- margin-top: .3rem;
+ margin-top: .15rem;
border-bottom: 0.05rem solid rgb(236, 236, 236);
.top_input {
- width: 100%;
+ width: 70%;
height: 70%;
font-size: .6615rem;
input {
@@ -336,6 +739,10 @@
}
}
.gg {
+ margin-top: 0!important;
+ height: 1.8rem;
+ display: flex;
+ align-items: center;
font-size: .3803rem;
border-bottom: 0.05rem solid rgb(236, 236, 236);
> div {
@@ -346,11 +753,14 @@
}
.switchs{
width: 100%;
- height: 6rem;
+ height: auto;
padding: 0 .8rem;
background: #fff;
margin-top: .3rem;
+ border-radius: 0.3rem 0.3rem 0 0;
+ transition: all 0.5s;
.zy {
+ transition: all 0.5s;
width: 100%;
height: 1.8rem;
display: flex;
@@ -371,11 +781,12 @@
}
.btn_buy{
width: 100%;
- height: 4.8rem;
+ height: auto;
background: #fff;
padding: .2rem .8rem;
display: flex;
align-items: flex-end;
+ padding-top: 0.8rem;
> div {
width: 100%;
height: 1.2821rem;
@@ -388,4 +799,85 @@
border-radius: .15rem;
}
}
+/deep/.van-action-sheet__name{
+ font-size: .3846rem;
+ color: #000;
+}
+/deep/.van-action-sheet__gap{
+ height: 0.25rem;
+
+}
+/deep/.van-action-sheet__cancel{
+ font-size: .4246rem;
+ height: 1.3rem;
+ color: #000;
+}
+/deep/.van-action-sheet__description{
+ font-size: 0.3846rem;
+ height: 1.45rem;
+ line-height: 0.7rem;
+}
+.left_zy input{
+ font-size: 0.48rem;
+ font-weight: 500;
+}
+.addorj{
+ width:0.7rem;
+ height: 0.7rem;
+ color: #000;
+ font-weight: 500;
+}
+.addorj img{
+ width: 100%;
+ height: 100%;
+}
+.flexJy{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.top_input input{
+ width: 100%;
+}
+.maichu{
+ background-color: rgb(225,59,69)!important;
+}
+.mr{
+ position: relative;
+ &::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: -.1rem;
+ z-index: 10000;
+ background: rgba(255,255,255,0);
+ border-left: 0.12rem solid rgb(241,242,246);
+ transform-origin: bottom right;
+ -ms-transform: skew(-10deg, 0deg);
+ -webkit-transform: skew(-10deg, 0deg);
+ transform: skew(-10deg, 0deg);
+}
+}
+.mc{
+ position: relative;
+ &::after {
+ content: " ";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 10000;
+ background: rgba(255,255,255,0);
+ border-right: 0.1rem solid rgb(241,242,246);
+ transform-origin: bottom left;
+ -ms-transform: skew(-10deg, 0deg);
+ -webkit-transform: skew(-10deg, 0deg);
+ transform: skew(-10deg, 0deg);
+}
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3