nzhbsr/pages/transaction/cblist.vue

<template>
	<view class="content">
		<view class="ss-box flex">
			<view class="ss-main">
				<view class="ss-main-icon"><image src="../../static/img/ss.png" mode=""></image></view>
				<input type="text" @blur="loadData()" v-model="keyworld" :placeholder="$t('cb.ssnxydbz')" />
			</view>
			<view class="ss-font" @click="navTo('/pages/user/user')">{{ $t('cb.qx') }}</view>
		</view>
		<!-- <view class="title">热门币种</view>
		<view class="rmbz flex">
			<view class="rmbz-item" v-for="(item, index) in rmlist" @click="navTo(item)">{{ item }}</view>
		</view> -->
		<view class="title">{{ $t('cb.bzlb') }}</view>
		<scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
			<view class="list" v-for="(item, index) in bilist" @click="nav(item)">
				<view class="list-item flex">
					<view class="list-item-left">
						<view class="list-title">{{ item.name.toUpperCase() }}</view>
						<view class="list-tip">{{ item.title }}</view>
					</view>
					<view class="list-item-right">
						<view class="kc" v-if="item.czstatus == 2">{{ $t('cb.bzccb') }}</view>
						<view class="back"><image src="../../static/icon/user-back.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { czcoin } from '@/api/wallet.js';
export default {
	data() {
		return {
			keyworld: '',
			rmlist: ['USDT', 'BTC', 'ETH', 'TRX'],
			bilist: [],
			maxheight: ''
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: this.$t('cb.cblb') });
	},
	onShow() {
		this.loadData();
	},
	onReachBottom() {},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper-box').boundingClientRect();
				query.exec(function(res) {
					_this.maxheight = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.maxheight);
				});
			},
			fail: res => {}
		});
	},
	methods: {
		loadData() {
			czcoin({ name: this.keyworld }).then(e => {
				console.log(e.data);
				this.bilist = e.data;
			});
		},
		navTo(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		nav(opt) {
			if (opt.czstatus == 2) {
				return this.$api.msg('当前币种不支持充值');
			}
			uni.navigateTo({
				url: '/pages/transaction/cbdetail?type=' + opt.id
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #ffffff;
}
.ss-box {
	padding: 12rpx 62rpx 10rpx 34rpx;
	border-bottom: 1px solid #f6f6f6;
	.ss-main {
		width: 537rpx;
		padding: 10rpx 0;
		background: #f6f6f6;
		border-radius: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.ss-main-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		input {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #aaaaaa;
		}
	}
	.ss-font {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #070707;
	}
}
.title {
	display: inline-block;
	margin: 30rpx 0 0 18rpx;
	padding: 0 10rpx 13rpx;
	border-bottom: 4rpx solid #f4d03c;
}
.rmbz {
	padding: 32rpx 0;
	justify-content: center;
	.rmbz-item {
		width: 130rpx;
		height: 52rpx;
		border: 2rpx solid #848a8f;
		border-radius: 10rpx;
		text-align: center;
		line-height: 52rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		margin: 0 16rpx;
	}
}
.list {
	margin-top: 6rpx;
	padding: 0 24rpx;
	.list-item {
		padding: 42rpx 0 24rpx;
		.list-item-left {
			display: flex;
			align-items: center;
			.list-title {
				width: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5d5f70;
			}
			.list-tip {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5d5f70;
			}
		}
		.list-item-right {
			display: flex;
			align-items: center;
			line-height: 1;
			.kc {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5d5f70;
				margin-right: 20rpx;
			}
			.back {
				width: 24rpx;
				height: 24rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>