cas_cloud_web/src/views/website/activity/activity.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>