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

<template>
	<view>
		<u-navbar title="" ></u-navbar>
		
		<view class="news">
			<table  class="table"  >
				<tr>
					<td class="tb31" colspan="2">
					<h3>{{info.remark?""+info.remark:''}}{{info.honorId}}名单</h3></td>
				</tr>
				<tr v-if="false">
					<td  class="tb1" v-html='htmlShow("表彰词")'></td>
					<td class="tb2">
						<textarea  style="width: 100%;" :auto-height="true"
					v-model="info.content"
					 name="" id="" readonly ></textarea></td>
				</tr>
				<tr v-if="info.orgName">
					<td  class="tb1"  v-html='htmlShow(info.orgName)' ></td>
					<td class="tb2">{{info.orgUserNames}}</td>
				</tr>
				<template v-for="(item,j) in dept">
					<template>
						<tr :key="j">
							<td class="tb1"  v-html="htmlShow(item.orgName)" ></td>
							 <td  class="tb2">
								 
							 <template v-for="(str,k) in item.list">
							 	<template v-if="k!=0">
							 		, 
							 	</template>
								<span class="tb22" :key="k">{{showName(str)}}</span>	
							 	
							 </template>
							</td>
						</tr>
						
					</template>
				</template>
				<tr>
					<td  class="tb1">奖励<br/>
					积分</td>
					<td class="tb2"> <span v-if="info.isTeam" >每人</span>+{{info.scoreInfo}}积分</td>
				</tr>
				
				
			</table>
			
		   </view>
		<u-divider 
		
		border-color="#CFD2D5">已经到底了</u-divider>
		 <view class="reward-group" v-if="false" >
			 <view >
			 	<view class="reward-item-title" style="text-align: center;font-size: 36rpx;">
			 		{{info.remark?""+info.remark:''}}{{info.honorId}}名单
			 	</view>
			 	
			 </view>
			 <view >
			 	
			 	<view class="reward-item">
			 		
					<textarea  style="width: 100%;" :auto-height="true"
					v-model="info.content"
					 name="" id="" readonly ></textarea>
			 	</view>
			 </view>
			 
			 <template v-for="(item,i) in dept">
				 <view :key="i" >
				 				 
				 	<view class="reward-item-title">
				 		{{item.orgName}}
				 	</view>
				 	<view class="reward-item"  >
						
				 		
				 	</view>
				 </view>
			 </template>
			 
			 <view >
				 
			 	<view class="reward-item-title">
			 		{{info.orgName}} {{info.userName}}
			 	</view>
			 	<view class="reward-item" v-if="info.orgUserNames">
			 		{{info.orgUserNames}}
			 	</view>
			 </view>
			 <view >
			 	<view class="reward-item">
			 		奖励积分  <span v-if="info.isTeam" >每人</span>+{{info.scoreInfo}}积分
			 	</view>
			 	<view class="reward-item">
			 		
			 	</view>
			 </view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/cite.js'
	
	export default {
		data() {
			return {
				type:'',
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				info:{},
				list:[],
				dept:[],
				noticeList:[],
				recordsTotal:0,
			}
		},
		onLoad(op){
			this.type=op.id
			
			this.getInfo()
			
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			showName(str){
				if(str.length!=2){
					
						return  str
				}else if(str.length==2){
					return str[0]+" "+str[1]
					
				}
					
				return  'error'
			},
			htmlShow(str){
				var t="";
				for(var i in str){
					t+=str[i]+"<br/>"
				}
				return  t
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.editBadge(this.type).then((res) => {
					
					uni.hideLoading();
					//this.list=response.data.data
					this.info=res.data.cite;
					if(this.info.regUserList&&this.info.regUserList.length){
						this.info.orgUserNames=this.info.regUserList.map(item=>{
							return this.showName(item.name)
						}).join()
						if(this.info.regUserList&&this.info.regUserList.length&&!this.info.orgName){
							this.dept=[];
							var sz=[];
							var list=this.info.regUserList;
							for(var i in list){
								var item=list[i];
								var index=sz.indexOf(item.orgName);
								if(index!=-1){
									this.dept[index].list.push(item.name)
								}else{
									sz.push(item.orgName);
									this.dept.push({
										orgName:item.orgName,
										list:[item.name]
									})
								}
							}
							console.log(this.dept)
							
						}
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff;
		font-family: 'Regular';
	}
	.news{
		margin: 10px;
	}
	.table{
		
		border-collapse:collapse;
		    background-color: #fff;
		width: 100%;
		border: 1px solid;
		.trtop{
			    border-top: 2px solid;
		}
		td{
			border: 1px solid;
			
			margin: 0;
			padding: 10px 0px;
			
		}
		.tb22{
			margin: 0 4px;
		}
		.tb1{
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			width: 10%;
			max-width: 100rpx;
			min-width: 80rpx;
		}
		.tb2{
			
			font-size: 28rpx;
		}
		.tb32,.tb31{
			text-align: center;
			font-weight: bold;
			font-size: 14px;
		}
		.tb33{
			font-weight: normal;
			font-size: 12px;
			color: #565656;
		}
	}
	.reward-group{
		 margin:24rpx 32rpx;
		 background-color: #fff;
		  
		 .reward-item, .reward-item-title{
			 border-bottom: solid 1px #e6e6e6;
			 line-height: 44px;
			 padding-left: 16rpx;
		 }
		 .reward-item-title{
			 font-weight: bold;
		 }
		 .reward-item{
			min-height: 64px;
		 }
	}
	page{
		font-family: 'Regular';
	}
	// 荣誉名称
	.honor-name {
		background-color: #fff;
		padding: 32rpx 0;
		text-align: center;
    
		.icon {
			img {
				max-width: 536rpx;
				height: 140rpx;
			}
		}

		.name {
			color: rgba(51, 51, 51, 1);
			font-size: 18px;
		}

		.explain {
			color: rgba(119, 119, 119, 1);
			margin-top: 24rpx;

		}
	}

	// 荣誉记录
	.record {
		margin-top: 26px;
		padding: 0 32rpx;

		.record-title {
			display: flex;
			align-items: center;
			margin-bottom: 19px;
           color: rgba(51, 51, 51, 1);
            font-size: 18px;
			line-height: 18px;
			font-family: 'Regular';
			.rec {
				width: 4px;
				height: 16px;
				background-color: rgba(31, 74, 153, 1);
				margin-right: 4px;
			}
		}


		.commend-box {
			background-color: #fff;
			border-radius: 8px;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
            margin-bottom: 12px;
			.commend-content {
				    width: 100%;
				.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;
					
				}

				.integral {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.flex{
						display: flex;
						border-radius: 50px;
						height: 28px;
						font-size: 24rpx;
						background-color: rgba(230, 239, 255, 1);
						justify-content: center;
						align-items: center;
						padding: 0 16rpx;
						.icon {
							width: 32rpx;
							height: 32rpx;
						
							img {
								width: 100%;
							}
						}
						
						.text {
							font-size: 24rpx;
							color: rgba(119, 119, 119, 1);
						}
					}

				}
				.date{
					color: rgba(153, 153, 153, 1);
					font-size: 12px;
				}
			}

			
		}
	}
</style>