dev/dcp-app-gate/pages/service/others/myOnlineSignup.vue

<template>
	<view class="">
		<view class="offline-signup-list" v-if="tableData.length && meetingInfoArray.length">
			<view class="offline-signup-list-item" v-for="(item, index) in tableData" :key="index">
				<view class="conference-title">{{ array2Obj(item.meetingId, $i18n.locale=='en'?'meetingNameEn':'meetingName') }}</view>
				<view class="signup-info">
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'ApplyName':'报名人员：'}}</text>
						<text class="signup-info-value">{{item.name}}</text></view>
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'ApplyDate':'报名时间：'}}</text>
						<text class="signup-info-value">{{moment(item.createDate).format('YYYY-MM-DD HH:mm')}}</text>
					</view>
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'MeetingDate':'会议时间：'}}</text>
						<text class="signup-info-value">
							{{moment(array2Obj(item.meetingId, 'meetingStartDate')).format('YYYY-MM-DD')}} ~ {{moment(array2Obj(item.meetingId, 'meetingEndDate')).format('YYYY-MM-DD')}}
						</text>
					</view>
				</view>
				<view class="approval-state">{{$i18n.locale=='en'? 'Registered': '报名成功'}}</view>
			</view>
		</view>
		<view class="nodata-box" v-else>
			<image src="@/static/img/public/7.png" mode=""></image>
			<text>{{$i18n.locale=='en'? 'No Data': '暂无数据'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				meetingInfoArray: [],
				userId: JSON.parse(uni.getStorageSync('user')).id,
			}
		},
		mounted() {
			// console.log(JSON.parse(uni.getStorageSync('user')))
			this.getMeetingInfo();
			this.getApplyHistory();
		},
		methods: {
			array2Obj(id, attr){
				let targetConference = this.meetingInfoArray.filter(item=>{
					return id==item.id;
				})
				// console.log('targetConference',targetConference)
				return targetConference[0][attr];
			},
			async getMeetingInfo() {
			    const res = await this.$myRequest({
			        url: '/meeting/meetingBasicInfos/'
			    });
				this.meetingInfoArray = res.data.meetingBasicInfos;
				// console.log('this.meetingInfoArray', this.tableData)
			},
			async getApplyHistory(){
				await this.$myRequest({
					url: '/meeting/meetingApplyOnlines',
					data: {
						pageNo: '', 
						// auditStatusDict: '', 
						createBy: this.userId
					}
				}).then(res => {
					this.tableData = res.data.meetingApplyOnlines || [];
					// console.log('lllllllllll',res)
				})
			}
		}
	}
</script>

<style scoped>
.offline-signup-list{
	padding-top: 10px;
}
.offline-signup-list-item{
	background: #FFFFFF;
	color: #666;
	padding: 10px;
	position: relative;
	overflow: hidden;
	margin-top: 10px;
}
.conference-title{
	width: 80%;
	font-size: 18px;
	font-weight: bold;
	padding: 16px 0;
}
.signup-info{
	padding: 0 10px;
}
.signup-info-label{
	color: #999;
	padding-right: 10px;
	line-height: 30px;
}
.approval-state{
	position: absolute;
	top: 0;
	right: -100px;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 28px;
	width: 200px;
	text-align: center;
	font-weight: bold;
	transform: rotate(45deg) translate(-10px, 30px);
	transform-origin: 50% 50%;
	background: #03b6b3;
	box-shadow: 0 4px 4px #5ddedd;
}
.nodata-box{
	text-align: center;
	padding-top: 50px;
}
.nodata-box image{
	width: 60%;
	/* height: 200px; */
}
.nodata-box text{
	display: block;
	font-size: 20px;
	color: #CCE6FF;
	line-height: 40px;
}
</style>