You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

338 lines
7.7 KiB

<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">入企不扫码投诉</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" />
<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 } 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>
<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;
}
</style>