QiuShou-kiosk/src/views/feedback.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title />
        <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: 400px"
            />

            <n-space align="center" style="padding: 20px" 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="请填入图形验证码"
              />
            </n-space>
            <n-space align="center" justify="center" style="padding: 20px">
              <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 { watchEffect, ref } from "vue";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useInfoStore } from "../store/info";
import { useRouter } from "vue-router";
const router = useRouter();

const title = ref("detail");
const feedBackContent = ref("");
const nickName = ref("");
const contact = ref("");
const verifyCode = ref("");
watchEffect(() => {
  document.title = title.value;
});

const submit = () => {
  //to submit
  const data = {
    name: nickName.value,
    content: feedBackContent.value,
    contact: contact.value,
    code: verifyCode.value,
  };
  console.log("data", data);
  router.go(-1);
};
</script>

<style lang="scss" scoped>
:deep(.n-input) {
  font-size: 16px;
}
.detail {
  --main-show-case-background: #ddd5d5;
  --main-detail-margin: 1.875rem;
  --main-detail-padding: 1.875rem;
  // box-shadow: var(--main-box-shadow);
  margin: var(--main-detail-margin);
  margin-bottom: 0;
  flex: 1;
  border-radius: 0.8125rem;
  background-color: transparent;
  padding: 2rem 3rem 4rem 3rem;
  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: 7.5rem;
    height: 1.875rem;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 0.75rem;
  }
  .info {
    max-width: 66.8125rem;
    margin: 0 auto;
    font-size: 1.25rem;
  }
  .show-case {
    max-width: 66.8125rem;
    height: 34.1875rem;
    background: var(--main-show-case-background);
  }
  .submit {
    font-size: 20px;
    padding: 1.5625rem 3.125rem;
    border-radius: 3.75rem;
  }
}
:deep(.detail .info .n-input--textarea) {
  --n-font-size: 20px !important;
  padding: 1.25rem;
  border-radius: 1.875rem;
}
</style>