Skip to content

H
haoban-3
Commit b06b94c8 by crushh
Options

update: 落地页模板完成

parent 42410852
Showing with 1073 additions and 90 deletions
config/proxyList.js
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
module.exports = { module.exports = {
proxyList: { proxyList: {
'/haoban-manage3-web/': { '/haoban-manage3-web/': {
target: 'https://www.gicdev.com/haoban-manage3-web/', target: 'https://www.gicdev.com/haoban-manage3-web',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/haoban-manage3-web': '' '^/haoban-manage3-web': ''
......
src/api/actCode.js
import { postRequest } from '@/api/api'; import { postRequest, getRequest } from '@/api/api';
// 活码分组查询 // 活码分组查询
export const findActCodeGroupListApi = params => postRequest('/hm/group/list', params); export const findActCodeGroupListApi = params => postRequest('/hm/group/list', params);
...@@ -14,3 +14,24 @@ export const delActCodeGroupApi = params => postRequest('/hm/group/delete', para ...@@ -14,3 +14,24 @@ export const delActCodeGroupApi = params => postRequest('/hm/group/delete', para
// 活码列表 // 活码列表
export const actCodeListApi = params => postRequest('', params); export const actCodeListApi = params => postRequest('', params);
// 落地页模板列表
export const guidePageList = params => getRequest('/hm/guide/page/list', params);
// 落地页模板删除
export const guidePageDel = params => postRequest('/hm/guide/page/delete', params);
// 落地页模板关联详情
export const guidePageRelation = params => getRequest('/hm/guide/page/relation', params);
// 落地页模板详情
export const guidePageDetail = params => getRequest('/hm/guide/page/detail', params);
// 落地页 获取当前企业电话、logo
export const wxEnterpriseList = params => getRequest('/wx-enterprise-list?filteRight=1&requestProject=haoban-manage-web', params);
// 落地页模板编辑详情
export const guidePageEdit = params => postRequest('/hm/guide/page/edit', params);
// 落地页模板新增详情
export const guidePageSave = params => postRequest('/hm/guide/page/save', params);
src/assets/font/demo.css 0 → 100644
/* 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/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/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont-hb3"; /* Project id 1628375 */ font-family: "iconfont-hb3"; /* Project id 1628375 */
src: url('iconfont.woff2?t=1657093480813') format('woff2'), src: url('iconfont.woff2?t=1657521279508') format('woff2'),
url('iconfont.woff?t=1657093480813') format('woff'), url('iconfont.woff?t=1657521279508') format('woff'),
url('iconfont.ttf?t=1657093480813') format('truetype'); url('iconfont.ttf?t=1657521279508') format('truetype');
} }
.iconfont-hb3 { .iconfont-hb3 {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icondianhua:before {
content: "\ebeb";
}
.iconzhibiaoshuoming:before { .iconzhibiaoshuoming:before {
content: "\eb57"; content: "\eb57";
} }
...@@ -25,10 +29,6 @@ ...@@ -25,10 +29,6 @@
content: "\e62c"; content: "\e62c";
} }
.icontianjia:before {
content: "\e686";
}
.iconliushihuiyuan:before { .iconliushihuiyuan:before {
content: "\e6ca"; content: "\e6ca";
} }
...@@ -37,6 +37,10 @@ ...@@ -37,6 +37,10 @@
content: "\e636"; content: "\e636";
} }
.iconPlusOutlined:before {
content: "\e61f";
}
.iconbiaoge-erweima:before { .iconbiaoge-erweima:before {
content: "\e614"; content: "\e614";
} }
......
src/assets/font/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "25538381",
"name": "电话",
"font_class": "dianhua",
"unicode": "ebeb",
"unicode_decimal": 60395
},
{
"icon_id": "18049658", "icon_id": "18049658",
"name": "指标说明", "name": "指标说明",
"font_class": "zhibiaoshuoming", "font_class": "zhibiaoshuoming",
...@@ -27,13 +34,6 @@ ...@@ -27,13 +34,6 @@
"unicode_decimal": 58924 "unicode_decimal": 58924
}, },
{ {
"icon_id": "3978428",
"name": "添加",
"font_class": "tianjia",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "6134651", "icon_id": "6134651",
"name": "流失会员", "name": "流失会员",
"font_class": "liushihuiyuan", "font_class": "liushihuiyuan",
...@@ -48,6 +48,13 @@ ...@@ -48,6 +48,13 @@
"unicode_decimal": 58934 "unicode_decimal": 58934
}, },
{ {
"icon_id": "20415179",
"name": "PlusOutlined",
"font_class": "PlusOutlined",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "21009399", "icon_id": "21009399",
"name": "表格-二维码", "name": "表格-二维码",
"font_class": "biaoge-erweima", "font_class": "biaoge-erweima",
......
src/components/common/editor.vue
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="upload-content"> <div class="upload-content">
<el-upload class="avatar-uploader" action="123" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <el-upload class="avatar-uploader" action="123" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> <img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="iconfont-hb3 iconPlusOutlined avatar-uploader-icon"></i>
</el-upload> </el-upload>
<p>请上传长宽比为5:4的图片</p> <p>请上传长宽比为5:4的图片</p>
</div> </div>
...@@ -695,8 +695,8 @@ export default { ...@@ -695,8 +695,8 @@ export default {
} }
} }
.avatar-uploader-icon { .avatar-uploader-icon {
font-size: 28px; font-size: 24px;
color: #8c939d; color: #303133;
width: 150px; width: 150px;
height: 150px; height: 150px;
line-height: 150px; line-height: 150px;
......
src/components/mult-upload-img.vue
...@@ -22,8 +22,7 @@ ...@@ -22,8 +22,7 @@
<div class="imageList"> <div class="imageList">
<el-upload class="avatar-uploader" v-show="!disabled" :multiple="limit > 1 ? true : false" :file-list="imgList" :show-file-list="false" :http-request="handleRequest" :before-upload="beforeUpload"> <el-upload class="avatar-uploader" v-show="!disabled" :multiple="limit > 1 ? true : false" :file-list="imgList" :show-file-list="false" :http-request="handleRequest" :before-upload="beforeUpload">
<div v-if="!videoSrc" class="flex-column"> <div v-if="!videoSrc" class="flex-column">
<i class="el-icon-plus vatar-uploader-icon"></i> <i class="iconfont-hb3 iconPlusOutlined avatar-uploader-icon"></i>
<p class="font-12 color-606266" style="line-height: 22px;">上传图片</p>
</div> </div>
</el-upload> </el-upload>
<p class="upload-tip color-909399 font-12 pos-bottom"> <p class="upload-tip color-909399 font-12 pos-bottom">
...@@ -150,6 +149,7 @@ export default { ...@@ -150,6 +149,7 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-top: 5px; margin-top: 5px;
border-radius: 2px;
} }
} }
......
src/components/preview-page.vue
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div class="iphone"> <div class="iphone">
<span class="pageTitle">{{ card.pageTitle }}</span> <span class="pageTitle">{{ card.pageTitle }}</span>
<div class="content"> <div class="content">
<img :src="card.pageBackgroudImg" class="bgImg" /> <img :src="card.pageBackgroundImg" class="bgImg" v-if="card.pageBackgroundImg" />
<div class="enterpriseInfo"> <div class="enterpriseInfo">
<div class="logo"> <div class="logo">
<img :src="card.merchantLogo" /> <img :src="card.merchantLogo" v-if="card.merchantLogo" />
</div> </div>
<div class="name">{{ card.merchantName }}</div> <div class="name">{{ card.merchantName }}</div>
</div> </div>
...@@ -24,12 +24,12 @@ export default { ...@@ -24,12 +24,12 @@ export default {
data() { data() {
return { return {
card: { card: {
pageTitle: '页面标题1', pageTitle: '',
merchantName: '商户名称', merchantName: '',
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: '',
pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f', pageBackgroundImg: '',
guideComment: '长按识别二维码添加您的专属导购' guideComment: ''
} }
}; };
}, },
...@@ -40,11 +40,14 @@ export default { ...@@ -40,11 +40,14 @@ export default {
} }
}, },
watch: { watch: {
data(val) { data: {
if (val) { handler(val) {
const { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment } = val; if (val) {
this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment }; const { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroundImg, guideComment } = val;
} this.card = { pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroundImg, guideComment };
}
},
deep: true
} }
} }
}; };
...@@ -66,7 +69,7 @@ export default { ...@@ -66,7 +69,7 @@ export default {
position: sticky; position: sticky;
color: #000000; color: #000000;
font-weight: 500; font-weight: 500;
top: 46px; top: 105px;
width: 125px; width: 125px;
margin-left: 78px; margin-left: 78px;
line-height: 20px; line-height: 20px;
......
src/components/set/file-edit.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</el-form-item> </el-form-item>
<el-form-item label="文件" prop="link"> <el-form-item label="文件" prop="link">
<el-upload class="upload-demo" :action="uploadUrl()" :before-upload="beforeFileUpload" :on-success="handleFileSuccess" :on-change="handleFileChange" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileDatas"> <el-upload class="upload-demo" :action="uploadUrl()" :before-upload="beforeFileUpload" :on-success="handleFileSuccess" :on-change="handleFileChange" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileDatas">
<el-button type="primary"><i class="el-icon-upload el-icon--right" style="font-size: 16px;padding-right:5px;"></i>上传</el-button> <el-button type="primary"><i class="iconfont-hb3 iconPlusOutlined avatar-uploader-icon el-icon--right" style="font-size: 16px;padding-right:5px;"></i>上传</el-button>
<div slot="tip" class="font-12 color-909399">普通文件，不大于20MB。支持word及excel，pdf，ppt，zip，rar格式</div> <div slot="tip" class="font-12 color-909399">普通文件，不大于20MB。支持word及excel，pdf，ppt，zip，rar格式</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
...@@ -254,4 +254,7 @@ export default { ...@@ -254,4 +254,7 @@ export default {
} }
} }
} }
.avatar-uploader-icon{
color: #303133;
}
</style> </style>
src/components/single-upload.vue
...@@ -19,22 +19,22 @@ ...@@ -19,22 +19,22 @@
<img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)" /> <img v-if="imgSrc" :src="imgSrc" class="avatar" @mouseover="showImage(imgSrc)" />
<video v-if="videoSrc != '' && videoFlag == false" :src="videoSrc" class="avatar">您的浏览器不支持视频播放</video> <video v-if="videoSrc != '' && videoFlag == false" :src="videoSrc" class="avatar">您的浏览器不支持视频播放</video>
<div v-if="!imgSrc && !videoSrc"> <div v-if="!imgSrc && !videoSrc">
<i class="el-icon-plus avatar-uploader-icon"></i> <i class="iconfont-hb3 iconPlusOutlined avatar-uploader-icon"></i>
<p class="font-12 color-606266">{{ uploadType == 1 || uploadType == 2 || uploadType == 4 ? '上传图片' : '上传视频' }}</p> <p class="font-12 color-606266" style="line-height:6px;">{{ uploadType == 1 || uploadType == 2 || uploadType == 4 ? '上传图片' : '上传视频' }}</p>
</div> </div>
<!-- <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress> --> <!-- <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress> -->
</el-upload> </el-upload>
<p v-if="uploadType == 1" class="upload-tip color-909399 font-12"> <p v-if="uploadType == 1 && showTips" class="upload-tip color-909399 font-12">
图片支持png、jpg、jpeg格式，大小不超过2M，可上传1张 图片支持png、jpg、jpeg格式，大小不超过2M，可上传1张
</p> </p>
<p v-if="uploadType == 2" class="upload-tip color-909399 font-12"> <p v-if="uploadType == 2 && showTips" class="upload-tip color-909399 font-12">
建议尺寸：160×160；支持jpg、jpeg、png格式，图片大小不超过1MB 建议尺寸：160×160；支持jpg、jpeg、png格式，图片大小不超过1MB
</p> </p>
<p v-if="uploadType == 3" class="upload-tip color-909399 font-12"> <p v-if="uploadType == 3 && showTips" class="upload-tip color-909399 font-12">
视频支持MP4格式，大小不超过10M，上传企业微信后3天内有效 视频支持MP4格式，大小不超过10M，上传企业微信后3天内有效
</p> </p>
<p v-if="uploadType == 4" class="upload-tip color-909399 font-12"> <p v-if="uploadType == 4 && showTips" class="upload-tip color-909399 font-12">
建议尺寸：520×416，支持png、jpg、jpeg格式，大小不超过1M 建议尺寸：520×416，支持png、jpg、jpeg格式，大小不超过1M
</p> </p>
<!-- 图片预览 --> <!-- 图片预览 -->
...@@ -64,6 +64,14 @@ export default { ...@@ -64,6 +64,14 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
imgType: {
type: Array,
default: () => ['image/jpeg', 'image/jpg', 'image/png']
},
showTips: {
type: Boolean,
default: true
},
uploadLimit: { uploadLimit: {
type: [Number, String], type: [Number, String],
default: 2 default: 2
...@@ -98,14 +106,8 @@ export default { ...@@ -98,14 +106,8 @@ export default {
*/ */
uploadUrl() { uploadUrl() {
const that = this; const that = this;
let host = window.location.origin;
let baseUrl; that.upUrl = `/haoban-manage3-web/upload-file?fileType=${that.fileType}`;
if (host.indexOf('localhost') != '-1') {
baseUrl = 'https://www.gicdev.com';
} else {
baseUrl = host;
}
that.upUrl = baseUrl + `/haoban-manage3-web/upload-file?fileType=${that.fileType}`;
return that.upUrl; return that.upUrl;
}, },
...@@ -128,13 +130,14 @@ export default { ...@@ -128,13 +130,14 @@ export default {
/* eslint-disable */ /* eslint-disable */
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const that = this; const that = this;
// console.log(file); // console.log(file);
that.fileType = file.type === 'image/jpeg' ? 'jpeg' : file.type === 'image/jpg' ? 'jpg' : file.type === 'image/png' ? 'png' : file.type == 'video/mp4' ? 'mp4' : '';
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'; that.fileType = file.type === 'image/jpeg'|| file.type === 'image/gif' ? 'jpeg' : file.type === 'image/jpg' ? 'jpg' : file.type === 'image/png' ? 'png' : file.type == 'video/mp4' ? 'mp4' : '';
const isJPG = this.imgType.includes(file.type);
const isMP4 = file.type == 'video/mp4'; const isMP4 = file.type == 'video/mp4';
const isLt2M = file.size / 1024 / 1024 < that.uploadLimit; const isLt2M = file.size / 1024 / 1024 < that.uploadLimit;
if ((that.uploadType == 1 || that.uploadType == 2 || that.uploadType == 4) && !isJPG) { if ((that.uploadType == 1 || that.uploadType == 2 || that.uploadType == 4) && !isJPG) {
that.$message.error('上传图片支持png、jpg、jpeg格式!'); that.$message.error(`上传图片支持${ this.imgType.map(item=>item.split('/')[1]).join('、')}格式!`);
} }
if ((that.uploadType == 1 || that.uploadType == 2 || that.uploadType == 4) && !isLt2M) { if ((that.uploadType == 1 || that.uploadType == 2 || that.uploadType == 4) && !isLt2M) {
that.$message.error(`上传图片大小不能超过 ${that.uploadLimit}MB!`); that.$message.error(`上传图片大小不能超过 ${that.uploadLimit}MB!`);
...@@ -210,10 +213,10 @@ export default { ...@@ -210,10 +213,10 @@ export default {
width: 100px; width: 100px;
height: 100px; height: 100px;
border: 1px dashed #c4c6cf; border: 1px dashed #c4c6cf;
border-radius: 0px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 2px;
} }
} }
...@@ -263,12 +266,8 @@ export default { ...@@ -263,12 +266,8 @@ export default {
} }
.avatar-uploader-icon { .avatar-uploader-icon {
font-size: 28px; font-size: 24px;
color: #8c939d; color:#303133;
width: 100px;
// height: 100px;
// line-height: 100px;
text-align: center;
} }
.avatar { .avatar {
max-width: 100px; max-width: 100px;
......
src/router/actCodeManageRouter/attractFlowLinkRouter.js
...@@ -12,8 +12,19 @@ const attractFlowLinkRouter = [ ...@@ -12,8 +12,19 @@ const attractFlowLinkRouter = [
component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'list') component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'list')
}, },
{ {
path: '/ladingPageInfo', path: '/ladingPageAdd',
name: '落地页详情', name: '新建落地页',
meta: {
type: 'add'
},
component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'detail')
},
{
path: '/ladingPageEdit',
name: '编辑落地页',
meta: {
type: 'edit'
},
component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'detail') component: _import('salesleads/actCodeManage/attractFlowLink/landingPage', 'detail')
} }
]; ];
......
src/views/enterprise/salutatory.vue
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180" v-if="$getButtonLimit($buttonCode.editSalutatory) || $getButtonLimit($buttonCode.delSalutatory)"> <el-table-column label="操作" width="180" fixed="right" v-if="$getButtonLimit($buttonCode.editSalutatory) || $getButtonLimit($buttonCode.delSalutatory)">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-button v-if="$getButtonLimit($buttonCode.editSalutatory)" :limit-code="$buttonCode.editSalutatory" type="text" @click="changeRoute(row)">编辑</el-button> <el-button v-if="$getButtonLimit($buttonCode.editSalutatory)" :limit-code="$buttonCode.editSalutatory" type="text" @click="changeRoute(row)">编辑</el-button>
<el-button v-if="$getButtonLimit($buttonCode.delSalutatory)" :limit-code="$buttonCode.delSalutatory" type="text" @click="remove(row)">删除</el-button> <el-button v-if="$getButtonLimit($buttonCode.delSalutatory)" :limit-code="$buttonCode.delSalutatory" type="text" @click="remove(row)">删除</el-button>
......
src/views/salesleads/actCodeManage/attractFlowLink/index.vue
<template> <template>
<div>待开发</div> <div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="引流加人" name="first">引流加人</el-tab-pane>
<el-tab-pane label="引流入群" name="second">引流入群</el-tab-pane>
</el-tabs>
</div>
</template> </template>
<script></script> <script>
export default {
data() {
return {
activeName: 'first'
};
},
methods: {
handleClick() {}
}
};
</script>
<style></style> <style></style>
src/views/salesleads/actCodeManage/attractFlowLink/landingPage/cardView.vue
...@@ -4,16 +4,16 @@ ...@@ -4,16 +4,16 @@
<div class="operation"> <div class="operation">
<div class="idNum">ID：{{ card.templateCode }}</div> <div class="idNum">ID：{{ card.templateCode }}</div>
<div class="btns"> <div class="btns">
<el-button type="text">关联详情</el-button> <el-button type="text" @click="$emit('relationDetail')">关联详情</el-button>
<el-button type="text">删除</el-button> <el-button type="text" @click="$emit('deleteTemp')">删除</el-button>
<el-button type="text">编辑</el-button> <el-button type="text" @click="$emit('editTemp')">编辑</el-button>
</div> </div>
</div> </div>
<div class="tempName">{{ card.templateName }}</div> <div class="tempName">{{ card.templateName }}</div>
<div class="cardName"> <div class="cardName">
<div class="createName">达摩管理员</div> <div class="createName">{{ card.createorName }}</div>
<div class="createTime">2022-05-19 12:03:12</div> <div class="createTime">{{ card.createTime | formatTimeStamp }}</div>
</div> </div>
</div> </div>
<div class="iphone-content"> <div class="iphone-content">
...@@ -67,8 +67,8 @@ export default { ...@@ -67,8 +67,8 @@ export default {
content: { content: {
handler(val) { handler(val) {
if (val) { if (val) {
const { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment } = val; const { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment, createorName, createTime } = val;
this.card = { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment }; this.card = { templateName, templateCode, templateId, pageTitle, merchantName, merchantPhoneNumber, merchantLogo, pageBackgroudImg, guideComment, createorName, createTime };
} }
}, },
immediate: true immediate: true
......
src/views/salesleads/actCodeManage/attractFlowLink/landingPage/detail.vue
<template> <template>
<div> <div>
<previewPage /> <div class="daily-set-content">
<el-form label-width="100px" ref="form" :model="form" :rules="rules" refs="form" class="form">
<el-form-item label="模板名称" prop="templateName" required>
<el-input show-word-limit placeholder="请输入模板名称" type="text" v-model="form.templateName" maxlength="20" class="w-340"></el-input>
</el-form-item>
<el-form-item label="页面标题" prop="pageTitle">
<el-input show-word-limit placeholder="请输入页面标题" type="text" v-model="form.pageTitle" maxlength="10" class="w-340"></el-input>
</el-form-item>
<el-form-item label="商户名称" prop="merchantName">
<el-input show-word-limit placeholder="请输入商户名称" type="text" v-model="form.merchantName" maxlength="20" class="w-340"></el-input>
</el-form-item>
<el-form-item label="商户电话" prop="merchantPhoneNumber">
<el-input show-word-limit placeholder="请输入商户电话" type="text" v-model="form.merchantPhoneNumber" maxlength="20" class="w-340"></el-input>
</el-form-item>
<el-form-item label="商户LOGO">
<single-upload uploadType="1" :showTips="false" :imgSrc.sync="form.merchantLogo" :field="''" class="app-set" :uploadLimit="2" :imgType="['image/jpeg', 'image/jpg', 'image/png', 'image/gif']"> </single-upload>
<p style="margin-top: 6px;font-size: 12px;color: #909399;line-height: 17px;">图片建议尺寸 240*240px，格式 jpg/jpep/png/gif，大小 200KB 以内。</p>
</el-form-item>
<el-form-item label="页面背景">
<single-upload uploadType="1" :showTips="false" :imgSrc.sync="form.pageBackgroundImg" :field="''" class="app-set" :uploadLimit="2" :imgType="['image/jpeg', 'image/jpg', 'image/png', 'image/gif']"> </single-upload>
<p style="margin-top: 6px;font-size: 12px;color: #909399;line-height: 17px;">图片建议尺寸 750*1334px，格式 jpg/png/gif，大小 200KB 以内。</p>
</el-form-item>
<el-form-item label="引导语" prop="guideComment">
<el-input show-word-limit placeholder="请输入引导语" type="textarea" v-model="form.guideComment" maxlength="50" class="w-340" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
</el-form-item>
</el-form>
<div class="rightContent">
<p class="previewTitle">落地页预览</p>
<previewPage :data="form" class="preview" />
<p class="previewBottom">此二维码只是样式预览效果，请勿直接使用</p>
</div>
</div>
<div class="footBtn">
<el-button type="primary" @click="save">保存</el-button>
</div>
</div> </div>
</template> </template>
<script> <script>
import singleUpload from '@/components/single-upload.vue';
import previewPage from '@/components/preview-page.vue'; import previewPage from '@/components/preview-page.vue';
import { guidePageDetail, guidePageEdit, guidePageSave, wxEnterpriseList } from '@/api/actCode';
export default { export default {
components: { components: {
previewPage previewPage,
singleUpload
},
data() {
const merchantPhoneNumberVal = (rules, value, callback) => {
const reg = /^[0-9 \+\-]{0,20}$/;
const reg1 = /^\s*$/;
const reg2 = /^\+*$/;
const reg3 = /^\-*$/;
if (reg1.test(value) || reg2.test(value) || reg3.test(value)) {
callback('请输入手机号');
}
if (!reg.test(value)) {
callback('仅支持输入数字，空格，-，+');
}
callback();
};
return {
form: {
templateName: '',
pageTitle: '',
merchantName: '',
merchantPhoneNumber: '',
merchantLogo: '',
//https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f
pageBackgroundImg: '',
guideComment: '长按保存图片并识别二维码添加您的专属导购'
},
logoImageList: [],
isEdit: this.$route.meta.type == 'edit',
isAdd: this.$route.meta.type == 'add',
loading: false,
rules: {
merchantPhoneNumber: [{ validator: merchantPhoneNumberVal }]
}
};
},
mounted() {
if (this.isEdit) {
// this.getDetail();
} else {
// this.getEchoEnterpriseInfo();
}
},
methods: {
getDetail() {
guidePageDetail({ templateId: this.$route.query.id }).then(res => {
if (res.data.result) {
const result = res.data.result;
this.form = result;
}
});
},
getEchoEnterpriseInfo() {
wxEnterpriseList().then(res => {
let resData = res.data;
if (!!resData.result && !!resData.result.length) {
const { conactsPhone, enterpriseLogo, enterpriseName } = resData.result;
this.form.merchantLogo = enterpriseLogo;
this.form.merchantPhoneNumber = conactsPhone;
this.form.merchantName = enterpriseName;
}
});
},
guidePageEdit() {
this.loading = true;
guidePageEdit(this.form)
.then(_ => {
this.$router.go(-1);
this.$message.success('保存成功');
})
.finally(_ => {
this.loading = false;
});
},
guidePageSave() {
this.loading = true;
guidePageSave(this.form)
.then(_ => {
this.$router.go(-1);
this.$message.success('保存成功');
})
.finally(_ => {
this.loading = false;
});
},
save() {
if (this.isEdit) {
this.guidePageEdit();
} else {
this.guidePageSave();
}
}
} }
}; };
</script> </script>
<style type="text/scss" lang="scss" scoped>
.daily-set-content {
padding: 20px;
}
.form {
float: left;
}
.rightContent {
margin-left: 734px;
width: 280px;
display: flex;
flex-direction: column;
align-items: center;
}
.previewTitle {
font-weight: 500;
color: #303133;
line-height: 20px;
font-size: 14px;
width: 70px;
text-align: center;
margin-bottom: 20px;
}
.footBtn {
width: 100%;
height: 56px;
background: #ffffff;
box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.previewBottom {
font-size: 12px;
text-align: center;
width: 228px;
color: #909399;
line-height: 17px;
}
</style>
src/views/salesleads/actCodeManage/attractFlowLink/landingPage/list.vue
<template> <template>
<div class="daily-set-content boder-box"> <div class="daily-set-content">
<div class="table-condition flex flex-space-between m-b-23"> <div class="flex flex-space-between m-b-16">
<div class="table-condition-left flex flex-align-center"> <div class="flex flex-align-center">
<el-input placeholder="请输入模板ID/名称、创建人" class="w-260"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input> <el-input placeholder="请输入模板ID/名称、创建人" class="w-260" v-model="form.pageSearchText" @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>
</div> </div>
<el-button type="primary" @click="addTemp">新增模板</el-button>
</div> </div>
<div class="tip-text"> <div class="tips">
二维码只是样式预览效果，请勿直接使用 二维码只是样式预览效果，请勿直接使用
</div> </div>
<div class="card-content"> <div class="card-content" v-loading="loading">
<card-view :content="item" v-for="item in list" :key="item.templateId" /> <card-view :content="item" v-for="item in list" :key="item.templateId" @relationDetail="relationDetail(item)" @deleteTemp="deleteTemp(item)" @editTemp="editTemp(item)" />
</div>
<relation-dialog :dialogVisible.sync="dialogVisible" :templateId="templateId" />
<div class="text-right" v-if="list.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> </div>
</div> </div>
</template> </template>
<script> <script>
import cardView from './cardView'; import cardView from './cardView';
import relationDialog from './relationDialog';
// import { guidePageList, guidePageDel, guidePageRelation } from '@/api/actCode';
import { _debounce } from '@/common/js/public';
export default { export default {
data() { data() {
return { return {
form: {
pageSearchText: '',
dateRange: [],
pageSize: 20,
pageNum: 1
},
loading: false,
total: 100,
templateId: '',
list: [ list: [
{ {
templateName: '模板名称模板名称模板名称模板名称模板', templateName: '模板名称模板名称模板名称模板名称模板',
...@@ -28,7 +47,9 @@ export default { ...@@ -28,7 +47,9 @@ export default {
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '0571-1234567',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f', pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
guideComment: '长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二' guideComment: '长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二长按保存图片并识别二',
createorName: '艾蜜雪管理员',
createTime: 1657257986000
}, },
{ {
templateName: '模板名称模板名称模板名称模板名称模板', templateName: '模板名称模板名称模板名称模板名称模板',
...@@ -39,7 +60,9 @@ export default { ...@@ -39,7 +60,9 @@ export default {
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '0571-1234567',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
pageBackgroudImg: '', pageBackgroudImg: '',
guideComment: '长按识别二维码添加您的专属导购' guideComment: '长按识别二维码添加您的专属导购',
createorName: '艾蜜雪管理员',
createTime: 1657257986000
}, },
{ {
templateName: '模板名称模板名称模板名称模板名称模板', templateName: '模板名称模板名称模板名称模板名称模板',
...@@ -50,7 +73,9 @@ export default { ...@@ -50,7 +73,9 @@ export default {
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '0571-1234567',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f', pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
guideComment: '长按识别二维码添加您的专属导购' guideComment: '长按识别二维码添加您的专属导购',
createorName: '艾蜜雪管理员',
createTime: 1657257986000
}, },
{ {
templateName: '模板名称模板名称模板名称模板名称模板', templateName: '模板名称模板名称模板名称模板名称模板',
...@@ -61,7 +86,9 @@ export default { ...@@ -61,7 +86,9 @@ export default {
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '0571-1234567',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f', pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
guideComment: '长按识别二维码添加您的专属导购' guideComment: '长按识别二维码添加您的专属导购',
createorName: '艾蜜雪管理员',
createTime: 1657257986000
}, },
{ {
templateName: '模板名称模板名称模板名称模板名称模板', templateName: '模板名称模板名称模板名称模板名称模板',
...@@ -72,15 +99,87 @@ export default { ...@@ -72,15 +99,87 @@ export default {
merchantPhoneNumber: '0571-1234567', merchantPhoneNumber: '0571-1234567',
merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464', merchantLogo: 'https://pic01-10001430.image.myqcloud.com/d4b383df-8eb1-49d6-9c84-8e3e36958464',
pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f', pageBackgroudImg: 'https://pic01-10001430.image.myqcloud.com/b91f73af-43e4-4733-a4d3-0ab0bcb4ce7f',
guideComment: '长按识别二维码添加您的专属导购' guideComment: '长按识别二维码添加您的专属导购',
createorName: '艾蜜雪管理员',
createTime: 1657257986000
} }
] ]
}; };
}, },
components: { components: {
cardView cardView,
relationDialog
}, },
methods: {} methods: {
toInput: _debounce(function(e, value) {
this.getList();
}, 500),
getList() {
const param = { ...this.form };
if (this.form.dateRange && this.form.dateRange.length) {
param.startTime = this.form.dateRange[0] + ' 00:00:00';
param.endTime = this.form.dateRange[1] + ' 23:59:59';
}
delete param.dateRange;
console.log(param);
// this.loading=true;
// guidePageList(param).then(res => {
// console.log(res);
// const { result } = res;
// if (result) {
// this.total = result.pageInfo.total;
// this.list = result.list;
// }
// }).finally(_=>{this.loading=false})
},
handleSizeChange(val) {
this.form.pageNum = 1;
this.form.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.form.pageNum = val;
this.getList();
},
addTemp() {
this.$router.push('/ladingPageAdd');
},
relationDetail(item) {
this.dialogVisible = true;
this.templateId = item.templateId;
},
deleteTemp(item) {
// guidePageRelation({ templateId: item.templateId }).then(res => {
// const { result } = res;
// if (result.list) {
// this.$confirm(`当前模板已关联链接（${result.pageInfo.total}），请确认投放链接已投放结束，取消关联后才可删除该模板`, '无法删除该模板', {
// confirmButtonText: '关联详情',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(_ => {
// this.relationDetail(item);
// });
// } else {
// this.$confirm('模板删除后将无法恢复', '确认要删除该模板吗？', {
// confirmButtonText: '删除',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(_ => {
// this.deleteRequest(item);
// });
// }
// });
},
deleteRequest(item) {
// guidePageDel({ templateId: item.templateId }).then(res => {
// this.$message.success('删除成功');
// });
},
editTemp(item) {
console.log(item);
this.$router.push({ path: '/ladingPageEdit', query: { id: item.templateId } });
}
}
}; };
</script> </script>
...@@ -94,4 +193,11 @@ export default { ...@@ -94,4 +193,11 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
} }
.tips {
font-size: 12px;
font-weight: 400;
color: #606266;
line-height: 17px;
margin-bottom: 16px;
}
</style> </style>
src/views/salesleads/actCodeManage/attractFlowLink/landingPage/relationDialog.vue 0 → 100644
<template>
<el-dialog title="关联详情" width="600px" :visible.sync="dialogVisible" @close="$emit('update:dialogVisible', false)">
<div class="daily-set-content boder-box">
<div class="flex flex-space-between m-b-16">
<el-input placeholder="请输入链接名称/ID" class="w-260" v-model="form.searchContent" @keyup.native="value => toInput(value, searchInput)" clearable @clear="getList"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</div>
</div>
<el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" height="450" tooltip-effect="dark">
<el-table-column prop="releationId" label="链接ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="referName" label="链接名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="" label="操作" width="80">
<template slot-scope="{ row }">
<el-button type="text" @click="$emit('goLinkDetail', row.referId)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination class="text-right margin-pg" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size.sync="form.pageSize" :current-page.sync="form.pageNum" layout="prev, pager, next" :total="total"> </el-pagination>
</el-dialog>
</template>
<script>
// import { guidePageRelation } from '@/api/actCode';
import { _debounce } from '@/common/js/public';
export default {
data() {
return {
form: {
searchContent: '',
templateId: '',
pageNum: 1,
pageSize: 20
},
loading: false,
total: 50,
tableData: []
};
},
props: {
templateId: {
type: String,
default: ''
},
dialogVisible: {
type: Boolean,
default: false
}
},
watch: {
templateId(val) {
if (val) {
this.form = { searchContent: '', templateId: val, pageNum: 1, pageSize: 20 };
this.getList();
}
}
},
methods: {
toInput: _debounce(function(e, value) {
this.getList();
}, 500),
getList() {
console.log(this.form);
const obj = {
releationId: 'HM01123456789123000001',
referName: '名称名称名称名名称名称名',
referId: 1
};
for (let i = 0; i < 50; i++) {
this.tableData.push(obj);
}
// this.loading=true;
// guidePageRelation(this.form).then(res => {
// console.log(res);
// const { result } = res;
// if (result) {
// this.total = result.pageInfo.total;
// this.list = result.list;
// }
// }).finally(_=>{this.loading=false;})
},
handleSizeChange(val) {
this.form.pageNum = 1;
this.form.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.form.pageNum = val;
this.getList();
}
}
};
</script>
<style type="text/scss" lang="scss" scoped>
.margin-pg {
margin: 20px 0 0 0;
}
</style>
static/css/public.css
...@@ -595,12 +595,18 @@ input:focus { ...@@ -595,12 +595,18 @@ input:focus {
.w-157 { .w-157 {
width: 157px; width: 157px;
} }
.w-256 {
width: 256px !important;
}
.w-260 { .w-260 {
width: 260px; width: 260px !important;
} }
.w-264 { .w-264 {
width: 264px; width: 264px;
} }
.w-340 {
width: 340px !important;
}
.w-250 { .w-250 {
width: 250px; width: 250px;
} }
......
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