Skip to content

H
haoban-3
Commit bda22443 by crushh
Options

update: 引流链接

parent a9e5a509
Showing with 1042 additions and 41 deletions
index.html
......@@ -13,7 +13,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title>
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.69.css" />
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.73.css" />
<!--好办后台3.0-->
<!-- <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_vcg1gtmx7lb.css" /> -->
<script src="//at.alicdn.com/t/font_1628375_vcg1gtmx7lb.js"></script>
......
package.json
......@@ -40,6 +40,7 @@
"vue-amap": "^0.5.10",
"vue-awesome-swiper": "^3.1.3",
"vue-clipboard2": "^0.2.0",
"vue-qr": "^1.3.8",
"vue-runtime-helpers": "^1.1.2",
"xlsx": "^0.13.5"
},
......
src/assets/gic后台font/demo.css 0 → 100644
/* Logo 字体 */
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
src/assets/gic后台font/demo_index.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/gic后台font/iconfont.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/common/links.vue 0 → 100644
<template>
<el-dialog title="链接信息" :visible.sync="show" width="600px" :before-close="close">
<div v-loading="loading" class="links-block">
<div class="links__body">
<div class="links__body--url">{{ src }}</div>
<div class="links__body--btn">
<el-button v-clipboard:text="src" v-show="src" type="text" icon="iconfont icon-lianjie fz14">复制链接</el-button>
</div>
</div>
<div class="link__divider"></div>
<div class="links__qr">
<div style="text-align:center">
<vue-qr id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
</div>
<el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">二维码下载</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import VueQr from 'vue-qr';
export default {
name: 'links',
components: {
VueQr
},
props: {
show: {
type: Boolean,
default: false
},
src: {
type: String,
default: ''
},
imageName: {
type: String,
default: ''
}
},
data() {
return {
loading: false,
miniprogram: {
link: '',
url: ''
}
};
},
watch: {
show(val) {
if (val) {
console.log(this.src);
}
}
},
methods: {
close() {
this.$emit('update:show', false);
},
downloadImg() {
const qrcode = document.getElementById('qrImg');
console.log(qrcode);
let img = qrcode.getElementsByTagName('img')[0];
let link = document.createElement('a');
let url = img.getAttribute('src');
link.setAttribute('href', url);
link.setAttribute('download', `${this.imageName}.png`);
link.click();
}
}
};
</script>
<style lang="scss" scoped>
.links__body {
// border: 1px solid #ddd;
flex: 1;
&--url {
height: 138px;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
padding: 13px 16px 0 16px;
line-height: 17px;
font-size: 12px;
}
&--btn {
text-align: center;
line-height: 1;
}
}
.links__qr {
padding: 22px 30px 10px 24px;
text-align: center;
&--btn {
margin: 18px 0 0;
}
}
.link__divider {
margin-top: 19px;
height: 130px;
width: 1px;
background-color: #ebecf0;
}
.links-block {
display: flex;
background: #f7f8fa;
margin: 10px 0 10px;
}
.link-title {
display: flex;
align-items: center;
font-weight: 500;
color: #303133;
line-height: 20px;
margin-top: 20px;
i {
font-size: 20px;
margin-right: 8px;
}
}
</style>
src/components/common/selectShop.vue 0 → 100644
<template>
<el-popover placement="bottom" style="min-width: 357px" v-model="departmentVisible">
<dm-simple-transfer v-model="checked" :data="data" :item-size="56" :titles="['选择门店', '已选门店']" filterable filter-placeholder="请输入门店名称/code">
<div slot-scope="{ option }">
<p>{{ option.label }}</p>
<p style="font-size: 12px;line-height: 18px">{{ option.key }}</p>
</div>
</dm-simple-transfer>
<div class="flex-column item-cell-select inline-block " slot="reference">
<el-input></el-input>
</div>
</el-popover>
</template>
<script>
export default {
data() {
return {
checked: [],
data: []
};
}
};
</script>
<style></style>
src/components/utils/directives.js 0 → 100644
/**
* v-clipboard 剪切板
*/
import Vue from 'vue';
const clipboard = {
bind(el, binding, vnode, oldVnode) {
el.val = binding.value;
el.handler = function() {
const val = el.val;
const input = document.createElement('input');
el.appendChild(input);
input.value = val;
input.select();
document.execCommand('Copy');
Vue.prototype.$message({ type: 'success', message: '复制成功' });
input.parentNode.removeChild(input);
};
el.addEventListener('click', el.handler);
},
update(el, binding, vnode, oldVnode) {
el.val = binding.value;
},
unbind: function(el) {
el.removeEventListener('click', el.handler);
}
};
export default { clipboard };
src/main.js
......@@ -12,8 +12,10 @@ promise.polyfill();
import App from './App';
import router from './router';
import store from './store/store';
import directives from '@/components/utils/directives';
/* eslint-disable */
import './assets/font/iconfont.css'
import './assets/gic后台font/iconfont.css'
import '../static/css/index.less';
import '../theme/index.css';
......@@ -35,6 +37,7 @@ import buttonCode from '../menu-data/button-code.json';
import HbFormBottom from '@/components/layout/hb-form-bottom.vue';
// Vue.use(contentmenu);
Object.keys(directives).map(item => Vue.directive(item, directives[item]));
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'd53a58848be368a7398dc56d5670fe9c',
......@@ -96,7 +99,7 @@ router.beforeEach((to, from, next) => {
}
next();
});
// 将按钮code挂到vue的原型上，供页面中埋点使用
Vue.prototype.$buttonCode = buttonCode;
......
src/router/actCodeManageRouter/attractFlowLinkRouter.js
......@@ -7,6 +7,14 @@ const attractFlowLinkRouter = [
component: _import('salesleads/actCodeManage/attractFlowLink', 'index')
},
{
path: '/attractFlowLinkAdd',
name: '新增引流链接',
meta: {
type: 'add'
},
component: _import('salesleads/actCodeManage/attractFlowLink', 'detail')
},
{
path: '/attractFlowLinkEdit/:id',
name: '编辑引流链接',
meta: {
......
src/views/salesleads/actCodeManage/attractFlowLink/detail.vue
<template>
<div>
编辑
<div class="p-20">
<el-form label-width="100px" size="small">
<dm-sub-title type="line">基础信息</dm-sub-title>
<div class="section">
<el-form-item label="链接类型" required>
<el-radio-group v-model="form.linkType">
<el-radio :label="1">专用链接</el-radio>
<el-radio :label="2">通用链接</el-radio>
</el-radio-group>
<p class="tips" v-if="form.linkType == 1">仅用于在GIC系统中创建“短信模板”时直接添加引用，便于系统根据会员手机号为该引流链接带上特定会员参数，常用于通过短信的方式来促进存量会员的私域转化。</p>
<p class="tips" v-else>可复制此引流链接或下载链接二维码，通过不同营销活动、渠道等引导客户添加导购企微号，转化成私域流量。</p>
</el-form-item>
<el-form-item label="链接名称" required>
<el-input placeholder="请输入链接名称" class="w-340" :maxlength="30" show-word-limit v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="链接描述">
<el-input placeholder="请输入链接描述" type="textarea" class="w-340" :maxlength="100" :autosize="{ minRow: 3, maxRow: 5 }" show-word-limit v-model="form.remark"></el-input>
</el-form-item>
<el-form-item label="链接标签" required>
<el-button plain @click="tagsDialogVisible = true"><i class="iconfont-components3 icon-cp-PlusOutlined addPic"></i>添加标签</el-button>
<dm-memberTag-group :visiable.sync="tagsDialogVisible" projectName="haobao-3"></dm-memberTag-group>
</el-form-item>
</div>
<dm-sub-title type="line">分配规则</dm-sub-title>
<p class="tips-info">
客户点击此引流链接，系统所分配的企微员工活码将根据下方层级配置区分优先级进行展示：<br />
<span class="dot"></span> <span style="color:#FA8C16">优先级判断规则是“从上到下、从左到右”。</span>如：当上一层级匹配到结果后，则不会再执行下个层级的判断；同一层级内，当左边的勾选项匹配到结果，则不会再执行层级内右边的勾选项<br />
<span class="dot"></span>按照优先级匹配到的结果的大前提是该员工“可生成活码”且“并未达到当天添加好友上限”，否则则继续进行后续优先级的判断； <br />
<span class="dot"></span>若按照优先级所匹配到的结果已经与该客户是好友关系了，不会继续进行后续优先级的判断，直接展示该员工的活码。<br />
</p>
<div class="section">
<div class="level">
<div class="title m-b-20">
<span>层级一：服务门店</span>
<el-switch v-model="form.fw_store.open" :disabled="true"></el-switch>
</div>
<div class="content">
<el-checkbox v-model="form.fw_store.zs" :true-label="1" :false-label="0">专属导购</el-checkbox>
<el-checkbox v-model="form.fw_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.fw_store.dy" :true-label="1" :false-label="0">其他导购</el-checkbox>
</div>
</div>
<div class="level">
<div class="title">
<span>层级二：协管门店</span>
<el-switch v-model="form.xg_store.open" :disabled="true"></el-switch>
</div>
<p class="tips margin-num">当客户在多个协管门店下都有协管导购时，随机取一个协管门店导购</p>
<div class="content">
<el-checkbox v-model="form.xg_store.zs" :true-label="1" :false-label="0">协管门店导购</el-checkbox>
<el-checkbox v-model="form.xg_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.xg_store.dy" :true-label="1" :false-label="0">其他导购</el-checkbox>
</div>
</div>
<div class="level">
<div class="title">
<span>层级三：其他门店</span>
<el-switch v-model="form.xg_store.open" :disabled="true"></el-switch>
</div>
<div class="level3-1">
<el-radio-group v-model="form.storeRuleJson.store_type">
<el-radio :label="1">推荐门店</el-radio>
<el-radio :label="2">附近门店</el-radio>
</el-radio-group>
<p class="tips m-t-6" v-if="form.storeRuleJson.store_type == 1">可配置最多20个门店作为推荐门店让客户自主选择要添加的门店好友</p>
<p class="tips m-t-6" v-else>需客户同意授权当前定位信息，才可展示客户附近最多20家门店供客户选择，否则只能在指定门店下选择</p>
</div>
<div class="level3-2">
<div class="level3-2-content" v-if="form.storeRuleJson.store_type == 1">
<el-form-item label="选择门店" required label-width="92px">
<el-select></el-select>
</el-form-item>
<el-checkbox v-model="form.storeRuleJson.store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.storeRuleJson.store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
</div>
<div class="level3-2-content" v-else>
<p class="content-tips">客户同意授权当前定位信息，可在“附近门店”中自主选择要添加的门店好友</p>
<div class="level3-2-content-check">
<el-checkbox v-model="form.storeRuleJson.store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.storeRuleJson.store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
</div>
<p class="content-tips m-b-10">客户拒绝授权当前定位信息，可在下方指定的门店范围中（最多20家）自主选择要添加的门店好友</p>
<el-form-item label="选择门店" required label-width="92px">
<el-select></el-select>
</el-form-item>
<el-checkbox v-model="form.storeRuleJson.store.ndz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.storeRuleJson.store.ndy" :true-label="1" :false-label="0">导购</el-checkbox>
</div>
</div>
<div class="level3-3">
<el-checkbox v-model="form.storeRuleJson.city_store.open" :true-label="1" :false-label="0">除附近门店/指定门店之外，允许客户按照省市区自由筛选商户所有门店进行添加</el-checkbox>
<div class="level3-3-content">
<el-checkbox v-model="form.storeRuleJson.city_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
<el-checkbox v-model="form.storeRuleJson.city_store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
</div>
</div>
</div>
</div>
<dm-sub-title type="line">欢迎语设置</dm-sub-title>
<div class="section"></div>
<dm-sub-title type="line">欢迎语设置</dm-sub-title>
<div class="section"></div>
</el-form>
</div>
</template>
<script>
export default {};
export default {
data() {
return {
tagsDialogVisible: false,
form: {
linkType: 1,
memberLabelId: '',
name: '',
pageId: '',
welcomeId: '',
remark: '',
fw_store: {
open: 1, //是否开启 1是0否
zs: 1, //专属导购
dz: 1, //店长
dy: 1 // 其他导购
},
xg_store: {
open: 1,
zs: 1,
dz: 1,
dy: 1
},
storeRuleJson: {
//其他门店
open: 1, //是否开启1是0否
store_type: 1, // 1推荐门店 2附近门店,
store: {
dz: 1, //店长
dy: 1, // 店员
ndz: 1, // 拒绝后店长
ndy: 1 //拒绝后店员
},
//省市筛选
city_store: {
open: 1, //是否开启1是0否
dz: 1, //店长
dy: 1 //店员
}
}
}
};
}
};
</script>
<style></style>
<style lang="scss" scoped>
.section {
padding: 20px 0 40px 0;
.level {
width: 1194px;
min-height: 94px;
background: #f7f8fa;
border-radius: 2px;
padding: 16px 12px;
box-sizing: border-box;
.margin-num {
margin: 10px 0 16px 56px;
}
.title {
display: flex;
justify-content: space-between;
width: 240px;
span {
line-height: 20px;
color: #303133;
font-weight: 500;
font-size: 14px;
}
}
.content {
margin-left: 56px;
}
}
.level3-1 {
margin: 16px 0 16px 56px;
}
.level3-2 {
width: 1106px;
margin-left: 56px;
border-bottom: 1px solid #dcdfe6;
padding-bottom: 16px;
.level3-2-content {
margin-left: 20px;
.content-tips {
font-size: 12px;
color: #606266;
line-height: 17px;
}
.level3-2-content-check {
margin: 10px 0 20px 0;
}
}
}
.level3-3 {
padding: 16px 0 0 56px;
.level3-3-content {
margin: 16px 0 0 20px;
}
}
.level + .level {
margin-top: 12px;
}
}
.tips-info {
font-size: 12px;
color: #909399;
margin-top: 8px;
line-height: 22px;
.dot {
width: 5px;
height: 5px;
background: #999999;
border-radius: 2.5px;
margin-right: 8px;
display: inline-block;
}
}
</style>
src/views/salesleads/actCodeManage/attractFlowLink/index.vue
......@@ -2,7 +2,7 @@
<div class="p-20">
<dm-sub-title class="m-b-10">
<div class="title">
<span>员工活码</span>
<span>引流加入</span>
<span class="info-content cur-po"><i class="iconfont-hb3 iconzhibiaoshuoming info-icon"></i>指标说明</span>
</div>
</dm-sub-title>
......@@ -12,25 +12,28 @@
<div class="flex flex-space-between m-b-16">
<div class="flex flex-align-center">
<el-input placeholder="请输入模板ID/名称、创建人" class="w-260" v-model="form.searchParams" @keyup.native="value => toInput(value, searchInput)" clearable @clear="getList"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
<span style="font-size:14px;" class="m-l-10">模板创建时间：</span>
<el-date-picker class="m-l-10 w-256" v-model="form.dateRange" @change="getList" type="daterange" :value-format="'yyyy-MM-dd'" clearable @clear="getList" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
<el-select class="m-l-10 w-160" v-model="form.linkType" placeholder="全部类型" @change="getList" clearable @clear="clear">
<el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.key"> </el-option>
</el-select>
<el-date-picker class="m-l-10 w-256" v-model="form.dateRange" @change="getList" type="daterange" :value-format="'yyyy-MM-dd'" clearable @clear="getList" range-separator="~" start-placeholder="创建开始日期" end-placeholder="创建结束日期"> </el-date-picker>
</div>
<div>
<el-button @click="goLanding">落地页模板</el-button>
<el-button type="primary">新增链接</el-button>
<el-button type="primary" @click="$router.push('attractFlowLinkAdd')">新增链接</el-button>
</div>
</div>
<el-table :data="tableData" style="width:100%" v-loading="loading" @sort-change="handleSortChange">
<el-table-column :min-width="164" prop="linkId" label="链接ID" />
<el-table-column :min-width="167" prop="memberId" label="链接信息">
<el-table-column width="120" prop="linkId" label="链接ID" />
<el-table-column minWidth="180" prop="memberId" label="链接信息">
<template slot-scope="{ row }">
<span>{{ row.name }}</span>
<span>{{ row.linkCode }}</span>
<p class="overFlow">{{ row.name }}</p>
<p class="tips">{{ row.linkCode }}</p>
</template>
</el-table-column>
<el-table-column :min-width="110" prop="linkType" label="链接类型">
<el-table-column width="110" prop="linkType" label="链接类型">
<template slot-scope="{ row }">
<span>{{ row.linkType }}</span>
<el-tag size="mini" v-if="row.linkType == 1"> 专用链接 </el-tag>
<el-tag v-else size="mini" class="el-tag--cyan">通用链接</el-tag>
</template>
</el-table-column>
<el-table-column v-for="v in tableHeader" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="v.prop" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable" :fixed="v.fixed">
......@@ -48,6 +51,7 @@
<div class="text-right" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size.sync="form.pageSize" :current-page.sync="form.pageNum" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20, 40, 60, 80]" :total="total"> </el-pagination>
</div>
<links :src="linkUrl" :show.sync="show" :imageName="imageName" />
<!-- </el-tab-pane>
<el-tab-pane label="引流入群" name="second">引流入群</el-tab-pane>
</el-tabs> -->
......@@ -56,6 +60,8 @@
<script>
import { _debounce } from '@/common/js/public';
import { linkPage } from '@/api/actCode';
import filters from '@/filters/index';
import links from '@/components/common/links';
const tableHead = [
{
label: '添加好友人数',
......@@ -114,6 +120,7 @@ const tableHead = [
{
label: '创建人',
minWidth: '100',
tooltip: true,
prop: 'creatorName',
formatter: function(row) {
return `<span>${row.creatorName ? row.creatorName : '- -'}</span>`;
......@@ -121,10 +128,13 @@ const tableHead = [
},
{
label: '创建时间',
minWidth: '100',
width: '120',
tooltip: true,
prop: 'createTime',
formatter: function(row) {
return `<span>${row.createTime ? row.createTime : '- -'}</span>`;
let ymd = filters.timeStampToYmd(row.createTime);
let sfm = filters.timeStampToHms(row.createTime);
return `${ymd}<br /> ${sfm}`;
}
}
];
......@@ -140,6 +150,16 @@ export default {
searchParams: '',
dateRange: []
},
options: [
{
label: '专用链接',
key: 1
},
{
label: '通用链接',
key: 2
}
],
btnArr: [
{
text: '数据',
......@@ -151,6 +171,9 @@ export default {
},
{
text: '链接',
visible: row => {
return row.linkType;
},
handler: row => this.goLink(row)
},
{
......@@ -160,13 +183,21 @@ export default {
],
total: '',
tableData: [],
tableHeader: tableHead
tableHeader: tableHead,
show: false,
linkUrl: ''
};
},
mounted() {
this.getList();
},
components: {
links
},
methods: {
clear() {
console.log('clear');
},
toInput: _debounce(function(e, value) {
this.getList();
}, 500),
......@@ -178,14 +209,19 @@ export default {
}
delete param.dateRange;
console.log(param);
linkPage(param).then(res => {
console.log(res);
if (res.data.result) {
const { totalCount, result } = res.data.result;
this.tableData = result;
this.total = totalCount;
}
});
this.loading = true;
linkPage(param)
.then(res => {
console.log(res);
if (res.data.result) {
const { totalCount, result } = res.data.result;
this.tableData = result;
this.total = totalCount;
}
})
.finally(_ => {
this.loading = false;
});
},
handleSizeChange(val) {
this.form.pageNum = 1;
......@@ -200,11 +236,14 @@ export default {
const { prop, order } = data;
console.log(order);
if (order == 'descending') {
this.form.orderBy = prop + ' desc';
this.form.sortColumn = prop;
this.form.sortType = 'desc';
} else if (order === 'ascending') {
this.form.orderBy = prop + ' asc';
this.form.sortColumn = prop;
this.form.sortType = 'asc';
} else {
this.form.orderBy = undefined;
this.form.sortColumn = '';
this.form.sortType = undefined;
}
this.form.pageNum = 1;
this.getList();
......@@ -219,6 +258,9 @@ export default {
console.log(row);
},
goLink(row) {
this.linkUrl = row.linkUrl;
this.imageName = `${row.linkId}_${row.name}`;
this.show = true;
console.log(row);
},
goEdit(row) {
......@@ -240,4 +282,9 @@ export default {
margin-right: 8px;
}
}
.overFlow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
src/views/salesleads/actCodeManage/attractFlowLink/landingPage/list.vue
......@@ -8,7 +8,7 @@
</div>
<el-button type="primary" @click="addTemp">新增模板</el-button>
</div>
<div class="tips">
<div class="tips m-b-16">
二维码只是样式预览效果，请勿直接使用
</div>
<div class="card-content" v-loading="loading">
......@@ -202,11 +202,4 @@ export default {
flex-wrap: wrap;
gap: 20px;
}
.tips {
font-size: 12px;
font-weight: 400;
color: #606266;
line-height: 17px;
margin-bottom: 16px;
}
</style>
static/css/public.css
......@@ -481,6 +481,9 @@ input:focus {
.m-l-16 {
margin-left: 16px;
}
.m-t-6{
margin-top: 6px;
}
.m-t-8 {
margin-top: 8px;
}
......@@ -596,6 +599,9 @@ input:focus {
.w-157 {
width: 157px;
}
.w-160 {
width: 160px !important;
}
.w-256 {
width: 256px !important;
}
......@@ -608,6 +614,7 @@ input:focus {
.w-340 {
width: 340px !important;
}
.w-250 {
width: 250px;
}
......@@ -1322,7 +1329,7 @@ button.el-button--danger.is-plain {
height: 273px;
}
.el-input__suffix i:nth-child(2) {
display: none;
/* display: none; */
}
.damolish .no-empty-icon-table .el-table__empty-block {
display: none;
......@@ -1425,3 +1432,8 @@ ui调整
font-weight: 500;
color: #303133;
}
.tips{
font-size: 12px;
color: #909399;
line-height: 17px;
}
\ No newline at end of file
theme/index.css
......@@ -6096,9 +6096,9 @@
vertical-align: middle;
}
.el-select:hover .el-input__inner {
/* .el-select:hover .el-input__inner {
border-color: #c0c4cc;
}
} */
.el-select .el-input__inner {
cursor: pointer;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment