Skip to content

M
marketing-opeartion
Commit 9e0d9cc1 by crushh
Options

update: dist

parent 4f36424a
Showing with 322 additions and 13 deletions
src/api/operation.js
......@@ -64,7 +64,15 @@ let authApi = {
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');
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 = [
path: 'holiday-manage',
name: '营销节日管理',
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 @@
.mr20 {
margin-right: 20px;
}
.ml18{
margin-left: 18px;
}
.ml20 {
margin-left: 20px;
}
......@@ -35,7 +38,19 @@
.mb20 {
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 {
display: inline-block;
width: 6px;
......
src/views/activity/component/NewActivity.vue
......@@ -214,13 +214,7 @@ export default {
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__increase {
display: none;
......
src/views/activity/component/holiday-dialog.vue
......@@ -79,7 +79,7 @@
<script>
// import calendar from '@/utils/calendar.js';
import fetch from '@/api/operation.js';
const { addHoliday, getHolidayCategoryList,editHoliday } = fetch;
const { addHoliday, getHolidayCategoryList, editHoliday } = fetch;
export default {
name: 'HolidayDialog',
props: {
......@@ -309,7 +309,7 @@ export default {
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.onClose();
this.$emit('change', params);
......
src/views/activity/holiday-manage.vue
......@@ -49,7 +49,7 @@
import fetch from '@/api/operation.js';
import util from '@/filters/index.js';
const { formatDate2 } = util;
const { getPageHolidays, delHoliday, getHolidayCategoryList,getHolidayDetail } = fetch;
const { getPageHolidays, delHoliday, getHolidayCategoryList, getHolidayDetail } = fetch;
import holidayCategoryDialog from './component/holiday-category-dialog.vue';
import holidayDialog from './component/holiday-dialog.vue';
......@@ -124,7 +124,6 @@ export default {
let detail = await getHolidayDetail({
holidaysId: item.holidaysId || ''
});
console.log("detail----->",detail.result);
this.holidayDialogVisible = true;
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-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