Skip to content

S
shareConfig
Commit 85643cae by 无尘
Options

feat: 增加路由和配置页面

parent b477c901
Showing with 1109 additions and 219 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.84fd37d2ca029b67afcb5f50e5e0072f.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.4c9a3a082e0c3944714e.js></script><script type=text/javascript src=./static/js/vendor.14f8172dd3290d7d86d8.js></script><script type=text/javascript src=./static/js/app.54830dfd03db1fb3ddb1.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.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
dist/static/css/app.84fd37d2ca029b67afcb5f50e5e0072f.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/app.fdcc6953c98d61ef594c3a57c28a8dbe.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/public.css
......@@ -614,6 +614,13 @@ strong {
align-items: center;
}
.flex-align-end {
-webkit-box-align: flex-end;
-webkit-align-items: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
......@@ -621,6 +628,13 @@ strong {
justify-content: center;
}
.flex-pack-end {
-webkit-box-pack: flex-end;
-webkit-justify-content: flex-end;
-ms-flex-pack: flex-end;
justify-content: flex-end;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
......
dist/static/img/default.jpg
dist/static/img/default.jpg

6.31 KB | W: | H:

dist/static/img/default.jpg

31.6 KB | W: | H:

dist/static/img/default.jpg
dist/static/img/default.jpg
dist/static/img/default.jpg
dist/static/img/default.jpg
  • 2-up
  • Swipe
  • Onion skin
dist/static/js/2.3ec8497d74f0c733cb7f.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/2.54bafab19f1e3d5fdab0.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/manifest.4c9a3a082e0c3944714e.js → dist/static/js/manifest.d1dc105a1153160900ad.js
!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,f){for(var a,d,i,u=0,s=[];u<r.length;u++)d=r[u],t[d]&&s.push(t[d][0]),t[d]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(n&&n(r,c,f);s.length;)s.shift()();if(f)for(u=0;u<f.length;u++)i=o(o.s=f[u]);return i};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:"33d0c29fa31f393ab272",1:"5b546fa38466a0b05e37",2:"54bafab19f1e3d5fdab0",3:"e698fb6010fd5724021d",4:"c3325f8ffdd91a1c6c1c",5:"b19e63e305cd851d71d6",6:"46546cc7f3c9d48cc350",7:"b0fd74564cc799593b8f",8:"fe9ec49f63ecd8e527ba",9:"522a01ff8d619d2bf030",10:"e16b73d2d4b922255e52",11:"c11d02c33702d00b2e2e",12:"47f6c594ed379a74f6f2"}[e]+".js";var a=setTimeout(d,12e4);function d(){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=d,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:"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
package.json
......@@ -22,6 +22,7 @@
"vue": "^2.6.10",
"vue-clipboard2": "^0.2.0",
"vue-loader": "^13.7.3",
"vue-qr": "^2.2.1",
"vue-router": "^3.0.1",
"xlsx": "^0.13.5"
},
......
src/api/api.js
import Vue from 'vue';
// import axios from 'axios';
import qs from 'qs';
import { Message } from 'element-ui';
import {
Message
} from 'element-ui';
Vue.axios.defaults.timeout = 25000;
let local = window.location.origin;
......@@ -14,7 +16,9 @@ Vue.axios.interceptors.request.use(
return config;
},
err => {
Message.error({ message: '请求超时!' });
Message.error({
message: '请求超时!'
});
return Promise.resolve(err);
}
);
......@@ -22,7 +26,9 @@ Vue.axios.interceptors.request.use(
Vue.axios.interceptors.response.use(
data => {
if (data.status && data.status == 200 && data.data.errorCode == '401') {
Message.error({ message: data.data.message });
Message.error({
message: data.data.message
});
window.location.href = local + '/gic-web/#/';
return;
}
......@@ -32,7 +38,9 @@ Vue.axios.interceptors.response.use(
// Message.error({message: err.response.message});
if (err.response.status == 504 || err.response.status == 404) {
// window.location.href= local + "/gic-web/#/"
Message.error({ message: '服务异常⊙﹏⊙∥' });
Message.error({
message: '服务异常⊙﹏⊙∥'
});
} else if (err.response.status == 403) {
window.location.href = local + '/gic-web/#/';
// Message.error({message: '权限不足,请联系管理员!'});
......@@ -58,13 +66,15 @@ Vue.axios.interceptors.response.use(
*/
export const getRequest = (url, params) => {
params.requestProject = 'member-tag';
params.requestProject = 'share-config';
return Vue.axios({
method: 'get',
url: `${local}/gic-member-tag-web${url}`,
url: `${local}${url}`,
data: {},
params: params,
headers: { 'content-type': 'application/x-www-form-urlencoded' } // "token": token
headers: {
'content-type': 'application/x-www-form-urlencoded'
} // "token": token
});
};
......@@ -78,23 +88,27 @@ export const getRequest = (url, params) => {
*/
export const postRequest = (url, params) => {
params.requestProject = 'member-tag';
params.requestProject = 'share-config';
return Vue.axios({
method: 'post',
url: `${local}/gic-member-tag-web${url}`,
url: `${local}${url}`,
data: qs.stringify(params),
headers: { 'content-type': 'application/x-www-form-urlencoded' } //multipart/form-data{"token": token}
headers: {
'content-type': 'application/x-www-form-urlencoded'
} //multipart/form-data{"token": token}
});
};
export const postJsonRequest = (url, params) => {
params.requestProject = 'member-tag';
params.requestProject = 'share-config';
return Vue.axios({
method: 'post',
url: `${local}/gic-member-tag-web${url}`,
url: `${local}${url}`,
data: '{}',
params: params,
headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token}
headers: {
'Content-Type': 'application/json;charset=UTF-8'
} //multipart/form-data{"token": token}
});
};
......@@ -102,20 +116,24 @@ export const postJsonRequest = (url, params) => {
* method: 'post'
* 'Content-Type': 'application/json;charset=UTF-8'
* @data: params
* @requestProject: 'member-tag'
* @requestProject: 'share-config'
*
*/
export const postJson = (url, params) => {
// params.requestProject = "member-tag";
// params.requestProject = "share-config";
return Vue.axios({
method: 'post',
url: `${local}/gic-member-tag-web${url}`,
url: `${local}${url}`,
data: params,
params: { requestProject: 'member-tag' },
params: {
requestProject: 'share-config'
},
// withCredentials: true,
// credentials: 'same-origin',
headers: { 'Content-Type': 'application/json;charset=UTF-8' } //multipart/form-data{"token": token}
headers: {
'Content-Type': 'application/json;charset=UTF-8'
} //multipart/form-data{"token": token}
});
};
......@@ -125,10 +143,10 @@ export const postJson = (url, params) => {
*
*/
export const postForm = (url, params) => {
params.requestProject = 'member-tag';
params.requestProject = 'share-config';
return Vue.axios({
method: 'post',
url: `${local}/gic-member-tag-web${url}`,
url: `${local}${url}`,
data: params,
headers: {} //'content-type': 'application/x-www-form-urlencoded'multipart/form-data{"token": token}
});
......
src/components/active-config/base-config.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 15:43:26
* @LastEditTime: 2019-11-21 14:01:24
-->
<!--
<base-config @submitNext="submitNext"></base-config>
......@@ -22,32 +22,32 @@ import baseConfig from '@/components/active-config/base-config.vue';
>
<el-form-item
label="活动目的："
prop="activeName"
prop="activeInfoData"
> </el-form-item>
<el-form-item
label="转化路径："
prop="activeName"
prop="activeInfoData"
> </el-form-item>
<el-form-item
label="活动营销页："
prop="activeName"
prop="activityName"
> </el-form-item>
<el-form-item
label="游戏计划："
prop="activeName"
prop="activityName"
> </el-form-item>
<el-form-item
label="卡券："
prop="activeName"
prop="activityName"
> </el-form-item>
<el-form-item
label="活动名称："
prop="activeName"
prop="activityName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:inputValue.sync="activeInfoData.activityName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
......@@ -87,7 +87,7 @@ import baseConfig from '@/components/active-config/base-config.vue';
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { postRequest } from '@/api/api';
import { getRequest,postRequest } from '@/api/api';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
......@@ -99,11 +99,18 @@ export default {
data() {
return {
activeInfoData: {
activeName: '',
parentGoalId: '',
goalId: '',
activityMarketPageId: '',
gamePlanId: '',
cardCoupId: '',
routerBitValue: '',
routerBitName: '',
activityName: '',
dateRange: []
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
}
};
......@@ -141,12 +148,22 @@ export default {
},
postSave() {
const that = this;
if (!that.activeInfoData.dateRange) {
that.activeInfoData.dateRange = [];
}
let para = {
project: that.repProjectName,
router: that.pathName,
requestProject: that.repProjectName
activityName: that.activeInfoData.activityName,
startDate: that.activeInfoData.dateRange[0],
endDate: that.activeInfoData.dateRange[1],
parentGoalId: that.activeInfoData.parentGoalId,
goalId: that.activeInfoData.goalId,
activityMarketPageId: that.activeInfoData.activityMarketPageId,
gamePlanId: that.activeInfoData.gamePlanId,
cardCoupId: that.activeInfoData.cardCoupId,
routerBitValue: that.activeInfoData.routerBitValue,
routerBitName: that.activeInfoData.routerBitName
};
postRequest('/haoban-manage-web/menu-detail', para)
postRequest('/sharing-core-web/create-activity-base-info', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
......@@ -162,8 +179,37 @@ export default {
message: error.message
});
});
}
}
},
/**
* 获取基础信息
* /sharing-core-web/get-activity-base-info
*/
getBaseData(acitivityId) {
const that = this;
let para = {
acitivityId: acitivityId || that.$route.query.acitivityId
};
getRequest('/sharing-core-web/get-activity-base-info', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.activeInfoData = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
},
mounted() {
const that = this;
that.getBaseData();
},
};
</script>
<style lang="less" scoped>
......
src/components/active-config/card-config.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:13:41
* @LastEditTime: 2019-11-21 17:18:50
-->
<!--
<card-config @submitBack="submitBack" @submitNext="submitNext"></card-config>
......@@ -14,91 +14,70 @@ import cardConfig from '@/components/active-config/card-config.vue';
<template>
<div class="card-config-content">
<div class="config-title font-14 color-303133">小程序卡片配置</div>
<el-form
label-width="114px"
:model="activeInfoData"
ref="cardForm"
:rules="rules"
>
<el-form-item
label="活动名称："
prop="activeName"
>
<limitInput
:inputWidth="350"
:disflag="$route.query.interfaceId ? true : false"
:inputValue.sync="activeInfoData.activeName"
:holder="'请输入活动名称'"
:getByType="'word'"
:maxLength="30"
> </limitInput>
</el-form-item>
<el-form-item
label="活动有效期："
prop="dateRange"
>
<el-date-picker
class="m-l-10"
prefix-icon="el-icon-time"
v-model="activeInfoData.dateRange"
@change="changeDate"
:editable="false"
:value-format="'yyyy-MM-dd'"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
> </el-date-picker>
</el-form-item>
<el-form-item class="m-t-50">
<el-button
type="primary"
@click="submitBack"
>上一步</el-button>
<el-button
type="primary"
@click="submitForm('cardForm')"
>下一步</el-button>
</el-form-item>
</el-form>
<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
>
</div>
</div>
<div class="form-wrap flex">
<el-form label-width="114px" :model="activeInfoData" ref="cardForm" :rules="rules">
<el-form-item label="页面标题：" prop="appletTitle">
<limitInput :inputWidth="503" :disflag="$route.query.interfaceId ? true : false" :inputValue.sync="activeInfoData.appletTitle" :holder="'请输入页面标题'" :getByType="'word'" :maxLength="40"> </limitInput>
</el-form-item>
<el-form-item label="海报上传：" prop="palyBillUrl">
<single-upload v-model="activeInfoData.palyBillUrl"> </single-upload>
</el-form-item>
<el-form-item class="m-t-50">
<el-button type="primary" @click="submitBack">上一步</el-button>
<el-button type="primary" @click="submitForm('cardForm')">下一步</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">
<div class="form-preview-inner">
<div class="form-preview-title">{{ activeInfoData.appletTitle }}</div>
<div class="form-preview-img flex flex-pack-center flex-align-center">
<img :src="activeInfoData.palyBillUrl" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest, postRequest } from '@/api/api';
export default {
name: 'card-config',
props: {
},
props: {},
components: {
limitInput
limitInput,
singleUpload
},
data() {
return {
activeInfoData: {
activeName: '',
dateRange: []
appletTitle: '',
palyBillUrl: ''
},
rules: {
activeName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
appletTitle: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
palyBillUrl: [{ required: true, message: '请上传海报图片', trigger: 'blur' }]
}
}
};
},
methods: {
/**
* 日期
*/
changeDate(e) {
const that = this;
if (!e) {
that.activeInfoData.dateRange = [];
}
},
/**
* 上一步
*/
submitBack() {
......@@ -110,17 +89,70 @@ export default {
*/
submitForm(formName) {
const that = this;
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveCardInfo', that.activeInfoData);
that.$refs[formName].validate(valid => {
if (valid) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveCardInfo', that.activeInfoData);
that.postSave();
} else {
return false;
}
});
},
postSave() {
const that = this;
let para = {
activityId: that.activeInfoData.activityId,
palyBillUrl: that.activeInfoData.palyBillUrl,
appletTitle: that.activeInfoData.appletTitle
};
postRequest('/sharing-core-web/edit-activity-applet', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.$emit('submitNext', that.activeInfoData);
that.$store.dispatch('saveCardInfo', that.activeInfoData);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取活动中心数据
*/
getData(acitivityId) {
const that = this;
let para = {
acitivityId: acitivityId || that.$route.query.acitivityId
};
getRequest('/sharing-core-web/get-activity-applet', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.activeInfoData = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
}
mounted() {
const that = this;
that.getData();
}
};
</script>
<style lang="less" scoped>
.card-config-content {
......@@ -137,5 +169,64 @@ export default {
color: #606266;
}
}
.el-alert--info {
width: 1130px;
margin-bottom: 17px;
background: #e6f7ff;
border: 1px solid #91d5ff;
.el-alert__icon {
padding-top: 5px;
align-self: flex-start;
}
.el-alert__content {
line-height: 22px;
padding-right: 0;
}
}
.form-wrap {
.el-form {
width: 640px;
max-width: 640px;
}
.form-preview {
position: relative;
width: 350px;
.form-preview-top {
line-height: 20px;
margin-bottom: 18px;
font-weight: 600;
}
.form-preview-body {
position: relative;
width: 350px;
height: 374px;
padding: 50px 26px;
background: url(../../assets/images/app-card.png) no-repeat left center;
background-size: 100%;
.form-preview-inner {
width: 100%;
height: 100%;
.form-preview-title {
height: 22px;
font-size: 16px;
font-weight: 600;
color: rgba(48, 49, 51, 1);
line-height: 22px;
margin-bottom: 8px;
}
.form-preview-img {
width: 298px;
height: 244px;
max-width: 298px;
max-height: 244px;
img {
max-width: 298px;
max-height: 244px;
}
}
}
}
}
}
}
</style>
src/components/active-config/reward-config.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-18 10:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 17:17:10
* @LastEditTime: 2019-11-21 12:53:10
-->
<!--
<reward-config @submitBack="submitBack" @submitNext="submitNext"></reward-config>
......@@ -68,6 +68,10 @@ import rewardConfig from '@/components/active-config/reward-config.vue';
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
name: 'reward-config',
props: {
......@@ -119,7 +123,35 @@ export default {
}
});
},500),
}
/**
* 获取活动中心数据
*/
getData(acitivityId) {
const that = this;
let para = {
acitivityId: acitivityId || that.$route.query.acitivityId
};
getRequest('/sharing-core-web/get-activity-award', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.activeInfoData = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
},
mounted() {
const that = this;
that.getData();
},
}
</script>
<style lang="less" scoped>
......
src/components/active/data-statistics-child.vue
......@@ -4,10 +4,10 @@
* @Author: 无尘
* @Date: 2019-11-13 16:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 10:09:01
* @LastEditTime: 2019-11-21 10:46:18
-->
<!--
<data-statistics-child :barChartData="barChartData"></data-statistics-child>
<data-statistics-child :activeData="activeData" :barChartData="barChartData"></data-statistics-child>
import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
-->
......@@ -18,27 +18,36 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
<div class="data-statistics-left">
<ul class="flex flex-column flex-pack-center flex-align-center">
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img src="../../assets/images/bgl.png" alt="" /></div>
<div class="data-statistics-icon"><img
src="../../assets/images/bgl.png"
alt=""
/></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266 font-w-400">活动曝光量</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ '287123' | formatThousand }}</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.exposure | formatThousand }}</div>
</div>
</li>
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img src="../../assets/images/cyrs.png" alt="" /></div>
<div class="data-statistics-icon"><img
src="../../assets/images/cyrs.png"
alt=""
/></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266 font-w-400">参与人数</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ '287123' | formatThousand }}</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.attend | formatThousand }}</div>
</div>
</li>
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img src="../../assets/images/syrs.png" alt="" /></div>
<div class="data-statistics-icon"><img
src="../../assets/images/syrs.png"
alt=""
/></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266 font-w-400">受邀人数</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ 287123 | formatThousand }}</div>
<div class="font-22 color-303133 font-w-600 p-t-10">{{ activeData.invited | formatThousand }}</div>
</div>
</li>
</ul>
......@@ -47,26 +56,38 @@ import dataStatisticsChild from '@/components/active/data-statistics-child.vue';
<div class="data-right-top flex">
<div class="data-statistics-middle flex-1 border-box m-l-20">
<div class="font-14 color-606266">参与率</div>
<div class="font-22 color-303133 p-t-5">70%</div>
<div :class="['font-22 color-303133 p-t-5 ', activeData.attendRate]">{{ activeData.attendRate }} %</div>
<div class="data-percentage">
<div class="data-percentage-inner" :style="{ width: '70%' }"></div>
<div
class="data-percentage-inner"
:style="{ width: activeData.attendRate + '%' }"
></div>
</div>
</div>
<div class="data-statistics-right flex-1 border-box m-l-20">
<div class="font-14 color-606266">传播系数</div>
<div class="font-22 color-303133 p-t-5">4.0</div>
<div class="font-22 color-303133 p-t-5">{{ activeData.spread }}</div>
<div class="data-percentage">
<template v-for="(child, key) in Math.floor(4.5)">
<i class="iconfont icon-xiaoren color-1890ff" :key="key + 'xrbg'"></i>
<template v-for="(child, key) in Math.floor(activeData.spread)">
<i
class="iconfont icon-xiaoren color-1890ff"
:key="key + 'xrbg'"
></i>
</template>
<template v-for="(child, key) in 10 - Math.floor(4.5)">
<i class="iconfont icon-xiaoren icon-xiaoren-opacity" :key="key + 'xr'"></i>
<template v-for="(child, key) in 10 - Math.floor(activeData.spread)">
<i
class="iconfont icon-xiaoren icon-xiaoren-opacity"
:key="key + 'xr'"
></i>
</template>
</div>
</div>
</div>
<div class="data-right-bottom">
<bar-chart :barChartData="barChartData" :charHeight="charHeight"></bar-chart>
<bar-chart
:barChartData="barChartData"
:charHeight="charHeight"
></bar-chart>
</div>
<!--<div class="chart-title font-12 color-000 text-center">- 近15天趋势图 -</div>-->
</div>
......@@ -78,6 +99,18 @@ import barChart from '@/components/active/bar-chart.vue';
export default {
name: 'data-statistics',
props: {
activeData: {
type: [Object,Array],
default() {
return {
exposure: 0,
attend: 0,
invited: 0,
attendRate: 0,
spread: 0
};
}
},
barChartData: {
type: [Array, Object],
default() {
......@@ -90,10 +123,13 @@ export default {
return {
charHeight: '220px'
};
}
},
/* methods() {
} */
mounted() {
console.log(this.activeData);
}
};
</script>
<style lang="less" scoped>
......
src/components/active/data-statistics.vue
......@@ -18,30 +18,24 @@ import dataStatistics from '@/components/active/data-statistics.vue';
<div class="data-statistics-left">
<ul class="flex flex-pack-center flex-align-center">
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img
src=""
alt=""
></div>
<div class="data-statistics-icon"><img src="" alt="" /></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">活动曝光量</div>
<div class="font-22 color-303133 p-t-10"></div>
</div>
</li>
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img
src=""
alt=""
></div>
<div class="data-statistics-icon"><img src="" alt="" /></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">参与人数</div>
<div class="font-22 color-303133 p-t-10">287,123</div>
</div>
</li>
<li class="flex-1 flex flex-pack-center flex-align-center">
<div class="data-statistics-icon"><img
src=""
alt=""
></div>
<div class="data-statistics-icon"><img src="" alt="" /></div>
<div class="data-statistics-txt flex flex-column">
<div class="font-14 color-606266">受邀人数</div>
<div class="font-22 color-303133 p-t-10"></div>
......@@ -53,10 +47,7 @@ import dataStatistics from '@/components/active/data-statistics.vue';
<div class="font-14 color-606266">参与率</div>
<div class="font-22 color-303133 p-t-5">70%</div>
<div class="data-percentage">
<div
class="data-percentage-inner"
:style="{'width': '70%'}"
></div>
<div class="data-percentage-inner" :style="{ width: '70%' }"></div>
</div>
</div>
<div class="data-statistics-right border-box m-l-20">
......@@ -70,19 +61,25 @@ import dataStatistics from '@/components/active/data-statistics.vue';
export default {
name: 'data-statistics',
props: {
activeData: {
type: [Array, Object],
default() {
return {};
}
},
barChartData: {
type: [Array, Object],
default() {
return {}
return {};
}
}
},
components: { },
components: {},
data() {
this.chartSettings = {
showLine: ['传播系数']
}
this.colors = ['#1890FF','#5AD8A6', '#FF6383']
};
this.colors = ['#1890FF', '#5AD8A6', '#FF6383'];
return {};
}
/* methods() {
......
src/components/active/finished-active.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-13 16:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 10:13:46
* @LastEditTime: 2019-11-21 11:50:20
-->
<!--
<finished-active></finished-active>
......@@ -16,30 +16,61 @@ import finishedActive from '@/components/active/finished-active.vue';
<div class="finished-active border-box">
<ul>
<template v-for="(item, index) in finishedData">
<li :class="['border-box', selectItem == item.id ? 'li-border' : '']" @click.stop="selectLi(item)" :key="index + 'data'">
<div class="finished-active-title flex flex-space-between border-box">
<li
:class="['border-box', selectItem == item.acitivityId && index != 0 ? 'li-border' : '']"
:key="index + 'data'"
>
<div
class="finished-active-title flex flex-space-between border-box"
@click.stop="selectLi(item)"
>
<div class="active-title-left">
<div class="active-title-name font-18 color-303133">活动名称活动名称活动名称活动名称活动名称活动名称</div>
<div class="active-title-date font-14 color-909399 m-t-7">2019.10.01 12:00 - 2019.10.02 12:00</div>
<div class="active-title-name font-18 color-303133">{{ item.acitivityName }}</div>
<div class="active-title-date font-14 color-909399 m-t-7">{{ item.startDate | formatTimeYmdHms }} - {{ item.endDate | formatTimeYmdHms }}</div>
</div>
<div class="active-title-right">
<el-button type="primary" plain>活动配置</el-button>
<el-button
type="primary"
plain
@click="toEdit(index, item)"
>活动配置</el-button>
<!-- <el-button
type="primary"
plain
@click="handleCopy(index, item)"
>复制路径</el-button> -->
<el-button type="primary" plain>数据明细</el-button>
<el-button
type="primary"
plain
@click="toDataList(index, item)"
>数据明细</el-button>
</div>
</div>
<div v-if="selectItem == item.id" class="finished-active-body">
<out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
<div
v-if="selectItem == item.acitivityId"
class="finished-active-body"
>
<out-date-active
:barChartData="barChartData"
:funnelData="funnelData"
></out-date-active>
</div>
</li>
</template>
</ul>
<div class="pagination text-right m-t-14" v-if="total">
<el-pagination small :page-size="pageSize" :current-page="currentPage" layout="prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
<div
class="pagination text-right m-t-14"
v-if="total"
>
<el-pagination
small
:page-size="pageSize"
:current-page="currentPage"
layout="prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
> </el-pagination>
</div>
</div>
</template>
......@@ -64,16 +95,10 @@ export default {
selectItem: '',
finishedData: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
acitivityId: 1,
acitivityName: '1',
startDate: 1574300553953,
endDate: 1574300553953
}
],
// 分页
......@@ -88,7 +113,48 @@ export default {
*/
selectLi(item) {
const that = this;
that.selectItem = item.id;
that.selectItem = item.acitivityId;
that.getActivityData(item.acitivityId);
},
/**
* 获取单个活动数据信息
* /sharing-core-web/get-activity-data-summary
*/
getActivityData(acitivityId) {
const that = this;
let para = {
acitivityId: acitivityId
};
getRequest('/sharing-core-web/get-activity-data-summary', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.funnelData = resData.result;
that.barChartData = resData.result.trend;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 活动配置
*/
toEdit(index, row) {
const that = this;
that.$router.push(`/createActive?activityId={row.activityId}&editFlag=show`)
},
/**
* 数据明细
*/
toDataList(index, row) {
const that = this;
that.$router.push(`/dataDetail?activityId={row.activityId}`)
},
/**
* 复制路径
......@@ -134,8 +200,17 @@ export default {
getRequest('/sharing-core-web/page-activity', para)
.then(res => {
let resData = res.data;
const nowDate = new Date().getTime();
if (resData.errorCode == 1) {
that.finishedData = resData.result.result || [];
let arr = [];
if (resData.result.result && resData.result.result.length) {
resData.result.result.forEach(ele => {
if (ele.endDate < nowDate) {
arr.push(ele);
}
});
}
that.finishedData = arr || [];
that.total = resData.result.totalCount;
return false;
}
......
src/components/active/funnel-chart.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-13 16:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-19 12:33:59
* @LastEditTime: 2019-11-21 10:03:23
-->
<!--
<funnel-chart :funnelData="funnelData"></funnel-chart>
......@@ -13,7 +13,6 @@ import funnelChart from '@/components/active/funnel-chart.vue';
-->
<template>
<div class="funnel-chart">
<div class="funnel-chart-body flex">
<div class="chart-left">
......@@ -33,17 +32,17 @@ import funnelChart from '@/components/active/funnel-chart.vue';
</div>
<div class="chart-right">
<div class="chart-text">
<div class="space-line h-20 p-l-98 font-12 color-606066">关注服务号</div>
<div class="space-line h-20 p-l-98 font-12 color-606066">关注服务号 {{ funnelData.openCard | formatThousand }} 人</div>
<div class="bg-f5f7fa h-16"></div>
<div class="space-line h-22 p-l-90 font-12 color-606066">访问活动着陆页</div>
<div class="space-line h-22 p-l-90 font-12 color-606066">访问活动着陆页 {{ funnelData.openCard | formatThousand }} 人</div>
<div class="bg-f5f7fa h-18"></div>
<div class="space-line h-26 p-l-80 font-12 color-606066">认证开卡</div>
<div class="space-line h-26 p-l-80 font-12 color-606066">认证开卡 {{ funnelData.openCard | formatThousand }} 人</div>
<div class="bg-f5f7fa h-22"></div>
<div class="space-line h-29 p-l-72 font-12 color-606066">参与游戏</div>
<div class="space-line h-29 p-l-72 font-12 color-606066">参与游戏 {{ funnelData.openCard | formatThousand }} 人</div>
<div class="bg-f5f7fa h-23"></div>
<div class="space-line h-32 p-l-60 font-12 color-606066">领取卡券</div>
<div class="space-line h-32 p-l-60 font-12 color-606066">领取卡券 {{ funnelData.openCard | formatThousand }} 人</div>
<div class="bg-f5f7fa h-25"></div>
<div class="space-line h-38 p-l-45 font-12 color-606066">消费</div>
<div class="space-line h-38 p-l-45 font-12 color-606066">消费 {{ funnelData.orderCount | formatThousand }} 人， {{ funnelData.orderAmount | formatThousand }} 元</div>
</div>
</div>
</div>
......@@ -53,6 +52,14 @@ import funnelChart from '@/components/active/funnel-chart.vue';
<script>
export default {
name: 'funnel-chart',
props: {
funnelData: {
type: [Object, Array],
default() {
return {};
}
}
},
data() {
return {};
}
......
src/components/active/game-select.vue 0 → 100644
<!--
<game-select
v-mode="">
</game-select>
import gameSelect from '@/components/active/game-select.vue'
-->
<template>
<div>
<el-cascader
v-model="caseValue"
:options="options"
:props="props"
@change="handleChange"
@expand-change="expandChange"
></el-cascader>
</div>
</template>
<script>
import { getDocGroup, getDocListGroup } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'game-select',
props: {
value: {
type: [String, Array, Object],
default() {
return [];
}
}
},
data() {
return {
caseValue: [], // 选择值
options: [],
props: {
label: 'label',
children: 'children',
value: 'id'
}
};
},
methods: {
/**
* 选择
*/
handleChange(value) {
const that = this;
that.$emit('input', value);
},
/**
*
*/
expandChange(val) {
const that = this;
that.getContent(val[0]);
},
/**
* 获取游戏一级类型
*/
getContentGroup() {
const that = this;
let para = {
// pageSize: that.pageSize
};
getDocGroup(para)
.then(res => {
let resData = res;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.id = ele.groupId;
ele.label = ele.groupName;
ele.children = [];
});
}
that.options = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取二级内容
*/
getContent(groupId) {
const that = this;
let para = {
groupId: groupId
};
getDocListGroup(para)
.then(res => {
let resData = res;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.id = ele.articleId;
ele.label = ele.title;
});
}
that.options.forEach(ele => {
if (ele.id == groupId) {
ele.children = resData.result;
}
});
that.$forceUpdate();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {
value(newData, oldData) {
const that = this;
that.caseValue = newData;
that.getContentGroup();
setTimeout(() => {
if (newData.length) {
that.getContent(newData[0]);
}
}, 500);
}
},
/* 接收数据 */
mounted() {
const that = this;
that.caseValue = that.value;
that.getContentGroup();
setTimeout(() => {
if (that.value.length) {
that.getContent(that.value[0]);
}
}, 500);
}
};
</script>
<style lang="less">
.el-cascader-menu {
overflow-x: hidden;
}
.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
src/components/active/in-progress-active.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-13 16:37:02
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 09:57:07
* @LastEditTime: 2019-11-21 12:42:40
-->
<!--
<in-progress-active></in-progress-active>
......@@ -16,20 +16,41 @@ import inProgressActive from '@/components/active/in-progress-active.vue';
<div class="in-progress-active border-box">
<ul>
<template v-for="(item, index) in inProgressData">
<li :class="['border-box', selectItem == item.id && index != 0 ? 'li-border' : '']" @click.stop="selectLi(item)" :key="index + 'data'">
<div class="in-progress-active-title flex flex-space-between border-box">
<li
:class="['border-box', selectItem == item.acitivityId && index != 0 ? 'li-border' : '']"
:key="index + 'data'"
>
<div
class="in-progress-active-title flex flex-space-between border-box"
@click.stop="selectLi(item)"
>
<div class="active-title-left">
<div class="active-title-name font-18 color-303133">活动名称活动名称活动名称活动名称活动名称活动名称</div>
<div class="active-title-date font-14 color-909399 m-t-7">2019.10.01 12:00 - 2019.10.02 12:00</div>
<div class="active-title-name font-18 color-303133">{{ item.acitivityName }}</div>
<div class="active-title-date font-14 color-909399 m-t-7">{{ item.startDate | formatTimeYmdHms }} - {{ item.endDate | formatTimeYmdHms }}</div>
</div>
<div class="active-title-right">
<el-button type="primary" plain>活动配置</el-button>
<el-button type="primary" plain @click="handleCopy(index, item)">复制路径</el-button>
<el-button type="primary" plain>数据明细</el-button>
<el-button
type="primary"
plain
@click="toEdit(index, item)"
>活动配置</el-button>
<el-button
type="primary"
plain
@click="handleCopy(index, item)"
>复制路径</el-button>
<el-button
type="primary"
plain
@click="toDataList(index, item)"
>数据明细</el-button>
</div>
</div>
<div class="in-progress-active-body">
<out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
<out-date-active
:barChartData="barChartData"
:funnelData="funnelData"
></out-date-active>
</div>
</li>
</template>
......@@ -49,7 +70,7 @@ export default {
},
data() {
return {
funnelData: [],
funnelData: {},
barChartData: {
columns: ['日期', '新增参与人数', '新增受邀人数', '传播系数'],
rows: [{ 日期: '1', 新增参与人数: 1393, 新增受邀人数: 1093, 传播系数: 0.32 }, { 日期: '2', 新增参与人数: 3530, 新增受邀人数: 3230, 传播系数: 0.26 }, { 日期: '3', 新增参与人数: 2923, 新增受邀人数: 2623, 传播系数: 0.76 }, { 日期: '4', 新增参与人数: 1723, 新增受邀人数: 1423, 传播系数: 0.49 }, { 日期: '5', 新增参与人数: 3192, 新增受邀人数: 3192, 传播系数: 0.323 }, { 日期: '6', 新增参与人数: 3593, 新增受邀人数: 3293, 传播系数: 0.78 }]
......@@ -57,7 +78,11 @@ export default {
selectItem: '',
inProgressData: [
{
id: 1
acitivityId: 1,
acitivityName: '',
startDate: '',
endDate: '',
acitivityUrl: ''
}
]
};
......@@ -68,7 +93,48 @@ export default {
*/
selectLi(item) {
const that = this;
that.selectItem = item.id;
that.selectItem = item.acitivityId;
that.getActivityData(item.acitivityId);
},
/**
* 获取单个活动数据信息
* /sharing-core-web/get-activity-data-summary
*/
getActivityData(acitivityId) {
const that = this;
let para = {
acitivityId: acitivityId
};
getRequest('/sharing-core-web/get-activity-data-summary', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.funnelData = resData.result || {};
that.barChartData = resData.result.trend || {};
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 活动配置
*/
toEdit(index, row) {
const that = this;
that.$router.push(`/createActive?activityId={row.activityId}`)
},
/**
* 数据明细
*/
toDataList(index, row) {
const that = this;
that.$router.push(`/dataDetail?activityId={row.activityId}`)
},
/**
* 复制路径
......@@ -76,7 +142,7 @@ export default {
handleCopy(index, row) {
let clipboard = new Clipboard('.copy-tag', {
text: function() {
return `${window.location.origin}/?articleId=${row.articleId}`;
return `${row.acitivityUrl}`;
}
});
clipboard.on('success', e => {
......@@ -102,8 +168,17 @@ export default {
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.inProgressData = resData.result.result || [];
that.totalCount = resData.result.totalCount;
const nowDate = new Date().getTime();
let arr = [];
if (resData.result.result && resData.result.result.length) {
resData.result.result.forEach(ele => {
if (ele.endDate > nowDate) {
arr.push(ele);
}
});
}
that.inProgressData = arr || [];
that.getActivityData(arr[0].acitivityId);
return false;
}
errMsg.errorMsg(resData);
......
src/components/active/out-date-active.vue
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-11-15 10:10:08
* @LastEditors: 无尘
* @LastEditTime: 2019-11-15 11:46:16
* @LastEditTime: 2019-11-21 10:46:33
-->
<!--
<out-date-active :barChartData="barChartData" :funnelData="funnelData"></out-date-active>
......@@ -13,7 +13,10 @@ import outDateActive from '@/components/active/out-date-active.vue';
-->
<template>
<div class="out-date-active flex flex-space-between">
<data-statistics-child :barChartData="barChartData"></data-statistics-child>
<data-statistics-child
:activeData="activeData"
:barChartData="barChartData"
></data-statistics-child>
<funnel-chart :funnelData="funnelData"></funnel-chart>
</div>
</template>
......@@ -26,13 +29,13 @@ export default {
barChartData: {
type: [Array, Object],
default() {
return {}
return {};
}
},
funnelData: {
type: [Array, Object],
default() {
return {}
return {};
}
}
},
......@@ -42,12 +45,31 @@ export default {
},
data() {
return {
activeData: {
exposure: 0,
attend: 0,
invited: 0,
attendRate: 0,
spread: 0
}
};
},
methods: {},
watch: {
funnelData(newData, oldData) {
if (Object.keys(newData).length) {
this.activeData= newData;
}
}
},
methods: {
mounted() {
const that = this;
if (Object.keys(that.funnelData).length) {
that.activeData = that.funnelData;
}
},
}
};
</script>
<style lang="less" scoped>
.out-date-active {
......
src/components/post-upload.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-11-20 13:44:22
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 16:25:45
-->
<!--
单个上传组件
<post-upload
:uploadLimit="uploadLimit"
:limitFlag="limitFlag"
:width="width"
:height="height"
v-model="imgsrc">
</post-upload>
import postUpload from '@/components/post-upload.vue';
-->
<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>
<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">如果设计师还没有设计好图片，可以先跳过该步骤，先保存活动配置。</p>
<!-- 图片预览 -->
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
</div>
</template>
<script>
import vueGicImgPreview from '@/components/vue-gic-img-preview.vue';
import errMsg from '@/common/js/error';
export default {
name: 'single-upload',
components: {
vueGicImgPreview
},
props: {
value: {
// 传入 input value
type: String,
default: ''
},
uploadLimit: {
type: Number,
default: 1
},
limitFlag: {
type: [Number, String],
default: 1 // 1: 根据大于宽高，2：根据固定宽高
},
width: {
type: Number,
default: 300
},
height: {
type: Number,
default: 300
}
},
data() {
return {
projectName: '', // 当前项目名
imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
imgUrl: '' // 传递的图片 src
};
},
beforeMount() {
const that = this;
let host = window.location.origin;
if (host.indexOf('localhost') != -1) {
that.baseUrl = 'http://www.gicdev.com';
} else {
that.baseUrl = host;
}
// that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
},
methods: {
/**
* 上传图片
*/
uploadUrl() {
const that = this;
let host = window.location.origin;
let baseUrl;
if (host.indexOf('localhost') != '-1') {
baseUrl = 'http://www.gicdev.com';
} else {
baseUrl = host;
}
that.upUrl = `${baseUrl}/api-plug/upload-img?wxFlag=1&requestProject=share`;
return that.upUrl;
},
/**
* 上传图片
*/
handleAvatarSuccess(res, file, type) {
const that = this;
if (res.errorCode == 1) {
that.$emit('input', res.result[0].qcloudImageUrl);
} else {
errMsg.errorMsg(res);
}
},
beforeAvatarUpload(file) {
const that = this;
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg';
const isLt2M = file.size / 1024 / 1024 < that.uploadLimit;
if (!isJPG) {
that.$message.error('上传图片只能是 JPG 格式!');
}
if (!isLt2M) {
that.$message.error(`上传图片大小不能超过 ${that.uploadLimit}MB!`);
}
return (
isJPG &&
isLt2M &&
new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.onload = function(event) {
let image = new Image();
image.onload = function() {
/* eslint-disable */
let width = this.width;
let height = this.height;
if (that.limitFlag == 2 && (width !== that.width || height !== that.height)) {
that.$message.error('图片尺寸必须为750*1300px!');
reject();
}
if (that.limitFlag == 1 && (width < that.width || height < that.height)) {
that.$message.error('图片尺寸必须为750*1300px!');
reject();
}
resolve();
};
image.src = event.target.result;
// that.$emit('update:value',event.target.result)
};
reader.readAsDataURL(file);
})
);
},
/**
* 上传图片预览
*/
showImage(src) {
const that = this;
if (!src || src == '') {
return false;
}
that.imgShowFlag = true;
that.imgUrl = src;
},
hideImage(val) {
const that = this;
that.imgShowFlag = val;
}
}
// mounted() {}
};
</script>
<style lang="less" scoped>
.w-500 {
width: 500px;
}
.avatar-uploader {
/deep/ .el-upload {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 80px;
height: 80px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background: rgba(245, 247, 250, 1);
}
.avatar {
max-width: 80px;
max-height: 80px;
display: block;
}
.upload-tip {
margin-top: 8px;
color: #909399;
font-size: 12px;
line-height: 20px;
}
.color-1890ff {
color: #1890ff;
}
</style>
src/components/vue-gic-img-preview.vue
......@@ -55,16 +55,17 @@ export default {
},
},
mounted() {
const that = this
that.imgSrc = this.imgUrl;
this.showFlag = that.imgShowFlag;
const that = this;
that.imgSrc = that.imgUrl;
that.showFlag = that.imgShowFlag;
// 监听点击隐藏弹层
document.addEventListener('mousedown', that.hidePanel, false)
},
beforeDestroy() {
// 监听点击隐藏弹层
document.removeEventListener('mousedown')
const that = this;
document.removeEventListener('mousedown', that.hidePanel, false)
},
}
</script>
......
src/filters/index.js
......@@ -100,7 +100,9 @@ const timeStampToHms = function(data) {
};
const formatThousand = function(num) {
console.log(num);
if (!num) {
return 0;
}
const reg = /\d{1,3}(?=(\d{3})+$)/g;
return (num + '').replace(reg, '$&,');
};
......
src/view/shareIndex/index.vue
......@@ -4,20 +4,24 @@
* @Author: 无尘
* @Date: 2019-11-12 10:59:45
* @LastEditors: 无尘
* @LastEditTime: 2019-11-20 13:47:02
* @LastEditTime: 2019-11-21 10:47:35
-->
<template>
<div class="share-index common-wrap">
<div class="right-content border-box">
<div class="separator-space no-active">
- 当前无进行中的活动，请创建活动，别让业绩白白流失！-
<div v-if="canCreate">
<div class="separator-space no-active">
- 当前无进行中的活动，请创建活动，别让业绩白白流失！-
</div>
<active-select></active-select>
</div>
<div>
<!-- v-if="!canCreate" -->
<div class="separator-space">- 当前有正在进行的活动，无法创建新的活动 -</div>
<in-progress-active></in-progress-active>
<div class="separator-space">- 以下为已结束活动 -</div>
<finished-active></finished-active>
</div>
<active-select></active-select>
<div class="separator-space">- 当前有正在进行的活动，无法创建新的活动 -</div>
<in-progress-active></in-progress-active>
<div class="separator-space">- 以下为已结束活动 -</div>
<finished-active></finished-active>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
......@@ -26,6 +30,9 @@
import activeSelect from '@/components/active/active-select.vue';
import inProgressActive from '@/components/active/in-progress-active.vue';
import finishedActive from '@/components/active/finished-active.vue';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
name: 'share-index',
components: {
......@@ -34,9 +41,38 @@ export default {
finishedActive
},
data() {
return {};
return {
canCreate: true
};
},
methods: {
/**
* 是否可以创建活动
*/
judgeCreate() {
const that = this;
let para = {};
getRequest('/sharing-core-web/can-create', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.canCreate = resData.result;
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
methods: {}
mounted() {
const that = this;
that.judgeCreate();
}
};
</script>
<style lang="less" scoped>
......
static/css/public.css
......@@ -614,6 +614,13 @@ strong {
align-items: center;
}
.flex-align-end {
-webkit-box-align: flex-end;
-webkit-align-items: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
......@@ -621,6 +628,13 @@ strong {
justify-content: center;
}
.flex-pack-end {
-webkit-box-pack: flex-end;
-webkit-justify-content: flex-end;
-ms-flex-pack: flex-end;
justify-content: flex-end;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
......
static/img/default.jpg
static/img/default.jpg

6.31 KB | W: | H:

static/img/default.jpg

31.6 KB | W: | H:

static/img/default.jpg
static/img/default.jpg
static/img/default.jpg
static/img/default.jpg
  • 2-up
  • Swipe
  • Onion skin
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