QiuShou-kiosk/src/views/feedback.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title :type="5" />
        <div class="detail">
          <div class="back" @click="$router.go(-1)"></div>

          <div class="info">
            <n-input
              v-model:value="feedBackContent"
              type="textarea"
              autosize
              placeholder="请填入内容，5-500字"
              style="min-height: 25rem"
            />

            <n-space align="center" style="padding: 1.25rem" justify="center">
              <n-input
                v-model:value="nickName"
                size="large"
                type="text"
                placeholder="昵称"
              />
              <n-input
                v-model:value="contact"
                size="large"
                type="text"
                placeholder="联系方式"
              />
              <n-input
                v-model:value="verifyCode"
                size="large"
                type="text"
                placeholder="请填入图形验证码"
              />
              <img
                class="txt-code"
                :src="imageCode"
                @click="handleCodeReload"
              />
            </n-space>
            <n-space align="center" justify="center" style="padding: 1.25rem">
              <n-button
                class="submit"
                size="large"
                :disabled="
                  feedBackContent.length === 0 ||
                  nickName.length === 0 ||
                  contact.length === 0 ||
                  verifyCode.length === 0
                "
                type="primary"
                @click="submit"
              >
                提交
              </n-button>
            </n-space>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useFeedBackStore } from "../store/feedback";
import { useRouter } from "vue-router";
import { useMessage } from "naive-ui";
window.$message = useMessage();

const router = useRouter();
const feedBackStore = useFeedBackStore();

const imageCode = ref(
  `${import.meta.env.VITE_API_URL}/show/getRandCode?t=` + Date.now()
);

const feedBackContent = ref("");
const nickName = ref("");
const contact = ref("");
const verifyCode = ref("");

const submit = async () => {
  try {
    const data = {
      name: nickName.value,
      content: feedBackContent.value,
      phone: contact.value,
      randCode: verifyCode.value,
    };
    const res = await feedBackStore.sendFeedback(data);
    console.log("res", res);
    if (res.isOK) {
      window.$message.success("提交成功!");
      router.go(-1);
    } else {
      window.$message.warning(res.msg);
    }
  } catch (error) {}
};
const handleCodeReload = () => {
  const url = imageCode.value.split("?");
  imageCode.value = url[0] + "?=" + Date.now();
};
</script>

<style lang="scss" scoped>
:deep(.n-input) {
  font-size: 1rem;
}
.detail {
  --main-show-case-background: #ddd5d5;
  --main-detail-margin: 30px;
  --main-detail-padding: 30px;
  // box-shadow: var(--main-box-shadow);
  margin: var(--main-detail-margin);
  margin-bottom: 0;
  flex: 1;
  border-radius: 13px;
  background-color: transparent;
  padding: 32px 48px 64px 48px;
  background-image: var(--main-detail-background-img);
  background-size: cover;
  background-position: top 100%;
  background-repeat: no-repeat;

  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  .back {
    background-image: url("/img/back_arrow.png");
    width: 120px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 12px;
  }
  .info {
    max-width: 1069px;
    margin: 0 auto;
    font-size: 20px;
  }
  .show-case {
    max-width: 1069px;
    height: 547px;
    background: var(--main-show-case-background);
  }
  .submit {
    font-size: 1.25rem;
    padding: 25px 50px;
    border-radius: 1.1875rem;
  }
  .txt-code {
    vertical-align: middle;
    cursor: pointer;
  }
}
:deep(.detail .info .n-input--textarea) {
  --n-font-size: 1.25rem !important;
  padding: 20px;
  border-radius: 19px;
}
</style>