智能柜货柜二维码和刷新

src/components/PreviewImage/index.vue

@@ -1,14 +1,21 @@
 <!-- 图片预览 -->
 <script lang="ts" setup name="PreviewImage">
+import { useMessage } from "/@/hooks/message"
+import { downBlobFile } from "/@/utils/other"
+
 type Props = {
 	src?: string
 	width?: string | number
 	height?: string | number
+	download?: boolean | string
+	downloadName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	width: 50,
 	height: 50,
+	download: false,
+	downloadName: "下载",
 })
 
 const realSrc = computed(() => {
@@ -28,25 +35,33 @@ function dispatchUrl(url?: string) {
 	if (!url) return ""
 	return url.includes("http") ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
 }
+
+// 图片下载
+const download = (src: string) => {
+	if (!src) return useMessage().error("图片链接不存在")
+	downBlobFile(src, {}, `${props.downloadName}.png`)
+}
 </script>
 
 <template>
-	<el-image
+	<div v-if="props.src" class="flex flex-col items-center">
-		v-if="props.src"
+		<el-image
-		hide-on-click-modal
+			hide-on-click-modal
-		preview-teleported
+			preview-teleported
-		:src="`${realSrc}`"
+			:src="`${realSrc}`"
-		fit="cover"
+			fit="cover"
-		:style="`width:${realWidth};height:${realHeight};`"
+			:style="`width:${realWidth};height:${realHeight};`"
-		:preview-src-list="realSrcList"
+			:preview-src-list="realSrcList"
-		loading="lazy"
+			loading="lazy"
-	>
+		>
-		<template #error>
+			<template #error>
-			<div class="image-slot">
+				<div class="image-slot">
-				<i class="el-icon-picture-outline"></i>
+					<i class="el-icon-picture-outline"></i>
-			</div>
+				</div>
-		</template>
+			</template>
-	</el-image>
+		</el-image>
+		<el-button v-if="props.download" size="small" type="primary" link @click="download(props.src)">下载</el-button>
+	</div>
 	<div v-else :style="`width:${realWidth};height:${realHeight};`" />
 </template>
 

src/views/hard/hard-door-manager/index.vue

@@ -68,6 +68,7 @@
 			<el-descriptions :column="3" title="货柜信息" border>
 				<template #extra>
 					<el-space>
+						<el-button icon="RefreshRight" type="primary" @click="refreshCabinetQrCode">刷新货柜二维码</el-button>
 						<el-button icon="CircleCheck" type="primary" @click="checkOpenAccess" :disabled="checkCloseLoading" :loading="checkOpenLoading">
 							检修开门
 						</el-button>
@@ -108,6 +109,15 @@
 							<el-tag v-if="item.saleStatus == 1" type="primary">在售</el-tag>
 							<el-tag v-if="item.saleStatus == 2" type="danger">停售</el-tag>
 						</el-descriptions-item>
+						<el-descriptions-item label="收款二维码：">
+							<div class="flex justify-start">
+								<preview-image
+									:src="item.qrCode"
+									download
+									:downloadName="`货柜 ${state.deviceDetail.deviceCode}-${item.cabinetNo} 二维码`"
+								/>
+							</div>
+						</el-descriptions-item>
 					</el-descriptions>
 				</el-tab-pane>
 			</el-tabs>
@@ -187,7 +197,7 @@ import { displayPrice } from "/@/utils/formatMoney"
 import * as hardDoorManager from "/@/api/hard/hard-door-manager"
 import { ElMessageBox } from "element-plus"
 import { getByCabinetNo, unPutaway } from "/@/api/hard/hard-spu"
-import { closeAccess, openAccess } from "/@/api/hard/hard-door-manager"
+import { closeAccess, openAccess, refreshQrCode } from "/@/api/hard/hard-door-manager"
 
 const InfoSetting = defineAsyncComponent(() => import("./info-setting.vue"))
 const VolumeSetting = defineAsyncComponent(() => import("./volume-setting.vue"))
@@ -207,6 +217,8 @@ const state = reactive<any>({
 	curActivedDoorTabIndex: 0,
 	curActivedTabIndex: 0,
 })
+const hardDoorId = computed<string | undefined>(() => state.deviceDetail.cabinetList?.[state.curActivedDoorTabIndex]?.hardDoorId)
+const cabinetNo = computed<string | undefined>(() => state.deviceDetail.cabinetList?.[state.curActivedDoorTabIndex]?.cabinetNo)
 
 onMounted(async () => {
 	await getDetail()
@@ -268,12 +280,27 @@ const refreshVolume = (data: { hardId: string; mediaVolume: number; systemVolume
 	state.deviceDetail.systemVolume = data.systemVolume
 }
 
+// 刷新货柜收款二维码
+const refreshCabinetQrCode = async () => {
+	try {
+		const res = await refreshQrCode({ hardDoorId: hardDoorId.value, cabinetNo: cabinetNo.value })
+		if (res.code == 0) {
+			useMessage().success("刷新成功")
+			state.deviceDetail.cabinetList[state.curActivedDoorTabIndex].qrCode = res.data
+		} else {
+			useMessage().error(res.msg || "刷新失败")
+		}
+	} catch (error: any) {
+		useMessage().error(error.msg)
+	}
+}
+
 // 检修开门
 const checkOpenAccess = async () => {
 	try {
 		checkOpenLoading.value = true
 		const res = await openAccess({
-			hardDoorId: state.hardId,
+			hardDoorId: hardDoorId.value,
 			cabinetNo: state.deviceDetail.cabinetList[state.curActivedDoorTabIndex].cabinetNo,
 		})
 		if (res.code == 0) {
@@ -293,7 +320,7 @@ const checkCloseAccess = async () => {
 	try {
 		checkCloseLoading.value = true
 		const res = await closeAccess({
-			hardDoorId: state.hardId,
+			hardDoorId: hardDoorId.value,
 			cabinetNo: state.deviceDetail.cabinetList[state.curActivedDoorTabIndex].cabinetNo,
 		})
 		if (res.code == 0) {

src/views/mch/mch-manage/index.vue

@@ -71,8 +71,7 @@
 				<el-table-column prop="collectionCode" width="150" align="center" label="商户收款二维码" show-overflow-tooltip>
 					<template #default="{ row }">
 						<div class="flex flex-col justify-center items-center">
-							<preview-image :src="row.collectionCode" />
+							<preview-image :src="row.collectionCode" download :downloadName="`${row.name} 收款二维码`" />
-							<el-button v-if="row.collectionCode" size="small" type="primary" link @click="downloadCollectionCode(row)">下载</el-button>
 						</div>
 					</template>
 				</el-table-column>
@@ -178,7 +177,6 @@ import { useDict } from "/@/hooks/dict"
 import FormDialog from "./form.vue"
 import Setting from "./setting.vue"
 import { useUserInfo } from "/@/stores/userInfo"
-import { downBlobFile as downCollectionCodeBlobFile } from "/@/utils/other"
 
 const { merchant_type, wallet_type, yes_no_type } = useDict("merchant_type", "wallet_type", "yes_no_type")
 
@@ -279,12 +277,6 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
-
-// 点击二维码下载
-const downloadCollectionCode = (row: any) => {
-	if (!row.collectionCode) return useMessage().error("二维码链接不存在")
-	downCollectionCodeBlobFile(row.collectionCode, {}, `${row.name} 收款二维码.png`)
-}
 </script>
 
 <style scoped lang="scss">