This commit is contained in:
aaron 2025-04-14 23:17:07 +08:00
parent 1290832735
commit 45d4816c3a

View File

@ -37,6 +37,7 @@
<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="handleGetQrCode(record)">获取二维码</a> <a @click="handleGetQrCode(record)">获取二维码</a>
<a @click="handleGetLink(record)">获取链接</a>
</a-space> </a-space>
</template> </template>
</template> </template>
@ -255,6 +256,41 @@
</template> </template>
</div> </div>
</a-modal> </a-modal>
<!-- 活动链接模态框 -->
<a-modal
v-model:visible="linkModalVisible"
title="活动链接"
@cancel="handleLinkModalCancel"
:footer="null"
width="500px"
centered
>
<div class="link-container">
<div v-if="linkLoading" class="link-loading">
<a-spin />
<p>获取链接中...</p>
</div>
<template v-else>
<div class="link-content">
<a-input
v-model:value="activityLink"
class="link-input"
readonly
>
<template #addonAfter>
<a-button type="link" @click="copyLink" size="small">
复制
</a-button>
</template>
</a-input>
</div>
<div class="link-tip">
<p>复制链接分享给用户参与活动</p>
</div>
</template>
</div>
</a-modal>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -274,7 +310,8 @@ import {
Checkbox, Checkbox,
Card, Card,
Divider, Divider,
Spin Spin,
Button
} from 'ant-design-vue' } from 'ant-design-vue'
import PageContainer from '@/components/PageContainer.vue' import PageContainer from '@/components/PageContainer.vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -297,7 +334,8 @@ export default defineComponent({
ACard: Card, ACard: Card,
ADivider: Divider, ADivider: Divider,
QrcodeVue, QrcodeVue,
ASpin: Spin ASpin: Spin,
AButton: Button
}, },
setup() { setup() {
@ -715,6 +753,11 @@ export default defineComponent({
const qrCodeUrl = ref('') const qrCodeUrl = ref('')
const qrCodeLoading = ref(false) const qrCodeLoading = ref(false)
//
const linkModalVisible = ref(false)
const activityLink = ref('')
const linkLoading = ref(false)
// //
const handleGetQrCode = async (record) => { const handleGetQrCode = async (record) => {
// //
@ -722,7 +765,7 @@ export default defineComponent({
qrCodeLoading.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_qr_code`)
if (res.code === 200) { if (res.code === 200) {
qrCodeUrl.value = res.data qrCodeUrl.value = res.data
} else { } else {
@ -738,6 +781,58 @@ export default defineComponent({
} }
} }
//
const handleGetLink = async (record) => {
//
linkModalVisible.value = true
linkLoading.value = true
try {
const res = await request.get(`/api/coupon-activities/${record.id}/get_url_link`)
if (res.code === 200) {
activityLink.value = res.data
} else {
message.error('获取活动链接失败')
linkModalVisible.value = false
}
} catch (error) {
console.error('获取活动链接失败:', error)
message.error('获取活动链接失败')
linkModalVisible.value = false
} finally {
linkLoading.value = false
}
}
//
const copyLink = () => {
if (!activityLink.value) {
message.error('链接为空,无法复制')
return
}
//
const input = document.createElement('input')
input.value = activityLink.value
document.body.appendChild(input)
input.select()
try {
document.execCommand('copy')
message.success('复制成功')
} catch (error) {
console.error('复制失败:', error)
message.error('复制失败')
} finally {
document.body.removeChild(input)
}
}
//
const handleLinkModalCancel = () => {
linkModalVisible.value = false
}
// //
const handleQrCodeModalCancel = () => { const handleQrCodeModalCancel = () => {
qrCodeModalVisible.value = false qrCodeModalVisible.value = false
@ -776,7 +871,14 @@ export default defineComponent({
handleGetQrCode, handleGetQrCode,
handleQrCodeModalCancel, handleQrCodeModalCancel,
getCouponConfigValue, getCouponConfigValue,
handleCouponConfigChange handleCouponConfigChange,
//
linkModalVisible,
activityLink,
linkLoading,
handleGetLink,
copyLink,
handleLinkModalCancel
} }
} }
}) })
@ -949,4 +1051,36 @@ export default defineComponent({
margin-top: 16px; margin-top: 16px;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
} }
/* 链接相关样式 */
.link-container {
padding: 10px 0;
}
.link-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
}
.link-loading p {
margin-top: 16px;
color: rgba(0, 0, 0, 0.65);
}
.link-content {
margin-bottom: 16px;
}
.link-input {
font-size: 14px;
}
.link-tip {
text-align: center;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
}
</style> </style>