550 lines
14 KiB
Vue
550 lines
14 KiB
Vue
<template>
|
|
<div class="activity" v-loading="loading">
|
|
<el-dialog title="发布活动" v-model="dialogVisible" width="380px">
|
|
<div class="contact-admin">
|
|
<qrcode-vue :value="`tel:${mobile}`" :size="300" level="H" />
|
|
<p class="description">请联系管理员，电话：{{ mobile }}</p>
|
|
</div>
|
|
</el-dialog>
|
|
<div
|
|
v-if="!state.banner"
|
|
class="_banner"
|
|
style="height: 394px; background-color: #ccc"
|
|
>
|
|
<div class="_publish conter1000">
|
|
<el-button @click="dialogVisible = true">发布活动</el-button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="_banner"
|
|
style="height: 394px; background-size: cover"
|
|
:style="{ backgroundImage: `url(${state.banner})` }"
|
|
>
|
|
<div class="_publish conter1000">
|
|
<el-button @click="publicActivity">发布活动</el-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<router-view />
|
|
</div>
|
|
|
|
<div class="box conter1000" v-show="!isShow">
|
|
<el-row :gutter="10" v-if="false">
|
|
<el-col :span="5">
|
|
<el-select
|
|
v-model="queryParams.value"
|
|
placeholder="活动分类"
|
|
></el-select>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-select
|
|
v-model="queryParams.value2"
|
|
placeholder="活动状态"
|
|
></el-select>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-input v-model="queryParams.value3" placeholder="请输入关键词">
|
|
<template #append>
|
|
<el-button>搜索</el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-col>
|
|
</el-row>
|
|
<div v-loading="loading">
|
|
<div
|
|
class="_item pointer"
|
|
v-for="item in dataList"
|
|
:key="item.id"
|
|
@click="handleDetail(item)"
|
|
>
|
|
<div class="_l">
|
|
<el-image
|
|
style="width: 358px; height: 220px; vertical-align: middle"
|
|
:src="item.image"
|
|
fit="fill"
|
|
></el-image>
|
|
</div>
|
|
<div class="_r" style="position: relative">
|
|
<p class="text_hidden">{{ item.title }}</p>
|
|
<div class="_time">活动时间：{{ item.beginTime }}</div>
|
|
<div class="_time">收费金额：{{ item.amount }}</div>
|
|
<div class="_time">联系人：{{ item.contact }}</div>
|
|
<div class="_time">联系方式：{{ item.contactMobile }}</div>
|
|
<!-- <div class="_info"> -->
|
|
<!-- <span class="fl"
|
|
><span class="x_blue">{{ item.user }}</span> 人报名</span
|
|
> -->
|
|
<!-- <el-button class="fr x_btns" v-if="item.enrollFlag" disabled
|
|
>已报名</el-button
|
|
> -->
|
|
<!-- v-else-if="item.status == 2" -->
|
|
<!-- <el-button
|
|
class="x16 x_blue x_border_blue"
|
|
v-else
|
|
style="
|
|
border-radius: 0;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 0;
|
|
"
|
|
@click="handleClickSignUp(item.id, $event)"
|
|
>报名</el-button
|
|
> -->
|
|
<!-- <el-button
|
|
v-else
|
|
class="fr x16"
|
|
style="border-radius: 0"
|
|
type="info"
|
|
disabled
|
|
>已结束</el-button
|
|
> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
v-model:page="queryParams.pageNum"
|
|
v-model:limit="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</div>
|
|
<div class="box2 conter1000" v-show="isShow">
|
|
<webBreadcrumb
|
|
v-model:isShow="isShow"
|
|
v-model:breadcrumbTitle="breadcrumbTitle"
|
|
></webBreadcrumb>
|
|
<div class="_head">
|
|
<div class="_l">
|
|
<!-- src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" -->
|
|
<el-image
|
|
style="width: 358px; height: 100%; vertical-align: middle"
|
|
:src="selectedActivity.image"
|
|
fit="cover"
|
|
></el-image>
|
|
</div>
|
|
<div class="_r">
|
|
<p class="_title text_hidden">
|
|
{{ selectedActivity.title }}
|
|
</p>
|
|
<p class="_brief text_hidden">
|
|
活动简介：{{ selectedActivity.description }}
|
|
</p>
|
|
<p class="_classif">活动分类：教育</p>
|
|
<p class="_time">
|
|
活动时间：{{ selectedActivity.beginTime }} ~
|
|
{{ selectedActivity.finishTime }}
|
|
</p>
|
|
<p class="_place">活动地点：{{ selectedActivity.address }}</p>
|
|
<p class="_place">联系人：{{ selectedActivity.contact }}</p>
|
|
<p class="_place">联系方式：{{ selectedActivity.contactMobile }}</p>
|
|
<p class="_user">
|
|
<el-button
|
|
v-if="selectedActivity.enrollFlag"
|
|
class="x_btns"
|
|
disabled
|
|
>已报名</el-button
|
|
>
|
|
<el-button
|
|
v-else
|
|
class="fr x16 x_blue x_border_blue"
|
|
style="border-radius: 0"
|
|
@click="handleClickSignUp(selectedActivity.id, $event)"
|
|
>报名</el-button
|
|
>
|
|
<!-- <span class="_num"><span class="x_blue">16</span> 人报名</span> -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="_info">
|
|
<div class="_l">
|
|
<p class="_tit">活动详情</p>
|
|
<div class="_txt" v-html="selectedActivity.content"></div>
|
|
</div>
|
|
<div class="_r">
|
|
<WebContact />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<webFooter></webFooter>
|
|
|
|
<el-dialog title="活动报名" v-model="showSignUp">
|
|
<el-form
|
|
:model="signUpForm"
|
|
:rules="signUpRules"
|
|
ref="signUpFormRef"
|
|
labelWidth="100px"
|
|
>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input
|
|
placeholder="请输入姓名"
|
|
v-model="signUpForm.name"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input
|
|
placeholder="请输入手机号"
|
|
v-model="signUpForm.phone"
|
|
maxlength="11"
|
|
oninput="value=value.replace(/[\D]+/,``)"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="12">
|
|
<el-col :span="12">
|
|
<el-form-item label="年龄" prop="age">
|
|
<el-input-number
|
|
placeholder="请输入年龄"
|
|
v-model="signUpForm.age"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="性别" prop="gender">
|
|
<el-radio-group v-model="signUpForm.gender">
|
|
<el-radio label="1">男</el-radio>
|
|
<el-radio label="2">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-row justify="end">
|
|
<el-button @click="showSignUp = false">取消</el-button>
|
|
<el-button @click="submitSignUp" type="primary">报名</el-button>
|
|
</el-row>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup name="Activity">
|
|
import QrcodeVue from "qrcode.vue";
|
|
import { banner } from "@/api/website/home/index";
|
|
import request from "@/utils/request";
|
|
import webFooter from "@/components/webFooter/index.vue";
|
|
import { reactive, toRefs } from "vue";
|
|
import WebContact from "@/components/webContact";
|
|
// import { activitysList } from "@/api/admin/enterprise";
|
|
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
|
|
import {
|
|
signUpActivity,
|
|
activitysList,
|
|
activityDetail,
|
|
} from "@/api/website/activity";
|
|
import { ElMessage } from "element-plus";
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
// import { omit } from "lodash";
|
|
// import FieldOptions from "@/views/components/FieldOptions";
|
|
// import CityOptions from "@/views/components/CityOptions";
|
|
// import webReleaseActive from "@/components/webReleaseActive/index.vue";
|
|
|
|
const dialogVisible = ref(false);
|
|
const loading = ref(true);
|
|
const total = ref(1);
|
|
const state = reactive({
|
|
banner: "",
|
|
});
|
|
// const data = reactive({
|
|
// activityForm: {},
|
|
// });
|
|
|
|
const queryParams = reactive({});
|
|
let dataList = ref([]);
|
|
const isShow = ref(false);
|
|
|
|
let breadcrumbTitle = reactive({
|
|
id: null,
|
|
title: "",
|
|
twoTitle: "",
|
|
});
|
|
|
|
/** 查询 */
|
|
function getList() {
|
|
loading.value = true;
|
|
activitysList(queryParams).then((resp) => {
|
|
dataList.value = resp.rows;
|
|
total.value = resp.total;
|
|
});
|
|
}
|
|
const data = reactive({
|
|
selectedActivity: {},
|
|
activityForm: {},
|
|
});
|
|
const { selectedActivity } = toRefs(data);
|
|
|
|
async function handleDetail(item) {
|
|
breadcrumbTitle.id = item.id;
|
|
breadcrumbTitle.title = "活动报名";
|
|
breadcrumbTitle.twoTitle = "活动报名详情";
|
|
// selectedActivity.value = dataList.value.find((el) => el.id == item.id);
|
|
const resp = await activityDetail(item.id);
|
|
selectedActivity.value = resp.data;
|
|
isShow.value = !isShow.value;
|
|
}
|
|
|
|
const mobile = ref("");
|
|
function config(params) {
|
|
return request({
|
|
url: "/v1/config",
|
|
params,
|
|
});
|
|
}
|
|
const publicActivity = async () => {
|
|
// const { data } = await config({ key: "mobile" });
|
|
const data = { mobile: { name: "联系电话", value: "18156053255" } };
|
|
mobile.value = data.mobile.value;
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
getList();
|
|
|
|
onMounted(() => {
|
|
banner({ locals: "活动报名" })
|
|
.then((resp) => {
|
|
state.banner = resp.data[0].images;
|
|
loading.value = false;
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
});
|
|
|
|
const showSignUp = ref(false);
|
|
const signUpForm = reactive({});
|
|
const signUpFormRef = ref();
|
|
const signUpRules = reactive({
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: "请输入姓名！",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
age: [
|
|
{
|
|
required: true,
|
|
message: "请输入年龄！",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
gender: [
|
|
{
|
|
required: true,
|
|
message: "请选择性别！",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: "请输入手机号！",
|
|
trigger: "blur",
|
|
},
|
|
{
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
message: "手机号格式不正确",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
});
|
|
const reset = () => {
|
|
for (const key in signUpForm) {
|
|
if (Object.hasOwnProperty.call(signUpForm, key)) {
|
|
// const item = signUpForm[key];
|
|
delete signUpForm[key];
|
|
}
|
|
}
|
|
if (signUpFormRef.value) {
|
|
signUpFormRef.value.resetFields();
|
|
}
|
|
};
|
|
|
|
const handleClickSignUp = (id, e) => {
|
|
e.stopPropagation();
|
|
console.log(id, e);
|
|
if (!getToken()) {
|
|
return ElMessage.error("您当前未登录");
|
|
}
|
|
reset();
|
|
signUpForm.activityId = id;
|
|
showSignUp.value = true;
|
|
};
|
|
|
|
const submitSignUp = async () => {
|
|
await signUpFormRef.value.validate();
|
|
await signUpActivity(signUpForm);
|
|
ElMessage.success("报名成功");
|
|
const resp = await activityDetail(selectedActivity.value.id);
|
|
selectedActivity.value = resp.data;
|
|
showSignUp.value = false;
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.activity {
|
|
background-color: #f2f6ff;
|
|
.contact-admin {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.description {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
._banner {
|
|
position: relative;
|
|
._publish {
|
|
position: relative;
|
|
.el-button {
|
|
position: absolute;
|
|
top: 171px;
|
|
height: 60px;
|
|
right: 46px;
|
|
background-color: #ffc600;
|
|
color: #fff;
|
|
border: 0;
|
|
border-radius: 0;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.box {
|
|
position: relative;
|
|
padding-top: 20px;
|
|
.el-input {
|
|
::v-deep(.el-input__inner) {
|
|
border-right: 0;
|
|
}
|
|
::v-deep(.el-input-group__append) {
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
border-top-color: #0054ff;
|
|
border-right-color: #0054ff;
|
|
border-bottom-color: #0054ff;
|
|
background-color: #0054ff;
|
|
}
|
|
}
|
|
._item {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
._r {
|
|
flex: 1;
|
|
padding: 36px 20px 0 16px;
|
|
background-color: #fff;
|
|
height: 220px;
|
|
p {
|
|
margin-top: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 30px;
|
|
}
|
|
._time {
|
|
margin-bottom: 7px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
._info {
|
|
.fl {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
span {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box2 {
|
|
._head {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
._r {
|
|
padding-left: 18px;
|
|
p {
|
|
margin: 11px 0;
|
|
}
|
|
._title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 30px;
|
|
}
|
|
._brief,
|
|
._classif,
|
|
._time,
|
|
._place {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
._brief {
|
|
line-height: 24px;
|
|
}
|
|
._user {
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
._num {
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
.x_blue {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
._info {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
margin-bottom: 35px;
|
|
._l {
|
|
width: 662px;
|
|
margin-right: 14px;
|
|
padding: 14px 40px 0 20px;
|
|
background-color: #fff;
|
|
._tit {
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: #0054ff;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
._txt {
|
|
margin-bottom: 45px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
._r {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|