Skip to content

S
shareConfig
Commit 44f9eec6 by 无尘
Options

feat: 增加路由和配置页面

parent 85643cae
Showing with 140 additions and 45 deletions
dist/index.html
<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>分享有礼</title><link href=./static/css/app.fdcc6953c98d61ef594c3a57c28a8dbe.css rel=stylesheet></head><body style="background-color: #f0f2f5;min-width: 1400px;"><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.33.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.03.js></script><script src=//web-1251519181.file.myqcloud.com/components/store-new.2.0.29.js></script><script src=//web-1251519181.file.myqcloud.com/components/people.2.0.38.js></script><script src=//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.11.js></script><script src=//web-1251519181.file.myqcloud.com/components/area-ab.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/card.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/selector.1.1.91.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.12.js></script><script type=text/javascript src=./static/js/manifest.d1dc105a1153160900ad.js></script><script type=text/javascript src=./static/js/vendor.14f8172dd3290d7d86d8.js></script><script type=text/javascript src=./static/js/app.5f91851d0177bf3c6f90.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><link rel="shortcut icon" href=./favicon.ico><title>分享有礼</title><link href=./static/css/app.b5c19f4ac98676d7a7bccf74fce337cc.css rel=stylesheet></head><body style="background-color: #f0f2f5;min-width: 1400px;"><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.33.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.03.js></script><script src=//web-1251519181.file.myqcloud.com/components/store-new.2.0.29.js></script><script src=//web-1251519181.file.myqcloud.com/components/people.2.0.38.js></script><script src=//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.11.js></script><script src=//web-1251519181.file.myqcloud.com/components/area-ab.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/card.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/selector.1.1.91.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.12.js></script><script type=text/javascript src=./static/js/manifest.67078070210c0f034083.js></script><script type=text/javascript src=./static/js/vendor.14f8172dd3290d7d86d8.js></script><script type=text/javascript src=./static/js/app.5f91851d0177bf3c6f90.js></script></body></html>
\ No newline at end of file
dist/static/css/app.b5c19f4ac98676d7a7bccf74fce337cc.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/app.fdcc6953c98d61ef594c3a57c28a8dbe.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/2.3ec8497d74f0c733cb7f.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/2.c7f516b39b5c1fce40b3.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/manifest.d1dc105a1153160900ad.js → dist/static/js/manifest.67078070210c0f034083.js
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,f){for(var a,i,u,d=0,b=[];d<r.length;d++)i=r[d],t[i]&&b.push(t[i][0]),t[i]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(n&&n(r,c,f);b.length;)b.shift()();if(f)for(d=0;d<f.length;d++)u=o(o.s=f[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],f=document.createElement("script");f.type="text/javascript",f.charset="utf-8",f.async=!0,f.timeout=12e4,o.nc&&f.setAttribute("nonce",o.nc),f.src=o.p+"static/js/"+e+"."+{0:"fe1d22745273babbb30b",1:"5b546fa38466a0b05e37",2:"3ec8497d74f0c733cb7f",3:"3bebb83fa165f78b8362",4:"c3325f8ffdd91a1c6c1c",5:"b19e63e305cd851d71d6",6:"46546cc7f3c9d48cc350",7:"b0fd74564cc799593b8f",8:"fe9ec49f63ecd8e527ba",9:"522a01ff8d619d2bf030",10:"e16b73d2d4b922255e52",11:"c11d02c33702d00b2e2e",12:"47f6c594ed379a74f6f2"}[e]+".js";var a=setTimeout(i,12e4);function i(){f.onerror=f.onload=null,clearTimeout(a);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return f.onerror=f.onload=i,c.appendChild(f),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,f){for(var a,i,u,d=0,b=[];d<r.length;d++)i=r[d],t[i]&&b.push(t[i][0]),t[i]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(n&&n(r,c,f);b.length;)b.shift()();if(f)for(d=0;d<f.length;d++)u=o(o.s=f[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],f=document.createElement("script");f.type="text/javascript",f.charset="utf-8",f.async=!0,f.timeout=12e4,o.nc&&f.setAttribute("nonce",o.nc),f.src=o.p+"static/js/"+e+"."+{0:"fe1d22745273babbb30b",1:"5b546fa38466a0b05e37",2:"c7f516b39b5c1fce40b3",3:"3bebb83fa165f78b8362",4:"c3325f8ffdd91a1c6c1c",5:"b19e63e305cd851d71d6",6:"46546cc7f3c9d48cc350",7:"b0fd74564cc799593b8f",8:"fe9ec49f63ecd8e527ba",9:"522a01ff8d619d2bf030",10:"e16b73d2d4b922255e52",11:"c11d02c33702d00b2e2e",12:"47f6c594ed379a74f6f2"}[e]+".js";var a=setTimeout(i,12e4);function i(){f.onerror=f.onload=null,clearTimeout(a);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return f.onerror=f.onload=i,c.appendChild(f),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
src/components/active-config/poster-config.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-21 19:53:37
* @LastEditTime: 2019-11-21 20:21:27
-->
<!--
<poster-config @submitBack="submitBack" @submitNext="submitNext"></poster-config>
......@@ -14,22 +14,37 @@ import posterConfig from '@/components/active-config/poster-config.vue';
<template>
<div class="poster-config-content">
<div class="config-title font-14 color-303133">分享海报配置</div>
<div role="alert" class="el-alert el-alert--info">
<div
role="alert"
class="el-alert el-alert--info"
>
<i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
<div class="el-alert__content">
<span class="el-alert__title color-606266 font-14 font-w-400"
>1. 当前活动的转化路径以小程序作为受邀人入口，邀请人可在活动中心一键保存小程序带二维码海报以实现朋友圈转发。 <br />
2. 请对分享海报进行配置，一张生动而有感染力的活动海报，是活动成败的关键！。</span
>
<span class="el-alert__title color-606266 font-14 font-w-400">1. 当前活动的转化路径以小程序作为受邀人入口，邀请人可在活动中心一键保存小程序带二维码海报以实现朋友圈转发。 <br />
2. 请对分享海报进行配置，一张生动而有感染力的活动海报，是活动成败的关键！。</span>
</div>
</div>
<div class="form-wrap flex">
<el-form label-width="114px" :model="activeInfoData" ref="posterForm" :rules="rules">
<el-form-item label="模板选择：" prop="">
<el-form
label-width="114px"
:model="activeInfoData"
ref="posterForm"
:rules="rules"
>
<el-form-item
label="模板选择："
prop=""
>
<div class="template-body">
<ul class="flex">
<li :class="['border-box ', activeInfoData.templateType == 1 ? 'select-li' : '']" @click="selectTemplate(1)">
<img src="../../assets/images/templete-null.png" alt="" />
<li
:class="['border-box ', activeInfoData.templateType == 1 ? 'select-li' : '']"
@click="selectTemplate(1)"
>
<img
src="../../assets/images/templete-null.png"
alt=""
/>
<div class="common-cell-check">
<div class="common-cell-triangle">
<div class="common-cell-outer">
......@@ -38,8 +53,14 @@ import posterConfig from '@/components/active-config/poster-config.vue';
</div>
</div>
</li>
<li :class="['m-l-10 border-box flex flex-align-center', activeInfoData.templateType == 2 ? 'select-li' : '']" @click="selectTemplate(2)">
<img src="../../assets/images/templete-null.png" alt="" />
<li
:class="['m-l-10 border-box flex flex-align-center', activeInfoData.templateType == 2 ? 'select-li' : '']"
@click="selectTemplate(2)"
>
<img
src="../../assets/images/templete-null.png"
alt=""
/>
<div class="common-cell-check">
<div class="common-cell-triangle">
<div class="common-cell-outer">
......@@ -48,8 +69,14 @@ import posterConfig from '@/components/active-config/poster-config.vue';
</div>
</div>
</li>
<li :class="['m-l-10 border-box flex flex-align-end', activeInfoData.templateType == 3 ? 'select-li' : '']" @click="selectTemplate(3)">
<img src="../../assets/images/templete-null.png" alt="" />
<li
:class="['m-l-10 border-box flex flex-align-end', activeInfoData.templateType == 3 ? 'select-li' : '']"
@click="selectTemplate(3)"
>
<img
src="../../assets/images/templete-null.png"
alt=""
/>
<div class="common-cell-check">
<div class="common-cell-triangle">
<div class="common-cell-outer">
......@@ -58,8 +85,15 @@ import posterConfig from '@/components/active-config/poster-config.vue';
</div>
</div>
</li>
<li :class="['m-l-10 border-box flex flex-align-end flex-pack-end', activeInfoData.templateType == 4 ? 'select-li' : '']" @click="selectTemplate(4)">
<img class="w-24" src="../../assets/images/templete-null.png" alt="" />
<li
:class="['m-l-10 border-box flex flex-align-end flex-pack-end', activeInfoData.templateType == 4 ? 'select-li' : '']"
@click="selectTemplate(4)"
>
<img
class="w-24"
src="../../assets/images/templete-null.png"
alt=""
/>
<div class="common-cell-check">
<div class="common-cell-triangle">
<div class="common-cell-outer">
......@@ -71,30 +105,66 @@ import posterConfig from '@/components/active-config/poster-config.vue';
</ul>
</div>
</el-form-item>
<el-form-item label="海报上传：" prop="palyBillUrl">
<el-form-item
label="海报上传："
prop="palyBillUrl"
>
<post-upload v-model="activeInfoData.palyBillUrl"> </post-upload>
</el-form-item>
<el-form-item label="二维码配置：" prop="">
<el-form-item
label="二维码配置："
prop=""
>
<div class="item-bg border-box">
<div class="flex">
<span class="color-wrap flex flex-pack-center flex-space-between border-box">前景色<el-color-picker v-model="activeInfoData.qrcodeFrontColor" @change="changeFront"></el-color-picker></span><span class="color-wrap flex flex-space-between flex-pack-center border-box">背景色<el-color-picker v-model="activeInfoData.qrcodeBackColor" @change="changeBg"></el-color-picker></span>
<span>内边距</span>
<el-input-number class="w-90 m-l-20" v-model="activeInfoData.qrcodePadding" controls-position="right" @change="changePadding" :min="1" :max="60"></el-input-number>
<span class="color-wrap flex flex-pack-center flex-space-between border-box">前景色<el-color-picker
v-model="activeInfoData.qrcodeFrontColor"
@change="changeFront"
></el-color-picker></span><span class="color-wrap flex flex-space-between flex-pack-center border-box">背景色<el-color-picker
v-model="activeInfoData.qrcodeBackColor"
@change="changeBg"
></el-color-picker></span>
<span class="font-14 color-606266 p-l-20">内边距</span>
<el-input-number
class="w-90 m-l-20"
v-model="activeInfoData.qrcodePadding"
controls-position="right"
@change="changePadding"
:min="1"
:max="60"
></el-input-number>
</div>
</div>
</el-form-item>
<el-form-item class="m-t-50">
<el-button type="primary" @click="submitBack">上一步</el-button>
<el-button type="primary" @click="submitForm('posterForm')">下一步</el-button>
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('posterForm')"
>下一步</el-button>
</el-form-item>
</el-form>
<div class="form-preview">
<div class="form-preview-top font-14 color-303133">效果预览</div>
<div class="form-preview-body" :style="{ background: `url(${activeInfoData.palyBillUrl}) no-repeat`, 'background-size': '100%' }">
<div
class="form-preview-body"
:style="{ background: `url(${activeInfoData.palyBillUrl}) no-repeat`, 'background-size': '100%' }"
>
<ul>
<li :class="['border-box', activeInfoData.templateType == 2 ? 'flex flex-align-center' : activeInfoData.templateType == 3 ? 'flex flex-align-end' : activeInfoData.templateType == 4 ? 'flex flex-align-end flex-pack-end li-50' : '']">
<!-- <img src="../../assets/images/templete-null.png" alt="" /> -->
<vue-qr text="123456" :margin="activeInfoData.qrcodePadding" :correctLevel="3" :colorDark="activeInfoData.qrcodeFrontColor" :backgroundColor="activeInfoData.qrcodeBackColor" :logoSrc="''" :size="100"></vue-qr>
<vue-qr
text="123456"
:margin="activeInfoData.qrcodePadding"
:correctLevel="3"
:colorDark="activeInfoData.qrcodeFrontColor"
:backgroundColor="activeInfoData.qrcodeBackColor"
:logoSrc="''"
:size="100"
></vue-qr>
</li>
</ul>
</div>
......@@ -127,7 +197,7 @@ export default {
activityId: ''
},
rules: {
palyBillUrl: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
palyBillUrl: [{ required: true, message: '请上传海报图片', trigger: 'blur' }]
}
};
},
......@@ -198,6 +268,9 @@ export default {
.m-l-20 {
margin-left: 20px;
}
.p-l-20 {
padding-left: 20px;
}
.poster-config-content {
padding: 48px 0 0 0;
.config-title {
......@@ -316,7 +389,7 @@ export default {
}
}
.item-bg {
width: 401px;
width: 421px;
height: 73px;
padding: 20px;
background: rgba(243, 246, 249, 1);
......
src/components/post-upload.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-20 13:44:22
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 16:25:45
* @LastEditTime: 2019-11-21 20:13:20
-->
<!--
单个上传组件
......@@ -19,17 +19,39 @@
-->
<template>
<div class="single-upload-wrap">
<el-upload class="avatar-uploader" :action="uploadUrl()" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="value" :src="value" class="avatar" @mouseover="showImage(value)" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<el-upload
class="avatar-uploader"
:action="uploadUrl()"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="value"
:src="value"
class="avatar"
@mouseover="showImage(value)"
/>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
<p class="upload-tip w-500">
图片规格750*1300px，大小不超过,2M，仅限JPG格式。
</p>
<p class="upload-tip">为了确保二维码位置的准确，建议，<a class="color-1890ff" href="https://report-1251519181.cos.ap-shanghai.myqcloud.com/haoban/20190619185604/好办管理员.pdf" download="好办帮助手册.pdf"> 下载模板</a> 基于模板进行海报设计。</p>
<p class="upload-tip">为了确保二维码位置的准确，建议，<a
class="color-1890ff"
href="https://report-1251519181.cos.ap-shanghai.myqcloud.com/haoban/20190619185604/好办管理员.pdf"
download="好办帮助手册.pdf"
> 下载模板</a> 基于模板进行海报设计。</p>
<p class="upload-tip">如果设计师还没有设计好图片，可以先跳过该步骤，先保存活动配置。</p>
<!-- 图片预览 -->
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
<vue-gic-img-preview
:imgUrl="imgUrl"
:imgShowFlag="imgShowFlag"
@hideImage="hideImage"
></vue-gic-img-preview>
</div>
</template>
<script>
......@@ -48,11 +70,11 @@ export default {
},
uploadLimit: {
type: Number,
default: 1
default: 2
},
limitFlag: {
type: [Number, String],
default: 1 // 1: 根据大于宽高，2：根据固定宽高
default: 2 // 1: 根据大于宽高，2：根据固定宽高
},
width: {
type: Number,
......@@ -131,11 +153,11 @@ export default {
let width = this.width;
let height = this.height;
if (that.limitFlag == 2 && (width !== that.width || height !== that.height)) {
that.$message.error('图片尺寸必须为750*1300px!');
that.$message.error('图片尺寸必须为${that.width}*${that.height}px!');
reject();
}
if (that.limitFlag == 1 && (width < that.width || height < that.height)) {
that.$message.error('图片尺寸必须为750*1300px!');
that.$message.error('图片尺寸必须>=${that.width}*${that.height}px!');
reject();
}
resolve();
......
src/components/single-upload.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-20 13:44:22
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 16:25:45
* @LastEditTime: 2019-11-21 20:12:04
-->
<!--
单个上传组件
......@@ -147,11 +147,11 @@ export default {
let width = this.width;
let height = this.height;
if (that.limitFlag == 2 && (width !== that.width || height !== that.height) ){
that.$message.error('图片尺寸必须为750*1300px!');
that.$message.error(`图片尺寸必须为${that.width}*${that.height}px!`);
reject();
}
if (that.limitFlag == 1 && (width < that.width || height < that.height) ){
that.$message.error('图片尺寸必须为750*1300px!');
that.$message.error('图片尺寸必须>=${that.width}*${that.height}px!');
reject();
}
resolve();
......@@ -260,7 +260,7 @@ export default {
height: 80px;
line-height: 80px;
text-align: center;
background:rgba(245,247,250,1);
background: rgba(245, 247, 250, 1);
}
.avatar {
max-width: 80px;
......
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