BiKing/pages/contract/calculator.vue

<template>
	<view>
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					合约计算器
				</view>
			</template>
		</headContent>
		<view class="pages-lable">
			<text @click.stop="lableIndex = 0" :class="['lable-val' , lableIndex === 0 ? 'active-lable-val' : '']">收益</text>
			<text @click.stop="lableIndex = 1" :class="['lable-val' , lableIndex === 1 ? 'active-lable-val' : '']">平仓价格</text>
			<text @click.stop="lableIndex = 2" :class="['lable-val' , lableIndex === 2 ? 'active-lable-val' : '']">强平价格</text>
		</view>
		<view class="pages-content">
			<view class="currency">
				BTC/USDT 永续 <text class="currency-moer iconfont">&#xe8b5;</text>
			</view>
			<view class="type-box hold-position"  v-show="[ 2].includes(lableIndex)">
				<view class="type-btn" @click.stop="storehouse === 1 ? storehouse = 2 : storehouse = 1">
					<text>{{ storehouse === 1 ? '逐仓' : '全仓'}}</text>
					<text :class="['iconfont' , true ? 'active-iconfont' : '']">&#xe672;</text>
				</view>
				<view class="type-btn" @click.stop="oddEven === 1 ? oddEven = 2 : oddEven = 1">
					<!-- oddEven:1 , // 1 单向持仓 2  -->
					<text>{{ oddEven === 1 ? '单向持仓' : '双向持仓' }}</text>
					<text :class="['iconfont' , storehouse === 2 ? 'active-iconfont' : '']">&#xe672;</text>
				</view>
			</view>
			
			<!-- 收益 / 强行平仓才有 -->
			<view class="type-box more-empty">
				<view :class="['type-btn' , more_empty === 1 ? 'active-more' : '']">
					<text>做多</text>
				</view>
				<view :class="['type-btn' , more_empty === 1 ? 'active-few' : '']">
					<text>做空</text>
				</view>
			</view>

			<view class="content-nums">
				<!-- @click.stop="changeLeverNum('minus')" -->
				<text class="nums-alter iconfont">-</text>
				<view class="nums-box">
					<!--  @input="patternNumChange" @focus="setCursorNum"
					  	@blur="cursorNum = 0" :cursor="cursorNum" -->
					<input ref="numsInpRef" class="nums-inp" v-model="pattern.num">

				</view>
				<!-- @click.stop="changeLeverNum('add')" -->
				<text class="nums-alter iconfont">+</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="selected">
				当前杠杆倍数已选：{{ pattern.num }}
			</view>

			<view class="inp-item">
				<text class="inp-item-lable">开仓价格</text>
				<view class="inp-item-val">
					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
					<text class="inp-item-tag">USDT</text>
				</view>
			</view>

			<view class="inp-item">
				<text class="inp-item-lable">平仓价格</text>
				<view class="inp-item-val">
					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
					<text class="inp-item-tag">USDT</text>
				</view>
			</view>

			<view class="inp-item">
				<text class="inp-item-lable">开仓数量</text>
				<view class="inp-item-val">
					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
					<text class="inp-item-tag">张</text>
				</view>
			</view>

			<view class="result">
				<text class="result-lable">计算结果</text>
				<view class="result-item">
					<text class="result-item-lable">保证金</text>
					<text>0 <text class="item-lable-tag">USDT</text> </text>
				</view>
				<view class="result-item">
					<text class="result-item-lable">收益</text>
					<text>0 <text class="item-lable-tag">USDT</text> </text>
				</view>
				<view class="result-item">
					<text class="result-item-lable">收益率</text>
					<text>0.0</text>
				</view>
				<view class="result-hint">
					<text class="result-hint-star">*</text>
					<text>以上计算结果仅供参考</text>
				</view>
			</view>
			
			
			
			<view class="count-btn">计算</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lableIndex: 0,
				more_empty: 1, // 1: 做多 ， 2: 做空
				pattern: {
					num: '', // 杠杆
				},
				
				storehouse:1 , // 1 逐仓 2 全仓 
				oddEven:1 , // 1 单向持仓 2 双向全仓 
				
				LeverArr: ['5X', '10X', '20X', '50X', '100X'],
			};
		},
		watch: {
			"pattern.num": {
				handler(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, "");
						console.log('numStr = ', numStr)
						if (numStr > 100) {
							numStr = 100
						} else if (numStr < 1) {
							numStr = 1
						}
						setTimeout(() => {
							this.$set(this.pattern, 'num', `${numStr}X`);
						}, 0)
					}

				},
				immediate: true
			}
		},
		methods: {
			changeLeverItem(e) {
				this.pattern.num = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// <view class="pages-lable">
	// 			<text class="lable-val">收益</text>
	// 			<text class="lable-val">平仓价格</text>
	// 			<text class="lable-val">强平价格</text>
	// 		</view>
	.pages-lable {
		width: 100%;
		height: 90rpx;
		border-bottom: 1rpx solid $border-color;
		padding: 0 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.lable-val {
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}

		.active-lable-val {
			position: relative;
			color: $Theme-Color;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 30rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background-color: $Theme-Color;
			}
		}
	}

	.pages-content {
		padding: 0 $pages-padding;

		.currency {
			width: 100%;
			height: 90rpx;
			font-size: 26rpx;
			padding-bottom: 14rpx;
			line-height: 1;
			font-weight: bold;
			display: flex;
			align-items: center;

			.currency-moer {
				font-size: 28rpx;
				color: $Theme-Color;
				transform: rotate(-180deg);
			}
		}

		// <view class="type-box">
		// 	<view class="type-btn">
		// 		<text>逐仓</text>
		// 		<text class="iconfont">&#xe672;</text>
		// 	</view>
		// 	<view class="type-btn">
		// 		<text>逐仓</text>
		// 		<text class="iconfont">&#xe672;</text>
		// 	</view>
		// </view>
		// <view class="type-box">
		// 	<view class="type-btn">
		// 		<text>做多</text>
		// 	</view>
		// 	<view class="type-btn">
		// 		<text>做空</text>
		// 	</view>
		// </view>
		.type-box {
			width: 100%;
			height: 70rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: stretch;
			justify-content: space-between;

			.type-btn {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $bg_01;
				border-radius: 8rpx;
				font-size: 30rpx;
				position: relative;
				color: $SizeColor;

				.iconfont {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 24rpx;
					color: $SizeColor1;
				}

				.active-iconfont {
					color: $Theme-Color;
				}
			}

		}

		.hold-position {
			.type-btn+.type-btn {
				margin-left: 10rpx;
			}
		}

		.more-empty {
			.active-more {
				background-color: $Theme-Color;
				color: #fff;
			}

			.active-few {
				background-color: $Theme-Color3;
				color: #fff;
			}
		}

		.content-nums {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			padding: 0 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%;
				}
			}
		}

		.content-nums-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: stretch;

			.nums-item {
				width: calc((100% - 40rpx) / 5);
				height: 60rpx;
				border: 1rpx solid $border-color4;
				border-radius: 6rpx;
				text-align: center;
				line-height: 58rpx;
				font-size: 26rpx;
			}

			.active-nums-item {
				background-color: $Theme-Color;
				border-color: $Theme-Color;
				color: #fff;
			}
		}

		.selected {
			font-size: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		// <view class="inp-item">
		// 	<text class="inp-item-lable">开仓价格</text>
		// 	<view class="inp-item-val">
		// 		<input class="inp-item-inp" type="text">
		// 		<text class="inp-item-tag">USDT</text>
		// 	</view>
		// </view>
		.inp-item {
			width: 100%;
			margin-bottom: 30rpx;

			.inp-item-lable {
				display: inline-block;
				font-size: 24rpx;
				line-height: 1;
				margin-bottom: 16rpx;
			}

			.inp-item-val {
				width: 100%;
				height: 76rpx;
				border: 1rpx solid $border-color;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				border-radius: 8rpx;
				font-size: 26rpx;

				.inp-item-inp {
					font-size: 26rpx;
				}

				.placeholder-class {
					font-size: 26rpx;
					color: $SizeColor1;
				}

				.inp-item-tag {
					font-size: 24rpx;
					font-weight: bold;
					color: $SizeColor;
				}
			}
		}


		// <view class="result">
		// 	<text class="result-lable">计算结果</text>
		// 	<view class="result-item">
		// 		<text>保证金</text>
		// 		<text>0 <text>USDT</text> </text>
		// 	</view>
		// 	<view class="result-item">
		// 		<text>收益</text>
		// 		<text>0 <text>USDT</text> </text>
		// 	</view>
		// 	<view class="result-item">
		// 		<text>收益率</text>
		// 		<text>0.0</text>
		// 	</view>
		// 	<view class="result-item">
		// 		<text>*</text>
		// 		<text>以上计算结果仅供参考</text>
		// 	</view>
		// </view>
		.result {
			width: 100%;

			// display: flex;
			.result-lable {
				font-size: 28rpx;
			}

			.result-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0 10rpx;
				color: $SizeColor;
				font-size: 26rpx;

				.result-item-lable {
					font-size: 28rpx;
				}

				.item-lable-tag {
					color: #000;
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 20rpx;
				}
			}
			// <view class="result-hint">
			// 	<text class="result-hint-star">*</text>
			// 	<text>以上计算结果仅供参考</text>
			// </view>
			.result-hint{
				font-size: 22rpx;
				color: $SizeColor;
				padding: 20rpx 0;
				.result-hint-star{
					padding-right: 6rpx;
				}
			}
		}
		
		.count-btn{
			width: 100%;
			height: 90rpx;
			background-color: $btnBgColor;
			border-radius: 10rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			color: #fff;
			margin-bottom: 30rpx;
		}
	}
</style>