|
|
@@ -1,19 +1,19 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
- <el-form-item label="链接ID" prop="qwAcquisitionAssistantId">
|
|
|
+ <el-form-item label="链接名称" prop="linkName">
|
|
|
<el-input
|
|
|
- v-model="queryParams.qwAcquisitionAssistantId"
|
|
|
- placeholder="请输入获客链接ID"
|
|
|
+ v-model="queryParams.linkName"
|
|
|
+ placeholder="请输入获客链接名称"
|
|
|
clearable
|
|
|
size="small"
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="链接" prop="link">
|
|
|
+ <el-form-item label="销售名称" prop="createName">
|
|
|
<el-input
|
|
|
- v-model="queryParams.link"
|
|
|
- placeholder="请输入完整链接"
|
|
|
+ v-model="queryParams.createName"
|
|
|
+ placeholder="请输入销售名称"
|
|
|
clearable
|
|
|
size="small"
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
@@ -36,13 +36,13 @@
|
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
<el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-edit"
|
|
|
- size="mini"
|
|
|
- :disabled="single"
|
|
|
- @click="handleUpdate"
|
|
|
- >修改</el-button>
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- icon="el-icon-edit"-->
|
|
|
+<!-- size="mini"-->
|
|
|
+<!-- :disabled="single"-->
|
|
|
+<!-- @click="handleUpdate"-->
|
|
|
+<!-- >修改</el-button>-->
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
@@ -66,30 +66,42 @@
|
|
|
|
|
|
<el-table v-loading="loading" :data="qwAcquisitionLinkInfoList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="获客链接ID" align="center" prop="qwAcquisitionAssistantId" />
|
|
|
- <el-table-column label="完整链接" align="center" prop="link" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column label="客户电话" align="center" prop="phone" />
|
|
|
- <el-table-column label="创建者" align="center" prop="createBy" />
|
|
|
- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
+ <el-table-column label="获客链接名称" align="center" prop="linkName" />
|
|
|
+ <el-table-column label="跳转链接" align="center" prop="link" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="加微链接" width="200" :show-overflow-tooltip="true">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
+ <span>{{ getFullUrl(scope.row) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="更新者" align="center" prop="updateBy" />
|
|
|
- <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
|
|
+ <el-table-column label="客户电话" align="center" prop="phone" />
|
|
|
+
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
+ <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="创建者" align="center" prop="createName" />
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- >修改</el-button>
|
|
|
+ icon="el-icon-s-promotion"
|
|
|
+ @click="handleGenerateQRCode(scope.row)"
|
|
|
+ style="color: #67C23A;"
|
|
|
+ >生成二维码</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-document-copy"
|
|
|
+ @click="handleCopyLink(scope.row)"
|
|
|
+ >复制加微链接</el-button>
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- size="mini"-->
|
|
|
+<!-- type="text"-->
|
|
|
+<!-- icon="el-icon-edit"-->
|
|
|
+<!-- @click="handleUpdate(scope.row)"-->
|
|
|
+<!-- >修改</el-button>-->
|
|
|
<el-button
|
|
|
size="mini"
|
|
|
type="text"
|
|
|
@@ -111,29 +123,52 @@
|
|
|
<!-- 修改对话框 -->
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
- <el-form-item label="获客链接ID" prop="qwAcquisitionAssistantId">
|
|
|
- <el-input v-model="form.qwAcquisitionAssistantId" placeholder="请输入获客链接ID" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="完整链接" prop="link">
|
|
|
+ <el-form-item label="跳转链接" prop="link">
|
|
|
<el-input v-model="form.link" type="textarea" placeholder="请输入完整链接" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="客户电话" prop="phone">
|
|
|
<el-input v-model="form.phone" placeholder="请输入客户电话" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
|
|
- </el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 二维码弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="获客链接二维码"
|
|
|
+ :visible.sync="qrCodeDialog.visible"
|
|
|
+ width="500px"
|
|
|
+ append-to-body
|
|
|
+ @closed="handleQrCodeDialogClosed"
|
|
|
+ >
|
|
|
+ <div class="qr-code-container" v-loading="qrCodeDialog.generating">
|
|
|
+ <div class="qr-code-wrapper" v-if="qrCodeDialog.dataUrl">
|
|
|
+ <img :src="qrCodeDialog.dataUrl" alt="二维码" class="qr-code-image" />
|
|
|
+ <div class="qr-code-info">
|
|
|
+ <p><strong>链接名称：</strong>{{ qrCodeDialog.linkName }}</p>
|
|
|
+ <p><strong>随机码：</strong>{{ qrCodeDialog.randomStr }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="!qrCodeDialog.generating" class="qr-code-empty">
|
|
|
+ <el-empty description="暂无二维码" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="downloadQRCode" :disabled="!qrCodeDialog.dataUrl">
|
|
|
+ <i class="el-icon-download"></i> 保存二维码
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="qrCodeDialog.visible = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { listLinkInfo, getLinkInfo, delLinkInfo, addLinkInfo, updateLinkInfo } from "@/api/qw/acquisitionLinkInfo";
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
|
|
|
export default {
|
|
|
name: "AcquisitionLinkInfo",
|
|
|
@@ -161,7 +196,8 @@ export default {
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- qwAcquisitionAssistantId: null,
|
|
|
+ linkName: null,
|
|
|
+ createName: null,
|
|
|
link: null,
|
|
|
phone: null,
|
|
|
},
|
|
|
@@ -169,22 +205,158 @@ export default {
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
- qwAcquisitionAssistantId: [
|
|
|
- { required: true, message: "获客链接ID不能为空", trigger: "blur" }
|
|
|
- ],
|
|
|
link: [
|
|
|
- { required: true, message: "完整链接不能为空", trigger: "blur" }
|
|
|
+ { required: true, message: "跳转链接不能为空", trigger: "blur" }
|
|
|
],
|
|
|
phone: [
|
|
|
{ required: true, message: "客户电话不能为空", trigger: "blur" }
|
|
|
],
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 基础域名
|
|
|
+ baseDomain: 'https://c.ysyd.top',
|
|
|
+ // 二维码弹窗数据
|
|
|
+ qrCodeDialog: {
|
|
|
+ visible: false,
|
|
|
+ generating: false,
|
|
|
+ dataUrl: null,
|
|
|
+ fullUrl: '',
|
|
|
+ linkName: '',
|
|
|
+ randomStr: '',
|
|
|
+ rowData: null
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 生成二维码 - 使用项目自带的QRCode库 */
|
|
|
+ handleGenerateQRCode(row) {
|
|
|
+ if (!row || !row.randomStr) {
|
|
|
+ this.$message.warning('该链接没有randomStr参数，无法生成二维码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const fullUrl = this.getFullUrl(row)
|
|
|
+
|
|
|
+ // 显示二维码弹窗，并显示加载中
|
|
|
+ this.qrCodeDialog.visible = true
|
|
|
+ this.qrCodeDialog.generating = true
|
|
|
+ this.qrCodeDialog.dataUrl = null
|
|
|
+ this.qrCodeDialog.fullUrl = fullUrl
|
|
|
+ this.qrCodeDialog.linkName = row.linkName || '-'
|
|
|
+ this.qrCodeDialog.randomStr = row.randomStr || '-'
|
|
|
+ this.qrCodeDialog.rowData = row
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 使用 setTimeout 让UI能够更新加载状态
|
|
|
+ setTimeout(() => {
|
|
|
+ // 创建一个临时容器来生成二维码
|
|
|
+ const tempDiv = document.createElement('div')
|
|
|
+ tempDiv.style.position = 'absolute'
|
|
|
+ tempDiv.style.left = '-9999px'
|
|
|
+ tempDiv.style.top = '-9999px'
|
|
|
+ document.body.appendChild(tempDiv)
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 使用项目自带的 QRCode 库生成二维码
|
|
|
+ const qrcode = new QRCode(tempDiv, {
|
|
|
+ text: fullUrl,
|
|
|
+ width: 300,
|
|
|
+ height: 300,
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ correctLevel: QRCode.CorrectLevel.H // 使用高容错率
|
|
|
+ })
|
|
|
+
|
|
|
+ // 等待二维码生成
|
|
|
+ setTimeout(() => {
|
|
|
+ try {
|
|
|
+ // 从临时容器中获取生成的 canvas 或 img 元素
|
|
|
+ const canvas = tempDiv.querySelector('canvas')
|
|
|
+ if (canvas) {
|
|
|
+ // 转换为 data URL
|
|
|
+ this.qrCodeDialog.dataUrl = canvas.toDataURL('image/png')
|
|
|
+ } else {
|
|
|
+ this.$message.warning('二维码生成方式不支持保存为图片，请更新浏览器')
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ this.$message.error('生成二维码失败')
|
|
|
+ } finally {
|
|
|
+ // 清理临时容器
|
|
|
+ document.body.removeChild(tempDiv)
|
|
|
+ this.qrCodeDialog.generating = false
|
|
|
+ }
|
|
|
+ }, 100)
|
|
|
+ } catch (err) {
|
|
|
+ this.$message.error('生成二维码失败')
|
|
|
+ document.body.removeChild(tempDiv)
|
|
|
+ this.qrCodeDialog.generating = false
|
|
|
+ }
|
|
|
+ }, 50)
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('生成二维码失败')
|
|
|
+ this.qrCodeDialog.generating = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 下载二维码 */
|
|
|
+ downloadQRCode() {
|
|
|
+ if (!this.qrCodeDialog.dataUrl) return
|
|
|
+
|
|
|
+ // 创建下载链接
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = this.qrCodeDialog.dataUrl
|
|
|
+ link.download = `qrcode_${this.qrCodeDialog.linkId || 'link'}_${Date.now()}.png`
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+ document.body.removeChild(link)
|
|
|
+
|
|
|
+ this.$message.success('二维码已开始下载')
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 二维码弹窗关闭后的处理 */
|
|
|
+ handleQrCodeDialogClosed() {
|
|
|
+ },
|
|
|
+ /** 获取完整链接 */
|
|
|
+ getFullUrl(row) {
|
|
|
+ if (!row || !row.randomStr) return `${this.baseDomain}`
|
|
|
+ return `${this.baseDomain}/${row.randomStr}`
|
|
|
+ },
|
|
|
+ /** 复制加微链接 */
|
|
|
+ handleCopyLink(row) {
|
|
|
+ const fullUrl = this.getFullUrl(row)
|
|
|
+ this.copyToClipboard(fullUrl, '加微链接已复制到剪贴板')
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 复制到剪贴板的通用方法 */
|
|
|
+ copyToClipboard(text, successMessage) {
|
|
|
+ // 创建临时输入框
|
|
|
+ const textarea = document.createElement('textarea')
|
|
|
+ textarea.value = text
|
|
|
+ textarea.style.position = 'fixed'
|
|
|
+ textarea.style.opacity = '0'
|
|
|
+ document.body.appendChild(textarea)
|
|
|
+ textarea.select()
|
|
|
+
|
|
|
+ try {
|
|
|
+ const successful = document.execCommand('copy')
|
|
|
+ if (successful) {
|
|
|
+ this.$message({
|
|
|
+ message: successMessage || '复制成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error('复制失败，请手动复制')
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error('复制失败:', err)
|
|
|
+ this.$message.error('复制失败，请手动复制')
|
|
|
+ } finally {
|
|
|
+ document.body.removeChild(textarea)
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 查询获客链接-号码链接记录列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
@@ -203,7 +375,8 @@ export default {
|
|
|
reset() {
|
|
|
this.form = {
|
|
|
id: null,
|
|
|
- qwAcquisitionAssistantId: null,
|
|
|
+ linkName: null,
|
|
|
+ createName: null,
|
|
|
link: null,
|
|
|
phone: null,
|
|
|
remark: null
|
