aiot-uniapp/src/pages/scan/work-order/create.vue

<template>
  <view class="yd-page-container">
    <wd-navbar
      title="新建工单"
      left-arrow
      placeholder
      safe-area-inset-top
      fixed
      @click-left="handleBack"
    />

    <view class="ai-card mx-32rpx mt-24rpx p-48rpx">
      <!-- 区域选择 -->
      <view class="mb-40rpx">
        <view class="mb-12rpx text-22rpx text-[#9CA3AF] font-600" style="letter-spacing: 4rpx;">
          区域
        </view>
        <wd-picker
          v-model="formData.area"
          :columns="areaOptions"
          label=""
          placeholder="请选择区域"
        />
      </view>

      <!-- 工单描述 -->
      <view class="mb-40rpx">
        <view class="mb-12rpx text-22rpx text-[#9CA3AF] font-600" style="letter-spacing: 4rpx;">
          问题描述
        </view>
        <view class="textarea-wrap">
          <wd-textarea
            v-model="formData.description"
            placeholder="请描述问题详情..."
            :maxlength="500"
            clearable
          />
        </view>
      </view>

      <!-- 拍照 -->
      <view class="mb-40rpx">
        <view class="mb-12rpx text-22rpx text-[#9CA3AF] font-600" style="letter-spacing: 4rpx;">
          现场照片
        </view>
        <view class="flex gap-16rpx">
          <view class="media-btn" @click="handleTakePhoto">
            <view class="i-carbon-camera text-40rpx text-[#F97316]" />
          </view>
          <view
            v-for="(photo, index) in photos"
            :key="index"
            class="relative h-160rpx w-160rpx overflow-hidden rounded-24rpx"
          >
            <image :src="photo" mode="aspectFill" class="h-full w-full" />
            <view
              class="absolute right-0 top-0 h-40rpx w-40rpx flex items-center justify-center rounded-bl-24rpx bg-black/50"
              @click="removePhoto(index)"
            >
              <view class="i-carbon-close text-12px text-white" />
            </view>
          </view>
        </view>
      </view>

      <!-- 优先级 -->
      <view class="mb-32rpx">
        <view class="mb-12rpx text-22rpx text-[#9CA3AF] font-600" style="letter-spacing: 4rpx;">
          优先级
        </view>
        <view class="flex gap-16rpx">
          <view
            v-for="p in priorities"
            :key="p.value"
            class="priority-btn"
            :class="formData.priority === p.value ? getPriorityActiveClass(p.value) : ''"
            @click="formData.priority = p.value"
          >
            {{ p.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="mx-32rpx my-48rpx">
      <view class="ai-btn-primary" @click="handleSubmit">
        确认派单
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useToast } from 'wot-design-uni'

definePage({
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
})

const toast = useToast()
const photos = ref<string[]>([])

function handleBack() {
  uni.navigateBack()
}

const formData = reactive({
  area: '',
  description: '',
  priority: 'P1',
})

const areaOptions = ['A栋大堂', 'B栋电梯', 'C区花园', 'B1停车场', 'D栋走廊']

const priorities = [
  { label: 'P0 紧急', value: 'P0' },
  { label: 'P1 高优', value: 'P1' },
  { label: 'P2 普通', value: 'P2' },
]

function getPriorityActiveClass(value: string) {
  if (value === 'P0')
    return 'priority-btn--red'
  return 'priority-btn--orange'
}

function handleTakePhoto() {
  uni.chooseImage({
    count: 1,
    sourceType: ['camera', 'album'],
    success: (res) => {
      photos.value.push(res.tempFilePaths[0])
    },
  })
}

function removePhoto(index: number) {
  photos.value.splice(index, 1)
}

function handleSubmit() {
  if (!formData.area) {
    toast.warning('请选择区域')
    return
  }
  if (!formData.description) {
    toast.warning('请填写问题描述')
    return
  }
  toast.success('工单已创建')
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.textarea-wrap {
  background: rgba(249, 115, 22, 0.06);
  border-radius: 48rpx;
  padding: 24rpx;
}

.media-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fff;
  border: 2rpx solid #ffedd5;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.priority-btn {
  flex: 1;
  background: rgba(249, 115, 22, 0.06);
  border-radius: 48rpx;
  padding: 24rpx 0;
  text-align: center;
  font-size: 22rpx;
  font-weight: 600;
  color: #9ca3af;
  border: 2rpx solid transparent;
  transition: all 0.2s ease;

  &--orange {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
  }

  &--red {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
  }
}
</style>