1120 lines
31 KiB
Vue
1120 lines
31 KiB
Vue
<template>
|
||
<div class="report">
|
||
<div class="box-bottom">
|
||
<div class="report-box" v-show="reportBox">
|
||
<div class="left-box">
|
||
<div class="reportMsg">
|
||
<h3 @click="openMsgBox()">投诉举报</h3>
|
||
</div>
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="reportList">
|
||
<h3 @click="openMsgList()">历史举报信息</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="msgList" v-show="msgList">
|
||
<div class="thisTitle2">
|
||
<span><i @click="return1()" >返回</i> > <em>历史举报信息</em></span>
|
||
</div>
|
||
<ul class="module1">
|
||
<li>
|
||
<input id="phoneList" type="text" placeholder="请输入手机号码" autocomplete="off" @blur="losephone2()">
|
||
<!-- <span id="getCode" @click="getCode2()" v-bind:disabled="isCounting2">
|
||
{{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
|
||
</span> -->
|
||
|
||
<!-- 历史查询模块按钮 -->
|
||
<span
|
||
id="getCode"
|
||
:class="{ disabled: isCounting2 }"
|
||
:disabled="isCounting2"
|
||
@click="!isCounting2 && getCode('history')">
|
||
{{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<input id="inputyzmList" type="text" placeholder="请输入验证码" autocomplete="off" @blur="loseinputyzm2()">
|
||
</li>
|
||
<li>
|
||
<button id="inquire" type="button" @click="inquire()">查询</button>
|
||
</li>
|
||
</ul>
|
||
<div class="module2">
|
||
<!-- 分页数据 -->
|
||
<div class="dataList">
|
||
<el-table
|
||
:data="pagedTableData"
|
||
:cell-style="{'text-align':'center'}"
|
||
:header-cell-style="{'text-align':'center', background:'#F5F5F5', color:'#606266'}"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column type="index" label="序号" width="80" :index="indexMethod" />
|
||
<el-table-column prop="content" label="举报事由" show-overflow-tooltip />
|
||
<el-table-column prop="phone" width="180" label="手机号" />
|
||
<el-table-column
|
||
prop="feedbackStatus"
|
||
label="反馈状态"
|
||
width="120"
|
||
:formatter="formatFeedbackStatus"
|
||
/>
|
||
<el-table-column prop="gmtCreate" width="200" label="举报时间" />
|
||
<el-table-column prop="handleContent" label="处理结果" show-overflow-tooltip />
|
||
</el-table>
|
||
</div>
|
||
<!-- 分页插件 -->
|
||
<div class="pagination" v-show="pagination">
|
||
<el-pagination
|
||
@current-change="handlePageChange"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
layout="total, prev, pager, next, jumper"
|
||
:total="tableData.length">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box" v-show="msgBox">
|
||
<div class="thisTitle1">
|
||
<span><i @click="return1()" >返回</i> > <em>投诉举报</em></span>
|
||
</div>
|
||
<div class="report-content">
|
||
<textarea name="" id="jbtext" cols="50" rows="10" autocomplete="off" placeholder="举报事由..." @blur="loseinputtext()"></textarea>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<input id="phone" type="text" placeholder="请输入手机号码" autocomplete="off" @blur="losephone()">
|
||
<!-- <span id="getCode" @click="getCode()" v-bind:disabled="isCounting2">
|
||
{{ isCounting2 ? `${countdown}s后重试` : '获取验证码' }}
|
||
</span> -->
|
||
|
||
<!-- 投诉举报模块按钮 -->
|
||
<span
|
||
id="getCode"
|
||
:class="{ disabled: isCounting }"
|
||
:disabled="isCounting"
|
||
@click="!isCounting && getCode('report')">
|
||
{{ isCounting ? `${countdown}s后重试` : '获取验证码' }}
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<input id="inputyzm" type="text" placeholder="请输入验证码" autocomplete="off" @blur="loseinputyzm()">
|
||
</li>
|
||
<li>
|
||
<button type="button" @click="submit()">投诉举报</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- <div class="success" v-show="isSuccessVisible"> -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="mask" v-show="isMaskVisible">
|
||
<div class="success">
|
||
<i></i>
|
||
<p>投诉举报成功！</p>
|
||
<button type="button" @click="closeMask()">返回首页</button>
|
||
<em class="again" @click="again()">继续投诉</em>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import $ from 'jquery';
|
||
import axios from 'axios'
|
||
import { layer } from "vue3-layer"
|
||
// import { onBeforeRouteLeave } from 'vue-router'
|
||
export default {
|
||
data() {
|
||
return {
|
||
reportBox: true,
|
||
msgBox: false,
|
||
msgList: false,
|
||
pagination: false,
|
||
isMaskVisible: false,
|
||
// isComplaintVisible: true, // 控制投诉表单的显示
|
||
// isSuccessVisible: false // 控制成功消息的显示
|
||
countdown: 180, // 倒计时时间
|
||
isCounting: false, // 投诉举报模块倒计时状态
|
||
isCounting2: false, // 历史举报模块倒计时状态
|
||
timer: null, // 定时器引用
|
||
timer2: null,
|
||
tableData: [],
|
||
currentPage: 1, // 当前页码
|
||
pageSize: 5, // 每页显示的条数
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
// 公共倒计时方法
|
||
startCountdown(type) {
|
||
const target = type === 'report' ? 'timer' : 'timer2'
|
||
const stateKey = type === 'report' ? 'isCounting' : 'isCounting2'
|
||
|
||
this[stateKey] = true
|
||
this.countdown = 180
|
||
|
||
this[target] = setInterval(() => {
|
||
if (this.countdown > 0) {
|
||
this.countdown--
|
||
} else {
|
||
this.clearTimer(type)
|
||
this[stateKey] = false
|
||
this.countdown = 180
|
||
}
|
||
}, 1000)
|
||
},
|
||
|
||
// 清除定时器
|
||
clearTimer(type) {
|
||
const target = type === 'report' ? 'timer' : 'timer2'
|
||
if (this[target]) {
|
||
clearInterval(this[target])
|
||
this[target] = null
|
||
}
|
||
},
|
||
|
||
// 修改后的获取验证码方法
|
||
getCode(type) {
|
||
const phoneSelector = type === 'report' ? '#phone' : '#phoneList'
|
||
const phoneVal = $(phoneSelector).val()
|
||
|
||
if (!phoneVal) {
|
||
layer.msg('请填写手机号', { icon: 2 })
|
||
return
|
||
}
|
||
|
||
const apiUrl = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
// const apiUrl = `http://192.168.0.15:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
|
||
axios.get(apiUrl).then(res => {
|
||
layer.msg('验证码已发送', { icon: 1 })
|
||
this.startCountdown(type) // 统一调用倒计时
|
||
}).catch(err => {
|
||
layer.msg(err.response?.data?.msg || '发送失败')
|
||
})
|
||
},
|
||
|
||
|
||
openMsgBox() {
|
||
this.reportBox = false;
|
||
this.msgBox = true;
|
||
},
|
||
openMsgList() {
|
||
this.reportBox = false;
|
||
this.msgList = true;
|
||
},
|
||
// 1 验证举报事由
|
||
loseinputtext() {
|
||
var jbtext = document.querySelector('#jbtext')
|
||
if(jbtext.value == '') {
|
||
layer.tips('X 输入内容不能为空', '#jbtext', {
|
||
// id: 'tips1-1',
|
||
shadeClose: false,
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
layer.tips('√', '#jbtext', {
|
||
// id: 'tips1-1',
|
||
shadeClose: false,
|
||
tips: [2, 'green'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return true;
|
||
}
|
||
},
|
||
// 2 验证手机号
|
||
losephone() {
|
||
// alert(11)
|
||
var phone = document.getElementById('phone');
|
||
var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||
if (phone.value == '') {
|
||
layer.tips('X 请您填写手机号', '#phone', {
|
||
// id: 'tips1-1',
|
||
shadeClose: false,
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
if (!reg.test(phone.value)) {
|
||
layer.tips('X 请输入正确的手机号', '#phone', {
|
||
// id: 'tips1-2',
|
||
shadeClose: false,
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
|
||
})
|
||
return false;
|
||
} else {
|
||
layer.tips('√', '#phone', {
|
||
// id: 'tips1-3',
|
||
shadeClose: false,
|
||
tips: [2, 'green'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
// 3 输入短信验证码
|
||
loseinputyzm() {
|
||
var inputyzm = document.querySelector('#inputyzm')
|
||
var yzmcode = /^[0-9]\d{5}$/;
|
||
if (inputyzm.value == '') {
|
||
layer.tips('X 请您填写验证码', '#inputyzm', {
|
||
// id: 'tips2-1',
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
if (!yzmcode.test(inputyzm.value)) {
|
||
//验证不成功
|
||
layer.tips('X 请您正确填写验证码', '#inputyzm', {
|
||
// id: 'tips2-2',
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
//验证成功
|
||
layer.tips('√', '#inputyzm', {
|
||
// id: 'tips2-3',
|
||
tips: [2, 'green'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
// // 获取验证码
|
||
// getCode() {
|
||
// let phoneVal = $("#phone").val()
|
||
// // console.log(phoneVal);
|
||
// if (phoneVal === '') {
|
||
// layer.msg('请填写手机号', {
|
||
// icon: 2,
|
||
// time: 2000,
|
||
// offset: '50px',
|
||
// })
|
||
// } else {
|
||
// // let phoneResult = `https://www.aimzhu.com/operator/app/complaint/sendmsgrelease/${phoneVal}`
|
||
|
||
// let phoneResult = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
// // let phoneResult = `http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
// axios.get(phoneResult).then(response => {
|
||
// // console.log(response.data)
|
||
// layer.msg('验证码已发送', {
|
||
// icon: 1,
|
||
// time: 2000,
|
||
// offset: '50px',
|
||
// });
|
||
// this.startCountdown(); // 开始倒计时
|
||
// })
|
||
// }
|
||
// },
|
||
|
||
// startCountdown() {
|
||
// this.isCounting = true; // 设置正在倒计时
|
||
// let interval = setInterval(() => {
|
||
// if (this.countdown > 0) {
|
||
// this.countdown--;
|
||
// $('#getCode').text(`${this.countdown}s后重试`); // 更新按钮文本
|
||
// } else {
|
||
// clearInterval(interval); // 清除定时器
|
||
// this.isCounting = false; // 设置倒计时结束
|
||
// this.countdown = 180; // 重置倒计时时间
|
||
// $('#getCode').text('获取验证码'); // 重置按钮文本
|
||
// }
|
||
// }, 1000);
|
||
// },
|
||
|
||
submit() {
|
||
if(this.loseinputtext() && this.losephone() && this.loseinputyzm()) {
|
||
this.submitComplaint()
|
||
} else {
|
||
// alert("请正确填写对应项的内容")
|
||
}
|
||
},
|
||
// 投诉举报
|
||
submitComplaint() {
|
||
// 当点击投诉举报按钮时，应该执行的操作
|
||
var jbtextVal = $("#jbtext").val();
|
||
var phoneVal = $("#phone").val();
|
||
var inputyzmValue = $('#inputyzm').val();
|
||
var url = 'https://www.aimzhu.com/operator-plugin/app/complaint/saverelease'
|
||
// var url = 'http://192.168.0.15:8099/operator-plugin/app/complaint/saverelease'
|
||
axios({
|
||
url,
|
||
// data: qs.stringify(data),
|
||
method: 'post',
|
||
data: {
|
||
content: jbtextVal,
|
||
phone: phoneVal,
|
||
code: inputyzmValue
|
||
}
|
||
}).then(res => {
|
||
this.clearTimer('report') // 成功时立即清除定时器
|
||
this.isCounting = false
|
||
this.countdown = 180
|
||
// console.log(res);
|
||
//
|
||
layer.closeAll('tips');
|
||
this.isMaskVisible = true; // 显示蒙层
|
||
document.body.style.overflow = 'hidden';
|
||
})
|
||
.catch(error => {
|
||
const msg = error.response?.data?.msg
|
||
if (msg.includes('验证码')) {
|
||
layer.msg(msg, { icon: 2 })
|
||
this.clearTimer('report')
|
||
this.isCounting = false
|
||
this.countdown = 180
|
||
}
|
||
})
|
||
},
|
||
|
||
// // 投诉举报
|
||
// submitComplaint() {
|
||
// // 当点击投诉举报按钮时，应该执行的操作
|
||
// var jbtextVal = $("#jbtext").val();
|
||
// var phoneVal = $("#phone").val();
|
||
// var inputyzmValue = $('#inputyzm').val();
|
||
// // var url = 'https://www.aimzhu.com/operator/app/complaint/saverelease'
|
||
|
||
// var url = 'https://www.aimzhu.com/operator-plugin/app/complaint/saverelease'
|
||
|
||
// // var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/saverelease'
|
||
|
||
// // var url = 'http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/'
|
||
|
||
// axios({
|
||
// url,
|
||
// // data: qs.stringify(data),
|
||
// method: 'post',
|
||
// data: {
|
||
// content: jbtextVal,
|
||
// phone: phoneVal,
|
||
// code: inputyzmValue
|
||
// }
|
||
// }).then(res => {
|
||
// console.log(res);
|
||
// // console.log(res.status);
|
||
// // 假设这里进行一些验证和处理后
|
||
// layer.closeAll('tips');
|
||
// this.isMaskVisible = true; // 显示蒙层
|
||
// document.body.style.overflow = 'hidden';
|
||
// })
|
||
// .catch(error => {
|
||
// console.error('There was an error!', error);
|
||
// })
|
||
// },
|
||
|
||
closeMask() {
|
||
this.isMaskVisible = false; // 隐藏蒙层
|
||
// 重新启用页面滚动
|
||
document.body.style.overflow = '';
|
||
// if (this.isCounting) {
|
||
// clearInterval(this.interval); // 清除倒计时定时器
|
||
// this.isCounting = false; // 设置倒计时结束
|
||
// this.countdown = 180; // 重置倒计时时间
|
||
// $('#getCode').text('获取验证码'); // 重置按钮文本
|
||
// }
|
||
// 重置倒计时状态
|
||
this.clearTimer('report');
|
||
this.isCounting = false;
|
||
this.countdown = 180;
|
||
this.reportBox = true;
|
||
this.msgList = false;
|
||
this.msgBox = false;
|
||
// 跳转到首页
|
||
window.location.href = 'http://www.aimzhu.com';
|
||
|
||
},
|
||
closeTips() {
|
||
layer.closeAll('tips');
|
||
},
|
||
|
||
again() {
|
||
this.isMaskVisible = false; // 隐藏蒙层
|
||
// 重新启用页面滚动
|
||
document.body.style.overflow = '';
|
||
|
||
// 清空表单内容
|
||
$('#jbtext').val(''); // 清空举报事由
|
||
$('#phone').val(''); // 清空手机号
|
||
$('#inputyzm').val(''); // 清空验证码
|
||
|
||
// 关闭所有验证提示
|
||
layer.closeAll('tips');
|
||
|
||
// 重置倒计时状态
|
||
this.clearTimer('report');
|
||
this.isCounting = false;
|
||
this.countdown = 180;
|
||
|
||
// 保持投诉表单可见状态
|
||
this.msgBox = true;
|
||
this.msgList = false;
|
||
this.reportBox = false;
|
||
},
|
||
|
||
return1() {
|
||
this.msgBox = false;
|
||
this.msgList = false;
|
||
this.reportBox = true;
|
||
layer.closeAll('tips');
|
||
},
|
||
|
||
|
||
// 2 验证手机号
|
||
losephone2() {
|
||
// alert(11)
|
||
var getCode = document.getElementById('phoneList');
|
||
var reg2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||
if (getCode.value == '') {
|
||
layer.tips('X 请您填写手机号', '#getCode', {
|
||
// id: 'tips1-1',
|
||
shadeClose: false,
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
if (!reg2.test(getCode.value)) {
|
||
layer.tips('X 请输入正确的手机号', '#phoneList', {
|
||
// id: 'tips1-2',
|
||
shadeClose: false,
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
|
||
})
|
||
return false;
|
||
} else {
|
||
layer.tips('√', '#phoneList', {
|
||
// id: 'tips1-3',
|
||
shadeClose: false,
|
||
tips: [2, 'green'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
// 3 输入短信验证码
|
||
loseinputyzm2() {
|
||
var inputyzm = document.querySelector('#inputyzmList')
|
||
var yzmcode2 = /^[0-9]\d{5}$/;
|
||
if (inputyzm.value == '') {
|
||
layer.tips('X 请您填写验证码', '#inputyzmList', {
|
||
// id: 'tips2-1',
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
if (!yzmcode2.test(inputyzm.value)) {
|
||
//验证不成功
|
||
layer.tips('X 请您正确填写验证码', '#inputyzmList', {
|
||
// id: 'tips2-2',
|
||
tips: [2, 'red'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return false;
|
||
} else {
|
||
//验证成功
|
||
layer.tips('√', '#inputyzmList', {
|
||
// id: 'tips2-3',
|
||
tips: [2, 'green'],
|
||
time: 2000,
|
||
area: ['auto', '40px'],
|
||
})
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
|
||
// // 获取验证码
|
||
// getCode2() {
|
||
// let phoneVal = $("#phoneList").val()
|
||
// // console.log(phoneVal);
|
||
// if (phoneVal === '') {
|
||
// layer.msg('请填写手机号', {
|
||
// icon: 2,
|
||
// time: 2000,
|
||
// offset: '50px',
|
||
// })
|
||
// } else {
|
||
// let phoneResult = `https://www.aimzhu.com/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
// // let phoneResult = `http://192.168.0.115:8099/operator-plugin/app/complaint/sendmsgrelease/${phoneVal}`
|
||
// axios.get(phoneResult).then(response => {
|
||
// // console.log(response.data)
|
||
// layer.msg('验证码已发送', {
|
||
// icon: 1,
|
||
// time: 2000,
|
||
// offset: '50px',
|
||
// });
|
||
// this.startCountdown2(); // 开始倒计时
|
||
// })
|
||
// }
|
||
// },
|
||
|
||
// startCountdown2() {
|
||
// this.isCounting2 = true; // 设置正在倒计时
|
||
// let interval = setInterval(() => {
|
||
// if (this.countdown > 0) {
|
||
// this.countdown--;
|
||
// $('#getCode').text(`${this.countdown}s后重试`); // 更新按钮文本
|
||
// } else {
|
||
// clearInterval(interval); // 清除定时器
|
||
// this.isCounting2 = false; // 设置倒计时结束
|
||
// this.countdown = 180; // 重置倒计时时间
|
||
// $('#getCode').text('获取验证码'); // 重置按钮文本
|
||
// }
|
||
// }, 1000);
|
||
// },
|
||
|
||
// inquire() {
|
||
// if(this.loseinputtext() && this.losephone() && this.loseinputyzm()) {
|
||
// this.submitComplaint()
|
||
// } else {
|
||
// // alert("请正确填写对应项的内容")
|
||
// }
|
||
// },
|
||
|
||
|
||
// 查询
|
||
inquire() {
|
||
// 手动触发验证
|
||
const isPhoneValid = this.losephone2();
|
||
const isYzmValid = this.loseinputyzm2();
|
||
|
||
// if (!isPhoneValid || !isYzmValid) {
|
||
// layer.msg('请正确填写信息', { icon: 2 });
|
||
// return;
|
||
// }
|
||
|
||
// 当点击查询按钮时，应该执行的操作
|
||
var phoneList = $("#phoneList").val();
|
||
var inputyzmList = $('#inputyzmList').val();
|
||
var url = `https://www.aimzhu.com/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
|
||
// var url = `http://192.168.0.15:8099/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
|
||
|
||
axios.get(url).then(response => {
|
||
this.clearTimer('history') // 成功时清除定时器
|
||
this.isCounting2 = false
|
||
this.countdown = 180
|
||
//
|
||
this.tableData = response.data
|
||
console.log('完整数据',this.tableData);
|
||
if(this.tableData == '') {
|
||
this.pagination = false
|
||
} else {
|
||
this.pagination = true
|
||
}
|
||
// 重置当前页码为1，因为每次查询都是新的数据集
|
||
this.currentPage = 1;
|
||
})
|
||
.catch(error => {
|
||
// // console.error('There was an error!', error.response.data.msg);
|
||
// console.error('There was an error!', error.response.data.msg);
|
||
layer.msg(error.response?.data?.msg || '发送失败')
|
||
})
|
||
},
|
||
|
||
// // 查询
|
||
// inquire() {
|
||
// // 当点击查询按钮时，应该执行的操作
|
||
// var phoneList = $("#phoneList").val();
|
||
// var inputyzmList = $('#inputyzmList').val();
|
||
// var url = `https://www.aimzhu.com/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
|
||
// // var url = `http://192.168.0.115:8099/operator-plugin/app/complaint/listrelease/${phoneList}/${inputyzmList}`
|
||
|
||
// axios.get(url).then(response => {
|
||
// this.tableData = response.data
|
||
// console.log('完整数据',this.tableData);
|
||
// if(this.tableData == '') {
|
||
// this.pagination = false
|
||
// } else {
|
||
// this.pagination = true
|
||
// }
|
||
// // 重置当前页码为1，因为每次查询都是新的数据集
|
||
// this.currentPage = 1;
|
||
// })
|
||
// .catch(error => {
|
||
// // console.error('There was an error!', error.response.data.msg);
|
||
// console.error('There was an error!', error.response.data.msg);
|
||
// })
|
||
// },
|
||
|
||
indexMethod(index) {
|
||
// 计算序号，考虑到当前页和每页显示的数量
|
||
return index + 1 + (this.currentPage - 1) * this.pageSize;
|
||
},
|
||
handlePageChange(newPage) {
|
||
this.currentPage = newPage; // 更新当前页码
|
||
},
|
||
// getStatusColor({ row }) {
|
||
// console.log('当前行数据:', row) // 确保能正确读取到数据
|
||
// return row.feedbackStatus === "1" ? { color: '#67C23A !important' } : { color: '#F56C6C !important' };
|
||
// },
|
||
formatFeedbackStatus(row, column, cellValue) {
|
||
// console.log('Cell value:', cellValue); // 添加这一行来调试
|
||
// 根据 feedbackStatus 的值返回相应的字符串
|
||
return cellValue === "1" ? '已处理' : '未处理';
|
||
},
|
||
|
||
|
||
// onBeforeRouteLeave() {
|
||
// // 在路由离开之前关闭layer.tips
|
||
// this.closeTips();
|
||
// }
|
||
},
|
||
|
||
computed: {
|
||
// 计算属性，用于分页显示数据
|
||
pagedTableData() {
|
||
const start = (this.currentPage - 1) * this.pageSize;
|
||
const end = start + this.pageSize;
|
||
return this.tableData.slice(start, end);
|
||
}
|
||
},
|
||
|
||
beforeUnmount() {
|
||
this.clearTimer('report')
|
||
this.clearTimer('history')
|
||
// 清理DOM残留
|
||
$('.layui-layer-tips').remove();
|
||
},
|
||
|
||
beforeRouteLeave(to, from, next) {
|
||
// 在路由离开之前关闭layer.tips
|
||
this.closeTips();
|
||
next(); // 确保调用next()以继续导航
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.disabled {
|
||
cursor: not-allowed !important;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
#getCode:not(.disabled) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.report {
|
||
position: relative;
|
||
}
|
||
|
||
/* .report .box-top {
|
||
width: 100%;
|
||
height: 400px;
|
||
background: url(/assets/img/report-bj.png) no-repeat;
|
||
background-size: cover;
|
||
} */
|
||
.report .box-bottom {
|
||
width: 100%;
|
||
/* height: 12.5rem; */
|
||
height: 100vh;
|
||
background-color: #f7f7f7;
|
||
}
|
||
.report .box-bottom .report-box {
|
||
display: flex;
|
||
position: relative;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 15rem;
|
||
height: 9.4rem;
|
||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
-moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
}
|
||
.report .box-bottom .report-box .left-box,
|
||
.report .box-bottom .report-box .right-box{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
justify-content: center;
|
||
width: 7.5rem;
|
||
height: 9.4rem;
|
||
}
|
||
.report .box-bottom .report-box .reportMsg {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
/* background-color: #fed289; */
|
||
background-color: #ffefd5;
|
||
}
|
||
.report .box-bottom .report-box .reportMsg h3 {
|
||
padding: .25rem .5rem;
|
||
border-radius: .5rem;
|
||
/* background-color: #fca43a; */
|
||
background-color: #FFDEAD;
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.report .box-bottom .report-box .reportMsg h3:hover {
|
||
font-size: 20px;
|
||
}
|
||
.report .box-bottom .report-box .reportList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #FFDEAD;
|
||
}
|
||
.report .box-bottom .report-box .reportList h3 {
|
||
padding: .25rem .5rem;
|
||
border-radius: .5rem;
|
||
background-color: #ffefd5;
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.report .box-bottom .report-box .reportList h3:hover {
|
||
font-size: 20px;
|
||
}
|
||
.report .box-bottom .msgList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 15rem;
|
||
height: 9.4rem;
|
||
padding: .25rem .375rem;
|
||
border-radius: .25rem;
|
||
background-color: #FFEFD5;
|
||
border-radius: .25rem;
|
||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
-moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
}
|
||
.report .box-bottom .msgList .thisTitle2 {
|
||
width: 14.25rem;
|
||
height: .5rem;
|
||
line-height: .5rem;
|
||
}
|
||
.report .box-bottom .msgList .thisTitle2 span i {
|
||
cursor: pointer;
|
||
}
|
||
.report .box-bottom .msgList .thisTitle2 span i:hover {
|
||
color: red;
|
||
}
|
||
.report .box-bottom .msgList .module1 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-content: center;
|
||
width: 14.25rem;
|
||
height: 1.25rem;
|
||
}
|
||
.report .box-bottom .msgList .module1 li {
|
||
position: relative;
|
||
height: .75rem;
|
||
margin: .25rem 0;
|
||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
}
|
||
.report .box-bottom .msgList .module1 li #phoneList,
|
||
.report .box-bottom .msgList .module1 li #inputyzmList {
|
||
width: 4.375rem;
|
||
height: .75rem;
|
||
padding: .25rem;
|
||
border: none;
|
||
border-radius: .05rem;
|
||
background-color: #FFF;
|
||
font-size: .2rem;
|
||
color: #999999;
|
||
}
|
||
.report .box-bottom .msgList .module1 li #getCode {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 1.5rem;
|
||
height: .75rem;
|
||
line-height: .75rem;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
color: #f77437;
|
||
}
|
||
.report .box-bottom .msgList .module1 li #inquire {
|
||
width: 3.75rem;
|
||
height: .75rem;
|
||
border: none;
|
||
border-radius: .05rem;
|
||
background-color: #fcbb53;
|
||
font-size: .25rem;
|
||
color: #FFF;
|
||
cursor: pointer;
|
||
}
|
||
.report .box-bottom .msgList .module2 {
|
||
position: relative;
|
||
width: 14.25rem;
|
||
height: 7.125rem;
|
||
background-color: #fff;
|
||
}
|
||
.report .box-bottom .msgList .module2 .dataList {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 14.25rem;
|
||
height: 5.75rem;
|
||
/* background-color: skyblue; */
|
||
}
|
||
::v-deep .el-table__inner-wrapper {
|
||
width: 14.25rem;
|
||
height: 5.75rem;
|
||
}
|
||
::v-deep .el-table__row {
|
||
height: .8rem;
|
||
}
|
||
::v-deep thead {
|
||
height: .8rem;
|
||
background: pink !important;
|
||
}
|
||
/* ::v-deep .el-table_1_column_1 {
|
||
width: 1rem;
|
||
} */
|
||
.report .box-bottom .msgList .module2 .pagination {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 14.25rem;
|
||
height: 1rem;
|
||
padding-left: 0.2rem;
|
||
/* background-color: skyblue; */
|
||
}
|
||
.report .box-bottom .msgList .module2 .pagination ::v-deep .el-pagination {
|
||
height: 1rem;
|
||
}
|
||
.report .box-bottom .box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 15rem;
|
||
height: 9.4rem;
|
||
padding: .25rem .375rem;
|
||
background-color: #FFEFD5;
|
||
border-radius: .25rem;
|
||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
-moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
box-shadow: 0 0 5px rgba(0,0,0,.2);
|
||
}
|
||
.box .thisTitle1 {
|
||
width: 14.25rem;
|
||
height: .5rem;
|
||
line-height: .5rem;
|
||
/* background-color: pink; */
|
||
}
|
||
.box .thisTitle1 span i {
|
||
cursor: pointer;
|
||
}
|
||
.box .thisTitle1 span i:hover {
|
||
color: red;
|
||
}
|
||
.box .report-content {
|
||
width: 14.25rem;
|
||
height: 7.15rem;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.box .report-content textarea {
|
||
resize: none;
|
||
width: 14.25rem;
|
||
height: 7.15rem;
|
||
background-color: #FFF;
|
||
font-size: .225rem;
|
||
color: #333;
|
||
border-radius: .05rem;
|
||
border: .0125rem solid transparent;
|
||
padding: .25rem;
|
||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
/* margin-bottom: 12px; */
|
||
/* -webkit-appearance: none; */
|
||
outline: 0;
|
||
}
|
||
.box ul {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-content: center;
|
||
width: 14.25rem;
|
||
height: 1.25rem;
|
||
/* background-color: pink; */
|
||
}
|
||
.box ul li {
|
||
/* border: 1px solid red; */
|
||
width: 4.375rem;
|
||
height: .75rem;
|
||
margin: .25rem 0;
|
||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
}
|
||
.box ul li input {
|
||
width: 4.375rem;
|
||
height: .75rem;
|
||
padding: .25rem;
|
||
border: none;
|
||
border-radius: .05rem;
|
||
background-color: #FFF;
|
||
font-size: .2rem;
|
||
/* background-color: transparent; */
|
||
/* margin-bottom: 12px; */
|
||
color: #999999;
|
||
}
|
||
.box ul li input::-webkit-input-placeholder {
|
||
color: #999999
|
||
}
|
||
.box ul li:nth-child(1) {
|
||
position: relative;
|
||
/* width: 440px; */
|
||
height: .75rem;
|
||
/* margin-bottom: 12px; */
|
||
/* background-color: pink; */
|
||
}
|
||
.box ul li:nth-child(2) {
|
||
/* width: 440px; */
|
||
height: .75rem;
|
||
/* margin-bottom: 12px; */
|
||
}
|
||
.box ul li:nth-child(1) input {
|
||
position: absolute;
|
||
}
|
||
.box ul li:nth-child(1) span {
|
||
position: absolute;
|
||
right: 0;
|
||
display: block;
|
||
width: 1.5rem;
|
||
height: .75rem;
|
||
line-height: .75rem;
|
||
text-align: center;
|
||
/* background-color: pink; */
|
||
cursor: pointer;
|
||
color: #f77437;
|
||
}
|
||
.box ul li:nth-child(1) span:hover {
|
||
opacity: 0.5;
|
||
}
|
||
.box ul li:nth-child(3) {
|
||
width: 3.75rem;
|
||
height: .75rem;
|
||
margin: .25rem 0;
|
||
/* margin-top: 30px; */
|
||
}
|
||
.box ul li:nth-child(3) button {
|
||
width: 3.75rem;
|
||
height: .75rem;
|
||
border: none;
|
||
border-radius: .05rem;
|
||
background-color: #fcbb53;
|
||
font-size: .25rem;
|
||
color: #FFF;
|
||
cursor: pointer;
|
||
}
|
||
.box ul li:nth-child(3) button:hover,
|
||
.success button:hover {
|
||
font-size: .3rem;
|
||
font-weight: 700;
|
||
}
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 100000;
|
||
overflow: hidden;
|
||
}
|
||
.success {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 5.75rem;
|
||
height: 5.75rem;
|
||
padding: .25rem .375rem;
|
||
background-color: #fff;
|
||
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
|
||
}
|
||
.success i {
|
||
display: block;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
margin: .1875rem 1.25rem;
|
||
background: url(/assets/img/report-icon.png) no-repeat;
|
||
background-size: cover;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.success p {
|
||
display: block;
|
||
height: .375rem;
|
||
line-height: .375rem;
|
||
text-align: center;
|
||
font-size: .225rem;
|
||
}
|
||
.success button {
|
||
width: 5rem;
|
||
height: .625rem;
|
||
margin-top: .5rem;
|
||
border: none;
|
||
border-radius: .05rem;
|
||
background-color: #01b2aa;
|
||
font-size: .25rem;
|
||
color: #FFF;
|
||
cursor: pointer;
|
||
}
|
||
.success button a {
|
||
color: #FFF;
|
||
}
|
||
.success .again {
|
||
position: absolute;
|
||
bottom: .3rem;
|
||
right: .375rem;
|
||
color: #333;
|
||
cursor: pointer;
|
||
}
|
||
.success .again:hover {
|
||
color: red;
|
||
}
|
||
</style> |