aftermarket-h5/src/views/feedback/index.vue

<template>
  <div class="feedback">
    <div class="feedbackTop">
      <img src="/src/assets/image/logo_4dage.svg" alt="" />
      <div class="title">用户反馈</div>
    </div>
    <div class="submit bg-white">
      <mcSubmit class="submitMc" ref="submitMc" :columns="columns" @submit="onSubmit" />
      <pcSubmit class="submitPc" ref="submitPc" :columns="columns" @submit="onSubmit" />
    </div>
  </div>
</template>

<script lang="ts" setup name="HomeSubmit">
  // import { showLoadingToast, closeToast } from 'vant';
  import { computed, reactive, unref, ref, onMounted } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { showToast, showSuccessToast } from 'vant';
  import mcSubmit from './mcSubmit.vue';
  import pcSubmit from './pcSubmit.vue';
  import axios from 'axios';
  // import useAxiosApi from '/@/utils/useAxiosApi';
  // import { Toast } from '@nutui/nutui';
  import { getAllByTypeId, feedbackAdd } from '/@/api/feedback';
  // import { setLang } from '/@/i18n';
  // import { useI18n } from 'vue-i18n';
  const emit = defineEmits(['setActive']);
  const submitPc = ref(null);
  const submitMc = ref(null);
  const userStore = useUserStore();
  const wxOpenId = computed(() => {
    return userStore.getWxOpenId;
  });
  const columns = reactive({
    industryOptionId: [],
    softwareOptionId: [],
    hardwareOptionId: [],
  });
  async function onSubmit(formData, setObjId = {}) {
    console.log('feedbackAdd', formData);
    // return new Promise((resolve) => {
    let apiData = {
      ...formData,
      address: formData.countries ? `${formData.country},${formData.countries}` : formData.country,
      problemDescImgs: formData.problemDescImgs.map((ele) => {
        return ele.response ? ele.response.data : ele.url;
      } ),
      solutionImgs: formData.solutionImgs.map((ele) => {
        return ele.response ? ele.response.data : ele.url;
      } ),
    };
    const { response } = await feedbackAdd(apiData);
    let data = unref(response);
    showSuccessToast('提交成功');
    formData.problemDesc = '';
    formData.problemDescImgs = [];
    formData.solution = '';
    formData.solutionImgs = [];
    formData.hardwareOptionId = '';
    formData.softwareOptionId = '';
    formData.industryOptionId = '';
    formData.nickName = '';
    formData.phone = '';
    formData.country = '';
    formData.address = '';
    formData.countries = [];
    formData.score = 5;
    formData.scoreReason = '';
    setObjId.hardwareOptionId = '';
    setObjId.softwareOptionId = '';
    setObjId.industryOptionId = '';
  }
  onMounted(async () => {
    let industryRes = await getAllByTypeId(1);
    columns.industryOptionId = industryRes.data.map((ele) => {
      return {
        text: ele.nameCn,
        label: ele.nameCn,
        value: ele.id,
      };
    });
    let hardwareRes = await getAllByTypeId(2);
    columns.hardwareOptionId = hardwareRes.data.map((ele) => {
      return {
        text: ele.nameCn,
        label: ele.nameCn,
        value: ele.id,
      };
    });
    let softwareRes = await getAllByTypeId(3);
    columns.softwareOptionId = softwareRes.data.map((ele) => {
      return {
        text: ele.nameCn,
        label: ele.nameCn,
        value: ele.id,
      };
    });
  });
</script>

<style lang="scss" scoped>
  .feedback {
    background: #e5edf9;
    min-height: 100vh;
    min-width: 100vw;
    padding: 16px;
    .submit {
      max-width: 1088px;
      padding: 64px 48px;
      margin: 0 auto;
      .submitMc {
        display: none;
      }
      .submitPc {
        display: block;
      }
    }
    @media screen and (max-width: 450px) {
      ::v-deep .submit {
        padding: 24px 0;
        .submitPc {
          display: none;
        }
        .submitMc {
          display: block;
        }
      }
    }
    /* 在屏幕宽度小于 800px 时应用的样式 */
    .feedbackTop {
      max-width: 1088px;
      margin: 0 auto;
      padding-top: 14px;
      width: 100%;
      .logo {
        height: 34px;
        width: auto;
        margin: 32px 0 16px 0;
      }
      .title {
        font-size: 40px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #042d5c;
        line-height: 47px;
        letter-spacing: 8px;
        text-align: center;
        height: 120px;
        background: url(../../assets/image/bg_pc.png) no-repeat;
        margin-top: 30px;
        background-size: 1088px 120px;
      }
    }
    @media screen and (max-width: 450px) {
      ::v-deep .feedbackTop {
        .title {
          margin-top: 32px;
          background: url(../../assets/image/bg_mc.png) no-repeat;
          background-size: 100% auto;
          background-position-y: -14px;
          font-size: 24px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          height: 76px;
          font-weight: bold;
          color: #042d5c;
          line-height: 28px;
        }
        .submit {
          margin: 24px;
        }
      }
    }
  }
</style>