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 @click="handleEdit(record)">编辑</a>
<a @click="handleGetQrCode(record)">获取二维码</a>
<a @click="handleGetLink(record)">获取链接</a>
</a-space>
</template>
</template>
@ -255,6 +256,41 @@
</template>
</div>
</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>
</page-container>
</template>
@ -274,7 +310,8 @@ import {
Checkbox,
Card,
Divider,
Spin
Spin,
Button
} from 'ant-design-vue'
import PageContainer from '@/components/PageContainer.vue'
import dayjs from 'dayjs'
@ -297,7 +334,8 @@ export default defineComponent({
ACard: Card,
ADivider: Divider,
QrcodeVue,
ASpin: Spin
ASpin: Spin,
AButton: Button
},
setup() {
@ -715,6 +753,11 @@ export default defineComponent({
const qrCodeUrl = ref('')
const qrCodeLoading = ref(false)
//
const linkModalVisible = ref(false)
const activityLink = ref('')
const linkLoading = ref(false)
//
const handleGetQrCode = async (record) => {
//
@ -722,7 +765,7 @@ export default defineComponent({
qrCodeLoading.value = true
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) {
qrCodeUrl.value = res.data
} 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 = () => {
qrCodeModalVisible.value = false
@ -776,7 +871,14 @@ export default defineComponent({
handleGetQrCode,
handleQrCodeModalCancel,
getCouponConfigValue,
handleCouponConfigChange
handleCouponConfigChange,
//
linkModalVisible,
activityLink,
linkLoading,
handleGetLink,
copyLink,
handleLinkModalCancel
}
}
})
@ -949,4 +1051,36 @@ export default defineComponent({
margin-top: 16px;
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>