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

<template>
	<view>
		<u-navbar title="徽章详情"></u-navbar>
		<!-- 荣誉名称 -->
		<view class="honor-name">
			<view class="icon">
				<img :src="info.img" alt="">
			</view>
			<view class="name">
				{{info.name}}
			</view>
			<view class="explain">
				{{info.synopsis}}
			</view>
		</view>
		<!-- 荣誉记录 -->
		<view class="record">
			<view class="record-title">
				<view class="rec">

				</view>
				<view class="text">
					荣誉记录
				</view>
			</view>

			<view class="commend-box"  v-for="(item,i) in list" :key="i">
				<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="flex">
							<view class="icon">
								<img src="../../../assets/img/riFill-copper-diamond-fill@2x.png" alt="">
							</view>
							<view class="text">
								{{item.scoreInfo}}积分
							</view>
						</view>
						<view class="date">
							{{item.createTime}}
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/cite.js'
	
	export default {
		data() {
			return {
				type:'',
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				info:{},
				list:[],
				recordsTotal:0,
			}
		},
		onLoad(op){
			if(op.type){
				this.type=op.type
				
				this.getInfo()
				this.listForm.type=op.id
				this.getList()
			}
			
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			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;
				}).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>
	// 荣誉名称
	.honor-name {
		background-color: #fff;
		padding: 32rpx 0;
		text-align: center;

		.icon {
			img {
				width: 136rpx;
				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;
			.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 {
				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 23px;
				}

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