<template>
|
<div class="buy_page">
|
<div class="content">
|
<div class="top_cny">
|
<div class="top_back">
|
<div class="left_back" @click="handleBack()">
|
<img src="../../assets/img/zuojiantou.png" alt />
|
</div>
|
<div class="right_title">
|
<div class="t_t">
|
<span>{{ name }}</span>
|
</div>
|
<div class="b_t">
|
<span>{{ code }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="bottom_buy_price">
|
<div class="cot">
|
<div class="lefts">
|
<div class="top_new">
|
<span>{{ nowPrice }}</span>
|
</div>
|
<div class="bottom_es">
|
<span>{{ '买入价' }}</span>
|
</div>
|
</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' : ''"
|
>
|
<span>{{ item }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</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">
|
<span>{{ '交易数量(手)' }}</span>
|
</div>
|
<div class="tr_es">
|
<div class="top_input">
|
<input type="text" v-model="num">
|
</div>
|
</div>
|
<div class="tr_rs gg" @click="showGg=true">
|
<div class="top_bzz">
|
<span>{{ '杠杆' }}</span>
|
<span>{{ '200X' }}</span>
|
</div>
|
<div class="bottom_bzz">
|
<span>{{ }}</span>
|
<span>{{ }}</span>
|
</div>
|
</div>
|
<div class="tr_rs">
|
<div class="top_bzz">
|
<span>{{ '需付保证金(¥)' }}</span>
|
<span>{{ '可用余额(¥)' }}</span>
|
</div>
|
<div class="bottom_bzz">
|
<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">
|
<div class="left_zy">
|
<span>止盈</span>
|
</div>
|
<div class="right_sw">
|
<van-switch v-model="checkedZy" />
|
</div>
|
</div>
|
<div class="zy" v-show="checkedZy">
|
<div class="left_zy">
|
<input v-model="profitTarget" />
|
</div>
|
<div class="right_sw" style="width:auto;">
|
<div class="addorj" @click="profitTarget--">
|
<img src="@/assets/img/ic_number_jian.png"/>
|
</div>
|
<div class="addorj" ></div>
|
<div class="addorj" @click="profitTarget++">
|
<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" />
|
</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="zhisun++">
|
<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>
|
</div>
|
</div>
|
<van-action-sheet
|
v-model="showGg"
|
:actions="actions"
|
cancel-text="取消"
|
description="选择杠杆"
|
close-on-click-action
|
/>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
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)
|
}
|
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,
|
profit: false,
|
nowPrice: 0,
|
type: 0,
|
code: '',
|
name: '',
|
settingInfo:[],
|
selectCycle: 20,
|
siteLeverList:[],
|
checkedZy:false,
|
checkedZs:false,
|
zhisun:0,
|
showGg: false,
|
profitTarget: 0,
|
actions: [
|
{ name: '100X', subname: '需付保证金：' },
|
{ name: '200X', subname: '需付保证金：'},
|
{ name: '300X', subname: '需付保证金：' },
|
],
|
profitArr: [
|
{
|
name: '止盈',
|
checked: false
|
},
|
{
|
name: '止损',
|
checked: false
|
},
|
{
|
name: '追踪止损',
|
checked: false
|
}
|
]
|
}
|
},
|
mounted() {
|
this.getSettingInfo();
|
this.getUserInfo();
|
},
|
methods: {
|
handleBack() {
|
this.$router.go(-1);
|
},
|
handleTradingClick(index) {
|
this.tabsCurrentIndex = index;
|
},
|
handleTabsClick(item, index) {
|
this.priceTabsCurrentIndex = index;
|
},
|
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 {
|
Toast(data.msg);
|
}
|
this.$store.state.user = this.user;
|
},
|
async getSettingInfo () {
|
// 网站设置信息
|
let data = await api.getSetting()
|
if (data.status === 0) {
|
// 成功
|
this.settingInfo = data.data
|
// 杠杆倍数
|
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]
|
let item = { label: val + '倍', value: val }
|
this.siteLeverList.push(item)
|
}
|
}
|
} else {
|
Toast(data.msg)
|
}
|
},
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.buy_page {
|
width: 100%;
|
min-height: 100vh;
|
background-color: #fff;
|
> .content {
|
width: 100%;
|
height: calc(100% - 1.6rem);
|
position: relative;
|
background-color: rgb(241,242,246);
|
}
|
}
|
.top_cny {
|
width: 100%;
|
height: 3.5385rem;
|
.top_back {
|
width: 100%;
|
height: 1.2rem;
|
display: flex;
|
align-items: center;
|
padding: 0 .1rem;
|
.left_back {
|
width: 0.8rem;
|
height: 80%;
|
display: flex;
|
align-items: center;
|
> img {
|
margin-top: 0.2rem;
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
.right_title {
|
width: 3rem;
|
height: 80%;
|
.t_t {
|
width: 100%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
font-size: 0.4615rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.b_t {
|
width: 100%;
|
height: 30%;
|
font-size: 0.3615rem;
|
display: flex;
|
align-items: flex-start;
|
color: #8c8c8c;
|
}
|
}
|
}
|
.bottom_buy_price {
|
width: 100%;
|
height: 2rem;
|
display: flex;
|
align-items: center;
|
padding: 0 .8rem;
|
margin-top: .3rem;
|
.cot {
|
width: 100%;
|
height: 1.2rem;
|
display: flex;
|
.lefts {
|
width: 40%;
|
height: 100%;
|
.top_new {
|
width: 100%;
|
height: 60%;
|
font-size: .5615rem;
|
color: rgb(232,55,70);
|
span {
|
font-weight: 600;
|
}
|
}
|
.bottom_es {
|
width: 100%;
|
height: 40%;
|
color: rgb(173, 173, 173);
|
}
|
}
|
.rights {
|
width: 60%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
>div {
|
width: 65%;
|
height: 80%;
|
display: flex;
|
justify-content: space-between;
|
> div {
|
width: 45%;
|
height: 70%;
|
background: rgb(236, 236, 236);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: .1rem;
|
color: rgb(173, 173, 173);
|
}
|
.active {
|
background: #fff;
|
color: rgb(110,169,118);
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.price_tabs {
|
width: 100%;
|
height: 7rem;
|
padding: .2rem .8rem;
|
background: #fff;
|
margin-top: .1rem;
|
border-radius: 0.3rem;
|
.tabs {
|
width: 100%;
|
height: .8205rem;
|
background: rgb(247,247,247);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: .15rem;
|
> div {
|
width: 49%;
|
height: 80%;
|
border-radius: .15rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.active {
|
background: #fff;
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
.tabs_content {
|
width: 100%;
|
margin-top: .3rem;
|
.num {
|
width: 100%;
|
height: .5rem;
|
}
|
.tr_es {
|
width: 100%;
|
height: 1.3rem;
|
margin-top: .3rem;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
.top_input {
|
width: 100%;
|
height: 70%;
|
font-size: .6615rem;
|
input {
|
font-weight: 600;
|
}
|
}
|
}
|
.tr_rs {
|
width: 100%;
|
height: 1.3rem;
|
margin-top: .4rem;
|
> div {
|
width: 100%;
|
height: 50%;
|
color: rgb(160, 160, 160);
|
display: flex;
|
justify-content: space-between;
|
span {
|
font-weight: 600;
|
}
|
}
|
.bottom_bzz {
|
color: #000;
|
font-size: .3846rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.top_bzz {
|
align-items: center;
|
}
|
}
|
.gg {
|
font-size: .3803rem;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
> div {
|
color: #000;
|
}
|
}
|
}
|
}
|
.switchs{
|
width: 100%;
|
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;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 0.05rem solid rgb(236, 236, 236);
|
>div {
|
width: 20%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
font-size: .3346rem;
|
}
|
.right_sw {
|
justify-content: flex-end;
|
}
|
}
|
}
|
.btn_buy{
|
width: 100%;
|
height: auto;
|
background: #fff;
|
padding: .2rem .8rem;
|
display: flex;
|
align-items: flex-end;
|
> div {
|
width: 100%;
|
height: 1.2821rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: rgb(68,155,84);
|
color: #fff;
|
font-size: .3846rem;
|
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%;
|
}
|
</style>
|
