Initial commit
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,647 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<!-- <el-select
|
||||
placeholder="请选择是否开启"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.enable"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in enables"
|
||||
: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" width="250">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="banner"
|
||||
label="BANNER图片"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.banner">暂无BANNER图片</span>
|
||||
<div
|
||||
v-else
|
||||
class="picturePreview"
|
||||
@click="
|
||||
handlePictureCardPreview({ url: imgUrl + scope.row.banner })
|
||||
"
|
||||
>
|
||||
<decrypt-img
|
||||
style="width: 80px; height: 80px"
|
||||
:src="imgUrl + scope.row.banner"
|
||||
fit="fill"
|
||||
></decrypt-img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="position" label="位置" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.position == 1"
|
||||
>视频播放器下方</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.position == 2"
|
||||
>全民代理</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.position == 3"
|
||||
>浮窗</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="跳转地址" align="center" width="300">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.url || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="enable"
|
||||
label="是否开启"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.enable">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.updatedAt) }}</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="280"
|
||||
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="600px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<el-form-item
|
||||
label="标题:"
|
||||
size="small"
|
||||
prop="title"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="图片:"
|
||||
prop="banner"
|
||||
style="width: 480px"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.banner"
|
||||
:action="uploadUrl"
|
||||
@successCallback="uploadBanner"
|
||||
:width="'120px'"
|
||||
:height="'120px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转方式:" prop="hrefType" style="width:480px">
|
||||
<el-select
|
||||
v-model.number="link_type"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in linkTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接地址"
|
||||
prop="link"
|
||||
v-if="link_type == 1"
|
||||
style="width:480px"
|
||||
>
|
||||
<el-input size="small" v-model="form.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接地址:"
|
||||
prop="link"
|
||||
v-if="link_type == 2"
|
||||
style="width:480px"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.url"
|
||||
size="small"
|
||||
placeholder="链接地址"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="内链ID"
|
||||
prop="inLinkId"
|
||||
style="width:480px"
|
||||
v-if="
|
||||
form.url.indexOf('yinseinner:') > -1 &&
|
||||
form.url.indexOf('?id=') > -1
|
||||
"
|
||||
>
|
||||
<el-input size="small" v-model="inLinkId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="位置:"
|
||||
prop="position"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.position" placeholder="请选择位置">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in positions"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="起止时间:"
|
||||
prop="time"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTimes"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="权重:"
|
||||
size="small"
|
||||
prop="weight"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model.number="form.weight"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="是否开启:"
|
||||
prop="enable"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-select v-model="form.enable" placeholder="请选择是否开启">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in enables"
|
||||
: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>
|
||||
<el-dialog :visible.sync="dialogVisiblePreview">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import { changeTime } from "@/utils/global";
|
||||
import { internalLinks } from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
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,
|
||||
},
|
||||
rules: {
|
||||
content: [
|
||||
{ required: true, message: "请输入跑马灯内容", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
enables: [
|
||||
{
|
||||
label: "开启",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "关闭",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
positions: [
|
||||
{
|
||||
label: "视频播放器下方",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "全民代理",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "浮窗",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
time: "",
|
||||
form: {
|
||||
id: undefined,
|
||||
title: undefined, // 标题
|
||||
banner: undefined, // BANNER图片
|
||||
url: "", // 跑马灯链接
|
||||
position: 1, // 位置 1:视频播放器下方
|
||||
enable: true, // 是否启用
|
||||
endAt: undefined, // 结束时间
|
||||
startAt: undefined, // 开始时间
|
||||
weight: 0, // 权重
|
||||
},
|
||||
link_type: 1,
|
||||
inLinkId: "",
|
||||
linkTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 1 },
|
||||
{ label: "内部浏览器跳转", value: 2 },
|
||||
],
|
||||
linkList: internalLinks,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 图片上传成功
|
||||
uploadBanner(res) {
|
||||
this.form.banner = res.data.coverImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisiblePreview = true;
|
||||
},
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getBannerjumpList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list || [];
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 新增播单
|
||||
addAndEdit(param) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.title = param.title;
|
||||
this.form.banner = param.banner;
|
||||
this.form.url = param.url;
|
||||
this.form.position = param.position;
|
||||
this.form.enable = param.enable;
|
||||
this.time = [uniteDate(param.startAt), uniteDate(param.endAt)];
|
||||
this.form.weight = param.weight;
|
||||
if (this.form.url.indexOf("yinseinner:") > -1) {
|
||||
this.link_type = 2;
|
||||
}
|
||||
if (this.form.url.indexOf("?id=") > -1) {
|
||||
this.link_type = 2;
|
||||
const splitArr = this.form.url.split("=");
|
||||
this.form.url = splitArr[0] + "=";
|
||||
this.inLinkId = splitArr[1];
|
||||
} else {
|
||||
this.form.url = this.form.url;
|
||||
}
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
let form = Object.assign({}, this.form);
|
||||
if (
|
||||
form.url.indexOf("yinseinner:") > -1 &&
|
||||
form.url.indexOf("?id=") > -1 &&
|
||||
!this.inLinkId
|
||||
) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入内链ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
form.url.indexOf("yinseinner:") > -1 &&
|
||||
form.url.indexOf("?id=") > -1
|
||||
) {
|
||||
form.url = form.url + this.inLinkId;
|
||||
}
|
||||
API.addBannerjump(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) {
|
||||
let form = Object.assign({}, this.form);
|
||||
if (
|
||||
form.url.indexOf("yinseinner:") > -1 &&
|
||||
form.url.indexOf("?id=") > -1 &&
|
||||
!this.inLinkId
|
||||
) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入内链ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
form.url.indexOf("yinseinner:") > -1 &&
|
||||
form.url.indexOf("?id=") > -1
|
||||
) {
|
||||
form.url = form.url + this.inLinkId;
|
||||
}
|
||||
API.updateBannerjump(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.id}</span>banner活动, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
id: param.id,
|
||||
};
|
||||
API.deleteBannerjump(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.banner = undefined;
|
||||
this.form.url = "";
|
||||
this.form.position = 1;
|
||||
this.form.enable = true;
|
||||
this.form.endAt = undefined;
|
||||
this.form.startAt = undefined;
|
||||
this.form.weight = 0;
|
||||
this.time = "";
|
||||
this.link_type = 1;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
// 时间触发回调
|
||||
changeTimes(time) {
|
||||
if (time) {
|
||||
this.form.startAt = changeTime(time[0]) || "";
|
||||
this.form.endAt = changeTime(time[1]) || "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="680px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="130px">
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="货币名称:" prop="name">
|
||||
<el-input v-model="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="货币类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择货币类型"
|
||||
@change="checkGameGold()"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currencyType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="购买货币数:" prop="coins">
|
||||
<el-input v-model.number="params.coins" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格(分):" prop="price">
|
||||
<el-input v-model.number="params.price" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="优惠描述:" prop="couponDesc">
|
||||
<el-input v-model="params.couponDesc" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠描述（左上角）:" label-width="200px" prop="couponDescTopLeft">
|
||||
<el-input v-model="params.couponDescTopLeft" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item v-if="params.type === 2 || params.type === 3" label="赠送果币:" prop="giveFruitCoin">
|
||||
<el-input v-model.number="params.giveFruitCoin" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="赠送金币:" prop="giveGold">
|
||||
<el-input v-model.number="params.giveGold" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="赠送游戏金币:" prop="giveGameCoin">
|
||||
<el-input v-model.number="params.giveGameCoin" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isGameGold" label="首次赠送vip天数:" prop="firstGiveVipDays">
|
||||
<el-input v-model.number="params.firstGiveVipDays" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item v-if="isGameGold" label="首次赠送游戏金币:" prop="firstGiveGameCoin">
|
||||
<el-input v-model.number="params.firstGiveGameCoin" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isGameGold" label="赠送vip天数:" prop="giveVipDays">
|
||||
<el-input v-model.number="params.giveVipDays" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- <el-form-item label="赠送果币:" prop="giveGameCoin">
|
||||
<el-input v-model.number="params.giveGameCoin" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="赠送金币:" prop="giveGold">
|
||||
<el-input v-model.number="params.giveGold" size="small"></el-input>
|
||||
</el-form-item> -->
|
||||
<div class="form-flex-box">
|
||||
<el-form-item v-if="isGameGold" label="楼凤解锁次数:" prop="louFengUnlockTimes">
|
||||
<el-input v-model.number="params.louFengUnlockTimes" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isGameGold" label="非首充赠送:">
|
||||
<el-switch v-model="params.notFirst">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="激活:">
|
||||
<el-switch v-model="params.isActive">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
isGameGold: false,
|
||||
id: '',
|
||||
params: {
|
||||
name: '',
|
||||
type: '',
|
||||
coins: '',
|
||||
price:'',
|
||||
couponDesc:'',
|
||||
couponDescTopLeft: '',
|
||||
giveVipDays:'',
|
||||
firstGiveVipDays:'',
|
||||
firstGiveGameCoin:'',
|
||||
louFengUnlockTimes:'',
|
||||
giveGameCoin:'',
|
||||
giveFruitCoin: '',
|
||||
giveGold: '',
|
||||
notFirst: false,
|
||||
isActive: false
|
||||
},
|
||||
currencyType: [
|
||||
{label: '金币', value: 1},
|
||||
{label: '游戏币', value: 2},
|
||||
{label: '果币', value: 3},
|
||||
{label: 'AI伴侣币', value: 4},
|
||||
],
|
||||
rules: {
|
||||
// name: [
|
||||
// { required: true, message: '请输入配置名', trigger: 'blur' },
|
||||
// ],
|
||||
type: [
|
||||
{ required: true, message: '请选择货币类型', trigger: 'blur' },
|
||||
],
|
||||
coins: [
|
||||
{ required: true, message: '请输入金币', trigger: 'blur' },
|
||||
{ type: 'number', message: '金币必须为数字' }
|
||||
],
|
||||
// giveFruitCoin: [
|
||||
// { required: true, message: '请输入赠送果币', trigger: 'blur' },
|
||||
// { type: 'number', message: '赠送果币必须为数字' }
|
||||
// ],
|
||||
// giveGold: [
|
||||
// { required: true, message: '请输入赠送金币', trigger: 'blur' },
|
||||
// { type: 'number', message: '赠送金币必须为数字' }
|
||||
// ],
|
||||
price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' },
|
||||
{ type: 'number', message: '价格必须为数字' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '新增货币配置') {
|
||||
this.addGameGold()
|
||||
} else {
|
||||
this.editGameGold()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改金币配置
|
||||
editGameGold() {
|
||||
let params = Object.assign({},this.params, { id: this.id,price: this.params.price })
|
||||
API.updateCurrency(params,true).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '修改货币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('修改货币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 添加金币配置
|
||||
addGameGold() {
|
||||
let params = Object.assign({},this.params, { price: this.params.price })
|
||||
API.addCurrency(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增货币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('新增货币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
name: '',
|
||||
coins: '',
|
||||
type: '',
|
||||
price: '',
|
||||
giveGold: '',
|
||||
couponDesc:'',
|
||||
couponDescTopLeft: '',
|
||||
giveVipDays:'',
|
||||
firstGiveVipDays: '',
|
||||
firstGiveGameCoin: '',
|
||||
louFengUnlockTimes:'',
|
||||
giveGameCoin:'',
|
||||
giveFruitCoin: '',
|
||||
isActive: false,
|
||||
notFirst: false,
|
||||
}
|
||||
this.$refs['form'].resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑货币配置'
|
||||
this.params.name = data.name
|
||||
this.params.coins = data.coins
|
||||
this.params.price = data.price
|
||||
this.params.couponDesc = data.couponDesc
|
||||
this.params.couponDescTopLeft = data.couponDescTopLeft
|
||||
this.params.giveVipDays = data.giveVipDays
|
||||
this.params.firstGiveVipDays = data.firstGiveVipDays
|
||||
this.params.firstGiveGameCoin = data.firstGiveGameCoin
|
||||
this.params.louFengUnlockTimes = data.louFengUnlockTimes
|
||||
this.params.giveGameCoin = data.giveGameCoin
|
||||
this.params.giveFruitCoin = data.giveFruitCoin
|
||||
this.params.giveGold = data.giveGold
|
||||
this.params.notFirst = data.notFirst
|
||||
this.id = data.id
|
||||
this.params.type = data.type
|
||||
this.params.isActive = data.isActive
|
||||
// window.console.log(data.giveFruitCoin)
|
||||
if (data.type === 2) {
|
||||
this.isGameGold = true
|
||||
} else {
|
||||
this.isGameGold = false
|
||||
}
|
||||
} else {
|
||||
this.title = '新增货币配置'
|
||||
}
|
||||
},
|
||||
checkGameGold() {
|
||||
if (this.params.type === 2) {
|
||||
this.isGameGold = true
|
||||
} else {
|
||||
this.isGameGold = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="query.type"
|
||||
size="small"
|
||||
placeholder="请选择货币类型"
|
||||
clearable
|
||||
@change="getCurrencyList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currencyType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="query.isActive"
|
||||
size="small"
|
||||
placeholder="请选择激活状态"
|
||||
clearable
|
||||
@change="getCurrencyList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in activeType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="getCurrencyList" style="margin-right: 10px">搜索
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="Action('add')" class="add-input">+新增配置</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">
|
||||
<el-table-column prop="id" label="ID" align="center" fixed min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="货币名称" align="center" fixed min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="货币类型" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success">{{ currencyTypeParse(scope.row.type) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coins" label="货币数量" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.coins }}</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="giveFruitCoin" label="赠送果币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.giveFruitCoin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveGold" label="赠送金币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.giveGold }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column v-if="isGameGold" prop="couponDesc" label="优惠描述" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.couponDesc || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isGameGold" prop="couponDescTopLeft" label="优惠描述（左上角）" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.couponDescTopLeft || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isGameGold" prop="louFengUnlockTimes" label="楼凤解锁次数" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.louFengUnlockTimes || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isGameGold" prop="giveVipDays" label="赠送vip天数" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveVipDays || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveFruitCoin" label="赠送果币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveFruitCoin || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveGameCoin" label="赠送游戏金币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveGameCoin || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveGold" label="赠送金币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveGold || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="firstGiveVipDays" label="首次赠送vip天数" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.firstGiveVipDays || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="firstGiveGameCoin" label="首次赠送游戏金币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.firstGiveGameCoin || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isGameGold" prop="notFirst" label="非首充赠送" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.notFirst" active-text="开启" inactive-text="关闭" disabled>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isActive" active-text="上架" inactive-text="下架" disabled>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateAt" label="刷新时间" align="center" min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit"
|
||||
@click="Action('edit',scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[10, 15, 20, 30]" :current-page="query.pageNumber" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
<!--新增、编辑弹框-->
|
||||
<CurrencyAction ref="Action" @handlerGoldList="getCurrencyList()"></CurrencyAction>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import CurrencyAction from "./components/currencyAction"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
isGameGold: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
currencyType: [
|
||||
{label: '金币', value: 1},
|
||||
{label: '游戏币', value: 2},
|
||||
{label: '果币', value: 3},
|
||||
{label: 'AI伴侣币', value: 4},
|
||||
],
|
||||
activeType: [
|
||||
{label: '激活', value: true},
|
||||
{label: '未激活', value: false},
|
||||
{label: '全部', value: undefined},
|
||||
],
|
||||
// 请求参数
|
||||
query: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
type: 1,
|
||||
isActive: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CurrencyAction
|
||||
},
|
||||
created() {
|
||||
this.getCurrencyList()
|
||||
},
|
||||
methods: {
|
||||
currencyTypeParse(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "金币"
|
||||
case 2:
|
||||
return "游戏币"
|
||||
case 3:
|
||||
return "果币"
|
||||
case 4:
|
||||
return "AI伴侣币"
|
||||
}
|
||||
},
|
||||
// 请求货币列表
|
||||
getCurrencyList() {
|
||||
this.loading = true;
|
||||
if (this.query.type === 2) {
|
||||
this.isGameGold = true
|
||||
} else {
|
||||
this.isGameGold = false
|
||||
}
|
||||
API.getCurrencyList(this.query).then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.data;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 新增、编辑操作
|
||||
Action(type, data) {
|
||||
this.$refs.Action.open(type, data)
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.query.pageSize = size;
|
||||
this.getCurrencyList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.query.pageNumber = pageNumber;
|
||||
this.getCurrencyList();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gold-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="400px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="130px">
|
||||
<el-form-item label="金币名称:" prop="name">
|
||||
<el-input v-model="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买金币数:" prop="coins">
|
||||
<el-input v-model.number="params.coins" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格:" prop="price">
|
||||
<el-input v-model.number="params.price" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠描述:" prop="couponDesc">
|
||||
<el-input v-model="params.couponDesc" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="赠送vip天数:" prop="giveVipDays">
|
||||
<el-input v-model.number="params.giveVipDays" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="楼凤解锁次数:" prop="louFengUnlockTimes">
|
||||
<el-input v-model.number="params.louFengUnlockTimes" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="赠送游戏金币:" prop="giveGameCoin">
|
||||
<el-input v-model.number="params.giveGameCoin" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="非首充赠送:">
|
||||
<el-switch v-model="params.notFirst">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活:">
|
||||
<el-switch v-model="params.active">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
id: '',
|
||||
params: {
|
||||
name: '',
|
||||
coins: '',
|
||||
price: '',
|
||||
couponDesc:'',
|
||||
giveVipDays:'',
|
||||
louFengUnlockTimes:'',
|
||||
giveGameCoin:'',
|
||||
notFirst: false,
|
||||
active: false
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入配置名', trigger: 'blur' },
|
||||
],
|
||||
coins: [
|
||||
{ required: true, message: '请输入金币', trigger: 'blur' },
|
||||
{ type: 'number', message: '金币必须为数字' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' },
|
||||
{ type: 'number', message: '价格必须为数字' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '新增游戏金币配置') {
|
||||
this.addGameGold()
|
||||
} else {
|
||||
this.editGameGold()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改金币配置
|
||||
editGameGold() {
|
||||
let params = Object.assign({},this.params, { id: this.id,price: this.params.price * 100 })
|
||||
API.updateGameGold(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '修改金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('修改金币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 添加金币配置
|
||||
addGameGold() {
|
||||
let params = Object.assign({},this.params, { price: this.params.price * 100 })
|
||||
API.addGameGold(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增游戏金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('新增游戏金币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
name: '',
|
||||
coins: '',
|
||||
price: '',
|
||||
couponDesc:'',
|
||||
giveVipDays:'',
|
||||
louFengUnlockTimes:'',
|
||||
giveGameCoin:'',
|
||||
notFirst: false,
|
||||
active: false
|
||||
}
|
||||
this.$refs['form'].resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑游戏金币配置'
|
||||
this.params.name = data.name
|
||||
this.params.coins = data.coins
|
||||
this.params.price = data.price/100
|
||||
this.params.couponDesc = data.couponDesc
|
||||
this.params.giveVipDays = data.giveVipDays
|
||||
this.params.louFengUnlockTimes = data.louFengUnlockTimes
|
||||
this.params.giveGameCoin = data.giveGameCoin
|
||||
this.params.notFirst = data.notFirst
|
||||
this.id = data.id
|
||||
} else {
|
||||
this.title = '新增游戏金币配置'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="goldOperation('add')" class="add-input">+新增配置</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">
|
||||
<el-table-column prop="id" label="ID" align="center" fixed min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center" fixed min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coins" label="充值获币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.coins || '0'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格(元)" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.price/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="couponDesc" label="优惠描述" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.couponDesc || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveVipDays" label="赠送vip天数" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveVipDays || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="louFengUnlockTimes" label="楼凤解锁次数" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.louFengUnlockTimes || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveGameCoin" label="赠送游戏金币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.giveGameCoin || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="notFirst" label="非首充赠送" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.notFirst" active-text="开启" inactive-text="关闭" disabled>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.active" active-text="上架" inactive-text="下架" disabled>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="goldOperation('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeGold(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<gold-action ref="goldAction" @handlerGoldList="getGoldList('status')"></gold-action>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import GoldAction from "./components/goldAction"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GoldAction
|
||||
},
|
||||
created() {
|
||||
// this.$store.dispatch('setRouterTag', { router: '/administrators', routerName: "系统管理员" })
|
||||
this.getGoldList()
|
||||
},
|
||||
methods: {
|
||||
// 请求金币列表
|
||||
getGoldList() {
|
||||
this.loading = true;
|
||||
API.getGameGoldList().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除金币配置
|
||||
removeGold(id) {
|
||||
this.$confirm('您确定要删除当前金币配置吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delGameGold({ ids: [id] }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getGoldList()
|
||||
} else {
|
||||
this.$message.error('删除金币配置失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
// 新增、编辑操作
|
||||
goldOperation(type, data) {
|
||||
this.$refs.goldAction.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gold-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="400px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="130px">
|
||||
<el-form-item label="金币名称:" prop="name">
|
||||
<el-input v-model="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买金币数:" prop="coins">
|
||||
<el-input v-model.number="params.coins" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格:" prop="price">
|
||||
<el-input v-model.number="params.price" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活:">
|
||||
<el-switch v-model="params.active">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
id: '',
|
||||
params: {
|
||||
name: '',
|
||||
coins: '',
|
||||
price: '',
|
||||
active: false
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入配置名', trigger: 'blur' },
|
||||
],
|
||||
coins: [
|
||||
{ required: true, message: '请输入金币', trigger: 'blur' },
|
||||
{ type: 'number', message: '金币必须为数字' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' },
|
||||
{ type: 'number', message: '价格必须为数字' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '新增金币配置') {
|
||||
this.addGold()
|
||||
} else {
|
||||
this.editGold()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改金币配置
|
||||
editGold() {
|
||||
let params = Object.assign({},this.params, { id: this.id,price: this.params.price * 100 })
|
||||
API.updateGold(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '修改金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('修改金币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 添加金币配置
|
||||
addGold() {
|
||||
let params = Object.assign({},this.params, { price: this.params.price * 100 })
|
||||
API.addGold(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerGoldList')
|
||||
} else {
|
||||
this.$message.error('新增金币配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
name: '',
|
||||
coins: '',
|
||||
price: '',
|
||||
active: false
|
||||
}
|
||||
this.$refs['form'].resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑金币配置'
|
||||
this.params.name = data.name
|
||||
this.params.coins = data.coins
|
||||
this.params.price = data.price /100
|
||||
this.params.active = data.active
|
||||
this.id = data.id
|
||||
} else {
|
||||
this.title = '新增金币配置'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="goldOperation('add')" class="add-input">+新增配置</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">
|
||||
<el-table-column prop="id" label="ID" align="center" fixed min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center" fixed min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coins" label="充值获币" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.coins || '0'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格(元)" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.price/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.active" active-text="上架" inactive-text="下架" disabled>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="goldOperation('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeGold(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<gold-action ref="goldAction" @handlerGoldList="getGoldList('status')"></gold-action>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import GoldAction from "./components/goldAction"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GoldAction
|
||||
},
|
||||
created() {
|
||||
// this.$store.dispatch('setRouterTag', { router: '/administrators', routerName: "系统管理员" })
|
||||
this.getGoldList()
|
||||
},
|
||||
methods: {
|
||||
// 请求金币列表
|
||||
getGoldList() {
|
||||
this.loading = true;
|
||||
API.getGoldList().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除金币配置
|
||||
removeGold(id) {
|
||||
this.$confirm('您确定要删除当前金币配置吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delGold({ ids: [id] }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除金币配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getGoldList()
|
||||
} else {
|
||||
this.$message.error('删除金币配置失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
// 新增、编辑操作
|
||||
goldOperation(type, data) {
|
||||
this.$refs.goldAction.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gold-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="130px">
|
||||
<el-form-item label="基础金币额度:" prop="amount">
|
||||
<el-input v-model.number="params.amount" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠额度:" prop="incrAmount">
|
||||
<el-input v-model.number="params.incrAmount" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠率:" prop="incTax">
|
||||
<el-input v-model="params.incTax" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式:" prop="type">
|
||||
<el-input
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
disabled
|
||||
>{{params.type= this.params.typeName=='微信'?'wechat':(this.params.typeName=='支付宝'?'alipay':(this.params.typeName=='代充'?'daichong':''))}}</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付类型:" prop="typeName">
|
||||
<el-select v-model="params.typeName" size="small">
|
||||
<el-option
|
||||
v-for="item in typeNameList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
: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" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
params: {
|
||||
amount: "",
|
||||
incrAmount: "",
|
||||
incTax: "",
|
||||
type: "",
|
||||
typeName: "",
|
||||
},
|
||||
typeList: [
|
||||
{ label: "wechat", value: "wechat" },
|
||||
{ label: "alipay", value: "alipay" },
|
||||
{ label: "daichong", value: "daichong" },
|
||||
],
|
||||
typeNameList: [
|
||||
{ label: "微信", value: "微信" },
|
||||
{ label: "支付宝", value: "支付宝" },
|
||||
{ label: "代充", value: "代充" },
|
||||
],
|
||||
|
||||
rules: {
|
||||
amount: [
|
||||
{ required: true, message: "请输入金币额度", trigger: "blur" },
|
||||
],
|
||||
incrAmount: [
|
||||
{ required: true, message: "请输入优惠额度", trigger: "blur" },
|
||||
],
|
||||
type: [{ required: true, message: "请选择充值方式", trigger: "blur" }],
|
||||
typeName: [
|
||||
{ required: true, message: "请选择充值类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增金币支付配置") {
|
||||
this.addGold();
|
||||
} else {
|
||||
this.editGold();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改金币配置
|
||||
editGold() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
id: this.id,
|
||||
incTax: parseFloat(this.params.incTax),
|
||||
});
|
||||
API.updatePayGold(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改金币支付配置成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerGoldList");
|
||||
} else {
|
||||
this.$message.error("修改金币支付配置失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 添加金币配置
|
||||
addGold() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
amount: this.params.amount,
|
||||
type:
|
||||
this.params.typeName == "微信"
|
||||
? "wechat"
|
||||
: this.params.typeName == "支付宝"
|
||||
? "alipay"
|
||||
: "daichong",
|
||||
typeName: this.params.typeName,
|
||||
incTax: parseFloat(this.params.incTax),
|
||||
});
|
||||
API.addPayGold(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增金币支付配置成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerGoldList");
|
||||
} else {
|
||||
this.$message.error("新增金币支付配置失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
amount: "",
|
||||
incrAmount: "",
|
||||
incTax: "",
|
||||
type: "",
|
||||
typeName: "",
|
||||
};
|
||||
this.$refs["form"].resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑金币支付配置";
|
||||
this.params.amount = data.amount;
|
||||
this.params.incrAmount = data.incrAmount;
|
||||
this.params.incTax = parseFloat(data.incTax);
|
||||
this.params.type = data.type;
|
||||
this.params.typeName = data.typeName;
|
||||
this.id = data.id;
|
||||
} else {
|
||||
this.title = "新增金币支付配置";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="goldOperation('add')" class="add-input">+新增配置</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">
|
||||
<el-table-column prop="id" label="ID" align="center" fixed min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="基础金币额度" align="center" fixed min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.amount || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="incrAmount" label="优惠额度" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.incrAmount || '0'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="incTax" label="优惠率" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.incTax || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="type" label="支付方式" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.type || '0'}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="typeName" label="支付类型" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.typeName || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="goldOperation('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeGold(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[5,10, 15, 20]"
|
||||
: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>
|
||||
<!--新增、编辑弹框-->
|
||||
<gold-action ref="goldAction" @handlerGoldList="getPayGoldList('status')"></gold-action>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import GoldAction from "./components/goldAction"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
amount:'',
|
||||
type:'',
|
||||
typeName:''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GoldAction
|
||||
},
|
||||
created() {
|
||||
this.getPayGoldList()
|
||||
},
|
||||
methods: {
|
||||
// 请求金币优惠配置
|
||||
getPayGoldList() {
|
||||
this.loading = true;
|
||||
API.getPayGoldList(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.total=res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除金币支付配置
|
||||
removeGold(id) {
|
||||
this.$confirm('您确定要删除当前金币支付配置吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delPayGold({ ids: [id] }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除金币支付配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getPayGoldList()
|
||||
} else {
|
||||
this.$message.error('删除金币支付配置失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getPayGoldList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getPayGoldList();
|
||||
},
|
||||
// 新增、编辑操作
|
||||
goldOperation(type, data) {
|
||||
this.$refs.goldAction.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gold-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,526 @@
|
||||
<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%);
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.form-flex-box {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.tagBox {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="450px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="100px">
|
||||
<el-form-item label="内容:" prop="content">
|
||||
<el-input v-model="params.content" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转方式:" prop="link_type">
|
||||
<el-select
|
||||
v-model.number="params.link_type"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
@change="linkTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in linkTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接:" prop="url" v-if="params.link_type == 1">
|
||||
<el-input v-model.trim="params.url" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接:" v-if="params.link_type == 2" prop="url">
|
||||
<el-select
|
||||
v-model="params.url"
|
||||
size="small"
|
||||
placeholder="链接地址"
|
||||
filterable
|
||||
style="width:310px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="内链ID"
|
||||
prop="inLinkId"
|
||||
v-if="
|
||||
params.url.indexOf('yinseinner') > -1 &&
|
||||
params.url.indexOf('?id=') > -1
|
||||
"
|
||||
>
|
||||
<el-input v-model.trim="params.inLinkId" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活状态:">
|
||||
<el-switch v-model="isActive" active-color="#13ce66"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" size="small"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addAnnounce, updateAnnounce } from "@/api/marquee.js";
|
||||
// import { validateURL } from "@/utils/validator.js";
|
||||
import { internalLinks } from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
params: {
|
||||
content: "",
|
||||
url: "",
|
||||
link_type: 1,
|
||||
inLinkId: "",
|
||||
},
|
||||
isActive: true,
|
||||
linkTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 1 },
|
||||
{ label: "内部浏览器跳转", value: 2 },
|
||||
],
|
||||
rules: {
|
||||
content: [
|
||||
{ required: true, message: "请输入公告内容", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
linkList: internalLinks,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
linkTypeChange() {
|
||||
this.params.url = "";
|
||||
},
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增跑马灯配置") {
|
||||
this.addAnnounce();
|
||||
} else {
|
||||
this.updateAnnounce();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改跑马灯配置
|
||||
updateAnnounce() {
|
||||
if (
|
||||
this.params.url.indexOf("yinseinner:") > -1 &&
|
||||
this.params.url.indexOf("?id=") > -1 &&
|
||||
!this.params.inLinkId
|
||||
) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "请输入内链ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
this.params.url.indexOf("yinseinner:") > -1 &&
|
||||
this.params.url.indexOf("?id=") > -1
|
||||
) {
|
||||
this.params.url = this.params.url + this.params.inLinkId;
|
||||
}
|
||||
let params = Object.assign({}, this.params, {
|
||||
id: this.params.id,
|
||||
content: this.params.content,
|
||||
url: this.params.url,
|
||||
active: this.isActive,
|
||||
});
|
||||
updateAnnounce(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改跑马灯配置成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("queryMarquee");
|
||||
} else {
|
||||
this.$message.error("修改跑马灯配置失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 添加跑马灯配置
|
||||
addAnnounce() {
|
||||
if (
|
||||
this.params.url.indexOf("yinseinner:") > -1 &&
|
||||
this.params.url.indexOf("?id=") > -1 &&
|
||||
!this.params.inLinkId
|
||||
) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "请输入内链ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
this.params.url.indexOf("yinseinner:") > -1 &&
|
||||
this.params.url.indexOf("?id=") > -1
|
||||
) {
|
||||
this.params.url = this.params.url + this.params.inLinkId;
|
||||
}
|
||||
let params = Object.assign({}, this.params, {
|
||||
content: this.params.content,
|
||||
url: this.params.url,
|
||||
active: this.isActive,
|
||||
});
|
||||
addAnnounce(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增跑马灯配置成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("queryMarquee");
|
||||
} else {
|
||||
this.$message.error("跑马灯配置只能存在一条激活的数据");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
// this.$message.error('新增跑马灯配置失败');
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
content: "",
|
||||
url: "",
|
||||
link_type: 1,
|
||||
inLinkId: "",
|
||||
};
|
||||
this.isActive = true;
|
||||
// this.$refs['form'].resetFields()
|
||||
},
|
||||
// 打开新增、编辑弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (data) {
|
||||
this.params = data;
|
||||
this.isActive = data.active;
|
||||
this.params.link_type = 1;
|
||||
if (this.params.url.indexOf("yinseinner:") > -1) {
|
||||
if (this.params.url.indexOf("?id=") > -1) {
|
||||
const splitArr = this.params.url.split("=");
|
||||
this.params.url = splitArr[0] + "=";
|
||||
this.params.inLinkId = splitArr[1];
|
||||
}
|
||||
this.params.link_type = 2;
|
||||
}
|
||||
}
|
||||
if (type === "edit") {
|
||||
this.title = "编辑跑马灯配置";
|
||||
} else {
|
||||
this.title = "新增跑马灯配置";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<!-- <el-select
|
||||
v-model="query.type"
|
||||
size="small"
|
||||
placeholder="请选择货币类型"
|
||||
clearable
|
||||
@change="getCurrencyList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currencyType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="query.active"
|
||||
size="small"
|
||||
placeholder="请选择激活状态"
|
||||
clearable
|
||||
@change="getCurrencyList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in activeType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select> -->
|
||||
<!-- <el-button type="primary" size="small" @click="getMarqueeList" style="margin-right: 10px">搜索</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="Action('add')"
|
||||
class="add-input"
|
||||
>新增配置</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"
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
align="center"
|
||||
fixed
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="跑马灯内容"
|
||||
align="center"
|
||||
fixed
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.content }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="url" label="跳转链接" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.url }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="active"
|
||||
label="激活状态"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.active">已激活</el-tag>
|
||||
<el-tag type="info" v-else>未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateAt"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="Action('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
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="query.pageNumber"
|
||||
:page-size="query.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 新增、编辑组件 -->
|
||||
<add-and-edit
|
||||
ref="addAndEdit"
|
||||
@queryMarquee="getMarqueeList"
|
||||
></add-and-edit>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAnnounceList, deleteAnnounce } from "@/api/marquee.js";
|
||||
import addAndEdit from "./components/addAndEdit";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addAndEdit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
activeType: [
|
||||
{ label: "激活", value: true },
|
||||
{ label: "未激活", value: false },
|
||||
{ label: "全部", value: undefined },
|
||||
],
|
||||
// 请求参数
|
||||
query: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getMarqueeList();
|
||||
},
|
||||
methods: {
|
||||
// 请求跑马灯列表
|
||||
getMarqueeList() {
|
||||
this.loading = true;
|
||||
getAnnounceList(this.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error("服务端异常");
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 新增、编辑操作
|
||||
Action(type, data) {
|
||||
this.$refs.addAndEdit.open(type, data);
|
||||
},
|
||||
// 删除跑马灯
|
||||
del(param) {
|
||||
this.$confirm("确认删除此跑马灯的内容吗？", "温馨提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
})
|
||||
.then(() => {
|
||||
let ids = [];
|
||||
ids.push(param.id);
|
||||
const params = {
|
||||
ids: ids,
|
||||
};
|
||||
deleteAnnounce(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getMarqueeList();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error("服务端异常!");
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<span style="color:blue">已取消了哟！</span>',
|
||||
});
|
||||
});
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.query.pageSize = size;
|
||||
this.getMarqueeList();
|
||||
},
|
||||
// 跳转页数
|
||||
changeCurrent(pageNo) {
|
||||
this.query.pageNumber = pageNo;
|
||||
this.getMarqueeList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gold-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="150px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="背景图:" prop="officialImg">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.officialImg"
|
||||
:action="action"
|
||||
:wSize="180"
|
||||
:hSize="120"
|
||||
:width="'180px'"
|
||||
:height="'120px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
>
|
||||
</base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="名称(不可重复):" prop="officialName">
|
||||
<el-input v-model="params.officialName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="描述:" prop="officialDesc">
|
||||
<el-input v-model="params.officialDesc"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="排序:" prop="sort">
|
||||
<el-input v-model.number="params.sort"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="下载链接:" prop="officialUrl">
|
||||
<el-input v-model="params.officialUrl"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="启用/禁用:">
|
||||
<el-switch v-model="params.isActive"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="是否首页广告开关:">
|
||||
<el-switch v-model="params.isHomepageAds"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" v-if="this.type === 'add'">
|
||||
<el-form-item label="类型:" prop="officialType">
|
||||
<el-select
|
||||
v-model="params.officialType"
|
||||
size="small"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in officialType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="位置:" prop="position">
|
||||
<el-select
|
||||
v-model.number="params.position"
|
||||
size="small"
|
||||
placeholder="请选择位置"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positions"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>
|
||||
确 认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
type: "",
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
params: {
|
||||
officialName: "",
|
||||
officialDesc: "",
|
||||
officialImg: "",
|
||||
officialUrl: "",
|
||||
isActive: false,
|
||||
officialType: "",
|
||||
isHomepageAds: false,
|
||||
sort: 0,
|
||||
position: 0,
|
||||
},
|
||||
rules: {
|
||||
officialName: [
|
||||
{ required: true, message: "请输入名称", trigger: "blur" },
|
||||
],
|
||||
officialUrl: [
|
||||
{ required: true, message: "请输入下载链接", trigger: "blur" },
|
||||
],
|
||||
officialType: [
|
||||
{ required: true, message: "请选择类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
officialType: [
|
||||
{ label: "下载", value: "1" },
|
||||
{ label: "社区", value: "2" },
|
||||
],
|
||||
positions: [
|
||||
{ label: "装机必备", value: 1 },
|
||||
{ label: "华人国产", value: 2 },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addProduct();
|
||||
} else {
|
||||
this.editProduct();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
officialName: "",
|
||||
officialImg: "",
|
||||
officialUrl: "",
|
||||
isActive: false,
|
||||
isHomepageAds: false,
|
||||
sort: 0,
|
||||
};
|
||||
this.$refs["form"].resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.type = type;
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑官方下载配置";
|
||||
this.params = { ...data };
|
||||
this.id = data.id;
|
||||
} else {
|
||||
this.title = "新增官方下载配置";
|
||||
}
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.officialImg = res.data.coverImg;
|
||||
},
|
||||
|
||||
// 新增商品
|
||||
addProduct() {
|
||||
API.addOfficial(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerOfficialList");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑商品
|
||||
editProduct() {
|
||||
let form = Object.assign(this.params, {
|
||||
id: this.id,
|
||||
});
|
||||
API.updOfficial(form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerOfficialList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-flex-box {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.privileges .el-input--suffix {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+249
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="vipProductList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="vipOperation('add', tableData)"
|
||||
class="add-input"
|
||||
>
|
||||
+新增
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="getOfficialList()"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
height="700"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
@sort-change="handleSortChange"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
align="center"
|
||||
width="250"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="officialName"
|
||||
label="名称"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.officialName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="officialDesc"
|
||||
label="描述"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.officialDesc }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sort }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="officialImg"
|
||||
label="图标"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.officialImg"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="officialUrl"
|
||||
label="链接"
|
||||
align="center"
|
||||
width="500"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.officialUrl || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="officialType"
|
||||
label="类型"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.officialType == "1" ? "下载" : "社区" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="position" label="位置" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.position == 1">装机必备</el-tag>
|
||||
<el-tag type="success" v-else-if="scope.row.position == 2"
|
||||
>华人国产</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isActive" label="状态" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isActive"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
disabled
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isHomepageAds"
|
||||
label="是否首页广告开关"
|
||||
align="center"
|
||||
width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isHomepageAds"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
disabled
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="vipOperation('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="removeAdmin(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<official-action
|
||||
ref="addOfficial"
|
||||
@handlerOfficialList="handlerOfficialList"
|
||||
></official-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
import OfficialAction from "./components/officialAction";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
// VIP商品列表请求参数
|
||||
param: {
|
||||
isActive: undefined,
|
||||
pageNumber: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
OfficialAction,
|
||||
},
|
||||
created() {
|
||||
this.getOfficialList(this.param);
|
||||
},
|
||||
methods: {
|
||||
// 请求商品列表
|
||||
getOfficialList() {
|
||||
this.loading = true;
|
||||
API.getOfficialList(this.param)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.tableData = res.data;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.param.value = sortEscape(column.order);
|
||||
this.param.key = column.prop;
|
||||
this.getOfficialList(this.param);
|
||||
},
|
||||
// 删除
|
||||
removeAdmin(row) {
|
||||
this.$confirm("您确定要删除吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.delOfficial({ id: [row.id] }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getOfficialList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 新增、编辑操作
|
||||
vipOperation(type, data) {
|
||||
this.$refs.addOfficial.open(type, data);
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerOfficialList() {
|
||||
this.getOfficialList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="150px">
|
||||
<el-form-item label="支付平台:" prop="channelName">
|
||||
<el-input v-model="params.channelName" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台ID:" prop="cid">
|
||||
<el-input v-model="params.cid" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式选择:" :show-overflow-tooltip="true" prop="payType">
|
||||
<el-radio-group v-model="params.payType" size="small">
|
||||
<el-radio
|
||||
v-for="item in payMethods"
|
||||
:label="item.value"
|
||||
:key="item.label"
|
||||
>{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台支付权重:" prop="weight">
|
||||
<el-input v-model.number="params.weight" size="small"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="支付金额类型:" prop="category">
|
||||
<el-select v-model="params.category" clearable size="small" placeholder="请选择支付金额类型">
|
||||
<el-option label="固定" value="fixed"></el-option>
|
||||
<el-option label="活动" value="active"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="金额种类:" prop="amountTypesStringCent" v-if="params.category=='fixed'">
|
||||
<el-input v-model="params.amountTypesStringCent" size="small"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最小支持金额(元):" prop="minMoney" v-if="params.category=='active'">
|
||||
<el-input v-model.number="params.minMoney" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="最大支持金额(元):" prop="maxMoney" v-if="params.category=='active'">
|
||||
<el-input v-model.number="params.maxMoney" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="渠道费率:" prop="rate">
|
||||
<el-input v-model="params.rate" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活时间段:" prop="activePeriod">
|
||||
<el-input v-model="params.activePeriod" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活状态:" prop="maxMoney">
|
||||
<el-switch v-model="params.active"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
// import {validatorNumber} from '@/utils/validator'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
params: {
|
||||
channelName: "",
|
||||
rate: "",
|
||||
activePeriod: "",
|
||||
cid: "",
|
||||
payType: "",
|
||||
minMoney: "",
|
||||
maxMoney: "",
|
||||
weight: "",
|
||||
category: "",
|
||||
amountTypes: [], //服务器
|
||||
amountTypesStringCent: "", //控件
|
||||
active: false,
|
||||
},
|
||||
payMethods: [
|
||||
{ label: "支付宝", value: "alipay" },
|
||||
{ label: "微信", value: "wechat" },
|
||||
{ label: "银联", value: "union" },
|
||||
{ label: "代充", value: "daichong" },
|
||||
],
|
||||
rules: {
|
||||
channelName: [
|
||||
{ required: true, message: "请输入支付平台", trigger: "blur" },
|
||||
],
|
||||
rate: [{ required: true, message: "请输入渠道费率", trigger: "blur" }],
|
||||
activePeriod: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入激活时间段，格式:6-23",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
cid: [{ required: true, message: "请输入平台ID", trigger: "blur" }],
|
||||
payType: [
|
||||
{ required: true, message: "请选择支付方式", trigger: "blur" },
|
||||
],
|
||||
weight: [
|
||||
{ required: true, message: "请输入权重", trigger: "blur" },
|
||||
{ type: "number", message: "权重必须为数字" },
|
||||
],
|
||||
category: [
|
||||
{ required: true, message: "请选择支付金额类型", trigger: "blur" },
|
||||
],
|
||||
// amountTypes:[
|
||||
// { message: "请输入输入数字、英文逗号", trigger: "blur"}
|
||||
// ],
|
||||
// minMoney: [
|
||||
// { message: "请输入最小支付金额", trigger: "blur" },
|
||||
// { type: "number", message: "支付金额必须为数字" }
|
||||
// ],
|
||||
// maxMoney: [
|
||||
// { message: "请输入最大支付金额", trigger: "blur" },
|
||||
// { type: "number", message: "支付金额必须为数字" }
|
||||
// ]
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增支付方式") {
|
||||
this.addChannel();
|
||||
} else {
|
||||
this.editChannel();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改支付方式配置
|
||||
editChannel() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
id: this.id,
|
||||
minMoney: this.params.minMoney * 100,
|
||||
maxMoney: this.params.maxMoney * 100,
|
||||
amountTypes: this.params.amountTypesStringCent
|
||||
.split(",")
|
||||
.map((v) => 100 * +v),
|
||||
amountTypesStringCent: this.params.amountTypesStringCent, //type:string 控件
|
||||
});
|
||||
|
||||
API.updateChannel(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改支付方式成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerChannelList");
|
||||
} else {
|
||||
this.$message.error("修改支付方式失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 添加支付方式
|
||||
addChannel() {
|
||||
let params = Object.assign(this.params, {
|
||||
minMoney: this.params.minMoney * 100,
|
||||
maxMoney: this.params.maxMoney * 100,
|
||||
amountTypes: this.params.amountTypesStringCent
|
||||
.split(",")
|
||||
.map((v) => 100 * +v), //this.params.amountTypesStringCent 单位：元
|
||||
amountTypesStringCent: this.params.amountTypesStringCent, //type:string 控件
|
||||
});
|
||||
API.addChannel(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增支付方式成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerChannelList");
|
||||
} else {
|
||||
this.$message.error("新增支付方式失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
channelName: "",
|
||||
cid: "",
|
||||
payType: "",
|
||||
minMoney: "",
|
||||
maxMoney: "",
|
||||
weight: "",
|
||||
category: "",
|
||||
amountTypes: [],
|
||||
amountTypesStringCent: "",
|
||||
active: false,
|
||||
rate: "",
|
||||
activePeriod: "",
|
||||
};
|
||||
this.$refs["form"].resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参k
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑支付方式";
|
||||
this.params.channelName = data.channelName;
|
||||
this.params.cid = data.cid;
|
||||
this.params.rate = data.rate;
|
||||
this.params.activePeriod = data.activePeriod;
|
||||
this.params.active = data.active;
|
||||
this.params.payType = data.payType;
|
||||
this.params.minMoney = data.minMoney / 100;
|
||||
this.params.maxMoney = data.maxMoney / 100;
|
||||
this.params.weight = data.weight;
|
||||
this.params.category = data.category;
|
||||
//data.amountTypes type:Array 单位分
|
||||
this.params.amountTypes = data.amountTypes; //表单过滤后的值
|
||||
this.id = data.id;
|
||||
this.params.amountTypesStringCent =
|
||||
data.amountTypes.length > 0
|
||||
? data.amountTypes.map((v) => v / 100).join(",")
|
||||
: "";
|
||||
} else {
|
||||
this.title = "新增支付方式";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="payMethod-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="channelOperation('add')" class="add-input">+新增支付方式</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" >
|
||||
<el-table-column prop="channelName" label="支付平台" align="center" fixed min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.channelName || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cid" label="平台ID" align="center" fixed min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.cid || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payType" label="支付方式" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payType | payTypeRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="minMoney" label="最小支持金额(元)" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.minMoney/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ƒ" label="最大支持金额(元)" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.maxMoney/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="权重" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.weight || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="category" label="支付金额类型" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.category=='fixed'?'固定':'活动'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amountTypes" label="金额种类" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.amountTypes | amountTypesFun}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rate" label="渠道费率" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.rate || 0}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="activePeriod" label="激活时间段" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.activePeriod || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="active" label="激活状态" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-switch disabled v-model="scope.row.active"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="修改时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="channelOperation('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeChannel(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<channel-action ref="channelAction" @handlerChannelList="getChannelList"></channel-action>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import ChannelAction from "./components/channelAction"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ChannelAction
|
||||
},
|
||||
created() {
|
||||
this.getChannelList()
|
||||
},
|
||||
methods: {
|
||||
// 请求支付方式列表
|
||||
getChannelList() {
|
||||
this.loading = true;
|
||||
API.getChannelList().then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除支付方式配置
|
||||
removeChannel(id) {
|
||||
this.$confirm('您确定要删除当前支付方式吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delChannel({ ids: [id] }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除支付方式成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getChannelList()
|
||||
} else {
|
||||
this.$message.error('删除支付方式失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
// 新增、编辑操作
|
||||
channelOperation(type, data) {
|
||||
this.$refs.channelAction.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.payMethod {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
align="center"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div :data="myData" class="my_data">
|
||||
<span>视频状态:{{ this.myData.status | videoStatus }}</span>
|
||||
<span>视频高度:{{ this.myData.height }}</span>
|
||||
<span>视频宽度:{{ this.myData.width }}</span>
|
||||
<span>视频时长:{{ this.myData.playTime + "s" }}</span>
|
||||
</div>
|
||||
<div class="media-box" id="media-box" v-if="videoShow"></div>
|
||||
<div class="media-box" id="img-box" v-if="imgShow">
|
||||
<img :src="mediaUrl" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import videojs from "video.js";
|
||||
import "videojs-contrib-hls";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgShow: true,
|
||||
mediaUrl: "",
|
||||
videoShow: false,
|
||||
title: "封面图查看",
|
||||
params: {},
|
||||
urll: "",
|
||||
myData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
token() {
|
||||
return this.$store.state.token;
|
||||
}
|
||||
},
|
||||
mounted() { },
|
||||
methods: {
|
||||
// 视频审查列表
|
||||
videoFeviewList() {
|
||||
let urll = this.urll;
|
||||
API.videoFeviewList(this.params, urll).then(res => {
|
||||
this.myData = res.data;
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
if (this.player) {
|
||||
this.player.dispose();
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.imgShow = false;
|
||||
this.videoShow = false;
|
||||
this.mediaUrl = "";
|
||||
},
|
||||
open(url, type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "img") {
|
||||
this.imgShow = true;
|
||||
this.videoShow = false;
|
||||
this.title = "封面图查看";
|
||||
this.mediaUrl = url;
|
||||
} else {
|
||||
this.imgShow = false;
|
||||
this.videoShow = true;
|
||||
this.title = "视频查看";
|
||||
this.mediaUrl =
|
||||
baseConfig.baseServerUrl +
|
||||
baseConfig.playVideoUrl +
|
||||
url +
|
||||
"?token=" +
|
||||
this.token;
|
||||
// eslint-disable-next-line no-console
|
||||
this.urll = data.id;
|
||||
this.$nextTick(function () {
|
||||
document.getElementById("media-box").innerHTML =
|
||||
`<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width:100%;height:100%">
|
||||
</video>`;
|
||||
this.player = videojs(
|
||||
"my-video",
|
||||
{
|
||||
bigPlayButton: true,
|
||||
textTrackDisplay: false,
|
||||
posterImage: true,
|
||||
errorDisplay: true,
|
||||
controlBar: true,
|
||||
playbackRates: [0.5, 1, 2, 3, 4]
|
||||
},
|
||||
function () {
|
||||
this.play();
|
||||
}
|
||||
);
|
||||
this.player.src(this.mediaUrl);
|
||||
this.videoFeviewList();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my_data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.media-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#my-video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,664 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<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"
|
||||
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" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cover" label="封面图" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.cover">暂无封面图</span>
|
||||
<div
|
||||
v-else
|
||||
class="picturePreview"
|
||||
@click="handlePictureCardPreview({ url: imgUrl + scope.row.cover })"
|
||||
>
|
||||
<decrypt-img
|
||||
style="width: 80px; height: 80px"
|
||||
:src="imgUrl + scope.row.cover"
|
||||
fit="fill"
|
||||
></decrypt-img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
style="background-color: #ecf5ff;color: #409eff;border: 1px solid #d9ecff;"
|
||||
v-if="scope.row.type == 1"
|
||||
>宣传视频</el-tag
|
||||
>
|
||||
<el-tag type="success" v-else-if="scope.row.type == 2"
|
||||
>游戏截图</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.type == 3">盲盒展示</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row.type == 4"
|
||||
>花絮视频</el-tag
|
||||
>
|
||||
<el-tag type="warning" v-else-if="scope.row.type == 5"
|
||||
>下载链接</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="视频审查" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
class="el-icon-video-play views"
|
||||
title="点击预览"
|
||||
@click="checkMedia(scope.row.sourceURL, 'video', scope.row)"
|
||||
v-if="scope.row.sourceURL"
|
||||
>
|
||||
</i>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="链接" align="center" width="280">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.url || "-" }}</span>
|
||||
</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="sortCode" label="排序" align="center" width="80">
|
||||
<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="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="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="280"
|
||||
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="600px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<el-form-item
|
||||
label="名称:"
|
||||
size="small"
|
||||
prop="name"
|
||||
style="width: 480px"
|
||||
>
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="small"
|
||||
label="封面图:"
|
||||
prop="cover"
|
||||
style="width: 480px"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.cover"
|
||||
:action="uploadUrl"
|
||||
@successCallback="uploadPortrait"
|
||||
:width="'120px'"
|
||||
:height="'120px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</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
|
||||
label="链接:"
|
||||
size="small"
|
||||
prop="url"
|
||||
style="width: 480px"
|
||||
v-if="form.type == 5"
|
||||
>
|
||||
<el-input v-model="form.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="上传视频:"
|
||||
v-if="(form.type == 1 || form.type == 4) && showUploadVideo"
|
||||
>
|
||||
<!--视频分片上传-->
|
||||
<uploader
|
||||
:options="options"
|
||||
class="uploader-example"
|
||||
ref="uploader"
|
||||
@file-added="fileAdd"
|
||||
@file-success="onFileSuccess"
|
||||
>
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
<uploader-drop>
|
||||
<uploader-btn :attrs="attrs">上传视频</uploader-btn>
|
||||
</uploader-drop>
|
||||
<uploader-list></uploader-list>
|
||||
</uploader>
|
||||
</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="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>
|
||||
<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-video ref="previewVideo"></preview-video>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage";
|
||||
import PreviewVideo from "./components/preview-video";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
},
|
||||
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,
|
||||
status: undefined, // 状态
|
||||
type: undefined, // 类型
|
||||
},
|
||||
rules: {},
|
||||
types: [
|
||||
{
|
||||
label: "宣传视频",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "游戏截图",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "盲盒展示",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "花絮视频",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "下载链接",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
statuses: [
|
||||
{
|
||||
label: "开启",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "关闭",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
showUploadVideo: true,
|
||||
form: {
|
||||
id: undefined,
|
||||
cover: undefined, // 封面图
|
||||
name: undefined, // 名称
|
||||
sortCode: 0, // 排序
|
||||
sourceURL: undefined, // 视频链接
|
||||
status: 1, // 状态 1:开启；2:关闭
|
||||
type: 1, // 类型
|
||||
url: undefined, // 链接
|
||||
},
|
||||
attrs: {
|
||||
accept: [
|
||||
".mp4",
|
||||
".qlv",
|
||||
".qsv",
|
||||
".ogg",
|
||||
".flv",
|
||||
".avi",
|
||||
".wmv",
|
||||
".rmvb",
|
||||
], // 接受文件类型
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
target: baseConfig.baseServerUrl + "/vid/uploadDotStream", // 上传地址
|
||||
testChunks: false, // 是否开启服务器分片校验
|
||||
method: "application/json",
|
||||
headers: {
|
||||
// 额外请求头
|
||||
Authorization: local.get("userInfo")
|
||||
? local.get("userInfo").token
|
||||
: "",
|
||||
},
|
||||
fileParameterName: "upload", // 文件名参数，默认为file
|
||||
query: this.uploadQuery, // 额外参数
|
||||
singleFile: true, // 单文件上传
|
||||
chunkSize: 2048000, // 分片大小，默认1M
|
||||
simultaneousUploads: 6,
|
||||
// 把英文时间转成中文
|
||||
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
|
||||
return parsedTimeRemaining
|
||||
.replace(/\syears?/, "年")
|
||||
.replace(/\days?/, "天")
|
||||
.replace(/\shours?/, "小时")
|
||||
.replace(/\sminutes?/, "分钟")
|
||||
.replace(/\sseconds?/, "秒");
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 头像上传成功
|
||||
uploadPortrait(res) {
|
||||
this.form.cover = res.data.coverImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisiblePreview = true;
|
||||
},
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getAdvanceConfigList(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;
|
||||
});
|
||||
},
|
||||
// 视频上传成功时回调函数
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onFileSuccess(rootFile, file, response, chunk) {
|
||||
const res = JSON.parse(response);
|
||||
this.form.sourceURL = res.data.sourceURL;
|
||||
//通知文件服务器, 上传完成
|
||||
API.uploadSuccess({ id: res.data.sourceID })
|
||||
.then((res) => {
|
||||
if (res.code !== 200) {
|
||||
this.$message.error("通知失败！");
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error("通知异常！");
|
||||
});
|
||||
},
|
||||
// 视频上传选中时
|
||||
fileAdd() {
|
||||
this.generateTaskId();
|
||||
},
|
||||
// 定义视频上传唯一标识符id
|
||||
generateTaskId() {
|
||||
const time = new Date().getTime();
|
||||
this.trackId = time;
|
||||
},
|
||||
// 视频上传额外参数
|
||||
uploadQuery(file, chunk) {
|
||||
return {
|
||||
pos: chunk.offset,
|
||||
id: String(this.trackId),
|
||||
};
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, type, data) {
|
||||
this.$refs.previewVideo.open(url, type, data);
|
||||
},
|
||||
// 新增
|
||||
addAndEdit(param) {
|
||||
this.showUploadVideo = true;
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.name = param.name;
|
||||
this.form.cover = param.cover;
|
||||
this.form.sourceURL = param.sourceURL;
|
||||
this.form.type = param.type;
|
||||
this.form.sortCode = param.sortCode;
|
||||
this.form.status = param.status;
|
||||
this.form.url = param.url;
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addAdvanceConfig(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.updateAdvanceConfig(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.name}</span>预售配置, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
let delData = {
|
||||
id: param.id,
|
||||
};
|
||||
API.delAdvanceConfig(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.name = undefined;
|
||||
this.form.cover = undefined;
|
||||
this.form.type = 1;
|
||||
this.form.sourceURL = undefined;
|
||||
this.form.url = undefined;
|
||||
this.form.sortCode = 0;
|
||||
this.form.status = 1;
|
||||
this.showUploadVideo = false;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
+317
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="680px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
label-width="150px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="图标:" prop="img">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.img"
|
||||
:action="action"
|
||||
:wSize="180"
|
||||
:hSize="90"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" style="width: 300px">
|
||||
<el-form-item label="特权:" prop="privilege">
|
||||
<!-- <el-select
|
||||
v-model="params.privilege"
|
||||
placeholder="请选择特权"
|
||||
@change="privilegeFunc()"
|
||||
class="privileges"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in privileges"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select> -->
|
||||
<el-input
|
||||
v-model="params.privilegeName"
|
||||
placeholder="请输入特权"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" style="width: 300px">
|
||||
<el-form-item label="特权值:" prop="privilege">
|
||||
<el-input
|
||||
v-model.number="params.privilege"
|
||||
placeholder="请输入特权值"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" style="width: 400px">
|
||||
<el-form-item label="描述:" prop="privilegeDesc">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="params.privilegeDesc"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" style="width: 400px">
|
||||
<el-form-item label="排序:" prop="sortCode">
|
||||
<el-input v-model.number="params.sortCode" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box" style="width: 400px">
|
||||
<el-form-item label="核心权益:" prop="isCore">
|
||||
<el-switch v-model="params.isCore"></el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>确 认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
type: "",
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
params: {
|
||||
privilegeName: "",
|
||||
privilegeDesc: "",
|
||||
img: "",
|
||||
privilege: undefined,
|
||||
sortCode: 0,
|
||||
isCore: false,
|
||||
},
|
||||
// privileges: [
|
||||
// { label: "评论回复", value: 1 },
|
||||
// { label: "专属客服", value: 2 },
|
||||
// { label: "专属线路", value: 3 },
|
||||
// { label: "头像昵称", value: 4 },
|
||||
// { label: "离线缓存", value: 5 },
|
||||
// { label: "至尊会员", value: 6 },
|
||||
// { label: "金币特权", value: 7 },
|
||||
// { label: "专属特权", value: 8 },
|
||||
// { label: "防封特权", value: 9 },
|
||||
// { label: "评论免审", value: 10 },
|
||||
// { label: "至尊VIP", value: 11 },
|
||||
// { label: "至尊金币", value: 12 },
|
||||
// { label: "至尊特权", value: 13 },
|
||||
// { label: "至尊缓存", value: 14 },
|
||||
// { label: "帝王VIP", value: 15 },
|
||||
// { label: "帝王金币", value: 16 },
|
||||
// { label: "帝王无敌", value: 17 },
|
||||
// { label: "帝王缓存", value: 18 },
|
||||
// { label: "帝王特权", value: 19 },
|
||||
// { label: "帝王暗网", value: 20 },
|
||||
// { label: "外围约炮", value: 21 },
|
||||
// { label: "女神裸聊", value: 22 },
|
||||
// { label: "下载缓存", value: 23 },
|
||||
// { label: "下载缓存", value: 24 },
|
||||
// ],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.newProductBenefit();
|
||||
} else {
|
||||
this.editProductBenefit();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
img: "",
|
||||
privilegeDesc: "",
|
||||
privilegeName: "",
|
||||
privilege: undefined,
|
||||
sortCode: 0,
|
||||
isCore: false,
|
||||
};
|
||||
this.$refs["form"].resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.type = type;
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑商品权益配置";
|
||||
this.params = { ...data };
|
||||
this.id = data.id;
|
||||
} else {
|
||||
this.title = "新增商品权益配置";
|
||||
}
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.img = res.data.coverImg;
|
||||
},
|
||||
// privilegeFunc() {
|
||||
// for (const p of this.privileges) {
|
||||
// if (this.params.privilege === p.value) {
|
||||
// this.params.privilegeName = p.label;
|
||||
// continue;
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// 新增商品
|
||||
newProductBenefit() {
|
||||
API.newProductBenefit(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerProductList");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑商品
|
||||
editProductBenefit() {
|
||||
let form = Object.assign(this.params, {
|
||||
id: this.id,
|
||||
});
|
||||
API.editProductBenefit(form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerProductList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-flex-box {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.privileges .el-input--suffix {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="vipProductList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="vipOperation('add', tableData)"
|
||||
class="add-input"
|
||||
>+新增商品权益配置</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
height="700"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
@sort-change="handleSortChange"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column prop="privilegeName" label="特权" align="center" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.privilegeName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="privilege" label="特权值" align="center" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.privilege }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="privilegeDesc" label="描述" align="center" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.privilegeDesc }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="img" label="图标" align="center">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.img"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sortCode" label="排序" align="center" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sortCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isCore" label="核心权益" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isCore" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="vipOperation('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="removeAdmin(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<productBenefit-action
|
||||
ref="addVip"
|
||||
@handlerProductList="handlerProductList"
|
||||
></productBenefit-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
import ProductBenefitAction from "./components/productBenefitAction";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
// VIP商品列表请求参数
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 100,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ProductBenefitAction,
|
||||
},
|
||||
created() {
|
||||
this.getProductList(this.param);
|
||||
},
|
||||
methods: {
|
||||
// 请求商品列表
|
||||
getProductList() {
|
||||
this.loading = true;
|
||||
API.getProductBenefitList(this.param)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.tableData = res.data;
|
||||
} else if (res.code === 200) {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.param.value = sortEscape(column.order);
|
||||
this.param.key = column.prop;
|
||||
this.getProductList(this.param);
|
||||
},
|
||||
// 删除管理员
|
||||
removeAdmin(row) {
|
||||
this.$confirm("您确定要删除吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.deleteProductBenefit({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getProductList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 新增、编辑操作
|
||||
vipOperation(type, data) {
|
||||
this.$refs.addVip.open(type, data);
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerProductList() {
|
||||
this.getProductList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
+206
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="360px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="开关:">
|
||||
<el-switch v-model="params.status"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序:" prop="sort">
|
||||
<el-input v-model.number="params.sort" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input v-model.trim="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示样式:" prop="showType">
|
||||
<el-select v-model="params.showType" size="small" clearable placeholder="请选择展示样式">
|
||||
<el-option v-for="item in showTypeList" :value="item.value" :label="item.label" :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" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { validatorIndex } from "@/utils/validator";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
labelPosition: "left",
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
type: "",
|
||||
params: {
|
||||
name: "",
|
||||
sort: "",
|
||||
showType:'',
|
||||
status: false,
|
||||
},
|
||||
showTypeList:[{label:'横',value:1},{label:'竖',value:2}],
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
sort: [
|
||||
{ required: true, message: "请输入排序", trigger: "blur" },
|
||||
{ validator: validatorIndex, trigger: "blur" },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "请选择开关状态", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addProduct();
|
||||
} else {
|
||||
this.editProduct();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
name: "",
|
||||
showType:'',
|
||||
sort: 0,
|
||||
status: false,
|
||||
};
|
||||
this.$refs["form"].resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.type = type;
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑配置";
|
||||
this.params.name = data.name;
|
||||
this.params.showType = data.showType;
|
||||
this.params.sort = data.sort;
|
||||
this.params.status = data.status;
|
||||
this.id = data.id;
|
||||
} else {
|
||||
this.title = "新增配置";
|
||||
}
|
||||
},
|
||||
// 新增
|
||||
addProduct() {
|
||||
API.addPosition(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerProductList");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
editProduct() {
|
||||
let form = Object.assign(this.params, { id: this.id });
|
||||
API.editPosition(form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerProductList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.form-flex-box {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+167
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="vipProductList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="vipOperation('add',tableData)"
|
||||
class="add-input"
|
||||
>+新增</el-button>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="id"
|
||||
align="center"
|
||||
fixed
|
||||
width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="名称" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="showType" label="展示样式" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.showType |showTypeList }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="开关" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" width="160" sortable></el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="vipOperation('edit',scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="removeAdmin(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<position-action ref="positionAction" @handlerProductList="handlerProductList"></position-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import positionAction from "./components/positionAction";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
|
||||
tableData: [],
|
||||
// 列表请求参数
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
positionAction,
|
||||
},
|
||||
created() {
|
||||
this.getPositionList(this.param);
|
||||
},
|
||||
methods: {
|
||||
// 请求商品列表
|
||||
getPositionList() {
|
||||
this.loading = true;
|
||||
API.getPositionList(this.param)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 删除管理员
|
||||
removeAdmin(row) {
|
||||
this.$confirm("您确定要删除当前项吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.deletePosition({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getPositionList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 新增、编辑操作
|
||||
vipOperation(type, data) {
|
||||
this.$refs.positionAction.open(type, data);
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getPayGoldList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getPayGoldList();
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerProductList() {
|
||||
this.getPositionList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="add-pay-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="100px">
|
||||
<el-form-item label="网址:" prop="domain">
|
||||
<div class="xiangqin" v-for="(item,i) in params.domain" :key="i">
|
||||
<div class="xiangqin_left">
|
||||
url: <el-input size="small" v-model="item.url"></el-input>
|
||||
</div>
|
||||
<div class="xiangqin_left">
|
||||
权重: <el-input size="small" v-model.number="item.weight"></el-input>
|
||||
</div>
|
||||
<div class="xiangqin_right">
|
||||
<el-button type="primary" icon="el-icon-delete" size="small" @click="deleteItem(i)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="网址操作:">
|
||||
<el-button type="primary" size="small" @click="addDomain({url:'',weight:''})">新增网址</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('form')" :loading="flag" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
// import { validatorIndex } from '@/utils/validator'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
id: '',
|
||||
params: {
|
||||
domain: [],
|
||||
isActive: true
|
||||
},
|
||||
rules: {
|
||||
domain: [
|
||||
{ required: true, message: '请添加推广落地页地址', trigger: 'blur' },
|
||||
{ validator: this.validatorAttr, trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 校验domain的数据是否正确
|
||||
validatorAttr(rule, value, callback) {
|
||||
if (value.length === 0) {
|
||||
callback(new Error("请添加网址"));
|
||||
} else {
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (!value[i].url) {
|
||||
callback(new Error("请填写所有的url项"));
|
||||
}
|
||||
if (value[i].weight === '') {
|
||||
callback(new Error("请填写所有的权重项"));
|
||||
}
|
||||
}
|
||||
callback();
|
||||
}
|
||||
},
|
||||
// 删除某项
|
||||
deleteItem(i) {
|
||||
this.params.domain.splice(i, 1)
|
||||
},
|
||||
// 新增域名
|
||||
addDomain(obj) {
|
||||
this.params.domain.push(obj)
|
||||
},
|
||||
// 提交修改
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '新增推广落地页配置') {
|
||||
this.addPromote()
|
||||
} else {
|
||||
this.editPromote()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改推广落地页配置
|
||||
editPromote() {
|
||||
let params = Object.assign({}, this.params, { id: this.id })
|
||||
API.updatePromote(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '修改推广落地页配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerPromoteList')
|
||||
} else {
|
||||
this.$message.error('修改推广落地页配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 添加推广落地页配置
|
||||
addPromote() {
|
||||
let params = Object.assign({}, this.params)
|
||||
API.addPromote(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增推广落地页配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerPromoteList')
|
||||
} else {
|
||||
this.$message.error('新增推广落地页配置失败')
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
}).catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
domain: [],
|
||||
isActive: true,
|
||||
}
|
||||
this.$refs['form'].resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑推广落地页配置'
|
||||
this.params.domain = [...data.domain]
|
||||
this.id = data.id
|
||||
} else {
|
||||
this.title = '新增推广落地页配置'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.add-pay-box {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.xiangqin {
|
||||
// width: 300px;
|
||||
// padding-left: 180px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.xiangqin_left {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border: 1px dashed #e63765;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: 1px dashed #e63765 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="glod-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="promoteOperation('add')" class="add-input">+新增配置</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">
|
||||
<el-table-column prop="id" label="ID" align="center" fixed min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="domain" label="网址" align="left" min-width="350">
|
||||
<template slot-scope="scope">
|
||||
<!-- <span>{{scope.row.domain || '未知'}}</span> -->
|
||||
<div v-for="item in scope.row.domain" :key="item.url">
|
||||
<div class="urlStatus" :style="item.status === 0 ? {background:'#eefdee',color:'#62b106'}:{background:'#ccc',color:'red'}">
|
||||
<span>权重：{{item.weight}},</span>
|
||||
<span>url：{{item.url}}</span>
|
||||
<span>{{item.status === 0 ?'正常': '被封'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="240">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="promoteOperation('edit',scope.row)"></el-button>
|
||||
<!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="removePromote(scope.row.id)"></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 v-if="total > 1" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
-->
|
||||
<!--新增、编辑弹框-->
|
||||
<promote-action ref="promoteAction" @handlerPromoteList="getPromoteList('status')"></promote-action>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import PromoteAction from "./components/promoteAction"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
//pageNumber: 1,
|
||||
//pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
PromoteAction
|
||||
},
|
||||
created() {
|
||||
// this.$store.dispatch('setRouterTag', { router: '/administrators', routerName: "系统管理员" })
|
||||
this.getPromoteList()
|
||||
},
|
||||
methods: {
|
||||
// 请求推广落地页列表
|
||||
getPromoteList(type) {
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true;
|
||||
API.getPromoteList(this.params).then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = [res.data]
|
||||
this.total = res.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除推广落地页配置
|
||||
removePromote(id) {
|
||||
this.$confirm('您确定要删除当前推广落地页配置吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delPromote({ ids: [id] }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除推广落地页配置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getPromoteList()
|
||||
} else {
|
||||
this.$message.error('删除推广落地页配置失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
// 新增、编辑操作
|
||||
promoteOperation(type, data) {
|
||||
this.$refs.promoteAction.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.promote-list-box {
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.urlStatus{
|
||||
margin:4px 0;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
id="activity"
|
||||
title="编辑vip升级配置"
|
||||
:visible.sync="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="350px"
|
||||
center
|
||||
calss="ac-dialog"
|
||||
>
|
||||
<div class="ac-dia-form">
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:model="ruleForm"
|
||||
size="mini"
|
||||
label-width="120px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="vip升级价格" prop="vipUpPrice">
|
||||
<el-input v-model.number="ruleForm.vipUpPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="svip升级价格" prop="sVipUpPrice">
|
||||
<el-input v-model.number="ruleForm.sVipUpPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="vip升级节省" prop="vipUpCheapPrice">
|
||||
<el-input v-model.number="ruleForm.vipUpCheapPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="svip升级节省" prop="sVipUpCheapPrice">
|
||||
<el-input v-model.number="ruleForm.sVipUpCheapPrice" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新手卡倒计时(小时)" prop="timeConfig">
|
||||
<el-input v-model.number="ruleForm.timeConfig" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="resetForm('ruleForm')">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogFormVisible: false,
|
||||
ruleForm: {
|
||||
id:'',
|
||||
vipUpPrice:'',
|
||||
sVipUpPrice:'',
|
||||
vipUpCheapPrice:'',
|
||||
sVipUpCheapPrice:'',
|
||||
timeConfig:24
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
API.setConfig(this.ruleForm).then(() => {
|
||||
this.$emit('handlerChannelList')
|
||||
this.dialogFormVisible = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
this.$emit('handlerChannelList')
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
// 打开编辑视频弹窗
|
||||
open(pageData) {
|
||||
this.dialogFormVisible = true
|
||||
this.ruleForm=pageData
|
||||
window.console.log(pageData,'pageData')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="vipcfg-box">
|
||||
<h3 style="text-align:center ;"> VIP升级配置</h3>
|
||||
<div v-for="(item, i) in tableData" :key="i" class="lf_cfg">
|
||||
<el-button type="success" size="mini" @click="action_cfg()" icon="el-icon-edit" style="">编辑</el-button>
|
||||
<div class="lf_cfg_content">
|
||||
<div>
|
||||
vip升级价格:<span>{{ item.vipUpPrice }}</span>
|
||||
</div>
|
||||
<div>
|
||||
svip升级价格:<span>{{ item.sVipUpPrice }}</span>
|
||||
</div>
|
||||
<div>
|
||||
vip升级节省价格:<span>{{ item.vipUpCheapPrice }}</span>
|
||||
</div>
|
||||
<div>
|
||||
svip升级节省价格:<span>{{ item.sVipUpCheapPrice }}</span>
|
||||
</div>
|
||||
<div>
|
||||
新手卡倒计时(小时):<span>{{ item.timeConfig }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑VIP -->
|
||||
<edit ref="edit" @handlerChannelList="getConfig"></edit>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import Edit from './components/edit'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
pageData: {},
|
||||
total: 0,
|
||||
// VIP升级配置列表请求参数
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Edit
|
||||
},
|
||||
created() {
|
||||
this.getConfig()
|
||||
},
|
||||
methods: {
|
||||
// 请求VIP升级配置列表
|
||||
getConfig(type) {
|
||||
this.loading = true
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
API.getConfig(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = [res.data]
|
||||
this.pageData = res.data
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.pageData = {}
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//编辑VIP升级配置
|
||||
action_cfg() {
|
||||
this.$refs.edit.open(this.pageData)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.lf_cfg {
|
||||
.lf_cfg_content {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
color: cadetblue;
|
||||
}
|
||||
.el-button {
|
||||
background: rgba(230,55,101,.8) ;
|
||||
margin-left: 20px;
|
||||
span {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn_style {
|
||||
padding: 4px 8px;
|
||||
color: #000000;
|
||||
background: #327720;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
+862
@@ -0,0 +1,862 @@
|
||||
<template>
|
||||
<div class="vipProductList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="param.productType"
|
||||
size="small"
|
||||
placeholder="请选择产品类型"
|
||||
clearable
|
||||
@change="getProductList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="param.status"
|
||||
size="small"
|
||||
placeholder="请选择上架状态"
|
||||
clearable
|
||||
@change="getProductList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in activeType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="getProductList"
|
||||
style="margin-right: 10px"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="vipOperation('add', tableData)"
|
||||
class="add-input"
|
||||
>+新增商品</el-button
|
||||
>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
height="700"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
@sort-change="handleSortChange"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="productName"
|
||||
label="名称"
|
||||
align="center"
|
||||
width="80"
|
||||
fixed
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.productName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newName"
|
||||
label="名称(新)"
|
||||
align="center"
|
||||
width="80"
|
||||
fixed
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.newName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cover"
|
||||
label="预售卡(未选中)"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
v-if="scope.row.bgImg"
|
||||
:src="imgUrl + scope.row.bgImg"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newBgImg"
|
||||
label="预售卡(选中)"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
v-if="scope.row.newBgImg"
|
||||
:src="imgUrl + scope.row.newBgImg"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endBgImg"
|
||||
label="尾款(未选中)"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
v-if="scope.row.endBgImg"
|
||||
:src="imgUrl + scope.row.endBgImg"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endBgSelectImg"
|
||||
label="尾款(选中)"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
v-if="scope.row.endBgSelectImg"
|
||||
:src="imgUrl + scope.row.endBgSelectImg"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prod="advanceVipLevel"
|
||||
label="预付卡等级"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.advanceVipLevel }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prod="advanceDuration"
|
||||
label="预付卡持续天数"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.advanceDuration }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prod="advanceExpires"
|
||||
label="预付卡强制到期时间"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.advanceExpires | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prod="allowedUpgradeCards"
|
||||
label="允许升级到此卡的会员卡信息"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div
|
||||
v-for="item in scope.row.allowedUpgradeCards"
|
||||
:key="item.productID"
|
||||
:data-id="item.productID"
|
||||
>
|
||||
{{ item.productName }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="id"
|
||||
align="center"
|
||||
width="120"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="duration"
|
||||
label="VIP天数"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.duration || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="vipLevel"
|
||||
label="会员等级"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.vipLevel == 1">V1会员</span>
|
||||
<span v-else-if="scope.row.vipLevel == 2">V2会员</span>
|
||||
<span v-else-if="scope.row.vipLevel == 3">V3会员</span>
|
||||
<span v-else-if="scope.row.vipLevel == 4">至尊会员</span>
|
||||
<span v-else>未知</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="originalPrice"
|
||||
label="原价（金币）"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.originalPrice || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="discountedPrice"
|
||||
label="现优惠价（金币）"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.discountedPrice || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="chatPrice"
|
||||
label="私信价格"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.chatPrice || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="broadcastDays"
|
||||
label="直播权益天数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.broadcastDays || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dramaDays"
|
||||
label="短剧权益天数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.dramaDays || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="赠送ai脱衣次数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.aiUndressCount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="downloadCount"
|
||||
label="赠送下载次数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.downloadCount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="赠送抽奖次数"
|
||||
align="center"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.luckyDrawCount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="aiUndressLimitPerDay"
|
||||
label="每日ai脱衣次数限制(预售)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{
|
||||
(slot.row.prepaidPrivilege &&
|
||||
slot.row.prepaidPrivilege.aiUndressLimitPerDay) ||
|
||||
0
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="coinVideoLimitPerDay"
|
||||
label="每日金币视频免费次数(预售)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{
|
||||
(slot.row.prepaidPrivilege &&
|
||||
slot.row.prepaidPrivilege.coinVideoLimitPerDay) ||
|
||||
0
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="downloadLimitPerDay"
|
||||
label="每日下载次数限制(预售)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{
|
||||
(slot.row.prepaidPrivilege &&
|
||||
slot.row.prepaidPrivilege.downloadLimitPerDay) ||
|
||||
0
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="luckyDrawLimitPerDay"
|
||||
label="每日抽奖次数限制(预售)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{
|
||||
(slot.row.prepaidPrivilege &&
|
||||
slot.row.prepaidPrivilege.luckyDrawLimitPerDay) ||
|
||||
0
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="advanceAmount"
|
||||
label="预付金额"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.advanceAmount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="balanceAmount"
|
||||
label="尾款金额"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.balanceAmount || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="支付尾款开始时间"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.startTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
label="支付尾款结束时间"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.endTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="activityTime"
|
||||
label="活动时间"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.activityTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="allGoldVideoFree"
|
||||
label="所有金币视频免费"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.allGoldVideoFree">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isHomePopUp"
|
||||
label="是否首页弹窗"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.isHomePopUp">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="会员卡类型"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.type == 1">初级</el-tag>
|
||||
<el-tag v-else-if="scope.row.type == 2">高级</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sendGame"
|
||||
label="是否赠送VIP"
|
||||
align="center"
|
||||
width="110"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.sendGame">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="楼凤解锁次数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.louFengUnlockTimes || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="楼凤折扣率(%)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.louFengDiscount || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="楼凤预约折扣率(%)"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.loufengBookDiscount || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="楼凤折扣折扣天数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.loufengBookDiscountDays || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="金币视频免费天数"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.goldVideoFreeDay || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="金币视频免费最高金额"
|
||||
align="center"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.goldVideoFreeLimit }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="goldVideoCouponNum"
|
||||
label="赠送观影券金币"
|
||||
align="center"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.goldVideoCouponNum || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="goldVideoCouponCount"
|
||||
label="赠送观影券数量"
|
||||
align="center"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.goldVideoCouponCount || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="payVidDiscount"
|
||||
label="支付视频折扣"
|
||||
align="center"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.payVidDiscount || "" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productType"
|
||||
label="产品类型"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.productType | productTypeList }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="产品位置"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.position || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="unitPriceDisplay"
|
||||
label="是否展示单价"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.unitPriceDisplay" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isAmountPay"
|
||||
label="金币购买"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isAmountPay" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="exclusiveOffer"
|
||||
label="专属特惠"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.exclusiveOffer || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-text="上架"
|
||||
inactive-text="下架"
|
||||
disabled
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="chanSplitMod"
|
||||
label="渠道分成模式"
|
||||
align="center"
|
||||
width="120"
|
||||
:formatter="showMod"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="actionDesc"
|
||||
label="活动描述"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.actionDesc || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="vipCardDesc"
|
||||
label="vip卡描述"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.vipCardDesc || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="privilegeDesc"
|
||||
label="特权描述"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.privilegeDesc || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="showCountdownTime"
|
||||
label="新手卡倒计时(单位：小时)"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.showCountdownTime || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="备注"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120px"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.desc || "暂无备注" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sort"
|
||||
label="排序"
|
||||
align="center"
|
||||
width="80"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="privilege" label="特权" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.privilege && scope.row.privilege.length > 0">{{
|
||||
scope.row.privilege
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="serviceTime"
|
||||
label="服务时间(单位:分钟)"
|
||||
align="center"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="slot">
|
||||
<span>{{ slot.row.serviceTime || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="vipOperation('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="removeAdmin(scope.row)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--新增、编辑弹框-->
|
||||
<vip-action
|
||||
ref="addVip"
|
||||
@handlerProductList="handlerProductList"
|
||||
></vip-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
import VipAction from "./components/vipAction";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
// VIP商品列表请求参数
|
||||
param: {
|
||||
key: "",
|
||||
value: "",
|
||||
status: undefined,
|
||||
productType: undefined,
|
||||
},
|
||||
productTypeList: [
|
||||
{ label: "会员卡", value: 0 },
|
||||
{ label: "约会卡", value: 3 },
|
||||
{ label: "新手卡", value: 5 },
|
||||
{ label: "实体商品", value: 6 },
|
||||
{ label: "楼凤优惠卡", value: 9 },
|
||||
{ label: "楼凤全免卡", value: 10 },
|
||||
{ label: "其它卡", value: 20 },
|
||||
{ label: "裸聊服务", value: 12 },
|
||||
{ label: "视频折扣卡", value: 13 },
|
||||
{ label: "视频免费卡", value: 14 },
|
||||
{ label: "预售卡", value: 21 },
|
||||
{ label: "游戏预售卡", value: 22 },
|
||||
{ label: "白嫖卡", value: 24 },
|
||||
],
|
||||
activeType: [
|
||||
{ label: "上架", value: true },
|
||||
{ label: "下架", value: false },
|
||||
{ label: "全部", value: undefined },
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
VipAction,
|
||||
},
|
||||
computed: {
|
||||
cardList() {
|
||||
return this.tableData.map((item) => ({
|
||||
productID: item.id,
|
||||
productName: item.productName,
|
||||
}));
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getProductList(this.param);
|
||||
},
|
||||
methods: {
|
||||
// 请求商品列表
|
||||
getProductList() {
|
||||
this.loading = true;
|
||||
API.getPruductList(this.param)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data || [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.param.value = sortEscape(column.order);
|
||||
this.param.key = column.prop;
|
||||
this.getProductList(this.param);
|
||||
},
|
||||
// 删除管理员
|
||||
removeAdmin(row) {
|
||||
this.$confirm("您确定要删除当前商品吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.getDeleteSection({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getProductList();
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 回显分成模式
|
||||
showMod(row) {
|
||||
let str = "-";
|
||||
switch (row.chanSplitMod) {
|
||||
case 0:
|
||||
str = "不分成";
|
||||
break;
|
||||
case 1:
|
||||
str = "正常分成";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
// 新增、编辑操作
|
||||
vipOperation(type, data) {
|
||||
this.$refs.addVip.open(type, data, this.cardList);
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerProductList() {
|
||||
this.getProductList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user