|
@@ -506,14 +506,17 @@
|
|
|
</div>
|
|
</div>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="二维码">
|
|
<el-form-item label="二维码">
|
|
|
- <div id="qrcode" class="qrcode-container"></div>
|
|
|
|
|
- <el-button
|
|
|
|
|
- type="primary"
|
|
|
|
|
- size="small"
|
|
|
|
|
- icon="el-icon-download"
|
|
|
|
|
- @click="downloadQrcode"
|
|
|
|
|
- style="margin-top: 10px;"
|
|
|
|
|
- >下载</el-button>
|
|
|
|
|
|
|
+ <div class="qrcode-wrapper">
|
|
|
|
|
+ <div id="qrcode" class="qrcode-container"></div>
|
|
|
|
|
+ <div class="qrcode-action">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ icon="el-icon-download"
|
|
|
|
|
+ @click="downloadQrcode"
|
|
|
|
|
+ >下载二维码</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -647,6 +650,12 @@ export default {
|
|
|
},
|
|
},
|
|
|
trigger: "change"
|
|
trigger: "change"
|
|
|
}
|
|
}
|
|
|
|
|
+ ],
|
|
|
|
|
+ allocationRule: [
|
|
|
|
|
+ { required: true, message: "请选择企微分配规则", trigger: "change" }
|
|
|
|
|
+ ],
|
|
|
|
|
+ allocationRuleId: [
|
|
|
|
|
+ { required: true, message: "请选择具体的分配汇总规则", trigger: "change" }
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
@@ -885,18 +894,43 @@ export default {
|
|
|
this.msgError('投放链接为空');
|
|
this.msgError('投放链接为空');
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- navigator.clipboard.writeText(this.launchUrl).then(() => {
|
|
|
|
|
- this.msgSuccess('复制成功');
|
|
|
|
|
- }).catch(() => {
|
|
|
|
|
- // 平台不支持新API,改成传统方法
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 优先使用 Clipboard API
|
|
|
|
|
+ if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
|
|
|
+ navigator.clipboard.writeText(this.launchUrl).then(() => {
|
|
|
|
|
+ this.msgSuccess('复制成功');
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ console.error('Clipboard API 复制失败:', err);
|
|
|
|
|
+ this.fallbackCopyText(this.launchUrl);
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 环境不支持,使用传统方法
|
|
|
|
|
+ this.fallbackCopyText(this.launchUrl);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 传统复制方法 (Fallback) */
|
|
|
|
|
+ fallbackCopyText(text) {
|
|
|
|
|
+ try {
|
|
|
const textarea = document.createElement('textarea');
|
|
const textarea = document.createElement('textarea');
|
|
|
- textarea.value = this.launchUrl;
|
|
|
|
|
|
|
+ textarea.value = text;
|
|
|
|
|
+ // 确保 textarea 不可见且不影响布局
|
|
|
|
|
+ textarea.style.position = 'fixed';
|
|
|
|
|
+ textarea.style.left = '-9999px';
|
|
|
|
|
+ textarea.style.top = '0';
|
|
|
document.body.appendChild(textarea);
|
|
document.body.appendChild(textarea);
|
|
|
textarea.select();
|
|
textarea.select();
|
|
|
- document.execCommand('copy');
|
|
|
|
|
|
|
+ const successful = document.execCommand('copy');
|
|
|
document.body.removeChild(textarea);
|
|
document.body.removeChild(textarea);
|
|
|
- this.msgSuccess('复制成功');
|
|
|
|
|
- });
|
|
|
|
|
|
|
+
|
|
|
|
|
+ if (successful) {
|
|
|
|
|
+ this.msgSuccess('复制成功');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.msgError('复制失败,请手动选择复制');
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.error('传统复制方法异常:', err);
|
|
|
|
|
+ this.msgError('复制异常');
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
/** 下载二维码 */
|
|
/** 下载二维码 */
|
|
|
downloadQrcode() {
|
|
downloadQrcode() {
|
|
@@ -1617,20 +1651,65 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
gap: 10px;
|
|
gap: 10px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ padding: 8px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ border: 1px solid #eef0f2;
|
|
|
|
|
|
|
|
.url-input {
|
|
.url-input {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ border-color: transparent;
|
|
|
|
|
+ font-family: monospace;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #764ba2;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.qrcode-wrapper {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.qrcode-container {
|
|
.qrcode-container {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- padding: 20px 0;
|
|
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ transform: translateY(-5px);
|
|
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
canvas {
|
|
canvas {
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qrcode-action {
|
|
|
|
|
+ .el-button {
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|