activity/src/view/AEROSPACE2023/page6.vue

<template>
  <skeleton title="报名申请" titleLine="">
    <div class="bg bg6 animate__animated animate__backInUp">
      <p class="duanluo">
        姓名：
        <input v-model="Data.name" type="text" class="save" />
      </p>
    </div>
    <div class="bg bg6 animate__animated animate__backInUp">
      <p class="duanluo">
        电话：
        <input v-model="Data.tel" type="text" class="save" />
      </p>
    </div>
    <div class="bg bg6 animate__animated animate__backInUp">
      <p class="duanluo">
        单位：
        <input v-model="Data.university" type="text" class="save" />
      </p>
    </div>
    <div class="bg bg6 animate__animated animate__backInUp">
      <p class="duanluo">
        职务：
        <input v-model="Data.type" type="text" class="save" />
      </p>
    </div>

    <van-button
      style="margin-top: 7.9vh"
      type="primary"
      block
      color="#61BFE9"
      @click="toBaoMing"
    >
      我要报名
    </van-button>
  </skeleton>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { showLoadingToast, closeToast, showToast } from 'vant';
import skeleton from './skeleton.vue';
const Data = ref({});
function toBaoMing() {
  const oriData = new FormData();
  oriData.append('operateId', window.$originData.orginParames.operateId);
  oriData.append('name', Data.value.name);
  oriData.append('phone', Data.value.tel);
  oriData.append('university', Data.value.university);
  oriData.append('type', Data.value.type);
  showLoadingToast({
    message: '报名中...',
    forbidClick: true,
    duration: 0,
  });
  axios({
    method: 'post',
    url: 'https://topic.smcic.net/operate/enroll/store',
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    data: oriData,
  })
    .then(r => {
      console.log(r);
      Data.value = {};
      closeToast();
      showToast('报名成功');
    })
    .catch(() => {
      closeToast();
      showToast('报名失败');
    });
}
</script>
<style lang="scss">
// 动画库
@import url(./sass/animation.scss);
@import url(./sass/base.scss);
.bg6 {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  margin-top: 19px;
  margin-bottom: 19px;

  .duanluo {
    text-align: left !important;
    text-indent: 0 !important;
    font-size: 18px !important;

    .save {
      outline: none !important;
      border: none;
      width: calc(100% - 4em);
      display: inline-block;
      background-color: #ffffff00;
    }
  }
}
</style>