Skip to content

M
marketing-opeartion
Commit fb421d8e by crushh
Options

update: dist

parent 25ac2d36
Showing with 408 additions and 207 deletions
src/api/operation.js
...@@ -72,6 +72,14 @@ let gameApi = { ...@@ -72,6 +72,14 @@ let gameApi = {
method: 'post', method: 'post',
url: '/game-config/get-game-template-list' url: '/game-config/get-game-template-list'
}, },
initTemplate: {
method: 'post',
url: '/game-config/init-template'
},
batchupdateTemplateSort: {
method: 'post',
url: '/game-config/batch-Update-Template-sort'
},
updateTemplateStatus: '/game-config/update-template-status' updateTemplateStatus: '/game-config/update-template-status'
}; };
......
src/router/routes.js
...@@ -59,7 +59,7 @@ export const routes = [ ...@@ -59,7 +59,7 @@ export const routes = [
component: _import('activity', 'template-list') component: _import('activity', 'template-list')
}, },
{ {
path: 'template-detail/:id', path: 'template-detail/:type',
name: '新建游戏模板', name: '新建游戏模板',
component: _import('activity', 'template-detail') component: _import('activity', 'template-detail')
} }
......
src/styles/component.less
...@@ -44,6 +44,18 @@ ...@@ -44,6 +44,18 @@
.w140{ .w140{
width: 140px; width: 140px;
} }
.pl20{
padding-left: 20px;
}
.pt10{
padding-top: 10px;
}
.pb10{
padding-bottom: 10px;
}
.border-bottom{
border-bottom: 1px solid #E4E7ED;
}
.image-tip { .image-tip {
margin: 6px 0 14px; margin: 6px 0 14px;
font-size: 12px; font-size: 12px;
......
src/utils/request.js
...@@ -39,7 +39,7 @@ const request = (opt, params) => { ...@@ -39,7 +39,7 @@ const request = (opt, params) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios(requestConfig).then(res => { axios(requestConfig).then(res => {
let resp = res.data; let resp = res.data;
if (resp.errorCode != 0) { if (resp.errorCode != 0 && resp.code != 0) {
Message({ Message({
message: resp.message || '未知错误', message: resp.message || '未知错误',
type: 'warning' type: 'warning'
......
src/views/activity/template-config.vue
...@@ -27,45 +27,9 @@ console.log(fetch); ...@@ -27,45 +27,9 @@ console.log(fetch);
export default { export default {
data() { data() {
return { return {
list: [ 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: { typeMap: {
1: '盲盒1', 1: '盲盒'
2: '盲盒2',
3: '盲盒3',
4: '盲盒4',
5: '盲盒5',
6: '盲盒6',
7: '盲盒7'
} }
}; };
}, },
...@@ -75,7 +39,8 @@ export default { ...@@ -75,7 +39,8 @@ export default {
methods: { methods: {
getList() { getList() {
fetch.getGameTemplateConfig().then((res) => { fetch.getGameTemplateConfig().then((res) => {
console.log(res); const { result } = res;
this.list = result;
}); });
} }
} }
......
src/views/activity/template-detail.vue
<template> <template>
<div style="padding: 20px"> <div>
<div class="pt10 pb10 pl20 border-bottom">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/activity/template-config' }">营销游戏配置</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: `/activity/template-list?type=${$route.params.type}` }">模板列表</el-breadcrumb-item>
<el-breadcrumb-item>新增模板</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div style="padding: 20px">
<el-form :rules="rules" size="small" :model="form" ref="form" label-width="120px"> <el-form :rules="rules" size="small" :model="form" ref="form" label-width="120px">
<dm-sub-title type="fill">基础信息</dm-sub-title> <dm-sub-title type="fill">基础信息</dm-sub-title>
<div class="section"> <div class="section">
...@@ -7,34 +15,40 @@ ...@@ -7,34 +15,40 @@
<el-input class="w340" v-model="form.templateName" show-word-limit placeholder="请输入模板名称" maxlength="20"></el-input> <el-input class="w340" v-model="form.templateName" show-word-limit placeholder="请输入模板名称" maxlength="20"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="游戏首页背景" prop="backImageUrl"> <el-form-item label="游戏首页背景" prop="backImageUrl">
<vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 'backImageUrl')" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'backImageUrl')" @deleteImage="deleteImage('backImageUrl')" preview-append-to-body> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList.backImageUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 2)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'backImageUrl')" @deleteImage="deleteImage('backImageUrl')" preview-append-to-body>
</vue-gic-upload-image> </vue-gic-upload-image>
<p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p> <p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p>
</el-form-item> </el-form-item>
<el-form-item label="游戏规则背景" prop="ruleImageUrl"> <el-form-item label="游戏规则背景" prop="ruleImageUrl">
<vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 'ruleBgImageUrl')" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'ruleBgImageUrl')" @deleteImage="deleteImage('ruleBgImageUrl')" preview-append-to-body> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList.ruleImageUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 2)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'ruleImageUrl')" @deleteImage="deleteImage('ruleImageUrl')" preview-append-to-body>
</vue-gic-upload-image> </vue-gic-upload-image>
<p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p> <p class="image-tip">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p>
</el-form-item> </el-form-item>
<el-form-item label="游戏背景音乐" prop="backMusicUrl"> <el-form-item label="游戏背景音乐" prop="backMusicUrl">
<el-checkbox-group v-model="musicSelectValue" @change="(val) => handleChange(val, item.esScreeningWidgetChainId)" class="checkBoxContainer"> <el-checkbox-group v-model="musicSelectList" @change="handleChange" class="checkBoxContainer">
<el-checkbox v-for="row in musicList" :key="row.key" :label="row.key">{{ row.value }}</el-checkbox> <el-checkbox v-for="row in musicList" :key="row.materialValue" :label="row.materialValue">{{ row.materialName }}</el-checkbox>
</el-checkbox-group> </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-upload :action="actionUrl" :on-remove="handleRemove" multiple :limit="3" :before-upload="(file) => beforeUpload(file, 'backMusicUrl')" :on-exceed="handleExceed" :file-list="defineMusicList">
<el-button size="small">自定义上传</el-button> <el-button size="small">自定义上传</el-button>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</div> </div>
<dm-sub-title type="fill">游戏首页奖品样式</dm-sub-title> <dm-sub-title type="fill">游戏首页奖品样式</dm-sub-title>
<div class="section"> <div class="section">
<el-form-item label="奖项展示个数" prop="prizeStyleNum" required> <el-form-item label="奖项展示个数" prop="viewPrize" required>
<el-input-number class="w340" :min="1" :max="10" v-model="form.prizeStyleNum" placeholder="请输入展示数量" controls-position="right"></el-input-number> <el-input-number class="w340" :min="1" :max="10" v-model="form.viewPrize" placeholder="请输入展示数量" controls-position="right"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="奖项图片尺寸" required prop="prizeStyleSize"> <el-form-item label="奖项图片尺寸" required>
<div class="flex">
<el-form-item label-width="0" prop="prizeStyleSizeW" style="margin: 0">
<el-input class="w140" placeholder="请输入" maxlength="20" v-model="form.prizeStyleSizeW"></el-input> <el-input class="w140" placeholder="请输入" maxlength="20" v-model="form.prizeStyleSizeW"></el-input>
</el-form-item>
<span class="ml10 mr10">*</span> <span class="ml10 mr10">*</span>
<el-form-item label-width="0" prop="prizeStyleSizeH" style="margin: 0">
<el-input class="w140" placeholder="请输入" maxlength="20" v-model="form.prizeStyleSizeH"></el-input> <el-input class="w140" placeholder="请输入" maxlength="20" v-model="form.prizeStyleSizeH"></el-input>
<span class="ml10">px</span> </el-form-item>
<span class="ml10">px</span>
</div>
</el-form-item> </el-form-item>
<el-form-item label="奖项更换方式" required> <el-form-item label="奖项更换方式" required>
<el-radio-group v-model="form.changeType"> <el-radio-group v-model="form.changeType">
...@@ -44,41 +58,41 @@ ...@@ -44,41 +58,41 @@
</el-form-item> </el-form-item>
<el-form-item label="奖项图片" prop="prizeStyleJson" required> <el-form-item label="奖项图片" prop="prizeStyleJson" required>
<div v-for="(item, index) in form.prizeStyleJson" :key="index"> <div v-for="(item, index) in form.prizeStyleJson" :key="index">
<div class="flex"> <div class="flex-gap">
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0"> <el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0">
<div class="flex-column"> <div class="flex-column">
<span class="mb8">未选中</span> <span class="mb8">未选中</span>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 'prizeStyleJson')" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'imageNoSelectUrl', index)" @deleteImage="deleteImage('imageNoSelectUrl', index)" preview-append-to-body> </vue-gic-upload-image> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="item.imageNoSelectUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'imageNoSelectUrl', index,'prizeStyleJson')" @deleteImage="deleteImage('imageNoSelectUrl', index,'prizeStyleJson')" preview-append-to-body> </vue-gic-upload-image>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageSelectUrl'" label-width="0"> <el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageSelectUrl'" label-width="0">
<div class="flex-column"> <div class="flex-column">
<span class="mb8">选中</span> <span class="mb8">选中</span>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 'prizeStyleJson')" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'imageSelectUrl', index)" @deleteImage="deleteImage('imageSelectUrl', index)" preview-append-to-body> </vue-gic-upload-image> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="item.imageSelectUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'imageSelectUrl', index,'prizeStyleJson')" @deleteImage="deleteImage('imageSelectUrl', index,'prizeStyleJson')" preview-append-to-body> </vue-gic-upload-image>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
<p class="image-tip">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p> <p class="image-tip">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
</el-form-item> </el-form-item>
<el-form-item label="更换奖项样式"> <el-switch v-model="form.canChangePrizeStyle"></el-switch><span class="tips ml18">开启则表示支持用户更换此处模板内默认奖项样式</span> </el-form-item> <!-- <el-form-item label="更换奖项样式"> <el-switch v-model="form.canChangePrizeStyle"></el-switch><span class="tips ml18">开启则表示支持用户更换此处模板内默认奖项样式</span> </el-form-item> -->
</div> </div>
<dm-sub-title type="fill">首页“参与游戏”按钮图</dm-sub-title> <dm-sub-title type="fill">首页“参与游戏”按钮图</dm-sub-title>
<div class="section"> <div class="section">
<el-form-item label="图片尺寸" required> <el-form-item label="图片尺寸" required>
<div class="flex"> <div class="flex">
<el-form-item label-width="0" prop="noticeImgUrlW" style="margin: 0"> <el-form-item label-width="0" prop="noticeImageUrlW" style="margin: 0">
<el-input class="w140" placeholder="请输入" v-model="form.noticeImgUrlW" maxlength="20"></el-input> <el-input class="w140" placeholder="请输入" v-model="form.noticeImageUrlW" maxlength="20"></el-input>
</el-form-item> </el-form-item>
<span class="ml10 mr10">*</span> <span class="ml10 mr10">*</span>
<el-form-item label-width="0" prop="noticeImgUrlH" style="margin: 0"> <el-form-item label-width="0" prop="noticeImageUrlH" style="margin: 0">
<el-input class="w140" placeholder="请输入" v-model="form.noticeImgUrlH" maxlength="20"></el-input> <el-input class="w140" placeholder="请输入" v-model="form.noticeImageUrlH" maxlength="20"></el-input>
</el-form-item> </el-form-item>
<span class="ml10">px</span> <span class="ml10">px</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="默认图" prop="noticeImgUrl" required> <el-form-item label="默认图" prop="noticeImageUrl" >
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" :image-list="imageList" :max-image-length="maxlength" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 'noticeImageUrl')" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'noticeImageUrl')" @deleteImage="deleteImage('noticeImageUrl')" preview-append-to-body> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList.noticeImageUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'noticeImageUrl')" @deleteImage="deleteImage('noticeImageUrl')" preview-append-to-body>
</vue-gic-upload-image> </vue-gic-upload-image>
<p class="image-tip">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p> <p class="image-tip">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
</el-form-item> </el-form-item>
...@@ -86,7 +100,7 @@ ...@@ -86,7 +100,7 @@
<dm-sub-title type="fill">首页其它按钮图</dm-sub-title> <dm-sub-title type="fill">首页其它按钮图</dm-sub-title>
<div class="section"> <div class="section">
<el-form-item :label="item.label" v-for="item in btnImgList" :rules="item.rule" :key="item.prop"> <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" 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> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList[item.prop+'List']" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @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> <p class="image-tip">{{ item.tips }}</p>
</el-form-item> </el-form-item>
</div> </div>
...@@ -94,23 +108,23 @@ ...@@ -94,23 +108,23 @@
<div class="section"> <div class="section">
<el-form-item label="模板奖品数量" required> <el-form-item label="模板奖品数量" required>
<div class="flex"> <div class="flex">
<el-form-item label-width="0" prop="prizeNumMin" required> <el-form-item label-width="0" prop="prizeMin" required>
<el-input-number :min="1" :max="20" v-model="form.prizeNumMin" controls-position="right"></el-input-number> <el-input-number :min="1" :max="20" v-model="form.prizeMin" controls-position="right"></el-input-number>
</el-form-item> </el-form-item>
<span class="ml10 mr10">~</span> <span class="ml10 mr10">~</span>
<el-form-item label-width="0" prop="prizeNumMax" required> <el-form-item label-width="0" prop="prizeMax" required>
<el-input-number :min="1" :max="20" v-model="form.prizeNumMax" controls-position="right"></el-input-number> <el-input-number :min="1" :max="20" v-model="form.prizeMax" controls-position="right"></el-input-number>
</el-form-item> </el-form-item>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="模板奖品图片" required> <el-form-item label="模板奖品图片" required>
<div class="flex"> <div class="flex-gap">
<div v-for="item in prizeImgList" :key="item.prop"> <div v-for="item in prizeImgList" :key="item.prop">
<el-form-item :prop="item.prop" label-width="0"> <el-form-item :prop="item.prop" label-width="0">
<div class="flex-column"> <div class="flex-column">
<span class="mb8">{{ item.label }}</span> <span class="mb8">{{ item.label }}</span>
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" 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> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList[item.prop+'List']" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @uploadOnSuccess="(data) => uploadOnSuccess(data, item.prop)" @deleteImage="deleteImage(item.prop)" preview-append-to-body> </vue-gic-upload-image>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
...@@ -121,24 +135,27 @@ ...@@ -121,24 +135,27 @@
<dm-sub-title type="fill">分享样式设计</dm-sub-title> <dm-sub-title type="fill">分享样式设计</dm-sub-title>
<div class="section"> <div class="section">
<el-form-item :label="item.label" :rules="item.rule" :prop="item.prop" v-for="item in shareImgList" :key="item.prop"> <el-form-item :label="item.label" :rules="item.rule" :prop="item.prop" v-for="item in shareImgList" :key="item.prop">
<vue-gic-upload-image :project-name="projectName" :action-url="actionUrl" 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> <vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList[item.prop+'List']" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file)" @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> <p class="image-tip">{{ item.tips }}</p>
</el-form-item> </el-form-item>
</div> </div>
<dm-footer> <div class="dm-form-bottom">
<el-button type="primary" @click="nextStep()">保存</el-button> <el-button type="primary" @click="nextStep">保存</el-button>
</dm-footer> </div>
</el-form> </el-form>
</div>
</div> </div>
</template> </template>
<script> <script>
import fetch from '@/api/operation.js';
export default { export default {
data() { data() {
const backMusicUrlValidator = (r, v, c) => { const backMusicUrlValidator = (r, v, c) => {
console.log(v); if (!this.musicSelectList.length) {
if (!v) { c(new Error('请选择音乐'));
c(new Error('请上传音乐'));
return; return;
} }
c(); c();
...@@ -164,153 +181,267 @@ export default { ...@@ -164,153 +181,267 @@ export default {
prizeStyleJson: [ prizeStyleJson: [
{ {
imageNoSelectUrl: '', imageNoSelectUrl: '',
imageSelectUrl: '' imageSelectUrl: '',
imageNoSelectUrlList: [],
imageSelectUrlList: [],
},
{
imageNoSelectUrl: '',
imageSelectUrl: '',
imageNoSelectUrlList: [],
imageSelectUrlList: [],
} }
], ],
prizeStyleJsonMaterialName: '奖项展示图 JSON,多张图',
viewPrize: 9,
prizeStyleSizeW: '',
prizeStyleSizeH: '',
changeType: 0,
noticeImageUrlW: '',
noticeImageUrlH: '',
prizeMin: '',
prizeMax: ''
}, },
rules: { rules: {
templateName: [ { required: true, message: '请填写模板名称' } ], templateName: [ { required: false, message: '请填写模板名称' } ],
backImageUrl: [ { required: true, message: '请上传游戏首页背景' } ], backImageUrl: [ { required: false, message: '请上传游戏首页背景' } ],
ruleImageUrl: [ { required: true, message: '请上传游戏规则背景' } ], ruleImageUrl: [ { required: false, message: '请上传游戏规则背景' } ],
backMusicUrl: [ { required: true, validator: backMusicUrlValidator } ], backMusicUrl: [ { required: false, validator: backMusicUrlValidator } ],
prizeStyleSize: [ { required: true, validator: prizeStyleSizeValidator } ], prizeStyleSize: [ { required: false, validator: prizeStyleSizeValidator } ],
prizeStyleJson: [ { required: true, validator: prizeStyleJsonValidator } ], prizeStyleJson: [ { required: false, validator: prizeStyleJsonValidator } ],
noticeImgUrlW: [ { required: true, message: '请填写图片宽度' } ], noticeImageUrlW: [ { required: false, message: '请填写图片宽度' } ],
noticeImgUrlH: [ { required: true, message: '请填写图片高度' } ], noticeImageUrlH: [ { required: false, message: '请填写图片高度' } ],
noticeImgUrl: [ { required: true, message: '请上传首页引导图片' } ], noticeImageUrl: [ { required: false, message: '请上传首页引导图片' } ],
prizeNumMin: [ { required: true, message: '请填入最少奖品种类' } ], prizeMin: [ { required: false, message: '请填入最小值' } ],
prizeNumMax: [ { required: true, message: '请填入最多奖品种类' } ], prizeMax: [ { required: false, message: '请填入最大值' } ],
}, },
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: 'bgBannerHelpUrl',
rule: { required: true, message: '请上传' },
tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
}
],
btnImgList: [ btnImgList: [
{ {
label: '我的积分', label: '我的积分',
prop: 'myPointImageUrl', prop: 'myPointImageUrl',
rule: { required: true, message: '请上传我的积分' }, rule: { required: true, message: '请上传我的积分' },
tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。' tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。',
myPointImageUrlList: []
}, },
{ {
label: '剩余次数', label: '剩余次数',
prop: 'resetTimeImageUrl', prop: 'resetTimeImageUrl',
rule: { required: true, message: '请上传剩余次数' }, rule: { required: true, message: '请上传剩余次数' },
tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。' tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。',
}, },
{ {
label: '邀请次数', label: '邀请次数',
prop: 'inviteTimeImageUrl', prop: 'inviteTimeImageUrl',
rule: { required: true, message: '请上传邀请次数' }, rule: { required: true, message: '请上传邀请次数' },
tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。' tips: '图片格式 jpg/jpeg/png/gif，大小 1M 以内。',
} }
], ],
prizeImgList: [ prizeImgList: [
{ {
label: '抵金券', label: '抵金券',
prop: 'cashCouponImgUrl' prop: 'cashCouponImgUrl',
}, },
{ {
label: '折扣券', label: '折扣券',
prop: 'discountCouponImgUrl' prop: 'discountCouponImgUrl',
}, },
{ {
label: '兑换券', label: '兑换券',
prop: 'exchangeCouponImgUrl' prop: 'exchangeCouponImgUrl',
}, },
{ {
label: '积分', label: '积分',
prop: 'pointImgUrl' prop: 'pointImgUrl',
}, },
{ {
label: '实物礼品', label: '实物礼品',
prop: 'physicalGiftImgUrl' prop: 'physicalGiftImgUrl',
}, },
{ {
label: '虚拟礼品', label: '虚拟礼品',
prop: 'virtutalGiftImgUrl' prop: 'virtutalGiftImgUrl'
} }
], ],
shareImgList: [
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', label: '小程序卡片',
value: '43232.mp3' prop: 'shareCard',
rule: { required: false, message: '请上传' },
tips: '图片建议尺寸 320*240px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
}, },
{ {
key: 'a7', label: '分享海报',
value: '12345qwwe643.mp3' prop: 'shareReport',
rule: { required: false, message: '请上传' },
tips: '图片建议尺寸 750*1334px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
}, },
{ {
key: 'a8', label: '“分享助力”页顶部banner',
value: '1234asada5643.mp3' prop: 'bgBannerHelpUrl',
rule: { required: false, message: '请上传' },
tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
} }
], ],
imageList: {
backImageUrlList: [],
ruleImageUrlList: [],
noticeImageUrlList: [],
myPointImageUrlList: [],
resetTimeImageUrlList: [],
inviteTimeImageUrlList: [],
cashCouponImgUrlList: [],
discountCouponImgUrlList: [],
exchangeCouponImgUrlList: [],
pointImgUrlList: [],
physicalGiftImgUrlList: [],
virtutalGiftImgUrlList: [],
shareCardList: [],
shareReportList: [],
bgBannerHelpUrlList: [],
},
isImg: [
'backImageUrl',
'ruleImageUrl',
'noticeImageUrl',
'myPointImageUrl',
'resetTimeImageUrl',
'inviteTimeImageUrl',
'cashCouponImgUrl',
'discountCouponImgUrl',
'exchangeCouponImgUrl',
'pointImgUrl',
'physicalGiftImgUrl',
'virtutalGiftImgUrl',
'shareCard',
'shareReport',
'bgBannerHelpUrl'
],
materialNameMap: {
'ruleImageUrl': '游戏规则背景',
'myPointImageUrl': '我的积分',
'resetTimeImageUrl': '剩余次数',
'inviteTimeImageUrl': '邀请次数',
'cashCouponImgUrl': '抵金券',
'discountCouponImgUrl': '折扣券',
'exchangeCouponImgUrl': '兑换券',
'pointImgUrl': '积分',
'physicalGiftImgUrl': '实物礼品',
'virtutalGiftImgUrl': '虚拟礼品',
},
defineMusicList: [],
musicSelectList: [],
musicList: [],
projectName: 'marketing-operation', // 当前项目名(必传参数) projectName: 'marketing-operation', // 当前项目名(必传参数)
actionUrl: '/marketing-operation/upload-img', actionUrl: '/marketing-operation/upload-img',
accept: 'image/jpg,image/jpeg,image/png,image/gif', accept: 'image/jpg,image/jpeg,image/png,image/gif',
imageList: [], // 是否显示已上传文件列表
maxlength: 1 // 图片数量 默认 5 maxlength: 1 // 图片数量 默认 5
}; };
}, },
mounted(){
console.log(this.$route);
const { id } = this.$route.query;
this.isImg.forEach(item=>{
this.form[item] = {};
});
if(id){
this.getDetail();
}
},
methods: { methods: {
beforeUpload(file, type) { getDetail(){
console.log(file, type); fetch.getGameTemplat({ templateId: this.$route.query.id }).then(res=>{
if (file.size / 1024 > 100) { console.log(res);
this.$message.error('图片不能大于100kb，请重新上传！'); const { result: { templateId, templateType, templateName, prizeMax, prizeMin, sort, gameTemplateMaterialList } } = res;
const obj = {};
this.musicList.forEach(item=>{
obj[item.materialValue] = { materialName: item.materialName, materialValue: item.materialValue, };
});
gameTemplateMaterialList.forEach(item=>{
if(this.isImg.includes(item.materialKey)){
this.form[item.materialKey] = { materialId: item.materialId, materialValue: item.materialValue, materialName: item.materialName, sort: item.sort };
this.imageList[item.materialKey + 'List'] = [ { url: item.materialValue } ];
}else if(item.materialKey == 'backMusicUrl'){
obj[item.materialValue] = { materialId: item.materialId, materialName: item.materialName, materialValue: item.materialValue, sort: item.sort };
this.musicSelectList.push(item.materialValue);
}else if(item.materialKey == 'prizeStyleJson'){
const arr = JSON.parse(item.materialValue);
const size = JSON.parse(item.materialSize);
this.form.prizeStyleJson = [];
this.form.prizeStyleSizeW = size.width;
this.form.prizeStyleSizeH = size.height;
this.form.prizeStyleJsonMaterialName = item.materialName;
this.form.prizeStyleJsonSort = item.sort;
this.form.prizeStyleJsonMaterialId = item.materialId;
arr.forEach(item=>{
const { imageNoSelectUrl, imageSelectUrl, index } = item;
this.form.prizeStyleJson.push({
index,
imageNoSelectUrl,
imageSelectUrl,
imageNoSelectUrlList: [ { url: imageNoSelectUrl } ],
imageSelectUrlList: [ { url: imageSelectUrl } ],
});
});
}
if(item.materialKey == 'noticeImageUrl'){
const size = JSON.parse(item.materialSize);
this.form.noticeImageUrlW = size.width;
this.form.noticeImageUrlH = size.height;
}
});
this.musicList = Object.values(obj);
this.form = Object.assign(this.form, { templateId, templateType, templateName, prizeMax, prizeMin, sort });
console.log(this.form);
console.log(this.imageList);
});
},
beforeUpload(file, size = 1) {
console.log(file, file.size / 1024 / 1024);
if (file.size / 1024 / 1024 > size) {
this.$message.error(`图片不能大于${size}M，请重新上传！`);
return false;
}
if(![ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ].includes(file.type )){
this.$message.error('请上传jpg/jpeg/png/gif格式的图片！');
return false; return false;
} }
return true; return true;
}, },
uploadOnSuccess({ res }, name) { uploadOnSuccess({ res }, name, index, listName) {
this.form[name] = res.result[0].qcloudImageUrl || ''; if(listName == 'prizeStyleJson'){
// this.imageList = [ { url: res.result[ 0 ].qcloudImageUrl } ]; this.form.prizeStyleJson[index][name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ] ;
this.form.prizeStyleJson = this.form.prizeStyleJson.splice(0);
}else{
this.form[name].materialValue = res.result[0].qcloudImageUrl || '';
this.imageList[name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ];
}
console.log(this.form);
console.log(this.imageList);
}, },
deleteImage() { deleteImage(name, index, listName) {
this.form.activityImage = ''; console.log(name, index, listName);
this.imageList = []; if(listName == 'prizeStyleJson'){
this.form.prizeStyleJson[index][name] = '';
this.form.prizeStyleJson[index][name + 'List'] = [];
this.form.prizeStyleJson = this.form.prizeStyleJson.splice(0);
}else{
this.form[name].materialValue = '';
this.imageList[name + 'List'] = [];
}
console.log(this.form);
}, },
handleRemove(file, fileList) { handleRemove(file, fileList) {
console.log(file, fileList); console.log(file, fileList);
...@@ -319,7 +450,59 @@ export default { ...@@ -319,7 +450,59 @@ export default {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}, },
nextStep() { nextStep() {
console.log('nextStep'); this.$refs.form.validate(bool=>{
if(!bool)return;
const gameExt = { prizeStyleJson: {} };
Object.keys(this.form).forEach(key => {
if(this.isImg.includes(key)){
const val = this.form[key];
let obj = { materialValue: val.materialValue, materialKey: key };
val.materialId ? obj.materialId = val.materialId : '';
if(!val.materialName){
obj.sort = 0;
obj.materialName = this.materialNameMap[key];
}else{
obj.materialName = val.materialName;
obj.sort = val.sort;
}
gameExt[key] = obj;
}
if(key == 'noticeImageUrl'){
const obj = { width: this.form.noticeImageUrlW, height: this.form.noticeImageUrlH, size: 1 };
gameExt[key].materialSize = JSON.stringify(obj);
}
});
let prizeStyleJson = [];
this.form.prizeStyleJson.forEach(item=>{
const { imageNoSelectUrl, imageSelectUrl, index } = item;
prizeStyleJson.push({ imageNoSelectUrl, imageSelectUrl, index });
});
gameExt.prizeStyleJson.materialKey = 'prizeStyleJson';
gameExt.prizeStyleJson.materialName = this.form.prizeStyleJsonMaterialName;
gameExt.prizeStyleJson.sort = this.form.prizeStyleJsonSort;
gameExt.prizeStyleJson.materialValue = JSON.stringify(prizeStyleJson);
gameExt.prizeStyleJson.materialSize = JSON.stringify({ width: this.form.prizeStyleSizeW, height: this.form.prizeStyleSizeH, size: 1 });
this.form.prizeStyleJsonMaterialId ? gameExt.prizeStyleJson.materialId = this.form.prizeStyleJsonMaterialId : '';
let musciObj = {};
let musicExt = [];
this.musicSelectList.forEach(item=>musciObj[item] = item);
this.musicList.forEach(item=>{
if(musciObj[item.materialValue]){
const obj = { materialValue: item.materialValue, materialKey: 'backMusicUrl', materialName: item.materialName, sort: item.sort };
item.materialId ? obj.materialId = item.materialId : '';
musicExt.push(obj);
}
});
const { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize } = this.form;
let data = { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize };
data.gameTemplateMaterialList = [ ...Object.values(gameExt), ...musicExt ];
fetch.initTemplate(data).then(res=>{
console.log(res);
});
});
},
handleChange(val){
console.log(val);
} }
} }
}; };
...@@ -331,7 +514,10 @@ export default { ...@@ -331,7 +514,10 @@ export default {
} }
.flex { .flex {
display: flex; display: flex;
gap: 20px; }
.flex-gap{
display: flex;
gap:20px;
} }
.flex-column { .flex-column {
display: flex; display: flex;
...@@ -349,4 +535,17 @@ export default { ...@@ -349,4 +535,17 @@ export default {
color: #909399; color: #909399;
line-height: 17px; line-height: 17px;
} }
.dm-form-bottom {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 0;
bottom: 0;
z-index: 100;
height: 56px;
background: #FFFFFF;
width: calc( 100% - 200px);
box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
}
</style> </style>
\ No newline at end of file
src/views/activity/template-list.vue
<template> <template>
<div style="padding: 20px"> <div>
<el-row type="flex" justify="space-between"> <div class="pt10 pb10 pl20 border-bottom">
<el-row type="flex" align="middle" style="margin-right: 10px"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-input @change="getList" placeholder="请输入模板名称" prefix-icon="el-icon-search" v-model="searchParams.templateName" clearable style="width: 260px; margin-right: 10px"> </el-input> <el-breadcrumb-item :to="{ path: '/activity/template-config' }">营销游戏配置</el-breadcrumb-item>
<el-select v-model="searchParams.statusFlag" clearable placeholder="模板状态" @change="getList"> <el-breadcrumb-item>模板列表</el-breadcrumb-item>
<el-option v-for="item in categoryList" :key="item" :label="item" :value="item.activityCategoryId"> </el-option> </el-breadcrumb>
</el-select> </div>
<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 statusList" :key="item.label" :label="item.label" :value="item.val"> </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-row>
<el-row type="flex" align="middle"> <el-table row-key="sort" ref="sortTable" row-class-name="table-row" :data="list" style="margin-top: 20px" v-loading="loading">
<el-button type="primary" @click="addTemplate()">新增模板</el-button> <el-table-column width="40" label-class-name="tag-head">
</el-row> <template>
</el-row> <el-tooltip placement="top" content="拖动排序" trigger="hover" effect="dark" popper-class="drag-tooltip">
<el-table row-key="sort" ref="sortTable" row-class-name="table-row" :data="list" style="margin-top: 20px" v-loading="loading"> <i class="iconfont-components3 icon-cp-tuozhuaipaixu deactive" />
<el-table-column width="40" label-class-name="tag-head"> </el-tooltip>
<template> </template>
<el-tooltip placement="top" content="拖动排序" trigger="hover" effect="dark" popper-class="drag-tooltip"> </el-table-column>
<i class="iconfont-components3 icon-cp-tuozhuaipaixu deactive" /> <el-table-column label="模板名称" min-width="290px" prop="templateName"> </el-table-column>
</el-tooltip> <el-table-column label="展示数量" min-width="310px" prop="prizeMax"> </el-table-column>
</template> <el-table-column label="模板状态" min-width="306px" prop="statusFlag">
</el-table-column> <template slot-scope="{ row }">
<el-table-column label="模板名称" min-width="290px" prop="templateName"> </el-table-column> <el-switch v-model="row.statusFlag" @change="handleSwitch(row.statusFlag, row.templateId)" :active-value="1" :inactive-value="0"></el-switch>
<el-table-column label="展示数量" min-width="310px" prop="prizeMax"> </el-table-column> </template>
<el-table-column label="模板状态" min-width="306px" prop="statusFlag"> </el-table-column>
<template slot-scope="{ row }"> <el-table-column label="操作" min-width="255px">
<el-switch v-model="row.statusFlag" @change="handleSwitch(row.statusFlag, row.templateId)" :active-value="1" :inactive-value="0"></el-switch> <template slot-scope="{ row }">
</template> <el-row type="flex">
</el-table-column> <el-button type="text" @click="edit(row)">编辑</el-button>
<el-table-column label="操作" min-width="255px"> </el-row>
<template slot-scope="{ row }"> </template>
<el-row type="flex"> </el-table-column>
<el-button type="text" @click="edit(row)">编辑</el-button> </el-table>
</el-row> </div>
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
...@@ -48,21 +56,15 @@ export default { ...@@ -48,21 +56,15 @@ export default {
statusFlag: '' statusFlag: ''
}, },
loading: false, loading: false,
list: [ list: [],
{ statusList: [
statusFlag: 0,
prizeMax: 9,
templateName: '盲盒11111'
},
{ {
statusFlag: 1, label: '关闭',
prizeMax: 9, val: 0
templateName: '盲盒2222'
}, },
{ {
statusFlag: 0, label: '开启',
prizeMax: 8, val: 1
templateName: '盲盒3333'
} }
] ]
}; };
...@@ -77,7 +79,8 @@ export default { ...@@ -77,7 +79,8 @@ export default {
fetch fetch
.getGameTemplatList(this.searchParams) .getGameTemplatList(this.searchParams)
.then((res) => { .then((res) => {
console.log(res); const { result } = res;
this.list = result;
}) })
.finally((_) => { .finally((_) => {
this.loading = false; this.loading = false;
...@@ -112,10 +115,23 @@ export default { ...@@ -112,10 +115,23 @@ export default {
sort.option('sort', isSortIcon); sort.option('sort', isSortIcon);
}, },
onEnd({ newIndex, oldIndex }) { onEnd({ newIndex, oldIndex }) {
const currRow = that.list.splice(oldIndex, 1)[0]; console.log(newIndex);
that.list.splice(newIndex, 0, currRow); // const currRow = that.list.splice(oldIndex, 1)[0];
// that.list.splice(newIndex, 0, currRow);
const arr = that.list.map((item, index) => {
return { sort: index, templateId: item.templateId };
});
console.log(arr);
// that.batchupdateTemplateSort({ sort: newIndex, templateId: currRow.templateId });
that.batchupdateTemplateSort(arr);
} }
}); });
},
batchupdateTemplateSort(arr) {
fetch.batchupdateTemplateSort(arr).then((res) => {
console.log(res);
this.getList();
});
} }
} }
}; };
......
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