zianxin/xrhome-pc
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化设备选择，抽离售货机订单

Browse Source
This commit is contained in:
zjf committed 2026-09-18 15:42:24 +08:00
1 parent 18ba166217
commit cd30efe0f6
4 files changed
+157 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/mall/product/device/DeviceForm.vue
+60 -7
View File
@@ -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,
}
src/views/mall/product/device/index.vue
+49 -4
View File
@@ -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()
})
src/views/mall/product/devicelog/index.vue
+24 -5
View File
@@ -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>
src/views/mall/statistics/devicelog/index.vue
+24 -5
View File
@@ -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>