Skip to content

M
marketing
Commit 21aa79a9 by crushh
Options

update: dist

parent d31c6892
Showing with 247 additions and 48 deletions
src/assets/style/base/reset.scss
......@@ -256,6 +256,9 @@ a:hover {
.w250{
width: 250px!important;
}
.w256{
width: 256px!important;
}
.w260{
width: 260px!important;
}
......
src/main.js
......@@ -6,6 +6,7 @@ import { axios } from './service/api/index';
import directives from './directives';
import limit from '@/utils/limiting';
import scrollToError from '@/assets/common.js';
Vue.config.productionTip = false;
if (process.env.NODE_ENV == 'development') { // eslint-disable-line
......@@ -17,6 +18,7 @@ Vue.prototype.scrollToError = scrollToError;
Vue.prototype.axios = axios;
Vue.prototype.axios.withCredentials = true;
Vue.prototype.axios.defaults.timeout = 50000;
Object.keys(directives).map(item => Vue.directive(item, directives[item]));
window.$bus = new Vue();
let flag = false;
......
src/router/index.js
......@@ -47,15 +47,6 @@ router.beforeEach((to, from, next) => {
.catch(() => {
next();
});
// document.title = to.name;
// if (to.path != '/limit' && store.state.marketing.isLimit) {
// next({ path: '/limit' });
// } else if (to.path == '/limit' && !store.state.marketing.isLimit) {
// next({ path: '/' });
// } else {
// next();
// }
});
export default router;
src/router/modules/game.js
......@@ -248,6 +248,22 @@ export default {
meta: {
type: 'info'
}
},
{
path: 'cmh/copy/:id',
name: '复制拆盲盒',
component: () => import(/* webpackChunkName: "game" */ '../../views/game/cmh/form.vue'),
meta: {
type: 'copy'
}
},
{
path: 'cmh/statistics/:id',
name: '拆盲盒数据统计',
component: () => import(/* webpackChunkName: "game" */ '../../views/game/cmh/form.vue'),
meta: {
type: 'statistics'
}
}
]
};
src/views/game/cmh/form.vue
<template>
<swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
// Import Swiper styles
// import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';
export default {
components: {
Swiper,
SwiperSlide
},
setup() {
const onSwiper = swiper => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
return {
onSwiper,
onSlideChange
};
}
};
</script>
src/views/game/cmh/index.vue
<template>
<section class="dm-wrap" v-loading="loading">
<div class="gameIntro"></div>
<div class="game" v-if="notShrink">
<div class="game-content">
<div class="gameDemo">
<div class="title">游戏演示</div>
<el-image lazy style="width: 180px;height:312px;cursor: pointer;" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png" @click.native="onView()"> </el-image>
</div>
<div class="gameIntro">
<div class="title">游戏介绍</div>
<div class="content">
<div class="mini-title">玩法介绍</div>
<div class="text">
<p><span class="dm-status--normal"></span>商户设定盲盒礼品与数量，支持换肤，适应不同营销场景</p>
<p><span class="dm-status--normal"></span>用户可免费/消耗积分/好友助力拆盲盒，刺激用户分享，实现活动传播与拉新裂变</p>
<p><span class="dm-status--normal"></span>盲盒拆开后即可获得奖品</p>
</div>
</div>
<div class="content">
<div class="mini-title">流程配置</div>
<div class="text">
<p><span class="dm-status--normal"></span>配置游戏基础内容——如游戏背景、盲盒样式、背景音乐等</p>
<p><span class="dm-status--normal"></span>配置游戏奖项——设定盲盒奖品、库存、中奖率等</p>
<p><span class="dm-status--normal"></span>配置游戏规则——配置游戏玩法、参与门槛与条件等</p>
<el-button type="text" class="fz12" style="margin-left:13px">查看详细配置说明</el-button>
</div>
</div>
</div>
</div>
<el-button type="text" @click="shrink" style="width:100%">收起 <i class="iconfont-components3 icon-cp-shangjiantou" style="font-size:12px"/></el-button>
</div>
<dm-sub-title v-else>
<div class="gameName">
幸运盲盒
<img style="width: 240px;height: 50px;" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/banner_web.png" />
</div>
</dm-sub-title>
<div class="pt20 clearfix">
<el-date-picker class="w256" v-model="dateTime" type="daterange" start-placeholder="开始日期" range-separator="~" end-placeholder="结束日期" @change="refresh"></el-date-picker>
<el-input v-model="listParams.gameName" class="w260" placeholder="输入游戏名称" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-select class="w160" v-model="listParams.status" placeholder="所有游戏状态" @change="refresh">
<el-option v-for="(v, i) in gameStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-checkbox class="vertical-middle ml0" v-if="$store.state.marketing.isShowSelf" v-model="listParams.createMe" :true-label="1" :false-label="0" label="仅看本人" border @change="refresh" />
<el-button class="fr" type="primary" @click="$router.push('/game/cmh/add')">新建游戏</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width:100%">
<el-table-column label="游戏名称" min-width="130px" prop="gameName" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="游戏时间" min-width="90px">
<template slot-scope="{ row }"> {{ row.startDate }} - {{ row.endDate }} </template>
</el-table-column>
<el-table-column label="游戏玩法" min-width="190px" prop="mainStoreName" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="浏览人数" min-width="190px" prop="visitorNum" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="参与人数" min-width="190px" prop="playNum" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="中奖人数" min-width="190px" prop="winNum" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="游戏状态" min-width="190px" prop="status">
<template slot-scope="{ row }">
{{ gameStatus[row.status] }}
</template>
</el-table-column>
<el-table-column label="创建人" min-width="190px" prop="creatorName"></el-table-column>
<el-table-column label="创建时间" min-width="190px" prop="createTime" :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="操作" align="left" width="220px" fixed="right">
<template slot-scope="{ row }">
<dm-dropdown ref="drop" :scope-data="row" :configs="btnArr" @command="onCommand" />
</template>
</el-table-column>
</el-table>
</section>
</template>
<script>
import { api as viewerApi } from 'v-viewer';
import img from '../../../components/upload/img.vue';
export default {
components: { img },
data() {
return {
loading: false
listParams: {
gameName: '',
status: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20
},
tableList: [],
gameStatusOptions: [
{
label: '未开始',
value: 0
},
{
label: '进行中',
value: 1
},
{
label: '已结束',
value: 2
},
{
label: '已终止',
value: 3
}
],
gameStatus: {
0: '未开始',
1: '进行中',
2: '已结束',
3: '已终止'
},
dateTime: [],
loading: false,
notShrink: true,
btnArr: [
{
text: '查看',
props: {
limitCode: this.$buttonCode.marketingCmhInfo
},
visible: row => {
return this.$getButtonLimit(this.$buttonCode.marketingCmhInfo);
},
handler: row => this.$router.push('/cmh/info/' + row.gameId)
},
{
text: '编辑',
props: {
limitCode: this.$buttonCode.marketingCmhEdit
},
visible: row => {
return (row.status === 1 || row.status === 0) && this.$getButtonLimit(this.$buttonCode.marketingCmhEdit);
},
handler: row => this.editPlan(row)
},
{
text: '复制',
props: {
limitCode: this.$buttonCode.marketingCmhCopy
},
visible: row => {
return this.$getButtonLimit(this.$buttonCode.marketingCmhCopy);
},
handler: row => this.$router.push('/cmh/copy/' + row.gameId)
},
{
text: '链接',
props: {
limitCode: this.$buttonCode.marketingCmhUrl
},
visible: row => {
return (row.status === 1 || row.status === 0) && this.$getButtonLimit(this.$buttonCode.marketingCmhUrl);
},
handler: row => this.showUrl(row)
},
{
text: '终止',
props: {
limitCode: this.$buttonCode.marketingCmhStop
},
visible: row => {
return row.status === 1 && this.$getButtonLimit(this.$buttonCode.marketingCmhStop);
},
handler: row => this.stopPlan(row)
},
{
text: '数据',
props: {
limitCode: this.$buttonCode.marketingCmhStatistics
},
visible: row => {
return (row.status === 1 || row.status === 2 || row.status === 3) && this.$getButtonLimit(this.$buttonCode.marketingCmhStatistics);
},
handler: row => this.$router.push('/cmh/statistics/' + row.gameId)
}
]
};
},
methods: {
onView() {
let qrImg = 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/bill_pic.png';
viewerApi({
images: [qrImg],
options: {
initialViewIndex: 2
}
});
},
shrink() {
this.notShrink = false;
}
}
};
</script>
<style></style>
<style lang="scss" scoped>
p {
margin: 0;
}
.game {
width: 100%;
padding: 16px 20px;
box-sizing: border-box;
background: #f7f8fa;
}
.game-content {
display: flex;
justify-content: flex-start;
.title {
color: #303133;
font-weight: 500;
font-size: 14px;
margin-bottom: 16px;
}
.mini-title {
font-size: 12px;
}
.gameIntro {
margin-left: 90px;
.content {
display: flex;
margin-bottom: 30px;
.text {
margin-left: 58px;
p {
font-size: 12px;
margin-bottom: 10px;
}
}
}
}
}
.gameName {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
</style>
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