From cd30efe0f6af01b0265b972584c7b077adcbcb34 Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Fri, 18 Sep 2026 15:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E5=A4=87=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=EF=BC=8C=E6=8A=BD=E7=A6=BB=E5=94=AE=E8=B4=A7=E6=9C=BA?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/product/device/DeviceForm.vue  | 67 +++++++++++++++++--
 src/views/mall/product/device/index.vue       | 53 +++++++++++++--
 src/views/mall/product/devicelog/index.vue    | 29 ++++++--
 src/views/mall/statistics/devicelog/index.vue | 29 ++++++--
 4 files changed, 157 insertions(+), 21 deletions(-)

diff --git a/src/views/mall/product/device/DeviceForm.vue b/src/views/mall/product/device/DeviceForm.vue
index 7d89e739..040a60b0 100644
--- a/src/views/mall/product/device/DeviceForm.vue
+++ b/src/views/mall/product/device/DeviceForm.vue
@@ -24,12 +24,21 @@
       <el-form-item label="广告图设置">
         <el-radio-group v-model="formData.adType" @change="handleAdTypeChange">
           <el-radio label="upload">上传广告图</el-radio>
+          <el-radio label="video">上传广告视频</el-radio>
           <el-radio label="link">广告图链接</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="formData.adType === 'upload'" label="添加广告图" prop="adImage">
         <UploadImg v-model="formData.adImage" :limit="1" :is-show-tip="false" />
       </el-form-item>
+      <el-form-item v-if="formData.adType === 'video'" label="添加广告视频" prop="adVideo">
+        <UploadFile
+          v-model="formData.adVideo"
+          :file-type="['mp4', 'webm', 'mov']"
+          :limit="1"
+          :file-size="100"
+        />
+      </el-form-item>
       <el-form-item v-if="formData.adType === 'link'" label="广告图链接" prop="adUrl">
         <el-input v-model="formData.adUrl" placeholder="请输入广告图链接" />
       </el-form-item>
@@ -51,7 +60,7 @@
 </template>
 <script setup lang="ts">
 import { DeviceApi, DeviceVO } from '@/api/product/device'
-import { UploadImg} from '@/components/UploadFile'
+import { UploadImg, UploadFile } from '@/components/UploadFile'
 
 /** 贩卖机信息 表单 */
 defineOptions({ name: 'DeviceForm' })
@@ -69,9 +78,10 @@ const formData = ref({
   deviceId: undefined,
   productUrl: undefined,
   fileUrl: undefined,
-  adType: 'upload', // 广告图类型：upload-上传图片，link-链接
-  adImage: undefined, // 广告图文件（使用 /infra/file/upload 接口）
-  adUrl: undefined, // 广告图链接
+  adType: 'upload', // 广告类型：upload-上传图片，video-上传视频，link-链接
+  adImage: undefined as string | undefined, // 广告图文件（使用 /infra/file/upload 接口）
+  adVideo: undefined as string | undefined, // 广告视频文件
+  adUrl: undefined as string | undefined, // 广告图链接
   showInApp: true, // 是否在 APP 中显示，默认显示
 })
 const formRules = reactive({
@@ -80,12 +90,45 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 
+/** 判断是否为视频地址 */
+const isVideoUrl = (url?: string) => {
+  if (!url) return false
+  return /\.(mp4|webm|ogg|mov)(\?|$)/i.test(url)
+}
+
+/** 根据已保存的 fileUrl 回填广告表单字段 */
+const fillAdFields = (fileUrl?: string) => {
+  if (!fileUrl) {
+    formData.value.adType = 'upload'
+    formData.value.adImage = undefined
+    formData.value.adVideo = undefined
+    formData.value.adUrl = undefined
+    return
+  }
+  if (isVideoUrl(fileUrl)) {
+    formData.value.adType = 'video'
+    formData.value.adVideo = fileUrl
+    formData.value.adImage = undefined
+    formData.value.adUrl = undefined
+  } else {
+    formData.value.adType = 'upload'
+    formData.value.adImage = fileUrl
+    formData.value.adVideo = undefined
+    formData.value.adUrl = undefined
+  }
+}
+
 /** 广告图类型切换处理 */
 const handleAdTypeChange = (value: string) => {
   if (value === 'upload') {
     formData.value.adUrl = undefined
+    formData.value.adVideo = undefined
+  } else if (value === 'video') {
+    formData.value.adImage = undefined
+    formData.value.adUrl = undefined
   } else if (value === 'link') {
     formData.value.adImage = undefined
+    formData.value.adVideo = undefined
   }
 }
 
@@ -99,7 +142,12 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await DeviceApi.getDevice(id)
+      const data = await DeviceApi.getDevice(id)
+      formData.value = {
+        ...formData.value,
+        ...data,
+      }
+      fillAdFields(data.fileUrl)
     } finally {
       formLoading.value = false
     }
@@ -118,11 +166,15 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = { ...formData.value } as unknown as DeviceVO
+    const data = { ...formData.value } as unknown as DeviceVO & {
+      adVideo?: string
+    }
 
-    // 根据广告图类型设置 fileUrl
+    // 根据广告类型设置 fileUrl
     if (data.adType === 'upload' && data.adImage) {
       data.fileUrl = data.adImage
+    } else if (data.adType === 'video' && data.adVideo) {
+      data.fileUrl = data.adVideo
     } else if (data.adType === 'link' && data.adUrl) {
       data.fileUrl = data.adUrl
     }
@@ -167,6 +219,7 @@ const resetForm = () => {
     fileUrl: undefined,
     adType: 'upload',
     adImage: undefined,
+    adVideo: undefined,
     adUrl: undefined,
     showInApp: true,
   }
diff --git a/src/views/mall/product/device/index.vue b/src/views/mall/product/device/index.vue
index 93bc90e9..5f35f9cd 100644
--- a/src/views/mall/product/device/index.vue
+++ b/src/views/mall/product/device/index.vue
@@ -8,9 +8,20 @@ v-model="queryParams.name" placeholder="请输入设备名称" clearable @keyup.
           class="!w-240px" />
       </el-form-item>
       <el-form-item label="设备IMEI" prop="deviceId">
-        <el-input
-v-model="queryParams.deviceId" placeholder="请输入设备IMEI" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
+        <el-select
+          v-model="queryParams.deviceId"
+          class="!w-240px"
+          clearable
+          filterable
+          placeholder="请选择设备"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="`${item.name}（${item.deviceId}）`"
+            :value="item.deviceId"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="访问商品地址" prop="productUrl">
         <el-input
@@ -56,7 +67,24 @@ type="success" plain @click="handleExport" :loading="exportLoading"
       <!-- <el-table-column label="访问商品地址" width="250" align="center" prop="productUrl" /> -->
       <el-table-column label="广告" align="center" prop="fileUrl">
         <template #default="{ row }">
-          <el-image :src="row.fileUrl" class="mr-10px h-30px w-30px" @click="imagePreview(row.fileUrl)" />
+          <template v-if="row.fileUrl">
+            <el-link
+              v-if="isVideoUrl(row.fileUrl)"
+              :href="row.fileUrl"
+              type="primary"
+              target="_blank"
+              :underline="false"
+            >
+              <Icon icon="ep:video-play" class="mr-5px" />视频
+            </el-link>
+            <el-image
+              v-else
+              :src="row.fileUrl"
+              class="mr-10px h-30px w-30px"
+              @click="imagePreview(row.fileUrl)"
+            />
+          </template>
+          <span v-else>-</span>
         </template>
       </el-table-column>
       <el-table-column label="小程序二维码" width="150" align="center" prop="productUrl">
@@ -135,6 +163,16 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const deviceOptions = ref<DeviceVO[]>([])
+
+/** 加载设备下拉 */
+const loadDeviceOptions = async () => {
+  try {
+    deviceOptions.value = (await DeviceApi.getDeviceListSimpleByUser()) || []
+  } catch {
+    deviceOptions.value = []
+  }
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -167,6 +205,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 判断是否为视频地址 */
+const isVideoUrl = (url?: string) => {
+  if (!url) return false
+  return /\.(mp4|webm|ogg|mov)(\?|$)/i.test(url)
+}
+
 // 查看图片
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
@@ -229,6 +273,7 @@ const handleChannelManage = (row: DeviceVO) => {
 
 /** 初始化 **/
 onMounted(() => {
+  loadDeviceOptions()
   getList()
 })
 
diff --git a/src/views/mall/product/devicelog/index.vue b/src/views/mall/product/devicelog/index.vue
index 37a48da9..8392462e 100644
--- a/src/views/mall/product/devicelog/index.vue
+++ b/src/views/mall/product/devicelog/index.vue
@@ -9,13 +9,20 @@
       label-width="68px"
     >
       <el-form-item label="设备IMEI" prop="deviceId">
-        <el-input
+        <el-select
           v-model="queryParams.deviceId"
-          placeholder="请输入设备IMEI"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+          clearable
+          filterable
+          placeholder="请选择设备"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="`${item.name}（${item.deviceId}）`"
+            :value="item.deviceId"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="货道" prop="cabinetChannel">
         <el-input
@@ -125,6 +132,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceLogApi, DeviceLogVO } from '@/api/product/devicelog'
+import { DeviceApi, DeviceVO } from '@/api/product/device'
 import DeviceLogForm from './DeviceLogForm.vue'
 
 /** 贩卖机测试日志 列表 */
@@ -147,6 +155,16 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const deviceOptions = ref<DeviceVO[]>([])
+
+/** 加载设备下拉 */
+const loadDeviceOptions = async () => {
+  try {
+    deviceOptions.value = (await DeviceApi.getDeviceListSimpleByUser()) || []
+  } catch {
+    deviceOptions.value = []
+  }
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -208,6 +226,7 @@ const handleExport = async () => {
 
 /** 初始化 **/
 onMounted(() => {
+  loadDeviceOptions()
   getList()
 })
 </script>
diff --git a/src/views/mall/statistics/devicelog/index.vue b/src/views/mall/statistics/devicelog/index.vue
index d5e5ed02..8a268380 100644
--- a/src/views/mall/statistics/devicelog/index.vue
+++ b/src/views/mall/statistics/devicelog/index.vue
@@ -36,13 +36,20 @@
         />
       </el-form-item>
       <el-form-item label="设备IMEI" prop="deviceId">
-        <el-input
+        <el-select
           v-model="queryParams.deviceId"
-          placeholder="请输入设备IMEI"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+          clearable
+          filterable
+          placeholder="请选择设备"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="`${item.name}（${item.deviceId}）`"
+            :value="item.deviceId"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="出货状态" prop="deviceStatus">
         <el-select
@@ -147,6 +154,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceLogApi, DeviceLogVO } from '@/api/mall/statistics/devicelog'
+import { DeviceApi, DeviceVO } from '@/api/product/device'
 import DeviceLogForm from './DeviceLogForm.vue'
 
 /** 贩卖机出货日志 列表 */
@@ -171,6 +179,16 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const deviceOptions = ref<DeviceVO[]>([])
+
+/** 加载设备下拉 */
+const loadDeviceOptions = async () => {
+  try {
+    deviceOptions.value = (await DeviceApi.getDeviceListSimpleByUser()) || []
+  } catch {
+    deviceOptions.value = []
+  }
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -232,6 +250,7 @@ const handleExport = async () => {
 
 /** 初始化 **/
 onMounted(() => {
+  loadDeviceOptions()
   getList()
 })
 </script>