提交

1

src/components/layout/index.module.less

@@ -508,6 +508,12 @@
     .n-card-header {
       display: none;
     }
+
+    .n-card__content {
+      background-color: transparent;
+    }
+
+
   }
 
 }

src/components/layout/modals/suggestion-option.module.less

@@ -10,14 +10,113 @@
   }
 }
 
+:global {
+  .n-card.n-modal {
+    background-color: transparent !important;
+    box-shadow: none !important;
+
+    .n-input__border {
+      display: none;
+    }
+
+    .n-input__state-border {
+      display: none;
+    }
+  }
+}
+
+.suggestSelect {
+  :global {
+    .n-base-selection__border {
+      border: 1px solid #AADCFF;
+    }
+
+
+  }
+}
+
+
 .updatePassword {
   background-color: transparent;
-  padding: 40px;
+  margin: 0 auto;
+  position: relative;
+
+  // padding: 40px;
+  .formWrap {
+    background-color: #fff;
+    margin: 0 15px 42px;
+    width: 700px;
+    height: 836px;
+    border-radius: 20px;
+    padding: 15px;
+    position: relative;
+
+    .formTitle {
+      text-align: center;
+      margin-top: 31px;
+    }
+
+    .bgLine {
+      position: absolute;
+      width: 670px;
+      height: 779px;
+      left: 15px;
+      top: 15px;
+    }
+
+    h2 {
+      font-size: 28px;
+    }
+
+    .formWrapInfo {
+      padding: 24px 19px 0;
+    }
+
+    .closeBtn {
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      right: -1px;
+      top: 0;
+      z-index: 100;
+      cursor: pointer;
+    }
+  }
 }
 
 .countInput {
   border-radius: 8px;
   min-height: 265px;
+
+  :global {
+    .n-input__textarea-el {
+      line-height: 51px !important;
+      font-size: 16px;
+      font-weight: 400;
+      color: #131415;
+      background: url('../images/textLIne.png') repeat;
+      background-size: 632px 51px;
+    }
+
+    .n-input__placeholder {
+      margin-top: 13px !important;
+    }
+
+    .n-input-wrapper {
+      // padding: 0 19px !important;
+    }
+
+    .n-input-word-count {
+      bottom: -12px !important;
+      font-size: 14px;
+      font-weight: 400;
+      color: #AAAAAA;
+      line-height: 20px;
+    }
+  }
+
+
+
 }
 
 .addInput {
@@ -30,23 +129,23 @@
   align-items: center;
 
   img {
-    width: 36px;
-    height: 36px;
-    margin-bottom: 20px;
+    width: 35px;
+    height: 35px;
+    margin-bottom: 5px;
   }
 }
 
 :global {
   .n-upload-trigger.n-upload-trigger--image-card {
-    width: 150px;
-    height: 150px;
+    width: 110px;
+    height: 110px;
     background: #FDFDFD;
     border-radius: 8px;
   }
 
   .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
-    width: 150px;
-    height: 150px;
+    width: 110px;
+    height: 110px;
     background: #FDFDFD;
     border-radius: 8px;
 
@@ -55,7 +154,7 @@
 
   .n-upload-file-list.n-upload-file-list--grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 150px);
+    grid-template-columns: repeat(auto-fill, 110px);
     grid-gap: 20px;
     margin-top: 0;
   }

src/components/layout/modals/suggestion-option.tsx

@@ -14,10 +14,16 @@ import {
 } from 'naive-ui';
 
 import { useUserStore } from '/src/store/modules/users';
+import bgLine from '../images/bg-line.png';
 import chioseAdd from '../images/chioseAdd.png';
 import CSelect from '../../CSelect';
 import { policy } from '../../upload-file/api';
-import { addSuggestion, getSuggestionList,sysParamConfigPage } from '../modals/api';
+import suggestClose from '../images/suggestClose.png'
+import {
+  addSuggestion,
+  getSuggestionList,
+  sysParamConfigPage
+} from '../modals/api';
 export default defineComponent({
   name: 'train-update',
   emits: ['close', 'submit'],
@@ -29,20 +35,20 @@ export default defineComponent({
       clientType: 'TEACHER',
       content: '',
       attachmentUrls: '',
-      type: "APP",
-      mobileNo:userStore.getUserInfo.phone
+      type: 'APP',
+      mobileNo: userStore.getUserInfo.phone
     });
     const state = reactive([]) as any;
 
-    const suggestionTypeList = ref([]as any)
+    const suggestionTypeList = ref([] as any);
     const ossUploadUrl = `https://gyt.ks3-cn-beijing.ksyuncs.com/`;
     const uploadRef = ref();
     const fileListRef = ref<UploadFileInfo[]>([]);
     const formsRef = ref();
     const btnLoading = ref(false);
     const tempFiileBuffer = ref();
-    const email = ref('')
-    const phone = ref('')
+    const email = ref('');
+    const phone = ref('');
     const onSubmit = async () => {
       if (!forms.suggestionTypeId) {
         message.error('请选择反馈类型');
@@ -52,22 +58,21 @@ export default defineComponent({
         message.error('请填写反馈信息');
         return;
       }
-      const attachmentUrlsList = fileListRef.value.map((item:any)=>{
-        console.log(item,'item')
+      const attachmentUrlsList = fileListRef.value.map((item: any) => {
+        console.log(item, 'item');
         const name = item.name;
         // const suffix = name.slice(name.lastIndexOf('.'));
         const fileName = `${item.id + name}`;
         const url = ossUploadUrl + fileName;
-        return url
-      })
-      const attachmentUrls = attachmentUrlsList.join(',')
-      try{
-
-        const res = await addSuggestion({...forms,attachmentUrls})
-        message.success('提交成功')
-        emit('close')
-      }catch(e){
-        console.log(e)
+        return url;
+      });
+      const attachmentUrls = attachmentUrlsList.join(',');
+      try {
+        const res = await addSuggestion({ ...forms, attachmentUrls });
+        message.success('提交成功');
+        emit('close');
+      } catch (e) {
+        console.log(e);
       }
       console.log('onSubmit');
     };
@@ -114,7 +119,7 @@ export default defineComponent({
           key: fileName,
           KSSAccessKeyId: data.kssAccessKeyId,
           name: fileName
-        })
+        });
       } catch {
         //
         // message.error('上传失败')
@@ -132,142 +137,157 @@ export default defineComponent({
       // urlList.value.push(url);
       // onFinishAfter(options);
     };
-    const onRemove = async (event:any) => {
-      console.log(event)
+    const onRemove = async (event: any) => {
+      console.log(event);
       btnLoading.value = false;
     };
 
     const getTypeList = async () => {
       try {
         const res = await getSuggestionList({ rows: 9999, page: 1 });
-      suggestionTypeList.value = res.data.rows;
+        suggestionTypeList.value = res.data.rows;
       } catch (e) {
-        console.log('请求报错')
         console.log(e);
       }
     };
 
-
-    const getPhoneInfo = async ()=>{
-
-
+    const getPhoneInfo = async () => {
       try {
-        const {data} = await sysParamConfigPage({ page: 1, rows: 999, group: 'OTHER' });
-        const rows = data.rows || []
-        email.value = rows.find((item:any)=>{
-          return item.paramName == 'customer_service_email'
-        }).paramValue
-        phone.value = rows.find((item:any)=>{
-          return item.paramName == 'customer_service_phone'
-        }).paramValue
+        const { data } = await sysParamConfigPage({
+          page: 1,
+          rows: 999,
+          group: 'OTHER'
+        });
+        const rows = data.rows || [];
+        email.value = rows.find((item: any) => {
+          return item.paramName == 'customer_service_email';
+        }).paramValue;
+        phone.value = rows.find((item: any) => {
+          return item.paramName == 'customer_service_phone';
+        }).paramValue;
 
-        console.log( email.value , phone.value)
+        console.log(email.value, phone.value);
       } catch (e) {
-        console.log('请求报错')
+        console.log('请求报错');
         console.log(e);
       }
-
-    }
-    onMounted(()=>{
-      getTypeList()
-      getPhoneInfo()
-    })
+    };
+    onMounted(() => {
+      getTypeList();
+      getPhoneInfo();
+    });
     return () => (
       <div class={styles.updatePassword}>
-        <NForm
-          labelAlign="right"
-          labelPlacement="left"
-          labelWidth={'auto'}
-          ref={formsRef}
-          model={forms}
-          requireMarkPlacement="left">
-          {/* <NFormItem
+        <div class={styles.formWrap}>
+          <NImage class={styles.closeBtn} src={suggestClose} previewDisabled ></NImage>
+          <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
+          <h2 class={styles.formTitle}>意见反馈</h2>
+          <div class={styles.formWrapInfo}>
+            <NForm
+              labelAlign="right"
+              labelPlacement="left"
+              labelWidth={'auto'}
+              ref={formsRef}
+              model={forms}
+              requireMarkPlacement="left">
+              {/* <NFormItem
             path="currentClass"
             label=""
             class={styles.phoneContainer}>
             <p class={styles.phone}>{forms.mobile}</p>
           </NFormItem> */}
 
-          <NFormItem
-            rule={[
-              {
-                required: true,
-                message: '请选择反馈类型'
-              }
-            ]}
-            path="suggestionTypeId">
-            <CSelect
-              value-field="id"
-              label-field="name"
-              style={{ width: '357px!important' }}
-              {...({
-                options: suggestionTypeList.value,
-                placeholder: '反馈类型(必选)',
-                clearable: true,
-                inline: true
-              } as any)}
-              v-model:value={forms.suggestionTypeId}></CSelect>
-          </NFormItem>
-          <NFormItem path='content'         rule={[
-              {
-                required: true,
-                message: '请输入反馈内容'
-              }
-            ]}>
-            <NInput
-              class={styles.countInput}
-              type="textarea"
-              rows={5}
-              placeholder={'请输入反馈内容'}
-              maxlength={500}
-              showCount
-              v-model:value={forms.content}></NInput>
-          </NFormItem>
-          <NFormItem>
-            <NUpload
-              list-type="image-card"
-              accept=".jpg,jpeg,.png"
-              v-model:fileList={fileListRef.value}
-              ref={uploadRef}
-              multiple={true}
-              max={5}
-              data={(file: any) => {
-                const item = state.find((c: any) => {
-                  return c.id == file.file.id;
-                });
-                const { id, tempFiileBuffer, ...more } = item;
-                return { ...more };
-              }}
-              showPreviewButton
-              action={ossUploadUrl}
-              onBeforeUpload={(options: any) => onBeforeUpload(options)}
-              onRemove={(options: any) => onRemove(options)}
-              onFinish={(options: any) => onFinish(options)}>
-              <div class={styles.addInput}>
-                <NImage previewDisabled src={chioseAdd}></NImage>
-                点击上传
-              </div>
-            </NUpload>
-          </NFormItem>
-          {
-            (phone.value || email.value)?  <NFormItem>
-            <div class={styles.messageWrap}>
-             {phone.value? <p>客服电话：{phone.value}</p>:null}
-             {email.value?  <p>邮箱：{email.value}</p>:null}
+              <NFormItem
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择反馈类型'
+                  }
+                ]}
+                path="suggestionTypeId">
+                <CSelect
+                class={styles.suggestSelect}
+                  value-field="id"
+                  label-field="name"
+                  style={{ width: '227px!important' }}
+                  {...({
+                    options: suggestionTypeList.value,
+                    placeholder: '反馈类型(必选)',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={forms.suggestionTypeId}></CSelect>
+              </NFormItem>
+              <NFormItem
+                path="content"
+                rule={[
+                  {
+                    required: true,
+                    message: '请输入反馈内容'
+                  }
+                ]}>
+                <NInput
+                  class={styles.countInput}
+                  type="textarea"
+                  rows={5}
+                  placeholder={'请输入反馈内容'}
+                  maxlength={200}
+                  resizable={false}
+                  showCount
+                  v-model:value={forms.content}></NInput>
+              </NFormItem>
+              <NFormItem>
+                <NUpload
+                  list-type="image-card"
+                  accept=".jpg,jpeg,.png"
+                  v-model:fileList={fileListRef.value}
+                  ref={uploadRef}
+                  multiple={true}
+                  max={5}
+                  data={(file: any) => {
+                    const item = state.find((c: any) => {
+                      return c.id == file.file.id;
+                    });
+                    const { id, tempFiileBuffer, ...more } = item;
+                    return { ...more };
+                  }}
+                  showPreviewButton
+                  action={ossUploadUrl}
+                  onBeforeUpload={(options: any) => onBeforeUpload(options)}
+                  onRemove={(options: any) => onRemove(options)}
+                  onFinish={(options: any) => onFinish(options)}>
+                  <div class={styles.addInput}>
+                    <NImage previewDisabled src={chioseAdd}></NImage>
+                    <p> 点击上传图片</p>
+                    <p>(最多五张)</p>
 
-            </div>
-           </NFormItem>:null
-          }
+                  </div>
+                </NUpload>
+              </NFormItem>
+              {phone.value || email.value ? (
+                <NFormItem>
+                  <div class={styles.messageWrap}>
+                    {phone.value ? <p>客服电话：{phone.value}</p> : null}
+                    {email.value ? <p>邮箱：{email.value}</p> : null}
+                  </div>
+                </NFormItem>
+              ) : null}
 
-          <NSpace class={styles.updateBtnGroup}>
-            <NButton strong type="default" round onClick={() => emit('close')}>
-              取消
-            </NButton>
-            <NButton strong type="primary" round onClick={() => onSubmit()}>
-              确认
-            </NButton>
-          </NSpace>
-        </NForm>
+              <NSpace class={styles.updateBtnGroup}>
+                <NButton
+                  strong
+                  type="default"
+                  round
+                  onClick={() => emit('close')}>
+                  取消
+                </NButton>
+                <NButton strong type="primary" round onClick={() => onSubmit()}>
+                  确认
+                </NButton>
+              </NSpace>
+            </NForm>
+          </div>
+        </div>
       </div>
     );
   }