wener~

DESKTOP-CVS3R96\我恁爹

2022-11-14 f8b256ef152e54c19adb85856f62432d59c16b6e

 src/page/trading/buy.vue

@@ -7,8 +7,8 @@
            <img src="../../assets/img/zuojiantou.png" alt />
          </div>
          <div class="right_title">
            <div class="t_t">
              <span>{{ name }}</span>
            <div class="t_t" style="white-space: nowrap;">
              <span>{{ name | getName }}</span>
            </div>
            <div class="b_t">
              <span>{{ code }}</span>
@@ -27,17 +27,11 @@
            </div>
            <div class="rights">
              <div class="ese">
                <div class="mc" 
                @click="handleTradingClick(0)"
                :class="tabsCurrentIndex === 0 ? 'actives' : ''"
                >
                <div class="mc" @click="handleTradingClick(0)" :class="tabsCurrentIndex === 0 ? 'actives' : ''">
                  <span>卖出</span>
                </div>
                
                <div class="mr" 
                @click="handleTradingClick(1)"
                :class="tabsCurrentIndex === 1 ? 'active' : ''"
                >
                <div class="mr" @click="handleTradingClick(1)" :class="tabsCurrentIndex === 1 ? 'active' : ''">
                  <span>买入</span>
                </div>
              </div>
@@ -49,13 +43,8 @@

      <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' : ''"
            
            >
          <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>
@@ -65,14 +54,17 @@
            </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,'')" >
              <input type="Number" v-model="nums">
              </div>
              <div class="right_sw flexJy" style="width:auto;">
              <div class="addorj"  @click="gdJian">
                <img src="@/assets/img/ic_number_jian.png"/>


                <img src="@/assets/img/ic_number_jian.png" alt />
              </div>
              <div class="addorj" ></div>
              <div class="addorj" @click="typeof nums =='string'?nums = Number((nums.match(/\d+/g))[0])+1:nums++">
              <div class="addorj"
                @click="typeof nums == 'string' ? nums = Number(Number(nums) + 1).toFixed(2) : nums = (Number(nums) + 1).toFixed(2)">
                <img src="@/assets/img/ic_number_add.png"/>
              </div>
            </div>
@@ -82,14 +74,15 @@
            </div>
            <div class="tr_es flexJy">
              <div class="top_input">
                <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="num">
              <input type="number" 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++">
              <div class="addorj"
                @click="typeof num == 'string' ? num = Number(Number(num) + 1) : num = Number(Number(num) + 1)">
                <img src="@/assets/img/ic_number_add.png"/>
              </div>
            </div>
@@ -106,25 +99,22 @@
            </div>
            <div class="tr_rs">
              <div class="top_bzz">
                <span>{{ '需付保证金(¥)' }}</span>
                <span>{{ '可用余额(¥)' }}</span>
              <span>{{ if_us == 1 ? '需付保证金($)' : if_us == '2' ? '需付保证金(HK$)' : '需付保证金(¥)' }}</span>
              <span>{{ if_us == 1 ? '可用余额($)' : if_us == '2' ? '可用余额(HK$)' : '可用余额(¥)' }}</span>
              </div>
              <div class="bottom_bzz">
                <!-- <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span> -->
                <span>{{ (nowPrice/ selectCycle).toFixed(2) }}</span>
              <span>{{ (nowPrice / selectCycle * 100).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 v-if="$store.state.userInfo && type != '0'" style="white-space: nowarp;">
                {{ if_us == 1 ? '$' + (Number($store.state.userInfo.userIndexAmt) / 7.1).toFixed(2) : if_us == '2' ?
                    'HK$' +
                    Number($store.state.userInfo.userIndexAmt / 0.9).toFixed(2) : '¥' + $store.state.userInfo.userIndexAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&type=='0'"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
              <span v-if="$store.state.userInfo.userAmt != undefined && type == '0'" style="white-space: nowarp;">
                {{ if_us == 1 ? '$' + (Number($store.state.userInfo.userAmt) / 7.1).toFixed(2) : if_us == '2' ? 'HK$' +
                    Number($store.state.userInfo.userAmt / 0.9).toFixed(2) : '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
              </div>
@@ -142,7 +132,8 @@
          </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"/>
            <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">
@@ -191,14 +182,8 @@
          </div>
        </div>
    </div>
    <van-action-sheet
  v-model="showGg"
  :actions="siteLeverList"
  cancel-text="取消"
  description="选择杠杆"
  close-on-click-action
  @select="onSelect"
/>
    <van-action-sheet v-model="showGg" :actions="siteLeverList" cancel-text="取消" description="选择杠杆"
      close-on-click-action @select="onSelect" />
  </div>
</template>

@@ -229,6 +214,9 @@
    if(this.$route.query.type){
      this.type= this.$route.query.type
    }
    if (this.$route.query.if_us) {
      this.if_us = this.$route.query.if_us
    }
  },
  data() {
    return {
@@ -252,6 +240,7 @@
      zhisun:0,
      showGg: false,
      profitTarget: 0,
      if_us: 0,
      actions: [
        { name: '100X', subname: '需付保证金：' },
        { name: '200X', subname: '需付保证金：'},
@@ -276,7 +265,20 @@
  mounted() {
    this.getUserInfo();
    this.getSettingInfo();
    
  },
  watch: {
    checkedZy(val) {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    checkedZs(val) {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  },
  methods: {
    handleBack() {
@@ -294,9 +296,9 @@
      }else{
      if(this.num>1){
        if(typeof this.num =='string'){
         this.num =  Number((this.num.match(/\d+/g))[0])-1
            this.num = Number((this.num) - 1)
        }else{
          this.num--
            this.num = Number((this.num) - 1)
        }
      }else{
        this.num=1
@@ -304,19 +306,17 @@
    }
    },
    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
          this.nums = Number(Number(this.nums) - 1).toFixed(2)
        }else{
          this.nums--
          this.nums = Number(Number(this.nums) - 1).toFixed(2)
        }
      }else{
        this.nums=1
        this.nums = this.nowPrice
      }
    }

    },
    zYjian(){
      if((Number(this.profitTarget)-1).toFixed(2)<this.nowPrice){
@@ -361,6 +361,10 @@
        this.setBuy()
      }else{
        this.gdBuy()
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    //挂单
@@ -522,15 +526,23 @@
              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}
            let item = { name: val + 'X', subname: '需付保证金：' + (ccet * 100).toFixed(2), gg: val, bzj: ccet }
              this.siteLeverList.push(item)
            }
          }
         
      } else {
        this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});
      }
    },
  },
  filters: {
    getName(name) {
      if (name.length > 15) {
        return name.substring(0, 14);
      } else {
        return name;
      }
    }
  }
};
</script>
@@ -540,6 +552,7 @@
  width: 100%;
  min-height: 100vh;
  background-color: #fff;

  > .content {
    width: 100%;
    height: calc(100% - 1.6rem);
@@ -547,39 +560,47 @@
    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%;
@@ -590,6 +611,7 @@
      }
    }
  }

  .bottom_buy_price {
    width: 100%;
    height: 2rem;
@@ -597,39 +619,47 @@
    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: center;

          > div {
            width: 45%;
            height: 70%;
@@ -640,16 +670,20 @@
            border-radius: .1rem;
            color: rgb(173, 173, 173);
          }

          .active {
            background: #fff;
            color: rgb(110,169,118);

            span {
              font-weight: 600;
            }
          }

          .actives{
            background: #fff;
            color: rgb(212,71,78);

            span {
              font-weight: 600;
            }
@@ -659,6 +693,7 @@
    }
  }
}

.price_tabs {
  width: 100%;
  height: auto;
@@ -666,6 +701,7 @@
  background: #fff;
  margin-top: .1rem;
  border-radius: 0.3rem;

  .tabs {
    width: 100%;
    height: .8205rem;
@@ -674,6 +710,7 @@
    align-items: center;
    justify-content: center;
    border-radius: .15rem;

    > div {
      width: 49%;
      height: 80%;
@@ -682,16 +719,20 @@
      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;
@@ -699,45 +740,55 @@
      position: relative;
      top: 0.2rem;
    }

    .tr_es {
      width: 100%;
      height: 1.3rem;
      margin-top: .15rem;
      border-bottom: 0.05rem solid rgb(236, 236, 236);

      .top_input {
        width: 70%;
        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 {
      margin-top: 0!important;
      height: 1.8rem;
@@ -745,12 +796,14 @@
      align-items: center;
      font-size: .3803rem;
      border-bottom: 0.05rem solid rgb(236, 236, 236);

      > div {
        color: #000;
      }
    }
  }
}

.switchs{
  width: 100%;
  height: auto;
@@ -759,6 +812,7 @@
  margin-top: .3rem;
  border-radius: 0.3rem 0.3rem 0 0;
  transition: all 0.5s;

  .zy {
    transition: all 0.5s;
    width: 100%;
@@ -767,6 +821,7 @@
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.05rem solid rgb(236, 236, 236);

    >div {
      width: 20%;
      height: 50%;
@@ -774,11 +829,13 @@
      align-items: center;
      font-size: .3346rem;
    }

    .right_sw {
      justify-content: flex-end;
    }
  }
}

.btn_buy{
  width: 100%;
  height: auto;
@@ -787,6 +844,7 @@
  display: flex;
  align-items: flex-end;
  padding-top: 0.8rem;

  > div {
    width: 100%;
    height: 1.2821rem;
@@ -799,51 +857,65 @@
    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;
  cursor: pointer;
}

.addorj img{
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.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;
@@ -861,8 +933,10 @@
    transform: skew(-10deg, 0deg);
}
}

.mc{
  position: relative;

    &::after {
    content: " ";
    position: absolute;
@@ -878,6 +952,7 @@
    -ms-transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    transform: skew(-10deg, 0deg);

}
}
</style>