123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- <template>
- <uni-popup ref="popupRef" type="bottom" @change="popupChange" :isMaskClick="false">
- <view class="popup-box">
- <view class="popup-title">
- <text class="title-side"></text>
- <text class="title-name">调整杠杆</text>
- <text @click.stop="close()" class="title-side iconfont"></text>
- </view>
- <view class="popup-content">
- <view class="content-tab">
- <view @click.stop="pattern.name = '全仓'"
- :class="['tab-item' , pattern.name == '全仓' ? 'active-tab-item' : '']">全仓</view>
- <view @click.stop="pattern.name = '逐仓'"
- :class="['tab-item' , pattern.name == '逐仓' ? 'active-tab-item' : '']">逐仓</view>
- </view>
- <view class="content-nums">
- <text class="nums-alter iconfont" @click.stop="changeLeverNum('minus')">-</text>
- <view class="nums-box">
-
- <input ref="numsInpRef" class="nums-inp" @input="patternNumChange" @focus="setCursorNum"
- @blur="cursorNum = 0" :cursor="cursorNum" v-model="pattern.num">
- </view>
- <text class="nums-alter iconfont" @click.stop="changeLeverNum('add')">+</text>
- </view>
- <view class="content-nums-item">
- <text v-for="item in LeverArr" :key="`lever_${item}`" @click.stop="changeLeverItem(item)"
- :class="['nums-item', pattern.num == item ? 'active-nums-item' : '']">{{item}}</text>
- </view>
- <view class="content-hint" v-show="pattern.name == '全仓'">
- <text class="hint-lable">全仓模式:</text>
- 全仓模式下所有仓位将共享合约账户的可用保证金,若发生强平,交易者可能损失所有仓位和可用保证金,请注意仓位风险!
- </view>
- <view class="content-hint" v-show="pattern.name == '逐仓'">
- <text class="hint-lable">逐仓模式:</text>
- 逐仓模式下保证金被分配到单独的仓位上,如果该仓位保证金亏损到低于维持保证金的值,仓位将被强平。您可以通过为仓位添加和减少保证金来控制仓位风险。
- </view>
- <view class="footer-btns">
- <view class="footer-btn" @click.stop="close()">取消</view>
- <view class="footer-btn" @click.stop="confirm()">确定</view>
- </view>
- </view>
- </view>
- </uni-popup>
- </template>
- <script>
- export default {
- props: {
- leverNum: {
- type: Number,
- default: 1
- },
- leverName: {
- type: String,
- default: ''
- }
- },
- data() {
- return {
- pattern: {
- name: '全仓',
- num: '',
- },
- LeverArr: ['5X', '10X', '20X', '50X', '100X'],
- cursorNum: 0,
- };
- },
- watch: {
- leverNum: {
- handler(newVal) {
- this.pattern.num = newVal + 'X';
- },
- immediate: true
- },
- leverName: {
- handler(newVal) {
- this.pattern.name = newVal
- },
- immediate: true
- },
- "pattern.num"(newVal, oldVal) {
- if (newVal !== oldVal) {
- let numStr = newVal
- console.log('numStr = ' , numStr)
- if (numStr.indexOf('X') >= 0) {
- numStr = numStr.split('X')[0]
- }
- numStr = newVal.replace(/[^0-9]/ig, "");
- if (numStr > 100) {
- numStr = 100
- } else if (numStr < 1) {
- numStr = 1
- }
- setTimeout(() => {
- this.$set(this.pattern , 'num' , `${numStr}X`);
- }, 0)
- }
- }
- },
- mounted() {
- // this.open();
- },
- methods: {
- popupChange(e) {
- try {
- if (e && e.show) {
- uni.hideTabBar()
- } else {
- setTimeout(() => {
- uni.showTabBar()
- }, 10)
- }
- } catch (e) {
- //TODO handle the exception
- }
- },
- // close(type) {
- // this.showTrans = false
- // this.$emit('change', {
- // show: false,
- // type: this.type
- // })
- open() {
- // this.pattern.num = this.leverNum;
- // this.pattern.name = this.leverName;
- this.$nextTick(() => {
- this.$refs.popupRef.open();
- })
- },
- close() {
- this.$refs.popupRef.close();
- },
- confirm() {
- let nums = this.pattern.num
- if ( nums.indexOf('X') >= 0) {
- nums = nums.split('X')[0] - 0
- }
- this.$emit('update:leverNum', nums);
- this.$emit('update:leverName', this.pattern.name);
- this.close()
- },
- changeLeverItem(e) {
- this.pattern.num = e;
- },
- setCursorNum() {
- // this.$refs.numsInpRef
- console.log('eee')
- // this.leverNum.length - 1
- setTimeout(() => {
- this.cursorNum = 1
- }, 1)
- },
- // 输入修改
- patternNumChange() {
- // this.$set()
- },
- //
- changeLeverNum(type) {
- let nums = this.pattern.num
- if (this.pattern.num.indexOf('X') >= 0) {
- nums = nums.split('X')[0]
- }
- if (type === 'minus') {
- // 减
- if (nums > 1) {
- nums = nums - 1
- } else {
- nums = 1
- }
- } else if (type === 'add') {
- // 加
- if (nums < 100) {
- // - 0 是防止出现字符串
- nums = nums - 0 + 1
- } else {
- nums = 100
- }
- };
- this.pattern.num = `${nums}X`
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .popup-content {
- padding: 0 $pages-padding;
- .content-tab {
- padding: 20rpx 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .tab-item {
- width: 48%;
- height: 70rpx;
- text-align: center;
- border: 1rpx solid $border-color4;
- line-height: 70rpx;
- font-size: 26rpx;
- border-radius: 10rpx;
- // font-weight: bold;
- }
- .active-tab-item {
- border-color: $Theme-Color;
- color: $Theme-Color;
- }
- }
- .content-nums {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- padding: 40rpx 0 20rpx;
- .nums-alter {
- flex-shrink: 0;
- width: 80rpx;
- height: 80rpx;
- text-align: center;
- line-height: 80rpx;
- border: 1px solid $border-color6;
- font-size: 26rpx;
- color: $Theme-Color;
- &:last-child {
- border-radius: 0 10rpx 10rpx 0;
- }
- &:first-child {
- border-radius: 10rpx 0 0 10rpx;
- }
- }
- .nums-box {
- flex: 1;
- border-top: 1px solid $border-color6;
- border-bottom: 1px solid $border-color6;
- position: relative;
- .nums-inp {
- width: 100%;
- height: 100%;
- text-align: center;
- font-size: 28rpx;
- font-weight: bold;
- }
- .nums-t {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
- // <input class="nums-inp" type="text" v-model="leverNum">
- // <text class="nums-inp-tag">X</text>
- }
- }
- .content-nums-item {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- .nums-item {
- width: calc((100% - 40rpx) / 5);
- height: 54rpx;
- border: 1rpx solid $border-color4;
- border-radius: 6rpx;
- text-align: center;
- line-height: 52rpx;
- font-size: 26rpx;
- }
- .active-nums-item {
- background-color: $Theme-Color;
- border-color: $Theme-Color;
- color: #fff;
- }
- }
- .content-hint {
- width: 100%;
- font-size: 24rpx;
- color: #8d8a8a;
- line-height: 1.8;
- padding-top: 20rpx;
- .hint-lable {
- font-size: 24rpx;
- color: $Theme-Color;
- font-weight: bold;
- }
- }
- .footer-btns {
- padding: 80rpx 0 26rpx;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- .footer-btn {
- width: 47.5%;
- height: 70rpx;
- text-align: center;
- border: 1rpx solid $Theme-Color;
- line-height: 68rpx;
- font-size: 30rpx;
- border-radius: 10rpx;
- color: $Theme-Color;
- &:last-child {
- color: #fff;
- background-color: $Theme-Color;
- }
- }
- }
- // <view class="footer-btns">
- // <view class="footer-btn">取消</view>
- // <view class="footer-btn">确定</view>
- // </view>
- }
- </style>
|