9.55

DESKTOP-CVS3R96\我恁爹

2022-11-11 9ca581cca97e9ba95ff808f6b7a08c24a4758dbf

 src/page/trading/buy.vue

@@ -27,13 +27,18 @@
            </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>
@@ -49,28 +54,55 @@
            :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>
            <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">
@@ -78,6 +110,7 @@
                <span>{{ '可用余额(¥)' }}</span>
              </div>
              <div class="bottom_bzz">
                <!-- <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span> -->
                <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span>
                <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
                  <span
@@ -109,14 +142,14 @@
          </div>
          <div class="zy" v-show="checkedZy">
            <div class="left_zy">
              <input v-model="profitTarget" />
              <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="profitTarget--">
              <div class="addorj"  @click="zYjian">
                <img src="@/assets/img/ic_number_jian.png"/>
              </div>
              <div class="addorj" ></div>
              <div class="addorj" @click="profitTarget++">
              <div class="addorj" @click="profitTarget=(Number(profitTarget)+1).toFixed(2)">
                <img src="@/assets/img/ic_number_add.png"/>
              </div>
            </div>
@@ -131,45 +164,49 @@
          </div>
          <div class="zy" v-show="checkedZs">
            <div class="left_zy">
              <input v-model="zhisun" />
              <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="zhisun++">
              <div class="addorj" @click="zSjia">
                <img src="@/assets/img/ic_number_add.png"/>
              </div>
            </div>
          </div>
          <div class="zy">
          <!-- <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>
        <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>
    <van-action-sheet
  v-model="showGg"
  :actions="actions"
  :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() {
@@ -179,6 +216,9 @@
    }
    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
@@ -196,7 +236,8 @@
      tabsCurrentIndex: 0,
      priceTabs: ['市单价', '挂单'],
      priceTabsCurrentIndex: 0,
      num: 0.01,
      num: 1,
      nums: 1,
      profit: false,
      nowPrice: 0,
      type: 0,
@@ -207,6 +248,7 @@
      siteLeverList:[],
      checkedZy:false,
      checkedZs:false,
      buying:false,
      zhisun:0,
      showGg: false,
      profitTarget: 0,
@@ -232,8 +274,9 @@
    }
  },
  mounted() {
    this.getSettingInfo();
    this.getUserInfo();
    this.getSettingInfo();
    
  },
  methods: {
    handleBack() {
@@ -245,6 +288,201 @@
    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
        console.log(this.tabsCurrentIndex,"啊是对啊是给丢啊施工队啊收到过")
      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('/orderlist?index=2')
        } 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');
@@ -253,7 +491,7 @@
        // this.getProductSetting()
        this.$store.state.userInfo = data.data;
      } else {
        Toast(data.msg);
        this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
      }
      this.$store.state.user = this.user;
    },
@@ -264,8 +502,12 @@
        // 成功
        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){
        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++) {
@@ -277,13 +519,17 @@
            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 }
              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 {
        Toast(data.msg)
        this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
      }
    },
  }
@@ -384,7 +630,7 @@
          width: 65%;
          height: 80%;
          display: flex;
          justify-content: space-between;
          justify-content: center;
          > div {
            width: 45%;
            height: 70%;
@@ -402,6 +648,13 @@
              font-weight: 600;
            }
          }
          .actives{
            background: #fff;
            color: rgb(212,71,78);
            span {
              font-weight: 600;
            }
          }
        }
      }
    }
@@ -409,7 +662,7 @@
}
.price_tabs {
  width: 100%;
  height: 7rem;
  height: auto;
  padding: .2rem .8rem;
  background: #fff;
  margin-top: .1rem;
@@ -443,14 +696,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 {
@@ -484,6 +740,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 {
@@ -527,6 +787,7 @@
  padding: .2rem .8rem;
  display: flex;
  align-items: flex-end;
  padding-top: 0.8rem;
  > div {
    width: 100%;
    height: 1.2821rem;
@@ -571,4 +832,53 @@
  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>