rootandClaude Opus 5
e282bd23e8
node-sass 4.x cannot build on arm64/Node 16. Use sass with ::v-deep instead of /deep/, and only replace the server dist after the upload is unpacked and verified. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
|
<div class="tag-box">
|
|
<!--操作栏-->
|
|
<div class="action-bar">
|
|
<!-- <el-input
|
|
v-model="params.name"
|
|
placeholder="请输入积分名称"
|
|
clearable
|
|
size="small"
|
|
class="param-input"
|
|
></el-input> -->
|
|
<el-select
|
|
placeholder="请选择状态"
|
|
clearable
|
|
size="small"
|
|
v-model="params.status"
|
|
>
|
|
<el-option
|
|
:label="item.label"
|
|
:value="item.value"
|
|
v-for="item in statuses"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select
|
|
placeholder="请选择类型"
|
|
clearable
|
|
size="small"
|
|
v-model="params.type"
|
|
>
|
|
<el-option
|
|
:label="item.label"
|
|
:value="item.value"
|
|
v-for="item in types"
|
|
: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"
|
|
ref="multipleTable"
|
|
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="name"
|
|
label="积分名称"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.name || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="图片" align="center" min-width="120" prop="icon">
|
|
<template slot-scope="scope">
|
|
<img-load
|
|
:width="'80px'"
|
|
:height="'60px'"
|
|
:src="imgUrl + scope.row.img"
|
|
>
|
|
</img-load>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="duration"
|
|
label="积分持续天数"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.duration }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="price"
|
|
label="积分价格"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.price }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="equivalentPrice"
|
|
label="积分价值"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.equivalentPrice }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="desc" label="描述" align="center" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.desc || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="type" label="类型" align="center" min-width="120">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.type == 1">VIP兑换</span>
|
|
<span v-else-if="scope.row.type == 2">AI黑科技卷</span>
|
|
<span v-else-if="scope.row.type == 3">金币加赠券</span>
|
|
<span v-else-if="scope.row.type == 4">金币观影券</span>
|
|
<span v-else-if="scope.row.type == 5">实物奖励</span>
|
|
<span v-else-if="scope.row.type == 6">幸运抽奖次数</span>
|
|
<span v-else>未知</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="sortCode"
|
|
label="排序"
|
|
align="center"
|
|
min-width="120"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="状态"
|
|
align="center"
|
|
min-width="120"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag type="success" v-if="scope.row.status">开启</el-tag>
|
|
<el-tag v-else>关闭</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updateAct"
|
|
label="修改账号"
|
|
align="center"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.updateAct || "-" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updateTime"
|
|
label="修改时间"
|
|
align="center"
|
|
min-width="180"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ changeTime(scope.row.updateTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createTime"
|
|
label="创建时间"
|
|
align="center"
|
|
min-width="180"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ changeTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
min-width="180"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="success"
|
|
icon="el-icon-edit"
|
|
@click="addAndEdit(scope.row)"
|
|
>编辑</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<el-pagination
|
|
:page-sizes="[10, 15, 20, 30]"
|
|
:current-page="params.page"
|
|
:page-size="params.limit"
|
|
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="530px"
|
|
@before-close="handleClose"
|
|
@close="handleClose"
|
|
>
|
|
<el-form :model="form" label-width="140px" :rules="rules" ref="form">
|
|
<el-form-item label="积分名称" prop="name" style="width: 400px">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="积分持续天数" prop="duration" style="width: 400px">
|
|
<el-input v-model.number="form.duration"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="描述" prop="desc" style="width: 400px">
|
|
<el-input type="textarea" :rows="5" v-model="form.desc"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="积分价格" prop="price" style="width: 400px">
|
|
<el-input v-model.number="form.price"></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="积分价值"
|
|
prop="equivalentPrice"
|
|
style="width: 400px"
|
|
>
|
|
<el-input v-model.number="form.equivalentPrice"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="类型" prop="type" style="width: 400px">
|
|
<el-select v-model="form.type">
|
|
<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 label="图标:" prop="cover">
|
|
<base-upload
|
|
class="upload"
|
|
:cover="form.img"
|
|
:action="action"
|
|
wSize="47"
|
|
hSize="47"
|
|
:width="'138.5px'"
|
|
:height="'138.5px'"
|
|
@successCallback="handleAvatarSuccess"
|
|
></base-upload>
|
|
</el-form-item>
|
|
<el-form-item label="排序" prop="sortCode" style="width: 400px">
|
|
<el-input v-model.number="form.sortCode"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="状态" prop="status" style="width: 400px">
|
|
<el-select v-model="form.status">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import API from "@/api";
|
|
import { uniteDate } from "@/utils/validator.js";
|
|
import baseConfig from "@/utils/serverUrlConfig";
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 表格数据加载动画
|
|
loading: false,
|
|
// 列表数据
|
|
tableData: [],
|
|
total: 0,
|
|
params: {
|
|
page: 1,
|
|
limit: 10,
|
|
status: undefined, // 状态
|
|
type: undefined, // 类型
|
|
name: undefined, // 积分名称
|
|
},
|
|
imgUrl: baseConfig.imgUrl,
|
|
// 图片上传地址
|
|
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
|
rules: {
|
|
name: [{ required: true, message: "请输入积分名称", trigger: "blur" }],
|
|
duration: [
|
|
{ required: true, message: "请输入积分持续天数", trigger: "blur" },
|
|
],
|
|
price: [{ required: true, message: "请输入积分价格", trigger: "blur" }],
|
|
equivalentPrice: [
|
|
{ required: true, message: "请输入积分价值", trigger: "blur" },
|
|
],
|
|
},
|
|
statuses: [
|
|
{
|
|
label: "开启",
|
|
value: true,
|
|
},
|
|
{
|
|
label: "关闭",
|
|
value: false,
|
|
},
|
|
],
|
|
types: [
|
|
{
|
|
label: "VIP兑换",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "AI黑科技卷",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "金币加赠券",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "金币观影券",
|
|
value: 4,
|
|
},
|
|
{
|
|
label: "实物奖励",
|
|
value: 5,
|
|
},
|
|
{
|
|
label: "幸运抽奖次数",
|
|
value: 6,
|
|
},
|
|
],
|
|
dialogTitle: "",
|
|
dialogVisible: false,
|
|
form: {
|
|
id: undefined,
|
|
name: "", // 积分名称
|
|
duration: 0, // 积分持续天数
|
|
desc: undefined, // 描述
|
|
price: 0, // 积分价格
|
|
equivalentPrice: 0, // 积分价值
|
|
status: false, // 状态，1 开启 2关闭 默认为1
|
|
type: 1, // 类型，1 VIP兑换 2AI黑科技卷 3 金币加赠券 4 金币观影券 5 实物奖励 6 幸运抽奖次数 默认为1
|
|
img: undefined, // 图片logo
|
|
sortCode: 0, // 排序
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList(type) {
|
|
if (type === "status") {
|
|
this.params.page = 1;
|
|
}
|
|
API.getIntegralConfigList(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;
|
|
});
|
|
},
|
|
// 标签封面上传成功回掉
|
|
handleAvatarSuccess(res) {
|
|
this.form.img = res.data.coverImg;
|
|
},
|
|
// 新增标签配置
|
|
addAndEdit(param) {
|
|
if (param === "add") {
|
|
this.dialogTitle = "新增";
|
|
} else {
|
|
this.dialogTitle = "编辑";
|
|
// 把数据回显给表单
|
|
this.form.id = param.id;
|
|
this.form.name = param.name;
|
|
this.form.duration = param.duration;
|
|
this.form.desc = param.desc;
|
|
this.form.price = param.price;
|
|
this.form.equivalentPrice = param.equivalentPrice;
|
|
this.form.sortCode = param.sortCode;
|
|
this.form.status = param.status;
|
|
this.form.type = param.type;
|
|
this.form.img = param.img;
|
|
}
|
|
this.dialogVisible = true; // 打开新增、编辑对话框
|
|
},
|
|
// 新增、修改提交
|
|
onSubmit() {
|
|
if (this.dialogTitle === "新增") {
|
|
this.add();
|
|
} else {
|
|
this.edit();
|
|
}
|
|
},
|
|
// 新增方法
|
|
add() {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
this.form.type = Number(this.form.type);
|
|
API.addIntegralConfig(this.form).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "新增成功",
|
|
});
|
|
this.dialogVisible = false;
|
|
this.getList();
|
|
} else {
|
|
this.$message({
|
|
type: "error",
|
|
message: "新增失败",
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 修改方法
|
|
edit() {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
this.form.type = Number(this.form.type);
|
|
API.updateIntegralConfig(this.form).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "编辑成功",
|
|
});
|
|
this.dialogVisible = false;
|
|
this.getList();
|
|
} else {
|
|
this.$message({
|
|
type: "error",
|
|
message: "编辑失败",
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 关闭窗口清除数据
|
|
handleClose() {
|
|
this.form.id = undefined;
|
|
this.form.name = "";
|
|
this.form.duration = 0;
|
|
this.form.desc = undefined;
|
|
this.form.price = 0;
|
|
this.form.equivalentPrice = 0;
|
|
this.form.sortCode = 0;
|
|
this.form.status = false;
|
|
this.form.type = 1;
|
|
this.dialogVisible = false;
|
|
},
|
|
// 分页条数改变回调
|
|
changeSize(size) {
|
|
this.params.limit = size;
|
|
this.getList();
|
|
},
|
|
// 分页页码改变回调
|
|
changeCurrent(pageNumber) {
|
|
this.params.page = 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%);
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
display: flex;
|
|
}
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
.form-flex-box {
|
|
display: flex;
|
|
.el-form-item {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.tagBox {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|