Skip to content

M
marketing
Commit d8ee24cd by crushh
Options

update: ui

parent f8481d84
Showing with 102 additions and 43 deletions
src/assets/style/base/reset.scss
......@@ -144,6 +144,9 @@ a:hover {
.mt5{
margin-top: 5px!important;
}
.mt6{
margin-top: 6px!important;
}
.mt10{
margin-top: 10px!important;
}
......@@ -701,4 +704,5 @@ img::after {
color: #303133;
width: 100%;
}
}
\ No newline at end of file
}
\ No newline at end of file
src/components/dm-new-member-group/index.vue
......@@ -17,7 +17,7 @@
<span class="groupName"> {{ item.groupName }}</span>
</div>
</div>
<el-dialog title="选择客户分组" :visible.sync="visiable" width="1000px" :before-close="close">
<el-dialog title="选择客户分组" :visible.sync="visiable" width="1000px" :before-close="close" custom-class="member-group-dialog" class="member-group-dialog-wrap">
<div class="member-group">
<div class="left">
<el-tabs v-model="activeName">
......@@ -252,9 +252,29 @@ export default {
</script>
<style lang="scss" scoped>
.member-group-dialog-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.member-group-dialog {
margin: 0 !important;
padding: 0 4px 4px;
max-height: 700px;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding-bottom: 0 !important;
}
.el-dialog__footer {
padding: 20px 0;
}
}
.delBtn {
color: #f5222d;
}
.space-between {
display: flex;
justify-content: space-between;
......
src/components/upload/avatar.vue
......@@ -76,6 +76,10 @@ export default {
height: 100
};
}
},
imgType: {
type: String,
default: 'jpg/png/gif'
}
},
data() {
......
src/directives/upload.js
......@@ -44,13 +44,21 @@ export default {
el.addEventListener('change', function(e) {
if (e.target.value) binding.value.loading = true;
else return;
console.log(binding.value);
console.log(el.files);
const size = binding.value.limit && binding.value.limit.maxSize ? binding.value.limit.maxSize : 2; // 默认最大2M限制
if (el.files[0].size > size * 1024 * 1024) {
binding.value.$tips({ type: 'warning', message: `上传${binding.value.fileType.indexOf('image') >= 0 ? '图片' : '文件'}不能大于${size}M` });
binding.value.loading = false;
return;
}
if (binding.value.imgType) {
const arr = binding.value.imgType.split('/');
if (!arr.includes(el.files[0].type.split('/')[1])) {
binding.value.$tips({ type: 'warning', message: `请上传${binding.value.imgType}类型` });
binding.value.loading = false;
return;
}
}
// 启用限制图片宽高大小
if (binding.value.limit && binding.value.limit.type) {
const { width, height } = binding.value.limit;
......
src/views/game/cmh/base-config.vue
......@@ -7,7 +7,7 @@
<el-form-item label="游戏说明" prop="gameRule"> <el-input maxlength="500" class="w382" v-model="baseForm.gameRule" show-word-limit :autosize="{ minRows: 4 }" type="textarea" /> </el-form-item>
</div>
<dm-sub-title type="line">展示信息配置</dm-sub-title>
<div class="mt20">
<div class="mt20" style="margin-bottom: 32px">
<el-form-item label="游戏模板" prop="templateId">
<el-radio-group @change="handleTemplateChange" v-model="baseForm.templateId" :disabled="isDisabled">
<el-radio v-for="item in templateData" :label="item.templateId" :key="item.templateId">{{ item.templateName }}</el-radio>
......@@ -21,7 +21,7 @@
</el-upload>
</div>
<div class="tips">图片建议尺寸{{ baseForm.backImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.backImageUrlSize1 }} M以内。</div>
<div class="tips mt6">图片建议尺寸{{ baseForm.backImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.backImageUrlSize1 }} M以内。</div>
</el-form-item>
<el-form-item label="抽奖样式">
<div class="lottery">
......@@ -63,7 +63,7 @@
<el-button type="text" class="ml16">替换图片</el-button>
</el-upload>
</div>
<div class="tips">图片建议尺寸 {{ baseForm.noticeImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.noticeImageUrlSize1 }}M以内。</div>
<div class="tips mt6">图片建议尺寸 {{ baseForm.noticeImageUrlSize0 }}，格式 jpg/png/gif，大小 {{ baseForm.noticeImageUrlSize1 }}M以内。</div>
</el-form-item>
<el-form-item label="背景音乐">
<el-switch v-model="baseForm.backMusicFlag" :active-value="1" :inactive-value="0" @change="handleDateChange" />
......@@ -82,7 +82,7 @@
<div class="tips mt10">开启后，如有三名及以上用户获奖后，活动首页将轮播展示用户中奖信息。</div>
</el-form-item>
<el-form-item label="广告位">
<el-switch v-model="baseForm.adsFlag" :active-value="1" :inactive-value="0" @change="handleDateChange" />
<el-switch v-model="baseForm.adsFlag" :active-value="1" :inactive-value="0" @change="handleDateChange(val, 'adsFlag')" />
<div class="adsImg" v-show="baseForm.adsFlag">
<el-form-item prop="adsImageUrl" :rules="rules.adsImageUrl" label-width="0">
<dm-upload-avatar class="upload-avatar" width="375" height="75" :limit="{ type: false, maxSize: 1 }" fileType="img" :model.sync="adsImageUrl" label="上传图片" tips="" @backImg="handleAdsChange" :unused="isInfo"></dm-upload-avatar>
......@@ -250,9 +250,21 @@ export default {
}
},
methods: {
handleDateChange(val) {
console.log(val);
handleDateChange(val, type) {
console.log(val, type);
this.$emit('change', this.baseForm);
if (type) {
this.$nextTick(_ => {
const adsImg = document.getElementsByClassName('adsImg');
adsImg[0].scrollIntoView({
// 滚动到指定节点
// 值有start,center,end，nearest，当前显示在视图区域中间
block: 'center',
// 值有auto、instant,smooth，缓动动画（当前是慢速的）
behavior: 'smooth'
});
});
}
},
handleTemplateChange(val) {
this.baseForm.templateId = val;
......@@ -485,6 +497,7 @@ img {
border-radius: 2px 0px 0px 2px;
box-sizing: border-box;
border-right: none;
color: #2f54eb;
}
.musicSelect {
width: 380px;
......
src/views/game/cmh/form.vue
......@@ -20,9 +20,9 @@
</el-menu>
<div class="iphone">
<span class="gameTitle">{{ gameName }}</span>
<img src="../../../assets/img/Navbar.png" alt="" />
<img src="../../../assets/img/Navbar.png" class="braImg" alt="" />
<gameTemplate :ruleData="ruleData" :templateId="templateId" :basicData="previewData" v-show="menuActive == 0" />
<img :src="computedImg" v-show="menuActive != 0" style="min-height:724px;" />
<img :src="computedImg" v-show="menuActive != 0" style="min-height:724px;margin-top: 70px;" />
</div>
</div>
<div class="rightForm" v-show="!isInfo">
......@@ -500,7 +500,7 @@ export default {
}
.gameTitle {
font-size: 17px;
position: absolute;
position: sticky;
color: #000000;
font-weight: 600;
z-index: 100;
......@@ -509,8 +509,13 @@ export default {
display: flex;
justify-content: center;
}
.braImg {
position: fixed;
z-index: 1;
top: 76px;
}
.rightForm {
padding: 30px 20px 0 30px;
padding: 30px 20px 0 20px;
box-sizing: border-box;
width: calc(100vw - 520px);
height: calc(100vh - 108px);
......@@ -518,7 +523,7 @@ export default {
.formContent {
margin-top: 20px;
overflow-y: auto;
height: 90%;
height: calc(100% - 66px);
}
}
</style>
src/views/game/cmh/gameTemplate.vue
......@@ -171,6 +171,7 @@ img {
}
.template-game {
height: 724px;
margin-top: 70px;
}
.bg-image {
width: 375px;
......
src/views/game/cmh/index.vue
......@@ -45,7 +45,7 @@
<el-button class="fr" type="primary" @click="addGame" v-if="$getButtonLimit($buttonCode.marketingCmhAdd)" :limit-code="$buttonCode.marketingCmhAdd">新建游戏</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-sticky="{ top: 96 }">
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" :height="tableH">
<el-table-column label="游戏名称" fixed="left" min-width="183px" prop="gameName" show-overflow-tooltip :formatter="(row, col, val) => val || '--'"></el-table-column>
<el-table-column label="游戏时间" min-width="134px">
<template slot-scope="{ row }">
......@@ -215,6 +215,12 @@ export default {
]
};
},
computed: {
tableH() {
const h = window.innerHeight - 218 - 82;
return h;
}
},
mounted() {
if (this.$route.meta.refresh) {
this.dateTime = [];
......
src/views/game/cmh/prize-config.vue
<template>
<el-form size="small" class="tableForm" :model="prizeForm" :rules="rules" ref="prizeForm" label-width="80px">
<el-form size="small" class="tableForm" :model="prizeForm" :rules="rules" ref="prizeForm" label-width="100px">
<dm-sub-title type="line" class="mb20">奖项配置</dm-sub-title>
<el-form-item label="总中奖率" prop="winChance">
<el-input class="w180" v-model.number="prizeForm.winChance" @change="calculateRate">
......@@ -7,7 +7,7 @@
</el-input>
</el-form-item>
<el-table class="mb10" :data="prizeForm.gamePrizeList" style="width:100%" row-key="sort" ref="sortTable" row-class-name="table-row">
<el-table :data="prizeForm.gamePrizeList" style="width:100%" row-key="sort" ref="sortTable" row-class-name="table-row">
<el-table-column width="40" label-class-name="tag-head">
<template>
<el-tooltip placement="top" content="拖动排序" trigger="hover" effect="dark" popper-class="drag-tooltip">
......@@ -74,7 +74,7 @@
<template slot-scope="{ row, $index }">
<div v-if="row.prizeType == 1 || row.prizeType == 2" style="width:60px;height:62px">
<el-form-item :prop="'gamePrizeList.' + $index + '.' + 'prizeImageUrl'" :rules="rules.prizeImageUrl" label-width="0">
<dm-upload-avatar class="upload-avatar" width="60" height="60" :limit="{ type: false, maxSize: 1 }" fileType="img" :model.sync="row.prizeImageUrl" tips="" :unused="isDisabled && row.isOld ? true : false"></dm-upload-avatar>
<dm-upload-avatar class="upload-avatar" width="60" height="60" :limit="{ type: false, maxSize: 1 }" fileType="img" imgType="jpg/png" :model.sync="row.prizeImageUrl" tips="" :unused="isDisabled && row.isOld ? true : false"></dm-upload-avatar>
</el-form-item>
</div>
<el-form-item label-width="0" v-else>
......@@ -130,14 +130,14 @@
</el-table-column>
</el-table>
<el-button @click="addPrize" class="mb10" size="small" style="border-style: dashed;" v-show="this.prizeForm.gamePrizeList.length < prizeMax"> <i class="iconfont icon-Plus" /> 添加奖项({{ this.prizeForm.gamePrizeList.length }}/{{ prizeMax }}) </el-button>
<el-form-item label="库存提醒">
<el-button @click="addPrize" class="mb20 mt16" size="small" style="border-style: dashed;" v-show="this.prizeForm.gamePrizeList.length < prizeMax"> <i class="iconfont icon-Plus" /> 添加奖项({{ this.prizeForm.gamePrizeList.length }}/{{ prizeMax }}) </el-button>
<el-form-item label="奖品数量提醒">
<el-switch v-model="prizeForm.prizeNoticeFlag" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="库存低于" v-show="prizeForm.prizeNoticeFlag == 1">
<el-form-item label="奖品数量低于" v-show="prizeForm.prizeNoticeFlag == 1">
<el-form-item prop="prizeNoticeStock">
<el-input class="w180" v-model.number="prizeForm.prizeNoticeStock" placeholder="请输入" />
<span class="ml10">件奖品库发送短信提醒</span>
<span class="ml10">件发送短信提醒</span>
<el-popover placement="right" width="200" trigger="hover" content="您创建的游戏（游戏名称）中（奖品名称）的奖品数量已低于（奖品数量）件，请及时关注并补充！">
<el-button slot="reference" type="text" class="ml16">查看短信内容 </el-button>
</el-popover>
......@@ -161,7 +161,7 @@ export default {
const prizeNoticeStockVal = (rule, value, callback) => {
if (this.prizeForm.prizeNoticeFlag == 1) {
if (!new RegExp('([1-9]{1}\\d{0,9})|(0{1})').test(value)) {
callback(new Error('最大值1000000'));
callback(new Error('请输入奖品数量'));
return;
}
if (value <= 0 || value > 1000000) {
......@@ -199,7 +199,7 @@ export default {
prizeRate: 100,
sort: 0,
prizeName: '谢谢参与',
prizeImageUrl: '',
prizeImageUrl: { imgUrl: '', code: '' },
prizeNumber: 1,
exchangeType: 0
}
......@@ -374,7 +374,7 @@ export default {
const data = this.prizeForm.gamePrizeList[index];
data.prizeName = '';
data.prizeRelationId = '';
data.prizeImageUrl = '';
data.prizeImageUrl = { imgUrl: '', code: '' };
data.prizeNameStr = '';
this.prizeForm.gamePrizeList = this.prizeForm.gamePrizeList.splice(0);
this.$refs.prizeForm.validateField(`gamePrizeList.${index}.prizeStock`);
......@@ -384,9 +384,8 @@ export default {
this.prizeForm.gamePrizeList[index].prizeNameStr ? delete this.prizeForm.gamePrizeList[index].prizeNameStr : '';
this.prizeForm.gamePrizeList[index].prizeNumber ? delete this.prizeForm.gamePrizeList[index].prizeNumber : '';
this.prizeForm.gamePrizeList[index].optNum ? delete this.prizeForm.gamePrizeList[index].optNum : '';
this.prizeForm.gamePrizeList[index].prizeImageUrl ? delete this.prizeForm.gamePrizeList[index].prizeImageUrl : '';
if (val == 0) {
this.prizeForm.gamePrizeList[index].prizeImageUrl = '';
this.prizeForm.gamePrizeList[index].prizeImageUrl = { imgUrl: '', code: '' };
this.prizeForm.gamePrizeList[index].prizeName = '谢谢参与';
this.prizeForm.gamePrizeList[index].prizeNumber = 1;
this.prizeForm.gamePrizeList[index].optNum = -1;
......@@ -476,9 +475,7 @@ export default {
let data = { ...this.prizeForm };
data = JSON.parse(JSON.stringify(data));
data.gamePrizeList.forEach(item => {
if (item.prizeImageUrl) {
item.prizeImageUrl = item.prizeImageUrl.imgUrl || '';
}
item.prizeImageUrl = item.prizeImageUrl.imgUrl || '';
if (item.prizeType == 0) {
item.prizeStock = -1;
}
......
src/views/game/cmh/rule-config.vue
<template>
<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px">
<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="134px">
<dm-sub-title type="line" class="mb20">玩法配置</dm-sub-title>
<el-form-item label="参与人群" prop="filterJson">
<el-radio-group v-model="ruleForm.memberType" :disabled="isDisabled" @change="clearValidate('filterJson')">
......@@ -8,7 +8,7 @@
</el-radio-group>
</el-form-item>
<el-form-item>
<div v-show="ruleForm.memberType == 0">
<div v-show="ruleForm.memberType == 0" style="min-width:1000px">
<vue-gic-people v-bind="storeParams" projectName="marketing" :triggerReset="true" :isAdd="isAdd" :hasSearchData="ruleForm.hasSearchData" :useId="ruleForm.memberWeightView.searchId" sceneValue="member" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editShow="toggleTag = true" @editHide="toggleTag = false" @hideBtn="toggleTag = false" />
<div class="gic-people--button" v-show="toggleTag">
<el-button size="small" type="primary" @click="getData" :disabled="isDisabled">确 定</el-button>
......@@ -25,11 +25,12 @@
<el-form-item label="适用人群说明" prop="memberDesc">
<el-input maxlength="100" type="textarea" class="w382" placeholder="请输入适用人群说明" v-model="ruleForm.memberDesc" show-word-limit :autosize="{ minRows: 5 }" />
</el-form-item>
<el-form-item label="参与门槛" prop="playConditionFlag">
<el-form-item label="参与门槛" prop="playConditionFlag" style="margin-bottom: 12px;">
<el-radio-group v-model="ruleForm.playConditionFlag" :disabled="isDisabled">
<el-radio :label="1">有门槛</el-radio>
<el-radio :label="0">无门槛</el-radio>
</el-radio-group>
<div class="tips mt6">支持单选或多选参与门槛</div>
</el-form-item>
<el-form-item>
<div class="shareBox" v-show="ruleForm.playConditionFlag == 1">
......@@ -50,11 +51,11 @@
<div v-if="index == 1">
<div class="flex mb10"><el-checkbox v-model="item.conditionType" :true-label="0" :false-label="-1" :disabled="isDisabled" @change="$emit('change', { val: item.conditionJson.value, type: item.conditionType })" /> <span class="ml10">消耗积分获得游戏次数</span></div>
<div v-show="item.conditionType == 0">
<el-form-item label="参与游戏每次消耗积分" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'value'" :rules="{ required: true, message: '请输入积分' }">
<el-form-item label="参与游戏每次消耗积分" label-width="170px" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'value'" :rules="{ required: true, message: '请输入积分' }">
<el-input-number class="w140" :disabled="isDisabled" placeholder="请输入积分" v-model="item.conditionJson.value" :min="1" :max="1000000" controls-position="right" @change="$emit('change', { val: item.conditionJson.value, type: item.conditionType, id: 0 })" />
<span class="ml10">积分 </span>
</el-form-item>
<el-form-item label="提示客户积分获取路径" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'mpUrlView'" :rules="rules.mpUrlView">
<el-form-item label="提示客户积分获取路径" label-width="170px" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'mpUrlView'" :rules="rules.mpUrlView">
<div class="wxapp mr16" v-if="item.conditionJson.mpUrlView && item.conditionJson.mpUrlView.name">
{{ item.conditionJson.mpUrlView.name }}
</div>
......@@ -65,7 +66,7 @@
<div v-if="index == 2">
<div class="flex mb10"><el-checkbox @change="$emit('change', { val: item.conditionJson.value, type: item.conditionType, id: 1 })" v-model="item.conditionType" :true-label="1" :false-label="-1" :disabled="isDisabled" /><span class="ml10"> 邀请好友助力获得游戏次数</span></div>
<div v-show="item.conditionType == 1">
<el-form-item label="邀请机制" label-width="80px">
<el-form-item label="邀请机制" label-width="80px" style="margin-bottom:0;">
<div class="flex">
每成功邀请
<el-form-item label-width="0" :prop="'gameRuleConditionList.' + index + '.conditionJson.' + 'inviteNum'" :rules="{ required: true, message: '请输入' }"> <el-input-number v-model="item.conditionJson.inviteNum" :min="1" :max="1000000" class="w110 ml10 mr10" controls-position="right" :disabled="isDisabled" />人可获得 </el-form-item>
......@@ -100,7 +101,7 @@
</el-upload>
</div>
<div class="tips">图片建议尺寸{{ shareCardSize0 }}，格式 jpg/png/gif，大小 {{ shareCardSize1 }} M以内。</div>
<div class="tips mt6">图片建议尺寸{{ shareCardSize0 }}，格式 jpg/png，大小 {{ shareCardSize1 }} M以内。</div>
</el-form-item>
<el-form-item label="分享海报" label-width="122px">
<div class="flex">
......@@ -110,7 +111,7 @@
</el-upload>
<el-button type="text" class="ml16 downloadBtn" @click="downloadTmp">下载模板</el-button>
</div>
<div class="tips">图片建议尺寸{{ shareReportSize0 }}，格式 jpg/png/gif，大小 {{ shareReportSize1 }} M以内。</div>
<div class="tips mt6">图片建议尺寸{{ shareReportSize0 }}，格式 jpg/png，大小 {{ shareReportSize1 }} M以内。</div>
</el-form-item>
</div>
</div>
......@@ -121,7 +122,7 @@
<el-form-item label="每人最多可玩次数" prop="playTimes" :rules="rules.playTimes"> <el-input v-model.number="ruleForm.playTimes" class="w140" placeholder="上限1000" :disabled="isDisabled" />次游戏次数 </el-form-item>
<el-form-item label="分享" prop="shareFlag">
<el-switch v-model="ruleForm.shareFlag" :active-value="1" :inactive-value="0" />
<div class="tips">关闭后用户无法分享小程序</div>
<div class="tips mt6">关闭后用户无法分享小程序</div>
</el-form-item>
<linktools :linkVisible.sync="show" :remove="[5, 35]" :linkData="ruleForm.gameRuleConditionList[1].conditionJson.mpUrlView" :can-save="true" @linkSelect="onSaveLink" />
<dm-form-bottom class="footer">
......@@ -358,10 +359,10 @@ export default {
});
},
beforeAvatarUpload(file, key, size1 = 1) {
const arr = ['image/gif', 'image/jpeg', 'image/png'];
const arr = ['image/jpeg', 'image/png'];
const limit = file.size / 1024 / 1024 < size1;
if (!arr.includes(file.type)) {
this.$message.warning('只能上传jpg/png/gif格式文件!');
this.$message.warning('只能上传jpg/png格式文件!');
return false;
}
if (!limit) {
......
src/views/game/common/audio-upload.vue
<template>
<div>
<label :class="[textType ? 'el-button el-button--text el-button--small' : 'el-button el-button--primary', disabled ? 'is-disabled' : '']">
{{ disabled ? '上传中...' : label }}
<span style="font-weight: 400;"> {{ disabled ? '上传中...' : label }}</span>
<input type="file" style="display:none;" :disabled="disabled" accept="audio/mpeg" ref="uploader" v-audioUpload="this" />
</label>
<p class="fz12 gray">{{ tips }}</p>
......
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