PKR/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="nav('/pages/myPledge/myPledge')" 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,ind) in list" @click="nav('/pages/myPledge/zyXingqing?id='+item.id)">
			<view class="le" >
				<view class="le1 title ">
					{{item.name}}
				</view>
				<view class="le1 qt">
					{{item.single_time_min*1}}U{{$t('homepledge.m2')}} | {{item.day}}{{$t('homepledge.m3')}}
				</view>
				<view class="le1 ze">
					{{$t('homepledge.total')}}：{{item.stock*1}}U
				</view>
				<!-- <view class="le2 flex font-color-gray">
					<view class="line margin-r-10">
						<view class="line-action" :style="{'margin-left': -(100-item.bfb)+'%'}">

						</view>
					</view>
					<view>{{item.bfb}}%</view>
				</view> -->
			</view>
			<view class="ri">
				<view class="r1 margin-b-20"> {{item.day_get}}% </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";
	import {
		lock
	} from "@/api/mypledge.js"
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			taber
		},
		computed: {
			...mapState('user', ['hasLogin'])
		},
		data() {
			return {
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				list: []
			}
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.loadData()
		},
		methods: {
			navigator() {
				uni.navigateTo({
					url: '/pages/myPledge/myPledge'
				})
			},
			nav(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			loadData(source) {
				let that = this
				if (that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				lock({
					page: that.page,
					limit: that.limit,
					id: that.id,
				}).then(res => {
					let list = res.data.list.map(
						(res) => {
							res.bfb = +(res.join * 100 / res.stock).toFixed(2);
							return res
						}
					)
					that.list = that.list.concat(list)
					that.page++
					if (list.length == that.limit) {
						that.loadingType = 'more'
					} else {
						that.loadingType = 'noMore'
					}
					that.loaded = true
				})
			},
		}
	};
</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: 15rpx;
				
				&.qt {
					padding-top: 15rpx;
				}
				
				&.ze {
					padding-top: 26rpx;
				}

				&.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>