feat: app视频封面图

罗广辉

5 days ago 1d552a3bad95caae4af15322df28e6240b797693

 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');