反馈页面提交

src/i18n/lang/en-us.ts

@@ -19,6 +19,7 @@ export const lang: langType = {
   },
   feedback: {
     upload: 'Upload',
+    uploadsuccess: 'Upload Success',
     title: 'Feedback',
     title1: 'Problem Description',
     title2: 'Expected Solution',

src/i18n/lang/zh-cn.ts

@@ -19,6 +19,7 @@ export const lang: langType = {
   },
   feedback: {
     upload: '上传',
+    uploadsuccess: '上传成功',
     title: '用户反馈',
     title1: '问题描述',
     title2: '期望解决方案',

src/views/feedback/mcSubmit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mcSubmit">
-    <van-form @submit="onSubmit" style="background: #fff">
+    <van-form @submit="onSubmit" ref="submits" style="background: #fff">
       <van-cell-group style="margin: none" inset>
         <div class="myTitle required"><span class="number">01</span>{{ t('feedback.title1') }}</div>
         <van-field
@@ -15,7 +15,9 @@
           type="textarea"
           maxlength="500"
           show-word-limit
-          :rules="[{ required: true, message: t('feedback.settext') + t('feedback.title1') }]"
+          :rules="[
+            { name: 'problemDesc', validator: validator, trigger: 'onChange', message: t('feedback.settext') + t('feedback.title1') },
+          ]"
           :placeholder="t('feedback.settext')"
         />
         <van-field class="uploadercell" name="uploader" label-align="top">
@@ -47,7 +49,7 @@
           type="textarea"
           maxlength="500"
           show-word-limit
-          :rules="[{ required: true, message: t('feedback.settext') + t('feedback.title2') }]"
+          :rules="[{ name: 'solution', validator: validator, trigger: 'onChange', message: t('feedback.settext') + t('feedback.title2') }]"
           :placeholder="t('feedback.settext')"
         />
         <van-field class="uploadercell" name="uploader" label-align="top">
@@ -224,6 +226,7 @@
   import { showToast } from 'vant';
   const propsOptions = props.columns;
   const loading = ref(false);
+  const submits = ref(null);
   const setObjId = ref({
     hardwareOptionId: null,
     softwareOptionId: null,
@@ -281,7 +284,7 @@
   // 全部选项选择完毕后，会触发 finish 事件
   const onFinish = ({ selectedOptions }, b) => {
     showPicker.value.city = false;
-    console.log('onFinish',cascaderValue.value);
+    console.log('onFinish', cascaderValue.value);
     formData.value.city = selectedOptions.map((option) => option.text).join('/');
   };
   const onConfirm = ({ selectedOptions, selectedValues }, b) => {
@@ -326,6 +329,10 @@
     }
     return true;
   }
+  function validator(value, rule) {
+    let isOk = Boolean(formData.value[rule.name] || (formData.value[`${rule.name}Imgs`] && formData.value[`${rule.name}Imgs`].length > 0));
+    return isOk;
+  }
   //照片上传事件方法
   function clzpAfterRead(file) {
     // 上传状态提示开启
@@ -350,10 +357,15 @@
         if (data.code == 200) {
           // 上传状态提示关闭
           file.url = data.data;
-          file.file = '';
+          file.file = file.file;
           file.content = '';
           file.status = 'done';
           showToast('上传成功！');
+          setTimeout(() => {
+            console.log('problemDesc', submits.value);
+            // submits.value.validate('problemDesc')();
+            // submits.value.validate('solution');
+          }, 1000);
         }
         console.log('formData.faultImg', formData, file);
       })

src/views/feedback/pcSubmit.vue

@@ -19,9 +19,10 @@
           list-type="picture-card"
           :before-upload="beforeUpload"
           @preview="handlePreview"
+          @change="fileChange"
         >
           <div>
-            <PlusOutlined style="color:#D9D9D9" color="#D9D9D9" />
+            <PlusOutlined style="color: #d9d9d9" color="#D9D9D9" />
             <!-- <div style="margin-top: 8px">{{ t('feedback.upload') }}</div> -->
           </div>
         </a-upload>
@@ -40,7 +41,7 @@
       <a-form-item name="problemFile" style="margin-top: 2px">
         <a-upload v-model:file-list="formData.solutionImgs" action="/service/sale/upload/file" list-type="picture-card">
           <div>
-            <PlusOutlined style="color:#D9D9D9" color="#D9D9D9" />
+            <PlusOutlined style="color: #d9d9d9" color="#D9D9D9" />
             <!-- <div style="margin-top: 8px">{{ t('feedback.upload') }}</div> -->
           </div>
         </a-upload>
@@ -140,11 +141,14 @@
   import { useI18n } from 'vue-i18n';
   const { t, locale } = useI18n();
   const emit = defineEmits(['submit']);
-  watch(() => props.addres, (newValue, oldValue) => {
+  watch(
+    () => props.addres,
+    (newValue, oldValue) => {
       console.log('addreswatch', newValue);
       formData.value.country = newValue.country;
       formData.value.countries = newValue.mccountries;
-  });
+    },
+  );
   const formData = ref({
     problemDesc: '',
     problemDescImgs: [],
@@ -167,14 +171,32 @@
   const previewImage = ref('');
   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' }],
+    problemDesc: [
+      { name: 'problemDesc', validator: validatorFile, message: t('feedback.settext') + t('feedback.title1'), trigger: 'change' },
+    ],
+    solution: [{ name: 'solution', validator: validatorFile, 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' }],
   };
+  function validatorFile(_rule, value) {
+    let rule = _rule;
+    let isOk = Boolean(formData.value[rule.name] || (formData.value[`${rule.name}Imgs`] && formData.value[`${rule.name}Imgs`].length > 0));
+    if (isOk) {
+      return Promise.resolve();
+    } else {
+      return Promise.reject(rule.message);
+    }
+  }
+  function fileChange() {
+    formRef.value.validateFields(['problemDesc', 'solution']);
+  }
   const countryOption = countryList.map((ele) => {
-    return { value: ele.chinese, label: locale.value == 'en-us' ? ele.english : ele.chinese, english: locale.value == 'en-us' ? ele.chinese : ele.english };
+    return {
+      value: ele.chinese,
+      label: locale.value == 'en-us' ? ele.english : ele.chinese,
+      english: locale.value == 'en-us' ? ele.chinese : ele.english,
+    };
   });
   function filterOption(inputValue, option) {
     return (