dev/dcp-app-gate/pages/conference/activitiesSelectEN.vue

<template>
	<view v-if="activityData.length">
		<view class="activity-tip">Among multiple events of our conference, please kindly choose your preferable events to attend to（Multiple choice）.</view>
		<view class="uni-list">
			<!-- <checkbox-group @change="selectAll">
				<label class="uni-list-cell uni-list-cell-pd">
					<view>
						<checkbox :checked="checkedAll"/>
					</view>
					<view> 全选 </view>
				</label>
			</checkbox-group> -->
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in activityData" :key="item.value">
					<view>
						<checkbox :value="item.id" :checked="item.checked" />
					</view>
					<view>
						<view style="font-weight: bold">{{ momentDate(item.activityStartTime) }} ~ {{ momentDate(item.activityEndTime) }}</view>
						<view>{{item.activityNameEn}}</view>
					</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			meetingId: {
				type: String,
				require: true
			}
		},
		data() {
			return {
				activityData: [],
				checkedIds: [],
				activityStartTimes: [],
				checkedAll: false,
				checkDetermine: true,
			}
		},
		mounted() {
			this.getActivityData();
		},
		methods: {
			selectAll(){
				this.checkedAll = !this.checkedAll;
				if(this.checkedAll){
					this.checkedIds = [];
					this.activityData.map(item=>{
						this.checkedIds.push(item.id);
						this.$set(item,'checked',true)
					})
				}else{
					this.checkedIds = [];
					this.activityData.map(item=>{
						this.$set(item,'checked',false)
					})
				}
				this.$emit('getcheckedIds', this.checkedIds.join(","))
				// console.log('this.checkedIds',this.checkedIds)
			},
			momentDate(date){
					return this.moment(date).format('lll')
				
			},
			async getActivityData(){
				console.log('meetingId', this.meetingId)
				const res= await this.$myRequest({
					url: '/meeting/meetingApplyOnlines/getActivityInfo',
					data: {
						meetingId: this.meetingId
					}
				})
				this.activityData = res.data.allMeetingActivitys || [];
			},
		
			
			
			 checkboxChange: function (e) { 
				this.checkedIds = e.detail.value;
				this.checkedIds.forEach((ids) =>{
					this.activityData.forEach((activity) => {
						if (activity.id === ids){
							console.log("判断结果：：：",this.activityStartTimes.indexOf(activity.activityStartTime)>= 0);
							console.log("activity.activityStartTime",activity.activityStartTime);
							if (this.activityStartTimes.indexOf(activity.activityStartTime) >= 0){
								this.checkDetermine = false;
									uni.showToast({
										title: 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.',
										icon: 'none',
										duration: 1500,
									});
								
							}else{
								this.activityStartTimes.push(activity.activityStartTime)
							}
						} 
					})
				})
				console.log("轮询数组中的时间"+this.activityStartTimes)
				
				if(this.activityData.length == this.checkedIds.length){
					this.checkedAll = false;
				}else{
					this.checkedAll = false;
				}
				this.$emit('getcheckedIds', this.checkedIds.join(","));
				console.log("第一个页面中存在的数据",this.checkDetermine);
				this.$emit('getcheckDetermine', this.checkDetermine);
				// console.log(this.checkedIds)
				// var items = this.activityData,
					// values = e.detail.value;
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.indexOf(item.id) >= 0){
				// 		this.$'set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
				this.activityStartTimes = [];
				this.checkDetermine = true;
			} 
			
		}
	}
</script>

<style scoped>
.uni-list-cell {
	justify-content: flex-start
}
.activity-tip{
	padding: 20px;
	font-weight: bold;
	color: #333;
}
checkbox{
	transform:scale(0.7);
	margin-right: 10px;
}
</style>