WenWuGuanJia/user_fenbao/rongYu/rongYu.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="我的荣誉" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="rw_box" style="" v-if="list.length > 0">
			<view @click="openBuildingInfo(item.id)" class="zj_box" v-for="item in list" :key="item.id" style="position: relative">
				<view class="tx_box">
					<image style="border-radius: 15rpx; width: 300rpx; height: 185rpx" mode="aspectFill" :src="item.image"></image>
				</view>
				<view></view>
				<view class="ww_tit" style="display: flex; justify-content: space-between; align-items: center">
					<view class="" style="width: 160rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.title }}
					</view>
					<view class="" style="width: 120rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.type_text }}
					</view>
				</view>
				<u-badge type="primary" max="99" :value="item.honor_title" :absolute="true" :offset="[5, 5]"></u-badge>
			</view>
		</view>

		<u-empty v-else text="暂无荣誉" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return { isLoading: false, page: 1, list: [] };
	},
	onLoad() {
		that = this;
		this.getUserHonor();
	},
	methods: {
		getUserHonor() {
			this.isLoading = true;
			this.$api.getUserHonor({ main_body_id: 1, page: this.page, pageSize: '10' }, function (res) {
				// console.log(res, 77);
				if (res.code == 1) {
					that.isLoading = false;
					that.list = [...that.list, ...res.data];
				}
			});
		}
	},
	/* 页面触底 */
	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			this.page++;
			this.getUserHonor();
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.rw_box {
	width: 100%;
	margin: auto;
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 20rpx;
	justify-content: space-around;
	border-radius: 10rpx;
}
.ww_tit {
	/* width: 260rpx; */
	font-size: 30rpx;
	color: #444444;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zj_box {
	margin-top: 20rpx;
}
</style>