Skip to content

M
marketing-opeartion
Commit 9e0d9cc1 by crushh
Options

update: dist

parent 4f36424a
Showing with 628 additions and 13 deletions
src/api/operation.js
...@@ -64,7 +64,15 @@ let authApi = { ...@@ -64,7 +64,15 @@ let authApi = {
getLoginOut: '/logout', getLoginOut: '/logout',
}; };
let gameApi = {
/** 获取全部渠道 */
getGameTemplateConfig: '/game-config/get-game-template-config',
getGameTemplat: '/game-config/get-template',
updateTemplateStatus: '/game-config/update-template-status'
};
gameApi = getFetch(gameApi, '/marketing-operation');
marketingApi = getFetch(marketingApi, '/marketing-operation'); marketingApi = getFetch(marketingApi, '/marketing-operation');
authApi = getFetch(authApi, '/gic-authcenter'); authApi = getFetch(authApi, '/gic-authcenter');
export default { ...marketingApi, ...authApi }; export default { ...marketingApi, ...authApi, ...gameApi };
src/router/routes.js
...@@ -44,6 +44,24 @@ export const routes = [ ...@@ -44,6 +44,24 @@ export const routes = [
path: 'holiday-manage', path: 'holiday-manage',
name: '营销节日管理', name: '营销节日管理',
component: _import('activity', 'holiday-manage') component: _import('activity', 'holiday-manage')
},
{
path: 'template-config',
name: '游戏模板管理',
component: _import('activity', 'template-config'),
children: [
]
},
{
path: 'template-list',
name: '模板列表',
component: _import('activity', 'template-list')
},
{
path: 'template-detail/:id',
name: '新建游戏模板',
component: _import('activity', 'template-detail')
} }
] ]
} }
......
src/styles/component.less
...@@ -26,6 +26,9 @@ ...@@ -26,6 +26,9 @@
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.ml18{
margin-left: 18px;
}
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
...@@ -35,7 +38,19 @@ ...@@ -35,7 +38,19 @@
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.w340{
width: 340px;
}
.w140{
width: 140px;
}
.image-tip {
margin: 6px 0 14px;
font-size: 12px;
color: #909399;
line-height: 17px;
cursor: default;
}
[class^="dm-status--"]::before { [class^="dm-status--"]::before {
display: inline-block; display: inline-block;
width: 6px; width: 6px;
......
src/views/activity/component/NewActivity.vue
...@@ -214,13 +214,7 @@ export default { ...@@ -214,13 +214,7 @@ export default {
color: #303133; color: #303133;
} }
} }
.image-tip {
margin: 6px 0 14px;
font-size: 12px;
color: #909399;
line-height: 17px;
cursor: default;
}
/deep/.el-input-number.is-controls-right:hover .el-input-number__decrease, /deep/.el-input-number.is-controls-right:hover .el-input-number__decrease,
/deep/.el-input-number.is-controls-right:hover .el-input-number__increase { /deep/.el-input-number.is-controls-right:hover .el-input-number__increase {
display: none; display: none;
......
src/views/activity/component/holiday-dialog.vue
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<script> <script>
// import calendar from '@/utils/calendar.js'; // import calendar from '@/utils/calendar.js';
import fetch from '@/api/operation.js'; import fetch from '@/api/operation.js';
const { addHoliday, getHolidayCategoryList,editHoliday } = fetch; const { addHoliday, getHolidayCategoryList, editHoliday } = fetch;
export default { export default {
name: 'HolidayDialog', name: 'HolidayDialog',
props: { props: {
...@@ -309,7 +309,7 @@ export default { ...@@ -309,7 +309,7 @@ export default {
params.holidaysDate = date.getMonth() + 1 + '-' + date.getDate(); params.holidaysDate = date.getMonth() + 1 + '-' + date.getDate();
} }
(this.isEdit?editHoliday:addHoliday)(params).then(() => { (this.isEdit ? editHoliday : addHoliday)(params).then(() => {
this.$message.success(this.isEdit ? '保存成功' : '添加成功'); this.$message.success(this.isEdit ? '保存成功' : '添加成功');
this.onClose(); this.onClose();
this.$emit('change', params); this.$emit('change', params);
......
src/views/activity/holiday-manage.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
import fetch from '@/api/operation.js'; import fetch from '@/api/operation.js';
import util from '@/filters/index.js'; import util from '@/filters/index.js';
const { formatDate2 } = util; const { formatDate2 } = util;
const { getPageHolidays, delHoliday, getHolidayCategoryList,getHolidayDetail } = fetch; const { getPageHolidays, delHoliday, getHolidayCategoryList, getHolidayDetail } = fetch;
import holidayCategoryDialog from './component/holiday-category-dialog.vue'; import holidayCategoryDialog from './component/holiday-category-dialog.vue';
import holidayDialog from './component/holiday-dialog.vue'; import holidayDialog from './component/holiday-dialog.vue';
...@@ -124,7 +124,6 @@ export default { ...@@ -124,7 +124,6 @@ export default {
let detail = await getHolidayDetail({ let detail = await getHolidayDetail({
holidaysId: item.holidaysId || '' holidaysId: item.holidaysId || ''
}); });
console.log("detail----->",detail.result);
this.holidayDialogVisible = true; this.holidayDialogVisible = true;
this.editItem = detail.result; this.editItem = detail.result;
}, },
......
src/views/activity/template-config.vue 0 → 100644
<template>
<div class="templateList">
<div class="card" v-for="item in list" :key="item.templateType">
<div class="template-head">
<img src="https://pic01-10001430.image.myqcloud.com/4fa9caf2-d494-407e-bbed-f0198cb14695" />
<div class="template-name">{{ typeMap[item.templateType] }}</div>
</div>
<div class="template-content">
<p>已配置模板/总量</p>
<span>{{ item.configNum }}<span class="line">/</span>20</span>
</div>
<div class="progress">
<el-progress :percentage="(item.configNum/20)*100" :show-text="false"></el-progress>
</div>
<div class="btn">
<el-button v-if="item.configNum > 0" @click="$router.push(`/activity/template-list?type=${item.templateType}`)">模板列表</el-button>
<el-button v-else @click="$router.push(`/activity/template-detail?type=${item.templateType}`)">前往配置</el-button>
</div>
</div>
</div>
</template>
<script>
import fetch from '@/api/operation.js';
console.log(fetch);
export default {
data() {
return {
list: [
{
templateType: 1,
configNum: 18
},
{
templateType: 2,
configNum: 18
},
{
templateType: 3,
configNum: 0
},
{
templateType: 4,
configNum: 18
},
{
templateType: 5,
configNum: 18
},
{
templateType: 6,
configNum: 18
},
{
templateType: 7,
configNum: 18
}
],
typeMap: {
1: '盲盒1',
2: '盲盒2',
3: '盲盒3',
4: '盲盒4',
5: '盲盒5',
6: '盲盒6',
7: '盲盒7'
}
};
},
mounted() {
this.getList();
},
methods: {
getList() {
fetch.getGameTemplateConfig().then((res) => {
console.log(res);
});
}
}
};
</script>
<style lang="scss" scoped>
.templateList {
padding: 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
box-sizing: border-box;
}
.card {
width: 285px;
height: 230px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e4e7ed;
padding: 17px 21px;
&:hover{
box-shadow: 0px 4px 12px 0px rgba(220, 223, 230, 0.6);
transition: transform 0.5s;
transform: translateY(-5px);
}
.template-head {
img {
width: 32px;
height: 32px;
margin-bottom: 8px;
}
.template-name {
font-size: 16px;
font-weight: 500;
color: #303133;
line-height: 22px;
}
}
.template-content {
margin-top: 16px;
p {
font-size: 14px;
font-weight: 400;
color: #909399;
line-height: 20px;
margin-bottom: 4px;
}
span {
font-size: 20px;
font-weight: 500;
color: #303133;
line-height: 28px;
}
.line{
margin:0 4px;
}
}
.progress {
margin: 12px 0 16px 0;
}
}
</style>
\ No newline at end of file
src/views/activity/template-detail.vue 0 → 100644
<template>
<div style="padding: 20px">
<el-form :rules="rules" size="small" :model="form" ref="form" label-width="110px">
<dm-sub-title type="fill">基础信息</dm-sub-title>
<div class="section">
<el-form-item label="模板名称" prop="templateName">
<el-input class="w340" show-word-limit placeholder="请输入模板名称" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="游戏首页背景" prop="backImageUrl">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess"
@deleteImage="deleteImage"
preview-append-to-body>
</vue-gic-upload-image>
<p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p>
</el-form-item>
<el-form-item label="游戏规则背景" prop="">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess"
@deleteImage="deleteImage"
preview-append-to-body>
</vue-gic-upload-image>
<p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p>
</el-form-item>
<el-form-item label="游戏背景音乐" prop="backMusicUrl">
<el-checkbox-group v-model="musicSelectValue" @change="val => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer">
<el-checkbox v-for="row in musicList" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox>
</el-checkbox-group>
<el-upload
:action="actionUrl"
:on-remove="handleRemove"
multiple
:limit="3"
:before-upload="file=>beforeUpload(file,'music')"
:on-exceed="handleExceed"
:file-list="defineMusicList">
<el-button size="small">自定义上传</el-button>
</el-upload>
</el-form-item>
</div>
<dm-sub-title type="fill">游戏首页奖品样式</dm-sub-title>
<div class="section">
<el-form-item label="奖项展示个数" required>
<el-input class="w340" placeholder="请输入展示数量" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="奖项图片尺寸" required>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10 mr10">*</span>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10">px</span>
</el-form-item>
<el-form-item label="奖项更换方式" required>
<el-radio-group>
<el-radio label="统一更换"></el-radio>
<el-radio label="逐个更换"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="奖项图片" required>
<div class="flex">
<div class="flex-column" v-for="item in prizeConfigList" :key="item.prop">
<span class="mb8">{{item.label}}</span>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="file=>beforeUpload(file,item.prop)" @uploadOnSuccess="data=>uploadOnSuccess(data,item.prop)"
@deleteImage="deleteImage(item.prop)"
preview-append-to-body>
</vue-gic-upload-image>
</div>
</div>
<p>图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
</el-form-item>
<el-form-item label="更换奖项样式">
<el-switch v-model="form.filterJson"></el-switch><span class="tips ml18">开启则表示支持用户更换此处模板内默认奖项样式</span>
</el-form-item>
</div>
<dm-sub-title type="fill">首页“参与游戏”按钮图</dm-sub-title>
<div class="section">
<el-form-item label="图片尺寸" required>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10 mr10">*</span>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10">px</span>
</el-form-item>
<el-form-item label="默认图" required>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess"
@deleteImage="deleteImage"
preview-append-to-body>
</vue-gic-upload-image>
<p class="image-tip">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
</el-form-item>
</div>
<dm-sub-title type="fill">首页其它按钮图</dm-sub-title>
<div class="section">
<el-form-item :label="item.label" v-for="item in btnImgList" :rules="item.rule" :key="item.prop">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess"
@deleteImage="deleteImage"
preview-append-to-body>
</vue-gic-upload-image>
<p class="image-tip">{{item.tips}}</p>
</el-form-item>
</div>
<dm-sub-title type="fill">模板奖品数量与奖品默认样式设计</dm-sub-title>
<div class="section">
<el-form-item label="模板奖品数量" required>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10 mr10">*</span>
<el-input class="w140" placeholder="请输入" maxlength="20"></el-input>
<span class="ml10">px</span>
</el-form-item>
<el-form-item label="模板奖品图片" required>
<p class="tips">图片建议尺寸 300*300px，格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
<div class="flex">
<div class="flex-column" v-for="item in prizeImgList" :key="item.prop">
<span class="mb8">{{item.label}}</span>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="file=>beforeUpload(file,item.prop)" @uploadOnSuccess="data=>uploadOnSuccess(data,item.prop)"
@deleteImage="deleteImage(item.prop)"
preview-append-to-body>
</vue-gic-upload-image>
</div>
</div>
</el-form-item>
</div>
<dm-sub-title type="fill">分享样式设计</dm-sub-title>
<div class="section">
<el-form-item :label="item.label" :rules="item.rule" v-for="item in shareImgList" :key="item.prop">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :limit-w="80"
:limit-h="80" accept="image/jpg,image/jpeg,image/png,image/gif"
:before-upload="file=>beforeUpload(file,item.prop)" @uploadOnSuccess="data=>uploadOnSuccess(data,item.prop)"
@deleteImage="deleteImage(item.prop)"
preview-append-to-body>
</vue-gic-upload-image>
<p class="image-tip">{{item.tips}}</p>
</el-form-item>
</div>
<dm-footer >
<el-button type="primary" @click="nextStep()">保存</el-button>
</dm-footer>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
shareImgList: [
{
label: '小程序卡片', prop: 'shareCard', rule: { required: true, message: '请上传', }, tips: '图片建议尺寸 320*240px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
},
{
label: '分享海报', prop: 'shareReport', rule: { required: true, message: '请上传', }, tips: '图片建议尺寸 750*1334px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
},
{
label: '“分享助力”页顶部banner', prop: 3, rule: { required: true, message: '请上传', }, tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
}
],
btnImgList: [
{
label: '我的积分', prop: 4, rule: { required: true, message: '请上传', }, tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。'
},
{
label: '剩余次数', prop: 5, rule: { required: true, message: '请上传', }, tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。'
},
{
label: '邀请次数', prop: 6, rule: { required: true, message: '请上传', }, tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。'
}
],
prizeImgList: [
{
label: '抵金券', prop: 7
},
{
label: '折扣券', prop: 8
},
{
label: '兑换券', prop: 9
},
{
label: '积分', prop: 10
},
{
label: '实物礼品', prop: 11
},
{
label: '虚拟礼品', prop: 12
}
],
prizeConfigList: [
{
label: '未选中', prop: 13
},
{
label: '选中', prop: 14
},
],
defineMusicList: [],
musicSelectValue: [],
musicList: [
{
key: 'a1',
value: '12345643.mp3'
},
{
key: 'a2',
value: '43232.mp3'
},
{
key: 'a3',
value: '12345qwwe643.mp3'
},
{
key: 'a4',
value: '1234asada5643.mp3'
},
{
key: 'a5',
value: '12345643.mp3'
},
{
key: 'a6',
value: '43232.mp3'
},
{
key: 'a7',
value: '12345qwwe643.mp3'
},
{
key: 'a8',
value: '1234asada5643.mp3'
},
],
projectName: 'marketing-operation', // 当前项目名(必传参数)
limitW: 80, // 上传图片的限制宽度(数字),(可选参数),各个调用地方可能不同
limitH: 80, // 上传图片的限制高度(数字),(可选参数),各个调用地方可能不同
actionUrl: '/marketing-operation/upload-img', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址
accept: 'image/jpg,image/jpeg,image/png,image/gif',
imageList: [], // 是否显示已上传文件列表
maxlength: 1, // 图片数量 默认 5
};
},
methods: {
beforeUpload(file, type) {
console.log(file, type);
if (file.size / 1024 > 100) {
this.$message.error('图片不能大于100kb，请重新上传！');
return false;
}
return true;
},
uploadOnSuccess({ res }) {
this.form.activityImage = res.result[ 0 ].qcloudImageUrl || '';
this.imageList = [ { url: res.result[ 0 ].qcloudImageUrl } ];
},
deleteImage() {
this.form.activityImage = '';
this.imageList = [];
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
nextStep(){
console.log('nextStep');
}
}
};
</script>
<style lang="scss" scoped>
.section {
margin: 20px 0 40px 0;
}
.flex{
display: flex;
gap: 20px
}
.flex-column{
display: flex;
flex-direction: column;
}
.checkBoxContainer {
display: flex;
flex-wrap: wrap;
.el-checkbox + .el-checkbox {
margin-left: 0;
}
}
.tips{
font-size: 12px;
color: #909399;
line-height: 17px;
}
</style>
\ No newline at end of file
src/views/activity/template-list.vue 0 → 100644
<template>
<div style="padding: 20px">
<el-row type="flex" justify="space-between">
<el-row type="flex" align="middle" style="margin-right: 10px">
<el-input @change="getList" placeholder="请输入模板名称" prefix-icon="el-icon-search" v-model="searchParams.templateName" clearable style="width: 260px; margin-right: 10px"> </el-input>
<el-select v-model="searchParams.statusFlag" clearable placeholder="模板状态" @change="getList">
<el-option v-for="item in categoryList" :key="item" :label="item" :value="item.activityCategoryId"> </el-option>
</el-select>
</el-row>
<el-row type="flex" align="middle">
<el-button type="primary" @click="addTemplate()">新增模板</el-button>
</el-row>
</el-row>
<el-table row-key="sort" ref="sortTable" row-class-name="table-row" :data="list" style="margin-top: 20px" v-loading="loading">
<el-table-column width="40" label-class-name="tag-head">
<template>
<el-tooltip placement="top" content="拖动排序" trigger="hover" effect="dark" popper-class="drag-tooltip">
<i class="iconfont-components3 icon-cp-tuozhuaipaixu deactive" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="模板名称" min-width="290px" prop="templateName"> </el-table-column>
<el-table-column label="展示数量" min-width="310px" prop="prizeMax"> </el-table-column>
<el-table-column label="模板状态" min-width="306px" prop="statusFlag">
<template slot-scope="{ row }">
<el-switch v-model="row.statusFlag" @change="handleSwitch(row.statusFlag, row.templateId)" :active-value="1" :inactive-value="0"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" min-width="255px">
<template slot-scope="{ row }">
<el-row type="flex">
<el-button type="text" @click="edit(row)">编辑</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs';
import fetch from '@/api/operation.js';
export default {
data() {
return {
searchParams: {
templateName: '',
statusFlag: ''
},
loading: false,
list: [
{
statusFlag: 0,
prizeMax: 9,
templateName: '盲盒11111'
},
{
statusFlag: 1,
prizeMax: 9,
templateName: '盲盒2222'
},
{
statusFlag: 0,
prizeMax: 8,
templateName: '盲盒3333'
}
]
};
},
mounted() {
this.drag();
this.getList();
},
methods: {
getList() {
this.loading = true;
fetch
.getGameTemplateConfig(this.searchParams)
.then((res) => {
console.log(res);
})
.finally((_) => {
this.loading = false;
});
},
addTemplate() {
this.$router.push(`/activity/template-detail/${this.$route.query.type}`);
},
edit(row) {
this.$router.push({ path: `/activity/template-detail/${this.$route.query.type}`, query: { id: row.templateId } });
},
handleSwitch(statusFlag, templateId) {
this.$confirm(`${statusFlag == 0 ? '关闭后，商户在创建此类型游戏时将无法选用此游戏模板，确认关闭' : '开启后，商户将可引用次模板，确认开启'}？`, `${statusFlag == 0 ? '关闭' : '开启'}提示`, {
distinguishCancelAndClose: true,
type: 'warning',
confirmButtonText: `${statusFlag == 0 ? '关闭' : '开启'}`,
cancelButtonText: '取消'
}).then(() => {
fetch.updateTemplateStatus({ statusFlag, templateId }).then((res) => {
this.getList();
});
});
},
// 拖拽
drag() {
let that = this;
const tbody = this.$refs.sortTable.$el.querySelector('.el-table__body tbody');
const sort = Sortable.create(tbody, {
onChoose(e) {
// 针对icon触发事件
const isSortIcon = e.originalEvent.target.classList.contains('icon-cp-tuozhuaipaixu');
sort.option('sort', isSortIcon);
},
onEnd({ newIndex, oldIndex }) {
const currRow = that.list.splice(oldIndex, 1)[0];
that.list.splice(newIndex, 0, currRow);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.table-row:hover {
.deactive {
color: #606266;
display: block;
cursor: grabbing;
}
}
</style>
\ No newline at end of file
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