samehome/pages/charity/index.vue

<template>
	<view class="main">
		<!-- 列表 -->
			
			<!-- #ifdef APP-PLUS -->
			<view class="charityList">
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
				<view class="charityListH5">
					<!-- #endif -->
				
			
			<view class="item" v-for="(item, index) in userInfoObj" :key="index" @click="goto(item.id)">
				<u--image class="img" :showLoading="true" :src="baseURL+item.img" width="318rpx"
					height="230rpx"></u--image>
				<view class="title">{{item.title}} </view>
				<view class="target">Target: {{item.targetAmount}}{{" "}}{{coinTypeInfo.system_cropto_code}}</view>
				<u-line-progress class="progressbar"  :percentage="item.percentage"
					activeColor="#00E8A2" height="30rpx">
					<text class="u-percentage-slot">{{item.percentage}}%</text>
				</u-line-progress>
			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
		<!-- tabBar -->
		<tab-bar :selectActive="3"></tab-bar>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: 'charity',
		data() {
			return {
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				form: {
					pageNumber: 1,
					pageSize: 20,
					ways: 'exchange',
				},
				userInfoObj: [],
				baseURL:'',
			}
		},
		onLoad() {
			this.baseURL = constant.BASE_URL
			this.getList()
		},
		onShow() {

		},
		onHide() {},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getList();
			}
		},
		computed: {
			i18n() {
				return this.$t('markets')
			},
			// 获取币种
			coinTypeInfo(){
				return uni.getStorageSync('coinTypeInfo')
			}
		},
		methods: {
			// 获取商品列表
			getList() {
				this.isLoadMore = true
				api.charityList(this.form).then(res => {
					if (res.charityList.content.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res.charityList.content)
						} else {
							this.userInfoObj = res.charityList.content
						}
						if (this.userInfoObj.length >= Number(res.charityList.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						this.userInfoObj = []
					}

					this.$forceUpdate()
				})
			},
			goto(index) {
				uni.navigateTo({
					url: `/pages/charity/details?id=${index}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-percentage-slot {
		position: absolute;
		    top: -2rpx;
		    left: 24rpx;
		    font-size: 24rpx;
		    color: #333;
	}
	.main {
		padding-bottom: 198rpx; // 避免底部TabBar盖住内容

		.charityList {
			// width: 318rpx;
			margin: 120rpx 38rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				position: relative;
				width: 318rpx;
				height: 430rpx;
				box-sizing: border-box;
				background-color: #323045;
				border-radius: 20rpx;
				margin-bottom: 32rpx;

				/deep/.img {
					overflow: hidden;
					border-radius: 20rpx;
				}

				.title {
					height: 72rpx;
					line-height: 35rpx;
					font-size: 32rpx;
					margin: 24rpx 20rpx 12rpx;
					// 超出字符省略成...
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //兼容
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2; //显示行数
					-webkit-box-orient: vertical;
				}

				.target {
					height: 40rpx;
					line-height: 40rpx;
					color: $mainColor;
					font-size: 26rpx;
					margin-left: 20rpx;
				}

				.progressbar {
					margin: 12rpx 20rpx 0;

					/deep/.u-line-progress__text {
						color: #000;
						font-size: 16rpx;
						transform: scale(0.66) // 字体超过12px以下的需要缩放 8/12 =0.666
					}
				}

			}
		}
		
		
		.charityListH5{
			// width: 318rpx;
			margin: 40rpx 38rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		
			.item {
				position: relative;
				width: 318rpx;
				height: 430rpx;
				box-sizing: border-box;
				background-color: #323045;
				border-radius: 20rpx;
				margin-bottom: 32rpx;
		
				/deep/.img {
					overflow: hidden;
					border-radius: 20rpx;
				}
		
				.title {
					height: 72rpx;
					line-height: 35rpx;
					font-size: 32rpx;
					margin: 24rpx 20rpx 12rpx;
					// 超出字符省略成...
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //兼容
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2; //显示行数
					-webkit-box-orient: vertical;
				}
		
				.target {
					height: 40rpx;
					line-height: 40rpx;
					color: $mainColor;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
		
				.progressbar {
					margin: 12rpx 20rpx 0;
		
					/deep/.u-line-progress__text {
						color: #000;
						font-size: 16rpx;
						transform: scale(0.66) // 字体超过12px以下的需要缩放 8/12 =0.666
					}
				}
		
			}
		}
		




	}
</style>