| | |
| | | <!-- 自定义导航栏 --> |
| | | <u-navbar title="工单详情" :is-back="true" back-text="" :back-icon-size="40" @left-click="onBackClick"> |
| | | <template #right> |
| | | <div class="share-btn" @click="onShareClick"></div> |
| | | <div v-if="isH5" class="tapShare-icon"><img src="/static/images/work/share.svg" @click="onShareClick"/></div> |
| | | <div v-else class="share-btn" @click="onShareClick"></div> |
| | | </template> |
| | | </u-navbar> |
| | | <div class="detailTop"> |
| | |
| | | <div class="workOrderContainer"> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">工单编号</div> |
| | | <div>{{ workDetailData.eventCode }}</div> |
| | | <div>{{ workDetailData.eventNum }}</div> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">工单处置人</div> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 操作按钮 --> |
| | | <div class="actionButton"> |
| | | <div class="btngroups"> |
| | | <div class="actionButton" > |
| | | <div class="btngroups" v-if="workDetailData.eventStatus !== 3"> |
| | | <up-button type="primary" color="#AEAEAE" text="退回" @click="rejectTicket"></up-button> |
| | | <up-button type="primary" color="#1D6FE9" text="确认" @click="confirmTheTicket"></up-button> |
| | | </div> |
| | | <div class="btngroups" v-if="workDetailData.eventStatus === 3"> |
| | | <up-button type="primary" color="#1D6FE9" text="已确认" @click="confirmedHandle"></up-button> |
| | | </div> |
| | | </div> |
| | | <!-- 分享弹出层 --> |
| | |
| | | |
| | | <script setup> |
| | | // import { getShowImg, getSmallImg } from '@/utils/util' |
| | | import { ref, computed } from 'vue' |
| | | import {getGddetailedData,backGdApi} from '/src/api/work/index1.js' |
| | | import {getGddetailedData,backGdApi} from '/src/api/work/index.js' |
| | | import dayjs from 'dayjs' |
| | | const formatDate = dateString => { |
| | | return dayjs(dateString).format('MM/DD HH:mm') |
| | |
| | | const eventNum = ref('') |
| | | // 工单内容 |
| | | const workDetailData = ref({}) |
| | | // 环境判断 |
| | | const isH5 = ref(false) |
| | | onLoad(async options => { |
| | | eventNum.value = options.id |
| | | await getDataList(options.id) |
| | | checkEnvironment() |
| | | }) |
| | | const getDataList = async val => { |
| | | const params = { |
| | |
| | | const res = await getGddetailedData(params) |
| | | const response = res.data.data |
| | | workDetailData.value = response |
| | | console.log('详情', workDetailData.value) |
| | | } |
| | | // 检查运行环境 |
| | | const checkEnvironment = () => { |
| | | const systemInfo = uni.getSystemInfoSync() |
| | | // #ifdef APP-PLUS |
| | | isH5.value = false |
| | | // #endif |
| | | |
| | | // #ifdef H5 |
| | | isH5.value = true |
| | | // #endif |
| | | |
| | | console.log('当前环境:', isH5.value ? 'H5' : 'App') |
| | | } |
| | | // 图片预览 |
| | | const previewImage = index => { |
| | |
| | | const smallUrl = detail.eventImageUrl |
| | | imageArr.push(smallUrl) |
| | | } |
| | | if (detail.update_photo_url) { |
| | | const smallUrl = detail.update_photo_url |
| | | imageArr.push(smallUrl) |
| | | } |
| | | // if (detail.update_photo_url) { |
| | | // const smallUrl = detail.update_photo_url |
| | | // imageArr.push(smallUrl) |
| | | // } |
| | | return imageArr |
| | | }) |
| | | // 跳转地图 |
| | | const jumpMap = item => { |
| | | const contactStr = encodeURIComponent(JSON.stringify(item)) |
| | | uni.navigateTo({ |
| | | url: `/subPackages/workDetail/mapWork/index?eventNum=${item.event_num}`, |
| | | url: `/subPackages/workDetail/mapWork/index?eventNum=${contactStr}`, |
| | | }) |
| | | } |
| | | // 退回 |
| | |
| | | uni.showToast({ |
| | | title: '退回成功', |
| | | icon: 'success', |
| | | duration: 1500 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }) |
| | | }) |
| | | |
| | |
| | | uni.showToast({ |
| | | title: '确认成功', |
| | | icon: 'success', |
| | | duration: 1500 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }) |
| | | }) |
| | | } |
| | | // 已确认 |
| | | const confirmedHandle = () => { |
| | | uni.navigateBack() |
| | | } |
| | | // 分享模态框状态 |
| | | const showShareModal = ref(false) |
| | |
| | | title: workDetailData.value.event_name || '工单详情', |
| | | summary: '查看工单详情', |
| | | href: 'https://example.com/workDetail?eventNum=' + workDetailData.value.event_num, |
| | | imageUrl: workDetailData.value.photo_url, |
| | | imageUrl: workDetailData.value.eventImageUrl, |
| | | success: () => { |
| | | uni.showToast({ title: '分享成功', icon: 'success' }) |
| | | onShareModalClose() |
| | |
| | | .workDetailContainer { |
| | | // 添加导航栏高度的padding-top,避免内容被遮挡 |
| | | padding-top: 88rpx; |
| | | // 分享按钮样式 |
| | | :deep(){ |
| | | .u-navbar__content{ |
| | | background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_app_assets/images/user/bg.png") no-repeat !important; |
| | | background-size: 100%!important; |
| | | height: 88rpx !important; |
| | | } |
| | | } // 分享按钮样式 |
| | | .share-btn { |
| | | // #ifdef APP-PLUS |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | background-image: url('/static/images/work/share.svg'); |
| | | background-size: contain; |
| | | background-repeat: no-repeat; |
| | | background-position: center; |
| | | // #endif |
| | | } |
| | | .tapShare-icon { |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | img { |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | } |
| | | } |
| | | .detailTop { |
| | | // #ifdef APP-PLUS |
| | | padding-top: 60rpx; |
| | | // #endif |
| | | .image-container { |
| | | position: relative; |
| | | width: 100%; |
| | |
| | | width: 5px !important; |
| | | } |
| | | } |
| | | .detailTitle { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 100%; |
| | | height: 60rpx; |
| | | line-height: 60rpx; |
| | | background: rgba(7, 7, 7, 0.4); |
| | | } |
| | | |
| | | .titleText { |
| | | display: flex; |
| | | width: 100%; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | color: #fff; |
| | | |
| | | .itemName, |
| | | .itemTime { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #ffffff; |
| | | } |
| | | .itemName { |
| | | padding-left: 20rpx; |
| | | } |
| | | .itemTime { |
| | | padding-right: 20rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | color: #1d6fe9; |
| | | text-decoration: underline; |
| | | text-align: right; |
| | | //white-space: nowrap; |
| | | ///* 禁止换行 */ |
| | | //overflow: hidden; |
| | | //text-overflow: ellipsis; |
| | | // max-width: 74%; |
| | | |
| | | padding-top: 1px; |
| | | padding-left: 5px; |
| | | padding-right: 2px; |