update
This commit is contained in:
parent
59b3386ff4
commit
db936079bb
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user