<template>
|
<div>
|
<h4>页面展示</h4>
|
<hr />
|
<el-form size="mini" ref="pageDisplayForm" :disabled="$route.name==='blindBoxActInfo'"
|
label-width="120px" :rules="formRules" :model="pageDisplayForm">
|
<el-form-item label="主背景色：" prop="bgColor">
|
<el-input class="blindBoxInputC" v-model="pageDisplayForm.bgColor" type="color">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="背景图片：" prop="backgroundFileId">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(bgfileList,file,'backgroundFileId')"
|
@handle-remove="(file)=>handleRemove('bgfileList',file,'backgroundFileId')"
|
:isHideDelete="$route.name!=='blindBoxActInfo'" :fileList="bgfileList"
|
fileTip="建议尺寸750*3560像素，支持JPG、PNG、JPEG格式"></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="展现形式：" required prop="showType">
|
<el-select :popper-append-to-body="false" disabled class="custom-selet-style"
|
v-model="pageDisplayForm.showType">
|
<el-option label="宫格图" value="1"></el-option>
|
<el-option label="整图" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="盲盒数量：" v-if="pageDisplayForm.showType==='1'" prop="blindBoxNum">
|
<el-select :popper-append-to-body="false" disabled class="custom-selet-style"
|
v-model="pageDisplayForm.blindBoxNum">
|
<el-option label="3个" value="1"></el-option>
|
<el-option label="6个" value="2"></el-option>
|
<el-option label="9个" value="3"></el-option>
|
<el-option label="12个" value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="盲盒静态图" prop="blindBoxFileId"
|
:rules="{required:true,message:'请上传盲盒静态图片'}">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(blindBoxFileList,file,'blindBoxFileId')"
|
@handle-remove="(file)=>handleRemove('blindBoxFileList',file,'blindBoxFileId')"
|
:isHideDelete="$route.name!=='blindBoxActInfo'"
|
thumbnailImageWidth="328px" thumbnailImageHeight="104px"
|
:fileList="blindBoxFileList" :fileTip="getFileTip(1,'JPG、PNG、JPEG')">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="盲盒动态图" prop="blindBoxGifFileId"
|
:rules="{required:true,message:'请上传盲盒动态图片'}">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(blindBoxGifFileList,file,'blindBoxGifFileId')"
|
@handle-remove="(file)=>handleRemove('blindBoxGifFileList',file,'blindBoxGifFileId')"
|
:isHideDelete="$route.name!=='blindBoxActInfo'" accept=".gif"
|
thumbnailImageWidth="328px" thumbnailImageHeight="104px"
|
:fileList="blindBoxGifFileList" :fileTip="getFileTip(2,'GIF')">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="中奖播报：" prop="broadcast">
|
<el-radio-group v-model="pageDisplayForm.broadcast">
|
<el-radio label="1">展示</el-radio>
|
<el-radio label="2">不展示</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="活动规则：" prop="promotionRuledesc">
|
<el-input class="blindBoxActivityInput" v-model="pageDisplayForm.promotionRuledesc"
|
type="textarea" :autosize="{minRows:2,maxRows:4}" placeholder="请输入活动规则" clearable
|
maxlength="300" show-word-limit></el-input>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="规则背景色：" prop="promotionRuleStyle.ruleBgColor">
|
<el-input class="blindBoxInputC"
|
v-model="pageDisplayForm.promotionRuleStyle.ruleBgColor" type="color">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="规则文字颜色：" prop="promotionRuleStyle.ruleTextColor">
|
<el-input class="blindBoxInputC"
|
v-model="pageDisplayForm.promotionRuleStyle.ruleTextColor" type="color">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="规则文字大小：" prop="promotionRuleStyle.ruleTextSize">
|
<el-input-number v-model="pageDisplayForm.promotionRuleStyle.ruleTextSize" :min="12">
|
</el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="规则圆角大小：" prop="promotionRuleStyle.ruleRadiusSize">
|
<el-input-number v-model="pageDisplayForm.promotionRuleStyle.ruleRadiusSize" :min="0">
|
</el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { handleSuccess, handleRemove } from '../index'
|
export default {
|
data() {
|
return {
|
pageDisplayForm: {
|
backgroundFileId: null,
|
bgColor: '#d9915b',
|
showType: '1',
|
broadcast: '1',
|
blindBoxFileId: null,
|
blindBoxGifFileId: null,
|
blindBoxNum: '1',
|
promotionRuledesc: null,
|
promotionRuleStyle: {
|
ruleBgColor: '#fdeed3',
|
ruleTextColor: '#d9915b',
|
ruleTextSize: 12,
|
ruleRadiusSize: 12,
|
}
|
},
|
isDisabled: false,
|
bgfileList: [], // 背景图片
|
blindBoxFileList: [], // 盲盒静态图片
|
blindBoxGifFileList: [], // 盲盒动态图片
|
formRules: {
|
bgColor: [{ required: true, message: '请选择主背景色' }],
|
backgroundFileId: [{ required: true, message: '请选择背景图片' }],
|
promotionRuledesc: [{ required: true, message: '请输入活动规则' }],
|
blindBoxNum: [{ required: true, message: '请选择盲盒数量' }]
|
},
|
blindBoxImgTip: null
|
}
|
},
|
created() {
|
if (this.$route.name === 'proPublicityInfo') {
|
this.isDisabled = true
|
}
|
},
|
methods: {
|
getFileTip(num, format) {
|
const _text = num === 1 ? '静态' : '动画';
|
let str = '<p>提示：</p>'
|
str += `<p>1、建议尺寸746*171像素，支持${format}格式</p>`
|
str += `<p>2、用于盲盒活动页盲盒抽奖区${_text}展示</p>`
|
return str
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(arr, data, key) {
|
handleSuccess(this, this.pageDisplayForm, 'pageDisplayForm', arr, data, key)
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(arrKey, data, key) {
|
this[arrKey] = handleRemove(this.pageDisplayForm, this[arrKey], data, key)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.blindBoxInputC {
|
.el-input__inner {
|
width: 50px !important;
|
padding: 0px !important;
|
border-radius: 0;
|
border-color: #dcdfe6;
|
}
|
}
|
</style>
|
