PJob-prisma/components/Jobshow.vue

<style scoped>
.selection {
  width: 100%;
  margin: auto;
}
.n-card {
  max-width: 350px;
  height: 280px;
  margin: auto;
}
.n-card .name {
  font-size: large;
  float: left;
}
.n-card .pay {
  font-size: large;
  color: red;
  float: right;
}
@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-grid cols="1 200:2 600:4">
      <n-gi span="1">
        <n-select
          placeholder="区域"
          class="selection"
          v-model:value="select_area"
          :options="options_area"
          @update:value="GetJob"
        />
      </n-gi>
      <n-gi span="1">
        <n-select
          placeholder="时间"
          max-tag-count="responsive"
          class="selection"
          v-model:value="select_time"
          :options="options_time"
          @update:value="GetJob"
        />
      </n-gi>
      <n-gi span="1">
        <n-select
          placeholder="类型"
          class="selection"
          v-model:value="select_type"
          :options="options_type"
          @update:value="GetJob"
        />
      </n-gi>
      <n-gi span="1">
        <n-select
          placeholder="时薪"
          class="selection"
          v-model:value="select_pay"
          :options="options_pay"
          @update:value="GetJob"
        />
      </n-gi>
    </n-grid>
  </div>
  <n-flex justify="space-around" size="small">
    <n-grid :x-gap="4" :y-gap="8" cols="1 400:1 600:2 900:4 1200:5 ">
      <n-gi v-for="job in jobs?.slice(0, count)">
        <n-card
          style="
            --n-box-shadow: 0 1px 2px 5px rgba(187, 187, 187, 0.5),
              0 3px 6px 0 rgba(0, 0, 0, 0.06),
              0 5px 12px 4px rgba(0, 0, 0, 0.04);
          "
          header-style="height:8px"
          content-style="height:32px"
          footer-style="height:40px"
          embedded
          hoverable
          @click="showWindow(job)"
        >
          <template #header>
            <text class="name">{{ job.name }}</text
            ><text class="pay">{{ job.data.pay }}￥/天</text>
          </template>
          <template #cover>
            <n-image
              object-fit="contain"
              :src="job.data.img"
              preview-disabled
              lazy
            />
          </template>
          <template style="height: 50px" #footer>
            工作时间：{{ job.data.time }}
            <br />
          </template>
        </n-card>
      </n-gi>
    </n-grid>
  </n-flex>
  <n-modal v-model:show="showModal">
    <n-card
      class="n-card-box"
      style="width: 600px"
      :title="show.name"
      preset="card"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra>
        <text class="pay">{{ show.data.pay }}￥/天 </text>
      </template>
      <template #default>
        <p v-html="show.data.desc"></p>
      </template>
      <template #cover>
        <n-image
          object-fit="contain"
          :src="show.data.img"
          preview-disabled
          lazy
        />
      </template>
      <template #footer>
        工作时间：{{ show.data.time }}
        <n-button
          type="error"
          style="float: right"
          @click="showModal = false"
          ghost
          round
          >关闭</n-button
        >
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import type { Job } from "~/types";

const config = useRuntimeConfig();
const showModal = ref(false);
const show = ref();

function showWindow(job: Job) {
  showModal.value = true;
  show.value = job;
}
const count = ref(10);
window.onscroll = function (ev) {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    if (count.value < 1000) count.value = count.value + 20;
  }
};

const select_area = ref("");
const select_time = ref("");
const select_type = ref("");
const select_pay = ref(0);
const options_area = ref([
  {
    label: "全部",
    value: "",
    disabled: false,
  },
  {
    label: "校内",
    value: "in",
    disabled: false,
  },
  {
    label: "校外",
    value: "out",
  },
]);
const options_time = ref([
  {
    label: "全天",
    value: "",
    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: "",
    disabled: false,
  },
  {
    label: "室内",
    value: "in",
    disabled: false,
  },
  {
    label: "室外",
    value: "out",
  },
]);
const options_pay = ref([
  {
    label: "全部",
    value: 0,
    disabled: false,
  },
  {
    label: ">50￥/D",
    value: 50,
    disabled: false,
  },
  {
    label: ">100￥/D",
    value: 100,
  },
]);
const { data: Jobs } = await useFetch(
  "api/job?area=" +
    select_area.value +
    "&type=" +
    select_type.value +
    "&time=" +
    select_time.value +
    "&pay=" +
    select_pay.value
);
const jobs = ref(JSON.parse(Jobs.value));
async function GetJob() {
  const { data: Jobs } = await useFetch(
    "api/job?area=" +
      select_area.value +
      "&type=" +
      select_type.value +
      "&time=" +
      select_time.value +
      "&pay=" +
      select_pay.value
  );
  jobs.value = JSON.parse(Jobs.value);
}
onMounted(async () => {
  // 初始化作品数据
  GetJob();
});
</script>