Skip to content

M
marketing-opeartion
Commit 659e4ebb by crushh
Options

update: dist

parent fb421d8e
Showing with 188 additions and 74 deletions
src/main.js
...@@ -8,7 +8,7 @@ import App from './App.vue'; ...@@ -8,7 +8,7 @@ import App from './App.vue';
import router from './router'; import router from './router';
import { isRequest } from '@/config'; import { isRequest } from '@/config';
import filters from '@/filters'; import filters from '@/filters';
import { scrollToError } from '@/utils';
// 复制粘贴 // 复制粘贴
import VueClipboard from 'vue-clipboard2'; import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); Vue.use(VueClipboard);
...@@ -16,7 +16,7 @@ axios.defaults.headers.common = Object.assign(axios.defaults.headers.common, isR ...@@ -16,7 +16,7 @@ axios.defaults.headers.common = Object.assign(axios.defaults.headers.common, isR
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.prototype.axios = axios; Vue.prototype.axios = axios;
Vue.prototype.scrollToError = scrollToError;
// 开启vue devtools..... // 开启vue devtools.....
/* eslint-disable-next-line */ /* eslint-disable-next-line */
Vue.config.devtools = process.env.NODE_ENV !== 'production'; Vue.config.devtools = process.env.NODE_ENV !== 'production';
......
src/utils/index.js
...@@ -28,3 +28,21 @@ export function getFirstMenu(list) { ...@@ -28,3 +28,21 @@ export function getFirstMenu(list) {
}; };
return travel(list); return travel(list);
} }
/** 表单校验滚动到第一个错误项
* @param {Object} that vue实例
* this.scrollToError(this);
*/
export const scrollToError = that => {
that.$nextTick(_ => {
const isError = document.getElementsByClassName('is-error');
isError[0].scrollIntoView({
// 滚动到指定节点
// 值有start,center,end，nearest，当前显示在视图区域中间
block: 'center',
// 值有auto、instant,smooth，缓动动画（当前是慢速的）
behavior: 'smooth'
});
});
};
src/views/activity/template-detail.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-breadcrumb separator-class="el-icon-arrow-right"> <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-config' }">营销游戏配置</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: `/activity/template-list?type=${$route.params.type}` }">模板列表</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-item>{{($route.query.id?'编辑':'新增')+'模板'}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div style="padding: 20px"> <div style="padding: 20px">
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
<el-form-item label="模板名称" prop="templateName"> <el-form-item label="模板名称" prop="templateName">
<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.materialValue" :rules="[{ required: true, message: '请上传' } ]">
<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 :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.materialValue" :rules="[{ required: true, message: '请上传' } ]">
<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 :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>
...@@ -28,44 +28,44 @@ ...@@ -28,44 +28,44 @@
<el-checkbox-group v-model="musicSelectList" @change="handleChange" class="checkBoxContainer"> <el-checkbox-group v-model="musicSelectList" @change="handleChange" class="checkBoxContainer">
<el-checkbox v-for="row in musicList" :key="row.materialValue" :label="row.materialValue">{{ row.materialName }}</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, 'backMusicUrl')" :on-exceed="handleExceed" :file-list="defineMusicList"> <el-upload :action="musicUrl" with-credentials :on-remove="handleRemove" multiple :limit="3" :data="{requestProject: 'gic-web'}" :show-file-list="false" :file-list="defineMusicList" :before-upload="(file) => beforeMusicUpload(file)" :on-exceed="handleExceed" :on-success="uploadOnMusicSuccess">
<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="viewPrize" required> <el-form-item label="奖项展示个数" prop="viewPrize">
<el-input-number class="w340" :min="1" :max="10" v-model="form.viewPrize" placeholder="请输入展示数量" controls-position="right"></el-input-number> <el-input class="w340" v-model.number="form.viewPrize" @change="onValChange" placeholder="请输入展示数量" ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="奖项图片尺寸" required> <el-form-item label="奖项图片尺寸" required>
<div class="flex"> <div class="flex">
<el-form-item label-width="0" prop="prizeStyleSizeW" style="margin: 0"> <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.number="form.prizeStyleSizeW"></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="prizeStyleSizeH" style="margin: 0"> <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.number="form.prizeStyleSizeH"></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="奖项更换方式" required> <el-form-item label="奖项更换方式" required>
<el-radio-group v-model="form.changeType"> <el-radio-group v-model="form.changeType" @change="onValChange">
<el-radio :label="0">统一更换</el-radio> <el-radio :label="0">统一更换</el-radio>
<el-radio :label="1">逐个更换</el-radio> <el-radio :label="1">逐个更换</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="奖项图片" prop="prizeStyleJson" required> <el-form-item label="奖项图片" required>
<div v-for="(item, index) in form.prizeStyleJson" :key="index"> <div v-for="(item, index) in form.prizeStyleJson" :key="index">
<div class="flex-gap"> <div class="flex-gap">
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0"> <el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0" :rules="[{required:true,message:'请上传'}]">
<div class="flex-column"> <div class="flex-column">
<span class="mb8">未选中</span> <span class="mb8">未选中</span>
<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> <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" required :rules="[{required:true,message:'请上传'}]">
<div class="flex-column"> <div class="flex-column">
<span class="mb8">选中</span> <span class="mb8">选中</span>
<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> <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>
...@@ -81,17 +81,17 @@ ...@@ -81,17 +81,17 @@
<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="noticeImageUrlW" style="margin: 0"> <el-form-item label-width="0" prop="noticeImageUrlW" required style="margin: 0">
<el-input class="w140" placeholder="请输入" v-model="form.noticeImageUrlW" maxlength="20"></el-input> <el-input class="w140" placeholder="请输入" v-model.number="form.noticeImageUrlW"></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="noticeImageUrlH" style="margin: 0"> <el-form-item label-width="0" prop="noticeImageUrlH" required style="margin: 0">
<el-input class="w140" placeholder="请输入" v-model="form.noticeImageUrlH" maxlength="20"></el-input> <el-input class="w140" placeholder="请输入" v-model.number="form.noticeImageUrlH"></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="noticeImageUrl" > <el-form-item label="默认图" prop="noticeImageUrl.materialValue" :rules="[{required:true,message:'请上传'}]">
<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 :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>
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
</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="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="[{ required: true, message: '请上传' } ]" :key="item.prop" :prop="item.prop+'.materialValue'">
<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> <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>
...@@ -109,19 +109,20 @@ ...@@ -109,19 +109,20 @@
<el-form-item label="模板奖品数量" required> <el-form-item label="模板奖品数量" required>
<div class="flex"> <div class="flex">
<el-form-item label-width="0" prop="prizeMin" required> <el-form-item label-width="0" prop="prizeMin" required>
<el-input-number :min="1" :max="20" v-model="form.prizeMin" controls-position="right"></el-input-number> <el-input v-model.number="form.prizeMin"></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="prizeMax" required> <el-form-item label-width="0" prop="prizeMax" required>
<el-input-number :min="1" :max="20" v-model="form.prizeMax" controls-position="right"></el-input-number> <el-input v-model.number="form.prizeMax"></el-input>
</el-form-item> </el-form-item>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="模板奖品图片" required> <el-form-item label="模板奖品图片" required>
<p class="tips">图片建议尺寸 300*300px，格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
<div class="flex-gap"> <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 :rules="[{ required: true, message: '请上传' } ]" :prop="item.prop+'.materialValue'" 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" 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> <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>
...@@ -129,12 +130,12 @@ ...@@ -129,12 +130,12 @@
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
<p class="image-tip">图片建议尺寸 300*300px，格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
</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="item.label" :rules="item.rule" :prop="item.prop" v-for="item in shareImgList" :key="item.prop"> <el-form-item :label="item.label" :rules="[{ required: true, message: '请上传' } ]" :prop="item.prop+'.materialValue'" v-for="item in shareImgList" :key="item.prop">
<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> <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>
...@@ -160,63 +161,82 @@ export default { ...@@ -160,63 +161,82 @@ export default {
} }
c(); c();
}; };
const prizeStyleSizeValidator = (r, v, c) => { const prizeMinValidator = (r, v, c) => {
if (!this.form.prizeStyleSizeW || !this.form.prizeStyleSizeH) { const { prizeMax, prizeMin } = this.form;
c(new Error('请输入完整的尺寸')); if (!prizeMin) {
c(new Error('请输入大于0的数字'));
return;
}
if (prizeMin > prizeMax) {
c(new Error('请输入不大于右边的值'));
return; return;
} }
c(); c();
}; };
const prizeStyleJsonValidator = (r, v, c) => {
if (!v) { const prizeMaxValidator = (r, v, c) => {
c(new Error('请上传奖项展示图片')); const { prizeMax, prizeMin } = this.form;
if (!prizeMax) {
c(new Error('请输入大于0的数字'));
return;
}
if (prizeMax < prizeMin) {
c(new Error('请输入不小于左边的值'));
return; return;
} }
c(); c();
}; };
return { return {
form: { form: {
templateName: '', templateName: '',
backImageUrl: { materialValue: '' },
ruleImageUrl: { materialValue: '' },
noticeImageUrl: { materialValue: '' },
myPointImageUrl: { materialValue: '' },
resetTimeImageUrl: { materialValue: '' },
inviteTimeImageUrl: { materialValue: '' },
cashCouponImgUrl: { materialValue: '' },
discountCouponImgUrl: { materialValue: '' },
exchangeCouponImgUrl: { materialValue: '' },
pointImgUrl: { materialValue: '' },
physicalGiftImgUrl: { materialValue: '' },
virtutalGiftImgUrl: { materialValue: '' },
shareCard: { materialValue: '' },
shareReport: { materialValue: '' },
bgBannerHelpUrl: { materialValue: '' },
prizeStyleJson: [ prizeStyleJson: [
{ {
imageNoSelectUrl: '', imageNoSelectUrl: '',
imageSelectUrl: '', imageSelectUrl: '',
imageNoSelectUrlList: [], imageNoSelectUrlList: [],
imageSelectUrlList: [], imageSelectUrlList: []
},
{
imageNoSelectUrl: '',
imageSelectUrl: '',
imageNoSelectUrlList: [],
imageSelectUrlList: [],
} }
], ],
prizeStyleJsonSort: 0,
prizeStyleJsonMaterialName: '奖项展示图 JSON,多张图', prizeStyleJsonMaterialName: '奖项展示图 JSON,多张图',
viewPrize: 9, viewPrize: 1,
prizeStyleSizeW: '', prizeStyleSizeW: '',
prizeStyleSizeH: '', prizeStyleSizeH: '',
changeType: 0, changeType: 0,
noticeImageUrlW: '', noticeImageUrlW: '',
noticeImageUrlH: '', noticeImageUrlH: '',
prizeMin: '', prizeMin: 1,
prizeMax: '' prizeMax: ''
}, },
rules: { rules: {
templateName: [ { required: false, message: '请填写模板名称' } ], templateName: [ { required: true, message: '请填写模板名称' } ],
backImageUrl: [ { required: false, message: '请上传游戏首页背景' } ], backMusicUrl: [ { required: true, validator: backMusicUrlValidator } ],
ruleImageUrl: [ { required: false, message: '请上传游戏规则背景' } ],
backMusicUrl: [ { required: false, validator: backMusicUrlValidator } ],
prizeStyleSize: [ { required: false, validator: prizeStyleSizeValidator } ],
prizeStyleJson: [ { required: false, validator: prizeStyleJsonValidator } ],
noticeImageUrlW: [ { required: false, message: '请填写图片宽度' } ], viewPrize: [ { type: 'number', min: 1, max: 10, message: '请输入1-10的数字' } ],
noticeImageUrlH: [ { required: false, message: '请填写图片高度' } ], prizeStyleSizeW: [ { required: true, message: '请填写图片宽度' } ],
noticeImageUrl: [ { required: false, message: '请上传首页引导图片' } ], prizeStyleSizeH: [ { required: true, message: '请填写图片高度' } ],
noticeImageUrlW: [ { required: true, message: '请填写图片宽度' } ],
noticeImageUrlH: [ { required: true, message: '请填写图片高度' } ],
prizeMin: [ { required: false, message: '请填入最小值' } ], prizeMin: [ { required: true, validator: prizeMinValidator } ],
prizeMax: [ { required: false, message: '请填入最大值' } ], prizeMax: [ { required: true, validator: prizeMaxValidator } ],
}, },
btnImgList: [ btnImgList: [
...@@ -328,7 +348,9 @@ export default { ...@@ -328,7 +348,9 @@ export default {
'bgBannerHelpUrl' 'bgBannerHelpUrl'
], ],
materialNameMap: { materialNameMap: {
'backImageUrl': '背景图',
'ruleImageUrl': '游戏规则背景', 'ruleImageUrl': '游戏规则背景',
'noticeImageUrl': '提示样式图',
'myPointImageUrl': '我的积分', 'myPointImageUrl': '我的积分',
'resetTimeImageUrl': '剩余次数', 'resetTimeImageUrl': '剩余次数',
'inviteTimeImageUrl': '邀请次数', 'inviteTimeImageUrl': '邀请次数',
...@@ -338,12 +360,45 @@ export default { ...@@ -338,12 +360,45 @@ export default {
'pointImgUrl': '积分', 'pointImgUrl': '积分',
'physicalGiftImgUrl': '实物礼品', 'physicalGiftImgUrl': '实物礼品',
'virtutalGiftImgUrl': '虚拟礼品', 'virtutalGiftImgUrl': '虚拟礼品',
'shareCard': '小程序卡片图片 ',
'shareReport': '分享海报',
'bgBannerHelpUrl': '助力背景Banner',
}, },
defineMusicList: [], defineMusicList: [],
musicSelectList: [], musicSelectList: [],
musicList: [], musicList: [
{ 'id': '3100', 'materialKey': 'backMusicUrl', 'materialName': '氛围1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/假日1.mp3',
'sort': 0 },
{ 'id': '3101', 'materialKey': 'backMusicUrl', 'materialName': '氛围2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/假日2.mp3',
'sort': 0 },
{ 'id': '3102', 'materialKey': 'backMusicUrl', 'materialName': '氛围3', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/舒缓1.mp3',
'sort': 0 },
{ 'id': '3103', 'materialKey': 'backMusicUrl', 'materialName': '氛围4', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/舒缓2.mp3',
'sort': 0 },
{ 'id': '3104', 'materialKey': 'backMusicUrl', 'materialName': '端午1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/端午1.mp3',
'sort': 0 },
{ 'id': '3105', 'materialKey': 'backMusicUrl', 'materialName': '端午2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/端午2.mp3',
'sort': 0 },
{ 'id': '3106', 'materialKey': 'backMusicUrl', 'materialName': '情人节1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/情人节1.mp3',
'sort': 0 },
{ 'id': '3107', 'materialKey': 'backMusicUrl', 'materialName': '情人节2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/情人节2.mp3',
'sort': 0 },
{ 'id': '3108', 'materialKey': 'backMusicUrl', 'materialName': '中秋1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/中秋1.mp3',
'sort': 0 },
{ 'id': '3109', 'materialKey': 'backMusicUrl', 'materialName': '中秋2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/中秋2.mp3',
'sort': 0 },
{ 'id': '3110', 'materialKey': 'backMusicUrl', 'materialName': '国庆1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/国庆1.mp3',
'sort': 0 },
{ 'id': '3111', 'materialKey': 'backMusicUrl', 'materialName': '国庆2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/国庆2.mp3',
'sort': 0 },
{ 'id': '3112', 'materialKey': 'backMusicUrl', 'materialName': '春节1', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/春节1.mp3',
'sort': 0 },
{ 'id': '3113', 'materialKey': 'backMusicUrl', 'materialName': '春节2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/春节2.mp3',
'sort': 0 }
],
projectName: 'marketing-operation', // 当前项目名(必传参数) projectName: 'marketing-operation', // 当前项目名(必传参数)
actionUrl: '/marketing-operation/upload-img', actionUrl: '/marketing-operation/upload-img',
// musicUrl: 'http://gicdev.demogic.com//api-marketing/upload-game-music',
accept: 'image/jpg,image/jpeg,image/png,image/gif', accept: 'image/jpg,image/jpeg,image/png,image/gif',
maxlength: 1 // 图片数量 默认 5 maxlength: 1 // 图片数量 默认 5
}; };
...@@ -351,9 +406,6 @@ export default { ...@@ -351,9 +406,6 @@ export default {
mounted(){ mounted(){
console.log(this.$route); console.log(this.$route);
const { id } = this.$route.query; const { id } = this.$route.query;
this.isImg.forEach(item=>{
this.form[item] = {};
});
if(id){ if(id){
this.getDetail(); this.getDetail();
} }
...@@ -420,16 +472,48 @@ export default { ...@@ -420,16 +472,48 @@ export default {
} }
return true; return true;
}, },
onValChange(){
const { viewPrize, changeType } = this.form;
this.handlePrizeStyleJson(changeType == 1 ? viewPrize : 1);
},
handlePrizeStyleJson(val){
let length = this.form.prizeStyleJson.length;
if(length > val){
this.form.prizeStyleJson = this.form.prizeStyleJson.splice(0, val);
}else{
for(let i = 0;i < val - length;i++){
this.form.prizeStyleJson.push({
imageNoSelectUrl: '',
imageSelectUrl: '',
imageNoSelectUrlList: [],
imageSelectUrlList: []
});
}
}
console.log(this.form.prizeStyleJson);
},
beforeMusicUpload(file){
return true;
},
uploadOnMusicSuccess(res){
console.log(res);
res = { 'gameMusicId': null, 'gameId': null, 'enterpriseId': null, 'musicName': 'test1.mp3', 'musicUrl': 'https://music-1251519181.cos.ap-shanghai.myqcloud.com/ff8080816a36326c016a53380d8b5f52/1655627297310_test1.mp3', 'musicFieldCode': 'ff8080816a36326c016a53380d8b5f52/1655627297310_test1.mp3' };
const { musicName, musicUrl } = res;
this.musicList.push({ materialName: musicName, materialValue: musicUrl, sort: 0 });
this.musicSelectList.push(musicUrl);
},
uploadOnSuccess({ res }, name, index, listName) { uploadOnSuccess({ res }, name, index, listName) {
if(listName == 'prizeStyleJson'){ if(listName == 'prizeStyleJson'){
this.form.prizeStyleJson[index][name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ] ; this.form.prizeStyleJson[index][name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ] ;
this.form.prizeStyleJson[index][name] = res.result[ 0 ].qcloudImageUrl;
this.form.prizeStyleJson = this.form.prizeStyleJson.splice(0); this.form.prizeStyleJson = this.form.prizeStyleJson.splice(0);
this.$refs.form.validateField(`prizeStyleJson.${index}.${name}`);
}else{ }else{
this.form[name].materialValue = res.result[0].qcloudImageUrl || ''; this.form[name].materialValue = res.result[0].qcloudImageUrl || '';
this.imageList[name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ]; this.imageList[name + 'List'] = [ { url: res.result[ 0 ].qcloudImageUrl } ];
this.$refs.form.validateField(`${name}.materialValue`);
} }
console.log(this.form);
console.log(this.imageList);
}, },
deleteImage(name, index, listName) { deleteImage(name, index, listName) {
console.log(name, index, listName); console.log(name, index, listName);
...@@ -450,21 +534,22 @@ export default { ...@@ -450,21 +534,22 @@ export default {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}, },
nextStep() { nextStep() {
this.$refs.form.validate(bool=>{ this.$refs.form.validate((bool, res)=>{
if(!bool)return; console.log(res);
if (!bool) {
this.scrollToError(this);
return;
}
const gameExt = { prizeStyleJson: {} }; const gameExt = { prizeStyleJson: {} };
Object.keys(this.form).forEach(key => { Object.keys(this.form).forEach(key => {
if(this.isImg.includes(key)){ if(this.isImg.includes(key)){
const val = this.form[key]; const val = this.form[key];
let obj = { materialValue: val.materialValue, materialKey: key }; let obj = { materialValue: val.materialValue, materialKey: key };
val.materialId ? obj.materialId = val.materialId : ''; val.materialId ? obj.materialId = val.materialId : '';
if(!val.materialName){ !val.materialName ? obj.materialName = this.materialNameMap[key] : obj.materialName = val.materialName;
obj.sort = 0; val.sort ? obj.sort = val.sort : obj.sort = 0;
obj.materialName = this.materialNameMap[key];
}else{
obj.materialName = val.materialName;
obj.sort = val.sort;
}
gameExt[key] = obj; gameExt[key] = obj;
} }
if(key == 'noticeImageUrl'){ if(key == 'noticeImageUrl'){
...@@ -473,8 +558,9 @@ export default { ...@@ -473,8 +558,9 @@ export default {
} }
}); });
let prizeStyleJson = []; let prizeStyleJson = [];
this.form.prizeStyleJson.forEach(item=>{ this.form.prizeStyleJson.forEach((item, index)=>{
const { imageNoSelectUrl, imageSelectUrl, index } = item; const { imageNoSelectUrl, imageSelectUrl } = item;
console.log(item);
prizeStyleJson.push({ imageNoSelectUrl, imageSelectUrl, index }); prizeStyleJson.push({ imageNoSelectUrl, imageSelectUrl, index });
}); });
gameExt.prizeStyleJson.materialKey = 'prizeStyleJson'; gameExt.prizeStyleJson.materialKey = 'prizeStyleJson';
...@@ -494,16 +580,24 @@ export default { ...@@ -494,16 +580,24 @@ export default {
} }
}); });
const { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize } = this.form; const { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize } = this.form;
let data = { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize }; let data = { templateId, templateType: templateType ? templateType : this.$route.params.type, templateName, prizeMax, prizeMin, sort, viewPrize };
data.gameTemplateMaterialList = [ ...Object.values(gameExt), ...musicExt ]; data.gameTemplateMaterialList = [ ...Object.values(gameExt), ...musicExt ];
fetch.initTemplate(data).then(res=>{ fetch.initTemplate(data).then(res=>{
console.log(res); this.$message.success('保存成功');
this.$router.go(-1);
}); });
}); });
}, },
handleChange(val){ handleChange(val){
console.log(val); console.log(val);
} }
},
computed: {
musicUrl(){
let origin = window.location.origin;
origin = (origin.indexOf('localhost') >= 0 || origin.indexOf('192.168') >= 0 ) ? 'https://www.gicdev.com' : origin;
return origin + '/marketing-operation/upload-img';
}
} }
}; };
</script> </script>
......
src/views/activity/template-list.vue
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="模板名称" min-width="290px" prop="templateName"> </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="310px" prop="viewPrize"> </el-table-column>
<el-table-column label="模板状态" min-width="306px" prop="statusFlag"> <el-table-column label="模板状态" min-width="306px" prop="statusFlag">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-switch v-model="row.statusFlag" @change="handleSwitch(row.statusFlag, row.templateId)" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="row.statusFlag" @change="handleSwitch(row.statusFlag, row.templateId)" :active-value="1" :inactive-value="0"></el-switch>
...@@ -101,6 +101,8 @@ export default { ...@@ -101,6 +101,8 @@ export default {
}).then(() => { }).then(() => {
fetch.updateTemplateStatus({ statusFlag, templateId }).then((res) => { fetch.updateTemplateStatus({ statusFlag, templateId }).then((res) => {
this.getList(); this.getList();
}).catch(_=>{
this.list.filter(item=>item.templateId == templateId)[0].statusFlag = statusFlag == 0 ? 1 : 0;
}); });
}); });
}, },
......
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