zdxtLawEnforcementCodeView/src/views/enterprise/complaint.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav
				:slefBack="true"
				@goBack="goBack"
				:titelText="`在线投诉`"
			>
			</header-nav>
		</div>
		<!-- 中间 -->
		<div class="warp_body">
			<van-cell-group>
        <van-field
          v-model="submitData.lawEnforcementIncident"
          required
          label="投诉案件"
          placeholder="必填 请选择"
          readonly
        />
        <van-field
          v-model="submitData.enforceTypeText"
          label="投诉类型"
          placeholder="请选择"
          readonly
          clickable
          is-link
          @click="selectType"
        />
        <van-popup v-model:show="data.showPicker" position="bottom">
        <van-picker
          v-model="data.selectTypeValue"
          :columns="data.columns"
          @cancel="data.showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
        <van-field
          v-model="submitData.problemDescription"
          rows="2"
          autosize
          label="问题描述"
          type="textarea"
          maxlength="200"
          placeholder="请输入描述"
          show-word-limit
        />
        <div class="file-upload">
          <div class="file-upload-center">
            文件上传 <span>(不多于9张)</span>
          </div>
          <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">{{ file.name }}</div>
            </template>
          </van-uploader>
          
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"/>
    
      <van-field
          v-model="submitData.linkman"
          label="联系人"
          placeholder="选填 联系人"
        />
        <van-field
          v-model="submitData.linkmanTel"
          label="联系方式"
          placeholder="选填 联系方式"
        />
      </van-cell-group>
      <van-action-bar>
        <van-action-bar-button color="#be99ff" text="保存"  @click="submit" />
      </van-action-bar>
		</div>
	</div>
</template>

<script setup name="register">

import { showSuccessToast,showLoadingToast,closeToast  } from 'vant';
import {addEnterpriseComplaint} from '../../api/enterprise'
import {getDict} from '../../api/Home'
import {uploadFile} from '../../util/fileUpload'
import { reactive, ref } from "vue";
const { useMy } = $globalStore

const router = useRouter();
const route = useRoute();
let queryaddressId = ref("");
const data = reactive({
	searchResult: [],
  showPicker: false,
  columns: [],
  selectTypeValue : ref[0],
  isSelect: false,
});
//保存参数
const submitData = reactive({
  //关联案件ID
  relId:"",
  //案件名称
  lawEnforcementIncident:"",
  //企业名称
  enterpriseName:"",
  //纳税识别号
  enterpriseNumber:"",
  //执法投诉
  enforceType:"",
  enforceTypeText:"",
  //问题描述
  problemDescription:"",
  //联系人
  linkman:"",
  //联系方式
  linkmanTel:"",
  //后台保存图片列表
  fileList:[],
 //vant组件上传照片列表
  fileListObj:[],
})


// 返回
const goBack = () => {
	router.go(-1);
};


const submit = () =>{
  // console.log(submitData);
  showSuccessToast('投诉成功');
  addEnterpriseComplaint(submitData,success =>{
    
    console.log(success)
    //跳转企业二维码地址
    if(success.success){
      console.log("登记成功");
      showSuccessToast('登记成功');
      goBack();
    }
  },error=>{
      console.log("登记失败")
  })
}
//消息提醒
// const toast = showLoadingToast({
//   duration: 0,
//   forbidClick: true,
//   message: '提交成功',
// });
// let second = 3;
// const timer = setInterval(() => {
//   second--;
//   if (second) {
//   } else {
//     clearInterval(timer);
//     closeToast();
//   }
// }, 1000);
// 保存地址操作
const onSave = () => {
	router.replace({ name: "addressList" });
};

const onConfirm = (value)=> {
      data.showPicker = false;
      console.log(value)
      submitData.enforceType  = value.selectedValues[0];
      submitData.enforceTypeText  = value.selectedOptions[0].text;
}
const selectType  = () =>{
  data.showPicker = true;
  // console.log(data)
}



const uploadFiles = (file) =>{
  uploadFile(file,(res) =>{
    console.log(res);
    submitData.fileList.push(res.url)
    console.log(submitData.fileList);
  });
  
}
const deleteFile = (file,index) =>{
  console.log(index);
  submitData.fileListObj.filter((item, indexs) => {
    if (index.index == indexs) {
      submitData.fileListObj.splice(indexs, 1);//splice 删除
    }
   });
   submitData.fileList.filter((item, indexs) => {
    if (index.index == indexs) {
      submitData.fileList.splice(indexs, 1);//splice 删除
    }
   });
   console.log(submitData.fileList);
   return true;
} 
onMounted(() => {
  console.log(route?.query?.id);
  console.log(route?.query?.lawEnforcementIncident);
  submitData.relId = route?.query?.id;
  submitData.lawEnforcementIncident = route?.query?.lawEnforcementIncident;
  data.isSelect = route?.query?.isSelect;
	getDict({"dictType": "caseType"},success =>{
    console.log(success);
    success.data.forEach(res =>{
      console.log(res)
      var obj = { text: res.dictLabel, value: res.dictValue };
      data.columns.push(obj)
    })
  },error =>{

  })
});

</script>
<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #f4f4f4;
}
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast{
    background: var(--van-toast-background) !important;
    box-sizing: content-box !important;
    /* 下面3条css,影响不大 */
    transition: all var(--van-duration-fast) !important;
    width: var(--van-toast-default-width) !important;
    max-width: var(--van-toast-max-width) !important;
}
.van-popup.van-toast .van-toast__icon{
    font-size: var(--van-toast-icon-size) !important;
}
.file-upload{
    height: 165px;
    position: relative;
}
.file-upload-center{
    position: absolute;
    height: 20%;
    top: 10%;
    left: 2%;
    font-size: 18px;
    span {
      font-size: 13px;
      color: rgb(221, 229, 227);
    }
}
.file{
    position: absolute;
    bottom: 10%;
    left: 2%;
}

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>