新增开屏设置

This commit is contained in:
liaozetao
2023-11-17 17:52:47 +08:00
parent 7689181eb8
commit d168653061
3 changed files with 115 additions and 51 deletions

View File

@@ -1,9 +1,9 @@
import '@/utils/ajaxfileupload';
export const uploadFile = data => {
export const uploadFile = id => {
return new Promise((resolve, reject) => {
$.ajaxFileUpload({
fileElementId: data.id,
fileElementId: id,
url: '/admin/upload/img',
type: 'post',
dataType: 'json',

View File

@@ -19,8 +19,8 @@
</el-table-column>
<el-table-column align="center" prop="skipType" label="跳转">
<template v-slot="scope">
<span>{{ scope.row.skipType == 1 ? "native" : (scope.row.skipType == 2 ? "H5" : scope.row.skipType == 3
? "房间" : "") }}</span>
<span>{{ scope.row.skipType == 1 ? "native" : (scope.row.skipType == 2 ? "房间" : scope.row.skipType == 3
? "H5" : "") }}</span>
<br />
<span>{{ scope.row.skipContent }}</span>
</template>
@@ -42,11 +42,10 @@
<el-table-column align="center" prop="IOS" label="iOS版本号" :formatter="ruleJsonFormatter" />
<el-table-column align="center" prop="ANDROID" label="安卓版本号" :formatter="ruleJsonFormatter" />
<el-table-column align="center" prop="NOT_CHANNELS" label="不展示渠道" :formatter="ruleJsonFormatter" />
<el-table-column align="center" label="操作">
<el-table-column align="center" label="操作" width="200">
<template v-slot="scope">
<el-button @click="editClick(scope.row)" class="primary" type="primary" size="default">编辑</el-button>
<el-button @click="delClick(scope.row)" class="danger" type="danger" size="default"
v-if="scope.row.skipType">删除</el-button>
<el-button @click="delClick(scope.row)" class="danger" type="danger" size="default" v-if="scope.row.skipType">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -58,49 +57,73 @@
<!-- 编辑弹窗 -->
<el-dialog v-model="editDialog" title="房间内轮播icon配置" width="50%" center>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">入口名称</span>
<el-input v-model="resource.name" style="width: 75%" class="input" placeholder="请输入入口名称" :disabled="resource.skipType == 1"></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">入口名称</span>
<el-input v-model="resource.name" style="width: 75%" class="input" placeholder="请输入入口名称"
:disabled="resource.skipType == 1"></el-input>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">icon</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">icon</span>
<input type="hidden" class="form-control" name="icon" v-model="resource.icon" />
<img :src="resource.icon" style="width:120px;"/>
<input type="file" style="width: 26%; display: inline-block;" id="iconFile" name="iconFile"/>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">跳转位置</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label"></span>
<button class="btn btn-success col-sm-4" type="button" id="iconUploadBtn">上传</button>
<span class="btn col-sm-4" id="iconUploadInfo" style="color:red;"></span>
</div>
<div style="margin-bottom: 25px;margin-top: 70px;">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">跳转位置</span>
<el-select v-model="resource.skipType" style="width: 75%" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<div style="margin-bottom: 25px" v-if="resource.skipType == 1">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">资源编码</span>
<el-input v-model="resource.code" style="width: 75%" class="input" :placeholder="请输入资源编码"></el-input>
</div>
<div style="margin-bottom: 25px" v-if="resource.skipType == 2 || resource.skipType == 3">
<span style="display: inline-block; margin-right: 20px">{{ resource.skipType == 2 ? "跳转链接" :
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">{{ resource.skipType == 2 ? "跳转链接" :
(resource.skipType == 3 ? "跳转房间" : "") }}</span>
<el-input v-model="resource.skipContent" style="width: 75%" class="input"
:placeholder="[resource.skipType == 2 ? '请输入跳转链接' : (resource.skipType == 3 ? '请输入房间ID' : '')]"></el-input>
</div>
<div style="margin-bottom: 25px" v-if="resource.skipType == 2">
<span style="display: inline-block; margin-right: 20px">切换banner</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">切换banner</span>
<input type="hidden" class="form-control" name="avatar" v-model="resource.url" />
<img :src="resource.url" style="width:120px;"/>
<input type="file" style="width: 26%; display: inline-block;" id="urlFile" name="urlFile"/>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">生效时间</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label"></span>
<button class="btn btn-success col-sm-4" type="button" id="urlUploadBtn">上传</button>
<span class="btn col-sm-4" id="urlUploadInfo" style="color:red;"></span>
</div>
<div style="margin-bottom: 25px;margin-top: 70px;">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">生效时间</span>
<el-date-picker v-model="resource.startTime" type="datetime" placeholder="选择日期时间">
</el-date-picker>
</el-date-picker>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">失效时间</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">失效时间</span>
<el-date-picker v-model="resource.endTime" type="datetime" placeholder="选择日期时间">
</el-date-picker>
</el-date-picker>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">排序</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">排序</span>
<el-input v-model="resource.seqNo" style="width: 75%" class="input" placeholder="请输入排序"></el-input>
</div>
<div style="margin-bottom: 25px" v-for="(rule, index) in rules" :key="rule" :index="index">
<span style="display: inline-block; margin-right: 20px">{{ rule.ruleName }}</span>
<el-input v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" class="input" :placeholder="rule.description" v-if="rule.ruleKind != 'IN'"></el-input>
<el-select v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" placeholder="请选择" v-if="rule.ruleKind == 'IN'">
<el-option label="全部" :value="''"></el-option>
<el-option v-for="value in rule.ruleValue.split(',')" :key="value" :label="value" :value="value"></el-option>
</el-select>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">{{ rule.ruleName }}</span>
<el-input v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" class="input"
:placeholder="rule.description" v-if="rule.ruleKind != 'IN'"></el-input>
<el-select v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" placeholder="请选择"
v-if="rule.ruleKind == 'IN'">
<el-option label="全部" :value="''"></el-option>
<el-option v-for="value in rule.ruleValue.split(',')" :key="value" :label="value"
:value="value"></el-option>
</el-select>
</div>
<template #footer>
<span class="dialog-footer">
@@ -124,7 +147,7 @@
<script>
import { getResourcePage, delResource, effective } from "@/api/resource/resource";
import { getResourcePage, delResource, saveResource, effective } from "@/api/resource/resource";
import { getResourceRuleList } from '@/api/resource/resourceRule';
import { uploadFile } from '@/api/common/upload';
@@ -149,17 +172,18 @@ export default {
},
{
value: 2,
label: "H5"
label: "房间内"
},
{
value: 3,
label: "房间内"
}
label: "H5"
},
],
tableData: [], //表单数据存放
rules: [],
resource: {
id: null,
code: '',
name: '',
icon: '',
skipType: 0,
@@ -177,13 +201,35 @@ export default {
return {};
},
created() {
this.init();
this.getRule();
this.getData();
},
methods: {
init() {
this.$nextTick(function () {
let $this = this;
$('#iconUploadBtn').click(function () {
uploadFile('icon').then(res => {
if (res.path) {
$this.resource.icon = res.path;
$('#iconUploadInfo').val('上传成功');
}
});
});
$('#urlUploadBtn').click(function () {
uploadFile('url').then(res => {
if (res.path) {
$this.resource.url = res.path;
$('#urlUploadInfo').val('上传成功');
}
});
});
});
},
getRule() {
getResourceRuleList({
ruleType: 1
ruleType: 3
}).then(res => {
this.rules = res.data;
});
@@ -263,7 +309,7 @@ export default {
let ruleCode = this.rules[i].ruleCode;
this.resource.ruleValue[ruleCode] = ruleObj[ruleCode];
}
}
}
this.editDialog = true;
},
editDialogClick() {
@@ -308,5 +354,4 @@ export default {
padding-top: 20px;
background: #ecf0f5;
border-top: 3px solid #d2d6de;
}
</style>
}</style>

View File

@@ -10,9 +10,9 @@
<el-table :data="tableData" border style="width: 100%; margin-top: 25px">
<el-table-column align="center" prop="id" label="资源位ID" />
<el-table-column align="center" prop="name" label="活动名称" />
<el-table-column align="center" prop="icon" label="开屏页">
<el-table-column align="center" prop="url" label="开屏页" width="200">
<template v-slot="scope">
<el-image style="width: 100px; height: 100px" :src="scope.row.url" :zoom-rate="1.1"
<el-image style="width: 100%; height: 100px" :src="scope.row.url" :zoom-rate="1.1"
:preview-src-list="[scope.row.url]" fit="cover" preview-teleported="true"
hide-on-click-modal="true" />
</template>
@@ -30,7 +30,7 @@
<el-table-column align="center" prop="IOS" label="iOS版本号" :formatter="ruleJsonFormatter" />
<el-table-column align="center" prop="ANDROID" label="安卓版本号" :formatter="ruleJsonFormatter" />
<el-table-column align="center" prop="NOT_CHANNELS" label="不展示渠道" :formatter="ruleJsonFormatter" />
<el-table-column align="center" label="操作">
<el-table-column align="center" label="操作" width="200">
<template v-slot="scope">
<el-button @click="editClick(scope.row)" class="primary" type="primary" size="default">编辑</el-button>
<el-button @click="delClick(scope.row)" class="danger" type="danger" size="default"
@@ -46,44 +46,49 @@
<!-- 编辑弹窗 -->
<el-dialog v-model="editDialog" title="开屏配置" width="50%" center>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">活动名称</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">活动名称</span>
<el-input v-model="resource.name" style="width: 75%" class="input" placeholder="请输入活动名称"></el-input>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">开屏页</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">开屏页</span>
<input type="hidden" class="form-control" name="avatar" v-model="resource.url" />
<img :src="resource.url" style="width:120px;"/>
<input type="file" style="width: 26%; display: inline-block;" id="urlFile" name="urlFile"/>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">跳转位置</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label"></span>
<button class="btn btn-success col-sm-4" type="button" id="urlUploadBtn">上传</button>
<span class="btn col-sm-4" id="urlUploadInfo" style="color:red;"></span>
</div>
<div style="margin-bottom: 25px;margin-top: 70px;">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">跳转位置</span>
<el-select v-model="resource.skipType" style="width: 75%" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<div style="margin-bottom: 25px" v-if="resource.skipType == 2 || resource.skipType == 3">
<span style="display: inline-block; margin-right: 20px">{{ resource.skipType == 2 ? "跳转链接" :
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">{{ resource.skipType == 2 ? "跳转链接" :
(resource.skipType == 3 ? "跳转房间" : "") }}</span>
<el-input v-model="resource.skipContent" style="width: 75%" class="input"
:placeholder="[resource.skipType == 2 ? '请输入跳转链接' : (resource.skipType == 3 ? '请输入房间ID' : '')]"></el-input>
</div>
<div style="margin-bottom: 25px" v-if="resource.skipType == 2">
<span style="display: inline-block; margin-right: 20px">切换banner</span>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">生效时间</span>
<div style="margin-bottom: 25px;">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">生效时间</span>
<el-date-picker v-model="resource.startTime" type="datetime" placeholder="选择日期时间">
</el-date-picker>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">失效时间</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">失效时间</span>
<el-date-picker v-model="resource.endTime" type="datetime" placeholder="选择日期时间">
</el-date-picker>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px">排序</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">排序</span>
<el-input v-model="resource.seqNo" style="width: 75%" class="input" placeholder="请输入排序"></el-input>
</div>
<div style="margin-bottom: 25px" v-for="(rule, index) in rules" :key="rule" :index="index">
<span style="display: inline-block; margin-right: 20px">{{ rule.ruleName }}</span>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">{{ rule.ruleName }}</span>
<el-input v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" class="input" :placeholder="rule.description" v-if="rule.ruleKind != 'IN'"></el-input>
<el-select v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" placeholder="请选择" v-if="rule.ruleKind == 'IN'">
<el-option label="全部" :value="''"></el-option>
@@ -112,7 +117,7 @@
<script>
import { getResourcePage, delResource, effective } from "@/api/resource/resource";
import { getResourcePage, delResource, saveResource, effective } from "@/api/resource/resource";
import { getResourceRuleList } from '@/api/resource/resourceRule';
import { uploadFile } from '@/api/common/upload';
@@ -165,10 +170,24 @@ export default {
return {};
},
created() {
this.init();
this.getRule();
this.getData();
},
methods: {
init() {
this.$nextTick(function () {
let $this = this;
$('#urlUploadBtn').click(function () {
uploadFile('url').then(res => {
if (res.path) {
$this.resource.url = res.path;
$('#urlUploadInfo').val('上传成功');
}
});
});
});
},
getRule() {
getResourceRuleList({
ruleType: 1