Initial commit

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-17 12:02:35 +08:00
co-authored by Claude Opus 5
commit d999a5c0e6
643 changed files with 178681 additions and 0 deletions
@@ -0,0 +1,54 @@
<template>
<div class="tags-box">
<el-dialog :title="'图集详情'" :visible.sync="dialogVisible" width="680px" :before-close="handleClose" :close-on-click-modal="false">
<div class="picturePopup">
<decrypt-img
v-for="url in fileList"
:key="url"
style="width: 150px; height: 150px"
:src="url"
:preview-src-list="fileList">
</decrypt-img>
</div>
</el-dialog>
</div>
</template>
<script>
import baseConfig from '@/utils/serverUrlConfig'
export default {
data() {
return {
dialogVisible: false,
imgUrl: baseConfig.imgUrl,
fileList: [], // 用于图片回显
}
},
methods: {
// 打开弹窗
open(pictureArr) {
this.fileList = pictureArr.map((item) => {
return this.imgUrl + item;
});
this.dialogVisible = true;
},
// 关闭弹窗
handleClose() {
this.dialogVisible = false;
this.fileList = [];
this.pics = undefined;
},
}
}
</script>
<style scoped lang="scss">
.tags-box {
.picturePopup {
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 580px;
}
}
</style>
@@ -0,0 +1,713 @@
<template>
<div class="tag-box">
<!--操作栏-->
<div class="action-bar">
<el-input
v-model="params.recommendId"
placeholder="请输入推荐活动ID"
clearable
size="small"
class="param-input"
></el-input>
<el-select
placeholder="请选择状态"
clearable
size="small"
v-model="params.status"
@change="getList('status')"
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in statuses"
:key="item.value"
></el-option>
</el-select>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="getList('status')"
style="margin-right: 20px"
>搜索</el-button
>
<el-button
type="primary"
size="small"
@click="addAndEdit('add')"
style="margin-right: 20px"
>新增</el-button
>
</div>
<!--数据表格-->
<el-table
:data="tableData"
style="width: 100%"
border
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
height="600"
>
<el-table-column prop="id" label="ID" align="center" min-width="210">
<template slot-scope="scope">
<span>{{ scope.row.id || "-" }}</span>
</template>
</el-table-column>
<el-table-column prop="title" label="标题" align="center" min-width="140">
<template slot-scope="scope">
<span>{{ scope.row.title || "-" }}</span>
</template>
</el-table-column>
<el-table-column
prop="targetEnum"
label="目标类型"
align="center"
min-width="140"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.targetEnum == 1">购买子集</el-tag>
<el-tag type="warning" v-else>购买整本</el-tag>
</template>
</el-table-column>
<el-table-column
prop="target"
label="任务目标"
align="center"
min-width="140"
>
<template slot-scope="scope">
<span>{{ scope.row.target }}</span>
</template>
</el-table-column>
<el-table-column
prop="awardList"
label="奖励列表"
align="center"
min-width="140"
>
<template slot-scope="scope">
<div v-for="item in scope.row.awardList" :key="item.type">
<span v-if="item.type == 0">积分:</span>
<span>{{ item.num }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="type" label="任务类型" align="center" width="120">
<template slot-scope="scope">
<el-tag v-if="scope.row.type == 1">每日推荐</el-tag>
<el-tag type="warning" v-else>一次性任务</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center" width="80">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status == 1">开启</el-tag>
<el-tag v-else>关闭</el-tag>
</template>
</el-table-column>
<el-table-column prop="objId" label="媒体ID" align="center" width="220">
<template slot-scope="scope">
<span>{{ scope.row.objId || "-" }}</span>
</template>
</el-table-column>
<el-table-column
prop="recommendId"
label="推荐ID"
align="center"
width="220"
>
<template slot-scope="scope">
<span>{{ scope.row.recommendId || "-" }}</span>
</template>
</el-table-column>
<el-table-column prop="icon" label="任务图标" align="center" width="100">
<template slot-scope="scope">
<span v-if="!scope.row.icon">暂无任务图标</span>
<div
v-else
class="picturePreview"
@click="handlePictureCardPreview({ url: imgUrl + scope.row.icon })"
>
<decrypt-img
style="width: 80px; height: 80px"
:src="imgUrl + scope.row.icon"
fit="fill"
></decrypt-img>
</div>
</template>
</el-table-column>
<el-table-column
prop="startTime"
label="开始时间"
align="center"
min-width="180"
>
<template slot-scope="scope">
<span>{{ changeTime(scope.row.startTime) }}</span>
</template>
</el-table-column>
<el-table-column
prop="endTime"
label="结束时间"
align="center"
min-width="180"
>
<template slot-scope="scope">
<span>{{ changeTime(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column
prop="sortCode"
label="排序"
align="center"
min-width="100"
>
<template slot-scope="scope">
<span>{{ scope.row.sortCode || 0 }}</span>
</template>
</el-table-column>
<el-table-column
prop="updatedAct"
label="操作人"
align="center"
min-width="100"
>
<template slot-scope="scope">
<span>{{ scope.row.updatedAct || "-" }}</span>
</template>
</el-table-column>
<el-table-column
prop="updateAt"
label="修改时间"
align="center"
min-width="180"
>
<template slot-scope="scope">
<span>{{ changeTime(scope.row.updateAt) }}</span>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
label="创建时间"
align="center"
min-width="180"
>
<template slot-scope="scope">
<span>{{ changeTime(scope.row.createdAt) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
min-width="200"
fixed="right"
>
<template slot-scope="scope">
<el-button
size="mini"
type="success"
icon="el-icon-edit"
@click="addAndEdit(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="del(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:page-sizes="[10, 15, 20, 30]"
:current-page="params.pageNumber"
:page-size="params.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
@size-change="changeSize"
@current-change="changeCurrent"
></el-pagination>
<!-- 新增、修改 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="550px"
@before-close="handleClose"
@close="handleClose"
>
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
<el-form-item
size="small"
label="标题:"
prop="title"
style="width: 480px"
>
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item
size="small"
label="推荐活动id:"
prop="recommendId"
style="width: 480px"
>
<el-input
v-model="form.recommendId"
@blur="getRecommendInfo"
></el-input>
</el-form-item>
<el-form-item
size="small"
label="目标类型:"
prop="targetEnum"
style="width: 480px"
>
<el-select v-model="form.targetEnum" placeholder="请选择目标枚举">
<el-option
:label="item.label"
:value="item.value"
v-for="item in targetEnums"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
size="small"
label="任务目标:"
prop="target"
style="width: 480px"
>
<el-input v-model.number="form.target"></el-input>
</el-form-item>
<el-form-item
size="small"
label="类型:"
prop="type"
style="width: 480px"
>
<el-select v-model="form.type" placeholder="请选择类型">
<el-option
:label="item.label"
:value="item.value"
v-for="item in types"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
size="small"
label="奖品类型:"
prop="awardType"
style="width: 480px"
>
<el-select v-model="awardType" placeholder="请选择奖品类型">
<el-option
:label="item.label"
:value="item.value"
v-for="item in awardTypes"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item
size="small"
label="奖品数量:"
prop="awardNums"
style="width: 480px"
>
<el-input v-model.number="awardNums"></el-input>
</el-form-item>
<!-- <el-form-item
size="small"
label="状态:"
prop="status"
style="width: 480px"
>
<el-select v-model="form.status" placeholder="请选择状态">
<el-option
:label="item.label"
:value="item.value"
v-for="item in statuses"
:key="item.value"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item
size="small"
label="排序:"
prop="sortCode"
style="width: 480px"
>
<el-input v-model.number="form.sortCode"></el-input>
</el-form-item>
<el-form-item
size="small"
label="任务图标:"
prop="icon"
style="width: 480px"
>
<base-upload
:cover="form.icon"
:action="uploadUrl"
@successCallback="uploadIcon"
:width="'120px'"
:height="'120px'"
:hide="true"
></base-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose" size="small">取 消</el-button>
<el-button type="primary" size="small" @click="onSubmit()"
>确 定</el-button
>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisiblePreview">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<!-- 图集预览窗口 -->
<preview-picture ref="previewPicture"></preview-picture>
</div>
</template>
<script>
import API from "@/api";
import { uniteDate } from "@/utils/validator.js";
import baseConfig from "@/utils/serverUrlConfig";
import local from "@/utils/localStroage";
import PreviewPicture from "./components/previewPicture";
export default {
components: {
PreviewPicture,
},
data() {
return {
// 表格数据加载动画
loading: false,
// 封面上传地址
uploadUrl: baseConfig.baseServerUrl + "/vid/uploadStatic",
header: {
Authorization: local.get("userInfo").token,
},
dialogImageUrl: undefined, // 放大图地址
dialogVisiblePreview: false, // 放大图
imgUrl: baseConfig.imgUrl,
// 列表数据
tableData: [],
total: 0,
params: {
pageNumber: 1,
pageSize: 10,
recommendId: undefined, // 关联推荐活动id
},
rules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
recommendId: [
{ required: true, message: "请输入推荐活动id", trigger: "blur" },
],
icon: [{ required: true, message: "请上传任务图标", trigger: "blur" }],
},
types: [
{
label: "一次性任务",
value: 0,
},
],
awardTypes: [
{
label: "积分",
value: 0,
},
],
targetEnums: [
{
label: "购买子集",
value: 1,
},
{
label: "购买整本",
value: 2,
},
],
statuses: [
{
label: "关闭",
value: 0,
},
{
label: "开启",
value: 1,
},
],
dialogTitle: "",
dialogVisible: false,
awardType: 0,
awardNums: 0,
form: {
id: undefined,
title: undefined, // 标题
icon: undefined, // 任务图标
recommendId: undefined, // 关联的推荐活动id
sortCode: 0, // 排序字段
target: 0, // 任务目标
targetEnum: 1, // 目标类型 1-购买子集 2-购买整本
type: 0, // 任务类型 0一次性任务
awardList: undefined, // 奖励列表
// status: 0, //状态 0-关闭,1-开启
},
recommendInfo: undefined, // 当前输入的推荐信息
};
},
created() {
this.getList();
},
methods: {
// 标题图片上传成功
uploadIcon(res) {
this.form.icon = res.data.coverImg;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisiblePreview = true;
},
getList(type) {
if (type === "status") {
this.params.pageNumber = 1;
}
API.getMediaTaskList(this.params)
.then((res) => {
if (res.code === 200 && res.data) {
this.tableData = res.data.list;
this.total = res.data.total;
} else {
this.tableData = [];
}
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
getRecommendInfo() {
if (!this.form.recommendId) return;
API.getMediaRecommendInfo({
id: this.form.recommendId,
})
.then((res) => {
if (res.code === 200 && res.data) {
this.recommendInfo = res.data.info;
if (this.recommendInfo.type != 2) {
this.$message.error("该推荐活动id不可用,请选择单篇推荐活动");
}
} else {
this.$message.error("该推荐活动id不可用,请选择单篇推荐活动");
}
})
.catch(() => {
this.$message.error("该推荐活动id不可用,请选择单篇推荐活动");
});
},
// 新增推荐
addAndEdit(param) {
if (param === "add") {
this.dialogTitle = "新增";
} else {
this.dialogTitle = "编辑";
// 把数据回显给表单
this.form.id = param.id;
this.form.title = param.title;
this.form.icon = param.icon;
this.form.recommendId = param.recommendId;
this.form.sortCode = param.sortCode;
this.form.target = param.target;
this.form.targetEnum = param.targetEnum;
this.form.type = param.type;
// this.form.status = param.status;
this.getRecommendInfo();
// 根据后端的需求所设,如果奖品类型扩展,此代码需要相应更改
if (param.awardList && param.awardList.length) {
this.awardType = param.awardList[0].type;
this.awardNums = param.awardList[0].num;
} else {
this.awardType = 0;
this.awardNums = 0;
}
}
this.dialogVisible = true; // 打开新增、编辑对话框
},
// 新增、修改提交
onSubmit() {
// 首先判断推荐id是否符合要求
if (!(this.recommendInfo && this.recommendInfo.type == 2))
return this.$message.error("该推荐活动id不可用,请选择单篇推荐活动");
// 组装奖品数据
this.form.awardList = [
{
type: this.awardType,
num: this.awardNums,
},
];
if (this.dialogTitle === "新增") {
this.add();
} else {
this.edit();
}
},
// 新增方法
add() {
this.$refs["form"].validate((valid) => {
if (valid) {
API.addMediaTask(this.form).then((res) => {
if (res.code === 200) {
this.$message({
type: "success",
message: "新增成功",
});
this.handleClose();
this.getList();
} else {
this.$message({
type: "error",
message: "新增失败",
});
}
});
} else {
return false;
}
});
},
// 修改方法
edit() {
this.$refs["form"].validate((valid) => {
if (valid) {
API.updateMediaTask(this.form).then((res) => {
if (res.code === 200) {
this.$message({
type: "success",
message: "编辑成功",
});
this.handleClose();
this.getList();
} else {
this.$message({
type: "error",
message: "编辑失败",
});
}
});
} else {
return false;
}
});
},
del(param) {
this.$confirm(
`确认是否删除<span style='color:blue'>${param.title}</span>任务, 是否继续?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
}
)
.then(() => {
let delData = {
ids: [param.id],
};
API.delMediaTask(delData).then((res) => {
if (res.code === 200) {
this.$message({
type: "success",
message: "删除成功!",
});
} else {
this.$message({
type: "error",
message: "删除失败!",
});
}
this.getList();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 关闭窗口清除数据
handleClose() {
this.form.id = undefined;
this.form.title = undefined;
this.form.icon = undefined;
this.form.recommendId = undefined;
this.form.sortCode = 0;
this.form.target = 0;
this.form.targetEnum = 1;
this.form.type = 0;
this.form.awardList = undefined;
// this.form.status = 0;
this.awardType = 0;
this.awardNums = 0;
this.recommendInfo = {};
this.dialogVisible = false;
},
// 分页条数改变回调
changeSize(size) {
this.params.pageSize = size;
this.getList();
},
// 分页页码改变回调
changeCurrent(pageNumber) {
this.params.pageNumber = pageNumber;
this.getList();
},
// 更换时间格式
changeTime(time) {
return uniteDate(time);
},
},
};
</script>
<style lang="scss" scoped>
.dialog-footer {
position: relative;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
/deep/ .el-form-item__content {
display: flex;
}
/deep/ .el-select {
width: 100%;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 120px;
height: 120px;
}
/deep/ .el-upload--picture-card {
width: 120px;
height: 120px;
line-height: 130px;
}
.itemBox {
display: flex;
// justify-content: space-between;
}
.tagBox {
display: inline-block;
margin-right: 5px;
}
</style>