<!-- 举报中心 -->
<template>
<view class="center">
<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: 360rpx;"></image>
<!-- <view class="center-title">举报入口</view> -->
<!-- <view class="title">举报入口</view> -->
<view class="tab-area">
<view class="tab">
<u-row>
<u-col span="4" v-for="item in TypeList1" :key="item.id">
<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.label}}</text>
</view>
</u-col>
</u-row>
<u-row>
<u-col span="4" v-for="item in TypeList2" :key="item.id">
<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.label}}</text>
</view>
</u-col>
</u-row>
<u-row>
<u-col span="4" v-for="item in TypeList3" :key="item.id">
<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.label}}</text>
</view>
</u-col>
</u-row>
<u-row>
<u-col span="4" v-for="item in TypeList4" :key="item.id">
<view class="tab-item" @click="goSelectActionSheet(item.id, item.icon, item.label, item.type)">
<image style="width: 120rpx;height: 120rpx;margin-bottom: 12rpx;" :src="item.icon" mode=""></image>
<text class="grid-text">{{item.label}}</text>
</view>
</u-col>
</u-row>
</view>
</view>
<view class="title" style="margin-top: 46rpx;">专项举报入口</view>
<view class="content">
<!-- 专项类举报类型传-其他10 -->
<view v-for="(item,index) in tabList" :key="item.id" class="content-main" @click="changePage(item.id, item.icon, '其他类', item.type, index)">
<!-- <image :src="item.icon" :style="item.style" mode=""></image> -->
<view class="text-area">
<text class="content-title">{{item.title}}</text>
</view>
</view>
</view>
<u-action-sheet
:actions="actionSheetList"
@select="selectClick"
title="举报类型"
:show="actionSheetShow"
:closeOnClickOverlay="true"
:closeOnClickAction="true"
cancelText="取消"
@close="closeActionSheet"
></u-action-sheet>
</view>
</template>
<script>
import { getSpecial} from '@/api/tort.js'
export default {
name: 'center',
components: {
},
data() {
return {
actionSheetShow: false, // 选择其他还是网站的选项卡
actionSheetList: [
{
name: '网站类型举报',
},
{
name: '其他类型举报',
}
],
TypeList1: [
{
id: '1',
type: 'web',
label: '政治安全类',
icon: 'http://111.198.10.15:11404/imgs/xj/涉领导人类.png'
},
{
id: '2',
type: 'web',
label: '涉党政军类',
icon: 'http://111.198.10.15:11404/imgs/xj/涉党军政类.png'
},
{
id: '3',
type: 'web',
label: '涉爆涉恐类',
icon: 'http://111.198.10.15:11404/imgs/xj/涉暴涉恐类.png'
},
],
TypeList2: [
{
id: '4',
type: 'web',
label: '民族宗教类',
icon: '/static/center/mzzj.png'
},
{
id: '5',
type: 'web',
label: '治疆政策类',
icon: 'http://111.198.10.15:11404/imgs/xj/治疆政策类.png'
},
{
id: '6',
type: 'web',
label: '涉疆案(事)件类',
icon: 'http://111.198.10.15:11404/imgs/xj/涉疆案件类.png'
},
],
TypeList3: [
{
id: '7',
type: 'web',
label: '公共安全类',
icon: 'http://111.198.10.15:11404/imgs/xj/公共安全类.png'
},
{
id: '8',
type: 'web',
label: '组织人事类',
icon: 'http://111.198.10.15:11404/imgs/xj/组织人事类.png'
},
{
id: '9',
type: 'web',
label: '社会民生类',
icon: 'http://111.198.10.15:11404/imgs/xj/社会民生类.png'
},
],
TypeList4: [
{
id: '10',
type: 'other',
label: '其他类',
icon: 'http://111.198.10.15:11404/imgs/xj/其他.png'
},
],
tabList: [
// {
// id: 'web',
// title: '网站类型举报',
// dec: '网站地址',
// icon: '../../static/center/web.png',
// span: '6',
// style: 'width: 52px;height: 60px;'
// },
{
id: '10',
title: '专项举报',
type: 'special',
dec: '扫黑除恶专题举报',
icon: 'http://111.198.10.15:11404/imgs/xj/工作动态.png',
span: '6',
style: 'width: 62px;height: 62px;'
},
// {
// id: 'other',
// title: '其他类型举报',
// dec: '通讯工具/网盘/搜索引擎',
// icon: '../../static/center/other.png',
// span: '12',
// style: 'width: 53px;height: 60px;'
// },
],
tempParamForm: {}
}
},
mounted(){
this.fetchSpecial()
},
methods: {
fetchSpecial() {
getSpecial({topicSign: '1'}).then(res => {
console.log(res, 'res')
this.tabList = res.map(item => {
return {
...item,
title: item.topicTitle,
id: '10',
type: 'special',
icon: 'http://111.198.10.15:11404/imgs/xj/工作动态.png',
}
})
// this.ztList = [this.ztList]
})
},
changePage(reportTypeValue, icon, label, type, index) {
wx.navigateTo({
url: `/packageIndex/report/report?reportTypeValue=${reportTypeValue}&icon=` + encodeURIComponent(icon) + '&label=' + encodeURIComponent(label) + `&reportType=${type}` + `&index=${index}`
})
},
goSelectActionSheet(reportTypeValue, icon, label, type) {
this.tempParamForm = {
reportTypeValue: reportTypeValue,
icon: icon,
label: label,
reportType: type
}
// this.actionSheetShow = true
wx.navigateTo({
url: `/packageIndex/report/report?reportTypeValue=${this.tempParamForm.reportTypeValue}&icon=` + encodeURIComponent(this.tempParamForm.icon) + '&label=' + encodeURIComponent(this.tempParamForm.label) + `&reportType=${type}`
})
},
// 选择好
selectClick(val) {
console.log(val)
let type = 'web'
if(val.name === '网站类型举报') {
type = 'web'
} else {
type = 'other'
}
console.log(type, 'type')
wx.navigateTo({
url: `/packageIndex/report/report?reportTypeValue=${this.tempParamForm.reportTypeValue}&icon=` + encodeURIComponent(this.tempParamForm.icon) + '&label=' + encodeURIComponent(this.tempParamForm.label) + `&reportType=${type}`
})
},
// 点取消按钮
closeActionSheet() {
this.actionSheetShow = false
}
}
}
</script>
<style lang="scss" scoped>
.center {
position: relative;
width: 100%;
// height: 100%;
padding: 40rpx 40rpx 80rpx 40rpx;
padding-top: 380rpx;
box-sizing: border-box;
.title {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 40rpx;
font-weight: 600;
// padding: 20rpx 20rpx 0 20rpx;
box-sizing: border-box;
}
.tab-area {
margin-top: 40rpx;
// padding: 0 40rpx;
.tab {
background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
border-radius: 20rpx;
padding-bottom: 80rpx;
}
.tab-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 80rpx;
.grid-text {
font-size: 30rpx;
color: #3a3a3b;
}
}
}
.center-title {
position: absolute;
top: 40rpx;
left: 40rpx;
color: #fff;
font-size: 48rpx;
font-weight: 600;
letter-spacing: 4rpx;
}
.content {
display: flex;
flex-direction: column;
border-radius: 20rpx;
box-sizing: border-box;
.content-main {
display: flex;
align-items: center;
background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
margin-top: 40rpx;
padding: 20rpx;
// padding-left: 60rpx;
border-radius: 20rpx;
color: #356ac0;
.text-area {
flex: 1;
// margin-left: 40rpx;
text-align: center;
font-weight: 600;
font-size: 36rpx;
// &:last-child {
// margin-left: 32rpx;
// }
.content-title {
// margin-right: 20rpx;
text-align: center;
}
}
}
}
}
</style>
<style lang="scss">
.center {
.u-icon__icon {
margin-right: -20rpx;
}
}
</style>
