feat(店铺管理): 添加生成店铺二维码功能

在店铺管理页面中新增二维码按钮,点击后弹出对话框显示微信扫码访问的二维码。该功能方便用户通过微信快速访问店铺页面。
This commit is contained in:
dzq 2025-05-09 15:26:19 +08:00
parent e2f588ed9a
commit f3451a3357
1 changed files with 20 additions and 0 deletions

View File

@ -8,8 +8,10 @@ import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ri/add-circle-line"; import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search"; import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh"; import Refresh from "@iconify-icons/ep/refresh";
import Qrcode from "@iconify-icons/ep/iphone";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import ShopFormModal from "./shop-form-modal.vue"; import ShopFormModal from "./shop-form-modal.vue";
import ReQrcode from "@/components/ReQrcode";
defineOptions({ defineOptions({
name: "Shop" name: "Shop"
@ -113,6 +115,14 @@ const handleEdit = (row: ShopDTO) => {
editVisible.value = true; editVisible.value = true;
}; };
const qrVisible = ref(false);
const currentShopId = ref<number>(null);
const showQrCode = (shopId: number) => {
currentShopId.value = shopId;
qrVisible.value = true;
};
getList(); getList();
</script> </script>
@ -153,6 +163,9 @@ getList();
<el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)"> <el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEdit(row)">
编辑 编辑
</el-button> </el-button>
<el-button type="success" link :icon="useRenderIcon(Qrcode)" @click="showQrCode(row.shopId)">
二维码
</el-button>
<el-popconfirm :title="`确认删除【${row.shopName}】?`" @confirm="handleDelete(row)"> <el-popconfirm :title="`确认删除【${row.shopName}】?`" @confirm="handleDelete(row)">
<template #reference> <template #reference>
<el-button type="danger" link :icon="useRenderIcon(Delete)"> <el-button type="danger" link :icon="useRenderIcon(Delete)">
@ -170,5 +183,12 @@ getList();
<ShopFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" /> <ShopFormModal :visible="modalVisible" @update:visible="val => modalVisible = val" @refresh="handleRefresh" />
<ShopFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val" <ShopFormModal :visible="editVisible" :row="currentRow" @update:visible="val => editVisible = val"
@refresh="handleRefresh" /> @refresh="handleRefresh" />
<el-dialog v-model="qrVisible" title="微信扫码访问" width="300px">
<div class="flex flex-col items-center">
<ReQrcode :text="`http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth?shopId=${currentShopId}`"
:options="{ width: 200 }" />
<div class="mt-2 text-sm text-gray-500">微信扫码访问</div>
</div>
</el-dialog>
</div> </div>
</template> </template>