update
This commit is contained in:
parent
1290832735
commit
45d4816c3a
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user