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">
      <span class="rigbtn" @click="toNoScanView">入企不扫码投诉</span>
			<van-cell-group>
        <van-field
          v-model="submitData.lawEnforcementIncident"
          required
          label="投诉案件"
          placeholder="必填 请选择"
          readonly
          clickable
          is-link
          @click="showPopup"
        />
        <Popup :visible="popupVisible" :content="popupContent" @close="closePopup" @reciveData="reciveData" />

        <van-field
          v-model="submitData.enforceTypeText"
          required
          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-divider class="divdsty" />
        <van-field
          v-model="submitData.problemDescription"
          required
          rows="5"
          autosize
          label="问题描述"
          type="textarea"
          maxlength="300"
          placeholder="请输入描述"
          show-word-limit
        />
        <van-divider class="divdsty" />
        <div class="file-upload">
          <div class="file-upload-center">
            <label>上传附件</label> <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 class="divdsty" />
    
      <van-field
          v-model="submitData.linkman"
          required
          label="联系人"
          placeholder="必填 联系人"
        />
        <van-field
          v-model="submitData.linkmanTel"
          required
          label="联系方式"
          placeholder="必填 联系方式"
        />
      </van-cell-group>
      <van-action-bar>
        <van-action-bar-button color="#1367fe" text="提交"  @click="submit" />
      </van-action-bar>
		</div>
	</div>
</template>

<script setup name="register">

import { showSuccessToast,showLoadingToast,closeToast,Toast } 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);

  addEnterpriseComplaint(submitData,success =>{
    
    console.log(success)
    //跳转企业二维码地址
    if(success.success){
      showSuccessToast("登记成功")
      console.log("登记成功");
      setTimeout(() => {
          goBack();
      }, 2000);
      
    }
  },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 =>{

  })
});
const toNoScanView = () =>{
  router.push({
    path:"/enterprise/complaintNoScan"
  })
}
const reciveData = (item) =>{
    console.log(item)
    submitData.lawEnforcementIncident = item.lawEnforcementItem;
    submitData.relId = item.id;
}

</script>
<script>
//案件筛选弹窗
import Popup from './caseFilter.vue';

export default {
  components: {
    Popup
  },
  data() {
    return {
      popupVisible: false,
      popupContent: ''
    }
  },
  methods: {
    showPopup() {
      this.popupVisible = true;
    },
    closePopup() {
      this.popupVisible = false;
    }
  }
}
</script>

<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
  background-color: #ebf3fb;
}
.warp_body {
  margin: 0 3%;
  padding-bottom: 3rem;
  width: 94%;
  height: 100%;
  //border-radius: 0.25rem;
  background-image: linear-gradient(to bottom, #ebf3fb, #fff);
  overflow-y: auto;
}
/* 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;
}
.divdsty {
  margin: auto;
  width: 100%;
  height: 0.25rem;
  background-color: #f4f4f4;
  border: 0;
}
.file-upload{
    min-height: 4.5rem;
    position: relative;
}
.file-upload-center{
    position: absolute;
    height: 20%;
    top: 10%;
    left: 2%;
    font-size: 0.38rem;
    span {
      font-size: 0.32rem;
      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: 0.32rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
.rigbtn {
  float: right;
  position: relative;
  z-index: 1;
  margin: 0.3rem 0.5rem;
  padding: 0.2rem 0.3rem;
  background-color: #e9f2fb;
  color: #1367fe;
  border-radius: 1rem;
  font-size: 0.3rem;
}
  .popup {
  position: fixed;
  z-index: 999;
  top: 3rem;
  left: 0;
  width: 100%;
  height: calc(100% - 3rem);;
  background: #fff;
  overflow: hidden;
}

.popup-title {
  margin: 0.3rem 0 0;
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #f3f4f5;
  text-align: center;
  font-size: 0.42rem;
  font-weight: 550;
}

.close-button {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: rgba(255, 255, 255, .5);
  border: 0.05rem solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  transform: rotate(45deg);
}

.close-button:before,
.close-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  height: 0.4rem;
  width: 0.02rem;
}

.close-button:after {
  height: 0.02rem;
  width: 0.4rem;
}

.popup-content {
  margin: 0.25rem 3% 0;
  padding-bottom: 3rem;
  width: 94%;
  height: calc(100% - 1.6rem);
  overflow-y: auto;
  font-size: 0.38rem;
}

.subsearch {
  width: 100%;
  height: 1.25rem;
}

.searchbox {
  margin: 2% 3%;
  padding: 0.15rem 0.3rem 0.1rem 1.15rem;
  width: 94%;
  height: 1.0rem;
  background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
  background-position: left 0.5rem center;
  background-size: auto 50%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 0.5rem;
  color: #999999;
  outline: none;
}

.subtitle {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.4rem;
  font-weight: 600;
}

.quick-item {
  display: flex;
}

.quick-item span {
  display: inline-block;
  margin: 1% 0 2% 3.5%;
  padding: 2% 3.75%;
  background: #f2f3f4;
  border: 0;
  border-radius: 8px;
  color: #4c4c4c;
}

.quick-item span.seled {
  background: #e9f2fb;
  color: #1367fe;
}

.btnbox {
  display: flex;
  justify-content: center;
  margin: 5% 2%;
  width: 96%;
  height: 1.0rem;
}

.btn-reset,
.btn-search {
  display: inline-block;
  margin: 0 2%;
  padding: 0;
  width: 60%;
  color: #fff;
  font-size: 0.35rem;
  border-radius: 1rem;
  background: #1367fe;
  border: 1px solid #1367fe;
  text-align: center;
}

.btn-reset {
  width: 35%;
  background-color: #fff;
  border-color: rgba(19, 103, 254, .7);
  color: #1367fe;
}

.search-result {
  width: 100%;
  padding-bottom: 2rem;
}

.case-item {
  margin: 3% 2%;
  padding: 2% 0;
  width: 96%;
  font-size: 0.3rem;
  border-bottom: 1px solid #f4f4f4;
  color: #999;
  line-height: 2;
}

.case-title {
  margin: 2% 0;
  font-size: 0.38rem;
  color: #333;
  line-height: 1.25;
}
</style>