Files
peko-admin-web/src/views/resource/SplashView.vue

729 lines
21 KiB
Vue

<!-- eslint-disable vue/valid-v-slot -->
<template>
<div class="outer">
<!-- 查询 -->
<div class="inquire" style="display: inline-block; margin-right: 20px">
<span class="demonstration">地区:</span>
<el-select v-model="searchValues.partitionId" placeholder="请选择">
<el-option
v-for="(item, i) in partitionInfos"
:key="i"
:label="item.desc"
:value="item.id"
>
</el-option>
</el-select>
</div>
<!-- 按钮 -->
<div class="buttonBox">
<el-button
@click="addClick()"
class="primary"
type="primary"
size="default"
style="margin-right: 10px"
>新增</el-button
>
<el-button
@click="getData()"
class="primary"
type="primary"
size="default"
style="margin-right: 10px"
>查询</el-button
>
</div>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%; margin-top: 25px">
<el-table-column align="center" prop="id" label="资源位ID" />
<el-table-column prop="name"
align="center"
label="活动名称-华语区">
<template v-slot="scope">{{ getJsonField(scope.row.name, 'zh') }}</template>
</el-table-column>
<el-table-column prop="name"
align="center"
label="活动名称-英语区">
<template v-slot="scope">{{ getJsonField(scope.row.name, 'en') }}</template>
</el-table-column>
<el-table-column prop="name"
align="center"
label="活动名称-阿语区">
<template v-slot="scope">{{ getJsonField(scope.row.name, 'ar') }}</template>
</el-table-column>
<el-table-column prop="name"
align="center"
label="活动名称-土耳其区">
<template v-slot="scope">{{ getJsonField(scope.row.name, 'tr') }}</template>
</el-table-column>
<el-table-column prop="name"
align="center"
label="活动名称-葡萄牙语区">
<template v-slot="scope">{{ getJsonField(scope.row.name, 'pt') }}</template>
</el-table-column>
<el-table-column align="center" prop="partitionId" label="地区">
<template v-slot="scope">
<span>{{ getPartitionInfo(scope.row.partitionId) }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="url" label="开屏页" width="200">
<template v-slot="scope">
<el-image
style="width: 100%; height: 100px"
:src="scope.row.url"
:zoom-rate="1.1"
:preview-src-list="[scope.row.url]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</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
? "房间内"
: scope.row.skipType == 3
? "H5"
: ""
}}</span>
<br />
<span>{{ scope.row.skipContent }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="生效时间">
<template v-slot="scope">
<span>{{
scope.row.startTime == null && scope.row.endTime
? "不限"
: scope.row.startTime +
"~" +
(scope.row.endTime == null ? "不限" : scope.row.endTime)
}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="USER_LEVEL"
label="可见等级"
:formatter="ruleJsonFormatter"
/>
<el-table-column
align="center"
prop="PLATFORM"
label="生效平台"
:formatter="ruleJsonFormatter"
/>
<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="操作" 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"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]"
:small="small"
:disabled="disabled"
:background="background"
layout="sizes, prev, pager, next"
:total="totals"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!-- 编辑弹窗 -->
<el-dialog v-model="editDialog" title="开屏配置" width="50%" center>
<div style="margin-bottom: 25px;">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>选择地区</span
>
<el-select
v-model="resource.partitionId"
style="width: 75%"
placeholder="请选择"
>
<el-option
v-for="item in partitionInfos"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
</el-select>
</div>
<!-- 活动名称-华语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label">活动名称-华语</span>
<el-input v-model="resource.nickZh"
placeholder=""
class="input"></el-input>
</div>
<!-- 活动名称-英语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label">活动名称-英语</span>
<el-input v-model="resource.nickEn"
placeholder=""
class="input"></el-input>
</div>
<!-- 活动名称-阿语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label">活动名称-阿语</span>
<el-input v-model="resource.nickAr"
placeholder=""
class="input"></el-input>
</div>
<!-- 活动名称-土耳其 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label">活动名称-土耳其</span>
<el-input v-model="resource.nickTr"
placeholder=""
class="input"></el-input>
</div>
<!-- 活动名称-葡萄牙语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label">活动名称-葡萄牙语</span>
<el-input v-model="resource.nickPt"
placeholder=""
class="input"></el-input>
</div>
<div style="margin-bottom: 25px">
<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="uploadFile"
/>
</div>
<div style="margin-bottom: 25px">
<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"
@click="uploadUrl()"
>
上传
</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 ||
resource.skipType == 4 ||
resource.skipType == 5 ||
resource.skipType == 6
"
>
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>{{ resource.skipType == 3 ? "跳转链接" : "跳转房间" }}</span
>
<el-input
v-model="resource.skipContent"
style="width: 75%"
class="input"
:placeholder="[
resource.skipType == 2 ? '请输入房间ID' : '请输入跳转链接',
]"
></el-input>
</div>
<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="选择日期时间"
required
>
</el-date-picker>
</div>
<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.endTime"
type="datetime"
placeholder="选择日期时间"
required
>
</el-date-picker>
</div>
<div style="margin-bottom: 25px">
<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"
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">
<el-button @click="editDialog = false">取消</el-button>
<el-button type="primary" @click="editDialogClick()">
确认
</el-button>
</span>
</template>
</el-dialog>
<!-- 公共二次确认删除弹窗 -->
<el-dialog v-model="delDialog" title="提示" width="30%" center>
<span> {{ delDialogText }}</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="delDialog = false">取消</el-button>
<el-button type="primary" @click="delClick()"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import {
getResourcePage,
delResource,
saveResource,
effective,
} from "@/api/resource/resource";
import { getResourceRuleList } from "@/api/resource/resourceRule";
import { uploadFile } from "@/api/common/upload";
import { hideLoading, showLoading } from "@/utils/maintainer";
import { getPartitionInfoList } from "@/api/partition/partitionInfo";
export default {
name: "SplashView",
data() {
return {
totals: 100, //总页数
currentPage: 1, //页码
pageSize: 10, //条数
delDialog: false,
delDialogText: "确认要删除资源位吗?",
editDialog: false,
options: [
{
value: 0,
label: "无",
},
{
value: 1,
label: "APP首页",
},
{
value: 2,
label: "房间内",
},
{
value: 3,
label: "H5",
},
{
value: 4,
label: "CP活动",
},
{
value: 6,
label: "定制礼物活动",
},
{
value: 5,
label: "周星榜活动",
},
],
tableData: [], //表单数据存放
rules: [],
resource: {
id: null,
name: "",
icon: "",
skipType: 0,
skipContent: "",
url: "",
startTime: null,
endTime: null,
seqNo: 0,
ruleValue: {},
partitionId: null,
nickZh: "",
nickEn: "",
nickAr: "",
nickTr: "",
nickPt: "",
},
imageUrl: "",
partitionInfos: [],
searchValues: {
partitionId: null,
},
};
},
setup() {
return {};
},
created() {
this.initPartition();
this.getRule();
this.getData();
},
methods: {
uploadUrl() {
let $this = this;
let file = $("#urlFile").val();
console.log(file);
if (file && file.length > 0) {
showLoading();
uploadFile("urlFile")
.then((res) => {
if (res.path) {
$this.resource.url = res.path;
$("#urlUploadInfo").html("上传成功");
}
})
.finally(() => {
hideLoading();
});
}
},
getRule() {
getResourceRuleList({
ruleType: 1,
}).then((res) => {
this.rules = res.data;
});
},
ruleJsonFormatter(row, col, cell, index) {
let value = "";
let key = col.property;
let ruleValue = row.ruleValue;
if (!ruleValue) {
return value;
}
let ruleObj = JSON.parse(ruleValue);
value = ruleObj[key];
if (!value) {
if (key == "NOT_CHANNELS") {
value = "-";
} else {
value = "全部";
}
}
if (key == "IOS") {
value = ruleObj["IOS_LOW_VERSION"] + "~" + ruleObj["IOS_HIGH_VERSION"];
} else if (key == "ANDROID") {
value =
ruleObj["ANDROID_LOW_VERSION"] +
"~" +
ruleObj["ANDROID_HIGH_VERSION"];
}
return value;
},
getData() {
getResourcePage({
type: 2,
partitionId: this.searchValues.partitionId,
page: this.currentPage,
pageSize: this.pageSize,
}).then((res) => {
let data = res.data;
this.totals = data.total;
this.tableData = data.records.map((v) => {
v["enabled"] = v.isEnabled == 1;
return v;
});
console.log(this.tableData);
});
},
switchClick(id) {
effective({
id: id,
}).then((res) => {
this.getData();
});
},
addClick() {
this.resource.id = null;
this.resource.name = "";
this.resource.icon = "";
this.resource.skipType = 0;
this.resource.skipContent = "";
this.resource.url = "";
this.resource.startTime = null;
this.resource.endTime = null;
this.resource.seqNo = 0;
this.resource.ruleValue = {};
this.resource.nickZh = "";
this.resource.nickEn = "";
this.resource.nickAr = "";
this.resource.nickTr = "";
this.resource.nickPt = "";
for (let i = 0, len = this.rules.length; i < len; i++) {
let rule = this.rules[i];
this.resource.ruleValue[rule.ruleCode] = "";
}
this.partitionId = null;
this.editDialog = true;
},
editClick(row) {
this.resource.id = row.id;
this.resource.name = row.name;
this.resource.icon = row.icon;
this.resource.skipType = row.skipType;
this.resource.skipContent = row.skipContent;
this.resource.url = row.url;
this.resource.startTime = row.startTime;
this.resource.endTime = row.endTime;
this.resource.seqNo = row.seqNo;
this.resource.nickZh = JSON.parse(row.name).zh;
this.resource.nickEn = JSON.parse(row.name).en;
this.resource.nickAr = JSON.parse(row.name).ar;
this.resource.nickTr = JSON.parse(row.name).tr;
this.resource.nickPt = JSON.parse(row.name).pt;
let ruleValue = row.ruleValue;
for (let i = 0, len = this.rules.length; i < len; i++) {
let ruleCode = this.rules[i].ruleCode;
let rule = null;
if (ruleValue) {
let ruleObj = JSON.parse(ruleValue);
rule = ruleObj[ruleCode];
}
this.resource.ruleValue[ruleCode] = rule;
}
this.resource.partitionId = row.partitionId;
this.editDialog = true;
},
editDialogClick() {
let startTime = this.resource.startTime;
if (startTime) {
this.resource.startTime = new Date(startTime).format(
"yyyy-MM-dd hh:mm:ss"
);
} else {
$("#tipMsg").text("生效时间不能为空");
$("#tipModal").modal("show");
$("#tipModal").css("z-index",'99999999');
return;
}
let endTime = this.resource.endTime;
if (endTime) {
this.resource.endTime = new Date(endTime).format("yyyy-MM-dd hh:mm:ss");
} else {
$("#tipMsg").text("失效时间不能为空");
$("#tipModal").modal("show");
$("#tipModal").css("z-index",'99999999');
return;
}
let isEnabled = 0;
let now = new Date();
if (now >= new Date(startTime) && now <= new Date(endTime)) {
isEnabled = 1;
}
let resourceName = JSON.stringify({
zh: this.resource.nickZh,
en: this.resource.nickEn,
ar: this.resource.nickAr,
tr: this.resource.nickTr,
pt: this.resource.nickPt,
});
saveResource({
id: this.resource.id,
name: resourceName,
icon: this.resource.icon,
type: 2,
skipType: this.resource.skipType,
skipContent: this.resource.skipContent,
url: this.resource.url,
startTime: this.resource.startTime,
endTime: this.resource.endTime,
seqNo: this.resource.seqNo,
isEnabled: isEnabled,
ruleValue: JSON.stringify(this.resource.ruleValue),
partitionId: this.resource.partitionId,
}).then((res) => {
this.getData();
this.editDialog = false;
});
},
delClick(row) {
delResource({
id: row.id,
}).then((res) => {
this.getData();
this.delDialog = false;
});
},
// 分页导航
handleSizeChange(val) {
this.getData();
},
handleCurrentChange(val) {
this.getData();
},
initPartition() {
getPartitionInfoList().then((res) => {
this.partitionInfos = res.data;
});
},
getPartitionInfo(partitionId) {
let partitions = this.partitionInfos.filter((v) => v.id == partitionId);
if (!partitions || partitions.length <= 0) {
return "";
}
return partitions[0].desc;
},
// 解析json字段
getJsonField (jsonStr, field) {
try {
if (!jsonStr) return '';
const obj = JSON.parse(jsonStr);
return obj?.[field] || '';
} catch (e) {
console.error('JSON 解析失败:', jsonStr);
return '';
}
},
},
};
</script>
<style lang="less" scoped>
.outer {
padding-top: 20px;
background: #ecf0f5;
border-top: 3px solid #d2d6de;
.inquire {
display: flex;
justify-content: space-between;
}
}
</style>