<!-- 发布举报 -->
<template>
<view class="report">
<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
<view class="tab-area" v-if="reportType !== 'special'">
<u-tabs
:list="tabList"
:scrollable="false"
:current="currentTab"
lineColor="#fff"
lineWidth="50"
lineHeight="5"
:activeStyle="{
color: '#fff',
fontWeight: 'bold',
}"
:inactiveStyle="{
color: '#fff',
fontWeight: 'bold',
}"
@click="clickTab">
</u-tabs>
</view>
<view class="title-area" v-else >
<image :src="`${reportIcon}`" style="width: 80rpx;height: 80rpx;" mode=""></image>
<view class="title">
<text>
举报类目：
</text>
<text class="title-text">{{typeLabel}} </text>
<text class="title-text" v-if="label"> - </text>
<text class="title-text" v-if="label"> {{label}}</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 prop='reportName'>
<u--input
v-model="form.reportName"
placeholder="请输入举报人"
border="none"
></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 v-if="reportType === 'special'" label="举报类型" prop="type" borderBottom :required="true" @click="typeShow=true">
<u--input placeholder="请选择举报类型" suffixIcon="arrow-right" disabled v-model="form.reportType" border="none"></u--input>
</u-form-item> -->
<u-form-item label="举报类型" borderBottom>
<u--input placeholder="举报类型" disabled v-model="label" 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' && form.source=== '聊天工具'" prop="toolname" label="工具名称" borderBottom :required="true" @click="infoToolShow=true">
<u--input placeholder="请选择聊天工具" suffixIcon="arrow-right" disabled v-model="form.toolname" border="none"></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other' && form.source=== '聊天工具'" prop="toolcount" label="对应账号" borderBottom :required="true">
<u--input placeholder="请输入对应账号" v-model="form.toolcount" ></u--input>
</u-form-item>
<!-- app -->
<u-form-item v-if="reportType === 'other' && form.source=== '移动APP'" label="App名称" prop="toolname" borderBottom :required="false">
<u--input placeholder="请输入App名称" v-model="form.toolname" ></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other' && form.source=== '移动APP'" label="下载源" prop="toolcount" borderBottom :required="false" @click="infoDownloadShow=true">
<u--input placeholder="请选择下载源" suffixIcon="arrow-right" disabled v-model="form.toolcount" border="none"></u--input>
</u-form-item>
<!-- 网盘 -->
<u-form-item v-if="reportType === 'other' && form.source=== '网盘'" label="网盘" prop="toolcount" borderBottom :required="false" @click="infoNetworkShow=true">
<u--input placeholder="请选择网盘" suffixIcon="arrow-right" disabled v-model="form.toolcount" border="none"></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other' && form.source=== '网盘'" label="网盘账号" prop="toolname" borderBottom :required="false">
<u--input placeholder="请输入网盘账号" v-model="form.toolname" ></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other' && form.source=== '网盘'" label="网盘地址" prop="tooldesc" borderBottom :required="false">
<u--input placeholder="请输入网盘地址" v-model="form.tooldesc" ></u--input>
</u-form-item>
<!-- 搜索引擎 -->
<u-form-item v-if="reportType === 'other' && form.source=== '搜索引擎'" label="搜索引擎" prop="tooldesc" borderBottom :required="false">
<u--input placeholder="请输入搜索引擎" v-model="form.tooldesc" ></u--input>
</u-form-item>
<u-form-item v-if="reportType === 'other' && form.source=== '搜索引擎'" label="关键字" prop="toolcount" borderBottom :required="false">
<u--input placeholder="请输入关键字" v-model="form.toolcount"></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>
<!-- @click="ztShow=true" -->
<u-form-item v-if="reportType === 'special'" placeholder="请选择专题" label="专题" borderBottom>
<u--input
v-model="form.zt"
border="none"
disabled
suffixIcon="arrow-right"
></u--input>
</u-form-item>
<!-- 专题类别 -->
<u-form-item v-if="form.zt === '网络数据安全和个人信息保护'" label="专题类别" borderBottom>
<u-radio-group v-model="specialType" placement="row">
<u-radio activeColor="#408bf6" label="网络数据安全" name="1"></u-radio>
<u-radio activeColor="#408bf6" label="个人信息" name="0"></u-radio>
</u-radio-group>
</u-form-item>
<!-- 网络数据安全 -->
<u-form-item label=" " v-if="specialType === '1'">
<view class="checkbox-custom">
<u-checkbox-group :wrap="true" @change="checkboxChange" >
<u-checkbox
style="padding: 5px; 0px"
:wrap="true"
v-model="item.checked"
v-for="(item, index) in specialTypeNetworkList" :key="index"
:name="item.name"
:label="item.name"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</view>
</u-form-item>
<!-- 个人信息 -->
<u-form-item v-if="specialType === '0'" label=" ">
<view class="checkbox-custom">
<u-checkbox-group :wrap="true" @change="checkboxChange" >
<u-checkbox
style="padding: 5px; 0px"
:wrap="true"
v-model="item.checked"
v-for="(item, index) in specialTypeInfoList" :key="index"
:name="item.name"
:label="item.name"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</view>
</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="1"></u-radio>
<u-radio activeColor="#408bf6" label="否" name="0"></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-item label="验证码" prop="code" borderBottom :required="true">
<u--input
placeholder="验证码"
v-model="form.code"
border="none"
></u--input>
<image :src="codeUrl" style="width: 140px;height: 60px;" @click="updateImageCode"></image>
</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="ztShow"
:columns="ztList"
keyName="label"
@cancel ="cancle"
@confirm="confirmzt"
:disabled="true"
></u-picker>
<!-- 信息来源 -->
<u-picker
:show="infoSourceShow"
:columns="infoSourceColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmInfoSource"
></u-picker>
<!-- 网盘 -->
<u-picker
:show="infoNetworkShow"
:columns="infoNetworkColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmNetworkSource"
></u-picker>
<!-- 聊天工具 -->
<u-picker
:show="infoToolShow"
:columns="infoToolColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmToolSource"
></u-picker>
<!-- 下载源 -->
<u-picker
:show="infoDownloadShow"
:columns="infoDownloadColumns"
keyName="label"
@cancel ="cancle"
@confirm="confirmDownloadSource"
></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';
import { createUrl, websiteUrlRepeat, webReport, webReportPost, getSpecial} from '@/api/tort.js'
import { decryption } from '../../api/mine.js'
export default {
components: {
Message
},
watch: {
'form.source':{
handler(newVal) {
this.form.toolcount = ''
this.form.toolname = ''
this.form.tooldesc = ''
},
},
},
data() {
return {
specialType:'3',
specialTypeNetwork: '',
infoToolShow: false,
infoDownloadShow: false,
infoNetworkShow: false,
listStr:'',
specialTypeNetworkList: [
{
name: '数据处理者未落实国家有关法律法规要求，数据安全管理和技术保护手段不到位导致的网络数据安全风险隐患',
checked: false,
disabled: false
},
{
name: '发生非法操作、网络攻击、盗窃勒索等导致的网络数据安全事件',
checked: false,
disabled: false
},
{
name: '网络数据安全违法行为',
checked: false,
disabled: false
},
{
name: '其他涉及网络数据安全的事项',
checked: false,
disabled: false
}
],
specialTypeInfo: '',
specialTypeInfoList: [
{
name: 'App未公开收集使用规则',
checked: false,
disabled: false
},
{
name: 'App未明示收集使用个人信息的目的、方式和范围',
checked: false,
disabled: false
},
{
name: 'App未经用户同意收集使用个人信息',
checked: false,
disabled: false
},
{
name: 'App违反必要原则，收集与其提供的服务无关的个人信息',
checked: false,
disabled: false
},
{
name: 'App未经同意向他人提供个人信息',
checked: false,
disabled: false
},
{
name: 'App未按法律规定提供删除或更正个人信息功能',
checked: false,
disabled: false
},
{
name: 'App未公布投诉、举报方式等信息',
checked: false,
disabled: false
},
{
name: '违法处理个人信息或处理个人信息未履行法定义务违法违规处理不满十四周岁未成年人个人信息',
checked: false,
disabled: false
},
{
name: '其他',
checked: false,
disabled: false
}
],
ztShow: '', // 专题选择框弹出
timeStr: '', // 验证码时间戳
codeUrl: '', // 验证码图片
specialIndex: '',
currentTab: '0',
ztList: [], // 专题
messageContent: '互联网违法不良信息公众举报平台以高度的责任感对待每一条公众举报内容。举报平台核查线索后，及时将违法和不良信息转交执法部门处置，或通知网站清理，举报人可通过提交举报时反馈的查询码在举报查询中查询处理进度。',
showMessage: false, //举报须知弹窗显隐
typeLabel: '', //举报类型名称
reportType: '', //举报类型 web special other
reportIcon: '', //举报icon url
label: '', //举报类目
typeMap: {
web: '网站类型举报',
special: '专项举报',
// others: '其他类型举报',
},
typeMapDict: {
web: 0,
special: 5,
// others: 1,
},
tabList: [
{
name: '网站类型举报',
id: 'web'
},
{
name: '其他类型举报',
id: 'other'
},
],
rules: {
//举报人
'reportName': [
{
type: 'string',
required: true,
min: 2,
max: 32,
message: '长度在 2~32 之间',
trigger: ['change','blur'],
},
],
// 手机号验证规则
'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']
},
],
'toolcount': [
{
type: 'string',
required: true,
message: '必填项',
trigger: ['blur', 'change']
},
],
'toolname': [
{
type: 'string',
required: true,
message: '必填项',
trigger: ['blur', 'change']
},
],
'tooldesc': [
{
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) => {
if(uni.$u.test.url(value)) {
// this.createWebUrl().then(res => {
// console.log('3333', res)
// })
}
return uni.$u.test.url(value);
},
message: '请输入正确的网址http://www.xxx.com',
trigger: ['change','blur'],
}
],
// 描述
'desc': [
{
type: 'string',
required: true,
message: '请输入内容描述',
trigger: ['blur', 'change']
},
],
// 描述
'code': [
{
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']
},
],
},
form: {
reportName: '', //举报人
phone: '', //手机号
type: '', //举报类型
url: '', //网站网址
zt: '', //专题
isNewMedia: '0', //是否是新媒体
desc: '', //内容描述
publishName: '', //发布人
publishId: '', //发布人id
place: '', //发布平台
picture: [], //内容截图
topicId: '', // 专题id
source: '', //信息来源
affix: [], //附件
reportType: '', // 举报类型上传字段
publishPlat: '', // 发布平台上传字段
sendPicture: [], //内容截图上传数据
code: '', // 验证码
toolname:'',
toolcount: '',
tooldes: '',
},
typeShow: false, //控制举报类型显隐
reportTypeColumns: [[ //举报类型
{
id: '1',
label: '政治安全类'
},
{
id: '2',
label: '涉党政军类'
},
{
id: '3',
label: '涉爆涉恐类'
},
{
id: '4',
label: '民族宗教类'
},
{
id: '5',
label: '治疆政策类'
},
{
id: '6',
label: '涉疆案（事）件类'
},
{
id: '7',
label: '公共安全类'
},
{
id: '8',
label: '组织人事类'
},
{
id: '9',
label: '社会民生类'
},
{
id: '10',
label: '其他类'
},
]],
placeShow: false, //控制发布平台显隐
placeColumns: [ //发布平台第一列数据
['微博', '微信和QQ', '论坛、贴吧', '博客', '音视频', 'PC新闻', '普通网站', '客户端新闻和WAP新闻'],
['新浪微博', '腾讯微博'],
],
placeColumnsData: [ //发布平台第二列数据
['新浪微博', '腾讯微博'],
['微信公众号', 'QQ空间、群', '微信个人号'],
['贴吧', '普通网站', '天涯', '凯迪'],
['新浪博客', '腾讯博客'],
['抖音', '火山小视频', '西瓜视频', '哔哩哔哩', '快手', '优酷', '土豆', '阳光宽视频', '百度好看视频', '微视', '普通网站', '喜马拉雅'],
['普通网站', '新浪', '腾讯', '网易', '搜狐', '今日头条'],
['普通网站', '百度', '百度文库', '知乎', '搜狗问问', '小红书', '境外网站'],
['新浪', '腾讯', '网易', '搜狐', '今日头条', '普通网站'],
],
infoSourceColumns: [[
{
id: 'chart',
label: '聊天工具',
key: '1'
},
{
id: 'APP',
label: '移动APP',
key: '2'
},
{
id: 'wp',
label: '网盘',
key: '3'
},
{
id: 'ssyq',
label: '搜索引擎',
key: '4'
},
{
id: 'other',
label: '其他',
key: '5'
},
]],
infoToolColumns: [[
{
label: 'QQ',
key: '1',
id:0,
},
{
label: '陌陌',
key: '2',
id:1,
},
{
label: '微信',
key: '3',
id:2,
},
{
label: 'YY',
key: '4',
id:3,
},
{
label: 'MSN',
key: '5',
id:4,
},
{
label: '其他',
key: '6',
id:4,
},
]],
infoDownloadColumns: [[
{
label: '安卓市场',
key: '1'
},
{
label: '安智市场',
key: '2'
},
{
label: '应用宝',
key: '3'
},
{
label: '360手机助手',
key: '4'
},
{
label: '小米市场',
key: '5'
},
{
label: '华为市场',
key: '6'
},
{
label: '百度手机助手',
key: '7'
},
{
label: '91助手',
key: '8'
},
{
label: '豌豆荚',
key: '9'
},
{
label: '历趣',
key: '10'
},
{
label: '沃商店',
key: '11'
},
{
label: '其他',
key: '12'
},
]],
infoNetworkColumns: [[
{
label: '金山',
key: '1'
},
{
label: '115',
key: '2'
},
{
label: '淘云盘',
key: '3'
},
{
label: '华为',
key: '4'
},
{
label: '百度云',
key: '5'
},
{
label: '360网盘',
key: '6'
},
{
label: '新浪',
key: '7'
},
{
label: '腾讯',
key: '8'
},
{
label: '其他',
key: '12'
},
]],
infoSourceShow: false, //控制举报类型显隐
// 发布平台字典
map: {
'0-0': '1,1', // 微博-新浪微博
'0-1': '1,13',
'1-0': '2,4',
'1-1': '2,5',
'1-2': '2,14',
'2-0': '3,2',
'2-1': '3,6',
'2-2': '3,15',
'2-3': '3,16',
'3-0': '4,23',
'3-1': '4,24',
'4-0': '5,7',
'4-1': '5,8',
'4-2': '5,9',
'4-3': '5,10',
'4-4': '5,12',
'4-5': '5,25',
'4-6': '5,26',
'4-7': '5,27',
'4-8': '5,28',
'4-9': '5,29',
'4-10': '5,30',
'4-11': '5,31',
'5-0': '6,11',
'5-1': '6,32',
'5-2': '6,33',
'5-3': '6,34',
'5-4': '6,35',
'5-5': '6,36',
'6-0': '7,3',
'6-1': '7,17',
'6-2': '7,18',
'6-3': '7,19',
'6-4': '7,20',
'6-5': '7,21',
'6-6': '7,22',
'7-0': '8,37',
'7-1': '8,38',
'7-2': '8,39',
'7-3': '8,40',
'7-4': '8,41',
'7-5': '8,42',
},
}
},
async mounted() {
this.fetchSpecial() // 获取专题
this.fetchCodeURl() // 获取验证码
this.form.reportType = getLocationParams('reportTypeValue'); // 举报类型接口传参
this.reportType = 'web' // 前端控制举报类型 web special other
this.form.type = getLocationParams('reportType'); //
this.typeLabel = this.typeMap[ this.form.type ]
this.reportIcon = decodeURIComponent(getLocationParams('icon'));
this.label = decodeURIComponent(getLocationParams('label'));
//在这里先获取举报人信息，有举报人正常，没有举报人提示去注册
// 自动填充举报人信息
const userinfo = wx.getStorageSync('userInfoxj')
const account = await decryption(userinfo.account)
const phone = await decryption(userinfo.phone)
this.form.reportName = account && account !== 'undefined' ? account : ''
this.form.phone = phone && phone !== 'undefined' ? phone : ''
},
onReady() {
const hiddenMes = decodeURIComponent(getLocationParams('hiddenMessage'))
if (hiddenMes== 'true') {
this.showMessage = false
this.label = '侵权类'
} else {
this.showMessage = true; //显示举报须知
}
this.$refs.form.setRules(this.rules);
},
onLoad(options) {
console.log(options, 'options')
// 专项举报infoSource
if (options.reportType === 'special') {
// console.log(options.index, 'index')
this.specialIndex = options.index
}
},
methods: {
checkboxChange(e) {
this.listStr = e
},
//获取专题列表
fetchSpecial() {
getSpecial({topicSign: '1'}).then(res => {
this.ztList = []
this.ztList = res.map(item => {
return {
...item,
label: item.topicTitle,
id: item.topicId
}
})
this.ztList = [this.ztList]
if(getLocationParams('reportType') === 'special') {
const data = res.map(item => {
return {
...item,
label: item.topicTitle,
id: item.topicId
}
})
const val = data[this.specialIndex]
this.form.topicId = val.id
this.form.zt = val.label
}
})
},
// 选好专题
confirmzt(val) {
this.form.topicId = val.value[0].id; // 专题
this.form.zt = val.value[0].label; // 专题
this.ztShow = false
},
// 点击tab
async clickTab(e) {
console.log(e)
this.reportType = e.id
this.form = {
reportName: '', //举报人
phone: '', //手机号
type: '', //举报类型
url: '', //网站网址
zt: '', //专题
isNewMedia: '0', //是否是新媒体
desc: '', //内容描述
publishName: '', //发布人
publishId: '', //发布人id
place: '', //发布平台
picture: [], //内容截图
source: '', //信息来源
affix: [], //附件
reportType: this.form.reportType, // 举报类型上传字段
publishPlat: '', // 发布平台上传字段
sendPicture: [], //内容截图上传数据
code: '', // 验证码
}
// 自动填充举报人信息
const userinfo = wx.getStorageSync('userInfoxj')
const account = await decryption(userinfo.account)
const phone = await decryption(userinfo.phone)
this.form.reportName = account && account !== 'undefined' ? account : ''
this.form.phone = phone && phone !== 'undefined' ? phone : ''
},
// 换验证码
updateImageCode() {
this.fetchCodeURl()
},
// 获取验证码
fetchCodeURl() {
var that = this
that.timeStr = new Date().getTime()
wx.request({
url: 'https://www.xjwljb.com/webserver/captchaController/generateVerifyCodeOfReport.do',
method: 'GET',
data: {
timeStr: that.timeStr
},
success(res) {
if(res.statusCode === 200) {
that.codeUrl = res.data
}
},
fail(err) {
console.log('fail', err)
reject(err);
},
});
},
//点击选择器取消按钮
cancle() {
this.typeShow = false;
this.placeShow = false;
this.infoSourceShow = false;
this.infoToolShow = false;
this.infoDownloadShow = false;
this.infoNetworkShow = false;
this.ztShow = 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].id;
this.form.reportType = val.value[0].label;
console.log('举报类型', this.form.type, this.form.reportType)
},
//确定发布平台
confirmPlace(val) {
this.cancle();
const key = val.indexs[0] + '-' + val.indexs[1]
this.form.publishPlat = this.map[key];
console.log('发布平台', this.form.place)
this.form.place = val.value[0] + '-' + val.value[1]
},
//确定选择信息来源
confirmInfoSource(val) {
this.cancle();
this.form.source = val.value[0].label;
},
// 确定下载源
confirmDownloadSource(val) {
this.cancle();
this.form.toolcount = val.value[0].label;
},
// 确定网盘
confirmNetworkSource(val) {
this.cancle();
this.form.toolcount = val.value[0].label;
},
// 确定聊天工具
confirmToolSource(val) {
this.cancle();
this.form.toolname = 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: 'https://www.xjwljb.com/webserver/fileUploadController/uploadToLocal',
filePath: url,
name: 'file',
formData: {
//图片张数
// 'length': 上边的filelist.length
},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) => {
resolve(res.data)
}
});
})
},
//点击举报
async submit() {
console.log(this.reportType, '举报类型')
// if(this.form.reportName === '') {
// wx.showToast({
// title: '请先注册',
// icon: 'none',
// duration: 2000
// })
// setTimeout(() => {
// wx.navigateTo({
// url: '/packageMine/pages/register/register'
// })
// }, 2000)
// } else {
//-------------------------------网址验证----------------------------------------------------
if(this.form.url) {
await this.createWebUrl();
if(wx.getStorageSync('isRepeat') === 'true') {
uni.showToast({
title: `网址重复，请换一个网址`,
icon: "none",
duration: 3000,
});
return false
}
}
// --------------------------------------------------------------------------------------------
// -------------------------------------- 处理图片参数----------------------------------------
let tempArr = []
this.form.picture.forEach(item => {
console.log(item)
tempArr.push(JSON.parse(item.url).data[0])
});
let infoSource
if (this.reportType === 'other') {
infoSource = this.infoSourceColumns[0].filter(item => item.label == this.form.source)[0].key
} else {
infoSource = this.typeMapDict[this.reportType]
}
// 登录的用户使用
let userinfo = wx.getStorageSync('userInfoxj')
const account = wx.getStorageSync('userAccount')
const phone = wx.getStorageSync('userPhone')
console.log("==++当前登陆用户的信息: ", userinfo);
// 解密用户信息-----------------------------------------------------------------------------
const submitParams = {
"anonymousUserInfo.name": account ? account : this.form.reportName, // 举报人
"anonymousUserInfo.phone": phone ? phone : this.form.phone,// 手机号
"anonymousUserInfo.email": '', //email
"reportInfo.reportUser": account ? account : '',//举报人
"reportInfo.reportName": account ? account : '',// 举报人
"reportInfo.reportType": this.form.reportType,// 举报类型
// "reportInfo.infoSource": infoSource, // 网站举报（必填固定不变）
"reportInfo.infoSource": '2', // 网站举报（必填固定不变）App传1 小程序传2
"reportInfo.infoType": '1', //（三种类型举报都传递1）
"reportInfo.topicId": this.reportType === 'special' ? this.form.topicId : '', // 专题id
"reportInfo.isMedia": this.form.isNewMedia, //是否是新媒体
"reportInfo.reportUserType": userinfo.accountType + '' === '1' ? '1' : userinfo.accountType + '' === '2' ? '2' : '3', // //1普通用户2, "监督员"2, "匿名用户"（未注册情况为3）
"reportInfo.directReport": '', //
"reportInfo.infoDescribe": this.form.desc, // 描述
"reportInfo.publishUser": this.form.publishName, // 发布人
"reportInfo.publishUserId": this.form.publishId, //发布人id
"reportInfo.publishPlat": this.form.publishPlat, // 发布平台
"websiteInfo.reportWebsiteUrl": this.form.url, // 网址
"websiteInfo.reportWebsiteName": '', // ?
"diskInfo.reportDiskName": this.form.source=== '网盘' ? this.infoNetworkColumns[0].findIndex(item => item.label === this.form.toolcount) : '',
"diskInfo.reportUserName": this.form.source=== '网盘' ? this.form.toolname : '',
"diskInfo.resourceUrl": this.form.source=== '网盘' ? this.form.tooldesc : '',
"appInfo.reportAppName": this.form.source=== '移动APP' ? this.form.toolname : '',// ?
"appInfo.downloadUrl": this.form.source=== '移动APP' ? `选项${(this.infoDownloadColumns[0].findIndex(item => item.label === this.form.toolcount)) + 1 }` : '',// ?
"appInfo.reportWebsiteUrl": '',// ?
"wechatInfo.reportChatTool": this.form.source=== '聊天工具' ? this.infoToolColumns[0].filter(item => item.label === this.form.toolname)[0].id : '',// ?
"wechatInfo.reportChatNo": this.form.source=== '聊天工具' ? this.form.toolcount : '',// ?
"searchEngineInfo.reportEngineName": this.form.source=== '搜索引擎' ? this.form.tooldesc : '',
"searchEngineInfo.keyWord": this.form.source=== '搜索引擎' ? this.form.toolcount : '',// ?
"otherInfo.reportWebsiteName": '',//？
"otherInfo.reportWebsiteUrl": '',//？
"batchId": this.reportType === 'other' ? JSON.stringify(tempArr) : JSON.stringify([tempArr]), // 图片
"batchIdsStr": this.reportType === 'other' ? JSON.stringify(tempArr) : JSON.stringify([tempArr]), // 图片字符串
"websiteUrlsStr": this.form.url, //网址
"videoBatchId": '',//？
"videoBatchIdsStr": '',//？
"verifyCode": userinfo.id ? '' : this.form.code, // 验证码
"timeStr": this.timeStr, // 当前时间戳
"userID": userinfo.id ? userinfo.id : '',
}
console.log(this.form.zt, 'this.form.zt')
if (this.form.zt === '网络数据安全和个人信息保护') {
if(this.specialType === '1') {
// 网络
const data = this.form.desc + this.listStr.join()
submitParams['reportInfo.infoDescribe'] = data
} else if(this.specialType === '0') {
const data = this.form.desc + this.listStr.join()
submitParams['reportInfo.infoDescribe'] = data
}
}
this.$refs.form.validate().then(res => {
webReportPost(submitParams).then(res => {
// webReport(submitParams).then(res => {
console.log('举报结果', res)
uni.$u.toast('举报成功')
setTimeout(() => {
// wx.switchTab({
// url: '/pages/index/index'
// })
wx.reLaunch({
url: '/packageMine/myReport/myReport'
})
}, 1000)
}).catch(res => {
if(res === 103) { // 验证码超时
this.updateImageCode() // 更新验证码
}
})
}).catch(errors => {
console.log(errors, 'err')
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(); //清除附件
// this.$refs.form?.resetFields() // 清空校验
},
//提醒禁止修改举报人
message(val) {
if(val !== '举报人') {
wx.showToast({
title: `不允许修改${val}`,
icon: 'none',
duration: 2000
})
}
},
//拒绝举报须知
refuse(val) {
wx.navigateBack() // 返回上一页
},
close(val) {
this.showMessage = val;
},
//附件上传
affixUpload(val) {
console.log('------', val)
const tempFilePaths = res.tempFiles;
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("上传失败");
// },
// });
// }
// }
// },
// });
},
// 生成网址
async createWebUrl() {
// 网址转换
const res = await createUrl({url: this.form.url})
this.form.url = res
console.log('生成网址', res)
// 网址重复验证
const resRepeat = await websiteUrlRepeat({reportWebsiteUrl: res})
},
// 网站类型举报
async webReport() {
const res = await webReport()
}
}
}
</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;
}
}
.checkbox-custom{
::v-deep .u-checkbox-row{
flex-direction:column !important;
align-self: center !important;
}
}
::v-deep .u-checkbox-row{
flex-direction:column !important;
align-self: center !important;
}
</style>
<style>
page {
background-color: #f0f0f0;
}
</style>
