CRM_26-06-30#story#8869,救援 APP、中道神行小程序、跑圈小板运输小程序和小板运输APP端上传损伤照片自动生成推送链接需求
This commit is contained in:
14
src/api/damagePhoto.js
Normal file
14
src/api/damagePhoto.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import request from '@/utils/http'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询 H5 损伤照片
|
||||||
|
* @param {Object} data - { userOrderId, taskOrderId }
|
||||||
|
*/
|
||||||
|
export function getDamagePhotos(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/h5-interface/damagePhotos',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -164,6 +164,14 @@ const routes = [
|
|||||||
title: '查看发票'
|
title: '查看发票'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/damagePhotos',
|
||||||
|
name: 'damagePhotoList',
|
||||||
|
component: () => import('@/views/damagePhoto/damagePhotoList.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '损伤照片'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/vehicleManage",
|
path: "/vehicleManage",
|
||||||
name: 'vehicleManage',
|
name: 'vehicleManage',
|
||||||
|
|||||||
312
src/views/damagePhoto/damagePhotoList.vue
Normal file
312
src/views/damagePhoto/damagePhotoList.vue
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrap damage-photo-wrap">
|
||||||
|
<div class="navBar">
|
||||||
|
<van-nav-bar
|
||||||
|
title="损伤照片"
|
||||||
|
left-arrow
|
||||||
|
left-arrow-color="#FFFFFF"
|
||||||
|
:border="false"
|
||||||
|
:fixed="true"
|
||||||
|
:safe-area-inset-top="true"
|
||||||
|
@click-left="h5GoBack"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-wrap" v-if="loaded">
|
||||||
|
<!-- 案件信息 -->
|
||||||
|
<div class="info-card">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">案件号</span>
|
||||||
|
<span class="info-value">{{ info.caseNo || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">车辆标识</span>
|
||||||
|
<span class="info-value">{{ info.vehicleIdentity || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">起止路线</span>
|
||||||
|
<span class="info-value">{{ info.route || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 照片列表 -->
|
||||||
|
<div class="photo-list" v-if="photoList.length">
|
||||||
|
<div class="photo-card" v-for="(item, index) in photoList" :key="index">
|
||||||
|
<div class="photo-title">
|
||||||
|
<span>{{ item.title || '-' }}</span>
|
||||||
|
<span
|
||||||
|
v-if="item.replaced || (item.historyList && item.historyList.length)"
|
||||||
|
class="replaced-tag"
|
||||||
|
@click="showHistory(item)"
|
||||||
|
>被替换</span>
|
||||||
|
</div>
|
||||||
|
<div class="photo-image" @click="previewCurrent(item.currentUrl)">
|
||||||
|
<van-image
|
||||||
|
:src="item.currentUrl"
|
||||||
|
fit="cover"
|
||||||
|
width="100%"
|
||||||
|
height="120"
|
||||||
|
:error-icon="defaultImg"
|
||||||
|
error-icon-size="48"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空态 -->
|
||||||
|
<div class="empty-state" v-else>
|
||||||
|
<van-empty description="暂无损伤照片" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 历史照片弹框 -->
|
||||||
|
<van-popup
|
||||||
|
v-model="historyShow"
|
||||||
|
position="bottom"
|
||||||
|
round
|
||||||
|
closeable
|
||||||
|
:style="{ height: '70%' }"
|
||||||
|
@closed="currentHistory = []"
|
||||||
|
>
|
||||||
|
<div class="history-popup">
|
||||||
|
<div class="history-title">历史照片</div>
|
||||||
|
<div class="history-list" v-if="currentHistory.length">
|
||||||
|
<div
|
||||||
|
class="history-item"
|
||||||
|
v-for="(item, index) in currentHistory"
|
||||||
|
:key="index"
|
||||||
|
@click="previewHistory(item.url)"
|
||||||
|
>
|
||||||
|
<van-image
|
||||||
|
:src="item.url"
|
||||||
|
fit="cover"
|
||||||
|
width="100%"
|
||||||
|
height="120"
|
||||||
|
:error-icon="defaultImg"
|
||||||
|
error-icon-size="48"
|
||||||
|
/>
|
||||||
|
<div class="history-time" v-if="item.replaceTime">替换时间：{{ item.replaceTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="history-empty" v-else>
|
||||||
|
<van-empty description="暂无历史照片" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getDamagePhotos } from '@/api/damagePhoto'
|
||||||
|
import { myMixins } from '@/utils/myMixins'
|
||||||
|
import { ImagePreview, Toast } from 'vant'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'damagePhotoList',
|
||||||
|
mixins: [myMixins],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loaded: false,
|
||||||
|
info: {
|
||||||
|
caseNo: '',
|
||||||
|
vehicleIdentity: '',
|
||||||
|
route: ''
|
||||||
|
},
|
||||||
|
photoList: [],
|
||||||
|
historyShow: false,
|
||||||
|
currentHistory: [],
|
||||||
|
defaultImg: require('@/assets/empty.png')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.fetchDamagePhotos()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchDamagePhotos() {
|
||||||
|
const userOrderId = this.$route.query.userOrderId
|
||||||
|
const taskOrderId = this.$route.query.taskOrderId
|
||||||
|
if (!userOrderId || !taskOrderId) {
|
||||||
|
Toast('缺少必要参数')
|
||||||
|
this.loaded = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Toast.loading({
|
||||||
|
message: '加载中...',
|
||||||
|
forbidClick: true,
|
||||||
|
duration: 0
|
||||||
|
})
|
||||||
|
try {
|
||||||
|
const res = await getDamagePhotos({
|
||||||
|
userOrderId: Number(userOrderId),
|
||||||
|
taskOrderId: Number(taskOrderId)
|
||||||
|
})
|
||||||
|
this.info = {
|
||||||
|
caseNo: res.data?.caseNo || '',
|
||||||
|
vehicleIdentity: res.data?.vehicleIdentity || '',
|
||||||
|
route: res.data?.route || ''
|
||||||
|
}
|
||||||
|
this.photoList = Array.isArray(res.data?.photos) ? res.data.photos : []
|
||||||
|
} finally {
|
||||||
|
Toast.clear()
|
||||||
|
this.loaded = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
previewCurrent(url) {
|
||||||
|
if (!url) return
|
||||||
|
ImagePreview({
|
||||||
|
images: [url],
|
||||||
|
startPosition: 0,
|
||||||
|
closeable: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showHistory(item) {
|
||||||
|
this.currentHistory = Array.isArray(item.historyList) ? item.historyList : []
|
||||||
|
this.historyShow = true
|
||||||
|
},
|
||||||
|
previewHistory(url) {
|
||||||
|
if (!url) return
|
||||||
|
ImagePreview({
|
||||||
|
images: [url],
|
||||||
|
startPosition: 0,
|
||||||
|
closeable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/styles/mixin.scss";
|
||||||
|
@import "@/styles/common.scss";
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
@include wh(100%, 100%);
|
||||||
|
background-color: #F4F5F7;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBar {
|
||||||
|
height: 46px;
|
||||||
|
::v-deep .van-nav-bar--fixed {
|
||||||
|
z-index: 9999 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrap {
|
||||||
|
padding: 10px 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
width: 70px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #323643;
|
||||||
|
flex: 1;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-list {
|
||||||
|
.photo-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px 12px 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.photo-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #323643;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.replaced-tag {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #ee0a24;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-image {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-popup {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.history-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #323643;
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid #E9E9EA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.history-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-empty {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 确保图片预览及其遮罩层级高于底部弹框 */
|
||||||
|
.van-image-preview {
|
||||||
|
z-index: 10000000003 !important;
|
||||||
|
}
|
||||||
|
.van-overlay.van-image-preview__overlay {
|
||||||
|
z-index: 10000000002 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user