From 1d552a3bad95caae4af15322df28e6240b797693 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 13 Aug 2026 15:32:06 +0800
Subject: [PATCH] feat: app视频封面图
---
uniapps/work-app/src/subPackages/workDetail/index.vue | 918 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 642 insertions(+), 276 deletions(-)
diff --git a/uniapps/work-app/src/subPackages/workDetail/index.vue b/uniapps/work-app/src/subPackages/workDetail/index.vue
index c61f9fc..dd1fa26 100644
--- a/uniapps/work-app/src/subPackages/workDetail/index.vue
+++ b/uniapps/work-app/src/subPackages/workDetail/index.vue
@@ -4,7 +4,7 @@
<!-- 自定义导航栏 -->
<u-navbar title="工单详情" :is-back="true" back-text="" :back-icon-size="40" @left-click="onBackClick">
<template #right>
- <div v-if="isH5" class="tapShare-icon"><img src="/static/images/work/share.svg" @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>
@@ -24,182 +24,411 @@
></u-swiper>
</div>
</div>
- <!-- 工单内容 -->
- <div class="worderContainer">
- <div class="workOrderContent">
- <div class="workOrderTitle">工单内容</div>
- <div class="workOrderContainer">
- <div class="orderRow">
- <div class="rowTitle">工单编号</div>
- <div>{{ workDetailData.eventNum }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">工单处置人</div>
- <div>{{ workDetailData.disposeUserName }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">处置部门</div>
- <div>{{ workDetailData.disposeDeptName }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">拍摄时间</div>
- <div>{{ workDetailData.shootTime }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">分发人员</div>
- <div>{{ workDetailData.distributeUserName }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">分发部门</div>
- <div>{{ workDetailData.distributeDeptName }}</div>
- </div>
+ <!-- 工单内容 -->
+ <div class="worderContainer">
+ <div class="workOrderContent">
+ <div class="workOrderTitle">工单内容</div>
+ <div class="workOrderContainer">
+ <div class="orderRow">
+ <div class="rowTitle">工单名称</div>
+ <div>{{ workDetailData.eventName }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">工单编号</div>
+ <div>{{ workDetailData.eventNum }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">工单状态</div>
+ <!-- <template v-if="[1, 3].includes(workDetailData.eventStatus)">
+ <picker
+ mode="selector"
+ :range="statusOptions"
+ range-key="name"
+ :value="statusPickerIndex"
+ @change="onStatusChange"
+ class="status-picker"
+ >
+ <div class="picker-value">
+ {{ currentStatusLabel || '请选择' }}
+ <text class="picker-arrow">▼</text>
+ </div>
+ </picker>
+ </template> -->
+ <div>{{ getStatusLabel(workDetailData.eventStatus) }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">工单处置人</div>
+ <div>{{ workDetailData.disposeUserName }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">处置部门</div>
+ <div>{{ workDetailData.disposeDeptName }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">拍摄时间</div>
+ <div>{{ workDetailData.shootTime }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">分发人员</div>
+ <div>{{ workDetailData.distributeUserName }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">分发部门</div>
+ <div>{{ workDetailData.distributeDeptName }}</div>
+ </div>
- <div class="orderRow">
- <div class="rowTitle">分发时间</div>
- <div>{{ workDetailData.distributeTime }}</div>
- </div>
- <div class="orderRow">
- <div class="rowTitle">工单位置</div>
- <div class="rowAddress" @click="jumpMap(workDetailData)">{{ workDetailData.eventLocation }}</div>
- </div>
- </div>
- </div>
- </div>
- <!-- 操作按钮 -->
- <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>
- <!-- 分享弹出层 -->
- <div v-if="showShareModal" class="share-modal-overlay" @click="onShareModalClose">
- <div class="share-modal-content" @click.stop>
- <div class="share-modal-header">
- <div class="share-modal-title">分享到</div>
- <div class="share-modal-close" @click="onShareModalClose">×</div>
- </div>
- <div class="share-modal-body">
- <div class="share-item" @click="shareToWechat">
- <div class="share-icon wechat"></div>
- <div class="share-name">微信好友</div>
- </div>
- <div class="share-item" @click="shareToMoments">
- <div class="share-icon moments"></div>
- <div class="share-name">朋友圈</div>
- </div>
- <div class="share-item" @click="copyLink">
- <div class="share-icon link"></div>
- <div class="share-name">复制链接</div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="orderRow">
+ <div class="rowTitle">分发时间</div>
+ <div>{{ workDetailData.distributeTime }}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">工单位置</div>
+ <div class="" v-if="workDetailData.attachmentType == 3">
+ {{ workDetailData.areaCode }}
+ </div>
+ <div v-else class="rowAddress" @click="jumpMap(workDetailData)">
+ {{ workDetailData.eventLocation }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 操作按钮 -->
+ <div class="actionButton">
+ <div class="btngroups" v-if="workDetailData.eventStatus === 0">
+ <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 === 1">
+ <up-button type="primary" color="#1D6FE9" text="处置记录" @click="handlelogs"></up-button>
+ <up-button type="primary" color="#1D6FE9" text="上传处置" @click="uploadHandle"></up-button>
+ </div>
+ <div class="btngroups" v-if="workDetailData.eventStatus === 3">
+ <up-button type="primary" color="#1D6FE9" text="处置记录" @click="handlelogs"></up-button>
+ <up-button type="primary" color="#1D6FE9" text="继续上传处置" @click="uploadHandle"></up-button>
+ <up-button type="primary" color="#1D6FE9" text="完成" @click="confirmedHandle"></up-button>
+ </div>
+ <div class="btngroups" v-if="workDetailData.eventStatus === 4">
+ <up-button type="primary" color="#1D6FE9" text="处置记录" @click="handlelogs"></up-button>
+ </div>
+ </div>
+ </div>
+
+ <!-- 完成情况弹窗 -->
+ <view v-if="showCompleteModal" class="complete-modal-overlay" @click="closeCompleteModal">
+ <view class="complete-modal" @click.stop>
+ <view class="complete-modal-title">填写完成情况</view>
+ <view class="complete-input-wrapper">
+ <textarea
+ v-model="completeContent"
+ class="complete-input"
+ maxlength="200"
+ placeholder="请输入完成情况"
+ :show-confirm-bar="false"
+ />
+ <text class="complete-word-count">{{ completeContent.length }}/200</text>
+ </view>
+ <view class="complete-modal-actions">
+ <button class="complete-action-btn complete-cancel-btn" :disabled="completing" @click="closeCompleteModal">
+ 取消
+ </button>
+ <button class="complete-action-btn complete-confirm-btn" :disabled="completing" @click="submitComplete">
+ {{ completing ? '提交中...' : '确认' }}
+ </button>
+ </view>
+ </view>
+ </view>
+ <!-- 分享弹出层 -->
+ <div v-if="showShareModal" class="share-modal-overlay" @click="onShareModalClose">
+ <div class="share-modal-content" @click.stop>
+ <div class="share-modal-header">
+ <div class="share-modal-title">分享到</div>
+ <!-- <div class="share-modal-close" @click="onShareModalClose">×</div> -->
+ </div>
+ <div class="share-modal-body">
+ <!-- <div class="share-item" @click="shareToWechat">-->
+ <!-- <div class="share-icon wechat"></div>-->
+ <!-- <div class="share-name">微信好友</div>-->
+ <!-- </div>-->
+ <!-- <div class="share-item" @click="shareToMoments">-->
+ <!-- <div class="share-icon moments"></div>-->
+ <!-- <div class="share-name">朋友圈</div>-->
+ <!-- </div>-->
+ <div class="share-item" @click="copyLink">
+ <div class="share-icon link"></div>
+ <div class="share-name">复制链接</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
// import { getShowImg, getSmallImg } from '@/utils/util'
-import {getGddetailedData,backGdApi} from '/src/api/work/index.js'
+import { getGddetailedData, backGdApi, shareCacheApi, updateStatus, addDisposeRecord } from '/src/api/work/index.js'
import { getWebViewUrl } from '@/utils/index.js'
import WebViewPlus from '@/components/WebViewPlus.vue'
+import { onShow } from '@dcloudio/uni-app'
const eventNum = ref('')
// 工单内容
const workDetailData = ref({})
// 环境判断
const isH5 = ref(false)
-const sWebViewRef = ref(null);
-const viewUrl = ref("");
-onLoad(async options => {
- eventNum.value = options.id
- await getDataList(options.id)
- checkEnvironment()
- viewUrl.value = getWebViewUrl("/workDetail", { workDetailData: JSON.stringify(workDetailData.value) });
+const sWebViewRef = ref(null)
+const viewUrl = ref('')
+const showCompleteModal = ref(false)
+const completeContent = ref('')
+const completing = ref(false)
+const PREVIEW_IMG_CACHE_KEY_PREFIX = 'work-detail-ai-img-'
+
+// 状态选项列表
+const statusOptions = [
+ { name: '处置中', value: 1 },
+ { name: '已处置', value: 3 },
+ // { name: '已完成', value: 4 },
+]
+// 当前选中状态的索引
+const statusPickerIndex = computed(() => {
+ const status = workDetailData.value?.eventStatus
+ return statusOptions.findIndex(item => item.value === status)
})
-const getDataList = async val => {
- const params = {
- id: val,
- }
- const res = await getGddetailedData(params)
- const response = res.data.data
- workDetailData.value = response
+// 当前状态文本
+const currentStatusLabel = computed(() => {
+ const option = statusOptions.find(item => item.value === workDetailData.value?.eventStatus)
+ return option?.name || ''
+})
+
+// 页面加载时读取预览图缓存
+onLoad(async options => {
+ eventNum.value = options.id
+ const previewImgCacheKey = `${PREVIEW_IMG_CACHE_KEY_PREFIX}${options.id}`
+ const previewUrl = uni.getStorageSync(previewImgCacheKey)
+ uni.removeStorageSync(previewImgCacheKey)
+ await getDataList(options.id, previewUrl)
+ checkEnvironment()
+ viewUrl.value = getWebViewUrl('/workDetail', { workDetailData: JSON.stringify(workDetailData.value) })
+})
+
+// 页面显示时刷新工单详情
+onShow(() => {
+ getDataList(eventNum.value)
+})
+
+// 获取工单详情并保留预览原图
+const getDataList = async (val, previewUrl) => {
+ const params = {
+ id: val,
+ }
+ const res = await getGddetailedData(params)
+ const response = res.data.data
+ workDetailData.value = { ...response, previewUrl: previewUrl || workDetailData.value.previewUrl }
}
+
+// 获取状态文本
+const getStatusLabel = status => {
+ const map = {
+ 0: '待确认',
+ 1: '处置中',
+ 2: '已退回',
+ 3: '已处置',
+ 4: '已完成',
+ }
+ return map[status] || '未知'
+}
+
+// 切换状态
+const onStatusChange = e => {
+ const index = e.detail.value
+ const selectedOption = statusOptions[index]
+ if (!selectedOption) return
+
+ const id = workDetailData.value.id
+
+ if (workDetailData.value.eventStatus === 1 && selectedOption.value === 3) {
+ // 跳转上传处置页面
+ uni.navigateTo({
+ url: `/subPackages/workDetail/HandleWorking/index?id=${workDetailData.value.id}&eventStatus=${workDetailData.value.eventStatus}`,
+ })
+ }
+
+ if (workDetailData.value.eventStatus === 3 && selectedOption.value === 1) {
+ updateStatus({
+ eventId: workDetailData.value.id,
+ targetStatus: 1,
+ }).then(res => {
+ workDetailData.value.eventStatus = selectedOption.value
+ })
+ }
+
+ // console.log(selectedOption, '3333')
+ // backGdApi({ eventId: id, eventStatus: String(selectedOption.value) })
+ // .then(res => {
+ // uni.showToast({
+ // title: '状态更新成功',
+ // icon: 'success',
+ // duration: 1500,
+ // })
+ // workDetailData.value.eventStatus = selectedOption.value
+ // })
+ // .catch(() => {
+ // uni.showToast({
+ // title: '状态更新失败',
+ // icon: 'none',
+ // })
+ // })
+}
+
// 检查运行环境
const checkEnvironment = () => {
- const systemInfo = uni.getSystemInfoSync()
- // #ifdef APP-PLUS
- isH5.value = false
- // #endif
+ const systemInfo = uni.getSystemInfoSync()
+ // #ifdef APP-PLUS
+ isH5.value = false
+ // #endif
- // #ifdef H5
- isH5.value = true
- // #endif
+ // #ifdef H5
+ isH5.value = true
+ // #endif
- // console.log('当前环境:', isH5.value ? 'H5' : 'App')
+ // console.log('当前环境:', isH5.value ? 'H5' : 'App')
}
// 图片预览
const previewImage = index => {
- if (getImageList.value.length === 0) return
- const currentIndex = typeof index === 'number' ? index : 0
- uni.previewImage({
- urls: getImageList.value,
- current: currentIndex,
- })
+ if (getImageList.value.length === 0) return
+ const currentIndex = typeof index === 'number' ? index : 0
+ uni.previewImage({
+ urls: getImageList.value,
+ current: currentIndex,
+ })
}
+// 获取详情预览图片列表
const getImageList = computed(() => {
- const imageArr = []
- const detail = workDetailData.value
- if (detail.eventImageUrl) {
- const smallUrl = detail.eventImageUrl
- imageArr.push(smallUrl)
- }
-
- return imageArr
+ const imageArr = []
+ const detail = workDetailData.value
+ if (detail.eventImageUrl) {
+ imageArr.push(detail.previewUrl || detail.eventImageUrl)
+ }
+ return imageArr
})
// 跳转地图
const jumpMap = item => {
- // const contactStr = encodeURIComponent(JSON.stringify(item))
- const contactStr = JSON.stringify(item)
- uni.navigateTo({
- url: `/subPackages/workDetail/mapWork/index?eventNum=${contactStr}`,
- })
+ // const contactStr = encodeURIComponent(JSON.stringify(item))
+ const contactStr = JSON.stringify(item)
+ uni.navigateTo({
+ url: `/subPackages/workDetail/mapWork/index?eventNum=${contactStr}`,
+ })
}
// 退回
const rejectTicket = () => {
- const id = workDetailData.value.id
- backGdApi({eventId : id,eventStatus:'0'}).then(res => {
- uni.showToast({
- title: '退回成功',
- icon: 'success',
- duration: 1500
- })
- setTimeout(() => {
- uni.navigateBack()
- })
- })
-
+ // const id = workDetailData.value.id
+ // backGdApi({ eventId: id, eventStatus: '0' }).then(res => {
+ // uni.showToast({
+ // title: '退回成功',
+ // icon: 'success',
+ // duration: 1500,
+ // })
+ // setTimeout(() => {
+ // uni.navigateBack()
+ // })
+ // })
+ updateStatus({
+ eventId: workDetailData.value.id,
+ targetStatus: 2,
+ }).then(res => {
+ uni.showToast({
+ title: '退回成功',
+ icon: 'success',
+ duration: 1500,
+ })
+ setTimeout(() => {
+ uni.navigateBack()
+ })
+ })
}
// 确认工单
const confirmTheTicket = () => {
- const id = workDetailData.value.id
- backGdApi({eventId : id,eventStatus:'1'}).then(res => {
- uni.showToast({
- title: '确认成功',
- icon: 'success',
- duration: 1500
- })
- setTimeout(() => {
- uni.navigateBack()
- })
- })
+ // const id = workDetailData.value.id
+ // backGdApi({ eventId: id, eventStatus: '1' }).then(res => {
+ // uni.showToast({
+ // title: '确认成功',
+ // icon: 'success',
+ // duration: 1500,
+ // })
+ // setTimeout(() => {
+ // uni.navigateBack()
+ // })
+ // })
+ updateStatus({
+ eventId: workDetailData.value.id,
+ targetStatus: 1,
+ }).then(res => {
+ uni.showToast({
+ title: '确认成功',
+ icon: 'success',
+ duration: 1500,
+ })
+ setTimeout(() => {
+ // uni.navigateBack()
+ workDetailData.value.eventStatus = 1
+ })
+ })
}
-// 已确认
+
+// 处置记录 - 跳转至处置记录页面
+function handlelogs() {
+ uni.navigateTo({
+ url: `/subPackages/workDetail/HandleWork/index?id=${workDetailData.value.id}&eventStatus=${workDetailData.value.eventStatus}`,
+ })
+}
+// 上传处置记录
+function uploadHandle() {
+ uni.navigateTo({
+ url: `/subPackages/workDetail/HandleWorking/index?id=${workDetailData.value.id}&eventStatus=${workDetailData.value.eventStatus}`,
+ })
+}
+
+// 打开完成情况弹窗
const confirmedHandle = () => {
- uni.navigateBack()
+ completeContent.value = ''
+ showCompleteModal.value = true
+}
+
+// 关闭完成情况弹窗
+const closeCompleteModal = () => {
+ if (completing.value) return
+ showCompleteModal.value = false
+}
+
+// 提交完成情况
+const submitComplete = async () => {
+ const operateContent = completeContent.value.trim()
+ if (!operateContent) {
+ uni.showToast({ title: '请输入完成情况', icon: 'none' })
+ return
+ }
+ completing.value = true
+ try {
+ // await updateStatus({
+ // eventId: workDetailData.value.id,
+ // targetStatus: 4,
+ // operateContent,
+ // })
+ await addDisposeRecord({
+ eventId: workDetailData.value.id,
+ disposeContent: operateContent,
+ recordType: 1,
+ targetEventStatus: 4,
+ updateEventStatus: true,
+ // attachUrl: ''
+ })
+ uni.showToast({ title: '操作成功', icon: 'success' })
+ setTimeout(() => {
+ uni.navigateBack()
+ }, 1000)
+ } catch {
+ completing.value = false
+ uni.showToast({ title: '操作失败，请重试', icon: 'none' })
+ }
}
// 分享模态框状态
const showShareModal = ref(false)
@@ -226,7 +455,8 @@
// 复制链接
const copyLink = async () => {
- const shareUrl =getWebViewUrl("/workDetail", { workDetailData: JSON.stringify(workDetailData.value) })
+ const res = await shareCacheApi(workDetailData.value)
+ const shareUrl = getWebViewUrl('/workDetail', { workDetailData: JSON.stringify(res.data.data) })
try {
await uni.setClipboardData({
data: shareUrl,
@@ -276,7 +506,7 @@
type: 0,
title: workDetailData.value.event_name || '工单详情',
summary: '查看工单详情',
- href: getWebViewUrl("/workDetail", { workDetailData: JSON.stringify(workDetailData.value) }),
+ href: getWebViewUrl('/workDetail', { workDetailData: JSON.stringify(workDetailData.value) }),
imageUrl: workDetailData.value.eventImageUrl,
success: () => {
uni.showToast({ title: '分享成功', icon: 'success' })
@@ -310,152 +540,289 @@
// 返回按钮点击事件
const onBackClick = () => {
- uni.navigateBack()
+ uni.navigateBack()
}
// 监听导航栏右侧按钮点击事件（兼容原来的配置）
const onNavigationBarButtonTap = e => {
- if (e.index === 0) {
- onShareClick()
- }
+ if (e.index === 0) {
+ onShareClick()
+ }
}
</script>
<style lang="scss" scoped>
.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%;
- height: 410rpx;
+ // 添加导航栏高度的padding-top，避免内容被遮挡
+ padding-top: 88rpx;
+ height: 100vh;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ :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 {
+ flex-shrink: 0;
+ // #ifdef APP-PLUS
+ padding-top: 60rpx;
+ // #endif
+ .image-container {
+ position: relative;
+ width: 100%;
+ height: 410rpx;
- .detailImage {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
- }
- // 轮播图容器
- :deep(.u-swiper) {
- // 指示器容器 - 修改为居中对齐
- .u-swiper__indicator {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: 20rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 10;
- }
- .u-swiper-indicator__wrapper__dot--active {
- width: 5px !important;
- }
- }
+ .detailImage {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+ }
+ // 轮播图容器
+ :deep(.u-swiper) {
+ // 指示器容器 - 修改为居中对齐
+ .u-swiper__indicator {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 20rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+ }
+ .u-swiper-indicator__wrapper__dot--active {
+ width: 5px !important;
+ }
+ }
+ }
+ }
- }
- }
+ .worderContainer {
+ flex: 1;
+ min-height: 0;
+ padding: 0 24rpx;
+ padding-bottom: 4rpx;
+ background: #f6f6f6;
+ margin-top: 20rpx;
+ overflow-y: auto;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ }
+ .workOrderContent {
+ margin-top: 30epx;
+ background-color: #fff;
+ border-radius: 12rpx;
+ padding: 20rpx;
+ margin-bottom: 34rpx;
+ .workOrderTitle {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: bold;
+ font-size: 32rpx;
+ color: #222324;
+ }
+ .workOrderContainer {
+ .orderRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 96rpx;
+ border-bottom: 1px solid #f5f5f5;
+ color: #7b7b7b;
+ .rowTitle {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 30rpx;
+ color: #222324;
+ white-space: nowrap;
+ }
+ .rowAddress {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #1d6fe9;
+ text-decoration: underline;
+ text-align: right;
- .worderContainer {
- padding: 0 24rpx;
- padding-bottom: 4rpx;
- background: #f6f6f6;
- margin-top: 20rpx;
- }
- .workOrderContent {
- margin-top: 30epx;
- background-color: #fff;
- border-radius: 12rpx;
- padding: 20rpx;
- margin-bottom: 34rpx;
- .workOrderTitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 32rpx;
- color: #222324;
- }
- .workOrderContainer {
- .orderRow {
- display: flex;
- justify-content: space-between;
- align-items: center;
- min-height: 96rpx;
- border-bottom: 1px solid #f5f5f5;
- color: #7b7b7b;
- .rowTitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 30rpx;
- color: #222324;
- white-space: nowrap;
- }
- .rowAddress {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 28rpx;
- color: #1d6fe9;
- text-decoration: underline;
- text-align: right;
+ padding-top: 1px;
+ padding-left: 5px;
+ padding-right: 2px;
+ }
+ .status-picker {
+ .picker-value {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #1d6fe9;
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ }
+ .picker-arrow {
+ font-size: 20rpx;
+ color: #999;
+ }
+ }
+ }
+ }
+ }
- padding-top: 1px;
- padding-left: 5px;
- padding-right: 2px;
- }
- }
- }
- }
+ .actionButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ width: 100%;
+ height: 61px;
+ padding: 0 24rpx;
- .actionButton {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 61px;
+ border-radius: 6px 6px 6px 6px;
- border-radius: 6px 6px 6px 6px;
+ .btngroups {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ min-width: 0;
+ :deep(.u-button) {
+ width: 0 !important;
+ min-width: 0;
+ margin: 0 !important;
+ flex: 1;
+ height: 76rpx !important;
+ }
+ &:not(.three-actions) {
+ :deep(.u-button + .u-button) {
+ margin-left: 20rpx !important;
+ }
+ }
+ &.three-actions {
+ justify-content: center;
+ :deep(.u-button) {
+ width: 210rpx !important;
+ flex: 0 0 210rpx;
+ }
+ :deep(.u-button:last-child) {
+ margin-left: 20rpx !important;
+ }
+ }
+ }
+ }
+}
- .btngroups {
- display: flex;
- justify-content: space-between;
- align-items: center;
- :deep(.u-button) {
- width: 276rpx !important;
- height: 76rpx !important;
- &:last-child {
- margin-left: 30rpx;
- }
- }
- }
- }
+.complete-modal-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 10000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ padding: 40rpx;
+ background: rgba(0, 0, 0, 0.55);
+}
+
+.complete-modal {
+ box-sizing: border-box;
+ width: 620rpx;
+ max-width: 100%;
+ padding: 32rpx;
+ background: #ffffff;
+ border-radius: 12rpx;
+}
+
+.complete-modal-title {
+ margin-bottom: 28rpx;
+ font-size: 32rpx;
+ font-weight: 500;
+ color: #222324;
+ text-align: center;
+}
+
+.complete-input-wrapper {
+ position: relative;
+ box-sizing: border-box;
+ height: 220rpx;
+ padding-bottom: 38rpx;
+ background: #f6f7f9;
+ border: 1rpx solid #e5e7eb;
+ border-radius: 6rpx;
+}
+
+.complete-input {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ padding: 20rpx;
+ font-size: 28rpx;
+ line-height: 1.5;
+ color: #222324;
+}
+
+.complete-word-count {
+ position: absolute;
+ right: 16rpx;
+ bottom: 10rpx;
+ font-size: 22rpx;
+ color: #999999;
+}
+
+.complete-modal-actions {
+ display: flex;
+ gap: 24rpx;
+ margin-top: 30rpx;
+}
+
+.complete-action-btn {
+ height: 76rpx;
+ margin: 0;
+ flex: 1;
+ font-size: 28rpx;
+ line-height: 76rpx;
+ border-radius: 6rpx;
+}
+
+.complete-action-btn::after {
+ border: 0;
+}
+
+.complete-cancel-btn {
+ color: #666666;
+ background: #f1f2f4;
+}
+
+.complete-confirm-btn {
+ color: #ffffff;
+ background: #1d6fe9;
+}
+
+.complete-action-btn[disabled] {
+ opacity: 0.65;
}
/* 分享弹出层样式 */
@@ -541,7 +908,6 @@
.share-icon.moments {
background-image: url('@/static/images/work/moments.svg');
}
-
.share-icon.link {
background-image: url('@/static/images/work/link.svg');
--
Gitblit v1.9.3