talk_appAmin/pages/mine/myActivity/info.vue

<template class="content">
	<view class="fixed-header">
		<!-- 顶部导航栏 -->
		<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick">
			<template #center>
				<div class="navbarcenter"><span>活动详情</span></div>
			</template>
		</up-navbar>
	</view>
	<view style=" overflow: auto;">
		<view class="avtivityInfo">
			<view>
				<view class="cards">
					<view class="title"> {{ actiInfoList.acTitle }}</view>
					<view class="time">活动时间：{{ actiInfoList.startTime }} - {{ actiInfoList.endTime }}</view>
					<view class="addrs">活动地点：{{ actiInfoList.addres }}</view>
				</view>
				<view class="cardz">
					<up-text size="15" color="#000000" lineHeight="23" :text="actiInfoList.acContent"></up-text>

				</view>
				<view class="cardx" v-for="(item, index) in toimage(actiInfoList.file)" :key="index">
					<image :src="item" class="image"></image>
				</view>
			</view>
		</view>
		<view class="qrcode" v-if="actiInfoList.state == '2' & actiInfoList.auditStatus == 0 ">
			<image :src="basetoimg(actiInfoList.acQrcode)" style="width: 200rpx; height: 200rpx;"
				@click="showqr = true">
			</image>
			<view class="text">签到二维码</view>
		</view>

 

	</view>
	<!-- 当前是审核中就展示 -->
	<view v-if="actiInfoList.auditStatus == 1 | actiInfoList.auditStatus == 2" class="infox4">
		<view class="line"></view>
		<view class="text1 text">发布审核时间：<span>{{ actiInfoList.startTime }}</span></view>
		<view class="text2 text">审核状态：<span style="color: #43CE8F">审核中</span></view>

	</view>
	<!-- 当前是未通过 -->
	<view v-else-if="actiInfoList.auditStatus == 3 | actiInfoList.auditStatus == 4 " class="infox4">
		<view class="line"></view>
		<view class="text1 text">发布审核时间：<span>{{ actiInfoList.startTime }}</span></view>
		<view class="text1 text">审核状态：<span style="color: #F87863">未通过</span></view>
		<view class="text2 text">未通过原因：<span style="color: #F87863">{{actiInfoList.auditAdvice}}</span></view>

	</view>
	<!-- 进行中或者报名中就展示 -->
	<view v-else-if="actiInfoList.auditStatus == 0">
		<view class="infox1" v-if="actiInfoList.state == '1'">
			<view>
				<view v-if="participationInfo.elrollAvatars!=0">
					<up-avatar-group :urls="participation(participationInfo.elrollAvatars)" size="30"
						gap="0.4"></up-avatar-group>
					<!-- <view class="user_imgs">
						<image v-for="(item,index) in participation(participationInfo.elrollAvatars)" src="../../../static/images/icon/tu4-1.jpg" mode=""
							:style="'transform: translateX('+(index)*(28)+'rpx);'"></image> -->
						<!-- <view class="" :style="'transform: translateX('+participationInfo.elrollAvatars.length*(28)+'rpx);'">
							更多
						</view> -->
					<!-- </view> -->

				</view>
			</view>
			<view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
		</view>
	<!-- 	0=》已结束
		1=》报名中
		2=》进行中 -->
		<view class="infox2" v-else>
			<view class="footer_left_in" v-if="actiInfoList.elroll!=0">

				<up-avatar-group :urls="participation(participationInfo.elrollAvatars)" size="30"
                        gap="0.4"></up-avatar-group>
				<!-- 左侧报名用户头像 -->

				<!-- <view class="user_imgs"> -->
					<!-- <image v-for="(item,index) in participation(participationInfo.elrollAvatars)" :src="item" mode=""
						:style="'transform: translateX('+(index)*(28)+'rpx);'"></image> -->
					<!-- <view class="" :style="'transform: translateX('+participationInfo.elrollAvatars.length*(28)+'rpx);'">
						更多
					</view> -->
				<!-- </view> -->
				<view class="elroll">已报名：{{ actiInfoList.elroll }}人</view>
			</view>
			<view v-if="actiInfoList.state != '1'" class="flex justifyCenter alignCenter">
				<view v-if="actiInfoList.qrcodeElroll!=0">
					<up-avatar-group :urls="participation(participationInfo.qrcodeElrollAvatars)" size="30"
                        gap="0.4"></up-avatar-group>
					<!-- <view class="user_imgs">
						<image v-for="(item,index) in participation(participationInfo.qrcodeElrollAvatars
)" :src="item" mode="" :style="'transform: translateX('+(index)*(28)+'rpx);'"></image>
						<view class="" :style="'transform: translateX('+participation(participationInfo.qrcodeElrollAvatars
).length*(28)+'rpx);'">
							更多
						</view>
					</view> -->
				</view>
				<view class="elroll">已签到：{{ actiInfoList.qrcodeElroll }}人</view>
			</view>

		</view>
	</view>
	



	<view>
		<up-overlay :show="showqr" @click="showqr = false">
			<view class="warp">
				<image class="rect" @tap.stop :src="basetoimg(actiInfoList.acQrcode)"
					style="width: 600rpx; height: 600rpx">
				</image>
			</view>
		</up-overlay>
	</view>
</template>

<script setup>
	import {
		getTakePartsInfoByacId,
		gotoQrcode,
		gotoSing1,
		gotoSing2
	} from "@/api/activityInfo/activityTakeInfo";
	import {
		listInfo,
		getInfo,
		getInfoall,
		delInfo,
		addInfo,
		updateInfo
	} from "@/api/activityInfo/info";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		getCurrentInstance,
		toRefs,
		computed
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	const showqr = ref(false)
	const {
		proxy
	} = getCurrentInstance();
	const iconConfig = proxy.iconConfig;
	const style = ref({
		p: 'font-weight: 400;font-size: 24rpx;color: #000000 !important;',
	});
	const activityState = ref([]); // 字典 activity_state 活动状态 
	const takePartState = ref([]); // 字典 take_part_state 活动参与状态
	const open = ref(false);
	const title = ref('确认签到');
	const content = ref('请您确认活动签到，祝您玩的愉快！');
	const bgColor = ref('');
	const store = useStore();
	const QNDomain = store.state.user.QNDomain;
	const actiInfoList = ref({});
	const activityAttendInfo = ref({});
	const qrcodeInfo = ref();
	//头像组
	const dataopen = ref(false)
	const urls1 = reactive([])
	const participationInfo = ref([])
	  const  participation = (data) => {
		  console.log('有无data',data);
		  
		  if(data!=null){
			  console.log('数据不为空');
			  // 根据条件决定保留的元素数量
		const limit = actiInfoList.state === '1' ? 6 : 4;
		// 创建一个新的数组来存储前 limit 个元素
		 const limitedData = data.slice(0, limit);
		// 映射到新的数组
		const refObjects = limitedData.map(item => (QNDomain + item.avatar));
		console.log(refObjects);
		return refObjects;  
		  }
		
		
	}


	function basetoimg(e) {
		return "data:image/png;base64," + e
	}
	onLoad((options) => {
		const _id = options.id;
		getInfo(_id).then(response => {
			actiInfoList.value = response.data;
			console.log("actiInfoList:", actiInfoList.value);
		});
		getInfoall(_id).then(e => {
			participationInfo.value = e.data
			dataopen.value = true;
			console.log("参与人信息：", e.data);
		})
		getDicts('activity_state').then(e => {
			activityState.value = e.data;
		});
		getDicts('take_part_state').then(e => {
			takePartState.value = e.data;
		});
		checkStatus(options.id);

	});

	const checkStatus = (id) => {
		getTakePartsInfoByacId(id).then(e => {

			activityAttendInfo.value = e.data;
			console.log("个人信息：", activityAttendInfo.value)
		});
	};

	const leftClick = () => {
		proxy.$tab.navigateBack(1);
	};
	const toimage = (url) => {
		if (typeof url === 'string') {
			let info = url.split(",");
			let processedInfo = info.map(item => QNDomain + item);
			console.log("processedInfo", processedInfo);
			return processedInfo;
		}
		return null;
	};




	const goQrcode = () => {
		uni.scanCode({
			onlyFromCamera: true,
			success: (res) => {
				console.log('扫描二维码成功,结果:', res);
				toqrcode(res);

			},
			error: (res) => {
				console.log('扫描二维码出现错误');
			}
		});

	}


	const toqrcode = (e) => {
		qrcodeInfo.value = JSON.parse(e.result);
		if (actiInfoList.value.id !== qrcodeInfo.value.id) {
			proxy.$modal.msgError('二维码不匹配!')
			return;
		} else {
			open.value = !open.value;
			console.log("信息：", qrcodeInfo.value);
		}

	};
</script>
<style lang="scss">
	.user_imgs {

		position: relative;
		padding-right: 20rpx;

		image {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		view {

			width: 60rpx;
			height: 60rpx;
			background: #f4f5f6;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			font-size: 18rpx;

		}
	}

	.footer_left_in {
		display: flex;
		align-items: center;
	}

	.elroll {
		margin-left: 40rpx;
		font-size: 24rpx;
		color: #999999 !important;

	}

	page {
		background-color: #ffffff;

	}

	.navbarcenter {
		font-weight: 400;
		width: 148rpx;
		height: 37rpx;
		font-size: 36rpx;
		text-align: left;
		color: #000000;
	}

	.avtivityInfo {
		width: 686rpx;
		margin: 44rpx auto;
		margin-bottom: 0;

		.cards {
			.title {
				font-weight: 600 !important;
				font-size: 32rpx;
				text-align: left;
				color: #000000 !important;
			}

			.time {
				margin-top: 28rpx;
				font-weight: 400;
				font-size: 24rpx;
				text-align: left;
				color: #999999 !important;
			}

			.addrs {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				text-align: left;
				color: #999999 !important;
			}
		}

		.cardz {
			margin-top: 48rpx;
			font-weight: 400;
			width: 674rpx;
			font-size: 24rpx;
			text-align: left;
			color: #000000 !important;
		}

		.cardx {
			margin-top: 48rpx;

			.image {
				width: 686rpx;
				border-radius: 24rpx;
				height: 720rpx;
			}
		}


	}



	.infox1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 74rpx;
		height: 88rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		position: fixed;
		/* 固定位置 */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		bottom: 0;
		/* 底部对齐 */
		border-top: 1px solid #ccc;
		/* 上边框 */
		background-color: white;
		/* 背景色设置为白色，防止透明背景导致内容重叠可见 */
		z-index: 10;

		.elroll {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #999999 !important;
		}


	}

	.infox2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		
		padding-left: 32rpx;
		padding-right: 32rpx;
		position: fixed;
		/* 固定位置 */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		bottom: 0rpx;
		/* 底部对齐 */
		border-top: 1px solid #ccc;
		/* 上边框 */
		background-color: white;
		/* 背景色设置为白色，防止透明背景导致内容重叠可见 */
		z-index: 10;




	}

	.infox3 {
		width: 100%;
		height: 68rpx;
		background-color: #F6F6F6;
		position: fixed;
		/* 固定位置 */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		bottom: 0;
	}

	.acContentstyle {
		color: #000000 !important;
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		line-height: 46rpx;
	}

	.qrcode {
		margin-top: 20rpx;
		margin-bottom: 24rpx;
		text-align: center;

		.text {
			font-weight: 600;
			font-size: 30rpx;
			color: #000000 !important;
		}

	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.infox4 {
		width: 686rpx;
		height: 400rpx;
		margin: 60rpx auto;

		.line {
			width: 100%;
			height: 4rpx;
			background-color: #F4F5F6;
			border-radius: 2rpx 2rpx 2rpx 2rpx;
			margin-bottom: 60rpx;
		}

		.text {
			font-size: 30rpx;
			color: #000000 !important;
		}

		.text1 {

			margin-bottom: 24rpx;
		}

		.text2 {}
	}
</style>