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

<template>
  <div class="pcSubmit">
    <a-form layout="vertical" :model="formData" ref="formRef" :rules="rules">
      <a-form-item name="problemDesc">
        <div class="myTitle required" slot="label"><span class="number">01</span>{{ t('feedback.title1') }}</div>
        <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" v-model:value="formData.problemDesc" :placeholder="t('feedback.settext')" />
      </a-form-item>
      <a-form-item name="problemFile" style="margin-top: 32px">
        <a-upload
          v-model:file-list="formData.problemDescImgs"
          accept=".jpg,.png,.mp4"
          action="/service/sale/upload/file"
          list-type="picture-card"
          :before-upload="beforeUpload"
        >
          <div>
            <PlusOutlined />
            <div style="margin-top: 8px">{{ t('feedback.upload') }}</div>
          </div>
        </a-upload>
        <div class="tips">{{ t('feedback.fileTips') }}</div>
      </a-form-item>
      <a-form-item name="solution">
        <div class="myTitle required" slot="label"><span class="number">02</span>{{ t('feedback.title2') }}</div>
        <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" v-model:value="formData.solution" :placeholder="t('feedback.settext')" />
      </a-form-item>
      <a-form-item name="problemFile" style="margin-top: 32px">
        <a-upload v-model:file-list="formData.solutionImgs" action="/service/sale/upload/file" list-type="picture-card">
          <div>
            <PlusOutlined />
            <div style="margin-top: 8px">{{ t('feedback.upload') }}</div>
          </div>
        </a-upload>
        <div class="tips">{{ t('feedback.fileTips') }}</div>
      </a-form-item>
      <a-form-item name="industryOptionId">
        <div class="myTitle required" slot="label"><span class="number">03</span>{{ t('feedback.title3') }}</div>
        <a-select
          key="industryOptionId"
          v-model:value="formData.industryOptionId"
          :placeholder="t('feedback.setselcet')"
          :options="propsOptions.industryOptionId"
        />
      </a-form-item>
      <a-form-item name="hardwareOptionId">
        <div class="myTitle required" slot="label"><span class="number">04</span>{{ t('feedback.title4') }}</div>
        <a-select
          key="hardwareOptionId"
          v-model:value="formData.hardwareOptionId"
          :placeholder="t('feedback.setselcet')"
          :options="propsOptions.hardwareOptionId"
        />
      </a-form-item>
      <a-form-item name="softwareOptionId">
        <div class="myTitle required" slot="label"><span class="number">05</span>{{ t('feedback.title5') }}</div>
        <a-select
          key="softwareOptionId"
          v-model:value="formData.softwareOptionId"
          :placeholder="t('feedback.setselcet')"
          :options="propsOptions.softwareOptionId"
        />
      </a-form-item>
      <a-form-item>
        <div class="myTitle" slot="label"><span class="number">06</span>{{ t('feedback.title6') }}</div>
        <a-input v-model:value="formData.nickName" :placeholder="t('feedback.settext')" />
      </a-form-item>
      <a-form-item>
        <div class="myTitle" slot="label"><span class="number">07</span>{{ t('feedback.title61') }}</div>
        <a-input v-model:value="formData.phone" :placeholder="t('feedback.settext')" />
      </a-form-item>
      <a-form-item>
        <div class="myTitle" slot="label"><span class="number">08</span>{{ t('feedback.title7') }}</div>
        <a-select
          v-model:value="formData.country"
          :filterOption="filterOption"
          :options="countryOption"
          showSearch
          :placeholder="t('feedback.setselcet')"
        />
        <!-- <a-cascader v-model:value="formData.countries" :options="options" placeholder="Please select" /> -->
      </a-form-item>
      <a-form-item v-if="formData.country == '中国' || formData.country == 'China'">
        <div class="myTitle" slot="label"
          ><span class="number">{{ formData.country == '中国' || formData.country == 'China' ? '09' : '08' }}</span
          >{{ t('feedback.title71') }}</div
        >
        <a-cascader v-model:value="formData.countries" :options="options" :placeholder="t('feedback.setselcet')" />
      </a-form-item>
      <a-form-item>
        <div class="myTitle" slot="label"
          ><span class="number">{{ formData.country == '中国' || formData.country == 'China' ? '10' : '09' }}</span
          >{{ t('feedback.title8') }}</div
        >
        <van-rate color="#FADB14" size="30" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" :placeholder="t('feedback.setselcet')" />
      </a-form-item>
      <a-form-item>
        <div class="myTitle" slot="label"
          ><span class="number">{{ formData.country == '中国' || formData.country == 'China' ? '11' : '10' }}</span
          >{{ t('feedback.title9') }}</div
        >
        <a-input v-model:value="formData.scoreReason" :placeholder="t('feedback.settext')" />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button class="w-160px" style="background-color: #00b3ec" type="primary" size="large" @click="onSubmit">{{
          t('feedback.Submit')
        }}</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import cityList from './area.json';
  import countryList from './country.json';
  const props = defineProps(['formData', 'columns']);
  import { message, Upload } from 'ant-design-vue';
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  const emit = defineEmits(['submit']);
  // eslint-disable-next-line vue/no-setup-props-destructure
  const formData = ref({
    problemDesc: '',
    problemDescImgs: [],
    hardwareOptionId: null,
    softwareOptionId: null,
    industryOptionId: null,
    solution: '',
    solutionImgs: [],
    nickName: '',
    phone: '',
    score: 0,
    scoreReason: '',
    country: '',
    address: '',
    countries: [],
  });
  console.log('formData', formData);
  // eslint-disable-next-line vue/no-setup-props-destructure
  const propsOptions = props.columns;
  const formRef = ref(null);
  const rules = {
    problemDesc: [{ required: true, message: t('feedback.settext') + t('feedback.title1'), trigger: 'change' }],
    solution: [{ required: true, message: t('feedback.settext') + t('feedback.title2'), trigger: 'change' }],
    softwareOptionId: [{ required: true, message: t('feedback.setselcet') + t('feedback.title5'), trigger: 'change' }],
    industryOptionId: [{ required: true, message: t('feedback.setselcet') + t('feedback.title3'), trigger: 'change' }],
    hardwareOptionId: [{ required: true, message: t('feedback.setselcet') + t('feedback.title4'), trigger: 'change' }],
  };
  const countryOption = countryList.map((ele) => {
    return { value: ele.chinese, label: ele.chinese, english: ele.english };
  });
  function filterOption(inputValue, option) {
    return (
      option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 ||
      option.english.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
    );
  }
  const options = cityList.map((ele) => {
    return {
      value: ele.name,
      label: ele.name,
      children: ele.city.map((element) => {
        return {
          value: element.name,
          label: element.name,
        };
      }),
    };
  });
  const beforeUpload = (file) => {
    console.log('beforeUpload', file);
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4';
    if (!isJpgOrPng) {
      message.error(t('feedback.fileTips'));
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt2M && (file.type === 'image/jpeg' || file.type === 'image/png')) {
      message.error(t('feedback.fileTips'));
      return false;
    }
    if (!isLt50M && file.type === 'video/mp4') {
      message.error(t('feedback.fileTips'));
      return Upload.LIST_IGNORE;
    }
    return file.type === 'video/mp4' ? isLt50M && isJpgOrPng : isJpgOrPng && isLt2M;
  };
  const onSubmit = () => {
    console.log('values', formRef.value.validate());
    formRef.value
      .validate()
      .then(() => {
        emit('submit', formData.value);
        console.log('values', formData);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
</script>

<style lang="scss" scoped>
  .myTitle {
    position: relative;
    margin-bottom: 14px;
    margin-top: 32px;
    .number {
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      color: #00b3ec;
    }
    span {
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 19px;
      margin-right: 7px;
    }
  }
  .tips {
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
    line-height: 16px;
    margin-top: 8px;
  }
  .required {
    &::before {
      display: inline-block;
      margin-inline-end: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
</style>