| | |
| | | <div class="perpetual-open"> |
| | | <div class="flex header-open"> |
| | | <div class="flex flex-1 pt-34"> |
| | | <div |
| | | class="w-180 h-60 lh-60 text-center rounded inputBackground textColor" |
| | | > |
| | | <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor"> |
| | | {{ $t("全仓") }} |
| | | </div> |
| | | <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> --> |
| | | <div |
| | | class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" |
| | | v-if="selectIndex / 1 === 1" |
| | | > |
| | | <div |
| | | @click="showOptions = !showOptions" |
| | | style="height: 100%; box-sizing: border-box" |
| | | class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center" |
| | | > |
| | | <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1"> |
| | | <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box" |
| | | class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center"> |
| | | {{ form.lever_rate }}x |
| | | <img |
| | | src="../../assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11" |
| | | /> |
| | | <div |
| | | v-if="showOptions" |
| | | class="options w-140 absolute top-97 left-0 z-10" |
| | | > |
| | | <div |
| | | class="w-full" |
| | | @click.stop="handleChoose(item)" |
| | | :class="{ |
| | | <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" /> |
| | | <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10"> |
| | | <div class="w-full" @click.stop="handleChoose(item)" :class="{ |
| | | 'option-active': form.lever_rate === item.lever_rate, |
| | | }" |
| | | :value="item.lever_rate" |
| | | v-for="item in initData.lever" |
| | | :key="item.id" |
| | | > |
| | | }" :value="item.lever_rate" v-for="item in initData.lever" :key="item.id"> |
| | | {{ item.lever_rate }}x |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <img |
| | | src="../../assets/image/public/k-line.png" |
| | | alt="line-img" |
| | | class="w-38 h-35" |
| | | @click="jump" |
| | | /> |
| | | <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" /> |
| | | </div> |
| | | </div> |
| | | <div class="pt-30 pb-20"> |
| | |
| | | <div class="w-440 flex flex-col"> |
| | | <template v-if="selectIndex == 1"> |
| | | <div class="flex items-center h-66 rounded-lg text-grey"> |
| | | <p |
| | | class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'long' ? 'long' : ''" |
| | | @click="changeTab('long')" |
| | | > |
| | | <p class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')"> |
| | | {{ $t("开多") }} |
| | | </p> |
| | | <p |
| | | class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'short' ? 'short' : ''" |
| | | @click="changeTab('short')" |
| | | > |
| | | <p class="font-28 flex-1 flex items-center justify-center h-66" |
| | | :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')"> |
| | | {{ $t("开空") }} |
| | | </p> |
| | | </div> |
| | | <div class="mt-30 mb-30" style="position: relative"> |
| | | <div |
| | | class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor" |
| | | @click="selectBtn" |
| | | > |
| | | <img |
| | | src="../../assets/image/public/warn.png" |
| | | alt="warn-icon" |
| | | class="w-25 h-25 pl-20" |
| | | /> |
| | | <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor" |
| | | @click="selectBtn"> |
| | | <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" /> |
| | | <div class="text-center" style="width: 80%">{{ title }}</div> |
| | | <img |
| | | src="../../assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11 pr-20" |
| | | /> |
| | | <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" /> |
| | | </div> |
| | | <div class="option-box" v-show="isShow"> |
| | | <div |
| | | class="font-30" |
| | | v-for="item in selectData" |
| | | :key="item.type" |
| | | @click="selectItem(item)" |
| | | > |
| | | <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)"> |
| | | {{ item.title }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <contract-futrue |
| | | v-if="selectIndex == 2" |
| | | class="mb-20" |
| | | :initFutrue="initFutrue" |
| | | @paraId="onParaId" |
| | | /> |
| | | <div |
| | | class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <input |
| | | placeholder="" |
| | | class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg" |
| | | :disabled="type / 1 === 1" |
| | | @focus="focus = true" |
| | | v-model="form.price" |
| | | /> |
| | | <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" /> |
| | | <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor" |
| | | v-if="selectIndex == 1"> |
| | | <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg" |
| | | :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" /> |
| | | <span class="ml-20">USDT</span> |
| | | </div> |
| | | <!-- <div |
| | |
| | | /> |
| | | <span class="font-22 font-400 textColor">{{ $t("止损") }}</span> |
| | | </div> --> |
| | | <div |
| | | class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg" |
| | | > |
| | | <div |
| | | v-if="selectIndex == 1" |
| | | class="w-80 flex items-center justify-center" |
| | | style="height: 100%" |
| | | @click="onReduce" |
| | | > |
| | | <img |
| | | src="../../assets/image/public/reduce.png" |
| | | alt="add" |
| | | class="w-30 h-6" |
| | | /> |
| | | <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg"> |
| | | <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%" |
| | | @click="onReduce"> |
| | | <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" /> |
| | | </div> |
| | | <input |
| | | :placeholder=" |
| | | selectIndex == 1 |
| | | <input :placeholder="selectIndex == 1 |
| | | ? $t('手数') |
| | | : $t('最少') + initFutrue && initFutrue.para |
| | | ? $t('最小金额') + initFutrue.para[paraIndex].buy_min |
| | | : '' |
| | | " |
| | | class="border-none inputBackground text-center textColor" |
| | | style="width: 156px" |
| | | v-model="form.amount" |
| | | type="number" |
| | | @input="onInput" |
| | | /> |
| | | <div |
| | | class="w-80 flex items-center justify-center" |
| | | style="height: 100%" |
| | | > |
| | | " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount" |
| | | type="number" @input="onInput" /> |
| | | <div class="w-80 flex items-center justify-center" style="height: 100%"> |
| | | <template v-if="selectIndex == 1"> |
| | | <img |
| | | @click="onAdd" |
| | | src="../../assets/image/public/add.png" |
| | | alt="reduce" |
| | | class="w-30 h-30" |
| | | /> |
| | | <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" /> |
| | | </template> |
| | | <template v-else> |
| | | <span class="textColor">USDT</span> |
| | |
| | | <span class="flex-1 text-right">100%</span> |
| | | </div> --> |
| | | <!-- 张数 滑块 --> |
| | | <amount-slider |
| | | ref="sliderRef" |
| | | :maxAmount="maxItems" |
| | | @getAmount="getAmount" |
| | | ></amount-slider> |
| | | <amount-slider ref="sliderRef" :maxAmount="maxItems" @getAmount="getAmount"></amount-slider> |
| | | </template> |
| | | <template v-if="selectIndex == 1 && userInfo.token"> |
| | | <div class="flex justify-between mt-30"> |
| | |
| | | <div class="textColor">{{ fee.toFixed(4) }} USDT</div> |
| | | </div> |
| | | </template> |
| | | <div |
| | | class="flex font-24 text-grey justify-between mt-32" |
| | | v-if="selectIndex == 2" |
| | | > |
| | | <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2"> |
| | | <div>{{ $t("可用USDT") }}</div> |
| | | <div class="textColor">{{ initFutrue.amount | nan }} USDT</div> |
| | | </div> |
| | | <div |
| | | class="flex font-24 text-grey justify-between mt-20" |
| | | v-if="selectIndex == 2" |
| | | > |
| | | <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2"> |
| | | <div>{{ $t("手续费") }}</div> |
| | | <div class="textColor"> |
| | | {{ |
| | |
| | | </div> |
| | | <template v-if="userInfo.token"> |
| | | <template v-if="selectIndex == 1"> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" |
| | | v-if="currentType == 'long'" |
| | | @click="order('long')" |
| | | > |
| | | <div |
| | | class="font-34 relative text-center" |
| | | style="flex-grow: 1" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'" |
| | | @click="order('long')"> |
| | | <div class="font-34 relative text-center" style="flex-grow: 1" v-if="selectIndex == 1"> |
| | | {{ $t("开多") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看涨") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | <div |
| | | class="font-34 relative text-center" |
| | | style="flex-grow: 1" |
| | | v-else |
| | | > |
| | | <div class="font-34 relative text-center" style="flex-grow: 1" v-else> |
| | | {{ $t("做多买入") }} |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" |
| | | v-if="currentType == 'short'" |
| | | @click="order('short')" |
| | | > |
| | | <div |
| | | class="relative font-34 text-center" |
| | | style="flex-grow: 1" |
| | | v-if="selectIndex == 1" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'" |
| | | @click="order('short')"> |
| | | <div class="relative font-34 text-center" style="flex-grow: 1" v-if="selectIndex == 1"> |
| | | {{ $t("开空") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看跌") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | <div |
| | | class="relative font-34 text-center" |
| | | style="flex-grow: 1" |
| | | v-else |
| | | > |
| | | <div class="relative font-34 text-center" style="flex-grow: 1" v-else> |
| | | {{ $t("做空买入") }} |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template v-if="selectIndex == 2"> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" |
| | | @click="order('open')" |
| | | v-if="userInfo.token" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30" @click="order('open')" |
| | | v-if="userInfo.token"> |
| | | <div class="font-34 relative text-center" style="flex-grow: 1"> |
| | | {{ $t("开多") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看涨") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" |
| | | style="position: relative" |
| | | :class="{ 'mt-22': selectIndex == 2 }" |
| | | @click="order('close')" |
| | | v-if="userInfo.token" |
| | | > |
| | | <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative" |
| | | :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token"> |
| | | <div class="relative font-34 text-center" style="flex-grow: 1"> |
| | | {{ $t("开空") }} |
| | | <span class="right-word font-22 text-center">{{ |
| | | <!-- <span class="right-word font-22 text-center">{{ |
| | | $t("看跌") |
| | | }}</span> |
| | | }}</span> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <p>{{ $t("套期保值,风险对冲") }}</p> |
| | | <p class="pt-8">{{ $t("登陆后继续") }}</p> |
| | | </div> |
| | | <div |
| | | class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50" |
| | | @click="$router.push('/login')" |
| | | > |
| | | <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50" |
| | | @click="$router.push('/login')"> |
| | | {{ $t("登录后进行交易") }} |
| | | </div> |
| | | </div> |
| | |
| | | <div class="mt-5">({{ symbolname || "--" }})</div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1" |
| | | class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in greenData" |
| | | :key="index" |
| | | @click="onQuickPrice(item.price)" |
| | | :style="{ |
| | | <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{ |
| | | background: |
| | | `linear-gradient(to right,${ |
| | | theme == 'dark' ? '#121212' : '#ffffff' |
| | | `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff' |
| | | } 0%` + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | '%,rgba(94,186,137,.1) 100%)', |
| | | }" |
| | | > |
| | | }"> |
| | | <div class="text-green">{{ item.price }}</div> |
| | | <div class="text-right textColor" v-if="symbol == 'shib'"> |
| | | {{ fixDate(item.amount, $i18n) || "--" }} |
| | |
| | | {{ item.amount || "--" }} |
| | | </div> |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="w-290 text-red pt-12 font-34 font-700 text-center" |
| | | > |
| | | <div v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="w-290 text-red pt-12 font-34 font-700 text-center"> |
| | | {{ approximately || "--" }} |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="approximately-text pb-12 font-20 text-center" |
| | | > |
| | | <div v-if="showType == 0 || showType == 1 || showType == 2" |
| | | class="approximately-text pb-12 font-20 text-center"> |
| | | ≈ {{ price || "--" }} |
| | | </div> |
| | | <div |
| | | v-if="showType == 0 || showType == 2" |
| | | class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in redData" |
| | | :key="item + index" |
| | | @click="onQuickPrice(item.price)" |
| | | :style="{ |
| | | <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26" |
| | | v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{ |
| | | background: |
| | | `linear-gradient(to right,${ |
| | | theme == 'dark' ? '#121212' : '#ffffff' |
| | | `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff' |
| | | } 0%` + |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | |
| | | (1 - item.amount / greenData[greenData.length - 1].amount) * |
| | | 100 + |
| | | '%,rgba(246,70,93,.1) 100%)', |
| | | }" |
| | | > |
| | | }"> |
| | | <div class="text-red">{{ item.price }}</div> |
| | | <div class="text-right textColor" v-if="symbol == 'shib'"> |
| | | {{ fixDate(item.amount, $i18n) || "--" }} |
| | |
| | | </div> |
| | | <div class="flex k-select-box"> |
| | | <div class="mt-30 mb-30 select-box" style="position: relative"> |
| | | <div |
| | | class="flex justify-between items-center w-full h-70" |
| | | @click="selectArryBtn" |
| | | > |
| | | <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn"> |
| | | <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> --> |
| | | <div class="pl-16 textColor" style="width: 80%"> |
| | | {{ dataArrTitle }} |
| | | </div> |
| | | <img |
| | | src="@/assets/image/public/grey-select.png" |
| | | alt="select-icon" |
| | | class="w-22 h-11 pr-20" |
| | | /> |
| | | <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" /> |
| | | </div> |
| | | <div class="option-box" v-show="arryIsShow"> |
| | | <div |
| | | class="font-30" |
| | | v-for="(item, index) in selectDataArry" |
| | | :key="index" |
| | | @click="selectItemArry(item)" |
| | | > |
| | | <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)"> |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div @click="isSelectShow = true"> |
| | | <img |
| | | src="@/assets/image/selectIcon.png" |
| | | alt="warn-icon" |
| | | class="w-36 h-30" |
| | | /> |
| | | <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <van-popup v-model="show" class="rounded-2xl"> |
| | | <popup-delivery |
| | | showBtns |
| | | :detailData="detailData" |
| | | :key="detailData.order_no" |
| | | @close="onClose" |
| | | @continueToBuy="continueTobuy" |
| | | @timeEnd="handleTimeEnd" |
| | | :price="price" |
| | | :symbol="symbol" |
| | | /> |
| | | <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose" |
| | | @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" /> |
| | | </van-popup> |
| | | <van-action-sheet |
| | | v-model="isSelectShow" |
| | | @select="onSelect" |
| | | :actions="actions" |
| | | :cancel-text="$t('取消')" |
| | | close-on-click-action |
| | | @cancel="onCancel" |
| | | > |
| | | <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')" |
| | | close-on-click-action @cancel="onCancel"> |
| | | </van-action-sheet> |
| | | </div> |
| | | </template> |
| | |
| | | this.$store.commit("user/SET_USERINFO", { |
| | | balance: data.money, |
| | | }); |
| | | location.reload(); |
| | | this.initFutrue.amount = data.money; |
| | | // location.reload(); |
| | | }); |
| | | this.$emit("ordered", emitFunc); |
| | | if (this.selectIndex / 1 === 2) { |
| | |
| | | -webkit-appearance: none; |
| | | /* Safari and Chrome */ |
| | | padding: 0 20px 0 20px; |
| | | background: url("../../assets/image/public/grey-select.png") no-repeat scroll |
| | | right center transparent; |
| | | background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent; |
| | | /* 自己的图*/ |
| | | background-size: 20px 11px; |
| | | } |
| | |
| | | } |
| | | |
| | | .perpetual-open { |
| | | |
| | | ::v-deep .van-action-sheet__item, |
| | | ::v-deep .van-action-sheet__cancel { |
| | | @include themify() { |