BiKing/pages/content/shortcut-buy.vue

<template>
	<view>
		<!-- 头部 -->
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					法币交易
				</view>
			</template>
		</headContent>

		<view class="lable-title">
			<text @click.stop="type = 1" :class="['title-item' , type === 1 ? 'active-title-item' : '']">我要购买</text>
			<text @click.stop="type = 2" :class="['title-item' , type === 2 ? 'active-title-item' : '']">我要出售</text>
		</view>

		<view class="content-box">
			<view class="currency-type">
				<image class="currency-icon" src="@/static/images/bi/bi_01.png" mode="aspectFit"></image>
				<text class="currency-text">USDT</text>
			</view>
			<template v-if="type === 1">
				<view class="type-lable">
					<view class="type-lable-name">购买{{ buy.text }}</view>
				</view>
				<view class="type-input-box">
					<input class="type-input" v-model="buy.nums" />
					<text class="type-units">{{ buy.units }}</text>
				</view>
				<view class="switch-type">
					<view class="switch-refer">
						参考单价：<text>--</text>CNY/USDT
					</view>
					<view class="switch-btn" @click.stop="buy.buyType == 1 ? buy.buyType = 2 : buy.buyType = 1">
						<text class="iconfont">&#xe672;</text>
						<!-- {{ setText(buy.buyType) }} -->
						<text class="switch-btn-text">按{{ buy.text }}出售</text>
					</view>
				</view>

				<view :class="['submit-btn' , buy.nums ? 'active-submit-btn' : '']">
					立即购买
				</view>
 
			</template>
			<template v-if="type === 2">
				<view class="type-lable">
					<view class="type-lable-name">出售{{ sell.text }}</view>
					<view class="type-lable-nums">
						<text class="lable-nums-text">可出售{{ sell.text }}：</text>
						<text class="lable-nums">{{ sell.usable }} USDT</text>
					</view>
				</view>
				<view class="type-input-box">
					<input class="type-input" v-model="sell.nums" />
					<text class="type-units">{{ sell.units }}</text>
				</view>
				<view class="switch-type">
					<view class="switch-refer">
						参考单价：<text>--</text>CNY/USDT
					</view>
					<view class="switch-btn"  @click.stop="sell.sellType == 1 ? sell.sellType = 2 : sell.sellType = 1">
						<text class="iconfont">&#xe672;</text>
						<text class="switch-btn-text">按{{ sell.text }}出售</text>
					</view>
				</view>
			
				<view class="submit-btn">
					立即出售
				</view>
			
				<view class="hint-text">
					温馨提示：由于时间、行情等因素，可能无法为您匹配到最优的出售订单，请知悉。
				</view>
			</template>
		</view>


	</view>
</template>

<script>
	export default {
		name: 'shortcut-buy',
		data() {
			return {
				type: 1,
				buy: {
					buyType: 1,
					text:'数量',
					units: 'CNY',
					nums: ''
				},
				sell: {
					usable: '0.0000',
					sellType: 1,
					text:'数量',
					units: 'CNY',
					nums: ''
				},
			};
		},
		watch:{
			'buy.buyType'(newType){
				if(newType === 1){
					this.buy.text = '数量';
					this.buy.units = 'CNY';
				}
				if(newType === 2){
					this.buy.text = '金额';
					this.buy.units = 'USDT';
				}
			},
			'sell.sellType'(newType){
				if(newType === 1){
					this.sell.text = '数量';
					this.sell.units = 'CNY';
				}
				if(newType === 2){
					this.sell.text = '金额';
					this.sell.units = 'USDT';
				}
			}
		},
		computed:{
			// setText(){
			// 	return function(type){
			// 		console.log('buy.units' , this.buy.units)
			// 		return  type == 1 ? '数量' : '金额'
			// 	}
			// }
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.lable-title {
		width: 100%;
		display: flex;
		align-items: stretch;
		padding: 0 100rpx;
		height: 100rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid $border-color2;

		.title-item {
			line-height: 100rpx;
			font-size: 28rpx;
		}

		.active-title-item {
			color: $Theme-Color;
			position: relative;

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

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

		.currency-type {
			width: 100%;
			padding: 30rpx 0 50rpx;
			display: flex;
			align-items: center;

			.currency-icon {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}

			.currency-text {
				padding-left: 7px;
				font-size: 26rpx;
				font-weight: bold;
			}
		}

		.type-lable {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.type-lable-name {
				font-weight: bold;
			}

			.type-lable-nums {
				color: $SizeColor;

				.lable-nums-text {
					border-bottom: 1rpx dashed $SizeColor;
				}

				.lable-nums {
					color: $Theme-Color;
				}
			}
		}

		.type-input-box {
			padding-top: 50rpx;
			width: 100%;
			display: flex;
			align-items: stretch;
			border-bottom: 1rpx solid $border-color4;
			font-weight: bold;

			.type-input {
				flex: 1;
				font-size: 24rpx;
			}

			.type-units {
				flex-shrink: 0;
				font-size: 26rpx;
			}
		}
 
		.switch-type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: $SizeColor;
			padding-top: 40rpx;

			.switch-refer {
				text {
					color: $Theme-Color;
				}
			}

			.switch-btn {
				display: flex;
				align-items: center;
				color: $Theme-Color;

				.iconfont {
					font-size: 24rpx;
					transform: rotateY(180deg);
					margin-right: 3rpx;
				}
			}
		}

		.submit-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: $btnBgColor;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin-top: 80rpx;
			font-weight: bold;
		}
		.active-submit-btn{
			background-color: $Theme-Color;
		}
		.hint-text{
			width: 100%;
			font-size: 24rpx;
			color: $SizeColor;
			padding-top: 20rpx;
		}

	}
</style>