style

src/assets/app.css

@@ -17,4 +17,12 @@ p {
   --van-font-size-lg: 18px !important; */
   --van-primary-color: #00B3EC!important;
   --van-blue: #00B3EC!important;
+}
+.ant-upload-list-item-container {
+  height: 88px !important;
+  width: 88px !important;
+}
+.ant-upload-select-picture-card {
+  height: 88px !important;
+  width: 88px !important;
 }

src/views/feedback/mcSubmit.vue

@@ -188,7 +188,7 @@
           ><span class="number">{{ formData.country == '中国' || formData.country == 'China' ? '10' : '09' }}</span
           >{{ t('feedback.title8') }}</div
         >
-        <van-field name="rate" label="">
+        <van-field class="ratecell" name="rate" label="">
           <template #input>
             <van-rate size="30" color="#FADB14" void-color="#D9D9D9" :allow-half="true" v-model="formData.score" />
           </template>
@@ -206,7 +206,7 @@
           label=""
           :placeholder="t('feedback.settext')"
         />
-        <div style="margin: 54px 0 16px 0; background-color: #f5f5f5">
+        <div style="margin: 54px 0 24px 0; background-color: #f5f5f5">
           <van-button style="height: 44px" block color="#00B3EC" type="primary" native-type="submit"> 提交 </van-button>
         </div>
       </van-cell-group>
@@ -352,6 +352,7 @@
 
 <style lang="scss" scoped>
   .mcSubmit {
+    padding-top: 16px;
     .tips {
       font-size: 14px;
       font-family: Source Han Sans CN, Source Han Sans CN;
@@ -373,7 +374,7 @@
     }
     .myTitle {
       position: relative;
-      margin: 32px 0 15px 0;
+      margin: 48px 0 15px 0;
       // padding: 0 var(--van-cell-horizontal-padding);
       .number {
         font-size: 16px;
@@ -390,23 +391,26 @@
         margin-right: 7px;
       }
     }
-    ::v-deep .van-cell:after {
+    ::v-deep .uploadercell:after{
       display: none;
     }
-    ::v-deep .van-cell {
-      padding: 4px 16px;
-    }
-    ::v-deep .van-uploader__upload{
-      background-color: #fff;
-      border: 1px solid #e4e4e5;
-      border-radius: 5px;
+    ::v-deep .ratecell:after{
+      display: none;
     }
-    .zdycell {
-      border: 1px solid #e4e4e5;
-      border-radius: 5px;
+    ::v-deep .van-cell {
+      padding: 4px 0px;
     }
-    .uploadercell{
-      padding: 40px 0 0 0;
+    // ::v-deep .van-uploader__upload{
+    //   background-color: #fff;
+    //   border: 1px solid #e4e4e5;
+    //   border-radius: 5px;
+    // }
+    // .zdycell {
+    //   border: 1px solid #e4e4e5;
+    //   border-radius: 5px;
+    // }
+    .uploadercell {
+      padding: 20px 0 0 0;
     }
   }
 </style>

src/views/feedback/pcSubmit.vue

@@ -3,7 +3,7 @@
     <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-textarea :autoSize="{ minRows: 4, maxRows: 8 }" v-model:value="formData.problemDesc" :placeholder="t('feedback.settext')" />
       </a-form-item>
       <a-form-item name="problemFile" style="margin-top: 32px">
         <a-upload
@@ -12,17 +12,18 @@
           action="/service/sale/upload/file"
           list-type="picture-card"
           :before-upload="beforeUpload"
+          @preview="handlePreview"
         >
           <div>
             <PlusOutlined />
-            <div style="margin-top: 8px">{{ t('feedback.upload') }}</div>
+            <!-- <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-textarea :autoSize="{ minRows: 4, maxRows: 8 }" 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">
@@ -114,6 +115,7 @@
   import { PlusOutlined } from '@ant-design/icons-vue';
   import cityList from './area.json';
   import countryList from './country.json';
+  // import { createImgPreview } from '/@/components/Preview/index';
   const props = defineProps(['formData', 'columns']);
   import { message, Upload } from 'ant-design-vue';
   import { useI18n } from 'vue-i18n';
@@ -139,6 +141,7 @@
   console.log('formData', formData);
   // eslint-disable-next-line vue/no-setup-props-destructure
   const propsOptions = props.columns;
+  const previewImage = ref('');
   const formRef = ref(null);
   const rules = {
     problemDesc: [{ required: true, message: t('feedback.settext') + t('feedback.title1'), trigger: 'change' }],
@@ -187,6 +190,29 @@
     }
     return file.type === 'video/mp4' ? isLt50M && isJpgOrPng : isJpgOrPng && isLt2M;
   };
+  // const previewFile = (file) => {
+  //   console.log('file',file)
+  //   return file
+  // }
+  function getBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+  const handlePreview = async (file) => {
+    console.log('file', file);
+    file.preview = file.response.data;
+    window.open(file.response.data);
+    return
+    // createImgPreview({ imageList: [file.response.data] });
+  }
+  const preview = (file) => {
+    console.log('file', file);
+    return file;
+  }
   const onSubmit = () => {
     console.log('values', formRef.value.validate());
     formRef.value
@@ -205,7 +231,7 @@
   .myTitle {
     position: relative;
     margin-bottom: 14px;
-    margin-top: 32px;
+    margin-top: 48px;
     .number {
       font-size: 16px;
       font-family: Microsoft YaHei, Microsoft YaHei;