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

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './suggestion-option.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  useMessage,
  NUpload,
  UploadFileInfo,
  NImage
} 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 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'],
  setup(props, { emit }) {
    const message = useMessage();
    const userStore = useUserStore();
    const forms = reactive({
      suggestionTypeId: null,
      clientType: 'TEACHER',
      content: '',
      attachmentUrls: '',
      type: 'APP',
      mobileNo: userStore.getUserInfo.phone
    });
    const state = reactive([]) 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 onSubmit = async () => {
      // if (!forms.suggestionTypeId) {
      //   message.error('请选择反馈类型');
      //   return;
      // }
      // if (!forms.content) {
      //   message.error('请填写反馈信息');
      //   return;
      // }
      formsRef.value?.validate(async (err: any) => {
        if (err) {
          return;
        }
        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 });
          isubmit.value = true;
          // message.success('提交成功');
          setTimeout(()=>{
            onReset()
            emit('close');
          },3000)

        } catch (e) {
          console.log(e);
        }
        console.log('onSubmit');
      })

    };
    const onReset = ()=>{
      forms.suggestionTypeId=null
      forms.clientType='TEACHER'
      forms.content= ''
      forms.attachmentUrls= ''
      forms.type= 'APP'
      forms.mobileNo= userStore.getUserInfo.phone
    }
    const onBeforeUpload = async (options: any) => {
      console.log(options, 'onBeforeUpload');
      const file = options.file;
      // 文件大小
      let isLt2M = true;

      const size = 2;
      if (size) {
        isLt2M = file.file.size / 1024 / 1024 < size;
        if (!isLt2M) {
          message.error(`文件大小不能超过${size}M`);
          return false;
        }
      }

      if (!isLt2M) {
        return isLt2M;
      }
      // 是否裁切
      try {
        btnLoading.value = true;
        const name = file.file.name;
        const fileName = `${file.id + name}`;
        const obj = {
          filename: fileName,
          bucketName: 'gyt',
          postData: {
            filename: fileName,
            acl: 'public-read',
            key: fileName,
            unknowValueField: []
          }
        };
        const { data } = await policy(obj);
        state.push({
          id: file.id,
          tempFiileBuffer: file.file,
          policy: data.policy,
          signature: data.signature,
          acl: 'public-read',
          key: fileName,
          KSSAccessKeyId: data.kssAccessKeyId,
          name: fileName
        });
      } catch {
        //
        // message.error('上传失败')
        btnLoading.value = false;
        return false;
      }
      return true;
    };
    const onFinish = (options: any) => {
      // const url =
      const name = options.file.name;
      // const suffix = name.slice(name.lastIndexOf('.'));
      const fileName = `${options.file.id + name}`;
      const url = ossUploadUrl + fileName;
      // urlList.value.push(url);
      // onFinishAfter(options);
    };
    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;
      } catch (e) {
        console.log(e);
      }
    };



    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;

        console.log(email.value, phone.value);
      } catch (e) {
        console.log('请求报错');
        console.log(e);
      }
    };

    const imglist = [inFront,inBack,submitBtn,sealing,boxBg]
    const loadImg = (imgList:any) => {
      for (let i = 0; i < imgList.length; i++) {
        const img = new Image()
        // let currentSrc = ''
        img.src = imgList[i]
        img.onload = function (e) {
          console.log('加载完毕', e,img.complete );
        }
        img.onerror = function (e) {
          console.log('加载错误', e);
        }
      }
    }
    loadImg(imglist)
    onMounted(() => {
      getTypeList();
      getPhoneInfo();
    });
    return () => (
      <div class={styles.suggestOption}>
      <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
        <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
          <NImage
            class={styles.closeBtn}
            src={suggestClose}
            previewDisabled   onClick={() => {onReset();emit('close')}}></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
                  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} */}

              {/* <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}

      </div>

      </div>
    );
  }
});