lcc
143 lines
3.5 KiB
Vue
143 lines
3.5 KiB
Vue
<!-- 用户编辑弹窗 -->
|
|
<template>
|
|
<ele-modal
|
|
width="700px"
|
|
:visible="visible"
|
|
:append-to-body="true"
|
|
:close-on-click-modal="true"
|
|
custom-class="ele-dialog-form"
|
|
title="链接"
|
|
@update:visible="updateVisible"
|
|
>
|
|
<table
|
|
class="ele-table ele-table-border ele-table-medium"
|
|
style="margin-bottom: 20px"
|
|
>
|
|
<colgroup>
|
|
<col />
|
|
<col />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th style="text-align: center">链接</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>活动链接</td>
|
|
<td style="text-align: center">
|
|
<div
|
|
style="display: inline-block; margin-right: 10px"
|
|
class="ele-text-secondary"
|
|
v-html="form.url"
|
|
></div>
|
|
<el-button
|
|
v-clipboard:copy="form.url"
|
|
v-clipboard:success="onCopy"
|
|
size="small"
|
|
>
|
|
复制
|
|
</el-button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>二维码图片</td>
|
|
<td style="text-align: center">
|
|
<ele-qr-code
|
|
:value="form.url"
|
|
:size="160"
|
|
:image-settings="image"
|
|
/>
|
|
<div class="ele-text-secondary">鼠标右建可复制保存</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import EleQrCode from 'ele-admin/es/ele-qr-code';
|
|
import { getTopicDetail } from '@/api/sytopic/sytopic';
|
|
|
|
export default {
|
|
components: { EleQrCode },
|
|
props: {
|
|
// 弹窗是否打开
|
|
visible: Boolean,
|
|
topicId: String
|
|
},
|
|
data() {
|
|
const defaultForm = {
|
|
url: ''
|
|
};
|
|
return {
|
|
level: 'L',
|
|
size: 120,
|
|
margin: 0,
|
|
image: {
|
|
src: '',
|
|
width: 28,
|
|
height: 28,
|
|
x: undefined,
|
|
y: undefined,
|
|
excavate: false
|
|
},
|
|
defaultForm,
|
|
// 表单数据
|
|
form: { ...defaultForm },
|
|
// 表单验证规则
|
|
// 提交状态
|
|
loading: false
|
|
};
|
|
},
|
|
created() {
|
|
let hostname = window.location.hostname;
|
|
if (hostname == 'bo.liche.cn') {
|
|
this.image.src =
|
|
'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
|
|
} else if (hostname == 'dongfeng.haodian.cn') {
|
|
this.image.src =
|
|
'https://qs.haodian.cn/web/images/project/Admin-ShiYu/df-code-logo.png';
|
|
} else {
|
|
this.image.src =
|
|
'https://qs.haodian.cn/web/images/project/Admin-ShiYu/code-logo.png';
|
|
}
|
|
},
|
|
computed: {
|
|
// 是否开启响应式布局
|
|
styleResponsive() {
|
|
return this.$store.state.theme.styleResponsive;
|
|
}
|
|
},
|
|
methods: {
|
|
/* 更新visible */
|
|
updateVisible(value) {
|
|
this.$emit('update:visible', value);
|
|
},
|
|
onCopy: function () {
|
|
this.$message.success('复制成功！');
|
|
}
|
|
},
|
|
watch: {
|
|
visible(visible) {
|
|
if (visible) {
|
|
if (this.topicId) {
|
|
getTopicDetail({ id: this.topicId })
|
|
.then((result) => {
|
|
this.form.url = result.url;
|
|
})
|
|
.catch((e) => {
|
|
this.$message.error(e.message);
|
|
});
|
|
// this.$util.assignObject(this.form, {
|
|
// ...this.data
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|