Skip to content

M
marketing
Commit 469723ba by crushh
Options

update: dist

parent 35e863a9
Showing with 184 additions and 58 deletions
src/assets/style/base/reset.scss
......@@ -192,6 +192,9 @@ a:hover {
.mr10{
margin-right: 10px!important;
}
.mr16{
margin-right: 16px!important;
}
.mr20{
margin-right: 20px!important;
}
......@@ -663,4 +666,16 @@ img::after {
}
}
\ No newline at end of file
.wxapp {
width: 253px;
height: 32px;
background: #f2f3f5;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 11px;
box-sizing: border-box;
display: inline-flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
\ No newline at end of file
src/service/api/gameApi.js
......@@ -164,10 +164,10 @@ export const cmhPage = params => requests(PREFIX + '/game-pro/page', params, tru
export const cmhStatistics = params => requests(PREFIX + '/game-pro/page-statistics', params);
//游戏营销--拆盲盒游戏新建
export const initActivity = params => requests(PREFIX + '/game-pro/init-activity', params);
export const initActivity = params => requests(PREFIX + '/game-pro/init-game', params, true);
//游戏营销--拆盲盒-获取游戏详细信息
export const getGameDetail = params => requests(PREFIX + '/game-pro/getGameDetail', params, true, false, 'get');
export const getGameDetail = params => requests(PREFIX + '/game-pro/get-game-detail', params, true, false, 'get');
//游戏营销--拆盲盒-根据类型获取游戏模板信息
export const getGameTemplateByType = params => requests(PREFIX + '/game-pro/get-game-template-by-type', params, true, false, 'get');
......
src/views/game/cmh/base-config.vue
<template>
<el-form size="small" :model="baseForm" :rules="rules" ref="form" label-width="80px">
<el-form size="small" :model="baseForm" :rules="rules" ref="baseForm" label-width="80px">
<dm-sub-title type="line">基本信息</dm-sub-title>
<div class="mt20">
<el-form-item label="游戏名称" prop="gameName"> <el-input maxlength="10" class="w382" @change="handleNameChange" v-model.trim="baseForm.gameName" show-word-limit :disabled="isDisabled" placeholder="请输入游戏名称" /> </el-form-item>
......@@ -21,7 +21,7 @@
</el-upload>
</div>
<div class="tips">图片建议尺寸{{ baseForm.backImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.backImageUrlSize1 }} 以内。</div>
<div class="tips">图片建议尺寸{{ baseForm.backImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.backImageUrlSize1 }} M以内。</div>
</el-form-item>
<el-form-item label="抽奖样式">
<div class="lottery">
......@@ -63,14 +63,14 @@
<el-button type="text" class="ml16">替换图片</el-button>
</el-upload>
</div>
<div class="tips">图片建议尺寸 {{ baseForm.noticeImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.noticeImageUrlSize1 }}以内。</div>
<div class="tips">图片建议尺寸 {{ baseForm.noticeImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.noticeImageUrlSize1 }}M以内。</div>
</el-form-item>
<el-form-item label="背景音乐">
<el-switch v-model="baseForm.backMusicFlag" :active-value="1" :inactive-value="0" />
<div class="flex mt16" v-show="baseForm.backMusicFlag">
<div class="flex">
<el-button size="small" class="playBtn" @click="handleListen"><i :class="['iconfont fz14', isPlay ? 'icon-zanting' : 'icon-kaiqi']"></i> 点击试听</el-button>
<el-select class="musicSelect" v-model="baseForm.backMusicUrl" value-key="materialValue" @clear="handleClear" :clearable="customMusicOptions.length">
<el-select class="musicSelect" v-model="baseForm.backMusicUrlObj" value-key="materialValue" @clear="handleClear" :clearable="customMusicOptions.length">
<el-option v-for="item in backMusicOptionsComputed" :key="item.materialValue" :value="item" :label="item.materialName"> </el-option>
</el-select>
</div>
......@@ -85,14 +85,14 @@
<el-switch v-model="baseForm.adsFlag" :active-value="1" :inactive-value="0" />
<div class="adsImg" v-show="baseForm.adsFlag">
<dm-upload-avatar class="upload-avatar" width="375" height="75" :limit="{ type: false, maxSize: 1 }" fileType="img" :model.sync="adsImageUrl" label="上传图片" tips="" @backImg="handleAdsChange" :unused="isInfo"></dm-upload-avatar>
<div class="tips" style="margin-bottom: 20px;">图片建议尺寸{{ baseForm.adsImageUrlSize0 }}或等比图片，格式 jpg/png/gif，大小{{ baseForm.adsImageUrlSize1 }} 以内。</div>
<div class="tips" style="margin-bottom: 20px;">图片建议尺寸{{ baseForm.adsImageUrlSize0 }}或等比图片，格式 jpg/png/gif，大小{{ baseForm.adsImageUrlSize1 }} M以内。</div>
<el-form-item label="小程序跳转路径" prop="link" label-width="110px">
<div class="wxapp mr16" v-if="selectLink.linkData.name">
{{ selectLink.linkData.name }}
</div>
<el-button type="text" @click="selectLink.show = true"> 选择链接 </el-button>
</el-form-item>
<linktools :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :can-save="true" :showType="0" @linkSelect="onSaveLink" />
<linktools :remove="[5, 35]" :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :can-save="true" :showType="0" @linkSelect="onSaveLink" />
</div>
</el-form-item>
</div>
......@@ -126,8 +126,9 @@ export default {
backMusicFlag: 1,
adsFlag: 1,
bulletFlag: 1,
backMusicUrl: ''
backMusicUrlObj: ''
},
gameExt: {},
adsImageUrl: { imgUrl: '', code: '' },
isPlay: false,
backMusicOptions: [],
......@@ -179,6 +180,7 @@ export default {
if (val && val.length) {
const data = val[0];
this.baseForm.templateId = data.templateId;
this.gameExt = data.gameTemplateMaterialList;
this.handleTemplateArr(data);
this.$emit('change', this.baseForm);
}
......@@ -244,16 +246,19 @@ export default {
if (obj.materialSize) {
const { width, height, size } = JSON.parse(obj.materialSize);
this.baseForm[key + 'Size0'] = width + '*' + height + 'px';
this.baseForm[key + 'Size1'] = size + 'M';
this.baseForm[key + 'Size1'] = size;
}
} else {
this.backMusicOptions = data.materialMap['backMusicUrl'];
if (data.materialMap['backMusicUrl'] && data.materialMap['backMusicUrl'].length) {
this.baseForm.backMusicUrl = data.materialMap['backMusicUrl'][0];
this.baseForm.backMusicUrlObj = data.materialMap['backMusicUrl'][0];
}
const prizeStyle = data.materialMap['prizeStyleJson'][0];
this.prizeStyleJson = JSON.parse(prizeStyle.materialValue);
this.baseForm['prizeStyleJson'] = JSON.parse(prizeStyle.materialValue);
this.baseForm['adsLinkUrl'] = data.materialMap['adsLinkUrl'][0].materialValue;
this.baseForm['shareCard'] = data.materialMap['shareCard'][0].materialValue;
this.baseForm['shareReport'] = data.materialMap['shareReport'][0].materialValue;
}
});
console.log(this.baseForm);
......@@ -262,16 +267,15 @@ export default {
this.isPlay = !this.isPlay;
console.log(this.isPlay);
this.backMusicOptions.forEach(item => {
if (item.materialValue == this.baseForm.backMusicUrl.materialValue) {
music.src = this.baseForm.backMusicUrl.materialValue;
console.log(this.baseForm.backMusicUrl.materialValue);
if (item.materialValue == this.baseForm.backMusicUrlObj.materialValue) {
music.src = this.baseForm.backMusicUrlObj.materialValue;
this.isPlay ? music.play() : music.pause();
}
});
},
handleClear() {
this.customMusicOptions = [];
this.baseForm.backMusicUrl = this.backMusicOptions[0];
this.baseForm.backMusicUrlObj = this.backMusicOptions[0];
},
setAudioList(obj) {
console.log(obj);
......@@ -284,7 +288,7 @@ export default {
materialKey: 'backMusicUrl'
}
];
this.baseForm.backMusicUrl = this.customMusicOptions[0];
this.baseForm.backMusicUrlObj = this.customMusicOptions[0];
},
handleAdsChange(obj) {
console.log(obj);
......@@ -300,15 +304,30 @@ export default {
onSaveLink(linkData) {
console.log(linkData);
this.selectLink.linkData = linkData;
this.baseForm.adsLinkUrl = linkData.url;
},
handleNameChange(val) {
console.log(val);
this.$emit('change', this.baseForm);
},
submit() {
this.$refs.form.validate(val => {
this.$refs.baseForm.validate(val => {
if (val) {
this.$emit('nextStep', { data: this.baseForm });
const data = { ...this.baseForm };
let gameExt = [...this.gameExt];
let obj = {};
Object.keys(data).forEach(key => {
let val = gameExt.filter(item => item.materialKey == key)[0];
if (val) {
val.materialValue = data[key];
obj[key] = val;
}
});
obj.backMusicUrl = data.backMusicUrlObj;
data.gameExt = obj;
data.gameExt.prizeStyleJson.materialValue = JSON.stringify(data.gameExt.prizeStyleJson.materialValue);
console.log(data);
this.$emit('nextStep', data);
} else {
this.scrollToError(this);
}
......@@ -388,19 +407,7 @@ img {
box-sizing: border-box;
margin-top: 16px;
}
.wxapp {
width: 253px;
height: 32px;
background: #f2f3f5;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 11px;
box-sizing: border-box;
display: inline-flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.upload-avatar {
width: 375px;
height: 75px;
......
src/views/game/cmh/form.vue
......@@ -35,7 +35,7 @@
<div class="formContent">
<baseConfig :templateArr="templateData" v-show="active == 0" @change="handleBaseConfigChange" @nextStep="data => nextStep(1, data)" />
<prizeConfig :prizeMax="prizeMax" :prizeMin="prizeMin" v-show="active == 1" @nextStep="data => nextStep(2, data)" />
<ruleConfig :shareCard="shareCard" :shareReport="shareReport" v-show="active == 2" />
<ruleConfig :shareCard="shareCard" :shareReport="shareReport" v-show="active == 2" @nextStep="data => submit(3, data)" :btnLoading="btnLoading" />
</div>
</div>
</div>
......@@ -48,7 +48,7 @@ import step from '@/views/game/dm-step/step';
import baseConfig from './base-config.vue';
import prizeConfig from './prize-config.vue';
import ruleConfig from './rule-config.vue';
import { getGameTemplateByType } from '@/service/api/gameApi.js';
import { getGameTemplateByType, initActivity, getGameDetail } from '@/service/api/gameApi.js';
import gameTemplate from './gameTemplate';
export default {
data() {
......@@ -64,7 +64,12 @@ export default {
bgImg: '',
tipsImg: '',
boxImg: '',
adImg: ''
adImg: '',
btnLoading: false,
submitData: {},
isEdit: this.$route.meta.type === 'edit',
isAdd: this.$route.meta.type === 'add',
isCopy: this.$route.meta.type === 'copy'
};
},
computed: {
......@@ -88,7 +93,13 @@ export default {
ruleConfig
},
mounted() {
const { id } = this.$route.params;
this.getGameTemplateByType();
if (this.isAdd) {
this.$route.meta.refresh = false;
} else {
this.getGameDetail(id);
}
},
destroyed() {
this.$store.dispatch('setShowLayout', true);
......@@ -104,6 +115,34 @@ export default {
}
},
methods: {
getGameDetail(id) {
getGameDetail({ gameId: id }).then(res => {
console.log(res);
const {
gameRuleInfo, // 游戏规则信息
gameRuleConditionList, // 游戏规则-参与门槛
gamePrizeList, //游戏奖品信息
gameExt,
prizeNoticeStock,
prizeNoticeFlag,
adsFlag,
bulletFlag,
backMusicFlag,
templateId,
gameRule,
startDate,
endDate,
gameName
} = res;
const { winChance, filterJson, memberDesc, memberType, playConditionFlag, playTimes, shareFlag, shareImageUrl, shareRuleDesc } = gameRuleInfo;
gameRuleConditionList.forEach(item => {
item.conditionJson = JSON.parse(item.conditionJson);
});
this.ruleForm = { filterJson, gameRuleConditionList, memberDesc, memberType, playConditionFlag, playTimes, shareFlag, shareImageUrl, shareRuleDesc };
this.prizeForm = { winChance, prizeNoticeStock, gamePrizeList, prizeNoticeFlag };
this.baseForm = { adsFlag, backMusicFlag, bulletFlag, templateId, gameTime: [startDate, endDate], gameName, gameRule, gameExt };
});
},
handleBaseConfigChange(data) {
console.log('handleBaseConfigChange----->');
console.log(data);
......@@ -151,6 +190,46 @@ export default {
nextStep(step, data) {
this.active = step;
console.log(data);
this.submitData = { ...data, ...this.submitData };
},
submit(step, data) {
this.submitData = { ...data, ...this.submitData };
console.log(this.submitData);
this.submitData = JSON.parse(JSON.stringify(this.submitData));
const { winChance, filterJson, memberDesc, memberType, playConditionFlag, playTimes, shareFlag, shareImageUrl, gameRuleConditionList, gameName, gamePrizeList, prizeNoticeStock, prizeNoticeFlag, adsFlag, bulletFlag, backMusicFlag, templateId, gameRule, gameTime, gameExt } = this.submitData;
const gameRuleInfo = { winChance, filterJson, memberDesc, memberType, playConditionFlag, playTimes, shareFlag, shareImageUrl, shareRuleDesc: gameName };
gameRuleConditionList.forEach(item => {
delete item.index;
item.conditionJson = JSON.stringify(item.conditionJson);
});
let submitData = {
gameRuleInfo, // 游戏规则信息
gameRuleConditionList, // 游戏规则-参与门槛
gamePrizeList, //游戏奖品信息
gameExt,
templateType: 1, // 1盲盒
prizeNoticeStock,
prizeNoticeFlag,
adsFlag,
bulletFlag,
backMusicFlag,
templateId,
gameRule,
startDate: gameTime[0],
endDate: gameTime[1],
gameName
};
console.log(submitData);
this.btnLoading = true;
initActivity(submitData)
.then(res => {
if (res) {
this.$message.success('保存成功');
this.$route.meta.refresh = true;
this.$router.go(-1);
}
})
.finally((this.btnLoading = false));
}
}
};
......
src/views/game/cmh/rule-config.vue
<template>
<el-form size="small" :model="ruleForm" :rules="rules" ref="form" label-width="160px">
<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px">
<dm-sub-title type="line" class="mb20">玩法配置</dm-sub-title>
<el-form-item label="参与人群" prop="memberType">
<el-radio v-model="ruleForm.memberType" :label="0">会员筛选</el-radio>
......@@ -7,7 +7,7 @@
</el-form-item>
<el-form-item>
<div v-show="ruleForm.memberType == 0">
<vue-gic-people v-bind="storeParams" projectName="marketing" :triggerReset="true" :useId="useId" :hasSearchData="hasSearchData" sceneValue="member" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editShow="toggleTag = true" @editHide="toggleTag = false" @hideBtn="toggleTag = false" />
<vue-gic-people v-bind="storeParams" projectName="marketing" :triggerReset="true" :useId="useId" :hasSearchData="ruleForm.hasSearchData" sceneValue="member" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editShow="toggleTag = true" @editHide="toggleTag = false" @hideBtn="toggleTag = false" />
<div class="gic-people--button" v-show="toggleTag">
<el-button size="small" type="primary" @click="getData">确 定</el-button>
<el-button size="small" @click="cancelFilter">取 消</el-button>
......@@ -32,31 +32,37 @@
<el-form-item>
<div class="shareBox" v-show="ruleForm.playConditionFlag == 1">
<div v-for="(item, index) in ruleForm.gameRuleConditionList" :key="item.conditionType">
<div v-show="item.id == 1">
<div v-show="item.index == 1">
<div class="flex mb10"><el-checkbox v-model="item.conditionType" :true-label="2" :false-label="-1" /> <span class="ml10">赠与免费游戏次数</span></div>
<el-form-item :prop="'gameRuleConditionList.' + index + '.' + 'value'" v-show="item.conditionType == 2">
<el-select class="w140" v-model="item.conditionJson.type">
<el-option :label="21">总赠送</el-option>
<el-option :label="22">每日赠送</el-option>
<el-option :value="21" label="总赠送"></el-option>
<el-option :value="22" label="每日赠送"></el-option>
</el-select>
<el-input-number class="w140" placeholder="请输入次数" v-model="item.conditionJson.value" :min="1" controls-position="right" />
<span class="ml10">次游戏次数</span>
</el-form-item>
</div>
<div v-show="item.id == 2">
<div v-show="item.index == 2">
<div class="flex mb10"><el-checkbox v-model="item.conditionType" :true-label="0" :false-label="-1" /> <span class="ml10">消耗积分获得游戏次数</span></div>
<div v-show="item.conditionType == 0">
<el-form-item label="参与游戏每次消耗积分" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'value'">
<el-input placeholder="请输入积分" v-model="item.conditionJson.value" class="w140" />
<span class="ml10">积分 </span>
</el-form-item>
<el-form-item label="提示客户积分获取路径" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'dumpPath'"> <el-button type="text"> 选择链接 </el-button></el-form-item>
<el-form-item label="提示客户积分获取路径" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'dumpPath'">
<div></div>
<div class="wxapp mr16" v-if="selectLink.linkData.name">
{{ selectLink.linkData.name }}
</div>
<el-button type="text" @click="selectLink.show = true"> 选择链接 </el-button>
</el-form-item>
</div>
</div>
<div v-show="item.id == 3">
<div v-show="item.index == 3">
<div class="flex mb10"><el-checkbox v-model="item.conditionType" :true-label="1" :false-label="-1" /><span class="ml10"> 邀请好友助力获得游戏次数</span></div>
<div v-show="item.conditionType == 1">
<el-form-item label="邀请机制" label-width="80px"> 每成功邀请<el-input-number v-model="item.conditionType.inviteNum" :min="1" class="w110 ml10 mr10" controls-position="right" />人可获得 <el-input-number v-model="item.conditionJson.value" :min="1" class="w110 ml10 mr10" controls-position="right" />次游戏</el-form-item>
<el-form-item label="邀请机制" label-width="80px"> 每成功邀请<el-input-number v-model="item.conditionJson.inviteNum" :min="1" class="w110 ml10 mr10" controls-position="right" />人可获得 <el-input-number v-model="item.conditionJson.value" :min="1" class="w110 ml10 mr10" controls-position="right" />次游戏</el-form-item>
<el-form-item label="成功邀请条件" label-width="108px">
<el-radio-group v-model="item.conditionJson.type">
<el-radio :label="11">注册新会员</el-radio>
......@@ -110,7 +116,7 @@
</el-form-item>
<linktools :linkVisible.sync="selectLink.show" :linkData="selectLink.linkData" :can-save="true" :showType="0" @linkSelect="onSaveLink" />
<dm-form-bottom class="footer">
<el-button type="primary" @click="submit">保存并下一步</el-button>
<el-button type="primary" @click="submit" :loading="btnLoading">保存并下一步</el-button>
</dm-form-bottom>
</el-form>
</template>
......@@ -126,27 +132,30 @@ export default {
show: false,
linkData: {}
},
selectedGroupIds: '', // 被选中的客户分组id
hasSearchData: '',
useId: '',
groupVisible: false,
ruleForm: {
hasSearchData: '',
memberType: 0,
memberDesc: '',
playConditionFlag: 1,
shareFlag: 1,
playTimes: '',
searchJson: '',
shareImageUrl: '',
gameRuleConditionList: [
{
id: 1,
index: 1,
conditionType: 2, // 赠与免费游戏次数
conditionJson: {
type: 1,
type: 21,
value: ''
}
},
{
id: 2,
index: 2,
conditionType: 0, // 消耗积分获得游戏次数
conditionJson: {
type: 1,
......@@ -155,7 +164,7 @@ export default {
}
},
{
id: 3,
index: 3,
conditionType: 1, //邀请好友助力获得游戏次数
conditionJson: {
type: 11, // 11 注册新会员 12 首次关注服务号
......@@ -170,6 +179,7 @@ export default {
]
},
toggleTag: false, // 控制按钮显示的参数,仅供参考,可自行修改
creatorId: '',
rules: {
memberType: { required: true, message: '请选择' },
memberDesc: { type: 'string', required: true, message: '未配置游戏说明', trigger: 'blur' },
......@@ -179,16 +189,19 @@ export default {
},
props: {
shareCard: '',
shareReport: ''
shareReport: '',
btnLoading: false
},
watch: {
shareCard(val) {
console.log(val);
this.ruleForm.gameRuleConditionList[2].conditionJson.shareCard = val;
this.ruleForm.shareImageUrl = val;
this.ruleForm.gameRuleConditionList = this.ruleForm.gameRuleConditionList.splice(0);
},
shareReport(val) {
this.ruleForm.gameRuleConditionList[2].conditionJson.shareReport = val;
this.ruleForm.gameRuleConditionList = this.ruleForm.gameRuleConditionList.splice(0);
}
},
......@@ -198,7 +211,7 @@ export default {
},
computed: {
storeParams() {
return !this.isAdd ? { creatorId: this.ruleForm.creatorId } : {};
return !this.isAdd ? { creatorId: this.creatorId } : {};
}
},
methods: {
......@@ -225,12 +238,10 @@ export default {
},
// 保存链接小工具返回的链接数据
onSaveLink(linkData) {
console.log(linkData);
this.selectLink.linkData = linkData;
this.ruleForm.gameRuleConditionList[1].conditionJson.dumpPath = linkData.url;
},
beforeAvatarUpload(file, key, size1 = 1) {
console.log(file);
console.log(size1);
const arr = ['image/gif', 'image/jpeg', 'image/png'];
const limit = file.size / 1024 / 1024 < 2;
if (!arr.includes(file.type)) {
......@@ -250,6 +261,13 @@ export default {
//成功后回调
let data = res.data;
if (data.errorCode == 0) {
if (key == 'shareCard') {
this.ruleForm.gameRuleConditionList[2].conditionJson.shareCard = data.result.qcloudImageUrl;
this.ruleForm.shareImageUrl = data.result.qcloudImageUrl;
} else {
this.ruleForm.gameRuleConditionList[2].conditionJson.shareReport = data.result.qcloudImageUrl;
}
this.ruleForm.gameRuleConditionList = this.ruleForm.gameRuleConditionList.splice(0);
this.$message({
type: 'success',
message: '上传成功'
......@@ -265,12 +283,19 @@ export default {
return true;
},
submit() {
this.$refs.form.validate(val => {
this.$refs.ruleForm.validate((val, obj) => {
if (val) {
this.$emit('nextStep', { data: this.ruleForm });
const data = { ...this.ruleForm };
if (data.memberType == 1) {
data.filterJson = this.selectedGroupIds;
}
console.log(data);
this.$emit('nextStep', data);
} else {
this.scrollToError(this);
}
console.log(obj);
});
}
}
......
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