<!-- 发布举报 -->
<template>
<view class="report">
<image src="../../static/index/back.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
<view class="title-area">
<image :src="`${reportIcon}`" style="width: 80rpx;height: 80rpx;" mode=""></image>
<view class="title">
<text>
举报类目：
</text>
<text class="title-text">{{typeMap[reportType]}}</text>
</view>
</view>
<view class="content-area">
<view class="content">
<u--form
labelPosition="left"
:model="form"
:rules="rules"
labelWidth="100"
ref="form">
<u-form-item label="举报人" borderBottom @click="message('举报人')">
<u--input
v-model="reportName"
border="none"
disabled
></u--input>
</u-form-item>
<u-form-item label="手机号" prop="phone" borderBottom :required="true">
<u--input placeholder="请输入手机号" v-model="form.phone" border="none" clearable></u--input>
</u-form-item>
<u-form-item label="举报类型" prop="type" borderBottom :required="true" @click="typeShow=true">
<u--input placeholder="请选择举报类型" suffixIcon="arrow-right" disabled v-model="form.type" border="none"></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other'" label="信息来源" prop="source" borderBottom :required="true" @click="infoSourceShow=true">
<u--input placeholder="请选择信息来源" suffixIcon="arrow-right" disabled v-model="form.source" border="none"></u--input>
</u-form-item>
<u-form-item v-if="reportType !== 'other'" label="网站网址" prop="url" borderBottom :required="true">
<u--input
placeholder="请输入网站网址"
v-model="form.url"
border="none"
clearable
></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'special'" label="专题" borderBottom @click="message('专题')">
<u--input
v-model="form.zt"
border="none"
disabled
></u--input>
</u-form-item>
<u-form-item label="新媒体" prop="isNewMedia" borderBottom>
<u-radio-group v-model="form.isNewMedia" placement="row">
<u-radio activeColor="#408bf6" label="是" :name="true"></u-radio>
<u-radio activeColor="#408bf6" label="否" :name="false"></u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="内容描述" prop="desc" borderBottom :required="true">
<u--textarea
v-model="form.desc"
placeholder="描述不超过200个字符"
autoHeight
maxlength='200'
:showConfirmBar='true'
></u--textarea>
</u-form-item>
<u-form-item v-if="reportType !== 'other'" label="发布人" prop="publishName" borderBottom :required="true">
<u--input
placeholder="请输入发布人"
v-model="form.publishName"
border="none"
clearable
></u--input>
</u-form-item>
<u-form-item v-if="reportType !== 'other'" label="发布人ID" prop="publishId" borderBottom :required="true">
<u--input
placeholder="请输入发布人ID"
v-model="form.publishId"
border="none"
clearable
></u--input>
</u-form-item>
<u-form-item v-if="reportType !== 'other'" label="发布平台" prop="place" borderBottom :required="true" @click="placeShow=true">
<u--input placeholder="请选择发布平台" suffixIcon="arrow-right" disabled v-model="form.place" border="none"></u--input>
</u-form-item>
<u-form-item label="内容截图" prop="picture" borderBottom :required="true">
<u-upload
accep="image"
:fileList="form.picture"
@afterRead="afterRead"
@delete="deletePic"
name="1"
:deletable="true"
:maxCount="10"
:previewFullImage="true"
></u-upload>
</u-form-item>
<u-form-item v-if="reportType === 'other'" label="附件" prop="affix" borderBottom>
<view>
<text style="word-break: break-all;color: red;display: block;margin-bottom: 16rpx;font-size: 26rpx;">50M以内，类型：mp4,avi,wma,rmvb,mp3,xls,xlsx,doc,docx</text>
<uni-file-picker
v-model="form.affix"
limit="1"
file-mediatype="all"
file-extname="mp4,avi,wma,rmvb,mp3,xls,xlsx,doc,docx"
ref="affix"
@select="affixUpload"
></uni-file-picker>
</view>
</u-form-item>
</u--form>
</view>
</view>
<view class="button-bottom">
<view class="button button-left" @click="submit">举 报</view>
<view class="button button-right" @click="reset">重 置</view>
</view>
<!-- 发布平台 -->
<u-picker
ref="uPicker"
:show="placeShow"
:columns="placeColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmPlace"
@change="changeHandler"
immediateChange
></u-picker>
<!-- 举报类型 -->
<u-picker
:show="typeShow"
:columns="reportTypeColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmReportType"
></u-picker>
<!-- 信息来源 -->
<u-picker
:show="infoSourceShow"
:columns="infoSourceColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmInfoSource"
></u-picker>
<!-- 举报须知 -->
<Message
:show="showMessage"
title="举报须知"
:content="messageContent"
@close="close"
@refuse="refuse"/>
</view>
</template>
<script>
import { getLocationParams } from '../../common/utils.js';
import Message from '../../components/base/message.vue';
export default {
components: {
Message
},
data() {
return {
messageContent: '互联网违法不良信息公众举报平台以高度的责任感对待每一条公众举报内容。举报平台核查线索后，及时将违法和不良信息转交执法部门处置，或通知网站清理，举报人可通过提交举报时反馈的查询码在举报查询中查询处理进度。',
showMessage: false, //举报须知弹窗显隐
reportType: '', //举报类型
reportIcon: '', //举报icon url
typeMap: {
web: '网站类型举报',
special: '专项举报',
other: '其他类型举报',
},
rules: {
// 手机号验证规则
'phone': [
{
required: true,
message: '请输入手机号',
trigger: ['change','blur'],
},
{
// 自定义验证函数
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '请输入正确的手机号',
// 触发器可以同时用blur和change
trigger: ['change','blur'],
}
],
// 举报类型
'type': [
{
type: 'string',
required: true,
message: '请选择举报类型',
trigger: ['blur', 'change']
},
],
//信息来源
'source': [
{
type: 'string',
required: true,
message: '请选择举报类型',
trigger: ['blur', 'change']
},
],
//网站网址
'url': [
{
type: 'string',
required: true,
message: '请输入网站网址',
trigger: ['change','blur'],
},
{
validator: (rule, value, callback) => {
return uni.$u.test.url(value);
},
message: '请输入正确的网址',
trigger: ['change','blur'],
}
],
// 描述
'desc': [
{
type: 'string',
required: true,
message: '请输入内容描述',
trigger: ['blur', 'change']
},
],
// 发布人
'publishName': [
{
type: 'string',
required: true,
message: '请填写确认密码',
trigger: ['blur', 'change']
},
],
// 发布人ID
'publishId': [
{
type: 'string',
required: true,
message: '请输入发布人ID',
trigger: ['change','blur'],
},
],
// 发布平台
'place': [
{
type: 'string',
required: true,
message: '请选择发布平台',
trigger: ['blur', 'change']
},
],
// 内容截图
'picture': [
{
type: 'array',
required: true,
message: '请添加内容截图',
trigger: ['blur', 'change']
},
],
},
reportName: '', //举报人
form: {
phone: '', //手机号
type: '', //举报类型
url: '', //网站网址
zt: '涉疆扫黑除恶', //专题
isNewMedia: false, //是否是新媒体
desc: '', //内容描述
publishName: '', //发布人
publishId: '', //发布人id
place: '', //发布平台
picture: [], //内容截图
source: '', //信息来源
affix: [], //附件
},
typeShow: false, //控制举报类型显隐
reportTypeColumns: [[ //举报类型
{
id: 'sldrl',
label: '涉领导人类'
},
{
id: 'sdjzl',
label: '涉党军政类'
},
{
id: 'sbskl',
label: '涉爆涉恐类'
},
{
id: 'mzzjl',
label: '民族宗教类'
},
{
id: 'zjzcl',
label: '治疆政策类'
},
{
id: 'sjasjl',
label: '涉疆案（事）件类'
},
{
id: 'ggaql',
label: '公共安全类'
},
{
id: 'zzrsl',
label: '组织人事类'
},
{
id: 'shmsl',
label: '社会民生类'
},
{
id: 'qtl',
label: '其他类'
},
]],
placeShow: false, //控制发布平台显隐
placeColumns: [ //发布平台第一列数据
['微博', '微信和QQ', '论坛、贴吧', '博客', '音视频', 'PC新闻', '普通网站', '客户端新闻和WAP新闻'],
['新浪微博', '腾讯微博'],
],
placeColumnsData: [ //发布平台第二列数据
['新浪微博', '腾讯微博'],
['微信公众号', 'QQ空间、群', '微信个人号'],
['贴吧', '普通网站', '天涯', '凯迪'],
['新浪博客', '腾讯博客'],
['抖音', '火山小视频', '西瓜视频', '哔哩哔哩', '快手'],
['普通网站', '新浪', '腾讯', '网易', '搜狐', '今日头条'],
['普通网站', '百度', '百度文库', '知乎', '搜狗问问', '小红书', '境外网站'],
['新浪', '腾讯', '网易', '搜狐', '今日头条', '普通网站'],
],
infoSourceColumns: [[
{
id: 'chart',
label: '聊天工具'
},
{
id: 'APP',
label: '移动APP'
},
{
id: 'wp',
label: '网盘'
},
{
id: 'ssyq',
label: '搜索引擎'
},
{
id: 'other',
label: '其他'
},
]],
infoSourceShow: false, //控制举报类型显隐
}
},
mounted() {
this.reportType = getLocationParams('reportType');
this.reportIcon = decodeURIComponent(getLocationParams('icon'));
console.log(this.reportIcon)
//在这里先获取举报人信息，有举报人正常，没有举报人提示去注册
},
onReady() {
this.showMessage = true; //显示举报须知
this.$refs.form.setRules(this.rules);
},
methods: {
//点击选择器取消按钮
cancle() {
this.typeShow = false;
this.placeShow = false;
this.infoSourceShow = false;
},
//多列联动
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
// 微信小程序无法将picker实例传出来，只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例，变化第二列对应的选项
picker.setColumnValues(1, this.placeColumnsData[index])
}
},
//确定举报类型
confirmReportType(val) {
this.cancle();
this.form.type = val.value[0].label;
console.log(val.value[0].label)
},
//确定发布平台
confirmPlace(val) {
this.cancle();
this.form.place = val.value[1];
console.log(val.value[1])
},
//确定选择信息来源
confirmInfoSource(val) {
this.cancle();
this.form.source = val.value[0].label;
},
// 删除图片
deletePic(event) {
this.form.picture.splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.form.picture.length
lists.map((item) => {
this.form.picture.push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this.form.picture[fileListLen]
this.form.picture.splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = wx.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
//图片张数
// 'length': 上边的filelist.length
},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
},
//点击举报
submit() {
if(this.form.reportName === '') {
wx.showToast({
title: '请先注册',
icon: 'none',
duration: 2000
})
setTimeout(() => {
wx.navigateTo({
url: '/packageA/pages/register/register'
})
}, 2000)
} else {
this.$refs.form.validate().then(res => {
uni.$u.toast('举报成功')
wx.navigateTo({
url: '/packageA/pages/myReport/myReport'
})
}).catch(errors => {
uni.$u.toast('请将信息填写完整')
})
}
},
//点击重置
reset() {
for(let key in this.form) {
if(key !== 'zt') {
let type = typeof this.form[key];
if(type === 'string') {
this.form[key] = '';
} else if(type === 'object') {
this.form[key] = []
} else if(type === 'boolean') {
this.form[key] = false
}
}
}
this.$refs.affix.clearFiles(); //清除附件
},
//提醒禁止修改举报人
message(val) {
wx.showToast({
title: `不允许修改${val}`,
icon: 'none',
duration: 2000
})
},
//拒绝举报须知
refuse(val) {
wx.navigateBack() // 返回上一页
},
close(val) {
this.showMessage = val;
},
//附件上传
affixUpload(val) {
console.log('------', val)
wx.uploadFile({
url: '你的接口地址',
filePath: tempFilePaths[0].path,
name: "file",
formData: {
token: '123', // 这里是传给后端的参数
},
success: (res) => {
const req = JSON.parse(res.data);
alert(req.msg);
},
fail: (err) => {
console.log("出错了");
console.log(err);
alert("上传失败");
},
});
// wx.chooseMessageFile({
// count: 1,
// success: (res) => {
// const tempFilePaths = res.tempFiles;
// console.log('上传的文件', tempFilePaths)
// if(tempFilePaths[0].size > 50 * 1024 * 1024) {
// wx.showToast({
// title: `文件不允许大于50M`,
// icon: 'none',
// duration: 3000
// })
// } else {
// let isPass = tempFilePaths[0].path.indexOf(".mp4") > -1 ||
// tempFilePaths[0].path.indexOf(".avi") > -1 ||
// tempFilePaths[0].path.indexOf(".wma") > -1 ||
// tempFilePaths[0].path.indexOf(".rmvb") > -1 ||
// tempFilePaths[0].path.indexOf(".mp3") > -1 ||
// tempFilePaths[0].path.indexOf(".xls") > -1 ||
// tempFilePaths[0].path.indexOf(".xlsx") > -1 ||
// tempFilePaths[0].path.indexOf(".doc") > -1 ||
// tempFilePaths[0].path.indexOf(".docx") > -1 ||
// console.log(isPass)
// if(!isPass) {
// wx.showToast({
// title: `只允许上传 mp4,avi,wma,rmvb,mp3,xls,xlsx,doc,docx类型`,
// icon: 'none',
// duration: 5000
// })
// } else {
// wx.uploadFile({
// url: '你的接口地址',
// filePath: tempFilePaths[0].path,
// name: "file",
// formData: {
// token: '123', // 这里是传给后端的参数
// },
// success: (res) => {
// const req = JSON.parse(res.data);
// alert(req.msg);
// },
// fail: (err) => {
// console.log("出错了");
// console.log(err);
// alert("上传失败");
// },
// });
// }
// }
// },
// });
},
}
}
</script>
<style lang="scss" scoped>
.report {
box-sizing: border-box;
padding: 20rpx;
padding-bottom: 60rpx;
.title-area {
display: flex;
align-items: center;
padding: 20rpx;
color: #fff;
.title {
margin-left: 32rpx;
.title-text {
font-weight: 600;
}
}
}
.content-area {
padding: 20rpx;
.content {
background-color: #fff;
border-radius: 16rpx;
padding: 50rpx 20rpx;
box-sizing: border-box;
}
}
.button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx;
color: #fff;
font-weight: 600;
letter-spacing: 4rpx;
background-color: #408bf6;
border: 2rpx solid #408bf6;
border-radius: 10rpx;
margin: 64rpx 0 32rpx 0;
white-space: nowrap;
box-sizing: border-box;
&:active {
background-color: #fff;
color: #408bf6;
}
}
.button-bottom {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 40rpx;
.button-left {
width: fit-content;
padding: 20rpx 64rpx;
margin-top: 0;
}
.button-right {
width: fit-content;
font-weight: 500;
padding: 20rpx 64rpx;
margin-top: 0;
color: #408bf6;
background-color: #fff;
&:active {
background-color: #d5e0ea;
font-weight: 600;
}
}
}
}
</style>
<style lang="scss">
.report {
.u-form-item__body {
// padding: 40rpx 0 !important;
}
.u-toolbar__wrapper__confirm {
color: #408bf6 !important;
}
.u-radio {
margin-right: 54rpx;
}
.u-form-item__body__left__content__label {
white-space: nowrap;
font-weight: 600;
}
.u-form-item__body__right__content__slot {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.u-input--radius, .u-input--square {
background-color: transparent !important;
}
}
</style>
<style>
page {
background-color: #f0f0f0;
}
</style>
