Skip to content

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

feat: 填写上报内容页面 接入接口

上级 143b11eb
显示空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 23 行删除
pages/record-content/CertificateTypeActionSheet.vue
浏览文件 @ 699ba102
......@@ -5,11 +5,7 @@
</template>
<script>
const actionsOptions = [
{
name: '身份证',
},
];
import { actionsOptions } from '@/pages/record-content/mock';
export default {
name: 'CertificateTypeActionSheet',
......
pages/record-content/index.vue
浏览文件 @ 699ba102
<template>
<view>
<view class="detail_container">
<view class="content">
<view v-if="IllegalShow" class="content">
<!-- 上报类型-->
<view class="report_box">
<view class="report_one" @click="choice">
<view class="report_left">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zhixing@2x.png" />
<view class="one">{{ '上报类型' }}</view>
</view>
<view class="report_right">
<template v-for="(item, index) in typeList">
<view v-if="id === item.id" class="report_name" :key="item.id">{{ item.name }}</view>
</template>
<image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
</view>
</view>
</view>
<!-- 违法地点-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_didian@2x.png" />
<view class="one">{{ '违法地点' }}</view>
</view>
<view class="photo_list">
<view v-if="address === '点击授权获取位置信息'" class="address" @click="getAddress">{{ address }}</view>
<view v-else class="address2" @click="getAddress">{{ address }}</view>
<view v-if="address === '点击授权获取位置信息'" class="address_tip">{{ !showActive ? null : '提示：请授权获取位置信息后上传照片或视频' }}</view>
</view>
</view>
<!-- 所属辖区-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '所属辖区' }}</view>
</view>
<view class="report_title">
<input :maxlength="20" :placeholder="'所属辖区'" v-model="IllegalForm.jurisdiction" class="title_input" />
<view class="clear">
<text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ IllegalForm.jurisdiction.length }}/{{ maxWord }}</text>
<image v-if="IllegalForm.jurisdiction" @click="IllegalForm.jurisdiction = ''" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@2x.png" />
</view>
</view>
</view>
<!-- 违法类型-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '违法类型' }}</view>
</view>
<view class="report_title">
<input :maxlength="20" :placeholder="'违法类型'" v-model="IllegalForm.IllegalType" class="title_input" />
<view class="clear">
<text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ IllegalForm.IllegalType.length }}/{{ maxWord }}</text>
<image v-if="IllegalForm.IllegalType" @click="IllegalForm.IllegalType = ''" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@2x.png" />
</view>
</view>
</view>
<!-- 违法时间-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '违法时间' }}</view>
</view>
<view class="report_title">
<input
:maxlength="20"
:placeholder="'违法时间'"
:value="$u.timeFormat(IllegalForm.illegal_time, 'yyyy-mm-dd hh:MM:ss')"
readonly
class="title_input"
@click="showIllegalTime = true"
/>
<!-- <view class="clear">-->
<!-- <text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ IllegalForm.illegal_time.length }}/{{ maxWord }}</text>-->
<!-- <image v-if="IllegalForm.illegal_time" @click="IllegalForm.illegal_time = ''" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@2x.png" />-->
<!-- </view>-->
</view>
</view>
<!-- 行为描述-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '行为描述' }}</view>
</view>
<view class="photo_list2">
<textarea v-model="IllegalForm.content" :placeholder="'具体描述（最少10个字）'" class="write_box" />
</view>
</view>
<!-- 号牌种类-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '号牌种类' }}</view>
</view>
<view class="report_title">
<input :maxlength="20" :placeholder="'号牌种类'" v-model="IllegalForm.number_plate" class="title_input" />
<view class="clear">
<text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ IllegalForm.number_plate.length }}/{{ maxWord }}</text>
<image v-if="IllegalForm.number_plate" @click="IllegalForm.number_plate = ''" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@2x.png" />
</view>
</view>
</view>
<!-- 车牌号码-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_neirong@2x.png" />
<view class="one">{{ '车牌号码' }}</view>
</view>
<view class="report_title">
<input :maxlength="20" :placeholder="'车牌号码'" v-model="IllegalForm.license_plate" class="title_input" />
<view class="clear">
<text style="float: right; font-size: 28rpx; font-weight: 400; color: #656565; margin-right: 5px">{{ IllegalForm.license_plate.length }}/{{ maxWord }}</text>
<image v-if="IllegalForm.license_plate" @click="IllegalForm.license_plate = ''" mode="aspectFill" class="tep_icon" src="/static/icon/ic_bt_del@2x.png" />
</view>
</view>
</view>
<!-- 上传照片-->
<view class="step_box">
<view class="tep_one">
<image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
<view class="one">{{ !showActive ? null : '上传照片/视频' }}</view>
<view class="tip">{{ !showActive ? null : '照片至少上传1张/视频20M以下' }}</view>
</view>
<view class="photo_list">
<view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id" @click="previewVideo(item, index)">
<!-- <image mode="aspectFill" class="upload_img" src="{{item}}" /> -->
<image mode="aspectFill" v-if="item.type === 'image'" :src="item.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
<view v-else class="play-wrapper">
<video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
<image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
</view>
<!-- <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
<!-- <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />-->
<image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
</view>
<view class="photo_upload" @click="upload">
<image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
</view>
</view>
</view>
<!-- 实名上报-->
<view class="step_box">
<view class="real">
<view class="real-header">
<image src="/static/icon/ic_smsb@2x.png" />
<view>举报人信息</view>
</view>
<view class="real-content">
<view class="real-content-input">
<view>{{ '真实姓名' }}</view>
<input v-model="realForm.name" type="text" placeholder="请填写真实姓名" placeholder-class="input-placeholder" />
</view>
<view class="real-content-input">
<view>{{ '电话号码' }}</view>
<input v-model="realForm.phone" type="text" placeholder="请填写电话号码" placeholder-class="input-placeholder" :maxlength="11" />
</view>
<view class="real-content-input">
<view>{{ '证件类型' }}</view>
<view @click="openSelectCertificateType">
<u-input
:value="getCertificateType(realForm.certificateType)"
type="text"
placeholder="请选择证件类型"
class="input"
placeholder-class="input-placeholder"
readonly
suffixIcon="arrow-right"
/>
</view>
</view>
<view class="real-content-input">
<view>{{ '证件号码' }}</view>
<input v-model="realForm.certificateText" type="text" placeholder="请填写证件号码" placeholder-class="input-placeholder" :disabled="!realForm.certificateType" />
</view>
</view>
</view>
</view>
<view class="step_box">
<button type="submit" @click="submitReview" class="btn">{{ '上报' }}</button>
</view>
</view>
<view v-else class="content">
<view class="report_box">
<view class="report_one" @click="choice">
<view class="report_left">
......@@ -105,7 +298,7 @@
<view>{{ '证件类型' }}</view>
<view @click="openSelectCertificateType">
<u-input
:value="realForm.certificateType"
:value="getCertificateType(realForm.certificateType)"
type="text"
placeholder="请选择证件类型"
class="input"
......@@ -128,16 +321,26 @@
<button type="submit" @click="submitReview" class="btn">{{ !showActive ? null : '上报' }}</button>
</view>
</view>
<!-- <van-action-sheet :show="show" :actions="typeList" bind:close="onClose" cancel-text="取消" bind:select="onSelect" />-->
<u-action-sheet :actions="typeList" :show="show" cancelText="取消" safeAreaInsetBottom round="32rpx" @close="onActionSheetClose" @select="onActionSheetSelect" />
<UploadActionSheet ref="uploadActionSheet" :success="onUpload" />
<CertificateTypeActionSheet ref="certificateTypeActionSheet" :success="onCertificateTypeChange" />
<u-datetime-picker
:show="showIllegalTime"
v-model="IllegalForm.illegal_time"
mode="datetime"
closeOnClickOverlay
@close="showIllegalTime = false"
@cancel="showIllegalTime = false"
@confirm="onIllegalTimeConfirm"
/>
</view>
</view>
</template>
<script>
import { typeList, week } from '@/pages/record-content/mock';
import { actionsOptions, week } from '@/pages/record-content/mock';
import UploadActionSheet from '@/pages/record-content/UploadActionSheet';
import CertificateTypeActionSheet from '@/pages/record-content/CertificateTypeActionSheet';
......@@ -176,6 +379,19 @@ export default {
// 上传照片或视频类型
mediaType: ['image', 'video'],
showActive: true,
actionsOptions,
showIllegalTime: false,
IllegalShow: true,
IllegalForm: {
jurisdiction: '', // 所属辖区
IllegalType: '', // 违法类型
illegal_time: Number(new Date()), // 违法时间
content: '', // 行为描述
number_plate: '', // 号牌种类
license_plate: '', // 车牌号码
},
};
},
......@@ -189,6 +405,7 @@ export default {
async fetchPhotoTaskTypeData() {
const { list } = await uni.$u.http.get('/api/app/phototasktype/list', { params: { parent_id: this.query.parent_id } });
this.typeList = list;
this.IllegalShow = list.every(({ parent }) => parent.name === '交通违法举报');
this.id = +this.query.detail_id;
},
......@@ -218,23 +435,24 @@ export default {
* @returns {Promise<void>}
*/
async getAddress() {
// uni.openLocation({
// latitude: 0,
// longitude: 0,
// uni.getLocation({
// success: (result) => {
// console.log('success', result);
// console.log(result);
// },
// fail: (result) => {
// console.log('fail', result);
// console.error(result);
// },
// complete: () => {
// console.log('complete');
// },
// });
uni.getLocation({
isHighAccuracy: true,
uni.chooseLocation({
success: (result) => {
console.log('success', result);
},
fail: (result) => {
console.log('fail', result);
console.log(result);
this.longitude = result.longitude;
this.latitude = result.latitude;
this.address = result.address;
},
});
},
......@@ -317,7 +535,7 @@ export default {
},
async onCertificateTypeChange(item) {
this.realForm.certificateType = item.name;
this.realForm.certificateType = item.id;
},
/**
......@@ -326,7 +544,22 @@ export default {
*/
async submitReview() {
const t = (text = '') => uni.$u.toast(text);
if (this.IllegalShow) {
if (!this.longitude) return t('请选择位置');
if (!this.IllegalForm.jurisdiction) return t('请输入所属辖区');
if (!this.IllegalForm.IllegalType) return t('请输入违法类型');
if (!this.IllegalForm.illegal_time) return t('请输入违法时间');
if (!this.IllegalForm.content) return t('请输入行为描述');
if (!this.IllegalForm.number_plate) return t('请输入号牌种类');
if (!this.IllegalForm.license_plate) return t('请输入车牌号码');
if (!this.photoList.filter(({ type }) => type === 'image').length) return t('请上传图片');
if (!this.realForm.name) return t('请输入真实姓名');
if (!this.realForm.phone) return t('请输入电话号码');
if (!this.realForm.certificateType) return t('请选择证件类型');
if (!this.realForm.certificateText) return t('请输入证件号码');
} else {
if (!this.id) return t('请选择上报类型');
if (!this.longitude) return t('请选择位置');
if (!this.photoList.filter(({ type }) => type === 'image').length) return t('请上传图片');
if (!this.title) return t('请输入标题');
if (!this.content) return t('请输入内容');
......@@ -336,19 +569,39 @@ export default {
if (!this.realForm.certificateType) return t('请选择证件类型');
if (!this.realForm.certificateText) return t('请输入证件号码');
}
}
try {
await uni.$u.http.post('/api/photo_task/create', {
title: this.title,
type_id: this.id,
image_list: this.photoList.filter(({ type }) => type === 'image').join(),
video_list: this.photoList.filter(({ type }) => type === 'video').join(),
image_list: this.photoList
.filter(({ type }) => type === 'image')
.map(({ url }) => url)
.join(),
video_list: this.photoList
.filter(({ type }) => type === 'video')
.map(({ url }) => url)
.join(),
content: this.content,
is_real: this.checked,
name: this.realForm.name,
phone: this.realForm.phone,
certificates: this.realForm.certificateType,
card_number: this.realForm.certificateText,
longitude: this.longitude,
latitude: this.latitude,
position: this.address,
...this.IllegalForm,
illegal_time: uni.$u.timeFormat(this.IllegalForm.illegal_time, 'yyyy-mm-dd hh:MM'),
});
uni.$u.toast('上报成功');
uni.$u.route({ url: 'pages/record-finish/index', type: 'redirectTo' });
} finally {
}
},
// 预览视频
......@@ -366,6 +619,16 @@ export default {
cancel(item, index) {
this.photoList.splice(index, 1);
},
onIllegalTimeConfirm(value) {
this.IllegalForm.illegal_time = value;
this.showIllegalTime = false;
},
getCertificateType(value) {
if (!value) return '';
return this.actionsOptions.find(({ id }) => id === value).name;
},
},
};
</script>
......
pages/record-content/mock.js
浏览文件 @ 699ba102
......@@ -68,3 +68,18 @@ export const typeList = [
img: 'https://qiniu.yuhuofei.it/FgxfvMffyGyFb3vzHGp5ieSEwBYl',
},
];
export const actionsOptions = [
{
id: 1,
name: '身份证',
},
{
id: 2,
name: '驾驶证',
},
{
id: 3,
name: '社保卡',
},
];
pages/record-finish/index.vue
浏览文件 @ 699ba102
......@@ -22,7 +22,10 @@ export default {
methods: {
async backIndex() {
if (this.backType === 0) {
uni.navigateTo({ url: 'pages/index/index' });
uni.$u.route({
url: 'pages/index/index',
type: 'switchTab',
});
}
},
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论