style

src/assets/app.css

@@ -17,6 +17,10 @@ p {
   --van-font-size-lg: 18px !important; */
   --van-primary-color: #00B3EC!important;
   --van-blue: #00B3EC!important;
+  --van-uploader-delete-background: red;
+  --primary-color: #00B3EC!important;
+  --van-blue: #00B3EC!important;
+  --van-uploader-delete-background: red!important;
 }
 .ant-upload-list-item-container {
   height: 90px !important;
@@ -25,4 +29,27 @@ p {
 .ant-upload-select-picture-card {
   height: 90px !important;
   width: 90px !important;
-}
+}
+.van-cell-group{
+  margin: 0 !important;
+  padding: var(--van-cell-group-inset-padding);
+}
+.ant-input-textarea-show-count::after{
+  position: absolute;
+  right: 3px;
+  bottom: -24px;
+}
+.ant-input:focus {
+  border-color: var(--van-primary-color);
+}
+.ant-input-focused {
+  border-color: var(--van-primary-color);
+}
+.ant-upload.ant-upload-select:not(.ant-upload-disabled):hover{
+  border-color: var(--van-primary-color)!important;
+}
+.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector {
+  border-color: var(--van-primary-color);
+}
+
+

src/views/feedback/index.vue

@@ -5,8 +5,8 @@
       <div class="title">{{ t('feedback.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" />
+      <mcSubmit class="submitMc" ref="submitMc" :addres="addres" :columns="columns" @submit="onSubmit" />
+      <pcSubmit class="submitPc" ref="submitPc" :addres="addres" :columns="columns" @submit="onSubmit" />
     </div>
   </div>
 </template>
@@ -34,6 +34,11 @@
   const wxOpenId = computed(() => {
     return userStore.getWxOpenId;
   });
+  const addres = ref({
+    country: '',
+    countries: [],
+    mccountries: '',
+  });
   const columns = reactive({
     industryOptionId: [],
     softwareOptionId: [],
@@ -47,10 +52,10 @@
       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;
-      } ),
+      }),
     };
     await feedbackAdd(apiData);
     // showSuccessToast('提交成功');
@@ -74,8 +79,13 @@
     setObjId.industryOptionId = '';
   }
   onMounted(async () => {
-    let address = await getDefaultAddress();
-    console.log('getDefaultAddress', address);
+    let { data } = await getDefaultAddress();
+    addres.value = {
+      country: data.country,
+      mccountries: data.province ? `${data.province}/${data.city}` : '',
+      countries: data.province ? [data.province, data.city] : [],
+    };
+    console.log('getDefaultAddress', addres.value);
     let industryRes = await getAllByTypeId(1);
     columns.industryOptionId = industryRes.data.map((ele) => {
       return {
@@ -109,7 +119,7 @@
     background: #e5edf9;
     min-height: 100vh;
     min-width: 100vw;
-    padding: 16px;
+    padding: 16px 16px 66px 16px;
     ::v-deep .van-rate__item {
       padding-right: 26px;
     }

src/views/feedback/mcSubmit.vue

@@ -215,12 +215,12 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import cityList from './area.json';
   import countryList from './country.json';
   import axios from 'axios';
   const areaList = ref({});
-  const props = defineProps(['columns']);
+  const props = defineProps(['columns', 'addres']);
   const emit = defineEmits(['submit']);
   const propsOptions = props.columns;
   const loading = ref(false);
@@ -229,6 +229,16 @@
     softwareOptionId: null,
     industryOptionId: null,
   });
+  watch(
+    () => props.addres,
+    (newValue, oldValue) => {
+      console.log('addreswatch', newValue);
+      formData.value.country = newValue.country;
+      formData.value.countries = newValue.countries;
+      // 因为watch被观察的对象只能是getter/effect函数、ref、active对象或者这些类型是数组
+      // 所以需要将state.count变成getter函数
+    },
+  );
   const formData = ref({
     problemDesc: '',
     problemDescImgs: [],
@@ -370,6 +380,9 @@
         font-family: SimSun, sans-serif;
         line-height: 1;
         content: '*';
+        position: absolute;
+        left: -11px;
+        top: 4.5px;
       }
     }
     .myTitle {
@@ -391,10 +404,10 @@
         margin-right: 7px;
       }
     }
-    ::v-deep .uploadercell:after{
+    ::v-deep .uploadercell:after {
       display: none;
     }
-    ::v-deep .ratecell:after{
+    ::v-deep .ratecell:after {
       display: none;
     }
     ::v-deep .van-cell {

src/views/feedback/pcSubmit.vue

@@ -11,7 +11,7 @@
           :placeholder="t('feedback.settext')"
         />
       </a-form-item>
-      <a-form-item name="problemFile" style="margin-top: 32px">
+      <a-form-item name="problemFile" style="margin-top: 2px">
         <a-upload
           v-model:file-list="formData.problemDescImgs"
           accept=".jpg,.png,.mp4"
@@ -21,7 +21,7 @@
           @preview="handlePreview"
         >
           <div>
-            <PlusOutlined />
+            <PlusOutlined style="color:#D9D9D9" color="#D9D9D9" />
             <!-- <div style="margin-top: 8px">{{ t('feedback.upload') }}</div> -->
           </div>
         </a-upload>
@@ -37,11 +37,11 @@
           :placeholder="t('feedback.settext')"
         />
       </a-form-item>
-      <a-form-item name="problemFile" style="margin-top: 32px">
+      <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 />
-            <div style="margin-top: 8px">{{ t('feedback.upload') }}</div>
+            <PlusOutlined style="color:#D9D9D9" color="#D9D9D9" />
+            <!-- <div style="margin-top: 8px">{{ t('feedback.upload') }}</div> -->
           </div>
         </a-upload>
         <div class="tips">{{ t('feedback.fileTips') }}</div>
@@ -130,17 +130,21 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   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']);
+  const props = defineProps(['formData', 'columns', 'addres']);
   import { message, Upload } from 'ant-design-vue';
   import { useI18n } from 'vue-i18n';
   const { t, locale } = useI18n();
   const emit = defineEmits(['submit']);
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  watch(() => props.addres, (newValue, oldValue) => {
+      console.log('addreswatch', newValue);
+      formData.value.country = newValue.country;
+      formData.value.countries = newValue.mccountries;
+  });
   const formData = ref({
     problemDesc: '',
     problemDescImgs: [],
@@ -283,6 +287,9 @@
       font-family: SimSun, sans-serif;
       line-height: 1;
       content: '*';
+      position: absolute;
+      left: -11px;
+      top: 4.5px;
     }
   }
 </style>

vite.config.ts

@@ -78,6 +78,14 @@ export default function (_: ConfigEnv): UserConfig {
         // scss: {
         //   // 配置 nutui 全局 scss 变量
         //   additionalData: `@import "vant/lib/index.css";`,
+        //   scssOptions: {
+        //     modifyVars: {
+        //       'primary-color': 'red',
+        //       'link-color': '#ff0000',
+        //       'border-radius-base': '2px',
+        //     },
+        //     javascriptEnabled: true,
+        //   },
         // },
         // css: {
         //   // 配置 nutui 全局 scss 变量