Skip to content

M
marketing-opeartion
Commit 873f8455 by crushh
Options

update: dist

parent f860c1e6
Showing with 90 additions and 29 deletions
src/styles/component.less
...@@ -38,6 +38,9 @@ ...@@ -38,6 +38,9 @@
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mb8{
margin-bottom: 8px;
}
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -56,6 +59,9 @@ ...@@ -56,6 +59,9 @@
.pb10{ .pb10{
padding-bottom: 10px; padding-bottom: 10px;
} }
.lh20{
line-height: 20px;
}
.border-bottom{ .border-bottom{
border-bottom: 1px solid #E4E7ED; border-bottom: 1px solid #E4E7ED;
} }
...@@ -146,3 +152,8 @@ ...@@ -146,3 +152,8 @@
opacity: 0.5 opacity: 0.5
} }
} }
.el-upload--picture-card{
width: 80px;
height: 80px;
line-height: 80px;
}
\ No newline at end of file
src/views/activity/template-detail.vue
...@@ -19,11 +19,16 @@ ...@@ -19,11 +19,16 @@
</vue-gic-upload-image> </vue-gic-upload-image>
<p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p> <p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p>
</el-form-item> </el-form-item>
<el-form-item label="游戏规则背景" prop="ruleImageUrl.materialValue" :rules="[{ required: true, message: '请上传' } ]"> <el-form-item label="游戏规则背景" prop="bgHelpUrl.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.bgHelpUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png,image/gif" :before-upload="(file) => beforeUpload(file, 2)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'bgHelpUrl')" @deleteImage="deleteImage('bgHelpUrl')" preview-append-to-body>
</vue-gic-upload-image> </vue-gic-upload-image>
<p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p> <p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p>
</el-form-item> </el-form-item>
<el-form-item label="氛围弹幕" prop="bulletImageUrl.materialValue" :rules="[{ required: true, message: '请上传' } ]">
<vue-gic-upload-image :project-name="projectName" is-yw :action-url="actionUrl" :image-list="imageList.bulletImageUrlList" max-image-length="1" accept="image/jpg,image/jpeg,image/png" :before-upload="(file) => beforeUpload(file, 1,1)" @uploadOnSuccess="(data) => uploadOnSuccess(data, 'bulletImageUrl')" @deleteImage="deleteImage('bulletImageUrl')" preview-append-to-body>
</vue-gic-upload-image>
<p class="tips mt6">图片建议尺寸 519*72px，格式 jpg/jpeg/png，大小 1M 以内。</p>
</el-form-item>
<el-form-item label="游戏背景音乐" prop="backMusicUrl"> <el-form-item label="游戏背景音乐" prop="backMusicUrl">
<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>
...@@ -57,23 +62,28 @@ ...@@ -57,23 +62,28 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="奖项图片" required> <el-form-item label="奖项图片" required>
<div v-for="(item, index) in form.prizeStyleJson" :key="index"> <div :class="[form.changeType==1?'multiBox':'']">
<p class="tips mb10" v-show="form.changeType==1">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p>
<div v-for="(item, index) in form.prizeStyleJson" :key="index" class="multiBox-line">
<div class="mr20 lh20 mt10" v-show="form.changeType==1">盲盒{{index+1}}</div>
<div class="flex-gap"> <div class="flex-gap">
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0" :rules="[{required:true,message:'请上传'}]"> <el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0" :style="form.changeType==0?'margin: 0':''" :rules="[{required:true,message:'请上传'}]">
<div class="flex-column"> <div :class="['flex-column',form.changeType==1?'multi':'']">
<span class="mb8">未选中</span> <span class="mb8 lh20">未选中</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" required :rules="[{required:true,message:'请上传'}]"> <el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageSelectUrl'" label-width="0" :style="form.changeType==0?'margin: 0':''" required :rules="[{required:true,message:'请上传'}]">
<div class="flex-column"> <div :class="['flex-column',form.changeType==1?'multi':'']">
<span class="mb8">选中</span> <span class="mb8 lh20">选中</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>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
<p class="tips mt6">图片格式 jpg/jpeg/png/gif，大小 1M 以内。</p> </div>
<p class="tips mt6" v-show="form.changeType==0">图片格式 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="tipss ml18">开启则表示支持用户更换此处模板内默认奖项样式</span> </el-form-item> --> <!-- <el-form-item label="更换奖项样式"> <el-switch v-model="form.canChangePrizeStyle"></el-switch><span class="tipss ml18">开启则表示支持用户更换此处模板内默认奖项样式</span> </el-form-item> -->
</div> </div>
...@@ -125,7 +135,7 @@ ...@@ -125,7 +135,7 @@
<el-form-item :rules="[{ required: true, message: '请上传' } ]" :prop="item.prop+'.materialValue'" 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" :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" :before-upload="(file) => beforeUpload(file,1,1)" @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>
...@@ -136,12 +146,12 @@ ...@@ -136,12 +146,12 @@
<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="[{ required: true, message: '请上传' } ]" :prop="item.prop+'.materialValue'" 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,1,item.prop=='bgBannerHelpUrl'?0:1)" @uploadOnSuccess="(data) => uploadOnSuccess(data, item.prop)" @deleteImage="deleteImage(item.prop)" preview-append-to-body> </vue-gic-upload-image>
<p class="tips mt6">{{ item.tips }}</p> <p class="tips mt6">{{ item.tips }}</p>
</el-form-item> </el-form-item>
</div> </div>
<div class="dm-form-bottom"> <div class="dm-form-bottom">
<el-button type="primary" @click="nextStep">保存</el-button> <el-button type="primary" @click="nextStep" :loading="loading">保存</el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
...@@ -209,7 +219,7 @@ export default { ...@@ -209,7 +219,7 @@ export default {
form: { form: {
templateName: '', templateName: '',
backImageUrl: { materialValue: '' }, backImageUrl: { materialValue: '' },
ruleImageUrl: { materialValue: '' }, bgHelpUrl: { materialValue: '' },
noticeImageUrl: { materialValue: '' }, noticeImageUrl: { materialValue: '' },
myPointImageUrl: { materialValue: '' }, myPointImageUrl: { materialValue: '' },
resetTimeImageUrl: { materialValue: '' }, resetTimeImageUrl: { materialValue: '' },
...@@ -223,6 +233,7 @@ export default { ...@@ -223,6 +233,7 @@ export default {
shareCard: { materialValue: '' }, shareCard: { materialValue: '' },
shareReport: { materialValue: '' }, shareReport: { materialValue: '' },
bgBannerHelpUrl: { materialValue: '' }, bgBannerHelpUrl: { materialValue: '' },
bulletImageUrl: { materialValue: '' },
prizeStyleJson: [ prizeStyleJson: [
{ {
imageNoSelectUrl: '', imageNoSelectUrl: '',
...@@ -328,11 +339,12 @@ export default { ...@@ -328,11 +339,12 @@ export default {
prop: 'bgBannerHelpUrl', prop: 'bgBannerHelpUrl',
rule: { required: false, message: '请上传' }, rule: { required: false, message: '请上传' },
tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。' tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
} },
], ],
imageList: { imageList: {
backImageUrlList: [], backImageUrlList: [],
ruleImageUrlList: [], bgHelpUrlList: [],
noticeImageUrlList: [], noticeImageUrlList: [],
myPointImageUrlList: [], myPointImageUrlList: [],
resetTimeImageUrlList: [], resetTimeImageUrlList: [],
...@@ -346,10 +358,11 @@ export default { ...@@ -346,10 +358,11 @@ export default {
shareCardList: [], shareCardList: [],
shareReportList: [], shareReportList: [],
bgBannerHelpUrlList: [], bgBannerHelpUrlList: [],
bulletImageUrlList: []
}, },
isImg: [ isImg: [
'backImageUrl', 'backImageUrl',
'ruleImageUrl', 'bgHelpUrl',
'noticeImageUrl', 'noticeImageUrl',
'myPointImageUrl', 'myPointImageUrl',
'resetTimeImageUrl', 'resetTimeImageUrl',
...@@ -362,11 +375,12 @@ export default { ...@@ -362,11 +375,12 @@ export default {
'virtutalGiftImgUrl', 'virtutalGiftImgUrl',
'shareCard', 'shareCard',
'shareReport', 'shareReport',
'bgBannerHelpUrl' 'bgBannerHelpUrl',
'bulletImageUrl'
], ],
materialNameMap: { materialNameMap: {
'backImageUrl': '背景图', 'backImageUrl': '背景图',
'ruleImageUrl': '游戏规则背景', 'bgHelpUrl': '游戏规则背景',
'noticeImageUrl': '提示样式图', 'noticeImageUrl': '提示样式图',
'myPointImageUrl': '我的积分', 'myPointImageUrl': '我的积分',
'resetTimeImageUrl': '剩余次数', 'resetTimeImageUrl': '剩余次数',
...@@ -380,10 +394,11 @@ export default { ...@@ -380,10 +394,11 @@ export default {
'shareCard': '小程序卡片图片 ', 'shareCard': '小程序卡片图片 ',
'shareReport': '分享海报', 'shareReport': '分享海报',
'bgBannerHelpUrl': '助力背景Banner', 'bgBannerHelpUrl': '助力背景Banner',
'bulletImageUrl': '氛围弹幕图'
}, },
sizeMap: { sizeMap: {
'backImageUrl': { width: 750, height: 1800, size: 2 }, 'backImageUrl': { width: 750, height: 1800, size: 2 },
'ruleImageUrl': { width: 750, height: 1800, size: 2 }, 'bgHelpUrl': { width: 750, height: 1800, size: 2 },
'cashCouponImgUrl': { width: 300, height: 300, size: 1 }, 'cashCouponImgUrl': { width: 300, height: 300, size: 1 },
'discountCouponImgUrl': { width: 300, height: 300, size: 1 }, 'discountCouponImgUrl': { width: 300, height: 300, size: 1 },
'exchangeCouponImgUrl': { width: 300, height: 300, size: 1 }, 'exchangeCouponImgUrl': { width: 300, height: 300, size: 1 },
...@@ -426,6 +441,8 @@ export default { ...@@ -426,6 +441,8 @@ export default {
{ 'id': '3113', 'materialKey': 'backMusicUrl', 'materialName': '春节2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/春节2.mp3', { 'id': '3113', 'materialKey': 'backMusicUrl', 'materialName': '春节2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/春节2.mp3',
'sort': 0 } 'sort': 0 }
], ],
gameTemplateMaterialList: [],
loading: false,
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', // musicUrl: 'http://gicdev.demogic.com//api-marketing/upload-game-music',
...@@ -487,6 +504,7 @@ export default { ...@@ -487,6 +504,7 @@ export default {
this.form.noticeImageUrlH = size.height; this.form.noticeImageUrlH = size.height;
} }
}); });
this.gameTemplateMaterialList = gameTemplateMaterialList;
this.musicList = Object.values(obj); this.musicList = Object.values(obj);
this.form = Object.assign(this.form, { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize }); this.form = Object.assign(this.form, { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize });
...@@ -494,16 +512,19 @@ export default { ...@@ -494,16 +512,19 @@ export default {
console.log(this.imageList); console.log(this.imageList);
}); });
}, },
beforeUpload(file, size = 1) { beforeUpload(file, size = 1, nogif) {
console.log(file, file.size / 1024 / 1024); console.log(file, file.size / 1024 / 1024);
if (file.size / 1024 / 1024 > size) { let arr = [ 'image/jpg', 'image/jpeg', 'image/png' ];
this.$message.error(`图片不能大于${size}M，请重新上传！`); !nogif ? arr.push( 'image/gif') : '';
if(!arr.includes(file.type )){
this.$message.error(`请上传${nogif ? 'jpg/jpeg/png' : 'jpg/jpeg/png/gif'}格式的图片！`);
return false; return false;
} }
if(![ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ].includes(file.type )){ if (file.size / 1024 / 1024 > size) {
this.$message.error('请上传jpg/jpeg/png/gif格式的图片！'); this.$message.error(`图片不能大于${size}M，请重新上传！`);
return false; return false;
} }
return true; return true;
}, },
onValChange(){ onValChange(){
...@@ -575,11 +596,11 @@ export default { ...@@ -575,11 +596,11 @@ export default {
nextStep() { nextStep() {
this.$refs.form.validate((bool, res)=>{ this.$refs.form.validate((bool, res)=>{
console.log(res); console.log(res);
if (!bool) { if (!bool) {
this.scrollToError(this); this.scrollToError(this);
return; 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)){
...@@ -610,20 +631,33 @@ export default { ...@@ -610,20 +631,33 @@ export default {
this.form.prizeStyleJsonMaterialId ? gameExt.prizeStyleJson.materialId = this.form.prizeStyleJsonMaterialId : ''; this.form.prizeStyleJsonMaterialId ? gameExt.prizeStyleJson.materialId = this.form.prizeStyleJsonMaterialId : '';
let musciObj = {}; let musciObj = {};
let musicExt = []; let musicExt = [];
this.musicSelectList.forEach(item=>musciObj[item] = item); this.musicSelectList.forEach((item, index)=>{
this.musicList.forEach(item=>{ musciObj[item] = { val: item, index: index };
});
this.musicList.forEach((item)=>{
if(musciObj[item.materialValue]){ if(musciObj[item.materialValue]){
const obj = { materialValue: item.materialValue, materialKey: 'backMusicUrl', materialName: item.materialName, sort: item.sort }; const obj = { materialValue: item.materialValue, materialKey: 'backMusicUrl', materialName: item.materialName, sort: musciObj[item.materialValue].index };
item.materialId ? obj.materialId = item.materialId : ''; item.materialId ? obj.materialId = item.materialId : '';
musicExt.push(obj); musicExt.push(obj);
} }
}); });
const { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize } = this.form; const { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize } = this.form;
let data = { templateId, templateType: templateType ? templateType : this.$route.params.type, templateName, prizeMax, prizeMin, sort: sort ? sort : 0, viewPrize }; let data = { templateId, templateType: templateType ? templateType : this.$route.params.type, templateName, prizeMax, prizeMin, sort: sort ? sort : 0, viewPrize };
if(templateId){ // 后端回显时新加的素材,塞回去
let keys = [ ...this.isImg, 'prizeStyleJson', 'noticeImageUrl', 'backMusicUrl' ];
this.gameTemplateMaterialList.forEach(item=>{
if(!keys.includes(item.materialKey)){
gameExt[item.materialKey] = item;
}
});
}
data.gameTemplateMaterialList = [ ...Object.values(gameExt), ...musicExt ]; data.gameTemplateMaterialList = [ ...Object.values(gameExt), ...musicExt ];
this.loading = true;
fetch.initTemplate(data).then(res=>{ fetch.initTemplate(data).then(res=>{
this.$message.success('保存成功'); this.$message.success('保存成功');
this.$router.go(-1); this.$router.go(-1);
}).finally(_=>{
this.loading = false;
}); });
}); });
}, },
...@@ -658,6 +692,19 @@ export default { ...@@ -658,6 +692,19 @@ export default {
display: flex; display: flex;
gap:20px; gap:20px;
} }
.multiBox{
width: fit-content;
border: 1px solid #DCDFE6;
padding: 10px 20px;
}
.multiBox-line{
display: flex;
align-items: flex-start;
}
.multi{
padding: 10px 20px 20px 20px;
background: #F7F8FA;
}
.flex-column { .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -689,4 +736,5 @@ export default { ...@@ -689,4 +736,5 @@ export default {
width: calc( 100% - 200px); width: calc( 100% - 200px);
box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6); box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment