feat): 广告图上传

src/views/mall/product/device/DeviceForm.vue

@@ -13,6 +13,18 @@
       <el-form-item label="设备IMEI" prop="deviceId">
         <el-input v-model="formData.deviceId" placeholder="请输入设备IMEI" />
       </el-form-item>
+      <el-form-item label="广告图设置">
+        <el-radio-group v-model="formData.adType" @change="handleAdTypeChange">
+          <el-radio label="upload">上传广告图</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 === 'link'" label="广告图链接" prop="adUrl">
+        <el-input v-model="formData.adUrl" placeholder="请输入广告图链接" />
+      </el-form-item>
       <el-form-item v-if="false" label="访问商品地址" prop="productUrl">
         <el-input v-model="formData.productUrl" placeholder="请输入访问商品地址" />
       </el-form-item>
@@ -28,6 +40,7 @@
 </template>
 <script setup lang="ts">
 import { DeviceApi, DeviceVO } from '@/api/product/device'
+import { UploadImg} from '@/components/UploadFile'
 
 /** 贩卖机信息 表单 */
 defineOptions({ name: 'DeviceForm' })
@@ -45,6 +58,9 @@ const formData = ref({
   deviceId: undefined,
   productUrl: undefined,
   fileUrl: undefined,
+  adType: 'upload', // 广告图类型：upload-上传图片，link-链接
+  adImage: undefined, // 广告图文件（使用 /infra/file/upload 接口）
+  adUrl: undefined, // 广告图链接
 })
 const formRules = reactive({
   deviceId: [{ required: true, message: '设备IMEI不能为空', trigger: 'blur' }],
@@ -52,6 +68,15 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 
+/** 广告图类型切换处理 */
+const handleAdTypeChange = (value: string) => {
+  if (value === 'upload') {
+    formData.value.adUrl = undefined
+  } else if (value === 'link') {
+    formData.value.adImage = undefined
+  }
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -102,7 +127,11 @@ const resetForm = () => {
     deviceId: undefined,
     productUrl: undefined,
     fileUrl: undefined,
+    adType: 'upload',
+    adImage: undefined,
+    adUrl: undefined,
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>
+

src/views/mall/product/device/index.vue

@@ -65,15 +65,15 @@ type="success" plain @click="handleExport" :loading="exportLoading"
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" min-width="200px">
         <template #default="{ row }">
           <el-button link type="primary" @click="refreshWechatCode(row)">
             刷新小程序二维码
           </el-button>
-          <el-button link type="primary" @click="openForm('update', row.id)" v-hasPermi="['product:device:update']">
+          <el-button type="primary" size="small" @click="openForm('update', row.id)" v-hasPermi="['product:device:update']">
             编辑
           </el-button>
-          <el-button link type="danger" @click="handleDelete(row.id)" v-hasPermi="['product:device:delete']">
+          <el-button type="danger" size="small" @click="handleDelete(row.id)" v-hasPermi="['product:device:delete']">
             删除
           </el-button>
         </template>
@@ -205,4 +205,4 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
+</script>