PJob-prisma/components/CreateBox.vue

<style scoped>
@media screen and (min-width: 200px) and (max-width: 1200px) {
  .n-card-box {
    max-width: 100%;
    height: 50%;
    margin: auto;
  }
}
@media screen and (min-width: 1200px) {
  .n-card-box {
    max-width: 50%;
    height: 50%;
    margin: auto;
  }
}
.n-card-box .name {
  font-size: large;
  float: left;
}
.n-card-box .pay {
  font-size: large;
  color: red;
  float: right;
}
</style>

<template>
  <div>
    <n-button @click="showCreate = true" style="margin: auto" type="success"
      >增加数据</n-button
    >
    <n-modal v-model:show="showCreate">
      <n-card style="height: auto; width: auto">
        <template #header>
          兼职名称：
          <n-input
            v-model:value="jobname"
            type="text"
            placeholder="兼职名称"
            autosize
            style="min-width: 40%"
          >
          </n-input>
        </template>
        <template #header-extra>
          日薪：
          <n-input-number
            v-model:value="daypay"
            placeholder="日薪"
            style="max-width: 50%"
            :precision="0.5"
          />￥/天
        </template>
        <template #default>
          兼职描述：
          <n-input
            v-model:value="desc"
            type="textarea"
            placeholder="兼职描述"
          />
          <n-grid cols="1 200:2 600:4">
            <n-gi span="1">
              地点：
              <n-select
                placeholder="区域"
                class="selection"
                v-model:value="select_area"
                :options="options_area"
              />
            </n-gi>
            <n-gi span="1">
              时间：
              <n-select
                placeholder="时间"
                max-tag-count="responsive"
                class="selection"
                v-model:value="select_time"
                :options="options_time"
              />
            </n-gi>

            <n-gi span="1">
              类型:
              <n-select
                placeholder="类型"
                class="selection"
                max-tag-count="responsive"
                v-model:value="select_type"
                :options="options_type"
              />
            </n-gi>
            <n-gi span="2">
              工作时间：<br />
              <n-input
                v-model:value="time"
                type="text"
                placeholder="如：8:00 - 9:00"
                autosize
                style="min-width: 60%"
              >
              </n-input
            ></n-gi>
            <n-gi span="2">
              封面图片Url：<br />
              <n-input
                v-model:value="img"
                type="text"
                placeholder="封面图片URL"
                autosize
                style="min-width: 80%"
              >
              </n-input
            ></n-gi>
            <n-gi>
              顶置：
              <n-switch v-model:value="pin" />
            </n-gi>
          </n-grid>
        </template>
        <template #footer>
          <n-button type="info" style="float: left" @click="submit" ghost round
            >提交</n-button
          >
          <n-button
            type="error"
            style="float: right"
            @click="showCreate = false"
            ghost
            round
            >关闭</n-button
          >
          <br />

          <br />
          <hr />
          <h3 style="text-align: center">预览</h3>
          <n-card
            class="n-card-box"
            style="width: 600px"
            :title="jobname"
            preset="card"
            size="huge"
            role="dialog"
            aria-modal="true"
          >
            <template #header-extra>
              <text class="pay">{{ daypay }}￥/天 </text>
            </template>
            <template #default>
              <p v-html="desc"></p>
            </template>
            <template #cover>
              <n-image object-fit="contain" :src="img" preview-disabled lazy />
            </template>
            <template #footer> 工作时间：{{ time }} </template>
          </n-card>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>
<script setup lang="ts">
import { useMessage } from "naive-ui";
import type { Respoense } from "~/types";

const message = useMessage();
const config = useRuntimeConfig();
const showCreate = ref(false);

const jobname = ref("默认名称");

const desc = ref("默认描述");

const daypay = ref(0);

const pin = ref(false);
const time = ref("9:00-19:00");

const img = ref("/Pjob.jpg");

const select_area = ref("in");
const select_time = ref("noon");
const select_type = ref("in");
const options_area = ref([
  {
    label: "校内",
    value: "in",
    disabled: false,
  },
  {
    label: "校外",
    value: "out",
  },
]);
const options_time = ref([
  {
    label: "全天",
    value: "all",
    disabled: false,
  },
  {
    label: "中午",
    value: "noon",
    disabled: false,
  },
  {
    label: "上午",
    value: "moning",
    disabled: false,
  },
  {
    label: "下午",
    value: "afnon",
    disabled: false,
  },
  {
    label: "晚上",
    value: "night",
  },
]);
const options_type = ref([
  {
    label: "室内",
    value: "in",
    disabled: false,
  },
  {
    label: "室外",
    value: "out",
  },
]);
const emit = defineEmits(["create"]);
async function submit() {
  const response: string = await $fetch("/api/job/create", {
    method: "post",
    body: {
      name: jobname.value,
      worktime: select_time.value,
      place: select_area.value,
      pin: pin.value,
      data: {
        desc: desc.value,
        img: img.value,
        time: time.value,
        pay: daypay.value,
      },
    },
  });

  const res = JSON.parse(response);
  if (res.code) {
    message.info("创建了 " + jobname.value + " " + JSON.stringify(res));
    showCreate.value = false;
    emit("create");
  } else {
    message.error("Faild create" + jobname.value + ".Because " + res.value);
  }
}
</script>