Skip to content

C
csssp-xcx-h5
提交 f50352de authored 作者: 劳广强's avatar 劳广强
浏览文件
操作

feat: 完成 选择上报类型 页面

上级 28eb4876
隐藏空白字符变更
内嵌 并排
正在显示 包含 299 行增加 和 2 行删除
pages.json
浏览文件 @ f50352de
......@@ -28,6 +28,13 @@
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/record-type/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
......
pages/record-type/index.scss 0 → 100644
浏览文件 @ f50352de
.wrapper {
}
.title {
font-size: 48rpx;
font-weight: bold;
text-align: center;
color: #000000;
padding: 60rpx 0;
}
.footer {
width: 100%;
}
.report-btn {
width: 222rpx;
height: 72rpx;
background: #ffffff;
border: 2rpx solid #8171fc;
border-radius: 54rpx;
margin: 0 auto;
//position: fixed;
//bottom: 128rpx;
//left: calc(50% - 112rpx);
//z-index: 9;
font-size: 28rpx;
text-align: center;
color: #8171fc;
}
::v-deep .u-grid {
align-items: flex-start;
}
pages/record-type/index.vue 0 → 100644
浏览文件 @ f50352de
<template>
<view>
<view class="wrapper">
<view class="title">交通违法举报</view>
<u-grid style="padding: 0 30rpx">
<u-grid-item v-for="(item, index) in iconList" :key="item.id">
<view style="padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start">
<image :src="item.icon" style="display: block; width: 120rpx; height: 120rpx" />
<view style="height: 16rpx" />
<text align="center" bold class="grid-text" style="min-height: 128rpx">{{ item.name }}</text>
</view>
</u-grid-item>
</u-grid>
<view style="height: 60rpx" />
<view class="footer">
<u-button class="report-btn" @click="onReportClick">举报说明</u-button>
</view>
<view style="height: 60rpx" />
<u-modal :show="showReport" title="举报说明" :content="content" @confirm="onReportConfirm" />
</view>
</view>
</template>
<script>
import { iconList } from '@/pages/record-type/mock';
export default {
data() {
return {
iconList,
content:
'1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
showReport: false,
};
},
methods: {
async onReportClick() {
console.log('onReportClick');
this.showReport = true;
},
async onReportConfirm() {
this.showReport = false;
},
},
};
</script>
<style scoped lang="scss">
@import 'index.scss';
</style>
pages/record-type/mock.js 0 → 100644
浏览文件 @ f50352de
export const iconType = new Map([
[10, '交通违法'],
[20, '不文明'],
[30, '设施故障'],
]);
export const iconList = [
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '乱停乱放',
icon: '/static/record-icon/ic_hjbh_0@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '违法停车下人',
icon: '/static/record-icon/ic_wmjt_0@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '变道不打灯',
icon: '/static/record-icon/ic_whxc_0@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '不礼让行人',
icon: '/static/record-icon/ic_smdd_0@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '闯红灯',
icon: '/static/record-icon/ic_qt_0@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '加塞插队',
icon: '/static/record-icon/ic_hjbh_4@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '遮挡号牌',
icon: '/static/record-icon/ic_hjbh_2@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '尾号限行',
icon: '/static/record-icon/ic_wmjt_2@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '客车超员',
icon: '/static/record-icon/ic_whxc_2@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '未系安全带',
icon: '/static/record-icon/ic_qt_2@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '不按规定掉头',
icon: '/static/record-icon/ic_smdd_2@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '越双实线掉头',
icon: '/static/record-icon/ic_hjbh_6@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '不按导向车道行驶',
icon: '/static/record-icon/ic_hjbh_1@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '越线超车',
icon: '/static/record-icon/ic_wmjt_1@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '侵走公交道',
icon: '/static/record-icon/ic_whxc_1@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '侵走高速应急车道',
icon: '/static/record-icon/ic_smdd_1@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '车窗抛撒物品',
icon: '/static/record-icon/ic_qt_1@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '侵走非机动车道',
icon: '/static/record-icon/ic_hjbh_5@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '转弯车不让直行车',
icon: '/static/record-icon/ic_hjbh_3@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '竞速飙车',
icon: '/static/record-icon/ic_wmjt_3@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '开车打电话',
icon: '/static/record-icon/ic_whxc_3@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(10),
name: '连续变更多条车道',
icon: '/static/record-icon/ic_qt_3@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(20),
name: '建筑垃圾',
icon: '/static/record-icon/ic_hjbh_7@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(20),
name: '市容秩序',
icon: '/static/record-icon/ic_wmjt_7@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(20),
name: '违法建设',
icon: '/static/record-icon/ic_whxc_4@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(20),
name: '机动车违法',
icon: '/static/record-icon/ic_smdd_3@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(20),
name: '摩托车违法',
icon: '/static/record-icon/ic_qt_4@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(30),
name: '建筑垃圾混入生活垃圾',
icon: '/static/record-icon/ic_wmjt_8@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(30),
name: '危险废物混入建筑垃圾',
icon: '/static/record-icon/ic_wmjt_4@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(30),
name: '擅自设立弃置场受纳建筑垃圾',
icon: '/static/record-icon/ic_wmjt_5@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(30),
name: '随意倾倒或堆放建筑垃圾',
icon: '/static/record-icon/ic_wmjt_6@2x.png',
},
{
id: uni.$u.guid(),
tyep: iconType.get(30),
name: '渣土车',
icon: '/static/record-icon/ic_hjbh_7@2x.png',
},
];
pages/record/index.vue
浏览文件 @ f50352de
......@@ -45,9 +45,9 @@ export default {
data() {
return {
list,
showReport: false,
content:
'\n1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
'1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
showReport: false,
};
},
methods: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论