This commit is contained in:
aaron 2025-03-27 16:18:07 +08:00
parent 59b3386ff4
commit db936079bb

View File

@ -36,7 +36,7 @@
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-space size="small" class="action-column"> <a-space size="small" class="action-column">
<a @click="handleEdit(record)">编辑</a> <a @click="handleEdit(record)">编辑</a>
<a @click="handleGetLink(record)">获取链接</a> <a @click="handleGetQrCode(record)">获取二维码</a>
</a-space> </a-space>
</template> </template>
</template> </template>
@ -224,27 +224,23 @@
<!-- 链接二维码模态框 --> <!-- 链接二维码模态框 -->
<a-modal <a-modal
v-model:visible="qrCodeModalVisible" v-model:visible="qrCodeModalVisible"
title="活动链接" title="活动二维码"
@cancel="handleQrCodeModalCancel" @cancel="handleQrCodeModalCancel"
:footer="null" :footer="null"
width="400px" width="400px"
centered centered
> >
<div class="qrcode-container"> <div class="qrcode-container">
<div v-if="linkLoading" class="qrcode-loading"> <div v-if="qrCodeLoading" class="qrcode-loading">
<a-spin /> <a-spin />
<p>获取链接...</p> <p>获取二维码...</p>
</div> </div>
<template v-else> <template v-else>
<div class="qrcode-wrapper"> <div class="qrcode-wrapper">
<qrcode-vue :value="activityLink" :size="200" level="H" /> <img :src="qrCodeUrl" alt="活动二维码" style="width: 200px; height: 200px;" />
</div>
<div class="link-container">
<a-input v-model:value="activityLink" readonly />
<a-button type="primary" @click="copyLink">复制链接</a-button>
</div> </div>
<div class="qrcode-tip"> <div class="qrcode-tip">
<p>扫描二维码或复制链接分享给用户</p> <p>扫描二维码参与活动</p>
</div> </div>
</template> </template>
</div> </div>
@ -673,43 +669,32 @@ export default defineComponent({
}) })
const qrCodeModalVisible = ref(false) const qrCodeModalVisible = ref(false)
const activityLink = ref('') const qrCodeUrl = ref('')
const linkLoading = ref(false) const qrCodeLoading = ref(false)
// //
const handleGetLink = async (record) => { const handleGetQrCode = async (record) => {
// //
qrCodeModalVisible.value = true qrCodeModalVisible.value = true
linkLoading.value = true qrCodeLoading.value = true
try { try {
const res = await request.get(`/api/coupon-activities/${record.id}/get_url_link`) const res = await request.get(`/api/coupon-activities/${record.id}/get_url_link`)
if (res.code === 200) { if (res.code === 200) {
activityLink.value = res.data qrCodeUrl.value = res.data
} else { } else {
message.error('获取活动链接失败') message.error('获取活动二维码失败')
qrCodeModalVisible.value = false qrCodeModalVisible.value = false
} }
} catch (error) { } catch (error) {
console.error('获取活动链接失败:', error) console.error('获取活动二维码失败:', error)
message.error('获取活动链接失败') message.error('获取活动二维码失败')
qrCodeModalVisible.value = false qrCodeModalVisible.value = false
} finally { } finally {
linkLoading.value = false qrCodeLoading.value = false
} }
} }
//
const copyLink = () => {
const input = document.createElement('input')
input.value = activityLink.value
document.body.appendChild(input)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
message.success('链接已复制到剪贴板')
}
// //
const handleQrCodeModalCancel = () => { const handleQrCodeModalCancel = () => {
qrCodeModalVisible.value = false qrCodeModalVisible.value = false
@ -743,10 +728,9 @@ export default defineComponent({
isSelectedCoupon, isSelectedCoupon,
handleCouponSelect, handleCouponSelect,
qrCodeModalVisible, qrCodeModalVisible,
activityLink, qrCodeUrl,
linkLoading, qrCodeLoading,
handleGetLink, handleGetQrCode,
copyLink,
handleQrCodeModalCancel handleQrCodeModalCancel
} }
} }
@ -895,18 +879,6 @@ export default defineComponent({
margin-bottom: 16px; margin-bottom: 16px;
} }
.link-container {
display: flex;
align-items: center;
margin-bottom: 16px;
width: 100%;
gap: 8px;
}
.link-container .ant-input {
flex: 1;
}
.qrcode-tip { .qrcode-tip {
text-align: center; text-align: center;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);