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: '查看发票'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/damagePhotos',
|
||||
name: 'damagePhotoList',
|
||||
component: () => import('@/views/damagePhoto/damagePhotoList.vue'),
|
||||
meta: {
|
||||
title: '损伤照片'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/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