BiKing/pages/exchange/index.vue

<template>
	<view class="page-box">
		<headContent>

			<template #content>
				<view class="haed-title">
					闪电兑换
				</view>
			</template>
			<template #right>
				<view @click.stop="lookRecord()" style="color: #878592;" class="head-record iconfont">&#xe648;</view>
			</template>
		</headContent>
		<view class="box">
			<view class="exchange-box">
				<view class="">
					<view class="exchange-item">
						<view class="exchange-coin" @click.stop="activeType('left')">
							<template v-if="active.left">
								<image class="coin-icon" :src="active.left.logo" mode="aspectFit"></image>
								<text class="coin-name">{{ active.left.name }}</text>
								<text class="select-icon iconfont">&#xeb6d;</text>
								<text class="coin-ratio" />
								<!-- <text class="coin-ratio">{{ active.left.min_number }} - {{ active.left.max_number }}</text> -->
							</template>
						</view>
						<input class="coin-input iconfont" :placeholder=" active.left ? `${active.left.min_number}-${active.left.balance}` : ''" v-model="num" type="number">
						<text class="max-title" @click.stop="active.left ? setMaxNum(active.left.balance) : ''">最大</text>
					</view>
					<view class="exchange-item">
						可用余额:{{ active.left ? active.left.balance : '--' }} USDT
					</view>
				</view>
				<view class="exchange-item">
					<view class="exchange-coin" @click.stop="activeType('right')">
						<template v-if="active.right">
							<image class="coin-icon" :src="active.right.logo" mode="aspectFit"></image>
							<text class="coin-name">{{ active.right.name }}</text>
							<text class="select-icon iconfont">&#xeb6d;</text>
						</template>

					</view>
				</view>
				<view class="exchange-switch" @click.stop="exchangeSwitch">
					<text class="switch-icon iconfont">&#xe675;</text>
				</view>
			</view>
			<view class="exchange-btn" @click.stop="submitPreview">预览兑换结果</view>

			<view class="exchange-hint">
				<view class="hint-title">兑换规则</view>
				<view class="hint-content">
					市场汇率可能变动，请以实际到账的资产数量为准：
				</view>
				<view class="hint-content">
					兑换汇率由第三方制定，由于兑换成本及市场波动，您兑换的汇率可能会高于市场汇率，请仔细确认后进行操作:
				</view>
				<view class="hint-content">
					平台不收取手续费，每笔兑换由第三方钱包收取基础0.3%的手续费，用于支付在交易所兑换成本。
				</view>
			</view>
		</view>
		<selectCoin ref="selectCoinRef" :active-val.sync="active[selectKey]" :selectList="selectList" />
	</view>
</template>

<script>
	import share from "@/components/headModules/share.vue"
	import selectCoin from "./modules/select-coin.vue"
	import {
		Api_getBiTypeList,
		Api_getFlashRecord,
		Api_getSubmit
	} from "@/api/index.js"
	export default {
		name: 'exchange',
		components: {
			share,
			selectCoin
		},
		data() {
			return {
				content: {
					left: [],
					right: []
				},
				selectKey: '',
				selectList: [],
				fromKey: true,
				left: [],
				right: [],
				active: {
					left: null,
					right: null,
				},
				num:'',
			};
		},
		onLoad() {
			this.getBiTypeList();
		},
		watch: {
			'active.left': {
				handler() {
					this.setLeftList()
				},
				deep: true
			}
		},
		methods: {
			getBiTypeList() {
				Api_getBiTypeList().then(res => {
					this.content = res;
					this.setLeftList()
				}).catch(err => {
					console.log('Api_getBiTypeList = ', err)
				})
			},
			// 选择
			activeType(key) {
				this.selectKey = key;
				this.selectList = this[key];
				console.log('aaa ', this[key])
				this.$nextTick(() => {
					this.$refs.selectCoinRef.open()
				})
			},
			// 上下切换
			exchangeSwitch() {
				this.fromKey = !this.fromKey;
				const l = JSON.parse(JSON.stringify(this.active.left));
				this.active.left = this.active.right
				this.active.right = l
				this.setLeftList()
			},
			setMaxNum(num){
				this.num = num
			},
			setLeftList() {
				let rightList = null;
				if (this.fromKey) {
					rightList = JSON.parse(JSON.stringify(this.content.right))
					this.left = this.content.left;
				} else {
					rightList = JSON.parse(JSON.stringify(this.content.left))
					this.left = this.content.right;
				};

				this.active.left = this.active.left || this.left[0] || null
				this.setRightList(rightList)
				// this.right = right;
				// this.active.right = this.right[0] || null
			},
			setRightList(right) {
				this.right = []
				right.forEach(el => {
					if (el.name == this.active.left.name) {
						if(this.active.right && this.active.right.name == el.name){
							this.active.right = null;
						}
					} else {
						this.right.push(el)
					}

				})
				this.active.right = this.active.right || this.right[0] || null



			},
			// 提交预览
			submitPreview(){
				return false
				const obj = {
					l_currency_id: this.active.left.id,
					r_currency_id: this.active.right.id,
					num:this.num,
					price: this.active.left.price,
				}
				uni.showLoading({
					mask:true
				})
				Api_getSubmit(obj).then(res => {
					this.getBiTypeList()
				}).catch(err => {}).finally(() => {
					uni.hideLoading()
				})
			},
			lookRecord(){
				uni.navigateTo({
					url:'/pages/content/exchange-record'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #EDEDEF;
	}
</style>
<style lang="scss" scoped>
	.head-record {
		font-size: 46rpx;
	}

	.box {
		padding: 36rpx 30rpx 0;

		.exchange-box {
			width: 690rpx;
			min-height: 287rpx;
			background: #f6f7fb;
			border-radius: 10rpx;
			padding: 39rpx 30rpx 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;

			.exchange-switch {
				position: absolute;
				right: 78rpx;
				bottom: 82rpx;
				width: 84rpx;
				height: 84rpx;
				background: #05c175;
				border-radius: 29rpx;
				text-align: center;
				line-height: 84rpx;
				// transform: rotate(90deg);

				.switch-icon {
					font-size: 40rpx;
					color: #fff;
				}
			}

			.exchange-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.exchange-coin {
					display: flex;
					align-items: center;
					flex-shrink: 0;

					.coin-icon {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.coin-name {
						flex-shrink: 0;
						padding-left: 13rpx;

						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1a1a1a;
						line-height: 44rpx;
					}

					.coin-ratio {
						margin: 0 20rpx;
						width: 1rpx;
						height: 44rpx;
						// $border-color;
						background-color: $border-color;
						// flex-shrink: 0;
						// font-size: 26rpx;
						// font-family: PingFang SC, PingFang SC-Bold;
						// font-weight: 700;
						// color: #b7b4b4;
						// line-height: 40rpx;
						// border-left: 1rpx solid #e6e6e6;
						// padding-left: 24rpx;
						// margin-left: 20rpx;
					}

					.select-icon {
						font-size: 26rpx;
						margin-left: 20rpx;
					}
				}

				.coin-input {
					flex: 1;
					height: 100%;
					padding: 0 20rpx;
					font-size: 24rpx;
				}

				.max-title {
					flex-shrink: 0;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #05c175;
					line-height: 40rpx;
				}
			}

			.exchange-item {
				padding-top: 11rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}
		}

		.exchange-btn {
			margin-top: 68rpx;
			width: 690rpx;
			height: 90rpx;
			background: #dbdce0;
			border-radius: 8rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}

		.exchange-hint {
			width: 100%;
			padding-top: 97rpx;

			.hint-title {

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
			}

			.hint-content {
				padding: 24rpx 0 11rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #808080;
			}
		}
	}
</style>