dl_uniapp/pages/components/my-notice-item.vue

<template>
	<view>
		<view class="my-notice-item-box" v-for="(item,index) in dataList">
			<view class="notice-status">{{item.signStatus||''}}</view>
			<view class="report-title">
				<text class="status-text">已报名</text>
				<view class="time-text">{{item.signTime||''}}</view>
			</view>
			<!-- 通告信息 -->
			<view class="notice-main-box">
				<notice-item :dataObj="item"></notice-item>
			</view>
			<!-- 操作按钮 -->
			<view class="opt-button-box">
				<view class="opt-item" @click="goDetail(item)">查看详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noticeItem from '@/pages/components/notice-item.vue'
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		components: {
			noticeItem
		},
		data() {
			return {
				itemObj: {
					"creator": "1",
					"createTime": "2025-03-28 15:41:18",
					"updater": "1",
					"updateTime": "2025-03-28 15:41:18",
					"delFlag": "0",
					"params": {},
					"id": "4797bd2c87bd5c2a480e412f6adb2459",
					"userId": 103,
					"title": "找小红书达人种草【蓝月亮】洗衣液",
					"platformCode": "xiaohongshu",
					"province": "河北省",
					"city": "唐山市",
					"feeDown": 100.00,
					"feeUp": null,
					"isSelfPrice": 0,
					"giftDetail": null,
					"giftPrice": null,
					"endDate": "2025-03-31",
					"brand": "蓝月亮",
					"isShowBrand": 1,
					"needNum": 100,
					"fansDown": 100,
					"fansUp": 100000,
					"isEligible": 0,
					"pic": null,
					"collect": null,
					"detail": "<p>找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液找小红书达人种草【蓝月亮】洗衣液</p>",
					"images": "/profile/upload/2025/03/28/0306359214743be86f4d8f6dea4e5d0_20250328154103A008.png,/profile/upload/2025/03/28/1_20250328154109A009.png,/profile/upload/2025/03/28/2_20250328154109A010.png,/profile/upload/2025/03/28/3_20250328154109A011.png,/profile/upload/2025/03/28/4_20250328154109A012.png,/profile/upload/2025/03/28/5_20250328154109A013.png",
					"bloggerTypes": "洗护,美妆,食品",
					"isShowTel": 1,
					"wechat": null,
					"tel": null,
					"groupImage": "/profile/upload/2025/03/28/0306359214743be86f4d8f6dea4e5d0_20250328154059A007.png",
					"isUseCoupon": 0,
					"approvalStatus": "1",
					"approvalUserId": null,
					"approvalTime": null,
					"approvalRemark": null,
					"similarityIds": null,
					"userNickName": "微信用户",
					"avatar": "",
					"platformName": null,
					"isSuper": null,
					"signStatus": null,
					"mainImage": "/profile/upload/2025/03/28/0306359214743be86f4d8f6dea4e5d0_20250328154103A008.png",
					"viewNum": 31,
					"reportNum": 0,
					"bloggerTypesText": "洗护 美妆 食品",
					"approvalUserName": null
				}
			}
		},
		methods: {
			/**
			 * 查看通告详情
			 * @param {Object} item
			 */
			goDetail(item) {
				this.$tab.navigateTo(`/pages/notice/detail?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss">
	.my-notice-item-box:first-child {
		margin-top: 20rpx;
	}

	.my-notice-item-box {
		width: 100%;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;

		.notice-status {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 20rpx;
			background-color: #FC1F3E;
			color: white;
			border-radius: 0 20rpx 0 20rpx;
			padding: 7rpx 14rpx;
		}

		.report-title {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: start;

			.time-text {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 20rpx;
				color: #929292;
			}

			.status-text {
				width: 200rpx;
				font-size: 32rpx;
				font-weight: bold;
				padding: 5rpx;
			}
		}

		.notice-main-box {
			font-size: 29rpx;
			width: 100%;
			margin-top: 20rpx;
			background-color: #FAFAFA;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		.opt-button-box {
			width: 100%;
			font-size: 30rpx;
			padding-top: 10rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.opt-item {
				padding: 10rpx 25rpx;
				margin-left: 20rpx;
				color: #626464;
				background-color: white;
				border: 1rpx solid #C8C8C8;
				border-radius: 40rpx;
			}
		}
	}
</style>