提交一下

1

public/version.json

@@ -1 +1 @@
-{"version":1694059640587}
+{"version":1694059904790}

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

@@ -14,10 +14,21 @@ 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 inFront from '../images/inFront.png';
+import inBack from '../images/inBack.png';
+import submitBtn from '../images/submitBtn.png';
+import sealing from '../images/sealing.png'
+import boxBg from '../images/boxBg.png'
+import {
+  addSuggestion,
+  getSuggestionList,
+  sysParamConfigPage
+} from '../modals/api';
 export default defineComponent({
   name: 'train-update',
   emits: ['close', 'submit'],
@@ -29,20 +40,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 isubmit = ref(false)
+    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 +63,25 @@ 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{
+        return url;
+      });
+      const attachmentUrls = attachmentUrlsList.join(',');
+      try {
+        const res = await addSuggestion({ ...forms, attachmentUrls });
+        isubmit.value = true;
+        // message.success('提交成功');
+        setTimeout(()=>{
+          emit('close');
+        },3000)
 
-        const res = await addSuggestion({...forms,attachmentUrls})
-        message.success('提交成功')
-        emit('close')
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       console.log('onSubmit');
     };
@@ -114,7 +128,7 @@ export default defineComponent({
           key: fileName,
           KSSAccessKeyId: data.kssAccessKeyId,
           name: fileName
-        })
+        });
       } catch {
         //
         // message.error('上传失败')
@@ -132,46 +146,47 @@ 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.suggestOption}>
       <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
@@ -197,86 +212,111 @@ export default defineComponent({
             <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>
+                </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} */}
 
-            </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>
+          </div>
+        </div>
+        <div class={[styles.inBack,isubmit.value?styles.isAni:'']}>
+
+        </div>
+        {/* <div class={styles.inBackBottom}></div>  boxBg */}
+        <NImage src={boxBg} class={styles.inBackBottom} previewDisabled></NImage>
+        <NImage src={inFront} class={styles.inFront} previewDisabled></NImage>
+        <NImage src={sealing} class={[styles.sealing,isubmit.value?styles.isAni:'']} previewDisabled></NImage>
+        {!isubmit.value?<>
+          <NImage src={submitBtn}  onClick={()=>{onSubmit()}} class={styles.submitBtn} previewDisabled></NImage>
+          <div class={styles.messageWrap}>
+          {phone.value ? <p>客服电话：{phone.value}</p> : null}
+          {email.value ? <p>邮箱：{email.value}</p> : null}
+        </div>
+        </>:null}
 
-          <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>
     );