jp-railway/pages/staffHome/teamHonor/teamHonor.vue

<template>
	<view>
		<u-navbar :title="title"></u-navbar>
		<view class="tabs">
			<u-tabs bar-width="60" inactive-color="#777777" active-color="#018bb9" height="88" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="commend-box" v-for="(item,i) in list" :key="i" @click="ckItem(item)">
			<view class="commend-content">
				<view class="title">
					{{item.orgName?item.orgName:item.typeName}}
				</view>
				<view class="commendation">
					{{item.content}}
				</view>
				<view class="integral">
					<view class="icon">
						<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
					</view>
					<view class="text">
						{{item.scoreInfo}}积分
					</view>
				</view>
			</view>
			<view class="gainer">
				<template v-if="type=='team'">
					<img v-if="item.badge&&item.badge.imgUrl" :src="item.badge.imgUrl" alt="">
					<u-avatar  v-else  size="136" ></u-avatar>
				</template>
				<template v-if="type=='my'">
					<img v-if="item.regUser&&item.regUser.headImg" :src="item.regUser.headImg" alt="">
					<u-avatar  v-else  size="136" ></u-avatar>
				</template>
			
			
				<view class="name">
					{{item.userName?item.userName:item.badgeName}}
				</view>
			</view>
		</view>
		
		
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/cite.js'
	
	export default {
		data() {
			return {
				title:'',
				type:'',
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				list:[],
				recordsTotal:0,
				tabList: [{
					name: '全部'
				}, {
					name: '荣誉类型'
				}, {
					name: '荣誉类型',
				}],
				current: 0
			}
		},
		onLoad(op){
			if(op.type){
				this.type=op.type
				if(this.type=='my'){
					this.listForm.isTeam=false
					this.title="公司表彰"
				}else if(this.type=='team'){
					this.listForm.isTeam=true
					this.title="团队荣誉"
				}	
			}
			this.getByType()
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			
			ckItem(item){
				if(item.badgeId){
					var url="/pages/staffHome/teamHonor/badgeDetails?type="+item.badgeId+"&id="+item.type;
					uni.navigateTo({
						url:url
					})
				}
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pageList(this.listForm).then((res) => {
					
					uni.hideLoading();
					//this.list=response.data.data
					if(this.listForm.pageIndex==1){
						this.list = res.data.data;
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getByType(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.getByType(this.type).then((response) => {
					uni.hideLoading();
					this.tabList=[
						{
							id:'',
							name:'全部'
						},
						...response.data
					]
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
				
				this.listForm.pageIndex = 1;
				this.listForm.type=this.tabList[index].id
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		background-color: rgba(255, 255, 255, 1);
		/deep/.u-tabs{
			width: 408rpx;
		}
		margin-bottom: 24rpx;
	}
	
	.commend-box{
		background-color: #fff;
		border-radius: 8px;
	    margin: 0 32rpx 24rpx 32rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		.commend-content{
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				line-height: 23px;
				font-family: 'Medium';
			}
			.commendation{
				color: rgba(119, 119, 119, 1);
				font-size: 12px;
				line-height: 17px;
				margin-top: 4rpx;
				width: 430rpx;
			}
			.integral{
				font-family: 'Regular';
				margin-top: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(230, 239, 255, 1);
				width: 260rpx;
				border-radius: 50px;
				height: 28px;
				font-size: 24rpx;
				.icon{
					width: 32rpx;
					height: 32rpx;
					img{
						width: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					color: rgba(119, 119, 119, 1);
				}
				
			}
		}
	
	.gainer{
			
		img{
			width: 136rpx;
			height: 140rpx;
			border-radius: 50px;
		}
		.name{
			text-align: center;
			color: rgba(51, 51, 51, 1);
			font-family: 'Regular';
		
		}
	}
	}
</style>