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 @@
.mt20 {
margin-top: 20px;
}
.mb8{
margin-bottom: 8px;
}
.mb20 {
margin-bottom: 20px;
}
......@@ -56,6 +59,9 @@
.pb10{
padding-bottom: 10px;
}
.lh20{
line-height: 20px;
}
.border-bottom{
border-bottom: 1px solid #E4E7ED;
}
......@@ -146,3 +152,8 @@
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 @@
</vue-gic-upload-image>
<p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内。</p>
</el-form-item>
<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>
<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.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>
<p class="tips mt6">图片建议尺寸 750*1800px，格式 jpg/jpeg/png/gif，大小 2M 以内；图片还适用于我的奖品、分享助力等页面。</p>
</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-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>
......@@ -57,23 +62,28 @@
</el-radio-group>
</el-form-item>
<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">
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0" :rules="[{required:true,message:'请上传'}]">
<div class="flex-column">
<span class="mb8">未选中</span>
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageNoSelectUrl'" label-width="0" :style="form.changeType==0?'margin: 0':''" :rules="[{required:true,message:'请上传'}]">
<div :class="['flex-column',form.changeType==1?'multi':'']">
<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>
</div>
</el-form-item>
<el-form-item :prop="'prizeStyleJson.' + index + '.' + 'imageSelectUrl'" label-width="0" required :rules="[{required:true,message:'请上传'}]">
<div class="flex-column">
<span class="mb8">选中</span>
<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',form.changeType==1?'multi':'']">
<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>
</div>
</el-form-item>
</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 label="更换奖项样式"> <el-switch v-model="form.canChangePrizeStyle"></el-switch><span class="tipss ml18">开启则表示支持用户更换此处模板内默认奖项样式</span> </el-form-item> -->
</div>
......@@ -125,7 +135,7 @@
<el-form-item :rules="[{ required: true, message: '请上传' } ]" :prop="item.prop+'.materialValue'" label-width="0">
<div class="flex-column">
<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>
</el-form-item>
</div>
......@@ -136,12 +146,12 @@
<dm-sub-title type="fill">分享样式设计</dm-sub-title>
<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">
<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>
</el-form-item>
</div>
<div class="dm-form-bottom">
<el-button type="primary" @click="nextStep">保存</el-button>
<el-button type="primary" @click="nextStep" :loading="loading">保存</el-button>
</div>
</el-form>
</div>
......@@ -209,7 +219,7 @@ export default {
form: {
templateName: '',
backImageUrl: { materialValue: '' },
ruleImageUrl: { materialValue: '' },
bgHelpUrl: { materialValue: '' },
noticeImageUrl: { materialValue: '' },
myPointImageUrl: { materialValue: '' },
resetTimeImageUrl: { materialValue: '' },
......@@ -223,6 +233,7 @@ export default {
shareCard: { materialValue: '' },
shareReport: { materialValue: '' },
bgBannerHelpUrl: { materialValue: '' },
bulletImageUrl: { materialValue: '' },
prizeStyleJson: [
{
imageNoSelectUrl: '',
......@@ -328,11 +339,12 @@ export default {
prop: 'bgBannerHelpUrl',
rule: { required: false, message: '请上传' },
tips: '图片建议尺寸 590*120px，格式 jpg/jpeg/png/gif，大小 1M 以内。'
}
},
],
imageList: {
backImageUrlList: [],
ruleImageUrlList: [],
bgHelpUrlList: [],
noticeImageUrlList: [],
myPointImageUrlList: [],
resetTimeImageUrlList: [],
......@@ -346,10 +358,11 @@ export default {
shareCardList: [],
shareReportList: [],
bgBannerHelpUrlList: [],
bulletImageUrlList: []
},
isImg: [
'backImageUrl',
'ruleImageUrl',
'bgHelpUrl',
'noticeImageUrl',
'myPointImageUrl',
'resetTimeImageUrl',
......@@ -362,11 +375,12 @@ export default {
'virtutalGiftImgUrl',
'shareCard',
'shareReport',
'bgBannerHelpUrl'
'bgBannerHelpUrl',
'bulletImageUrl'
],
materialNameMap: {
'backImageUrl': '背景图',
'ruleImageUrl': '游戏规则背景',
'bgHelpUrl': '游戏规则背景',
'noticeImageUrl': '提示样式图',
'myPointImageUrl': '我的积分',
'resetTimeImageUrl': '剩余次数',
......@@ -380,10 +394,11 @@ export default {
'shareCard': '小程序卡片图片 ',
'shareReport': '分享海报',
'bgBannerHelpUrl': '助力背景Banner',
'bulletImageUrl': '氛围弹幕图'
},
sizeMap: {
'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 },
'discountCouponImgUrl': { width: 300, height: 300, size: 1 },
'exchangeCouponImgUrl': { width: 300, height: 300, size: 1 },
......@@ -426,6 +441,8 @@ export default {
{ 'id': '3113', 'materialKey': 'backMusicUrl', 'materialName': '春节2', 'materialValue': 'https://music-1251519181.cossh.myqcloud.com/game/春节2.mp3',
'sort': 0 }
],
gameTemplateMaterialList: [],
loading: false,
projectName: 'marketing-operation', // 当前项目名(必传参数)
actionUrl: '/marketing-operation/upload-img',
// musicUrl: 'http://gicdev.demogic.com//api-marketing/upload-game-music',
......@@ -487,6 +504,7 @@ export default {
this.form.noticeImageUrlH = size.height;
}
});
this.gameTemplateMaterialList = gameTemplateMaterialList;
this.musicList = Object.values(obj);
this.form = Object.assign(this.form, { templateId, templateType, templateName, prizeMax, prizeMin, sort, viewPrize });
......@@ -494,16 +512,19 @@ export default {
console.log(this.imageList);
});
},
beforeUpload(file, size = 1) {
beforeUpload(file, size = 1, nogif) {
console.log(file, file.size / 1024 / 1024);
if (file.size / 1024 / 1024 > size) {
this.$message.error(`图片不能大于${size}M，请重新上传！`);
let arr = [ 'image/jpg', 'image/jpeg', 'image/png' ];
!nogif ? arr.push( 'image/gif') : '';
if(!arr.includes(file.type )){
this.$message.error(`请上传${nogif ? 'jpg/jpeg/png' : 'jpg/jpeg/png/gif'}格式的图片！`);
return false;
}
if(![ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ].includes(file.type )){
this.$message.error('请上传jpg/jpeg/png/gif格式的图片！');
if (file.size / 1024 / 1024 > size) {
this.$message.error(`图片不能大于${size}M，请重新上传！`);
return false;
}
return true;
},
onValChange(){
......@@ -575,11 +596,11 @@ export default {
nextStep() {
this.$refs.form.validate((bool, res)=>{
console.log(res);
if (!bool) {
this.scrollToError(this);
return;
}
const gameExt = { prizeStyleJson: {} };
Object.keys(this.form).forEach(key => {
if(this.isImg.includes(key)){
......@@ -610,20 +631,33 @@ export default {
this.form.prizeStyleJsonMaterialId ? gameExt.prizeStyleJson.materialId = this.form.prizeStyleJsonMaterialId : '';
let musciObj = {};
let musicExt = [];
this.musicSelectList.forEach(item=>musciObj[item] = item);
this.musicList.forEach(item=>{
this.musicSelectList.forEach((item, index)=>{
musciObj[item] = { val: item, index: index };
});
this.musicList.forEach((item)=>{
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 : '';
musicExt.push(obj);
}
});
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 };
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 ];
this.loading = true;
fetch.initTemplate(data).then(res=>{
this.$message.success('保存成功');
this.$router.go(-1);
}).finally(_=>{
this.loading = false;
});
});
},
......@@ -658,6 +692,19 @@ export default {
display: flex;
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 {
display: flex;
flex-direction: column;
......@@ -689,4 +736,5 @@ export default {
width: calc( 100% - 200px);
box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
}
</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