YzXyh_v3/UI/XYH.VUE/src/views/amActivity/activity/index.vue

<script setup lang="ts" name="Activity">
import dayjs from "dayjs"
import apis from "@a"
import { permissionNames } from "@@/services/PermissionNames"
import vueQr from "vue-qr/src/packages/vue-qr.vue"
//const { activity_audit_status } = useDict("activity_audit_status")

const tableRef = ref()
const modalRef = ref()
const detailModalRef = ref()
const applyModalRef = ref()
const opts = reactive({
	columns: [
		{ field: "activityId", name: "活动id", visible: false },
		{ field: "title", name: "活动标题", visible: true, tooltip: true },
		{ field: "categoryName", name: "活动类别", visible: true, width: 100 },
		{ field: "cost", name: "活动费用", visible: true, tooltip: true },
		{ field: "peopleMax", name: "人数上限", visible: true, isSort: true, width: 80 },
		{ field: "activityDate", name: "活动日期", visible: true, isSort: true, width: 120 },
		{ field: "expiryDate", name: "截止日期", visible: true, isSort: true, width: 120 },
		// { field: "area", name: "活动区域", visible: true, width: 80 },
		{ field: "address", name: "活动地点", visible: true },
		{ field: "auditStatus", name: "活动状态", visible: true, isSort: true, width: 150 },
		{ field: "auditUser", name: "审核人", visible: true },
		{ field: "auditTime", name: "审核时间", visible: true, isSort: true, width: 185 },
		{ field: "isHead", name: "是否置顶", visible: true, width: 80 },
		{ field: "isHot", name: "是否热门", visible: true, width: 80 },
		{ field: "actions", name: `操作`, width: 150 }
	],
	queryParams: {
		title: undefined,
		category: undefined,
		dateRangeActivityDate: undefined,
		dateRangeExpiryDate: undefined,
		area: undefined,
		address: undefined,
		status: undefined
	},
	searchFormItems: [
		{
			field: "auditStatus",
			span: 6,
			label: "活动状态",
			class: "w-100",
			required: false,
			component: "Dict",
			props: {
				showAll: true,
				placeholder: "请选择状态",
				dictType: "activity_audit_status",
				type: "radio"
			},
			listeners: {
				change: (v: any) => {
					handleQuery()
				}
			}
		},
		{
			field: "isClose",
			span: 6,
			label: "结束状态",
			class: "w-100",
			required: false,
			component: "Dict",
			props: {
				showAll: true,
				placeholder: "请选择状态",
				dictType: "sys_close_status",
				type: "radio"
			},
			listeners: {
				change: (v: any) => {
					handleQuery()
				}
			}
		},
		{
			field: "dateRangeActivityDate",
			label: "活动日期",
			class: "w-100",
			span: 6,
			required: false,
			component: "D",
			placeholder: "请选择活动日期",
			props: {
				type: "daterange",
				valueFormat: "YYYY-MM-DD",
				rangeSeparator: "-",
				startPlaceholder: "开始日期",
				endPlaceholder: "结束日期"
			},
			listeners: {
				change: (v: any) => {
					queryParams.value.dateRangeActivityDate = v
				}
			}
		},
		{
			field: "dateRangeExpiryDate",
			label: "截止日期",
			span: 6,
			class: "w-100",
			required: false,
			component: "D",
			placeholder: "请选择截止日期",
			props: {
				type: "daterange",
				valueFormat: "YYYY-MM-DD",
				rangeSeparator: "-",
				startPlaceholder: "开始日期",
				endPlaceholder: "结束日期"
			},
			listeners: {
				change: (v: any) => {
					queryParams.value.dateRangeExpiryDate = v
				}
			}
		},
		{
			field: "title",
			label: "活动标题",
			span: 6,
			class: "w-100",
			required: false,
			placeholder: "请输入活动标题",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		},
		{
			field: "category",
			label: "活动类别",
			class: "w-100",
			span: 6,
			required: false,
			placeholder: "请选择活动类别",
			data: () => categoryColumns.value,
			component: "vs",
			props: {
				showAll: true
			},
			listeners: {
				change: () => {
					handleQuery()
				}
			}
		},
		{
			field: "address",
			span: 6,
			label: "活动地点",
			class: "w-100",
			required: false,
			placeholder: "请输入活动地点",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		}
	] as any,
	permission: permissionNames.AmActivityActivity,
	handleBtns: [],
	handleFuns: {
		handleUpdate: () => {
			const row = tableRef.value.getSelected()
			handleUpdate(row)
		},
		handleDelete: () => {
			const rows = tableRef.value.getSelecteds()
			handleDelete(rows)
		}
	},
	customBtns: [],
	tableListFun: apis.amActivity.activityApi.listActivity,
	getEntityFun: apis.amActivity.activityApi.getActivity,
	deleteEntityFun: apis.amActivity.activityApi.delActivity,
	exportUrl: apis.amActivity.activityApi.exportUrl,
	exportName: "Activity",
	modalTitle: "活动信息",
	formItems: [
		{
			field: "title",
			label: "活动标题",
			class: "w-100",
			required: true,
			placeholder: "请输入活动标题",
			component: "I",
			span: 12
		},
		{
			field: "category",
			label: "活动类别",
			class: "w-100",
			required: true,
			placeholder: "请选择活动类别",
			data: () => categoryColumns.value,
			component: "vs",
			span: 12
		},
		{
			field: "peopleMax",
			type: "number",
			label: "人数上限",
			class: "w-100",
			required: true,
			placeholder: "请输入活动人数上限",
			component: "I",
			span: 12
		},
		{
			field: "contact",
			label: "联系方式",
			class: "w-100",
			required: true,
			placeholder: "请输入联系方式",
			component: "I",
			span: 12
		},
		{
			field: "activityDate",
			label: "活动日期",
			class: "w-100",
			required: true,
			component: "D",
			props: {
				placeholder: "请选择活动日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			},
			span: 12
		},
		{
			field: "expiryDate",
			label: "截止日期",
			class: "w-100",
			required: true,
			component: "D",
			props: {
				placeholder: "请选择截止报名日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			},
			span: 12
		},
		{
			field: "area",
			label: "活动方式",
			class: "w-100",
			required: true,
			component: "vs",
			data: () => {
				return [
					{ label: "线上活动", value: "线上活动" },
					{ label: "线下活动", value: "线下活动" }
				]
			},
			props: {
				type: "radio"
			},
			span: 12
		},

		{
			show: (v) => {
				return v.area === "线下活动"
			},
			field: "address",
			label: "详细地点",
			class: "w-100",
			required: true,
			placeholder: "请输入活动地点",
			component: "I",
			span: 24
		},
		{
			field: "needCost",
			label: "是否付费",
			class: "w-100",
			required: true,
			component: "vs",
			data: () => {
				return [
					{ label: "活动不需要缴费", value: "0" },
					{ label: "需要缴费(填写费用说明)", value: "1" }
				]
			},
			props: {
				type: "radio"
			},
			span: 24
		},
		{
			show: (v) => {
				return v.needCost === "1"
			},
			field: "cost",
			label: "费用说明",
			class: "w-100",
			required: true,
			placeholder: "活动费用说明，例如免费、AA制或者多少元",
			component: "I",
			type: "textarea",
			props: {
				rows: 5
			}
		},
		{
			field: "content",
			label: "活动详情",
			placeholder: "请介绍活动详情",
			class: "w-100",
			required: true,
			component: "I",
			type: "textarea",
			props: {
				rows: 5
			}
		},
		{
			field: "images",
			label: "图片上传",
			class: "w-100",
			component: "VU",
			props: {
				uploadUrl: "/oss/upload/activity",
				prefixUrl: "/oss/preview/",
				limit: 8
			}
		}
	] as any,
	resetForm: () => {
		form.value = emptyFormData.value
	},
	labelWidth: "80px",
	emptyFormData: {
		activityId: undefined,
		title: undefined,
		category: undefined,
		content: undefined,
		needCost: 0,
		cost: undefined,
		peopleMax: 50,
		isHead: 0,
		isHot: 0,
		isSys: 1,
		activityDate: undefined,
		expiryDate: undefined,
		auditStatus: undefined,
		contact: "",
		area: "线上活动",
		address: "",
		images: ""
	}
})
const { queryParams, emptyFormData } = toRefs(opts)
const form = ref<any>(emptyFormData.value)
const categoryColumns = ref<any[]>([])

/** 搜索按钮操作 */
function handleQuery() {
	addDateRange(queryParams.value, queryParams.value.dateRangeActivityDate, "ActivityDate")
	addDateRange(queryParams.value, queryParams.value.dateRangeExpiryDate, "ExpiryDate")
	tableRef.value?.search()
}

/** 重置按钮操作 */
function resetQuery() {
	queryParams.value.dateRangeActivityDate = [] as any
	addDateRange(queryParams.value, queryParams.value.dateRangeActivityDate, "ActivityDate")
	queryParams.value.dateRangeExpiryDate = [] as any
	addDateRange(queryParams.value, queryParams.value.dateRangeExpiryDate, "ExpiryDate")
	//
}

/** 修改按钮操作 */
function handleUpdate(row: any) {
	tableRef.value.defaultHandleFuns.handleUpdate("", row)
}

/** 删除按钮操作 */
function handleDelete(rows: any[]) {
	tableRef.value.defaultHandleFuns.handleDelete("", rows)
}

/** 提交按钮 */
function submitForm() {
	apis.amActivity.activityApi.addOrUpdateActivity(form.value).then(() => {
		handleQuery()
	})
}

const detailType = ref<"A" | "D">("A")
const detailModalTitle = computed(() => {
	return detailType.value === "A" ? "活动审核" : "活动详情"
})
const detailData = ref<any>({})
const auditStatus = ref("1")

function handleAudit(row: any) {
	detailType.value = "A"
	apis.amActivity.activityApi.getActivity(row.activityId).then((res) => {
		detailData.value = res.data
		auditStatus.value = detailData.value.auditStatus == 0 ? "1" : "2"

		detailModalRef.value.show()
	})
}
const applyDetailTotal = ref(0)
const applyDetailList = ref<any[]>([])
const qrCode = ref({
	logo: "/media/yzxyh.png",
	size: 200
})
function handleDetail(row: any) {
	detailType.value = "D"
	apis.amActivity.activityApi.getActivity(row.activityId).then((res) => {
		detailData.value = res.data
		auditStatus.value = detailData.value.auditStatus == 0 ? "1" : "2"
		if (detailData.value.auditStatus == "1" || detailData.value.auditStatus == "3") {
		}
		detailModalRef.value.show()
	})
	apis.amActivity.activityApi
		.listApply({
			activityId: row.activityId,
			auditStatus: "1",
			pageNum: 1,
			pageSize: 10000,
			orderByColumn: "auditStatus",
			isAsc: "ascending"
		})
		.then((res: any) => {
			applyDetailTotal.value = res.total
			applyDetailList.value = res.rows
		})
}

function submitDetail() {
	if (detailType.value === "D") {
		return
	}
	if (detailType.value === "A") {
		apis.amActivity.activityApi
			.auditActivity(detailData.value.activityId, auditStatus.value)
			.then(() => {
				detailModalRef.value.hide()
				handleQuery()
			})
	}
}

function handleDownloadQr(id: string) {
	let myImg = document.querySelector("#" + id + " img") as HTMLImageElement
	let url = myImg?.src
	let a = document.createElement("a")
	a.href = url
	a.download = `${detailData.value?.title || ""}——${id == "apply-qr" ? "报名" : "签到"}二维码` //下载图名称
	a.click()
}
function handleClose(row: any) {
	message
		.confirm("是否确认关闭 [" + row.title + "] 的活动，结束后不可恢复？")
		.then(() => {
			apis.amActivity.activityApi.closeActivity(row.activityId).then(() => {
				handleQuery()
				message.msgSuccess("关闭成功")
			})
		})
		.catch(() => {
			//
		})
}
function handleTop(row: any) {
	if (row.auditStatus == "0" || row.auditStatus == "2") {
		message.msgWarning("活动未审核通过")
		return
	}
	if (row.isClose == "1") {
		message.msgWarning("活动已关闭")
		return
	}
	const text = row.isHead === "0" ? "取消置顶" : "置顶"
	message
		.confirm("确认要" + text + " [" + row.title + "] 的活动？")
		.then(() => {
			apis.amActivity.activityApi.topActivity(row.activityId, row.isHead).then(() => {
				message.msgSuccess(text + "成功")
				handleQuery()
			})
		})
		.catch(() => {
			row.isHead = row.isHead === "0" ? "1" : "0"
		})
}

function handleHot(row: any) {
	if (row.auditStatus == "0" || row.auditStatus == "2") {
		message.msgWarning("活动未审核通过")
		return
	}
	if (row.isClose == "1") {
		message.msgWarning("活动已关闭")
		return
	}
	const text = row.isHot === "0" ? "取消热门" : "热门"
	message
		.confirm("确认要" + text + " [" + row.title + "] 的活动？")
		.then(() => {
			apis.amActivity.activityApi.topActivity(row.activityId, row.isHot).then(() => {
				message.msgSuccess(text + "成功")
				handleQuery()
			})
		})
		.catch(() => {
			row.isHot = row.isHot === "0" ? "1" : "0"
		})
}
const activity = ref<any>({})
const currrentApplyId = ref()
const applyAuditList = ref<any[]>([])
function handleAplly(row: any) {
	activity.value = row
	currrentApplyId.value = row.activityId
	handleQueryApply()
}

const applyAudit = ref("")
const applyCost = ref("")
const applyAttend = ref("")

function handleQueryApply() {
	const params = {
		activityId: currrentApplyId.value,
		auditStatus: applyAudit.value,
		costStatus: applyCost.value,
		isAttend: applyAttend.value,
		pageNum: 1,
		pageSize: 10000,
		orderByColumn: "auditStatus",
		isAsc: "ascending"
	}

	apis.amActivity.activityApi.listApply(params).then((res: any) => {
		applyAuditList.value = res.rows
		applyModalRef.value.show()
	})
}
function handleApllyAudit(item: any, status: string) {
	const text = status === "1" ? "通过" : "拒绝"
	message.confirm("确认要" + text + " [" + item.name + "] 的报名？").then(() => {
		apis.amActivity.activityApi.auditApply(item.applyId, status).then(() => {
			message.msgSuccess(text + "报名成功")
			handleQueryApply()
			handleQuery()
		})
	})
}

function handleApllyCost(item: any) {
	message.prompt("请输入费用(0表示未付费)", "确认付费").then((val: any) => {
		console.log("val", val, item.applyId)
		apis.amActivity.activityApi.auditCost(item.applyId, val.value).then(() => {
			message.msgSuccess("付费审核成功")
			handleQueryApply()
			handleQuery()
		})
	})
}

const formatUrl = (url: string) => {
	if (url) {
		url = import.meta.env.VITE_APP_BASE_API + url
	}
	return url
}
function loadCategory() {
	apis.system.categoryApi.getActivityCategory().then((res) => {
		categoryColumns.value = []
		if (res.data.length > 0) {
			res.data.forEach((v: any) => {
				categoryColumns.value.push({ label: v.categoryName, value: v.categoryId })
			})
		}
	})
}

function init() {
	loadCategory()
}

onMounted(init)
</script>
<template>
	<div class="app-container">
		<VbDataTable
			ref="tableRef"
			keyField="activityId"
			:columns="opts.columns"
			:handle-perm="opts.permission"
			:handle-btns="opts.handleBtns"
			:handle-funs="opts.handleFuns"
			:search-form-items="opts.searchFormItems"
			:custom-btns="opts.customBtns"
			:remote-fun="opts.tableListFun"
			:get-entity-fun="opts.getEntityFun"
			:delete-entity-fun="opts.deleteEntityFun"
			:export-url="opts.exportUrl"
			:export-name="opts.exportName"
			:modal="modalRef"
			:reset-form-fun="opts.resetForm"
			v-model:form-data="form"
			:query-params="queryParams"
			:check-multiple="true"
			:reset-search-form-fun="resetQuery"
			:custom-search-fun="handleQuery">
			<template #auditStatus="{ row }">
				<div class="d-flex justify-content-around">
					<DictTag type="activity_audit_status" :value="row.auditStatus"></DictTag>
					<DictTag class="ml-2" type="sys_close_status" :value="row.isClose"></DictTag>
				</div>
			</template>
			<template #activityDate="{ row }">
				<span :class="{ 'text-danger': dayjs(row.activityDate).isBefore(dayjs(new Date())) }">
					{{ dayjs(row.activityDate).format("YYYY-MM-DD") }}
				</span>
			</template>
			<template #expiryDate="{ row }">
				<span :class="{ 'text-danger': dayjs(row.expiryDate).isBefore(dayjs(new Date())) }">
					{{ dayjs(row.expiryDate).format("YYYY-MM-DD") }}
				</span>
			</template>
			<template #address="{ row }">
				<span v-if="row.area == '线上活动'" class="text-info">{{ row.area }}</span>
				<span v-else>{{ row.address }}</span>
			</template>
			<template #isHead="{ row }">
				<el-switch
					v-model="row.isHead"
					active-value="1"
					inactive-value="0"
					@change="handleTop(row)"></el-switch>
			</template>
			<template #isHot="{ row }">
				<el-switch
					v-model="row.isHot"
					active-value="1"
					inactive-value="0"
					@change="handleHot(row)"></el-switch>
			</template>
			<template #actions="{ row }">
				<vb-tooltip v-if="row.auditStatus == 1" content="详情 " placement="top">
					<el-button
						link
						type="primary"
						@click="handleDetail(row)"
						v-hasPermission="permissionNames.AmActivityActivityClose">
						<template #icon>
							<VbIcon icon-name="notepad" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="row.auditStatus == 1" content="报名审核 " placement="top">
					<el-button
						link
						type="warning"
						@click="handleAplly(row)"
						v-hasPermission="permissionNames.AmActivityActivityApply">
						<template #icon>
							<VbIcon icon-name="check-circle" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-else content="审核" placement="top">
					<el-button
						link
						:type="row.auditStatus == 0 ? 'success' : 'danger'"
						@click="handleAudit(row)"
						v-hasPermission="permissionNames.AmActivityActivityAudit">
						<template #icon>
							<VbIcon icon-name="check-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="row.isClose == 0" content="关闭 " placement="top">
					<el-button
						link
						type="info"
						@click="handleClose(row)"
						v-hasPermission="permissionNames.AmActivityActivityClose">
						<template #icon>
							<VbIcon icon-name="cross-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="row.isClose == 0" content="修改" placement="top">
					<el-button
						link
						type="primary"
						@click="handleUpdate(row)"
						v-hasPermission="permissionNames.AmActivityActivityEdit">
						<template #icon>
							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="row.auditStatus == 0 || row.isClose == 1" content="删除" placement="top">
					<el-button
						link
						type="primary"
						@click="handleDelete([row])"
						v-hasPermission="permissionNames.AmActivityActivityRemove">
						<template #icon>
							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
			</template>
		</VbDataTable>
		<VbModal
			v-model:modal="modalRef"
			:title="opts.modalTitle"
			:form-data="form"
			:form-items="opts.formItems"
			:label-width="opts.labelWidth"
			append-to-body
			@confirm="submitForm"></VbModal>
		<VbModal
			modalBodyClass="detail-modal"
			v-model:modal="detailModalRef"
			:title="detailModalTitle"
			@confirm="submitDetail"
			append-to-body>
			<template #body>
				<el-row :gutter="20">
					<el-col :span="24">
						<dl>
							<dt>活动标题：</dt>
							<dd>{{ detailData.title }}</dd>
						</dl>
					</el-col>
					<el-col :span="12">
						<dl>
							<dt>活动类别：</dt>
							<dd>{{ detailData.categoryName }}</dd>
						</dl>
					</el-col>
					<el-col :span="12">
						<dl>
							<dt>人数上限</dt>
							<dd>{{ detailData.peopleMax }}</dd>
						</dl>
					</el-col>
					<el-col :span="24">
						<dl>
							<dt>费用说明：</dt>
							<dd>{{ detailData.cost }}</dd>
						</dl>
					</el-col>
					<el-col :span="12">
						<dl>
							<dt>活动日期：</dt>
							<dd>{{ detailData.activityDate }}</dd>
						</dl>
					</el-col>
					<el-col :span="12">
						<dl>
							<dt>截止日期：</dt>
							<dd>{{ detailData.expiryDate }}</dd>
						</dl>
					</el-col>
					<el-col :span="24">
						<dl>
							<dt>活动地点：</dt>
							<dd>
								<span v-if="detailData.area == '线下活动'">
									{{ detailData.address }}
								</span>
								<span v-else>线上活动</span>
							</dd>
						</dl>
					</el-col>
					<el-col :span="24">
						<dl>
							<dt>活动详情：</dt>
							<dd>{{ detailData.content }}</dd>
						</dl>
					</el-col>
				</el-row>
				<div class="d-flex justify-content-center my-3" v-if="detailData.images">
					<VbImagePreview :src="detailData.images" :prefixSrc="'/oss/preview/'"></VbImagePreview>
				</div>
				<div v-if="detailType == 'A'" class="d-flex justify-content-center">
					<vb-select
						v-model="auditStatus"
						label="审核结果"
						type="radio"
						:data="[
							{ label: '通过', value: '1' },
							{ label: '拒绝', value: '2' }
						]"></vb-select>
				</div>
				<div
					v-else-if="
						detailType == 'D' && detailData.auditStatus != '0' && applyDetailList.length > 0
					"
					class="d-flex flex-column align-item-center py-5">
					<div class="d-flex justify-content-center mb-3">
						<div class="px-15 d-flex flex-column" id="apply-qr">
							<div class="w-100 text-center text-primary fs-4">
								<span class="fw-bold">报名</span>
								二维码
							</div>
							<vue-qr
								ref="qrCode"
								:text="`AD@${detailData.activityId}`"
								:logoSrc="qrCode.logo"
								:logoCornerRadius="`50%`"
								color-dark="#0e9489"
								:width="qrCode.size"
								:height="qrCode.size"></vue-qr>
							<el-button type="primary" @click="handleDownloadQr('apply-qr')">保存</el-button>
						</div>
						<div class="px-15 d-flex flex-column" id="attend-qr">
							<div class="w-100 text-center text-primary fs-4">
								<span class="fw-bold">签到</span>
								二维码
							</div>
							<vue-qr
								ref="qrCode"
								:text="`AA@${detailData.activityId}`"
								:logoSrc="qrCode.logo"
								color-dark="#0e9489"
								:width="qrCode.size"
								:height="qrCode.size"></vue-qr>
							<el-button type="primary" @click="handleDownloadQr('attend-qr')">保存</el-button>
						</div>
					</div>
					<div class="text-danger text-center mb-3">注意：二维码需要小程序内部扫码功能扫码</div>

					<div class="d-flex align-items-center justify-content-between mb-2">
						<dl class="mb-0">
							<dt>报名详情：</dt>
							<dd>{{ applyDetailTotal }} 人报名</dd>
						</dl>
						<el-button class="me-2" type="primary" @click="handleAplly(detailData)">
							审核报名
						</el-button>
					</div>
					<div class="d-flex flex-wrap px-20">
						<VbSymbol
							class="position-relative m-1"
							:size="50"
							shape="circle"
							:src="formatUrl(v.avatar)"
							:text="v.name"
							v-for="(v, i) in applyDetailList"
							:key="i"></VbSymbol>
					</div>
				</div>
			</template>
		</VbModal>
		<VbModal
			modalBodyClass="apply-modal"
			v-model:modal="applyModalRef"
			title="报名详情"
			:shown-event="
				() => {
					detailModalRef.hide()
				}
			"
			append-to-body>
			<template #body>
				<div class="w-100 px-10">
					<div v-if="applyAuditList.length">人员数量：{{ applyAuditList.length }} 人</div>
					<el-row :gutter="20" class="apply-detail">
						<el-col :span="8" class="justify-content-center">
							<vb-select
								v-model="applyAudit"
								type="radio"
								@change="handleQueryApply"
								:data="[
									{ label: '全部', value: '' },
									{ label: '未审核', value: '0' },
									{ label: '已审核', value: '1' }
								]"></vb-select>
						</el-col>
						<el-col :span="8" class="justify-content-center">
							<vb-select
								v-model="applyCost"
								type="radio"
								@change="handleQueryApply"
								:data="[
									{ label: '全部', value: '' },
									{ label: '未付费', value: '0' },
									{ label: '已付费', value: '1' }
								]"></vb-select>
						</el-col>
						<el-col :span="8" class="justify-content-center">
							<vb-select
								v-model="applyAttend"
								type="radio"
								@change="handleQueryApply"
								:data="[
									{ label: '全部', value: '' },
									{ label: '未签到', value: '0' },
									{ label: '已签到', value: '1' }
								]"></vb-select>
						</el-col>
					</el-row>
					<el-row :gutter="15">
						<el-col :span="12" class="p-2" v-for="(v, i) in applyAuditList" :key="i">
							<div
								class="d-flex align-items-center p-2"
								style="border-radius: 8px; background-color: #f2f2f2">
								<div class="w-80px d-flex justify-content-center me-2">
									<VbSymbol
										class="position-relative m-1"
										:size="50"
										shape="circle"
										:src="formatUrl(v.avatar)"
										:text="v.name"></VbSymbol>
								</div>
								<div class="w-100 d-flex flex-column">
									<span class="d-flex align-items-center">
										<span class="me-2">{{ v.name }}</span>
										<el-tag v-if="v.auditStatus == '0'">待审核</el-tag>
										<template v-else-if="v.auditStatus == '1'">
											<el-tag type="success" v-if="activity.needCost == '1' && v.costStatus == '1'">
												付费：{{ v.cost }}
											</el-tag>
											<el-tag
												type="danger"
												v-else-if="activity.needCost == '1' && v.costStatus == '0'">
												未付费
											</el-tag>
											<el-tag type="success" v-else>已审核</el-tag>
											<el-tag type="success" class="ms-1" v-if="v.isAttend == '1'">已签到</el-tag>
										</template>

										<el-tag type="danger" v-else-if="v.auditStatus == '2'">已拒绝</el-tag>
									</span>
									<span class="my-1">{{ v.createTime }}</span>
								</div>
								<div
									v-if="activity.isClose == '0'"
									class="d-flex w-80px pe-2 flex-column justify-content-around">
									<el-button
										type="primary"
										size="small"
										class="my-1 mx-0 w-100"
										@click="handleApllyAudit(v, '1')"
										v-if="v.auditStatus != '1'">
										通过
									</el-button>
									<el-button
										type="danger"
										size="small"
										class="my-1 mx-0 w-100"
										@click="handleApllyAudit(v, '2')"
										v-if="v.auditStatus != '2'">
										拒绝
									</el-button>
									<el-button
										type="success"
										size="small"
										class="my-1 mx-0 w-100"
										@click="handleApllyCost(v)"
										v-if="activity.needCost == '1' && v.auditStatus == '1'">
										付费
									</el-button>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</template>
		</VbModal>
	</div>
</template>

<style>
.apply-detail .el-radio {
	margin-right: 12px;
}
</style>