factoryDirector/src/components/Form/from.vue

<template>
  <el-dialog
    @close="closea"
    v-model="show"
    :show-close="false"
    width="25%"
    :lock-scroll="false"
  >
    <div class="width">
      <div class="toptitle">申请免费试用</div>
      <div class="topfont">请填写表单信息，我们团队将尽快与您联系</div>
    </div>
    <div class="formbox">
      <el-form :model="formLabelAlign">
        <el-form-item label="您的姓名">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="请填写您的真实姓名（必填）"
          />
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            v-model="formLabelAlign.corporation"
            placeholder="请填写公司真实名称"
          />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="formLabelAlign.email"
            placeholder="请填写您的邮箱地址"
          />
        </el-form-item>
        <!-- <el-form-item label="手机号">
              <el-input
                v-model="formLabelAlign.phone"
                placeholder="请填写您的手机号码"
              />
            </el-form-item> -->
        <el-form-item label="申请版本">
          <el-select
            v-model="formLabelAlign.type"
            placeholder="请选择您需要试用的版本（必填）"
          >
            <el-option
              v-for="(item, idx) in typeList.list"
              :key="idx"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="button" @click="apply">立即申请</div>
    </div>
  </el-dialog>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref, reactive, watch } from "vue";
import * as configApi from "../../api/config";
import { ElMessage } from "element-plus";
onMounted(() => {});
//表单数据
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
  corporation: "",
  email: "",
});
const props = defineProps({
  dialogTableVisible2: {
    default: false,
  },
});
const show = ref(false);
watch(
  () => props.dialogTableVisible2,
  (newVal) => {
    show.value = props.dialogTableVisible2;
  }
);

const emit = defineEmits(["todetails"], ["like"]);
const todetails = () => {
  emit("clos");
};
const islogin = ref(0);
if(localStorage.getItem("access_token")){
  islogin.value = 1
}
// show.value = props.dialogTableVisible2;
//发起试用申请
const apply = () => {
  if (islogin.value == 1) {
    applya();
  } else {
    ElMessage({
      message: "未登录",
      type: "error",
    });
  }
};

const applya = async () => {
  try {
    const { data } = await configApi.trial({
      realname: formLabelAlign.name,
      company_name: formLabelAlign.corporation,
      email: formLabelAlign.email,
      type: formLabelAlign.type,
    });
    show.value = false;
    todetails();
  } catch (error) {}
};
//关闭模态框
const closea = () => {
  todetails();
};
//申请试用类型
const typeList = reactive({
  list: [],
});
const type = async () => {
  try {
    const { data } = await configApi.trialType({});
    typeList.list = data;
  } catch (error) {}
};
onMounted(type);
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 350px !important;
}
.two {
  overflow: hidden;
}
:deep(.el-dialog) {
  --el-dialog-width: 520px !important;
}
:deep(.el-popup-parent--hidden) {
  width: 100% !important;
}
::v-deep(.el-form-item__label) {
  width: 83px !important;
}
.formbox {
  padding: 0 50px;
}

:deep(.el-popup-parent--hidden) {
  width: 100% !important;
}
.button {
  width: 420px;
  height: 44px;
  background: #0d0fff;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 44px;
  text-align: center;
  font-style: normal;
  margin-top: 48px;
  cursor: pointer;
  margin-bottom: 20px;
}
.width {
  width: 100%;
  padding: 20px 60px 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .image {
    width: 300px;
    height: 300px;
    background: rgba(125, 125, 157, 0.3);
    margin-top: 22px;
  }
  .bottom_font {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    margin-top: 18px;
  }
  .topfont {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
  }
  .toptitle {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #333333;
    line-height: 28px;
    text-align: center;
    font-style: normal;
  }
}
</style>