jingcai/pages/index/pledge.vue

<template>
	<view class="all">
		<view class="top">
			<text>{{$t('homepledge.m0')}}</text>
		</view>
		<image class="img" src="../../static/img/zhiya2.png" mode="scaleToFill" style=""></image>
		<view @click="navigator" class="my flex">
			<view class="flex">
				<image class="titleTip margin-r-10" src="../../static/img/zhiya3.png" mode=""></image>
				<view>
				{{$t('homepledge.m1')}}
				</view>
			</view>
			<image class="right" src="../../static/img/zhiya1.png" style="" mode=""></image>
		</view>
		<view class="buttom flex" v-for="item in navList.orderList">
			<view class="le" @click="nav">
				<view class="le1 title ">
					質押投資一
				</view>
				<view class="le1 ">
					20U{{$t('homepledge.m2')}} | 1{{$t('homepledge.m3')}}
				</view>
				<view class="le1 ">
					{{$t('homepledge.total')}}：1234534.3456U
				</view>
				<view class="le2 flex font-color-gray">
					<view class="line margin-r-10">
						<view class="line-action" :style="{'margin-left': (-100+42.94)+'%'}">
							
						</view>
					</view>
					<view>42.94%</view>
				</view>
			</view>
			<view class="ri">
				<view class="r1 margin-b-20"> 1.00% </view>
				<view class="r2 margin-b-30 font-color-gray"> {{$t('homepledge.a4')}} </view>
				<view class="add-buttom">
					{{$t('homepledge.a5')}}
				</view>
			</view>
		</view>
		<taber tab='pledge'></taber>
	</view>
</template>

<script>
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {
				navList: {
					loadingType: 'more',
					orderList: [{
						type: 'TRX',
						img: '../../static/shouye/shouye5.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye6.png',
						money: 2222,
						fl: 0,
						bfb: 9.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye7.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye8.png',
						money: 2222,
						fl: 1,
						bfb: 0.25,
					}, {
						type: 'TRX',
						img: '../../static/shouye/shouye9.png',
						money: 2222,
						fl: 0,
						bfb: 0.25,
					}],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
			};
		},
		methods: {
			navigator() {
				uni.navigateTo({
					url: '/pages/myPledge/myPledge'
				})
			},
			nav() {
				uni.navigateTo({
					url: '/pages/myPledge/zyXingqing'
				})
			},
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let navItem = this.navList;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				getCertList({
						page: navItem.page,
						limit: navItem.limit
					})
					.then(({
						data
					}) => {
						let list = data.list.data;
						navItem.orderList = navItem.orderList.concat(list);
						navItem.page++;
						if (navItem.limit == list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
							if (navItem.orderList.length == 0) {
								uni.showModal({
									title: '提示',
									content: '您未申请证书是否立即申请',
									success: res => {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/certificate/apply'
											})
										}
									},
									fail: () => {},
									complete: () => {}
								});
							}
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 100%;
		background-color: #000000;
		padding-top: var(--status-bar-height);
	}

	.top {
		padding-top: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
	}

	.img {
		width: 690rpx;
		height: 250rpx;
		margin: 20rpx 30rpx;
	}

	.my {
		background-color: #191a1f;
		margin: 0 30rpx;
		display: flex;
		color: #FFF;
		padding: 20rpx 30rpx;
		border-radius: 18rpx;

		.titleTip {
			width: 40rpx;
			height: 40rpx;
		}

		.right {
			width: 16rpx;
			height: 26rpx;
		}
	}

	.buttom {
		background-color: #191a1f;
		border-radius: 18rpx;
		margin: 30rpx;
		padding: 30rpx;
		line-height: 1;

		.le {
			font-size: 20rpx;

			.le1 {
				font-weight: 800;
				color: #feb041;
				margin-bottom: 20rpx;

				&.title {
					font-size: 33rpx;
					color: #ffffff;
				}
			}

			.le2 {
				.line {
					width: 308rpx;
					height: 16rpx;
					background-color: rgba(235, 235, 235, 0.38);
					border-radius: 99rpx;
					overflow: hidden;
					.line-action{
						height: 100%;
						width: 100%;
						border-radius: 99rpx;
						background-color:#FEB041 ;
					}
				}
			}
		}

		.r1 {
			font-size: 47rpx;
			font-weight: 800;
			color: #FF0102;
		}

		.r2 {
			font-size: 21rpx;
			font-weight: 500;
			color: #999999;
		}

		.add-buttom {
			background: #feb041;
			border-radius: 6rpx;
			font-size: 21rpx;
			font-weight: 800;
			color: #191a1f;
			padding:10rpx 20rpx ;
			text-align: center;
		}
	}
</style>