ai-ground-quasar/src/pages/feedback/index.vue

<template>
  <q-page >
    <div class="top-img animate__animated animate__fadeIn">
      <img src="../../assets/image/mine-bg.png" alt="mine" />
      <div class="txt">
        <div style="font-size: 20px">Comment Feedback</div>
        <div style="font-size: 60px">留言反馈</div>
      </div>
    </div>

    <div class="info animate__animated animate__fadeIn">
      <div class="item">
        <div class="txt">
          <span class="tx1">姓名</span>
          <span class="tx2">
            <n-input
              style="width: 300px"
              v-model:value="name"
              type="text"
              placeholder="请输入真实姓名"
          /></span>
        </div>
      </div>

      <div class="item">
        <div class="txt">
          <span class="tx1">手机号</span>
          <span class="tx2"
            ><n-input
              style="width: 300px"
              v-model:value="phone"
              type="text"
              placeholder="请输入真实手机号，以便我们联系您"
          /></span>
        </div>
      </div>
      <div class="item">
        <div class="txt" style="height: 200px">
          <span class="tx1" style="height: 170px"
            >留言内容&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
          <span class="tx2"
            ><n-input
              style="width: 780px; height: 170px"
              type="textarea"
              maxlength="200"
              v-model:value="content"
              show-count
          /></span>
        </div>
      </div>
      <n-button @click="submit" class="create" quaternary>
        <div style="color: #fff">提交</div>
      </n-button>
    </div>
    <!-- 修改用户名 -->
    <n-modal
      v-model:show="showModal"
      @close="closeModal"
      :mask-closable="false"
    >
      <n-card
        style="width: 900px; text-align: center; height: 450px"
        :title="'提交成功'"
        :bordered="false"
        size="huge"
        role="dialog"
      >
      <div

          style="
            display: flex;
            align-items: center;

            flex-direction: column;
          "
        >

          <img
            style="width: 200px; height: 200px; margin-top: 20px"
            src="../../assets/image/login/succicon.png"
          />

        </div>
        <n-button @click="closeModal" class="create" quaternary>
          <div style="color: #fff">确定</div>
        </n-button>
      </n-card>
    </n-modal>
  </q-page>
</template>

<script setup>
import { ref, defineProps, computed, onBeforeMount, watch } from "vue";
import { LocalStorage, SessionStorage } from "quasar";
import { processError, processSuccess } from "../../utils/message";
import { useRoute, useRouter } from "vue-router";
import { UserApi } from "src/api";
const router = useRouter();
const showModal = ref(false);
const title = ref("");
const errMsg = ref("");
const name = ref("");
const phone = ref("");
const content = ref("");
const closeModal = () => {
  showModal.value = false;
};

// 修改手机号
const submit = async () => {
  errMsg.value = "";
  // 验证
  if (!name.value) {
    processError('请输入姓名')
    return;
  }
  if (!phone.value) {
    processError('请输入手机号')
    return;
  }
  if (!content.value) {
    processError('请输入留言内容')
    return;
  }
  const data = {
    domain: "fontree",
    name: name.value,
    phone: phone.value,
    content: content.value,
    feedbackType: "comment_feedback",
  };
  await UserApi.submitFeedBack(data).then((res) => {
    if (res.status === 0) {
      processSuccess("提交成功");
      showModal.value = true;
      // 清空数据
      name.value = "";
      phone.value = "";
      content.value = "";
    } else {
      processError(res.msg);
    }
  });
};

onBeforeMount(() => {});
</script>
<style scoped lang="scss">
.q-page {
  background: #19191a;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.top-img {
  width: 100%;
  height: 340px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .txt {
    position: absolute;
    bottom: 0%;
    left: 43%;
    font-weight: bolder;
    color: #fff;
    text-align: center;
    div {
      margin-bottom: 10px;
    }
  }
}
.create {
  margin-top: 40px;
  width: 260px;
  height: 55px;
  background: linear-gradient(260deg, #c448b8, #591df5);
  border-radius: 6px;
  color: #fff;
  font-weight: bolder;
  font-size: 18px;
  margin-bottom: 5px;
}
.info {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, #39273c, #000000);
  .item {
    margin: 26px 0 0 32px;
    width: 977px;
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 10px;
    background: #212121;
    font-size: 18px;

    .txt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: #bebebe;
      }
      .tx1 {
        padding-right: 30px;
        display: flex;
        align-items: center;
        min-width: 120px;
        border-right: 1px solid #707070;
      }
      .tx2 {
        flex: 1;
        padding-left: 30px;
      }
    }
    span {
      color: #c348b8;
      cursor: pointer;
    }
  }
}
.content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-top: 65px;
  color: #bebebe;
}
.input-box {
  width: 370px;
  margin-left: 35px;
  padding-bottom: 0;
}
.account-box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-top: 30px;

  .account {
    color: #bebebe;
    transform: translateX(-120%);
  }
  .input-box {
    width: 370px;
    padding-bottom: 0;
  }
}
.code-btn {
  margin-left: 20px;
  background: linear-gradient(to right, #591df5, #c448b8);
  color: #fff;
  font-weight: bold;
  border: 8px;
  height: 45px;
  min-width: 125px;
}
:deep(.n-input) {
  background-color: #212121;
  --n-border-focus: #212121 !important;
  --n-border-hover: #212121 !important;
  --n-caret-color: #212121 !important;
}
:deep(.n-input__suffix) {
  display: none;
}
:deep(.n-input .n-input__border) {
  border: 0;
}
// 更改placeholder的颜色
:deep(.n-input__placeholder) {
  color: #7e7e7e;
}
:deep(.n-input__textarea-el) {
  color: #7e7e7e;
}
:deep(.n-input__input-el) {
  color: #7e7e7e;
}
</style>