Initial commit
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="edit-number-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="80px">
|
||||
<el-form-item label="姓名:" prop="verCode">
|
||||
<el-input v-model="params.verCode" size="small" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="账号:" prop="verName">
|
||||
<el-input v-model="params.verName" size="small" placeholder="请输入账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="url">
|
||||
<el-input v-model="params.url" size="small" placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱:" prop="description">
|
||||
<el-input v-model="params.description" size="small" placeholder="请输入邮箱账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色:" prop="js">
|
||||
<el-input v-model="params.js" size="small" placeholder="请输入角色名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:">
|
||||
<el-switch v-model="params.status">
|
||||
</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" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
// flag: false,
|
||||
// type: '',
|
||||
id: '',
|
||||
// 新增、编辑表单数据
|
||||
params: {
|
||||
verCode: '',
|
||||
verName: '',
|
||||
url: '',
|
||||
description: '',
|
||||
js: '',
|
||||
status: false
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
verCode: [
|
||||
{ required: true, message: '请输入版本号', trigger: 'blur' },
|
||||
],
|
||||
verName: [
|
||||
{ required: true, message: '请输入版名字', trigger: 'blur' },
|
||||
],
|
||||
url: [
|
||||
{ required: true, message: '请输入下载地址', trigger: 'blur' },
|
||||
],
|
||||
description: [
|
||||
{ required: true, message: '请输入更新说明', trigger: 'blur' },
|
||||
],
|
||||
js: [
|
||||
{ required: true, message: '请输入角色名', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.type === 'add') {
|
||||
this.addTags()
|
||||
} else {
|
||||
this.editTag()
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
verCode: '',
|
||||
verName: '',
|
||||
url: '',
|
||||
description: '',
|
||||
forcedUpdate: false,
|
||||
status: false
|
||||
}
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
this.type = type
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑标签'
|
||||
this.params.verCode = data.dateTime
|
||||
this.params.verName = data.dateTime
|
||||
this.params.url = data.dateTime
|
||||
this.params.forcedUpdate = data.dateTime
|
||||
this.params.description = data.dateTime
|
||||
this.params.js = data.dateTime
|
||||
this.params.status = data.dateTime
|
||||
this.id = data.dateTime
|
||||
} else {
|
||||
this.title = '新增标签'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
</style>
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="numberManagement-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input placeholder="ID/姓名/账号/邮箱" size="small" class="param-input"></el-input>
|
||||
<el-input placeholder="用户等级" size="small" class="param-input"></el-input>
|
||||
<el-input placeholder="账号状态" size="small" class="param-input"></el-input>
|
||||
<el-button type="primary" size="small">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="tagsAction('add')">新增</el-button>
|
||||
</div>
|
||||
<!--表格数据-->
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column type="selection" align="center" fixed></el-table-column>
|
||||
<el-table-column prop="dateTime" label="ID" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="姓名" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="账号" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="邮箱" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="密码" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="角色" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="添加时间" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="最后登陆时间" align="center"></el-table-column>
|
||||
<el-table-column prop="dateTime" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operating" label="操作" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="tagsAction('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row.vid)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" background></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<tag-action ref="tagAction"></tag-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TagAction from './components/addTag'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
dateTime:55555
|
||||
},
|
||||
{
|
||||
dateTime:55555
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TagAction
|
||||
},
|
||||
methods: {
|
||||
// 新增、删除tags
|
||||
tagsAction(type, data) {
|
||||
this.$refs.tagAction.open(type, data);
|
||||
},
|
||||
// 删除tags
|
||||
remove() {
|
||||
this.$confirm('您确定要删除当前标签吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="code-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="100px">
|
||||
<el-form-item label="期号:" prop="date">
|
||||
<el-date-picker v-model="params.date" type="date" placeholder="选择日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id:" prop="userId">
|
||||
<el-input v-model.number="params.userId" size="small" placeholder="用户"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称:" prop="userName">
|
||||
<el-input v-model="params.userName" type="userName" placeholder="用户昵称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户头像:" prop="userLogo">
|
||||
<el-input v-model="params.userLogo" type="userLogo" placeholder="用户头像"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买份数:" prop="quantity">
|
||||
<el-input v-model.number="params.quantity" placeholder="购买份数"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="中奖号码:" prop="winNum">
|
||||
<el-input v-model.number="params.winNum" placeholder="中奖号码"></el-input>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="模特id:" prop="modelId">
|
||||
<el-input v-model.number="params.modelId" placeholder="模特id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间:" prop="createdAt">
|
||||
<el-date-picker v-model="params.createdAt" type="datetime" placeholder="选择日期时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间:" prop="updatedAt">
|
||||
<el-date-picker v-model="params.updatedAt" type="datetime" placeholder="选择日期时间"></el-date-picker>
|
||||
</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 moment from "moment";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
id: "",
|
||||
type: "",
|
||||
params: {
|
||||
date: "",
|
||||
userId: "",
|
||||
userName: "",
|
||||
userLogo: "",
|
||||
quantity: "",
|
||||
modelId: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
},
|
||||
|
||||
rules: {
|
||||
// date: [
|
||||
// { required: true, message: '日期', trigger: 'blur' }
|
||||
// ],
|
||||
// userId: [
|
||||
// { required: true, message: '用户id', trigger: 'blur' }
|
||||
// ],
|
||||
// userName: [
|
||||
// { required: true, message: '用户昵称', trigger: 'blur' }
|
||||
// ],
|
||||
// userLogo: [
|
||||
// { required: true, message: '用户头像', trigger: 'blur' }
|
||||
// ],
|
||||
// winNum: [
|
||||
// { required: true, message: '请选择生效时间', trigger: 'blur' }
|
||||
// ],
|
||||
// invalidAt: [
|
||||
// { required: true, message: '请失效时间', trigger: 'blur' }
|
||||
// ],
|
||||
// // batchNum: [
|
||||
// // { required: true, message: '请输入批次号', trigger: 'blur' }
|
||||
// // ],
|
||||
// channel: [
|
||||
// { required: true, message: '请选择渠道', trigger: 'change' }
|
||||
// ],
|
||||
// count: [
|
||||
// { required: true, message: '请输入兑换码生成数量', trigger: 'blur' }
|
||||
// ]
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addWinRecord();
|
||||
} else if (this.type === "edit") {
|
||||
this.editWinRecord();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增兑换码
|
||||
addWinRecord() {
|
||||
let newTime = moment(this).format().slice(0, 19) + "+08:00";
|
||||
let params = Object.assign({}, this.params, { date: newTime });
|
||||
API.addWinRecord(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 修改兑换码
|
||||
editWinRecord() {
|
||||
let newTime = moment(this).format().slice(0, 19) + "+08:00";
|
||||
|
||||
let params = Object.assign({}, this.params, {
|
||||
id: this.id,
|
||||
date: newTime,
|
||||
});
|
||||
|
||||
API.addWinRecord(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
date: "",
|
||||
userId: "",
|
||||
userName: "",
|
||||
userLogo: "",
|
||||
quantity: "",
|
||||
modelId: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "add") {
|
||||
this.type = "add";
|
||||
this.title = "添加购买列表";
|
||||
} else {
|
||||
this.type = "edit";
|
||||
this.title = "修改购买列表";
|
||||
this.id = data.id;
|
||||
this.params = {
|
||||
date: data.date,
|
||||
userId: data.userId,
|
||||
userName: data.userName,
|
||||
userLogo: data.userLogo,
|
||||
quantity: data.quantity,
|
||||
modelId: data.modelId,
|
||||
createdAt: data.createdAt,
|
||||
updatedAt: data.updatedAt,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
agent-action-box {
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
id="activity"
|
||||
title="活动参与人数"
|
||||
:visible.sync="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="500px"
|
||||
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="活动参与人数" prop="num">
|
||||
<el-input v-model.number="ruleForm.num" />
|
||||
</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: {
|
||||
num: ""
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const param = {
|
||||
num: this.ruleForm.num
|
||||
};
|
||||
API.updateJoinNum(param).then(() => {
|
||||
this.dialogFormVisible = false;
|
||||
this.$emit("handlerCodeList");
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
this.dialogFormVisible = false;
|
||||
this.$emit("handlerCodeList");
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(joinPersons) {
|
||||
this.dialogFormVisible = true;
|
||||
this.ruleForm.num = joinPersons;
|
||||
this.title = "修改参与人数";
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="tender-activity-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户Id"
|
||||
v-model.number="params.userId"
|
||||
clearable
|
||||
size="small"
|
||||
@change="buyPage()"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入用户昵称"
|
||||
v-model="params.userName"
|
||||
clearable
|
||||
size="small"
|
||||
@change="buyPage('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入模特id"
|
||||
v-model.number="params.modelId"
|
||||
clearable
|
||||
size="small"
|
||||
@change="buyPage('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="buyPage('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="Action('add')">+新增</el-button>
|
||||
<div>
|
||||
<span>活动参与人数：</span>
|
||||
<el-input v-model="this.joinPersons" disabled size="small" class="param-input"></el-input>
|
||||
<el-button type="primary" size="small" @click="join(joinPersons)">编辑参与人数</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="userId"
|
||||
label="用户id"
|
||||
align="center"
|
||||
min-width="120"
|
||||
fixed
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userId || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="userLogo" label="图片" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<img-load :src="imgUrl + scope.row.userLogo" :width="'90px'" :height="'120px'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
min-width="160"
|
||||
label="用户昵称"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userName ||'未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="modelId" label="模特id" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.modelId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" label="期号" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.date }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="购买份数" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="serials" label="购买号码" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.serials }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="soldOut" label="是否买断" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.soldOut | soldOutType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operating" label="操作" align="center" fixed="right" width="150">
|
||||
<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="[5,10,15,20]"
|
||||
:current-page="params.page"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<join-num ref="joinNum" @handlerCodeList="handlerCodeList"></join-num>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<code-action ref="codeAction" @handlerCodeList="handlerCodeList"></code-action>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import { changeTime } from "@/utils/global";
|
||||
import JoinNum from "./components/joinNum";
|
||||
import CodeAction from './components/codeAction'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
joinPersons: "",
|
||||
loading: false,
|
||||
total: "",
|
||||
time: "",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
params: {
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.buyPage();
|
||||
},
|
||||
components: {
|
||||
JoinNum,
|
||||
CodeAction,
|
||||
},
|
||||
methods: {
|
||||
// 请求获奖记录列表
|
||||
buyPage(type) {
|
||||
if (type === "status") {
|
||||
this.params.page = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.buyPage(this.params)
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data.data) {
|
||||
this.tableData = res.data.data;
|
||||
this.total = res.data.total;
|
||||
this.joinPersons = res.data.joinPersons;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.page = 1;
|
||||
this.buyPage();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(page) {
|
||||
this.params.page = page;
|
||||
this.buyPage();
|
||||
},
|
||||
// 时间触发回调
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.start = changeTime(time[0]) || "";
|
||||
this.params.end = changeTime(time[1]) || "";
|
||||
} else {
|
||||
this.params.start = "";
|
||||
this.params.end = "";
|
||||
}
|
||||
this.buyPage("status");
|
||||
},
|
||||
|
||||
// 编辑活动成功回掉
|
||||
handlerCodeList() {
|
||||
this.buyPage();
|
||||
},
|
||||
// 新增、 修改tags
|
||||
Action(type, data) {
|
||||
this.$refs.codeAction.open(type, data);
|
||||
},
|
||||
// 编辑参与人数
|
||||
join(joinPersons) {
|
||||
this.$refs.joinNum.open(joinPersons);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="add-content-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="130px">
|
||||
<el-form-item label="达成条件:" prop="finishCondition">
|
||||
<el-input
|
||||
v-model="params.finishCondition"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入达成条件(连续签到多少天)"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="任务类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in taskTypes"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="奖品列表:" prop="prizes">
|
||||
<el-select
|
||||
v-model="params.prizes"
|
||||
size="small"
|
||||
placeholder="请选择奖品列表"
|
||||
style="width:300px"
|
||||
multiple
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prizeBox"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="额外奖励列表:" prop="extraPrizes">
|
||||
<el-select
|
||||
v-model="params.extraPrizes"
|
||||
size="small"
|
||||
placeholder="请选择额外奖励列表"
|
||||
style="width:300px"
|
||||
multiple
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prizeBox"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务标题:" prop="title">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入任务标题"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述:" prop="desc">
|
||||
<el-input
|
||||
v-model="params.desc"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入任务描述"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图标:" prop="img">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.img"
|
||||
:action="action"
|
||||
:wSize="180"
|
||||
:hSize="120"
|
||||
:width="'180px'"
|
||||
:height="'120px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
>
|
||||
</base-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
props: {
|
||||
prizeBox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
dialogVisible: false,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
finishCondition: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入达成条件(连续签到多少天)",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
// type: [
|
||||
// { required: true, message: "请选择配置类型", trigger: "change" },
|
||||
// ],
|
||||
prizes: [
|
||||
{ required: true, message: "请选择奖品列表", trigger: "change" },
|
||||
],
|
||||
},
|
||||
award: undefined,
|
||||
params: {
|
||||
finishCondition: "",
|
||||
// type: "",
|
||||
title: undefined,
|
||||
desc: undefined,
|
||||
prizes: [],
|
||||
extraPrizes: [],
|
||||
status: false,
|
||||
img: "",
|
||||
},
|
||||
taskTypes: [
|
||||
// 任务类型
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 1,
|
||||
},
|
||||
// {
|
||||
// label: "首次充值金币",
|
||||
// value: 2,
|
||||
// },
|
||||
// {
|
||||
// label: "金币月卡",
|
||||
// value: 3,
|
||||
// },
|
||||
// {
|
||||
// label: "每日评论",
|
||||
// value: 4,
|
||||
// },
|
||||
// {
|
||||
// label: "充值金币月卡",
|
||||
// value: 5,
|
||||
// },
|
||||
// {
|
||||
// label: "每日登陆",
|
||||
// value: 6,
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增配置") {
|
||||
this.addContent();
|
||||
return;
|
||||
}
|
||||
if (this.title === "编辑配置") {
|
||||
this.editContent();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增内容
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
API.addSigninConfig(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 修改内容
|
||||
editContent() {
|
||||
if (this.award !== undefined && this.award > 0) {
|
||||
this.params.award = [this.award];
|
||||
}
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
API.editSigninConfig(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "修改失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
finishCondition: "",
|
||||
// type: "",
|
||||
prizes: [],
|
||||
extraPrizes: [],
|
||||
desc: undefined,
|
||||
title: undefined,
|
||||
status: false,
|
||||
img: "",
|
||||
};
|
||||
this.award = undefined;
|
||||
this.$refs.imgsUpload && this.$refs.imgsUpload.clearImg();
|
||||
},
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.params = Object.assign({}, data);
|
||||
this.title = "编辑配置";
|
||||
} else {
|
||||
this.title = "新增配置";
|
||||
}
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.img = res.data.coverImg;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog :title="'图集详情'" :visible.sync="dialogVisible" :width="width" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<div class="picturePopup" :style="{overflow: over}">
|
||||
<div v-for="(item,i) in pictureList" :key="i" class="pictureInside">
|
||||
<base-upload :cover="item.src" :action="action" @successCallback="item.successCallback" :wSize="360" :hSize="480" :width="'180px'" :height="'180px'" :hide="true"></base-upload>
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="small" class="deleteButton" @click="deletePicture(i)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="handleClose" size="small">取 消</el-button> -->
|
||||
<el-button type="primary" size="small" @click="addPicture">新增</el-button>
|
||||
<el-button type="primary" size="small" @click="submitDate()" :loading="flag">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from '@/utils/serverUrlConfig'
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + '/vid/uploadStatic',
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pictureList: [],
|
||||
picturePopupLength: ['240px','430px','620px'],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if(this.pictureList.length <4 && this.pictureList.length > 0) {
|
||||
return this.picturePopupLength[this.pictureList.length-1]
|
||||
} else if(this.pictureList.length < 10){
|
||||
return '620px'
|
||||
} else {
|
||||
return '640px'
|
||||
}
|
||||
},
|
||||
over() {
|
||||
return this.pictureList.length < 10 ? 'hidden' : 'auto'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.params.cover = res.data.coverImg
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if(this.pictureList.length === 1) {
|
||||
this.$message.error('请至少保留一张！')
|
||||
return
|
||||
}
|
||||
this.pictureList.splice(i,1)
|
||||
},
|
||||
// 新增图片
|
||||
addPicture() {
|
||||
let obj = {
|
||||
src: '',
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg
|
||||
}
|
||||
}
|
||||
this.pictureList.push(obj)
|
||||
},
|
||||
// 提交表单
|
||||
submitDate() {
|
||||
let arr = [];
|
||||
this.pictureList.forEach(item => {
|
||||
arr.push(item.src)
|
||||
})
|
||||
this.editVideoInfo({seriesCover:arr, id: this.id})
|
||||
},
|
||||
// 提交图集
|
||||
editVideoInfo(params) {
|
||||
API.editVideoInfo(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit("handlerPreviewList")
|
||||
} else {
|
||||
this.$message.error('操作失败！');
|
||||
}
|
||||
this.handleClose()
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose()
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr, id) {
|
||||
this.dialogVisible = true
|
||||
this.id = id
|
||||
let arr = [];
|
||||
for(var i = 0; i< pictureArr.length; i++) {
|
||||
let obj = {
|
||||
src: pictureArr[i],
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg
|
||||
}
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
this.pictureList = arr
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.pictureList = []
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
border: solid 5px black;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<div class="chat-library-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<!-- <el-select
|
||||
v-model="param.type"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in taskTypes"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select> -->
|
||||
<el-select
|
||||
v-model="param.status"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="success" size="small" @click="searchBtn()"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="addContent('add')"
|
||||
>+新增配置</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="任务ID"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="finishCondition"
|
||||
label="达成条件(天)"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></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">购买金币</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="prizes"
|
||||
label="奖品列表"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:formatter="formatterPrize"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="extraPrizes"
|
||||
label="额外奖励列表"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:formatter="formatterExtraPrize"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="任务标题"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="img" label="图标" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.img"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="任务描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.desc || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="count" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="请在编辑中修改"
|
||||
placement="top-start"
|
||||
>
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addContent('edit', scope.row)"
|
||||
round
|
||||
plain
|
||||
type="warning"
|
||||
>编辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<add-content
|
||||
ref="addContent"
|
||||
@handlerContent="getContentList('status')"
|
||||
:prizeBox="prizeBox"
|
||||
></add-content>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
<!-- 榜单 -->
|
||||
<el-dialog
|
||||
title="视频榜单"
|
||||
:visible.sync="dialogVisible"
|
||||
width="600"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableVidRanks"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
prop="vid"
|
||||
label="视频ID"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.vid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="purchased"
|
||||
label="售卖次数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.purchased }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bonus"
|
||||
label="奖励金额"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.bonus }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ranking"
|
||||
label="排名"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ranking }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="handleClose"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import addContent from "./components/addContent";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import PreviewPicture from "./components/previewPicture";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
// type: "",
|
||||
status: "",
|
||||
},
|
||||
prizeBox: [],
|
||||
dialogVisible: false,
|
||||
tableVidRanks: [],
|
||||
taskTypes: [
|
||||
// 任务类型
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 1,
|
||||
},
|
||||
// {
|
||||
// label: "首次充值金币",
|
||||
// value: 2,
|
||||
// },
|
||||
// {
|
||||
// label: "金币月卡",
|
||||
// value: 3,
|
||||
// },
|
||||
// {
|
||||
// label: "每日评论",
|
||||
// value: 4,
|
||||
// },
|
||||
// {
|
||||
// label: "充值金币月卡",
|
||||
// value: 5,
|
||||
// },
|
||||
// {
|
||||
// label: "每日登陆",
|
||||
// value: 6,
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
addContent,
|
||||
PreviewPicture,
|
||||
},
|
||||
created() {
|
||||
this.getContentList();
|
||||
this.queryPrizeBox();
|
||||
},
|
||||
methods: {
|
||||
getParams() {
|
||||
let req = {
|
||||
pageNumber: this.param.pageNumber,
|
||||
pageSize: this.param.pageSize,
|
||||
};
|
||||
// req.type = this.param.type ? this.param.type : undefined;
|
||||
req.status = this.param.status != null ? this.param.status : undefined;
|
||||
return req;
|
||||
},
|
||||
queryPrizeBox() {
|
||||
API.queryPrizeBox()
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.prizeBox = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || "获取奖品失败");
|
||||
this.prizeBox = [];
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getContentList() {
|
||||
this.loading = true;
|
||||
let req = this.getParams();
|
||||
API.querySigninConfig(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list || [];
|
||||
this.total = res.data.count || 0;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterPrize(row) {
|
||||
var htmlStr = "";
|
||||
if (this.prizeBox.length === 0 || row.prizes === 0 || !row.prizes) {
|
||||
return "获取奖品列表失败";
|
||||
}
|
||||
this.prizeBox.forEach((data) => {
|
||||
row.prizes.forEach((value) => {
|
||||
if (data.value == value) {
|
||||
htmlStr += "、" + data.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
htmlStr = htmlStr.substr(1, htmlStr.length);
|
||||
return htmlStr;
|
||||
},
|
||||
formatterExtraPrize(row) {
|
||||
var htmlStr = "";
|
||||
if (
|
||||
this.prizeBox.length === 0 ||
|
||||
row.extraPrizes === 0 ||
|
||||
!row.extraPrizes
|
||||
) {
|
||||
return "-";
|
||||
}
|
||||
this.prizeBox.forEach((data) => {
|
||||
row.extraPrizes.forEach((value) => {
|
||||
if (data.value == value) {
|
||||
htmlStr += "、" + data.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
htmlStr = htmlStr.substr(1, htmlStr.length);
|
||||
return htmlStr;
|
||||
},
|
||||
searchBtn() {
|
||||
this.getContentList();
|
||||
},
|
||||
// 图集预览
|
||||
previewPicture(pictureArr, id) {
|
||||
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
||||
this.$refs.previewPicture.open(Arr, id);
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getContentList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getContentList();
|
||||
},
|
||||
// 打开编辑、添加弹窗
|
||||
addContent(type, data) {
|
||||
this.$refs.addContent.open(type, data);
|
||||
},
|
||||
openRank(vidRanks) {
|
||||
this.tableVidRanks = vidRanks;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.tableVidRanks = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<div class="add-content-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" label-width="130px">
|
||||
<el-form-item label="任务标题:" prop="title">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入任务标题"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述:" prop="desc">
|
||||
<el-input
|
||||
v-model="params.desc"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入任务描述"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务图片:" prop="bgImg">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.img"
|
||||
:wSize="180"
|
||||
:hSize="90"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置任务详情:" prop="desc">
|
||||
<el-button size="small" type="primary" @click="btnConfigDialog = true"
|
||||
>点击配置任务</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in types"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序:" prop="sortNum">
|
||||
<el-input
|
||||
v-model.number="params.sortNum"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入排序"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转方式:" prop="hrefType">
|
||||
<el-select
|
||||
v-model.number="link_type"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
style="width:300px"
|
||||
>
|
||||
<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">
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model.number="params.link"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址:" prop="link" v-if="link_type == 2">
|
||||
<el-select
|
||||
v-model.number="params.link"
|
||||
size="small"
|
||||
placeholder="链接地址"
|
||||
filterable
|
||||
style="width:300px"
|
||||
>
|
||||
<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="videoId"
|
||||
v-if="link_type == 2 && params.link.indexOf('?id=') > -1"
|
||||
>
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model="videoId"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用:" prop="status">
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
placeholder="请选择是否启用"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
: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"
|
||||
size="small"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="任务详情"
|
||||
:visible.sync="btnConfigDialog"
|
||||
width="800px"
|
||||
@before-close="btnConfigDialog = false"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in details"
|
||||
:key="index"
|
||||
style="position:relative;margin-bottom: 20px;"
|
||||
>
|
||||
<div v-if="details.length !== 0">
|
||||
<span style="margin:10px 2px 10px 10px">奖品列表</span>
|
||||
<el-select
|
||||
v-model="details[index].prizes"
|
||||
size="small"
|
||||
placeholder="请选择任务奖励"
|
||||
style="width:300px"
|
||||
multiple
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prizeBox"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span style="margin:10px 2px 10px 10px">达成条件</span>
|
||||
<el-input
|
||||
v-model.number="details[index].finishCondition"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入达成条件(连续签到多少天/活跃值)"
|
||||
style="width:250px"
|
||||
></el-input>
|
||||
<i
|
||||
class="el-icon-circle-plus"
|
||||
v-if="index === details.length - 1"
|
||||
style="color:#67c23a;font-size:24px;cursor:pointer;position:absolute;right:20px;top:15px"
|
||||
@click="addBtn"
|
||||
></i>
|
||||
<i
|
||||
class="el-icon-remove"
|
||||
v-if="details.length > 1"
|
||||
style="color:#f56c6c;font-size:24px;cursor:pointer;position:absolute;right:-5px;top:15px"
|
||||
@click="removeBtn(index)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="btnConfigDialog = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { internalLinks } from "@/utils/common.js";
|
||||
export default {
|
||||
props: {
|
||||
prizeBox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
dialogVisible: false,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "每日广告点击",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "每日邀请",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "每日登录",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "每日评论",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "每日发布",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "评论被设置成神评",
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: "每日收藏",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
label: "每日解锁",
|
||||
value: 7,
|
||||
},
|
||||
],
|
||||
prices: [],
|
||||
params: {
|
||||
type: "",
|
||||
title: undefined,
|
||||
desc: undefined,
|
||||
status: false,
|
||||
img: "",
|
||||
link: "",
|
||||
detail: undefined,
|
||||
sortNum: 0,
|
||||
},
|
||||
linkTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 1 },
|
||||
{ label: "内部浏览器跳转", value: 2 },
|
||||
],
|
||||
link_type: 1,
|
||||
linkList: internalLinks,
|
||||
videoId: "",
|
||||
btnConfigDialog: false,
|
||||
details: [
|
||||
{
|
||||
prizes: [],
|
||||
finishCondition: undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增配置") {
|
||||
this.addContent();
|
||||
return;
|
||||
}
|
||||
if (this.title === "编辑配置") {
|
||||
this.editContent();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 增加数量
|
||||
addBtn() {
|
||||
this.details.push({
|
||||
prizes: [],
|
||||
finishCondition: undefined,
|
||||
});
|
||||
},
|
||||
// 减少数量
|
||||
removeBtn(indexOf) {
|
||||
this.details = this.details.filter((item, index) => {
|
||||
if (indexOf != index) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增内容
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (this.details.length > 0 && this.details[0].prizes.length != 0) {
|
||||
params.detail = this.details;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1 && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1) {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.addDailyActivity(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 修改内容
|
||||
editContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (this.details.length > 0 && this.details[0].prizes.length != 0) {
|
||||
params.detail = this.details;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1 && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1) {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.editDailyActive(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "修改失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.img = res.data.coverImg;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.flag = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
type: "",
|
||||
desc: undefined,
|
||||
title: undefined,
|
||||
status: false,
|
||||
img: "",
|
||||
link: "",
|
||||
detail: [],
|
||||
sortNum: 0,
|
||||
};
|
||||
this.link_type = 1;
|
||||
this.videoId = ''
|
||||
this.details = [
|
||||
{
|
||||
prizes: [],
|
||||
finishCondition: undefined,
|
||||
},
|
||||
];
|
||||
},
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.params = Object.assign({}, data);
|
||||
if (this.params.detail) {
|
||||
this.details = this.params.detail;
|
||||
}
|
||||
this.link_type = 1;
|
||||
if (
|
||||
this.params.link.indexOf("yinseinner:") > -1
|
||||
) {
|
||||
this.link_type = 2;
|
||||
}
|
||||
if (this.params.link.indexOf("yinseinner:") > -1 && this.params.link.indexOf("?id=") > -1) {
|
||||
const splitArr = this.params.link.split("=");
|
||||
this.params.link = splitArr[0] + "=";
|
||||
this.videoId = splitArr[1];
|
||||
} else {
|
||||
this.params.link = this.params.link;
|
||||
}
|
||||
this.title = "编辑配置";
|
||||
} else {
|
||||
this.title = "新增配置";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<div class="chat-library-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="param.prizeType"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in type"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="param.status"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="success" size="small" @click="searchBtn()"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="addContent('add')"
|
||||
>+新增任务</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="finishCondition"
|
||||
label="达成条件(天/活跃值)"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="任务类型"
|
||||
align="center"
|
||||
:formatter="formatterType"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cover" label="图片" align="center" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.img"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="prizes"
|
||||
label="奖品列表"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:formatter="formatterPrize"
|
||||
>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="任务标题"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="任务描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.desc || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sortNum"
|
||||
label="排序"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sortNum || 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="link"
|
||||
label="任务链接"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.link || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="count" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="请在编辑中修改"
|
||||
placement="top-start"
|
||||
>
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="120"
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addContent('edit', scope.row)"
|
||||
round
|
||||
plain
|
||||
type="warning"
|
||||
>编辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<add-content
|
||||
ref="addContent"
|
||||
@handlerContent="getContentList('status')"
|
||||
:prizeBox="prizeBox"
|
||||
></add-content>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import addContent from "./components/addContent";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
label: "每日广告点击",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "每日邀请",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "每日登录",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "每日评论",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "每日发布",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "评论被设置成神评",
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: "每日收藏",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
label: "每日解锁",
|
||||
value: 7,
|
||||
},
|
||||
],
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
prizeType: "",
|
||||
status: "",
|
||||
},
|
||||
prizeBox: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
addContent,
|
||||
},
|
||||
created() {
|
||||
this.getContentList();
|
||||
this.queryPrizeBox();
|
||||
},
|
||||
methods: {
|
||||
getParams() {
|
||||
let req = {
|
||||
pageNumber: this.param.pageNumber,
|
||||
pageSize: this.param.pageSize,
|
||||
};
|
||||
req.type = this.param.prizeType ? this.param.prizeType : undefined;
|
||||
req.status = this.param.status != null ? this.param.status : undefined;
|
||||
return req;
|
||||
},
|
||||
queryPrizeBox() {
|
||||
API.queryPrizeBox()
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.prizeBox = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || "获取奖品失败");
|
||||
this.prizeBox = [];
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getContentList() {
|
||||
this.loading = true;
|
||||
let req = this.getParams();
|
||||
API.getDailyActivity(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterType(row) {
|
||||
return this.type.filter((item) => item.value == row.type).length > 0
|
||||
? this.type.filter((item) => item.value == row.type)[0].label
|
||||
: "未知类型";
|
||||
},
|
||||
formatterPrize(row) {
|
||||
var htmlStr = "";
|
||||
if (this.prizeBox.length === 0 || row.prizes === 0) {
|
||||
return "获取奖品列表失败";
|
||||
}
|
||||
this.prizeBox.forEach((data) => {
|
||||
row.prizes.forEach((value) => {
|
||||
if (data.value == value) {
|
||||
htmlStr += "、" + data.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
htmlStr = htmlStr.substr(1, htmlStr.length);
|
||||
return htmlStr;
|
||||
},
|
||||
searchBtn() {
|
||||
this.getContentList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getContentList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getContentList();
|
||||
},
|
||||
// 打开编辑、添加弹窗
|
||||
addContent(type, data) {
|
||||
this.$refs.addContent.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="goldenegg-log-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="params.activityId"
|
||||
size="small"
|
||||
placeholder="请选择活动"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in actIDs"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.vipCardId"
|
||||
size="small"
|
||||
placeholder="请选择会员卡"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in vipCardIds"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-input
|
||||
placeholder="活动ID"
|
||||
v-model.number="params.activityId"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="getWinRecord()"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="用户ID"
|
||||
v-model.number="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="getWinRecord()"
|
||||
class="param-input"
|
||||
></el-input> -->
|
||||
<el-button type="primary" size="small" @click="getWinRecord('status')"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
height="600"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<!-- <el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="uid"
|
||||
label="用户ID"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="activityId"
|
||||
min-width="160"
|
||||
label="活动"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterAct(scope.row.activityId) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="奖品名称"
|
||||
align="center"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="奖品类型"
|
||||
align="center"
|
||||
min-width="110"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type | prizeTypes }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="level"
|
||||
label="奖品等级"
|
||||
align="center"
|
||||
min-width="150"
|
||||
:formatter="levelFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="count"
|
||||
label="奖品数量"
|
||||
align="center"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
label="奖品价值"
|
||||
align="center"
|
||||
min-width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
label="折扣率/活跃值"
|
||||
align="center"
|
||||
min-width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="drawPrice"
|
||||
label="单次抽奖价格(金币)"
|
||||
align="center"
|
||||
min-width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="vipCardId"
|
||||
min-width="160"
|
||||
label="会员卡"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterVip(scope.row.vipCardId) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime | changeDate }}</span>
|
||||
</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"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: "",
|
||||
params: {
|
||||
uid: "",
|
||||
activityId: "",
|
||||
// prizeName: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
vipCardIds: [],
|
||||
actIDs: [],
|
||||
prizeNameList: [],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
prizeTypes(val) {
|
||||
const ruleObj = {
|
||||
1: "活跃值",
|
||||
2: "金币",
|
||||
3: "棋牌金币",
|
||||
4: "楼凤解锁折扣",
|
||||
5: "会员卡",
|
||||
6: "会员折扣卷",
|
||||
7: "实物",
|
||||
8: "积分",
|
||||
};
|
||||
return ruleObj[val] || "未知";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getWinRecord();
|
||||
this.getActiveityId();
|
||||
// this.getPrizeNames()
|
||||
this.getVipcardId();
|
||||
},
|
||||
methods: {
|
||||
// 请求砸蛋活动日志列表
|
||||
getWinRecord() {
|
||||
this.loading = true;
|
||||
API.getWinRecord(this.params)
|
||||
.then((res) => {
|
||||
// eslint-disable-next-line no-console
|
||||
// console.log(this.tableData, 'res')
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 获取奖品名称
|
||||
async getPrizeNames() {
|
||||
const res = await API.getPrizeNames();
|
||||
try {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.prizeNameList = res.data;
|
||||
} else {
|
||||
this.prizeNameList = [];
|
||||
}
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getWinRecord();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getWinRecord();
|
||||
},
|
||||
// 活动
|
||||
formatterAct(id) {
|
||||
return this.actIDs.filter((item) => item.value == id).length > 0
|
||||
? this.actIDs.filter((item) => item.value == id)[0].label
|
||||
: "未知";
|
||||
},
|
||||
// 会员卡
|
||||
formatterVip(id) {
|
||||
return this.vipCardIds.filter((item) => item.value == id).length > 0
|
||||
? this.vipCardIds.filter((item) => item.value == id)[0].label
|
||||
: "-";
|
||||
},
|
||||
// 奖品等级
|
||||
levelFormatter(row) {
|
||||
let str = "-";
|
||||
switch (row.level) {
|
||||
case 1:
|
||||
str = "初级";
|
||||
break;
|
||||
case 2:
|
||||
str = "中级";
|
||||
break;
|
||||
case 3:
|
||||
str = "高级";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
// 获取活动ID
|
||||
getActiveityId() {
|
||||
API.getActiveityId(this.params).then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.actIDs = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error("获取活动失败");
|
||||
});
|
||||
},
|
||||
// 获取VIP ID
|
||||
getVipcardId() {
|
||||
API.getVipcardId(this.params).then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.vipCardIds = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error("获取会员卡失败");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div class="add-content-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" label-width="130px">
|
||||
<el-form-item label="任务标题:" prop="title">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入任务标题"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述:" prop="desc">
|
||||
<el-input
|
||||
v-model="params.desc"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入任务描述"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务图片:" prop="bgImg">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.img"
|
||||
:wSize="180"
|
||||
:hSize="90"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置任务详情:" prop="desc">
|
||||
<el-button size="small" type="primary" @click="clickConfigTask"
|
||||
>点击配置任务</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in types"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="排序:" prop="sortNum">
|
||||
<el-input
|
||||
v-model.number="params.sortNum"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入排序"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="跳转方式:" prop="hrefType">
|
||||
<el-select
|
||||
v-model.number="link_type"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
style="width:300px"
|
||||
>
|
||||
<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">
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model.number="params.link"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址:" prop="link" v-if="link_type == 2">
|
||||
<el-select
|
||||
v-model.number="params.link"
|
||||
size="small"
|
||||
placeholder="链接地址"
|
||||
filterable
|
||||
style="width:300px"
|
||||
>
|
||||
<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="videoId"
|
||||
v-if="params.link == 'yinseinner://video_page?id=' && link_type == 2"
|
||||
>
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model="videoId"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用:" prop="status">
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
placeholder="请选择是否启用"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
: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"
|
||||
size="small"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<DetailDialog ref="detailDialog" @submitCallback="detailDialogCallback"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import DetailDialog from './detailDialog.vue';
|
||||
export default {
|
||||
props: {
|
||||
prizeBox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DetailDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
dialogVisible: false,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "邀请任务",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "登录任务",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
prices: [],
|
||||
params: {
|
||||
type: "",
|
||||
title: undefined,
|
||||
desc: undefined,
|
||||
status: false,
|
||||
img: "",
|
||||
link: "",
|
||||
detail: undefined,
|
||||
// sortNum: 0,
|
||||
},
|
||||
linkTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 1 },
|
||||
{ label: "内部浏览器跳转", value: 2 },
|
||||
],
|
||||
link_type: 1,
|
||||
linkList: [
|
||||
{ label: "客服", value: "yinseinner://kefu" },
|
||||
{ label: "社区", value: "yinseinner://community_page" },
|
||||
{ label: "推广", value: "yinseinner://universal_agent" },
|
||||
{ label: "会员", value: "yinseinner://vip_page" },
|
||||
{ label: "钱包", value: "yinseinner://wallet_page" },
|
||||
{ label: "发布", value: "yinseinner://publish_page" },
|
||||
{ label: "AI科技", value: "yinseinner://aiCenter" },
|
||||
{ label: "视频详情", value: "yinseinner://video?id=" },
|
||||
{ label: "直播", value: "yinseinner://live" },
|
||||
],
|
||||
videoId: "",
|
||||
details: [
|
||||
{
|
||||
prize: '',
|
||||
finishCondition: undefined,
|
||||
subTitle: ''
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
detailDialogCallback(list) {
|
||||
this.details= list
|
||||
},
|
||||
clickConfigTask() {
|
||||
this.$refs.detailDialog.open({details: this.details, prizeBox: this.prizeBox})
|
||||
},
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增配置") {
|
||||
this.addContent();
|
||||
return;
|
||||
}
|
||||
if (this.title === "编辑配置") {
|
||||
this.editContent();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增内容
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (this.details.length > 0 && this.details[0].prize && this.details[0].prize.length) {
|
||||
params.detail = this.details;
|
||||
}
|
||||
if (params.link == "yinseinner://video_page?id=" && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link == "yinseinner://video_page?id=") {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.addGrowthActivity(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 修改内容
|
||||
editContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (this.details.length > 0 && this.details[0].prize && this.details[0].prize.length) {
|
||||
params.detail = this.details;
|
||||
}
|
||||
if (params.link == "yinseinner://video_page?id=" && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link == "yinseinner://video_page?id=") {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.editGrowthActive(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "修改失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.img = res.data.coverImg;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.flag = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
type: "",
|
||||
desc: undefined,
|
||||
title: undefined,
|
||||
status: false,
|
||||
img: "",
|
||||
link: "",
|
||||
detail: [],
|
||||
// sortNum: 0,
|
||||
};
|
||||
this.details = [
|
||||
{
|
||||
prize: '',
|
||||
finishCondition: undefined,
|
||||
subTitle: ''
|
||||
},
|
||||
];
|
||||
},
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.params = Object.assign({}, data);
|
||||
if (this.params.detail) {
|
||||
this.details = this.params.detail;
|
||||
}
|
||||
if (
|
||||
this.params.link.indexOf("kefu") !== -1 ||
|
||||
this.params.link.indexOf("community_page") !== -1 ||
|
||||
this.params.link.indexOf("universal_agent") !== -1 ||
|
||||
this.params.link.indexOf("vip_page") !== -1 ||
|
||||
this.params.link.indexOf("aiCenter") !== -1 ||
|
||||
this.params.link.indexOf("wallet_page") !== -1 ||
|
||||
this.params.link.indexOf("live") !== -1 ||
|
||||
this.params.link.indexOf("publish_page") !== -1
|
||||
) {
|
||||
this.link_type = 2;
|
||||
}
|
||||
if (this.params.link.indexOf("video_page") !== -1) {
|
||||
this.link_type = 2;
|
||||
const splitArr = this.params.link.split("=");
|
||||
this.params.link = splitArr[0] + "=";
|
||||
this.videoId = splitArr[1];
|
||||
} else {
|
||||
this.params.link = this.params.link;
|
||||
}
|
||||
this.title = "编辑配置";
|
||||
} else {
|
||||
this.title = "新增配置";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="任务详情"
|
||||
:visible.sync="btnConfigDialog"
|
||||
width="800px"
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in details"
|
||||
:key="index"
|
||||
style="position:relative;margin-bottom: 20px;"
|
||||
>
|
||||
<div v-if="details.length !== 0">
|
||||
<template v-if="!disabeld">
|
||||
<span style="margin:10px 2px 10px 10px">子标题</span>
|
||||
<el-input
|
||||
v-model.number="item.subTitle"
|
||||
size="small"
|
||||
placeholder="请输入"
|
||||
style="width:250px"
|
||||
></el-input>
|
||||
<span style="margin:10px 2px 10px 10px">奖品列表</span>
|
||||
<el-select
|
||||
v-model="item.prize"
|
||||
size="small"
|
||||
placeholder="请选择任务奖励"
|
||||
style="width:160px"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prizeBox"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span style="margin:10px 2px 10px 10px">达成条件</span>
|
||||
<el-input
|
||||
v-model.number="item.finishCondition"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入达成条件(连续签到多少天/活跃值)"
|
||||
style="width:100px"
|
||||
></el-input>
|
||||
<i
|
||||
class="el-icon-circle-plus"
|
||||
v-if="index === details.length - 1 && !disabeld"
|
||||
style="color:#67c23a;font-size:24px;cursor:pointer;position:absolute;right:20px;top:15px"
|
||||
@click="addBtn"
|
||||
></i>
|
||||
<i
|
||||
class="el-icon-remove"
|
||||
v-if="details.length > 1 && !disabeld"
|
||||
style="color:#f56c6c;font-size:24px;cursor:pointer;position:absolute;right:-5px;top:15px"
|
||||
@click="removeBtn(index)"
|
||||
></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span style="margin:10px 2px 10px 10px">任务描述</span>
|
||||
<el-input
|
||||
v-model.number="item.subTitle"
|
||||
size="small"
|
||||
disabled
|
||||
style="width:250px"
|
||||
></el-input>
|
||||
<span style="margin:10px 2px 10px 10px">达成条件</span>
|
||||
<el-input
|
||||
v-model.number="item.finishCondition"
|
||||
size="small"
|
||||
disabled
|
||||
style="width:250px"
|
||||
></el-input>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer" v-if="!disabeld">
|
||||
<el-button size="small" type="primary" @click="submit"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnConfigDialog: false,
|
||||
details: [],
|
||||
prizeBox: [],
|
||||
disabeld: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.btnConfigDialog = false;
|
||||
this.$emit('submitCallback', this.details)
|
||||
},
|
||||
open(data) {
|
||||
this.btnConfigDialog = true;
|
||||
this.disabeld = data.disabeld || false;
|
||||
this.details = data.details;
|
||||
this.prizeBox = data.prizeBox;
|
||||
},
|
||||
// 减少数量
|
||||
removeBtn(indexOf) {
|
||||
this.details = this.details.filter((item, index) => {
|
||||
if (indexOf != index) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeClose() {
|
||||
this.btnConfigDialog = false;
|
||||
},
|
||||
// 增加数量
|
||||
addBtn() {
|
||||
this.details.push({
|
||||
prize: '',
|
||||
finishCondition: undefined,
|
||||
subTitle: ''
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div class="chat-library-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="param.prizeType"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in type"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="param.status"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="success" size="small" @click="searchBtn()"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="addContent('add')"
|
||||
>+新增任务</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="finishCondition"
|
||||
label="达成条件(天/活跃值)"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column> -->
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="任务类型"
|
||||
align="center"
|
||||
:formatter="formatterType"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cover" label="图片" align="center" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.img"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="prizes"
|
||||
label="奖品列表"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:formatter="formatterPrize"
|
||||
>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="任务标题"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="任务描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.desc || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="sortNum"
|
||||
label="排序"
|
||||
align="center"
|
||||
min-width="50"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sortNum || 0 }}
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="link"
|
||||
label="任务链接"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.link || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="请在编辑中修改"
|
||||
placement="top-start"
|
||||
>
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="detail"
|
||||
label="任务详情"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
@click="showDetail(scope.row.detail)"
|
||||
>任务详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="120"
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addContent('edit', scope.row)"
|
||||
round
|
||||
plain
|
||||
type="warning"
|
||||
>编辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<add-content
|
||||
ref="addContent"
|
||||
@handlerContent="getContentList('status')"
|
||||
:prizeBox="prizeBox"
|
||||
></add-content>
|
||||
<DetailDialog ref="detailDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import addContent from "./components/addContent";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import DetailDialog from "./components/detailDialog.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "邀请任务",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "登录任务",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
prizeType: "",
|
||||
status: "",
|
||||
},
|
||||
prizeBox: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
addContent,
|
||||
DetailDialog,
|
||||
},
|
||||
created() {
|
||||
this.getContentList();
|
||||
this.queryPrizeBox();
|
||||
},
|
||||
methods: {
|
||||
showDetail(detail) {
|
||||
this.$refs.detailDialogRef.open({
|
||||
details: detail,
|
||||
prizeBox: this.prizeBox,
|
||||
disabeld: true,
|
||||
});
|
||||
},
|
||||
getParams() {
|
||||
let req = {
|
||||
pageNumber: this.param.pageNumber,
|
||||
pageSize: this.param.pageSize,
|
||||
};
|
||||
req.type = this.param.prizeType ? this.param.prizeType : undefined;
|
||||
req.status = this.param.status != null ? this.param.status : undefined;
|
||||
return req;
|
||||
},
|
||||
queryPrizeBox() {
|
||||
API.queryPrizeBox()
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.prizeBox = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || "获取奖品失败");
|
||||
this.prizeBox = [];
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getContentList() {
|
||||
this.loading = true;
|
||||
let req = this.getParams();
|
||||
API.getGrowthList(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterType(row) {
|
||||
return this.type.filter((item) => item.value == row.type).length > 0
|
||||
? this.type.filter((item) => item.value == row.type)[0].label
|
||||
: "未知类型";
|
||||
},
|
||||
formatterPrize(row) {
|
||||
var htmlStr = "";
|
||||
if (this.prizeBox.length === 0 || row.prizes === 0) {
|
||||
return "获取奖品列表失败";
|
||||
}
|
||||
this.prizeBox.forEach((data) => {
|
||||
row.prizes.forEach((value) => {
|
||||
if (data.value == value) {
|
||||
htmlStr += "、" + data.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
htmlStr = htmlStr.substr(1, htmlStr.length);
|
||||
return htmlStr;
|
||||
},
|
||||
searchBtn() {
|
||||
this.getContentList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getContentList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getContentList();
|
||||
},
|
||||
// 打开编辑、添加弹窗
|
||||
addContent(type, data) {
|
||||
this.$refs.addContent.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="add-content-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="130px">
|
||||
<el-form-item label="奖品名称:" prop="name">
|
||||
<el-input v-model="params.name" size="small" placeholder="请输入奖品名称" style="width:200px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:" prop="type">
|
||||
<el-select v-model="params.type" size="small" placeholder="请选择任务类型" style="width:200px">
|
||||
<el-option v-for="item in type" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品价值:" prop="value">
|
||||
<el-input v-model="params.value" size="small" type="number" placeholder="请输入奖品价值" style="width:200px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品数量:" prop="count">
|
||||
<el-input v-model="params.count" size="small" type="number" placeholder="请输入奖品数量" style="width:200px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品有效期(天):" prop="validityTime">
|
||||
<el-input v-model="params.validityTime" size="small" type="number" placeholder="请输入奖品有效期(天)" style="width:200px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品描述:" prop="desc">
|
||||
<el-input v-model="params.desc" size="small" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入奖品描述" style="width:200px"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
<el-select v-model="params.status" size="small" placeholder="请选择状态" style="width:200px">
|
||||
<el-option v-for="item in statusType" :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" size="small" @click="submitForm('form')" :loading="flag">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
dialogVisible: false,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
label: "活跃值",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "金币",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "棋牌金币",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "楼风解锁折扣券",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "会员体验卡",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: "会员折扣券",
|
||||
value: 6,
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入奖品名称", trigger: "blur" }],
|
||||
type: [
|
||||
{ required: true, message: "请选择任务类型", trigger: "change" },
|
||||
],
|
||||
value: [{ required: true, message: "请输入奖品价值", trigger: "blur" }],
|
||||
count: [{ required: true, message: "请输入奖品数量", trigger: "blur" }],
|
||||
status: [
|
||||
{ required: true, message: "请选择奖品状态", trigger: "change" },
|
||||
],
|
||||
validityTime: [
|
||||
{ required: true, message: "请选择奖品有效期", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
params: {
|
||||
name: "",
|
||||
type: "",
|
||||
value: "",
|
||||
count: "",
|
||||
validityTime: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增内容") {
|
||||
this.addContent();
|
||||
return;
|
||||
}
|
||||
if (this.title === "编辑内容") {
|
||||
this.editContent();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增内容
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
validityTime: Number(this.params.validityTime),
|
||||
count: Number(this.params.count),
|
||||
value: Number(this.params.value),
|
||||
});
|
||||
API.addSignin(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 修改内容
|
||||
editContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
validityTime: Number(this.params.validityTime),
|
||||
count: Number(this.params.count),
|
||||
value: Number(this.params.value),
|
||||
});
|
||||
API.editSignin(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "修改失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
name: "",
|
||||
type: "",
|
||||
value: "",
|
||||
count: "",
|
||||
validityTime: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
};
|
||||
},
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.params = Object.assign({}, data);
|
||||
this.title = "编辑内容";
|
||||
} else {
|
||||
this.title = "新增内容";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="chat-library-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input v-model="param.name" size="small" placeholder="请输入奖品名称" clearable style="width:200px;margin-right:5px"></el-input>
|
||||
<el-select v-model="param.prizeType" size="small" placeholder="请选择奖品类型" clearable style="width:200px;margin-right:5px">
|
||||
<el-option v-for="item in type" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="param.status" size="small" placeholder="请选择状态" clearable style="width:200px;margin-right:5px">
|
||||
<el-option v-for="item in statusType" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-button type="success" size="small" @click="searchBtn()">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="addContent('add')">+新增奖品类型</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" max-height="600">
|
||||
<el-table-column prop="createTimt" label="创建时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createTimt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updateTime | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="奖品名称" align="center"></el-table-column>
|
||||
<el-table-column prop="type" label="奖品类型" align="center" :formatter="formatterType">
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="奖品价值" align="center"> </el-table-column>
|
||||
<el-table-column prop="count" label="奖品数量" align="center"> </el-table-column>
|
||||
<el-table-column prop="validityTime" label="奖品有效期(天)" align="center"> </el-table-column>
|
||||
<el-table-column prop="desc" label="奖品描述" align="center" min-width="180" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.desc || "-"}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="count" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip class="item" effect="dark" content="请在编辑中修改" placement="top-start">
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-edit" @click="addContent('edit',scope.row)" round plain type="warning">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[10, 15, 20, 30]" :current-page="param.pageNumber" :page-size="param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
<add-content ref="addContent" @handlerContent="getContentList('status')"></add-content>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import addContent from "./components/addContent";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
label: "活跃值",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "金币",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "棋牌金币",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "楼风解锁折扣券",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "会员体验卡",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: "会员折扣券",
|
||||
value: 6,
|
||||
},
|
||||
],
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
name: "",
|
||||
prizeType: "",
|
||||
status: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
addContent,
|
||||
},
|
||||
created() {
|
||||
this.getContentList();
|
||||
},
|
||||
methods: {
|
||||
getParams() {
|
||||
let req = {
|
||||
pageNumber: this.param.pageNumber,
|
||||
pageSize: this.param.pageSize,
|
||||
};
|
||||
req.name = this.param.name ? this.param.name : undefined;
|
||||
req.type = this.param.prizeType ? this.param.prizeType : undefined;
|
||||
req.status = this.param.status != null ? this.param.status : undefined;
|
||||
return req;
|
||||
},
|
||||
// 请求聊天内容列表
|
||||
getContentList() {
|
||||
this.loading = true;
|
||||
let req = this.getParams();
|
||||
API.querySignin(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterType(row) {
|
||||
return this.type.filter((item) => item.value == row.type).length > 0
|
||||
? this.type.filter((item) => item.value == row.type)[0].label
|
||||
: "未知类型";
|
||||
},
|
||||
searchBtn() {
|
||||
this.getContentList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getContentList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
window.console.log(pageNumber)
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getContentList();
|
||||
},
|
||||
// 打开编辑、添加弹窗
|
||||
addContent(type, data) {
|
||||
this.$refs.addContent.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="tender-activity-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户Id"
|
||||
v-model.number="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
@change="getLottery()"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入摇奖号"
|
||||
v-model="params.code"
|
||||
clearable
|
||||
size="small"
|
||||
@change="getLottery('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getLottery('status')">搜索</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="uid"
|
||||
label="用户id"
|
||||
align="center"
|
||||
min-width="120"
|
||||
fixed
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
min-width="160"
|
||||
label="摇奖号"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.code ||'未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="gateName" label="关卡" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.gateName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</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"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { changeTime } from "@/utils/global";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: "",
|
||||
time: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getLottery();
|
||||
},
|
||||
methods: {
|
||||
// 请求获奖记录列表
|
||||
getLottery(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getLottery(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.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getLottery();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getLottery();
|
||||
},
|
||||
// 时间触发回调
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.start = changeTime(time[0]) || "";
|
||||
this.params.end = changeTime(time[1]) || "";
|
||||
} else {
|
||||
this.params.start = "";
|
||||
this.params.end = "";
|
||||
}
|
||||
this.getLottery("status");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<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="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="120" prop="cover">
|
||||
<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="activityName"
|
||||
label="活动名称"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.activityName || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="desc" label="名称" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.desc || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sort || "-" }}</span>
|
||||
</template>
|
||||
</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 === 1">启用</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.status === 0">禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="expiredIn"
|
||||
label="结束时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.expiredIn) }}</span>
|
||||
</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
|
||||
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
|
||||
>
|
||||
<el-button size="mini" type="warning" @click="editContent(scope.row)"
|
||||
>活动内容</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="params.pageNum"
|
||||
: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="500px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<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="activityName">
|
||||
<el-input v-model="form.activityName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动说明" prop="desc">
|
||||
<el-input v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="活动内容" prop="content">
|
||||
<el-input
|
||||
v-model="form.content"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model.number="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间:" prop="endTime">
|
||||
<el-date-picker
|
||||
v-model="form.expiredIn"
|
||||
type="datetime"
|
||||
:editable="false"
|
||||
placeholder="请输入结束时间"
|
||||
size="small"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用">
|
||||
<el-select v-model="form.status" placeholder="请选择是否推">
|
||||
<el-option
|
||||
v-for="item in enables"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="编辑活动内容"
|
||||
:visible.sync="isEditContent"
|
||||
width="80%"
|
||||
@close="close"
|
||||
>
|
||||
<div class="home">
|
||||
<!-- <h3>AV图文配置</h3>
|
||||
-->
|
||||
<el-button type="warning" size="mini" @click="openAddImage"
|
||||
>图片上传</el-button
|
||||
>
|
||||
|
||||
<!-- <el-button type="success" size="mini" @click="getEditorData"
|
||||
>预览页面</el-button
|
||||
> -->
|
||||
|
||||
<el-button type="danger" size="mini" @click="cleanData"
|
||||
>清除数据</el-button
|
||||
>
|
||||
<br /><br />
|
||||
<div id="editor" class="wangEditor"></div>
|
||||
<!-- <h3>内容预览</h3> -->
|
||||
<!-- <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
|
||||
<!--预览-->
|
||||
<look ref="look"></look>
|
||||
</div>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isEditContent = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmEditContent">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<add-image ref="addImage"></add-image>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import wangEditor from "wangeditor";
|
||||
import Look from "../../avcomment/avCommentConfig/components/look";
|
||||
import AddImage from "../../avcomment/avCommentConfig/components/addImage";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
components: {
|
||||
Look,
|
||||
AddImage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
// 图片上传地址
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
enables: [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
],
|
||||
rules: {
|
||||
activityName: [
|
||||
{ required: true, message: "请输入名称", trigger: "blur" },
|
||||
],
|
||||
// content: [
|
||||
// { required: true, message: "请输入活动内容", trigger: "blur" },
|
||||
// ],
|
||||
},
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
activeID: undefined,
|
||||
activityName: "",
|
||||
img: "",
|
||||
desc: "",
|
||||
// content: "",
|
||||
status: 1,
|
||||
sort: undefined,
|
||||
expiredIn: "",
|
||||
},
|
||||
topicId: "",
|
||||
isEditContent: false,
|
||||
editorDom: "",
|
||||
editor: null,
|
||||
editorData: "",
|
||||
editId: "",
|
||||
graphic: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNum = 1;
|
||||
}
|
||||
API.getActivity(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;
|
||||
},
|
||||
// 编辑活动内容
|
||||
editContent(row) {
|
||||
// console.log(row.content);
|
||||
this.editId = row.id;
|
||||
this.isEditContent = true;
|
||||
if (!this.editorDom) {
|
||||
setTimeout(() => {
|
||||
this.editorDom = new wangEditor(`#editor`);
|
||||
// 配置 onchange 回调函数，将数据同步到 vue 中
|
||||
this.editorDom.config.onchange = (newHtml) => {
|
||||
this.editorData = newHtml;
|
||||
};
|
||||
this.editorDom.create();
|
||||
// if (this.graphic != "" && this.graphic != "") {
|
||||
// this.editorDom.txt.html(this.graphic);
|
||||
// }
|
||||
this.editorDom.txt.html(row.content);
|
||||
this.editor = this.editorDom;
|
||||
});
|
||||
} else {
|
||||
this.editorDom.txt.html(row.content);
|
||||
}
|
||||
},
|
||||
// 新增标签配置
|
||||
addAndEdit(param) {
|
||||
this.editId = param.id;
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.activeID = param.id;
|
||||
this.form.activityName = param.activityName;
|
||||
this.form.img = param.img;
|
||||
this.form.desc = param.desc;
|
||||
// this.form.content = param.content;
|
||||
this.form.expiredIn = param.expiredIn;
|
||||
this.form.status = param.status;
|
||||
this.form.sort = param.sort ? param.sort : undefined;
|
||||
}
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addActivity(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "服务器异常",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.editActive(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "服务器异常",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
openAddImage() {
|
||||
this.$refs.addImage.open()
|
||||
},
|
||||
// getEditorData() {
|
||||
// // 通过代码获取编辑器内容
|
||||
// // let data = this.editor.txt.html()
|
||||
// // this.$refs.look.open(data, this.id)
|
||||
// },
|
||||
cleanData() {
|
||||
// this.id = ''
|
||||
this.graphic = "";
|
||||
this.editor.txt.html("");
|
||||
},
|
||||
confirmEditContent() {
|
||||
// console.log(this.editor.txt.html());
|
||||
if (!this.editor.txt.html()) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入活动内容",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let req = {
|
||||
activeID: this.editId,
|
||||
content: this.editor.txt.html(),
|
||||
};
|
||||
API.editActive(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.isEditContent = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.activeID = "";
|
||||
this.form.activityName = "";
|
||||
this.form.img = "";
|
||||
this.form.desc = "";
|
||||
// this.form.content = "";
|
||||
this.form.expiredIn = "";
|
||||
this.form.status = 1;
|
||||
this.form.sort = undefined;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
close() {
|
||||
this.editId = "";
|
||||
// this.editor = "";
|
||||
this.graphic = "";
|
||||
this.editorDom.txt.html("");
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNum) {
|
||||
this.params.pageNum = pageNum;
|
||||
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;
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-date-editor {
|
||||
width: 100% !important;
|
||||
}
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.wangEditor {
|
||||
position: initial !important;
|
||||
/deep/ .w-e-text-container {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<div class="add-content-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="130px">
|
||||
<el-form-item label="任务标题:" prop="title">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="请输入任务标题"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务描述:" prop="desc">
|
||||
<el-input
|
||||
v-model="params.desc"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入任务描述"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务图片:" prop="bgImg">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.img"
|
||||
:wSize="180"
|
||||
:hSize="90"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务奖品:" prop="prices">
|
||||
<el-select
|
||||
v-model="params.prizes"
|
||||
size="small"
|
||||
placeholder="请选择任务奖励"
|
||||
style="width:300px"
|
||||
multiple
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prizeBox"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择任务类型"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in types"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="达成条件:" prop="finishCondition">
|
||||
<el-input
|
||||
v-model="params.finishCondition"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入达成条件(连续签到多少天/活跃值)"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序:" prop="sortNum">
|
||||
<el-input
|
||||
v-model.number="params.sortNum"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入排序"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="跳转链接:" prop="link">
|
||||
<el-input
|
||||
v-model="params.link"
|
||||
type="textarea"
|
||||
size="small"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入跳转链接"
|
||||
style="width:300px"
|
||||
></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="跳转方式:" prop="hrefType">
|
||||
<el-select
|
||||
v-model.number="link_type"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
style="width:300px"
|
||||
>
|
||||
<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">
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model="params.link"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接地址:" prop="link" v-if="link_type == 2">
|
||||
<el-select
|
||||
v-model="params.link"
|
||||
size="small"
|
||||
placeholder="链接地址"
|
||||
filterable
|
||||
style="width:300px"
|
||||
>
|
||||
<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="videoId"
|
||||
v-if="params.link.indexOf('?id=') > -1 && link_type == 2"
|
||||
>
|
||||
<el-input
|
||||
size="small"
|
||||
style="width:300px"
|
||||
v-model="videoId"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用:" prop="status">
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
placeholder="请选择是否启用"
|
||||
style="width:300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
: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"
|
||||
size="small"
|
||||
@click="submitForm('form')"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { internalLinks } from "@/utils/common.js";
|
||||
export default {
|
||||
props: {
|
||||
prizeBox: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
dialogVisible: false,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
types: [
|
||||
{
|
||||
label: "购买vip",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "绑定手机号",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "下载APP",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
prices: [],
|
||||
rules: {
|
||||
finishCondition: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入达成条件(连续签到多少天/活跃值)",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "请选择配置类型", trigger: "change" },
|
||||
],
|
||||
prizes: [
|
||||
{ required: true, message: "请选择奖品列表", trigger: "change" },
|
||||
],
|
||||
},
|
||||
params: {
|
||||
finishCondition: "",
|
||||
type: "",
|
||||
title: undefined,
|
||||
desc: undefined,
|
||||
prizes: [],
|
||||
status: false,
|
||||
img: "",
|
||||
link: "",
|
||||
sortNum: 0,
|
||||
},
|
||||
linkTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 1 },
|
||||
{ label: "内部浏览器跳转", value: 2 },
|
||||
],
|
||||
link_type: 1,
|
||||
linkList: internalLinks,
|
||||
videoId: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === "新增配置") {
|
||||
this.addContent();
|
||||
return;
|
||||
}
|
||||
if (this.title === "编辑配置") {
|
||||
this.editContent();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增内容
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1 && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1) {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.addOneActivity(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 修改内容
|
||||
editContent() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
finishCondition: Number(this.params.finishCondition),
|
||||
});
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1 && !this.videoId) {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "请输入视频ID",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.link.indexOf('yinseinner:') > -1 && params.link.indexOf('?id=') > -1) {
|
||||
params.link = params.link + this.videoId;
|
||||
}
|
||||
API.editOneActive(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerContent");
|
||||
} else {
|
||||
this.$message.error(res.msg || "修改失败");
|
||||
}
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.img = res.data.coverImg;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.flag = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
finishCondition: "",
|
||||
type: "",
|
||||
prizes: "",
|
||||
desc: undefined,
|
||||
title: undefined,
|
||||
status: false,
|
||||
sortNum: 0,
|
||||
link: ''
|
||||
};
|
||||
this.link_type = 1;
|
||||
this.videoId = "";
|
||||
},
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "edit") {
|
||||
this.params = Object.assign({}, data);
|
||||
|
||||
if (
|
||||
this.params.link.indexOf("yinseinner:") > -1
|
||||
) {
|
||||
this.link_type = 2;
|
||||
}
|
||||
if (this.params.link.indexOf("yinseinner:") > -1 && this.params.link.indexOf("?id=") > -1) {
|
||||
const splitArr = this.params.link.split("=");
|
||||
this.params.link = splitArr[0] + "=";
|
||||
this.videoId = splitArr[1];
|
||||
} else {
|
||||
this.params.link = this.params.link;
|
||||
}
|
||||
this.title = "编辑配置";
|
||||
} else {
|
||||
this.title = "新增配置";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="chat-library-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="param.prizeType"
|
||||
size="small"
|
||||
placeholder="请选择奖品类型"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in type"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="param.status"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
style="width:200px;margin-right:5px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="success" size="small" @click="searchBtn()"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="addContent('add')"
|
||||
>+新增任务</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="finishCondition"
|
||||
label="达成条件(天/活跃值)"
|
||||
align="center"
|
||||
min-width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="任务类型"
|
||||
align="center"
|
||||
:formatter="formatterType"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cover" label="图片" align="center" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.img"
|
||||
:width="'180px'"
|
||||
:height="'90px'"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="prizes"
|
||||
label="奖品列表"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:formatter="formatterPrize"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="任务标题"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.title || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="任务描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.desc || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sortNum"
|
||||
label="排序"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sortNum || 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="link"
|
||||
label="任务链接"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.link || "-" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="count" label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="请在编辑中修改"
|
||||
placement="top-start"
|
||||
>
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="120"
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addContent('edit', scope.row)"
|
||||
round
|
||||
plain
|
||||
type="warning"
|
||||
>编辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<add-content
|
||||
ref="addContent"
|
||||
@handlerContent="getContentList('status')"
|
||||
:prizeBox="prizeBox"
|
||||
></add-content>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import addContent from "./components/addContent";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
statusType: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
label: "购买vip",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "绑定手机号",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "下载APP",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "购买金币",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
prizeType: "",
|
||||
status: "",
|
||||
},
|
||||
prizeBox: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
addContent,
|
||||
},
|
||||
created() {
|
||||
this.getContentList();
|
||||
this.queryPrizeBox();
|
||||
},
|
||||
methods: {
|
||||
getParams() {
|
||||
let req = {
|
||||
pageNumber: this.param.pageNumber,
|
||||
pageSize: this.param.pageSize,
|
||||
};
|
||||
req.type = this.param.prizeType ? this.param.prizeType : undefined;
|
||||
req.status = this.param.status != null ? this.param.status : undefined;
|
||||
return req;
|
||||
},
|
||||
queryPrizeBox() {
|
||||
API.queryPrizeBox()
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.length > 0) {
|
||||
this.prizeBox = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error(res.msg || "获取奖品失败");
|
||||
this.prizeBox = [];
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getContentList() {
|
||||
this.loading = true;
|
||||
let req = this.getParams();
|
||||
API.getOneActivity(req)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length > 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterType(row) {
|
||||
return this.type.filter((item) => item.value == row.type).length > 0
|
||||
? this.type.filter((item) => item.value == row.type)[0].label
|
||||
: "未知类型";
|
||||
},
|
||||
formatterPrize(row) {
|
||||
var htmlStr = "";
|
||||
if (this.prizeBox.length === 0 || row.prizes === 0) {
|
||||
return "获取奖品列表失败";
|
||||
}
|
||||
this.prizeBox.forEach((data) => {
|
||||
row.prizes.forEach((value) => {
|
||||
if (data.value == value) {
|
||||
htmlStr += "、" + data.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
htmlStr = htmlStr.substr(1, htmlStr.length);
|
||||
return htmlStr;
|
||||
},
|
||||
searchBtn() {
|
||||
this.getContentList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getContentList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getContentList();
|
||||
},
|
||||
// 打开编辑、添加弹窗
|
||||
addContent(type, data) {
|
||||
this.$refs.addContent.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="edit-active-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="120px">
|
||||
<el-form-item label="活动:" prop="activityId">
|
||||
<el-select v-model="params.activityId" size="small" placeholder="请选择活动" filterable clearable>
|
||||
<el-option v-for="item in actIDs" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖池模式:" prop="model">
|
||||
<el-select v-model="params.model" size="small" placeholder="请选择奖池模式" filterable clearable>
|
||||
<el-option v-for="item in models" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="当日预计收益:" prop="estimatedIncome">
|
||||
<el-input v-model.number="params.estimatedIncome" size="small" type="number" placeholder="请输入当日预计收益" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单次抽奖金额:" prop="price">
|
||||
<el-input v-model.number="params.price" size="small" type="number" placeholder="请输入单次抽奖金额" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="免费次数:" prop="freeCount">
|
||||
<el-input v-model.number="params.freeCount" size="small" type="number" placeholder="请输入免费次数" clearable></el-input>
|
||||
</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 {
|
||||
props: {
|
||||
actIDs: {
|
||||
type: Array,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "新增奖池",
|
||||
flag: false,
|
||||
type: "", //表单类型
|
||||
params: {
|
||||
activityId: "",
|
||||
model: "",
|
||||
estimatedIncome: "",
|
||||
endTime: "",
|
||||
status: false,
|
||||
},
|
||||
models: [
|
||||
{
|
||||
value: 1,
|
||||
label: "棋牌游戏",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "免费",
|
||||
},
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
activityId: [
|
||||
{ required: true, message: "请选择活动", trigger: "change" },
|
||||
],
|
||||
model: [
|
||||
{ required: true, message: "请选择奖池模式", trigger: "change" },
|
||||
],
|
||||
estimatedIncome: [
|
||||
{ required: true, message: "请输入当日预计收益", trigger: "blur" },
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "请输入单次抽奖金额", trigger: "blur" },
|
||||
],
|
||||
freeCount: [
|
||||
{ required: true, message: "请输入免费次数", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "edit") {
|
||||
this.editActive();
|
||||
}
|
||||
if (this.type == "add") {
|
||||
this.addContent();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.addPrizePool(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerList");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
editActive() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.editPrizePool(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
title: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
};
|
||||
},
|
||||
|
||||
// 打开编辑活动弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑奖池";
|
||||
this.params = Object.assign({}, data);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.edit-active-box {
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.el-dialog {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="activityList-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select v-model="params.activityId" size="small" placeholder="请选择活动" filterable clearable>
|
||||
<el-option v-for="item in actIDs" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="params.model" size="small" placeholder="请选择奖池模式" filterable clearable>
|
||||
<el-option v-for="item in models" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="searchActive()">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="activeAction('add')">+新增奖池</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="activityId" label="活动" align="center" :show-overflow-tooltip="true" min-width="220" fixed>
|
||||
<template slot-scope="scope">
|
||||
{{formatterAct(scope.row.activityId)}}
|
||||
</template>?
|
||||
</el-table-column>
|
||||
<el-table-column prop="model" label="奖池模式" align="center" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span> {{modelType(scope.row.model)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="单次抽奖金额" align="center" :show-overflow-tooltip="true" min-width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="freeCount" label="免费次数" align="center" :show-overflow-tooltip="true" min-width="120"></el-table-column>
|
||||
<el-table-column prop="estimatedIncome" label="预计当日收益" align="center" :show-overflow-tooltip="true" min-width="120"></el-table-column>
|
||||
<el-table-column prop="reservoir" label="蓄水池" align="center" :show-overflow-tooltip="true" min-width="120"></el-table-column>
|
||||
<el-table-column prop="systemIncome" label="系统收益" align="center" :show-overflow-tooltip="true" min-width="120"></el-table-column>
|
||||
<el-table-column prop="systemRake" label="系统抽成金额" align="center" :show-overflow-tooltip="true" min-width="120"></el-table-column>
|
||||
<el-table-column prop="startTime" label="创建时间" align="center" :show-overflow-tooltip="true" min-width="200">
|
||||
<template slot-scope="scope">{{ scope.row.createTimt | changeDate }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="更新时间" align="center" :show-overflow-tooltip="true" min-width="200">
|
||||
<template slot-scope="scope">{{ scope.row.updateTime | changeDate }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="operating" label="操作" align="center" width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="activeAction('edit', scope.row)"></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" background @size-change="changeSize" :total="total" @current-change="changeCurrent"></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<prize-list-action ref="activeAction" :actIDs="actIDs" @handlerList="handlerActiveList"></prize-list-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PrizeListAction from "./components/prizeListAction";
|
||||
import API from "@/api";
|
||||
import { paramsFilter } from "@/utils/global";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
time: "",
|
||||
models: [
|
||||
{
|
||||
value: 1,
|
||||
label: "棋牌游戏",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "免费",
|
||||
},
|
||||
],
|
||||
actIDs: [],
|
||||
params: {
|
||||
model: "",
|
||||
activityId: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
PrizeListAction,
|
||||
},
|
||||
created() {
|
||||
this.getPrizePool();
|
||||
this.getActiveityId();
|
||||
},
|
||||
methods: {
|
||||
// 获取活动ID
|
||||
getActiveityId() {
|
||||
API.getActiveityId(this.params).then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.actIDs = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error("获取活动失败");
|
||||
});
|
||||
},
|
||||
getPrizePool() {
|
||||
this.loading = true;
|
||||
let formData = paramsFilter(this.params);
|
||||
API.getPrizePool(formData)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterAct(id) {
|
||||
return this.actIDs.filter((item) => item.value == id).length > 0
|
||||
? this.actIDs.filter((item) => item.value == id)[0].label
|
||||
: "未知";
|
||||
},
|
||||
modelType(model) {
|
||||
return this.models.filter((item) => item.value == model).length > 0
|
||||
? this.models.filter((item) => item.value == model)[0].label
|
||||
: "未知";
|
||||
},
|
||||
// 搜索列表
|
||||
searchActive() {
|
||||
this.getPrizePool();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.formparamsData.pageNumber = 1;
|
||||
this.getPrizePool();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getPrizePool();
|
||||
},
|
||||
// 编辑活动成功回掉
|
||||
handlerActiveList() {
|
||||
this.getPrizePool();
|
||||
},
|
||||
// 新增、删除tags
|
||||
activeAction(type, data) {
|
||||
this.$refs.activeAction.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="140px">
|
||||
<el-form-item v-if="type === 'add'" label="APP类型:" prop="app">
|
||||
<el-select
|
||||
v-model="params.app"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择APP类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in appTypes"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-if="type==='edit'" label="状态:" prop="status">
|
||||
<el-select v-model="params.status" size="small" clearable placeholder="请选择状态">
|
||||
<el-option v-for="item in statusList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="渠道号:" prop="channel">
|
||||
<el-input v-model="params.channel" size="small" disabled></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="checked"
|
||||
@click="openDataSelector"
|
||||
>选择</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-if="type==='add'" label="兑换码批次号:" prop="batchNum">
|
||||
<el-input v-model="params.batchNum" size="small" placeholder="请输入兑换码批次号"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="兑换码权限:" prop="authority">
|
||||
<el-select
|
||||
v-model="params.authority"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择兑换码权限"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in authorityList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="可用次数:" prop="usableNum">
|
||||
<el-input
|
||||
v-model.number="params.usableNum"
|
||||
size="small"
|
||||
placeholder="请输入可用次数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖励量:" prop="rewardCount">
|
||||
<el-input
|
||||
v-model.number="params.rewardCount"
|
||||
size="small"
|
||||
placeholder="请输入奖励量"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖励值:" prop="reward">
|
||||
<el-input
|
||||
v-model.number="params.reward"
|
||||
size="small"
|
||||
placeholder="请输入奖励值"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="type === 'add'"
|
||||
label="兑换码生成数量:"
|
||||
prop="count"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="params.count"
|
||||
size="small"
|
||||
placeholder="请输入兑换码成数量"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="生效时间:" prop="effectiveAt">
|
||||
<el-date-picker
|
||||
v-model="params.effectiveAt"
|
||||
type="datetime"
|
||||
placeholder="请选择日期时间"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="失效时间:" prop="invalidAt">
|
||||
<el-date-picker
|
||||
v-model="params.invalidAt"
|
||||
type="datetime"
|
||||
placeholder="请选择日期时间"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input
|
||||
v-model="params.remark"
|
||||
type="textarea"
|
||||
rows="3"
|
||||
placeholder="请输入备注"
|
||||
></el-input>
|
||||
</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>
|
||||
<!-- 单选渠道 -->
|
||||
<radio-channel
|
||||
v-if="type === 'edit'"
|
||||
ref="channelSelector"
|
||||
@onChange="getChannel"
|
||||
>
|
||||
</radio-channel>
|
||||
<!-- 单选渠道 -->
|
||||
<!-- 多选渠道 -->
|
||||
<multiple-channels
|
||||
v-else
|
||||
ref="channelSelector"
|
||||
@onChange="getChannel"
|
||||
></multiple-channels>
|
||||
<!-- 多选渠道 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
// import local from "@/utils/localStroage.js";
|
||||
import { changeTime } from "@/utils/global";
|
||||
import RadioChannel from "@/components/radioChannel";
|
||||
import MultipleChannels from "@/components/multipleChannels";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 弹窗标题
|
||||
title: "",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
// 编辑id
|
||||
id: "",
|
||||
// 当前是编辑还是新增
|
||||
type: "",
|
||||
// 新增兑换码请求参数
|
||||
params: {
|
||||
app: "",
|
||||
channel: "",
|
||||
// batchNum: '',
|
||||
authority: "shortVideoVip",
|
||||
reward: "",
|
||||
rewardCount: "",
|
||||
usableNum: "",
|
||||
count: "",
|
||||
effectiveAt: "",
|
||||
invalidAt: "",
|
||||
remark: "",
|
||||
status,
|
||||
},
|
||||
appTypes: [
|
||||
{ label: "91PORN", value: "ysAppVideo" },
|
||||
{ label: "91约炮", value: "pfAppVideo" },
|
||||
{ label: "雷霆加速器", value: "ltAppVpn" },
|
||||
],
|
||||
authorityList: [
|
||||
{ label: "兑换VIP", value: "shortVideoVip" },
|
||||
{ label: "3天永久VIP", value: "3dPermanentVip" },
|
||||
{ label: "兑换金币", value: "gold" },
|
||||
{ label: "观影券", value: "videoCoupon" },
|
||||
],
|
||||
statusList: [
|
||||
{ label: "已兑换", value: "used" },
|
||||
{ label: "未使用", value: "unused" },
|
||||
{ label: "已过期", value: "expired" },
|
||||
],
|
||||
/// 选择兑换码类型ID参数
|
||||
// idList: [],
|
||||
// params1: {
|
||||
// type: '',
|
||||
// crowdType: '',
|
||||
// isActive: '',
|
||||
// pageNumber: 1,
|
||||
// pageSize: 10,
|
||||
// },
|
||||
// 验证规则
|
||||
rules: {
|
||||
app: [{ required: true, message: "请选择APP类型", trigger: "blur" }],
|
||||
// status: [
|
||||
// { required: true, message: '请选择状态', trigger: 'blur' }
|
||||
// ],
|
||||
authority: [
|
||||
{ required: true, message: "请选择兑换权限", trigger: "blur" },
|
||||
],
|
||||
usableNum: [
|
||||
{ required: true, message: "请输入可用次数", trigger: "blur" },
|
||||
],
|
||||
reward: [{ required: true, message: "请输入奖励值", trigger: "blur" }],
|
||||
rewardCount: [
|
||||
{ required: true, message: "请输入奖励量", trigger: "blur" },
|
||||
],
|
||||
effectiveAt: [
|
||||
{ required: true, message: "请选择生效时间", trigger: "blur" },
|
||||
],
|
||||
invalidAt: [{ required: true, message: "请失效时间", trigger: "blur" }],
|
||||
// batchNum: [
|
||||
// { required: true, message: '请输入批次号', trigger: 'blur' }
|
||||
// ],
|
||||
// channel: [
|
||||
// { required: true, message: '请选择渠道', trigger: 'change' }
|
||||
// ],
|
||||
count: [
|
||||
{ required: true, message: "请输入兑换码生成数量", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/// 判断是否为超级管理员用户,只有超级管理员用户才能添加兑换金币选项
|
||||
// const userInfo = local.get("userInfo"),
|
||||
// role = userInfo.admin.role || "";
|
||||
// if (role !== "superAdmin") {
|
||||
// this.authorityList = [{ label: "兑换VIP", value: "shortVideoVip" }];
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
RadioChannel,
|
||||
MultipleChannels,
|
||||
},
|
||||
methods: {
|
||||
getChannel(val) {
|
||||
this.params.channel = val;
|
||||
},
|
||||
openDataSelector() {
|
||||
const val = this.params.channel;
|
||||
this.$refs.channelSelector.open(val);
|
||||
},
|
||||
// // 请求兑换码类型列表参数
|
||||
// redemptionTypeList() {
|
||||
// API.redemptionTypeList(this.params1).then(res => {
|
||||
// if (res.code === 200 && res.data.list) {
|
||||
// this.idList = res.data.list
|
||||
// } else {
|
||||
// this.idList = []
|
||||
// }
|
||||
// }).catch(() => {
|
||||
// this.idList = []
|
||||
// })
|
||||
// },
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addCode();
|
||||
} else if (this.type === "edit") {
|
||||
this.editCode();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增兑换码
|
||||
addCode() {
|
||||
let params = Object.assign({}, this.params);
|
||||
params.channels = this.params.channel.split(",").slice(0, -1);
|
||||
delete params.channel;
|
||||
params.effectiveAt = changeTime(this.params.effectiveAt) || "";
|
||||
params.invalidAt = changeTime(this.params.invalidAt) || "";
|
||||
API.addCode(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 修改兑换码
|
||||
editCode() {
|
||||
let params = Object.assign({}, this.params, { id: this.id });
|
||||
params.effectiveAt = changeTime(this.params.effectiveAt) || "";
|
||||
params.invalidAt = changeTime(this.params.invalidAt) || "";
|
||||
API.editCode(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
app: "",
|
||||
channel: "",
|
||||
// batchNum: '',
|
||||
authority: "",
|
||||
reward: "",
|
||||
rewardCount: "",
|
||||
usableNum: "",
|
||||
count: "",
|
||||
effectiveAt: "",
|
||||
invalidAt: "",
|
||||
remark: "",
|
||||
status: "",
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
// 请求兑换码类型id列表
|
||||
// this.redemptionTypeList()
|
||||
if (type === "add") {
|
||||
this.type = "add";
|
||||
this.title = "新增兑换码";
|
||||
} else {
|
||||
this.type = "edit";
|
||||
this.title = "修改兑换码";
|
||||
this.id = data.id;
|
||||
this.params = {
|
||||
app: data.app,
|
||||
channel: data.channel,
|
||||
// batchNum: data.batchNum,
|
||||
authority: data.authority,
|
||||
reward: data.reward,
|
||||
rewardCount: data.rewardCount,
|
||||
usableNum: data.usableNum,
|
||||
count: data.count,
|
||||
effectiveAt: data.effectiveAt.slice(0, 19),
|
||||
invalidAt: data.invalidAt.slice(0, 19),
|
||||
remark: data.remark,
|
||||
// status: data.status
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
agent-action-box {
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="redemption-code-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入渠道号"
|
||||
v-model="params.channel"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionCodeList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入兑换码"
|
||||
v-model="params.code"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionCodeList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入批次号"
|
||||
v-model="params.batchNum"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionCodeList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.app"
|
||||
size="small"
|
||||
placeholder="APP类型"
|
||||
clearable
|
||||
@change="redemptionCodeList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in appList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.authority"
|
||||
size="small"
|
||||
placeholder="兑换权限"
|
||||
clearable
|
||||
@change="redemptionCodeList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in authorityList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-select v-model="params.status" size="small" placeholder="兑换状态" clearable @change="redemptionCodeList('status')">
|
||||
<el-option v-for="item in statusList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="redemptionCodeList('status')"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="codeAction('add')"
|
||||
>+新增兑换码</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="exportdata"
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
align="center"
|
||||
min-width="220"
|
||||
fixed
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="batchNum"
|
||||
label="批次号"
|
||||
align="center"
|
||||
min-width="100"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.batchNum || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="app"
|
||||
label="APP类型"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.app | appRule }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="channel"
|
||||
min-width="160"
|
||||
label="渠道"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.channel | channelRule }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
label="兑换码"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.code || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="authority"
|
||||
label="兑换权限"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.authority | authorityRule }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="status" label="兑换状态" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.status | statusRule}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="rewardCount"
|
||||
label="奖励量"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.rewardCount | numFormat }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reward"
|
||||
label="奖励值"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.reward | numFormat }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="usableNum"
|
||||
label="可用次数"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.usableNum ? scope.row.usableNum : "0" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operator"
|
||||
label="操作者"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.operator || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "无" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="effectiveAt"
|
||||
label="生效时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.effectiveAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="invalidAt"
|
||||
label="失效时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.invalidAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updatedAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operating"
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
:disabled="scope.row.status !== 'unused'"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="codeAction('edit', scope.row)"
|
||||
></el-button>
|
||||
<!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row)">删除同一批次的兑换码</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[5, 10, 15, 20, 50, 100]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<code-action
|
||||
ref="codeAction"
|
||||
@handlerCodeList="handlerCodeList"
|
||||
></code-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeAction from "./components/codeAction";
|
||||
import { paramsFilter } from "@/utils/global";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: "",
|
||||
statusList: [
|
||||
{
|
||||
label: "已兑换",
|
||||
value: "used",
|
||||
},
|
||||
{
|
||||
label: "未使用",
|
||||
value: "unused",
|
||||
},
|
||||
{
|
||||
label: "已过期",
|
||||
value: "expired",
|
||||
},
|
||||
],
|
||||
appList: [
|
||||
{
|
||||
label: "91PORN",
|
||||
value: "ysAppVideo",
|
||||
},
|
||||
{
|
||||
label: "91约炮",
|
||||
value: "pfAppVideo",
|
||||
},
|
||||
{
|
||||
label: "雷霆加速器",
|
||||
value: "ltAppVpn",
|
||||
},
|
||||
],
|
||||
authorityList: [
|
||||
{
|
||||
label: "兑换VIP",
|
||||
value: "shortVideoVip",
|
||||
},
|
||||
// {
|
||||
// label: '影视VIP',
|
||||
// value: 'filmVip',
|
||||
// },
|
||||
{ label: "3天永久VIP", value: "3dPermanentVip" },
|
||||
// {
|
||||
// label: '兑换金币',
|
||||
// value: 'gold',
|
||||
// },
|
||||
],
|
||||
// 兑换码列表参数
|
||||
params: {
|
||||
batchNum: "",
|
||||
channel: "",
|
||||
code: "",
|
||||
app: "",
|
||||
authority: "",
|
||||
status: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
channelRule(val) {
|
||||
if (val instanceof Array) {
|
||||
return val.join(",");
|
||||
}
|
||||
return val;
|
||||
},
|
||||
authorityRule(value) {
|
||||
switch (value) {
|
||||
case "3dPermanentVip":
|
||||
return "3天永久VIP";
|
||||
case "shortVideoVip":
|
||||
return "兑换VIP";
|
||||
case "gold":
|
||||
return "兑换金币";
|
||||
case "videoCoupon":
|
||||
return "观影券";
|
||||
}
|
||||
},
|
||||
statusRule(val) {
|
||||
const ruleObj = {
|
||||
unused: "未使用",
|
||||
used: "已兑换",
|
||||
expired: "已过期",
|
||||
};
|
||||
return ruleObj[val] || "未知";
|
||||
},
|
||||
appRule(val) {
|
||||
const ruleObj = {
|
||||
ysAppVideo: "91PORN",
|
||||
pfAppVideo: "91约炮",
|
||||
ltAppVpn: "雷霆加速器",
|
||||
};
|
||||
return ruleObj[val] || "未知";
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CodeAction,
|
||||
},
|
||||
created() {
|
||||
/// 判断是否为超级管理员用户,只有超级管理员用户才能添加兑换金币选项
|
||||
const userInfo = local.get("userInfo"),
|
||||
role = userInfo.admin.role || "";
|
||||
if (role !== "superAdmin") {
|
||||
this.authorityList = [
|
||||
{ label: "短视频VIP", value: "shortVideoVip" },
|
||||
{ label: "影视VIP", value: "filmVip" },
|
||||
{ label: "超级VIP", value: "superVip" },
|
||||
];
|
||||
}
|
||||
this.redemptionCodeList();
|
||||
},
|
||||
methods: {
|
||||
// 导出数据
|
||||
exportdata() {
|
||||
let param = Object.assign({}, this.params, { role: this.role });
|
||||
let params = paramsFilter(param);
|
||||
let str = "";
|
||||
for (let key in params) {
|
||||
if (key == "startTime" || key == "endTime") {
|
||||
params[key] = params[key].replace("+", "%2B");
|
||||
}
|
||||
str += key + "=" + params[key] + "&";
|
||||
}
|
||||
str = str.substring(0, str.length - 1);
|
||||
|
||||
let url = baseConfig.baseServerUrl + "/export/exchangecode?" + str;
|
||||
window.location.href = url;
|
||||
},
|
||||
// 请求兑换码列表
|
||||
redemptionCodeList(status) {
|
||||
if (status) {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.redemptionCodeList(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.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 删除兑换码
|
||||
// remove(row) {
|
||||
// this.$confirm('您确定要当前选择批次的兑换码吗？', '删除提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// .then(() => {
|
||||
// API.delCode({ exchangeTypeID: row.exchangeTypeID, batchNum: row.batchNum }).then(res => {
|
||||
// if (res.code === 200) {
|
||||
// this.$message({
|
||||
// message: '删除兑换码成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// this.redemptionCodeList()
|
||||
// } else {
|
||||
// if (res.tip) {
|
||||
// this.$message.error(res.tip)
|
||||
// } else {
|
||||
// this.$message.error('删除兑换码失败')
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// .catch(() => { });
|
||||
// },
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.redemptionCodeList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.redemptionCodeList();
|
||||
},
|
||||
// 编辑活动成功回掉
|
||||
handlerCodeList() {
|
||||
this.redemptionCodeList();
|
||||
},
|
||||
// 新增、删除tags
|
||||
codeAction(type, data) {
|
||||
this.$refs.codeAction.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="550px" :before-close="handleClose" :close-on-click-modal="false" class="el-dialogs">
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="180px">
|
||||
<el-form-item label="类型:" prop="type">
|
||||
<el-select v-model.number="params.type" size="small" clearable placeholder="请选择类型">
|
||||
<el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="奖励大小:" prop="reward">
|
||||
<el-input v-model.number="params.reward" size="small" placeholder="请输入奖励大小"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="兑换码总数量:" prop="count">
|
||||
<el-input v-model.number="params.count" size="small" placeholder="请输入兑换码总数量"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="面向人群:" prop="crowdType">
|
||||
<el-select v-model.number="params.crowdType" size="small" clearable placeholder="请选择面向人群">
|
||||
<el-option v-for="item in peopleList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否开启:" prop="isActive">
|
||||
<el-switch v-model="params.isActive"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="兑换码名称:" prop="title">
|
||||
<el-input v-model="params.title" size="small" placeholder="请输入兑换码名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="兑换码详情:" prop="describe">
|
||||
<el-input v-model="params.describe" size="small" placeholder="请输入兑换码详情"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input v-model="params.remark" size="small" type="textarea" placeholder="请输入备注" :rows="2"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单个用户兑换次数:" prop="limit">
|
||||
<el-input v-model.number="params.limit" size="small" placeholder="请输入兑换次数"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="生效时间:" prop="effectiveAt">
|
||||
<el-date-picker v-model="params.effectiveAt" type="datetime" :editable="false" size="small" placeholder="请选择生效时间"> </el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="失效时间:" prop="invalidAt">
|
||||
<el-date-picker v-model="params.invalidAt" type="datetime" :editable="false" size="small" placeholder="请选择失效时间"> </el-date-picker>
|
||||
</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,
|
||||
// 渠道类型列表
|
||||
typeList: [
|
||||
{
|
||||
label: '兑换vip天数',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '兑换金币',
|
||||
value: 2
|
||||
},
|
||||
],
|
||||
peopleList: [{
|
||||
label: '全体',
|
||||
value: 1
|
||||
}],
|
||||
// 弹窗标题
|
||||
title: '',
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 当前是编辑还是新增
|
||||
type: '',
|
||||
// 新增与编辑兑换码类型接口参数
|
||||
params: {
|
||||
type: '',
|
||||
reward: '',
|
||||
count: '',
|
||||
crowdType: '',
|
||||
isActive: false,
|
||||
title: '',
|
||||
describe: '',
|
||||
remark: '',
|
||||
limit: '',
|
||||
effectiveAt: '',
|
||||
invalidAt: '',
|
||||
},
|
||||
// 验证规则
|
||||
rules: {
|
||||
type: [
|
||||
{ required: true, message: '请选择类型', trigger: 'change' },
|
||||
{ validator: validatorIndex, trigger: 'blur' }
|
||||
],
|
||||
reward: [
|
||||
{ required: true, message: '请输入奖励大小', trigger: 'blur' },
|
||||
{ validator: validatorIndex, trigger: 'blur' }
|
||||
],
|
||||
count: [
|
||||
{ required: true, message: '请输入兑换码数量', trigger: 'blur' },
|
||||
{ validator: validatorIndex, trigger: 'blur' }
|
||||
],
|
||||
crowdType: [
|
||||
{ required: true, message: '请选择面向人群', trigger: 'change' }
|
||||
],
|
||||
// isActive:[
|
||||
// {required: true, message: '活动是否开启', trigger: 'blur' }
|
||||
// ],
|
||||
title: [
|
||||
{ required: true, message: '请输入兑换码名称', trigger: 'blur' }
|
||||
],
|
||||
limit: [
|
||||
{ required: true, message: '请输入单个用户兑换次数', trigger: 'blur' },
|
||||
{ validator: validatorIndex, trigger: 'blur' }
|
||||
],
|
||||
effectiveAt: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
|
||||
invalidAt: [{ required: true, message: '请选择失效时间', trigger: 'change' }]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.title === '新增兑换码类型') {
|
||||
this.addType();
|
||||
} else {
|
||||
this.editType();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增兑换码
|
||||
addType() {
|
||||
API.addType(this.params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerTypeList');
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error('新增失败！');
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 编辑兑换码
|
||||
editType() {
|
||||
let params = Object.assign(this.params, { id: this.id })
|
||||
API.editType(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '编辑成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerTypeList');
|
||||
} else {
|
||||
this.$message.error('编辑失败！');
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
type: '',
|
||||
reward: '',
|
||||
|
||||
count: '',
|
||||
crowdType: '',
|
||||
|
||||
isActive: false,
|
||||
title: '',
|
||||
describe: '',
|
||||
remark: '',
|
||||
limit: '',
|
||||
effectiveAt: '',
|
||||
invalidAt: '',
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === 'add') {
|
||||
this.type = 'add';
|
||||
this.title = '新增兑换码类型'
|
||||
} else {
|
||||
this.title = '编辑兑换码类型'
|
||||
this.id = data.id
|
||||
this.params.type = data.type
|
||||
this.params.reward = data.reward
|
||||
this.params.count = data.count
|
||||
this.params.crowdType = data.crowdType
|
||||
this.params.isActive = data.isActive
|
||||
|
||||
this.params.title = data.title
|
||||
this.params.describe = data.describe
|
||||
this.params.remark = data.remark
|
||||
this.params.limit = data.limit
|
||||
this.params.effectiveAt = data.effectiveAt
|
||||
this.params.invalidAt = data.invalidAt
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="redemption-configuration-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="typeAction('add')">+新增兑换码类型</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="id" label="兑换码类型ID" align="center" :show-overflow-tooltip="true" fixed width="240"></el-table-column>
|
||||
<el-table-column prop="title" label="兑换码名字" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
|
||||
<el-table-column prop="describe" label="兑换码描述信息" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.describe || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="type" label="兑换码类型" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.type | Type}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="reward" label="奖励值" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
|
||||
<el-table-column prop="count" label="兑换码总数量" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
|
||||
<el-table-column prop="limit" label="兑换次数限制" align="center" :show-overflow-tooltip="true" width="200"></el-table-column>
|
||||
<el-table-column prop="crowdType" label="针对的人群类型" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.crowdType === 1 ? '全体用户' : '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.remark || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isActive" label="是否开启" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isActive" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operator" label="操作者" align="center" width="200">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="effectiveAt" label="生效时间" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.effectiveAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="invalidAt" label="失效时间" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.invalidAt | changeDate}}</span>
|
||||
</template>
|
||||
</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 prop="operating" label="操作" align="center" fixed="right" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="typeAction('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(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" background @size-change="changeSize" :total="total" v-if="total > 10" @current-change="changeCurrent"></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<type-action ref="typeAction" @handlerTypeList="handlerTypeList"></type-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import typeAction from './components/typeAction'
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: '',
|
||||
// 兑换码列表参数
|
||||
params: {
|
||||
type: '',
|
||||
crowdType: '',
|
||||
isActive: '',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
typeAction
|
||||
},
|
||||
created() {
|
||||
// this.redemptionTypeList()
|
||||
},
|
||||
methods: {
|
||||
// 请求兑换码列表
|
||||
redemptionTypeList() {
|
||||
this.loading = true
|
||||
API.redemptionTypeList(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.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 删除兑换码
|
||||
remove(id) {
|
||||
this.$confirm('您确定要当前兑换码类型吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
API.delType({ id: id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除兑换码类型成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.redemptionTypeList()
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip)
|
||||
} else {
|
||||
this.$message.error('删除兑换码类型失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.params.pageNumber = 1
|
||||
this.redemptionTypeList()
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber
|
||||
this.redemptionTypeList()
|
||||
},
|
||||
// 新增编辑活动成功回掉
|
||||
handlerTypeList() {
|
||||
this.redemptionTypeList()
|
||||
},
|
||||
// 新增、删除tags
|
||||
typeAction(type, data) {
|
||||
this.$refs.typeAction.open(type, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="redemption-log-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入渠道号"
|
||||
v-model="params.channel"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionLogList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入兑换码"
|
||||
v-model="params.code"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionLogList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入兑换者"
|
||||
v-model.number="params.userID"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="redemptionLogList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.authority"
|
||||
size="small"
|
||||
placeholder="兑换权限"
|
||||
clearable
|
||||
@change="redemptionLogList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in authorityList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="redemptionLogList('status')"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
label="兑换码"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.code || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="userID"
|
||||
label="兑换者"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.userID || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="channel"
|
||||
min-width="160"
|
||||
label="所属渠道"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.channel | channelRule }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="authority"
|
||||
label="兑换权限"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.authority | authorityRule }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reward"
|
||||
label="兑换量"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.reward | numFormat }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.createdAt | changeDate }}</span>
|
||||
</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"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: "",
|
||||
// 兑换日志列表参数
|
||||
params: {
|
||||
code: "",
|
||||
userID: "",
|
||||
channel: "",
|
||||
authority: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
authorityList: [
|
||||
{
|
||||
label: "兑换VIP",
|
||||
value: "shortVideoVip",
|
||||
},
|
||||
{
|
||||
label: "3天永久VIP",
|
||||
value: "3dPermanentVip",
|
||||
},
|
||||
// {
|
||||
// label: '影视VIP',
|
||||
// value: 'filmVip'
|
||||
// },
|
||||
// {
|
||||
// label: '超级VIP',
|
||||
// value: 'superVip'
|
||||
// },
|
||||
{
|
||||
label: "兑换金币",
|
||||
value: "gold",
|
||||
},
|
||||
{
|
||||
label: "观影券",
|
||||
value: "videoCoupon",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
channelRule(val) {
|
||||
if (val instanceof Array) {
|
||||
return val.join(",");
|
||||
}
|
||||
return val;
|
||||
},
|
||||
authorityRule(val) {
|
||||
const ruleObj = {
|
||||
// shortVideoVip: '短视频VIP',
|
||||
// filmVip: '影视VIP',
|
||||
// superVip: '超级VIP',
|
||||
shortVideoVip: "兑换VIP",
|
||||
"3dPermanentVip": "3天永久VIP",
|
||||
gold: "兑换金币",
|
||||
videoCoupon: "观影券",
|
||||
};
|
||||
return ruleObj[val] || "未知";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.redemptionLogList();
|
||||
},
|
||||
methods: {
|
||||
// 请求兑换日志列表
|
||||
redemptionLogList() {
|
||||
this.loading = true;
|
||||
API.redemptionLogList(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.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.redemptionLogList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.redemptionLogList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="800px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="140px">
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="奖品图片:" prop="activityId">
|
||||
<base-upload
|
||||
:cover="params.image"
|
||||
:action="actionPics"
|
||||
@successCallback="successCallback"
|
||||
:id="id"
|
||||
:wSize="184"
|
||||
:hSize="184"
|
||||
:width="'184px'"
|
||||
:height="'184px'"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="活动:" prop="activityId">
|
||||
<el-select
|
||||
v-model="params.activityId"
|
||||
size="small"
|
||||
placeholder="请选择活动"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in actIDs"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品名称:" prop="name">
|
||||
<el-input
|
||||
v-model="params.name"
|
||||
size="small"
|
||||
placeholder="请输入奖品名称"
|
||||
clearable
|
||||
:maxlength="5"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="奖品类型:" prop="type">
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择奖品类型"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in priceType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="会员卡:"
|
||||
prop="vipCardId"
|
||||
v-if="params.type == 5"
|
||||
>
|
||||
<el-select
|
||||
v-model="params.vipCardId"
|
||||
size="small"
|
||||
placeholder="请选择会员卡"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in vipCardIds"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="折扣率/活跃值:"
|
||||
prop="value"
|
||||
v-if="params.type == 1 || params.type == 4 || params.type == 6"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="params.value"
|
||||
size="small"
|
||||
placeholder="请输入奖品折扣率/活跃值"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="奖品价值:" prop="price">
|
||||
<el-input
|
||||
v-model.number="params.price"
|
||||
size="small"
|
||||
placeholder="请输入奖品价值"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品总数:" prop="count">
|
||||
<el-input
|
||||
v-model.number="params.count"
|
||||
size="small"
|
||||
placeholder="请输入奖品总数"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="中奖权重:" prop="weights">
|
||||
<el-input
|
||||
v-model.number="params.weights"
|
||||
size="small"
|
||||
type="number"
|
||||
placeholder="请输入权重"
|
||||
clearable
|
||||
:min="0"
|
||||
:max="100"
|
||||
:controls="false"
|
||||
oninput="if(value>100)value=100;if(value<0)value=0;value=((value.replace(/[^0-9.]/g,'')).replace(/([0-9]+\.[0-9]{2})[0-9]*/,'$1'))"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品等级:" prop="level">
|
||||
<el-select
|
||||
v-model="params.level"
|
||||
size="small"
|
||||
placeholder="请选择奖品类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in levels"
|
||||
: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="validityTime">
|
||||
<el-input
|
||||
v-model.number="params.validityTime"
|
||||
type="number"
|
||||
size="small"
|
||||
placeholder="请输入奖品有效期(天)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="奖品排序:" prop="sort">
|
||||
<el-input
|
||||
v-model.number="params.sort"
|
||||
size="small"
|
||||
placeholder="请输入奖品排序"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-flex-box">
|
||||
<el-form-item label="是否激活:" v-if="this.type != 'add'">
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择是否激活"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in enables"
|
||||
: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="desc">
|
||||
<el-input
|
||||
style="width: 300px;"
|
||||
v-model="params.desc"
|
||||
size="small"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
placeholder="请输入奖品描述"
|
||||
:maxlength="9"
|
||||
show-word-limit
|
||||
clearable
|
||||
></el-input>
|
||||
</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 {
|
||||
props: {
|
||||
vipCardIds: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
actIDs: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 弹窗标题
|
||||
title: "",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 内层弹窗表格加载状态
|
||||
loading: false,
|
||||
// 编辑id
|
||||
id: "",
|
||||
// 当前是编辑还是新增
|
||||
type: "",
|
||||
//图集上传
|
||||
actionPics: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
// 新增兑换码请求参数
|
||||
params: {
|
||||
activityId: "",
|
||||
vipCardId: "",
|
||||
name: "",
|
||||
type: "",
|
||||
value: "",
|
||||
price: "",
|
||||
count: "",
|
||||
weights: "",
|
||||
image: "",
|
||||
level: "",
|
||||
sort: "",
|
||||
validityTime: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
},
|
||||
levels: [
|
||||
{ label: "初级(免费可获取)", value: 1 },
|
||||
{ label: "中级(放分可获取)", value: 2 },
|
||||
{ label: "高级(奖池流水达到一定条件可获取)", value: 3 },
|
||||
],
|
||||
priceType: [
|
||||
{ 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: "AI脱衣", value: 9 },
|
||||
{ label: "AI换脸", value: 10 },
|
||||
{ label: "观影券", value: 11 },
|
||||
],
|
||||
// 是否激活
|
||||
enables: [
|
||||
{ label: "未激活", value: false },
|
||||
{ label: "激活", value: true },
|
||||
],
|
||||
// 验证规则
|
||||
rules: {
|
||||
// activityId: [
|
||||
// { required: true, message: "请选择活动", trigger: "change" },
|
||||
// ],
|
||||
vipCardId: [
|
||||
{ required: true, message: "请选择会员卡", trigger: "change" },
|
||||
],
|
||||
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
|
||||
type: [
|
||||
{ required: true, message: "请选择奖品类型", trigger: "change" },
|
||||
],
|
||||
price: [{ required: true, message: "请输入奖品价值", trigger: "blur" }],
|
||||
value: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入奖品折扣率/活跃值",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
count: [{ required: true, message: "请输入奖品数量", trigger: "blur" }],
|
||||
weights: [
|
||||
{ required: true, message: "请输入中奖权重", trigger: "blur" },
|
||||
],
|
||||
level: [
|
||||
{ required: true, message: "请选择奖品等级", trigger: "change" },
|
||||
],
|
||||
// validityTime: [
|
||||
// { required: true, message: "请输入奖品有效期(天)", trigger: "blur" },
|
||||
// ],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDataSelector() {
|
||||
const val = this.params.channel;
|
||||
this.$refs.channelSelector.open(val);
|
||||
},
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "add") {
|
||||
this.addCode();
|
||||
} else if (this.type === "edit") {
|
||||
this.editCode();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 新增
|
||||
* @param {object} [params] - 新增接口需要的参数
|
||||
* @function [addActivityPrize] - api新增奖品
|
||||
*/
|
||||
addCode() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.addWebPrice(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
editCode() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.editWebPrice(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerCodeList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
activityId: "",
|
||||
vipCardId: "",
|
||||
name: "",
|
||||
type: "",
|
||||
value: "",
|
||||
count: "",
|
||||
weights: "",
|
||||
level: "",
|
||||
validityTime: "",
|
||||
image: "",
|
||||
sort: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
};
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
if (type === "add") {
|
||||
this.type = "add";
|
||||
this.title = "新增奖品";
|
||||
} else {
|
||||
this.type = "edit";
|
||||
this.title = "编辑奖品";
|
||||
this.params = Object.assign({}, data);
|
||||
}
|
||||
},
|
||||
// 上传成功
|
||||
successCallback(res) {
|
||||
this.params.image = res.data.coverImg;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.form-flex-box {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
agent-action-box {
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,429 @@
|
||||
<template>
|
||||
<div class="redemption-code-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="params.activityId"
|
||||
size="small"
|
||||
placeholder="请选择活动"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in actIDs"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.type"
|
||||
size="small"
|
||||
placeholder="请选择奖品类型"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in priceType"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请选择是否激活"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in enables"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="redemptionPrizeList('status')"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="prizeAction('add')"
|
||||
>+新增活动奖品</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
max-height="600"
|
||||
>
|
||||
<!-- <el-table-column prop="id" label="ID" align="center" min-width="220" fixed show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.id || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="image"
|
||||
min-width="160"
|
||||
label="奖品图片"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'80px'"
|
||||
:height="'80px'"
|
||||
:src="imgUrl + scope.row.image"
|
||||
v-if="scope.row.image"
|
||||
>
|
||||
</img-load>
|
||||
<div v-else>暂无图片</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="activityId"
|
||||
min-width="160"
|
||||
label="活动"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterAct(scope.row.activityId) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="奖品名称"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="desc"
|
||||
label="奖品描述"
|
||||
align="center"
|
||||
min-width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.desc || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="奖品类型"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterPriceType(scope.row.type) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="level"
|
||||
label="奖品等级"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterLevel(scope.row.level) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
label="奖品价值"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.price || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="count"
|
||||
label="奖品数量"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.count || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
label="折扣率/活跃值"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="是否激活"
|
||||
align="center"
|
||||
min-width="120"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">已激活</el-tag>
|
||||
<el-tag type="error" v-else>未激活</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="weights"
|
||||
label="中奖权重"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.weights }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="validityTime"
|
||||
label="奖品有效期(天)"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.validityTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sort"
|
||||
label="奖品排序"
|
||||
align="center"
|
||||
min-width="200"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="vipCardId"
|
||||
min-width="160"
|
||||
label="会员卡"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ formatterVip(scope.row.vipCardId) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.createTimt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="更新时间"
|
||||
align="center"
|
||||
min-width="220"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.updateTime | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operating"
|
||||
label="操作"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="prizeAction('edit', scope.row)"
|
||||
></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"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
:total="total"
|
||||
v-if="total > 10"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<prize-action
|
||||
ref="prizeAction"
|
||||
:actIDs="actIDs"
|
||||
:vipCardIds="vipCardIds"
|
||||
@handlerCodeList="handlerCodeList"
|
||||
></prize-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import prizeAction from "./components/prizeAction";
|
||||
import { paramsFilter } from "@/utils/global";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
components: {
|
||||
prizeAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: "",
|
||||
// 奖品列表参数
|
||||
params: {
|
||||
activityId: "",
|
||||
type: "",
|
||||
status: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
actIDs: [],
|
||||
vipCardIds: [],
|
||||
enables: [
|
||||
{ label: "未激活", value: false },
|
||||
{ label: "激活", value: true },
|
||||
],
|
||||
levels: [
|
||||
{ label: "初级", value: 1 },
|
||||
{ label: "中级", value: 2 },
|
||||
{ label: "高级", value: 3 },
|
||||
],
|
||||
priceType: [
|
||||
{ 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: "AI脱衣", value: 9 },
|
||||
{ label: "AI换脸", value: 10 },
|
||||
{ label: "观影券", value: 11 },
|
||||
],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
// 是否激活
|
||||
isActive(val) {
|
||||
switch (val) {
|
||||
case false:
|
||||
return "未激活";
|
||||
case true:
|
||||
return "激活";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.redemptionPrizeList();
|
||||
this.getActiveityId();
|
||||
this.getVipcardId();
|
||||
},
|
||||
methods: {
|
||||
// 获取活动ID
|
||||
getActiveityId() {
|
||||
API.getActiveityId(this.params).then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.actIDs = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error("获取活动失败");
|
||||
});
|
||||
},
|
||||
// 获取VIP ID
|
||||
getVipcardId() {
|
||||
API.getVipcardId(this.params).then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.vipCardIds = res.data;
|
||||
return;
|
||||
}
|
||||
this.$message.error("获取会员卡失败");
|
||||
});
|
||||
},
|
||||
// 请求兑换码列表
|
||||
redemptionPrizeList() {
|
||||
this.loading = true;
|
||||
let formData = paramsFilter(this.params);
|
||||
API.getWebPrice(formData)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
this.$message.error(res.tip || "获取数据失败");
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
formatterLevel(level) {
|
||||
return this.levels.filter((item) => item.value == level).length > 0
|
||||
? this.levels.filter((item) => item.value == level)[0].label
|
||||
: "未知";
|
||||
},
|
||||
formatterPriceType(type) {
|
||||
return this.priceType.filter((item) => item.value == type).length > 0
|
||||
? this.priceType.filter((item) => item.value == type)[0].label
|
||||
: "未知";
|
||||
},
|
||||
formatterAct(id) {
|
||||
return this.actIDs.filter((item) => item.value == id).length > 0
|
||||
? this.actIDs.filter((item) => item.value == id)[0].label
|
||||
: "未知";
|
||||
},
|
||||
formatterVip(id) {
|
||||
return this.vipCardIds.filter((item) => item.value == id).length > 0
|
||||
? this.vipCardIds.filter((item) => item.value == id)[0].label
|
||||
: "未知";
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.redemptionPrizeList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.redemptionPrizeList();
|
||||
},
|
||||
// 编辑活动成功回掉
|
||||
handlerCodeList() {
|
||||
this.redemptionPrizeList();
|
||||
},
|
||||
// 新增、删除tags
|
||||
prizeAction(type, data) {
|
||||
this.$refs.prizeAction.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="tender-activity-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input placeholder="请输入用户Id" v-model.number="params.userId" clearable size="small" @change="winRecordPage()" class="param-input"></el-input>
|
||||
<el-input placeholder="请输入用户昵称" v-model="params.userName" clearable size="small" @change="winRecordPage('status')" class="param-input"></el-input>
|
||||
<el-input placeholder="请输入模特id" v-model.number="params.modelId" clearable size="small" @change="winRecordPage('status')" class="param-input"></el-input>
|
||||
<el-button type="primary" size="small" @click="winRecordPage('status')">搜索</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="userId" label="用户id" align="center" min-width="220" fixed show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.userId || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" min-width="160" label="用户昵称" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.userName ||'未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="modelId" label="模特id" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.modelId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" label="期号" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span> {{scope.row.date | changeMd}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="operating" label="操作" align="center" fixed="right" width="150">
|
||||
<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="[5,10,15,20]" :current-page="params.page" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" background @size-change="changeSize" :total="total" v-if="total > 10" @current-change="changeCurrent"></el-pagination>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: '',
|
||||
params: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.winRecordPage()
|
||||
},
|
||||
methods: {
|
||||
// 请求获奖记录列表
|
||||
winRecordPage(type) {
|
||||
if (type==='status') {
|
||||
this.params.page = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.winRecordPage(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.data) {
|
||||
this.tableData = res.data.data
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.params.page = 1
|
||||
this.winRecordPage()
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(page) {
|
||||
this.params.page = page
|
||||
this.winRecordPage()
|
||||
},
|
||||
// // 编辑活动成功回掉
|
||||
// handlerCodeList() {
|
||||
// this.winRecordPage()
|
||||
// },
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="edit-active-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="90px">
|
||||
<el-form-item label="标题:" prop="title">
|
||||
<el-input v-model="params.title" size="small" placeholder="请输入活动标题"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="活动描述:" prop="desc">
|
||||
<el-input type="textarea" :rows="3" placeholder="请输入活动描述" v-model="params.desc"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始时间:" prop="startTime">
|
||||
<el-date-picker v-model="params.startTime" type="datetime" :editable="false" placeholder="请输入开始时间" size="small"></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间:" prop="endTime">
|
||||
<el-date-picker v-model="params.endTime" type="datetime" :editable="false" placeholder="请输入结束时间" size="small"></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否开启:" v-if="type == 'edit'">
|
||||
<el-switch v-model="params.status"></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,
|
||||
type: "", //表单类型
|
||||
params: {
|
||||
title: "",
|
||||
desc: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
status: false,
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入活动标题", trigger: "blur" }],
|
||||
desc: [{ required: true, message: "请输入活动描述", trigger: "blur" }],
|
||||
startTime: [
|
||||
{ required: true, message: "请输入开始时间", trigger: "blur" },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: "请输入结束时间", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "edit") {
|
||||
this.editActive();
|
||||
}
|
||||
if (this.type == "add") {
|
||||
this.addContent();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增活动
|
||||
addContent() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.addWebActivity(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerList");
|
||||
} else {
|
||||
this.$message.error(res.msg || "新增失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑活动
|
||||
editActive() {
|
||||
let params = Object.assign({}, this.params);
|
||||
API.editWebActive(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
title: "",
|
||||
desc: "",
|
||||
status: false,
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
};
|
||||
},
|
||||
|
||||
// 打开编辑活动弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑活动";
|
||||
this.params = Object.assign({}, data);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.edit-active-box {
|
||||
.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.el-dialog {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="activityList-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-select v-model="params.status" size="small" clearable placeholder="活动状态" @change="getWebActivity('status')">
|
||||
<el-option v-for="item in isOpen" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="searchActive('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="activeAction('add')">+新增活动</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="id" label="活动ID" align="center" :show-overflow-tooltip="true" min-width="220" fixed></el-table-column>
|
||||
<el-table-column prop="title" label="活动名称" align="center" :show-overflow-tooltip="true" width="220"></el-table-column>
|
||||
<el-table-column prop="desc" label="活动描述" align="center" :show-overflow-tooltip="true" width="300">
|
||||
<template slot-scope="scope">{{ scope.row.desc || "未知" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip class="item" effect="dark" content="请在编辑中修改" placement="top-start">
|
||||
<el-switch v-model="scope.row.status" disabled></el-switch>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="活动开始时间" align="center" :show-overflow-tooltip="true" min-width="200">
|
||||
<template slot-scope="scope">{{ scope.row.startTime | changeDate }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="活动结束时间" align="center" :show-overflow-tooltip="true" min-width="200">
|
||||
<template slot-scope="scope">{{ scope.row.endTime | changeDate }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="operating" label="操作" align="center" width="120" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="activeAction('edit', scope.row)"></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" background @size-change="changeSize" :total="total" @current-change="changeCurrent"></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<active-action ref="activeAction" @handlerList="handlerActiveList"></active-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ActiveAction from "./components/activeAction";
|
||||
import API from "@/api";
|
||||
import { paramsFilter } from "@/utils/global";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
time: "",
|
||||
// 是否开启
|
||||
isOpen: [
|
||||
{
|
||||
label: "开启",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: "关闭",
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
params: {
|
||||
status: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ActiveAction,
|
||||
},
|
||||
created() {
|
||||
this.getWebActivity();
|
||||
},
|
||||
methods: {
|
||||
// 请求活动列表
|
||||
getWebActivity(type) {
|
||||
if (type === "status") {
|
||||
this.formData.pageNumber = 1;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
let formData = paramsFilter(this.params);
|
||||
API.getWebActivity(formData)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 搜索列表
|
||||
searchActive() {
|
||||
this.getWebActivity();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.formparamsData.pageNumber = 1;
|
||||
this.getWebActivity();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getWebActivity();
|
||||
},
|
||||
// 编辑活动成功回掉
|
||||
handlerActiveList() {
|
||||
this.getWebActivity();
|
||||
},
|
||||
// 新增、删除tags
|
||||
activeAction(type, data) {
|
||||
this.$refs.activeAction.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<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="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="120" prop="cover">
|
||||
<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="actorName"
|
||||
label="名称"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.actorName || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="desc" label="名称" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.desc || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sort || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="女优专属用户" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.exclusiveUserID || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isRecommand"
|
||||
label="是否推荐"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.isRecommand">推荐</el-tag>
|
||||
<el-tag type="danger" 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
|
||||
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.pageNum"
|
||||
: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="500px"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
|
||||
<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="actorName">
|
||||
<el-input v-model="form.actorName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="说明" prop="desc">
|
||||
<el-input v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="女优专属用户" prop="exclusiveUserID">
|
||||
<el-input v-model.number="form.exclusiveUserID" placeholder="请输入女优专属用户ID"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model.number="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否推荐:">
|
||||
<el-switch v-model="form.isRecommand"></el-switch>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否推荐">
|
||||
<el-select v-model="form.isRecommand" placeholder="请选择是否推荐">
|
||||
<el-option
|
||||
v-for="item in recoms"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @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: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
// 图片上传地址
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
recoms: [
|
||||
{ label: "推荐", value: 1 },
|
||||
{ label: "不推荐", value: 0 },
|
||||
],
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
link_url: [
|
||||
{ required: true, message: "请输入链接地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
actorID: undefined,
|
||||
actorName: "",
|
||||
desc: "",
|
||||
exclusiveUserID: "",
|
||||
isRecommand: false,
|
||||
sort: undefined,
|
||||
},
|
||||
topicId: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNum = 1;
|
||||
}
|
||||
API.queryActressList(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) {
|
||||
console.log(param);
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.actorID = param.id;
|
||||
this.form.actorName = param.actorName;
|
||||
this.form.img = param.img;
|
||||
this.form.desc = param.desc;
|
||||
this.form.exclusiveUserID = param.exclusiveUserID;
|
||||
this.form.isRecommand = param.isRecommand;
|
||||
this.form.sort = param.sort ? param.sort : undefined;
|
||||
}
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addActress(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "新增失败",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "服务器异常",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改方法
|
||||
edit() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.editActress(this.form)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "编辑成功",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "编辑失败",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: "服务器异常",
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.actorID = "";
|
||||
this.form.actorName = "";
|
||||
this.form.img = "";
|
||||
this.form.desc = "";
|
||||
this.form.exclusiveUserID = "";
|
||||
this.form.isRecommand = "";
|
||||
this.form.sort = undefined;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNum) {
|
||||
this.params.pageNum = pageNum;
|
||||
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-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div class="edit-video-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="100px">
|
||||
<el-form-item label="账号:" prop="name">
|
||||
<el-input
|
||||
v-model.trim="params.name"
|
||||
:disabled="title !== '新增管理员'"
|
||||
size="small"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名:" prop="nickname">
|
||||
<el-input v-model.trim="params.nickname" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="passWord">
|
||||
<el-input v-model.trim="params.passWord" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色:" prop="privilegeID">
|
||||
<el-select v-model="params.privilegeID" size="small">
|
||||
<el-option
|
||||
v-for="item in privilegeIDList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱:" prop="email">
|
||||
<el-input v-model="params.email" type="email" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否封禁:" prop="hasLocked">
|
||||
<el-switch
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
v-model="params.hasLocked"
|
||||
></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 { validatorHanzi } from '@/utils/validator'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
privilegeIDList: [],
|
||||
params: {
|
||||
name: '',
|
||||
passWord: '',
|
||||
nickname: '',
|
||||
email: '',
|
||||
privilegeID: '',
|
||||
hasLocked: ''
|
||||
},
|
||||
rules: {
|
||||
nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
passWord: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ validator: validatorHanzi, trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
|
||||
],
|
||||
privilegeID: [{ required: true, message: '请选择角色', trigger: 'blur' },],
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created() {
|
||||
this.getRoleList()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 获取角色/权限列g
|
||||
getRoleList() {
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.getAuthorList(params)
|
||||
},
|
||||
getAuthorList(params) {
|
||||
API.getAuthorList(params).then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.privilegeIDList = this.privilegeIDList.concat(res.data.list.map(item => {
|
||||
return {
|
||||
label: item.role,
|
||||
value: item.id
|
||||
}
|
||||
}))
|
||||
if (params.pageNumber * params.pageSize < res.data.total) {
|
||||
params.pageNumber += 1
|
||||
this.getAuthorList(params)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '新增管理员') {
|
||||
this.addAdm()
|
||||
} else {
|
||||
this.editAdm()
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
addAdm() {
|
||||
let params = Object.assign(this.params, { id: this.id });
|
||||
API.addAdm(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerAdmList')
|
||||
} else if (res.code === 9100) {
|
||||
this.$message.error('新增失败,该管理员已存在');
|
||||
} else {
|
||||
this.$message.error('新增失败,请重试');
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
editAdm() {
|
||||
// 密码安全性校验
|
||||
if (this.checkPass(this.params.passWord) < 3) {
|
||||
this.$message.error('您的密码复杂度太低（密码中必须包含字母、数字、特殊字符），请及时修改密码！')
|
||||
this.flag = false
|
||||
return
|
||||
}
|
||||
let params = Object.assign(this.params, { adminID: this.id });
|
||||
API.updateAdm(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerAdmList')
|
||||
} else {
|
||||
this.$message.error('编辑失败,请重试');
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
name: '',
|
||||
passWord: '',
|
||||
nickname: '',
|
||||
email: '',
|
||||
privilegeID: '',
|
||||
hasLocked: ''
|
||||
}
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑管理员'
|
||||
this.params.name = data.name
|
||||
this.params.nickname = data.nickname
|
||||
this.params.email = data.email
|
||||
this.params.privilegeID = data.privilegeID
|
||||
// this.params.passWord = data.password
|
||||
this.id = data.id,
|
||||
this.params.hasLocked = data.hasLocked
|
||||
} else {
|
||||
this.title = '新增管理员'
|
||||
}
|
||||
},
|
||||
checkPass(s){
|
||||
if(s.length < 8){
|
||||
return 0;
|
||||
}
|
||||
var ls = 0;
|
||||
if(s.match(/([a-z])+/)){
|
||||
ls++;
|
||||
}
|
||||
if(s.match(/([0-9])+/)){
|
||||
ls++;
|
||||
}
|
||||
if(s.match(/([A-Z])+/)){
|
||||
ls++;
|
||||
}
|
||||
if(s.match(/[^a-zA-Z0-9]+/)){
|
||||
ls++;
|
||||
}
|
||||
return ls
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.edit-video-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>
|
||||
Executable
+226
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="administrators-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入管理员账号"
|
||||
clearable
|
||||
v-model="admParam.name"
|
||||
size="small"
|
||||
@keyup.enter.native="getAdmList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-button type="primary" size="small" @click="getAdmList('status')"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="adminOperation('add')"
|
||||
>+新增管理员</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"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="管理员ID"
|
||||
align="center"
|
||||
min-width="240"
|
||||
fixed
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nickname"
|
||||
label="管理员名"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.nickname || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="管理员账号"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.email || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="hasLocked"
|
||||
label="是否封禁"
|
||||
align="center"
|
||||
min-width="120"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span :style="!scope.row.hasLocked ? 'color:green' : 'color:red'">{{
|
||||
scope.row.hasLocked ? '已封禁' : '未封禁'
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="role" label="角色" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.role || '未知' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="200"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
class="el-icon-edit"
|
||||
size="mini"
|
||||
@click="adminOperation('edit', scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
class="el-icon-delete"
|
||||
size="mini"
|
||||
@click="removeAdmin(scope.row.id)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="admParam.pageNumber"
|
||||
:page-size="admParam.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑弹框-->
|
||||
<add-admin ref="addAdmin" @handlerAdmList="getAdmList"></add-admin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddAdmin from "./components/addAdmin"
|
||||
import API from '@/api'
|
||||
import { sortEscape } from '@/utils/global'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
// 系统管理列表请求参数
|
||||
admParam: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AddAdmin
|
||||
},
|
||||
created() {
|
||||
// this.$store.dispatch('setRouterTag', { router: '/administrators', routerName: "系统管理员" })
|
||||
this.getAdmList();
|
||||
},
|
||||
methods: {
|
||||
handleStatus(value) {
|
||||
if (!value) return false
|
||||
|
||||
},
|
||||
// 请求管理员列表
|
||||
getAdmList(type) {
|
||||
this.loading = true;
|
||||
if (type === 'status') {
|
||||
this.admParam.pageNumber = 1
|
||||
}
|
||||
API.getAdmList(this.admParam).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.admParam.value = sortEscape(column.order)
|
||||
this.admParam.key = column.prop;
|
||||
this.getAdmList()
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.admParam.pageSize = size
|
||||
this.admParam.pageNumber = 1
|
||||
this.getAdmList()
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.admParam.pageNumber = pageNumber
|
||||
this.getAdmList()
|
||||
},
|
||||
// 删除管理员
|
||||
removeAdmin(admID) {
|
||||
this.$confirm('您确定要删除当前选择管理员吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let params = {
|
||||
adminID: admID
|
||||
}
|
||||
API.delAdm(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除管理员成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getAdmList('status')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 新增、编辑操作
|
||||
adminOperation(type, data) {
|
||||
this.$refs.addAdmin.open(type, data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="edit-log-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="80px" >
|
||||
<el-form-item label="备注:" prop="remarks">
|
||||
<el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="params.remarks"> </el-input>
|
||||
</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 {
|
||||
flag: false,
|
||||
title: '',
|
||||
id: '',
|
||||
dialogVisible: false,
|
||||
params: {
|
||||
remarks: '',
|
||||
},
|
||||
// 备注验证
|
||||
rules: {
|
||||
remarks: [
|
||||
{ required: true, message: '请输入备注', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$refs['form'].resetFields()
|
||||
// this.params = {
|
||||
// remarks: ''
|
||||
// }
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '编辑管理员操作日志') {
|
||||
this.editLog()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
this.$refs['form'].resetFields();
|
||||
})
|
||||
},
|
||||
// 编辑日志
|
||||
editLog() {
|
||||
let params = {
|
||||
id: this.id,
|
||||
remarks: this.params.remarks
|
||||
}
|
||||
API.editAdminLog(params).then(res => {
|
||||
if(res.code === 200) {
|
||||
this.$message({
|
||||
message: '管理员操作日志修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerCtrLog')
|
||||
}else {
|
||||
this.$message.error(' 管理员操作日志修改失败！');
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
open(type,data) {
|
||||
this.dialogVisible = true
|
||||
if(type === 'edit') {
|
||||
this.title = '编辑管理员操作日志'
|
||||
this.id = data.id
|
||||
this.params.remarks = data.remarks
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="edit-log-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="80px" >
|
||||
<el-form-item label="备注:" prop="remarks">
|
||||
<el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="params.remarks"> </el-input>
|
||||
</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 {
|
||||
flag: false,
|
||||
title: '',
|
||||
id: '',
|
||||
dialogVisible: false,
|
||||
params: {
|
||||
remarks: '',
|
||||
},
|
||||
// 备注验证
|
||||
rules: {
|
||||
remarks: [
|
||||
{ required: true, message: '请输入备注', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$refs['form'].resetFields()
|
||||
// this.params = {
|
||||
// remarks: ''
|
||||
// }
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '编辑管理员操作日志') {
|
||||
this.editLog()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
this.$refs['form'].resetFields();
|
||||
})
|
||||
},
|
||||
// 编辑日志
|
||||
editLog() {
|
||||
let params = {
|
||||
id: this.id,
|
||||
remarks: this.params.remarks
|
||||
}
|
||||
API.editAdminLog(params).then(res => {
|
||||
if(res.code === 200) {
|
||||
this.$message({
|
||||
message: '管理员操作日志修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('handlerCtrLog')
|
||||
}else {
|
||||
this.$message.error(' 管理员操作日志修改失败！');
|
||||
}
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
open(type,data) {
|
||||
this.dialogVisible = true
|
||||
if(type === 'edit') {
|
||||
this.title = '编辑管理员操作日志'
|
||||
this.id = data.id
|
||||
this.params.remarks = data.remarks
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Executable
+227
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="administrators-box">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入管理员账号"
|
||||
clearable
|
||||
v-model="param.manager"
|
||||
size="small"
|
||||
@keyup.enter.native="getAdmList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入操作位置"
|
||||
clearable
|
||||
v-model="param.position"
|
||||
size="small"
|
||||
@keyup.enter.native="getAdmList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入操作内容"
|
||||
clearable
|
||||
v-model="param.content"
|
||||
size="small"
|
||||
@keyup.enter.native="getAdmList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入uri"
|
||||
clearable
|
||||
v-model="param.uri"
|
||||
size="small"
|
||||
@keyup.enter.native="getAdmList('status')"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getCtrLog('status')"
|
||||
>搜索</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="manager"
|
||||
label="管理员账号"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.manager || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="操作位置"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.position || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operator"
|
||||
label="操作动作"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.operator || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="操作内容"
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.content || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uri" label="操作URI" align="center" width="260">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.uri || "未知" }}</span>
|
||||
</template>
|
||||
</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="remarks" label="备注" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remarks || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
class="el-icon-edit"
|
||||
size="mini"
|
||||
@click="adminOperation('edit', scope.row)"
|
||||
></el-button>
|
||||
<!-- <el-button type="danger" class="el-icon-delete" size="mini" @click="removeAdmin(scope.row.id)"></el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 编辑弹窗 -->
|
||||
<edit-log ref="editLog" @handlerCtrLog="getCtrLog"></edit-log>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/api";
|
||||
import { changeTime } from "@/utils/global";
|
||||
import EditLog from "./components/editLog";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
time: "",
|
||||
param: {
|
||||
manager: "",
|
||||
content: "",
|
||||
position: "",
|
||||
uri: "",
|
||||
start: "",
|
||||
end: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
EditLog,
|
||||
},
|
||||
created() {
|
||||
this.getCtrLog();
|
||||
},
|
||||
methods: {
|
||||
// 请求操作日志
|
||||
getCtrLog(type) {
|
||||
if (type) {
|
||||
this.param.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
api
|
||||
.getAdminLog(this.param)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.infos;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.$message.error(res.tip);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 打开编辑弹窗
|
||||
adminOperation(type, data) {
|
||||
this.$refs.editLog.open(type, data);
|
||||
},
|
||||
// 当前页发生变化
|
||||
changeCurrent(number) {
|
||||
this.param.pageNumber = number;
|
||||
this.getCtrLog();
|
||||
},
|
||||
// 当前页条数发生变化
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getCtrLog();
|
||||
},
|
||||
// 时间变化
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.param.start = changeTime(time[0]);
|
||||
this.param.end = changeTime(time[1]);
|
||||
} else {
|
||||
this.param.start = "";
|
||||
this.param.end = "";
|
||||
}
|
||||
this.getCtrLog();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,542 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<el-dialog
|
||||
:title="title1"
|
||||
:visible.sync="dialogVisible"
|
||||
width="550px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="90px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<div class="item-box">
|
||||
<div class="item1">
|
||||
<el-form-item label="封面图:" prop="cover">
|
||||
<base-upload
|
||||
class="upload"
|
||||
:cover="params.cover"
|
||||
:action="action"
|
||||
:wSize="wSize"
|
||||
:hSize="hSize"
|
||||
:width="'138.5px'"
|
||||
:height="height"
|
||||
@successCallback="handleAvatarSuccess"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="item2" style="width:300px">
|
||||
<el-form-item label="广告类型:" prop="adsType">
|
||||
<el-select
|
||||
v-model.number="params.adsType"
|
||||
size="small"
|
||||
placeholder="广告类型"
|
||||
disabled
|
||||
>
|
||||
<el-option
|
||||
v-for="item in adsTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题:" prop="title">
|
||||
<el-input
|
||||
v-model="params.title"
|
||||
size="small"
|
||||
placeholder="标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置:" prop="position">
|
||||
<el-select
|
||||
v-model.number="params.position"
|
||||
size="small"
|
||||
placeholder="位置"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positionList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转方式:" prop="hrefType">
|
||||
<el-select
|
||||
v-model.number="params.hrefType"
|
||||
size="small"
|
||||
placeholder="跳转方式"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in hrefTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="protocol" v-if="params.hrefType !== 2">
|
||||
<span>提示:地址协议请使用</span>
|
||||
<span style="color:red">{{
|
||||
(this.protocolType =
|
||||
params.hrefType === 0
|
||||
? "http或https"
|
||||
: "yinselink或yinselinks")
|
||||
}}</span>
|
||||
</div>
|
||||
<el-form-item label="链接地址:" prop="href">
|
||||
<el-select
|
||||
v-show="
|
||||
params.hrefType === 2 &&
|
||||
params.position !== 1 &&
|
||||
params.position !== 2
|
||||
"
|
||||
v-model.number="params.href"
|
||||
size="small"
|
||||
placeholder="请选择跳转地址"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in hrefList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-show="
|
||||
params.hrefType === 2 &&
|
||||
(params.position === 1 || params.position === 2)
|
||||
"
|
||||
v-model.number="params.href"
|
||||
size="small"
|
||||
placeholder="请选择跳转地址"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in hrefListTwo"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-show="params.hrefType !== 2"
|
||||
v-model="params.href"
|
||||
size="small"
|
||||
placeholder="请输入链接地址"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号:" prop="sortCode">
|
||||
<el-input
|
||||
v-model.number="params.sortCode"
|
||||
size="small"
|
||||
placeholder="排序号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input
|
||||
v-model="params.remark"
|
||||
size="small"
|
||||
placeholder="备注"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活状态:" prop="href">
|
||||
<el-switch v-model="params.active"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间:">
|
||||
<el-date-picker
|
||||
v-model="params.start"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
:clearable="clearable"
|
||||
size="small"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间:">
|
||||
<el-date-picker
|
||||
v-model="params.end"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
:clearable="clearable"
|
||||
size="small"
|
||||
width="300px"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" style="text-align:center">
|
||||
<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";
|
||||
import moment from "moment";
|
||||
import { changeDate } from "@/utils/global";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
clearable: false,
|
||||
protocolType: "", //协议类型
|
||||
labelPosition: "left",
|
||||
dialogVisible: false,
|
||||
title1: "",
|
||||
flag: false,
|
||||
type: "",
|
||||
id: "",
|
||||
// 图片上传地址
|
||||
action: baseConfig.baseServerUrl + "/agent/upload/static",
|
||||
// 新增、编辑表单数据
|
||||
params: {
|
||||
id: "", //广告id
|
||||
reviewID: "", //审核id
|
||||
districtCode: "", //商区码
|
||||
adsType: 0, //广告类型
|
||||
title: "", //广告标题
|
||||
cover: "", //广告封面图
|
||||
hrefType: 0, //广告跳转类型
|
||||
href: "", //广告跳转地址
|
||||
position: 0, //广告位置
|
||||
sortCode: 0, //排序号
|
||||
click: 0, //点击次数
|
||||
remark: "", //备注
|
||||
active: true, //激活状态 true:激活
|
||||
createdAt: "", //创建时间
|
||||
start: "",
|
||||
end: "",
|
||||
},
|
||||
hrefTypeList: [
|
||||
{ label: "外部浏览器跳转", value: 0 },
|
||||
{ label: "内部浏览器跳转", value: 1 },
|
||||
{ label: "APP内部跳转", value: 2 },
|
||||
],
|
||||
hrefList: [
|
||||
{ label: "个性名片(推广界面)", value: "yinseinner://personal_card/" },
|
||||
{ label: "VIP界面", value: "yinseinner://vip_page/" },
|
||||
{ label: "钱包界面", value: "yinseinner://wallet_page/" },
|
||||
{ label: "AI科技", value: "yinseinner://aiCenter/" },
|
||||
{ label: "全民代理", value: "yinseinner://universal_agent/" },
|
||||
],
|
||||
hrefListTwo: [
|
||||
{ label: "个性名片(推广界面)", value: "yinseinner://personal_card/" },
|
||||
{ label: "VIP界面", value: "yinseinner://vip_page/" },
|
||||
{ label: "钱包界面", value: "yinseinner://wallet_page/" },
|
||||
{ label: "AI科技", value: "yinseinner://aiCenter/" },
|
||||
{ label: "全民代理", value: "yinseinner://universal_agent/" },
|
||||
{ label: "撩吧", value: "yinseinner://page_home_post/" },
|
||||
],
|
||||
adsTypeList: [
|
||||
{ label: "系统广告", value: 0 },
|
||||
{ label: "商区广告", value: 1 },
|
||||
],
|
||||
positionList: [
|
||||
{ label: "启动页广告", value: 0 },
|
||||
{ label: "首页-推荐小广告", value: 1 },
|
||||
{ label: "首页-弹窗公告", value: 2 },
|
||||
{ label: "消息-界面广告", value: 3 },
|
||||
{ label: "撩吧-轮播广告", value: 4 },
|
||||
{ label: "钱包-轮播广告", value: 5 },
|
||||
{ label: "搜索-轮播广告", value: 6 },
|
||||
{ label: "AV解说-轮播广告", value: 7 },
|
||||
{ label: "签到-轮播广告", value: 8 },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
id: [{ required: true, message: "请输入ID", trigger: "blur" }],
|
||||
discCode: [
|
||||
{ required: true, message: "请输入商区码", trigger: "blur" },
|
||||
],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
|
||||
cover: [{ required: true, message: "请输入封面图", trigger: "blur" }],
|
||||
hrefType: [
|
||||
{ required: true, message: "请选择链接类型", trigger: "blur" },
|
||||
// { validator: this.urlhrefType, trigger: "change" }
|
||||
],
|
||||
href: [
|
||||
{ message: "请输入正确的Url", trigger: "blur" },
|
||||
{ validator: this.urlSchemes, trigger: "blur" },
|
||||
],
|
||||
position: [{ required: true, message: "请选择位置", trigger: "blur" }],
|
||||
sortCode: [
|
||||
{ required: true, message: "请输入排序号", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
discCode() {
|
||||
const discCode = this.$store.state.loginModule.userInfo.code;
|
||||
return discCode.toString();
|
||||
},
|
||||
wSize() {
|
||||
const wSize =
|
||||
this.params.position === 0 ||
|
||||
this.params.position === 3 ||
|
||||
this.params.position === 4 ||
|
||||
this.params.position === 5
|
||||
? "720"
|
||||
: this.params.position === 1
|
||||
? "560"
|
||||
: "656";
|
||||
return wSize.toString();
|
||||
},
|
||||
hSize() {
|
||||
const wSize =
|
||||
this.params.position === 0
|
||||
? "1560"
|
||||
: this.params.position === 1
|
||||
? "620"
|
||||
: this.params.position === 2
|
||||
? "1300"
|
||||
: this.params.position === 4
|
||||
? "500"
|
||||
: this.params.position === 3
|
||||
? "260"
|
||||
: this.params.position === 7
|
||||
? "500"
|
||||
: "120";
|
||||
return wSize.toString();
|
||||
},
|
||||
height() {
|
||||
const wSize =
|
||||
this.params.position === 0
|
||||
? "300px"
|
||||
: this.params.position === 1
|
||||
? "153.5px"
|
||||
: this.params.position === 2
|
||||
? "274.5px"
|
||||
: this.params.position === 4
|
||||
? "96.2px"
|
||||
: this.params.position === 3
|
||||
? "50px"
|
||||
: this.params.position === 7
|
||||
? "96.2px"
|
||||
: "23.1px";
|
||||
return wSize.toString();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
this.type === "edit" ? this.editAds() : this.addAds();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
changeTime(string) {
|
||||
// 时间字符传 2019/10/01T12:00:00+08:00(后面时区固定为+08:00)
|
||||
let time = moment(string).format();
|
||||
let newTime = time.slice(0, 19) + "+08:00";
|
||||
return newTime;
|
||||
},
|
||||
// 添加标签
|
||||
addAds() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
href: this.params.href ? this.params.href : "ZERO_VALUE",
|
||||
start: this.changeTime(this.params.start),
|
||||
end: this.changeTime(this.params.end),
|
||||
});
|
||||
API.addAds(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else if (res.code === 9200) {
|
||||
this.$message.error("新增版本号低于当前最新版本");
|
||||
} else {
|
||||
this.$message.error(res.tip ? res.tip : "添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑标签
|
||||
editAds() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
href: this.params.href ? this.params.href : "ZERO_VALUE",
|
||||
start: this.changeTime(this.params.start),
|
||||
end: this.changeTime(this.params.end),
|
||||
});
|
||||
API.editAds(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else {
|
||||
this.$message.error(res.tip ? res.tip : "编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.cover = res.data.coverImg;
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.type === "add" ? this.$refs.form.resetFields() : "";
|
||||
this.params = {
|
||||
id: "", //广告id
|
||||
reviewID: "", //审核id
|
||||
districtCode: "", //商区码
|
||||
adsType: 0, //广告类型
|
||||
title: "", //广告标题
|
||||
cover: "", //广告封面图
|
||||
hrefType: 0, //广告跳转类型
|
||||
href: "", //广告跳转地址
|
||||
position: 0, //广告位置
|
||||
sortCode: 0, //排序号
|
||||
click: 0, //点击次数
|
||||
remark: "", //备注
|
||||
active: false, //激活状态 true:激活
|
||||
createdAt: "", //创建时间
|
||||
start: "",
|
||||
end: "",
|
||||
};
|
||||
this.$emit("handlerAgentList");
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
if (type === "edit") {
|
||||
this.title1 = "编辑广告";
|
||||
{
|
||||
this.params = data;
|
||||
}
|
||||
this.params.start = changeDate(data.start);
|
||||
this.params.end = changeDate(data.end);
|
||||
} else {
|
||||
this.title1 = "新增广告";
|
||||
}
|
||||
},
|
||||
//url地址验证
|
||||
urlSchemes(rule, value, callback) {
|
||||
let reg;
|
||||
switch (this.params.hrefType) {
|
||||
case 0:
|
||||
reg = /(http|https):\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
case 1:
|
||||
reg = /(yinselink|yinselinks):\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
case 2:
|
||||
reg = /yinseinner:\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
}
|
||||
if (reg.test(value) || !value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入有效地址"));
|
||||
}
|
||||
},
|
||||
urlhrefType(rule, value, callback) {
|
||||
let err = undefined;
|
||||
let reg;
|
||||
if (this.params.href !== "") {
|
||||
switch (value) {
|
||||
case 0:
|
||||
reg = /(http|https):\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
case 1:
|
||||
reg = /(yinselink|yinselinks):\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
case 2:
|
||||
reg = /yinseinner:\/\/([\w.]+\/?)\S*/gi;
|
||||
break;
|
||||
}
|
||||
if (!reg.test(this.params.href)) {
|
||||
switch (value) {
|
||||
case 0:
|
||||
err = new Error("请使用 http或https 协议");
|
||||
break;
|
||||
case 1:
|
||||
err = new Error("请使用 yinselink或yinselinks 协议");
|
||||
break;
|
||||
case 2:
|
||||
err = new Error("请选择跳转链接");
|
||||
break;
|
||||
default:
|
||||
err = new Error("URL格式不正确");
|
||||
}
|
||||
}
|
||||
}
|
||||
callback(err);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.edit-video-box {
|
||||
.item-box {
|
||||
margin-left: 28px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.item1 {
|
||||
flex: 1;
|
||||
.upload {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
left: -90px;
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
flex: 3;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: -60px;
|
||||
.protocol {
|
||||
font-size: 10px;
|
||||
margin-left: 10px;
|
||||
color: green;
|
||||
// position: relative;
|
||||
// top: 170px;
|
||||
// left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="adList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model.number="params.position"
|
||||
size="small"
|
||||
placeholder="广告位置"
|
||||
clearable
|
||||
@change="getAdList()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positionList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model.number="params.adsType"
|
||||
size="small"
|
||||
placeholder="广告类型"
|
||||
clearable
|
||||
@change="getAdList()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in adsTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
placeholder="请输入广告ID"
|
||||
size="small"
|
||||
clearable
|
||||
class="param-input"
|
||||
v-model="params.id"
|
||||
@change="getAdList()"
|
||||
></el-input>
|
||||
<!-- <el-input placeholder="请输入商区码" size="small" clearable class="param-input" v-model="params.discCode" @change="getAdList()"></el-input> -->
|
||||
<el-button type="primary" size="small" @click="getAdList()">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="addAds('add')">新增</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="620"
|
||||
>
|
||||
<el-table-column prop="adsType" label="广告类型" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.adsType?'商区广告':'系统广告'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cover" label="广告封面图" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.cover"
|
||||
:width="'90px'"
|
||||
:height="scope.row.position===0?'195px':(scope.row.position===1?'81.3px':(scope.row.position===2?'178.4px':(scope.row.position===3?'32.5px':(scope.row.position===4?'62.5px':'15px'))))"
|
||||
/>
|
||||
<p>{{scope.row.width+'x'+scope.row.height}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="广告标题" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="href" label="链接地址" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.href }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="position" label="广告位置" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.position | positionFun }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="hrefType" label="广告链接类型" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.hrefType | hrefTypeFun }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="sortCode" label="排序号" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sortCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="districtCode" label="商区码" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<!-- <el-table-column prop="remark" label="备注" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="id" label="广告ID" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="reviewID" label="审核ID" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.adID=scope.row.reviewID==='000000000000000000000000'?'未知':scope.row.reviewID}}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="receiptInfo" label="审核信息" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.receiptInfo }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="start" label="开始时间" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.start | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="end" label="结束时间" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.end | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="active" label="激活" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.active" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="click" label="点击次数" align="center" min-width="80" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.click }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" fixed="right" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addAds('edit',scope.row)"
|
||||
></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[5, 10, 20, 30]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 5"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑申请广告弹窗-->
|
||||
<add-page ref="addPage" @handlerAgentList="handlerAgentList"></add-page>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import addPage from "./components/addPage";
|
||||
import api from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
type: "",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
adsType: 0,
|
||||
// status:'',
|
||||
discCode: "",
|
||||
id: ""
|
||||
},
|
||||
adsTypeList: [
|
||||
{ label: "系统广告", value: 0 },
|
||||
{ label: "商区广告", value: 1 }
|
||||
],
|
||||
positionList: [
|
||||
{ label: "启动页广告", value: 0 },
|
||||
{ label: "首页-推荐小广告", value: 1 },
|
||||
{ label: "首页-弹窗公告", value: 2 },
|
||||
{ label: "消息-界面广告", value: 3 },
|
||||
{ label: "撩吧-轮播广告", value: 4 },
|
||||
{ label: "钱包-轮播广告", value: 5 },
|
||||
{ label: "搜索-轮播广告", value: 6 },
|
||||
{ label: "AV解说-轮播广告", value: 7 },
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAdList();
|
||||
},
|
||||
components: {
|
||||
addPage
|
||||
},
|
||||
methods: {
|
||||
getAdList(type) {
|
||||
if (type === "status") {
|
||||
this.annouParam.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
api.getAdList(this.params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.discCode = res.data.list.districtCode;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handlerAgentList() {
|
||||
this.getAdList();
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getAdList();
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getAdList();
|
||||
},
|
||||
// 新增、修改
|
||||
addAds(type, data) {
|
||||
this.$refs.addPage.open(type, data);
|
||||
|
||||
},
|
||||
//删除
|
||||
remove(id) {
|
||||
this.$confirm("您确定要删除该条广告吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
api.delAds({ id: id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getAdList();
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
+162
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="edit-video-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="100px">
|
||||
<el-form-item label="公告类型:" prop="type" v-if="this.title === '新增公告'">
|
||||
<el-select v-model="params.type" size="small">
|
||||
<el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="params.title" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片:" prop="cover" v-if="params.type===3">
|
||||
<base-upload :cover="params.cover" :action="action" @successCallback="handleAvatarSuccess" :wSize="280" :hSize="350" :width="'140px'" :height="'170px'"></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input type="textarea" :rows="6" v-model="params.content" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="链接" prop="href">
|
||||
<el-input v-model="params.href" size="small" type="textarea" :rows="3"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="active">
|
||||
<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 baseConfig from '@/utils/serverUrlConfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
id: '',
|
||||
typeList: [
|
||||
{ label: '系统公告弹窗', value: 0 },
|
||||
|
||||
// { label: '通知信息弹窗', value: 1},
|
||||
{ label: 'VIP升级公告弹窗', value: 3 }
|
||||
],
|
||||
// 图片上传地址
|
||||
// action: baseConfig.baseServerUrl + '/vid/uploadStatic',
|
||||
params: {
|
||||
title: "",
|
||||
cover: "",
|
||||
content: '',
|
||||
href: '',
|
||||
type: '',
|
||||
active: false
|
||||
},
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择公告类型', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
//cover: [{ required: true, message: '请上传图片', trigger: 'blur' },],
|
||||
//href: [{ required: true, message: '请输入链接', trigger: 'blur' },],
|
||||
content: [{ required: true, message: '请输入内容', trigger: 'blur' },],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 标签封面上传成功回掉
|
||||
handleAvatarSuccess(res) {
|
||||
this.params.cover = res.data.coverImg
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
title: "",
|
||||
cover: "",
|
||||
content: '',
|
||||
href: '',
|
||||
active: false,
|
||||
type: ''
|
||||
}
|
||||
this.$refs.form.resetFields()
|
||||
},
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true
|
||||
if (this.title === '编辑公告') {
|
||||
this.editAnnou()
|
||||
} else {
|
||||
this.addAnnou()
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editAnnou() {
|
||||
let params = Object.assign(this.params, { id: this.id });
|
||||
API.editAnnou(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerAnnouList')
|
||||
} else {
|
||||
this.$message.error('编辑失败');
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
addAnnou() {
|
||||
let params = this.params;
|
||||
API.addAnnou(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '新增成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.$emit('handlerAnnouList')
|
||||
} else {
|
||||
this.$message.error('新增失败');
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
}).catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false
|
||||
})
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑公告'
|
||||
this.params.title = data.title
|
||||
this.params.cover = data.cover
|
||||
this.params.content = data.content
|
||||
this.params.href = data.href
|
||||
this.params.active = data.active
|
||||
this.params.type = data.type
|
||||
this.id = data.id
|
||||
} else {
|
||||
this.title = '新增公告'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="announcementManagement-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="annouAction('add', {})">+新增公告</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="type" label="类型" align="center" min-width="160" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.type | typeRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="href" label="url" align="center" min-width="600">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.href || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" align="center" min-width="250">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.title || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="content" show-overflow-tooltip label="内容" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.content || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="cover" label="图片" align="center" min-width="190">
|
||||
<template slot-scope="scope">
|
||||
<img-load :src="imgUrl + scope.row.cover" :width="'140px'" :height="'170px'" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="active" label="状态" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.active" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" min-width="240" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operating" label="操作" align="center" min-width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" class="el-icon-edit" @click="annouAction('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" class="el-icon-delete" @click="remove(scope.row.id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[5, 15, 20, 30]" :current-page="annouParam.pageNumber" :page-size="annouParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 1" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<annou-action ref="tagAction" @handlerAnnouList="getAnnouList('status')"></annou-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import AnnouAction from './components/annouAction'
|
||||
// import baseConfig from '@/utils/serverUrlConfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
// imgUrl: baseConfig.imgUrl,
|
||||
total: 0,
|
||||
// 公告列表请求参数
|
||||
annouParam: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AnnouAction
|
||||
},
|
||||
filters: {
|
||||
typeRule: (value) => {
|
||||
if (value != 0 && !value) {
|
||||
return '未知'
|
||||
}
|
||||
let typeList = {
|
||||
0: '系统公告弹窗',
|
||||
1: '通知信息弹窗',
|
||||
3: 'VIP升级公告弹窗',
|
||||
}
|
||||
return typeList[value] ? typeList[value] : '-'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getAnnouList()
|
||||
},
|
||||
methods: {
|
||||
// 请求公告列表
|
||||
getAnnouList(type) {
|
||||
this.loading = true;
|
||||
if (type === 'status') {
|
||||
this.annouParam.pageNumber = 1
|
||||
}
|
||||
API.getAnnouList(this.annouParam).then(res => {
|
||||
if (res.code === 200 && res.data.aInfos) {
|
||||
this.tableData = res.data.aInfos
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.annouParam.pageSize = size
|
||||
this.annouParam.pageNumber = 1
|
||||
this.getAnnouList(this.annouParam)
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.annouParam.pageNumber = pageNumber
|
||||
this.getAnnouList(this.annouParam)
|
||||
},
|
||||
// 删除tags
|
||||
remove(id) {
|
||||
this.$confirm('您确定要删除当前公告吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
let params = {
|
||||
ids: [id]
|
||||
}
|
||||
API.delAnnou(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.getAnnouList('status')
|
||||
} else {
|
||||
this.$message.error('删除失败，请重试')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 新增、删除tags
|
||||
annouAction(type, data) {
|
||||
this.$refs.tagAction.open(type, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.views {
|
||||
font-size: 20px;
|
||||
color: #e63765;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
.edit {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: #e63765;
|
||||
vertical-align: middle !important;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tags {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
+167
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="clickLog-box">
|
||||
<!--操作栏-->
|
||||
<!--
|
||||
<div class="statis-box">
|
||||
<ul>
|
||||
<li v-for="(item, i) in tags" :key="i" @click="getType(item.value)" :class="index === i ? 'active' : ''">{{item.name}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<div class="action-bar">
|
||||
<el-input placeholder="请输入用户ID" size="small" clearable class="param-input" v-model="params.uid"></el-input>
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getClickLog('status')">搜索</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="createdAt" label="添加时间" align="center" fixed min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="aid" label="广告ID" align="center" min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.aid || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户UUID" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[ 10, 15, 20, 25]" :current-page="params.pageNumber" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from '@/utils/global'
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 排序下拉数据
|
||||
tags: [
|
||||
{
|
||||
name: '昨日',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '今日',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '本周',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
name: '本月',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '总',
|
||||
value: 5
|
||||
},
|
||||
],
|
||||
time: '',
|
||||
index: 0,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
uid: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getClickLog()
|
||||
},
|
||||
methods: {
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.start = changeTime(time[0])
|
||||
this.params.end = changeTime(time[1])
|
||||
} else {
|
||||
this.params.start = ''
|
||||
this.params.end = ''
|
||||
}
|
||||
this.getClickLog('status')
|
||||
},
|
||||
// 请求订单列表
|
||||
getClickLog(type) {
|
||||
this.loading = true
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
API.getClickLog(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.logs) {
|
||||
this.tableData = res.data.logs
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.getClickLog()
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number
|
||||
this.getClickLog()
|
||||
},
|
||||
getType(value) {
|
||||
this.params.type = value
|
||||
this.getClickLog('status')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.clickLog-box {
|
||||
.statis-box {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.first-data {
|
||||
margin-left: 50px;
|
||||
}
|
||||
li {
|
||||
width: 65px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
background: #e63765;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
&:hover {
|
||||
background: #eb5f84;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #eb5f84;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<el-dialog
|
||||
:title="title1"
|
||||
:visible.sync="dialogVisible"
|
||||
width="350px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="90px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="回执信息:" prop="receiptInfo">
|
||||
<el-input
|
||||
v-model="params.receiptInfo"
|
||||
size="small"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="回执信息"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间:" prop="startTime" v-if="this.type=='pass'">
|
||||
<el-date-picker
|
||||
v-model="params.startTime"
|
||||
type="datetime"
|
||||
:editable="false"
|
||||
placeholder="请输入开始时间"
|
||||
size="small"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间:" prop="endTime" v-if="this.type=='pass'">
|
||||
<el-date-picker
|
||||
v-model="params.endTime"
|
||||
type="datetime"
|
||||
:editable="false"
|
||||
placeholder="请输入结束时间"
|
||||
size="small"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" style="text-align:center">
|
||||
<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 { changeTime } from "@/utils/global";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
dialogVisible: false,
|
||||
title1: "",
|
||||
type: "",
|
||||
flag: false,
|
||||
id: "",
|
||||
// 审核通过/拒绝 表单数据
|
||||
params: {
|
||||
pass: "",
|
||||
receiptInfo: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
},
|
||||
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
receiptInfo: [
|
||||
{ required: true, message: "请填写回执信息", trigger: "blur" },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: "请输入开始时间", trigger: "blur" },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: "请输入结束时间", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type === "pass") {
|
||||
this.passReview();
|
||||
} else {
|
||||
this.refuseReview();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 通过
|
||||
passReview() {
|
||||
let params = Object.assign({}, this.params, {
|
||||
id: this.id,
|
||||
pass: true,
|
||||
startTime: changeTime(this.params.startTime),
|
||||
endTime: changeTime(this.params.endTime),
|
||||
});
|
||||
API.AdReview(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("操作失败");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 拒绝
|
||||
refuseReview() {
|
||||
let params = Object.assign(
|
||||
{},
|
||||
{ id: this.id, pass: false, receiptInfo: this.params.receiptInfo }
|
||||
);
|
||||
API.AdReview(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("操作失败");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
pass: "",
|
||||
receiptInfo: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
};
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
this.id = data.id;
|
||||
if (type === "pass") {
|
||||
this.title1 = "通过审核信息编辑";
|
||||
this.params.pass = data.pass;
|
||||
this.params.receiptInfo = data.receiptInfo;
|
||||
this.params.startTime = data.startTime;
|
||||
this.params.endTime = data.endTime;
|
||||
} else {
|
||||
this.title1 = "拒绝审核信息编辑";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.edit-video-box {
|
||||
.item-box {
|
||||
margin-left: 28px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.item1 {
|
||||
flex: 1;
|
||||
.upload {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
left: -90px;
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
flex: 3;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: -60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,267 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="agentList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model.number="params.reviewStatus"
|
||||
size="small"
|
||||
placeholder="审核状态"
|
||||
clearable
|
||||
@change="getAdReviewList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in reviewStatusFunction"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
placeholder="请输入商区码"
|
||||
size="small"
|
||||
clearable
|
||||
class="param-input"
|
||||
v-model="params.discCode"
|
||||
@change="getAdReviewList"
|
||||
></el-input>
|
||||
<el-button type="primary" size="small" @click="getAdReviewList('status')">搜索</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-arrow-right" size="small" @click="addAdReview(0)">发起申请</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="cover" label="广告封面图" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:src="imgUrl + scope.row.cover"
|
||||
:width="'90px'"
|
||||
:height="scope.row.position===0?'195px':(scope.row.position===1?'81.3px':(scope.row.position===2?'178.4px':(scope.row.position===3?'62.5px':'32.5px')))"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="广告标题" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="href" label="广告地址" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.href }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="position" label="广告位置" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.position | positionFun }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="hrefType" label="广告链接类型" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.hrefType | hrefTypeFun }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="sortCode" label="排序号" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sortCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="ID" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="adID" label="广告ID" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.adID=scope.row.adID==='000000000000000000000000'?'未知':scope.row.adID}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="passAt" label="通过时间" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.passAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="refussAt" label="拒绝时间" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.refussAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="reviewer" label="审核人" align="center" width="160px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.reviewer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="receiptInfo" label="审核信息" align="center" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.receiptInfo }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<!-- <el-table-column prop="optTypeAt" label="更新时间" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.optTypeAt }}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column
|
||||
prop="reviewStatus"
|
||||
label="审核状态"
|
||||
align="center"
|
||||
min-width="120"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<p
|
||||
class="p1"
|
||||
:style="colors=(scope.row.reviewStatus===0)?'background:#FF9300':((scope.row.reviewStatus===1)?'background:green':'background:red')"
|
||||
>{{ scope.row.reviewStatus | reviewStatusFun}}</p>
|
||||
<p>{{ scope.row.receiptInfo }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="toExamine(scope.row,'pass')"
|
||||
:disabled="scope.row.reviewStatus!==0?true:false"
|
||||
>通过</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="toExamine(scope.row,'refuse')"
|
||||
:disabled="scope.row.reviewStatus!==0?true:false"
|
||||
>拒绝</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[5, 10, 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>
|
||||
<!-- 添加审核检查 -->
|
||||
<check ref="check" @handlerAgentList="getAdReviewList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import addPage from './components/addPage';
|
||||
import api from "@/api";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import Check from "./components/check";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
// status:'',
|
||||
discCode: "",
|
||||
id: "",
|
||||
},
|
||||
reviewStatusFunction: [
|
||||
{ label: "审核中", value: 0 },
|
||||
{ label: "通过", value: 1 },
|
||||
{ label: "拒绝", value: 2 },
|
||||
],
|
||||
};
|
||||
},
|
||||
components: { Check },
|
||||
created() {
|
||||
this.getAdReviewList();
|
||||
},
|
||||
methods: {
|
||||
getAdReviewList() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loading = true;
|
||||
|
||||
api.getAdReviewList(this.params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.discCode = res.data.list.districtCode;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handlerAgentList() {
|
||||
this.getAdReviewList();
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getAdReviewList();
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getAdReviewList();
|
||||
},
|
||||
// 广告审核
|
||||
toExamine(data, type) {
|
||||
this.$refs.check.open(type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.agentList-box {
|
||||
.p1 {
|
||||
color: #fff;
|
||||
}
|
||||
.v-number {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.el-input {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.view-details {
|
||||
margin-left: 10px;
|
||||
color: #e63765;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
/deep/.col_layout {
|
||||
/deep/ div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 50px;
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
export var LableMap = {
|
||||
sumDate: "日期",
|
||||
districtCode: "商区码",
|
||||
discType: "商区类型",
|
||||
name: "账号",
|
||||
remark: "备注",
|
||||
newUIDCount: "注册数",
|
||||
newDirectUIDCount: "直推注册数",
|
||||
newFissionUIDCount: "分裂注册数",
|
||||
userFissionRatio: "用户分裂率",
|
||||
buyVIPCount: "VIP数",
|
||||
directBuyVIPCount: "直推VIP数",
|
||||
fissionBuyVIPCount: "分裂VIP数",
|
||||
buyVIPAmount: "VIP金额(元)",
|
||||
directBuyVIPAmount: "直推VIP金额(元)",
|
||||
fissionBuyVIPAmount: "分裂VIP金额(元)",
|
||||
buyVIPUIDCount: "VIP用户数",
|
||||
directBuyVIPUIDCount: "直推VIP用户数",
|
||||
fissionBuyVIPUIDCount: "分裂VIP用户数",
|
||||
buyVIDTaxAmount: "视频收益(元)",
|
||||
directBuyVIDTaxAmount: "直推视频收益(元)",
|
||||
fissionBuyVIDTaxAmount: "分裂视频收益(元)",
|
||||
consume: "消费(元)",
|
||||
directConsume: "直推消费(元)",
|
||||
fissionConsume: "分裂消费(元)",
|
||||
arpu: "ARPU",
|
||||
directARPU: "直推ARPU",
|
||||
fissionARPU: "分裂ARPU",
|
||||
newAndRechargeOrderCount: "新增充值单数",
|
||||
newAndRechargeOrderYuan: "新增充值金额(元)",
|
||||
rechargeCompleteOrderCount: "充值单数",
|
||||
directRechargePaidOrderCount: "直推充值单数",
|
||||
fissionRechargePaidOrderCount: "分裂充值单数",
|
||||
rechargeCompleteOrderAmount: "充值金额(元)",
|
||||
directRechargePaidAmount: "直推充值(元)",
|
||||
fissionRechargePaidAmount: "分裂充值(元)",
|
||||
withDrawOrderCount: "总提现单数",
|
||||
withDrawOrderAmount: "总提现(元)",
|
||||
withDrawCompleteOrderCount: "完成提现单数",
|
||||
withDrawCompleteOrderAmount: "完成提现(元)",
|
||||
withDrawPaidOrderCount: "出款单数",
|
||||
directWithDrawPaidOrderCount: "直推出款单数",
|
||||
fissionWithDrawPaidOrderCount: "分裂出款单数",
|
||||
withDrawPaidAmount: "出款金额(元)",
|
||||
directWithDrawPaidAmount: "直推出款(元)",
|
||||
fissionWithDrawPaidAmount: "分裂出款(元)",
|
||||
visitUIDCount: "日活跃",
|
||||
directVisitUIDCount: "直推日活跃",
|
||||
fissionVisitUIDCount: "分裂日活跃",
|
||||
nextDayRetainUIDRatio: "次日留存率",
|
||||
day3RetainUIDRatio: "3日留存率",
|
||||
day7RetainUIDRatio: "7日留存率",
|
||||
day15RetainUIDRatio: "15日留存率",
|
||||
day30RetainUIDRatio: "30日留存率",
|
||||
directNextDayRetainUIDRatio: "直推次日留存率",
|
||||
directDay3RetainUIDRatio: "直推3日留存率",
|
||||
directDay7RetainUIDRatio: "直推7日留存率",
|
||||
directDay15RetainUIDRatio: "直推15日留存率",
|
||||
directDay30RetainUIDRatio: "直推30日留存率",
|
||||
fissionNextDayRetainUIDRatio: "分裂次日留存率",
|
||||
fissionDay3RetainUIDRatio: "分裂3日留存率",
|
||||
fissionDay7RetainUIDRatio: "分裂7日留存率",
|
||||
fissionDay15RetainUIDRatio: "分裂15日留存率",
|
||||
fissionDay30RetainUIDRatio: "分裂30日留存率",
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="district-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="span">
|
||||
<el-form
|
||||
ref="formDisCode"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
style="padding:20px"
|
||||
label-width="120px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="账号" prop="name">
|
||||
<el-input v-model="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="password">
|
||||
<el-input v-model="params.password" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商区类型:" prop="discType">
|
||||
<el-select v-model.number="params.discType" style="width:100%" size="small">
|
||||
<el-option label="CPS" :value="0"></el-option>
|
||||
<el-option label="CPA" :value="1"></el-option>
|
||||
<el-option label="CPT" :value="2"></el-option>
|
||||
<el-option label="CPC" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户单价(元):" v-if="params.discType===1" prop="userUnitYuan">
|
||||
<el-input v-model.number="params.userUnitYuan" type="number" step="0.1" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分红比例(%):" prop="dividendRatio" v-if="params.discType===0">
|
||||
<el-input v-model.number="params.dividendRatio" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商区码:">
|
||||
<el-input v-model="params.discCode" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子渠道数量:">
|
||||
<el-input v-model.number="params.childMax" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="落地页模板:">
|
||||
<el-input v-model="params.templet" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input type="textarea" rows="3" v-model="params.remark" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleClose" size="small">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('formDisCode')"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>确 认</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
labelPosition: "left",
|
||||
checkList: [],
|
||||
title: "",
|
||||
flag: false,
|
||||
width: "600px",
|
||||
span: 24,
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 新增商区代理参数
|
||||
params: {
|
||||
name: "",
|
||||
password: "",
|
||||
discCode: "",
|
||||
dividendRatio: 50,
|
||||
discType: 0,
|
||||
deductType: 0,
|
||||
conDeductionRatio: "",
|
||||
conDedLowerOutset: "",
|
||||
nuDeductionRatio: "",
|
||||
nuDedLowerOutset: "",
|
||||
userUnitYuan: 2,
|
||||
remark: "",
|
||||
childMax: "",
|
||||
templet: ""
|
||||
},
|
||||
// 验证规则
|
||||
rules: {
|
||||
// 用户名
|
||||
name: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
// 分红比例
|
||||
dividendRatio: [
|
||||
{ required: true, message: "请输入分红比例", trigger: "blur" }
|
||||
],
|
||||
userUnitYuan: [
|
||||
{ required: true, message: "请输入单价", trigger: "blur" }
|
||||
],
|
||||
// 商区类型
|
||||
discType: [
|
||||
{ required: true, message: "请选择商区类型", trigger: "change" }
|
||||
],
|
||||
deductionRatio: [{ required: true, message: "必填", trigger: "blur" }]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 数据提交验证
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
this.addDistrict();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 将多选框转换成数字
|
||||
changeNumber() {
|
||||
if (this.checkList.length === 2) {
|
||||
this.params.deductType = 3;
|
||||
} else if (this.checkList.length === 1) {
|
||||
if (this.checkList.indexOf("扣消费") > -1) {
|
||||
this.params.deductType = 1;
|
||||
}
|
||||
if (this.checkList.indexOf("扣用户") > -1) {
|
||||
this.params.deductType = 2;
|
||||
}
|
||||
} else {
|
||||
this.params.deductType = 0;
|
||||
}
|
||||
},
|
||||
// 新增商区代理
|
||||
addDistrict() {
|
||||
API.addDistrict(this.params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerAddDistrict");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.isShow = true;
|
||||
this.dialogVisible = false;
|
||||
// this.checkList = []
|
||||
// this.params = {
|
||||
// name:'',
|
||||
// password:'',
|
||||
// discCode:'',
|
||||
// dividendRatio: 50,
|
||||
// discType: 0,
|
||||
|
||||
// deductType: 0,
|
||||
// conDeductionRatio: '',
|
||||
// conDedLowerOutset: '',
|
||||
// nuDeductionRatio: '',
|
||||
// nuDedLowerOutset: '',
|
||||
// userUnitYuan: '',
|
||||
// remark: '',
|
||||
// };
|
||||
// this.$refs.formDisCode.resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open() {
|
||||
this.dialogVisible = true;
|
||||
this.width = "500px";
|
||||
this.span = 24;
|
||||
this.type = "add";
|
||||
this.title = "新增商区代理";
|
||||
this.checkList = [];
|
||||
// this.params= {
|
||||
// name:'',
|
||||
// password:'',
|
||||
// discCode:'',
|
||||
// dividendRatio: 50,
|
||||
// discType: 0,
|
||||
// deductType: 0,
|
||||
// conDeductionRatio: '',
|
||||
// conDedLowerOutset: '',
|
||||
// nuDeductionRatio: '',
|
||||
// nuDedLowerOutset: '',
|
||||
// userUnitYuan: 2,
|
||||
// remark: '',
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.district-action-box {
|
||||
// .el-input {
|
||||
// width: 220px;
|
||||
// }
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
.form-item {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="140px">
|
||||
<el-form-item label="账号:" prop="name">
|
||||
<el-input v-model="params.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="password">
|
||||
<el-input v-model="params.password" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色:" prop="role">
|
||||
<el-select v-model="params.role" placeholder="请选择角色">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.id"
|
||||
:value="item.role"
|
||||
:label="item.role"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商区码:" prop="discCode">
|
||||
<el-input v-model="params.discCode" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
style="width:220px"
|
||||
:autosize="{ minRows: 3, maxRows: 6}"
|
||||
v-model="params.remark"
|
||||
size="small"
|
||||
></el-input>
|
||||
</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: "",
|
||||
type: "",
|
||||
roleList:[],
|
||||
// 新增、编辑商区代理商参数
|
||||
params: {
|
||||
parent:"",
|
||||
name: "",
|
||||
password: "",
|
||||
role: "",
|
||||
dividendRatio: null,
|
||||
discCode: "",
|
||||
remark: "",
|
||||
},
|
||||
// 验证规则
|
||||
rules: {
|
||||
name: [{ required: true, message: "必填", trigger: "blur" }],
|
||||
password: [{ required: true, message: "必填", trigger: "blur" }],
|
||||
role: [{ required: true, message: "必填", trigger: "blur" }],
|
||||
// discType: [{ required: true, message: "必填", trigger: "blur" }],
|
||||
dividendRatio: [{ required: true, message: "必填", trigger: "blur" }]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getAuthorList() {
|
||||
API.getRoleList({
|
||||
discCode: this.params.parent, //商区码 [必传]
|
||||
pageNumber: 1, //当前页 [必传]
|
||||
pageSize: 50 //每页条数 [必传]
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.roleList = res.data.list;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 数据提交验证
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
this.addAgent();
|
||||
}});
|
||||
},
|
||||
// 新增商区代理商
|
||||
addAgent() {
|
||||
API.addSubAgent(this.params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerAddDistrict");
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
agent: "",
|
||||
dividendRatio: 0,
|
||||
// inviteLink: '',
|
||||
remark: ""
|
||||
};
|
||||
this.parent = "";
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(parent) {
|
||||
this.dialogVisible = true;
|
||||
this.params.parent = parent;
|
||||
this.title = "新增商区代理";
|
||||
this.getAuthorList()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.agent-action-box {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
<!-- 基础配置 -->
|
||||
<template>
|
||||
<el-form
|
||||
:model="paramBase"
|
||||
:rules="rules"
|
||||
ref="baseForm"
|
||||
style="padding:20px"
|
||||
label-width="120px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="账号" prop="name">
|
||||
<el-input v-model="paramBase.name" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机:" prop="mobile">
|
||||
<el-input v-model="paramBase.mobile" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" prop="password">
|
||||
<el-input v-model="paramBase.password" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色:" prop="role">
|
||||
<el-select v-model="paramBase.role" placeholder="请选择角色">
|
||||
<el-option v-for="item in roleList" :key="item.id" :value="item.role" :label="item.role"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input type="textarea" rows="2" v-model="paramBase.remark" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子渠道数量:" v-if="this.parent==''">
|
||||
<el-input v-model.number="paramBase.childMax" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许登陆:" prop="lock">
|
||||
<el-switch
|
||||
v-model="paramBase.lock"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许提现:" prop="disTrans">
|
||||
<el-switch
|
||||
v-model="paramBase.disTrans"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许广告:" prop="disAd">
|
||||
<el-switch
|
||||
v-model="paramBase.disAd"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许多级分成:" prop="disMulDivi">
|
||||
<el-switch
|
||||
v-model="paramBase.disMulDivi"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h4 style="text-align:center;margin-bottom:10px">结算配置</h4>
|
||||
<el-form-item label="结算方式:" prop="discType">
|
||||
<el-select v-model.number="paramBase.discType" style="width:100%" size="small">
|
||||
<el-option label="CPS" :value="0"></el-option>
|
||||
<el-option label="CPA" :value="1"></el-option>
|
||||
<el-option label="CPT" :value="2"></el-option>
|
||||
<el-option label="CPC" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户单价(元):" v-if="paramBase.discType===1" prop="userUnitYuan">
|
||||
<el-input v-model.number="paramBase.userUnitYuan" type="number" step="0.1" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分红比例(%):" prop="dividendRatio" v-if="paramBase.discType===0">
|
||||
<el-input v-model.number="paramBase.dividendRatio" clearable size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="myFooter" style="position: absolute;bottom: -35px;right: 20px;">
|
||||
<el-button type="primary" @click="submitForm('baseForm')" :loading="flag" size="small">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { validatorM } from "@/utils/validator";
|
||||
export default {
|
||||
name: "",
|
||||
props: ["querry", "roleList"],
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 编辑id
|
||||
parent: "",
|
||||
paramBase: {
|
||||
id: "",
|
||||
name: "", //账号
|
||||
password: "", //密码
|
||||
role: "", //角色
|
||||
mobile: "", //手机
|
||||
remark: "", //备注
|
||||
childMax: 0, //最大孩子数
|
||||
lock: false, //禁止登陆
|
||||
disTrans: false, //禁止交易
|
||||
disAd: false, //禁止广告
|
||||
disMulDivi: false, //禁止多级分成
|
||||
userUnitYuan: 2, //用户单价
|
||||
discType: 0, //商区类型
|
||||
dividendRatio: 0, //分红比例
|
||||
},
|
||||
rules: {
|
||||
userUnitYuan: [{ validator: validatorM, trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.intBase();
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitForm(baseForm) {
|
||||
this.$refs[baseForm].validate((valid) => {
|
||||
if (valid) {
|
||||
this.editBase();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//updateBase
|
||||
editBase() {
|
||||
let myValue =
|
||||
this.paramBase.discType === 1
|
||||
? "用户单价为:" + this.paramBase.userUnitYuan + " 元"
|
||||
: this.paramBase.discType === 0
|
||||
? "分红比例为:" + this.paramBase.dividendRatio + "%"
|
||||
: "";
|
||||
this.$confirm("【" + myValue + "】", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.flag = true;
|
||||
let param = Object.assign({}, this.paramBase, {
|
||||
lock: !this.paramBase.lock,
|
||||
disTrans: !this.paramBase.disTrans,
|
||||
disAd: !this.paramBase.disAd,
|
||||
disMulDivi: !this.paramBase.disMulDivi,
|
||||
// userUnitYuan:
|
||||
});
|
||||
API.updateBase(param)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑基础配置成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("editPage");
|
||||
} else {
|
||||
this.$message.error("编辑基础配置失败！");
|
||||
}
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
updateParamBase(val) {
|
||||
this.paramBase = {
|
||||
name: val.name,
|
||||
password: val.password,
|
||||
role: val.role,
|
||||
mobile: val.mobile,
|
||||
remark: val.remark,
|
||||
childMax: val.childMax,
|
||||
lock: !val.lock,
|
||||
disTrans: !val.disTrans,
|
||||
disAd: !val.disAd,
|
||||
disMulDivi: !val.disMulDivi,
|
||||
userUnitYuan: val.userUnitYuan,
|
||||
discType: val.discType,
|
||||
dividendRatio: val.dividendRatio,
|
||||
id: val.id,
|
||||
};
|
||||
this.parent = val.parent;
|
||||
},
|
||||
intBase() {
|
||||
this.updateParamBase(this.querry);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
querry: function (val, oldVal) {
|
||||
this.updateParamBase(val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
+162
@@ -0,0 +1,162 @@
|
||||
<!-- 落地页配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="landPageForm"
|
||||
:model="ldyParam"
|
||||
style="padding:20px"
|
||||
label-width="80px"
|
||||
:label-position="labelPosition"
|
||||
v-if=" activeName=='four'"
|
||||
>
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
模版：
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入模版"
|
||||
clearable
|
||||
class="param-input"
|
||||
v-model="ldyParam.templet"
|
||||
@input="input"
|
||||
></el-input>
|
||||
|
||||
<el-divider></el-divider>按钮配置：
|
||||
<el-button type="primary" size="small" @click="addAction">新增</el-button>
|
||||
</div>
|
||||
<div class="form_item" style="display:flex" v-for="(item, i) in this.arrs" :key="i">
|
||||
<el-form-item label="按钮样式:" style="marginLeft: 20px;">
|
||||
<el-select v-model="item.style" size="small" placeholder="按钮样式" clearabl>
|
||||
<el-option value="switchSimple" label="简单"></el-option>
|
||||
<el-option value="switchStress" label="突出"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮类型:" style="marginLeft: 20px;">
|
||||
<el-select v-model="item.type" size="small" placeholder="按钮类型" clearabl>
|
||||
<el-option value="iosEnterprise" label="ios企业包开关"></el-option>
|
||||
<el-option value="iosStore" label="ios商店包开关"></el-option>
|
||||
<el-option value="android" label="安卓开关"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示按钮:" style="marginLeft: 20px;">
|
||||
<el-checkbox v-model="item.enable"></el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="marginLeft: -30px;">
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteRow(i)"></el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item class="myFooter" style="position: absolute;bottom: -35px;right: 20px;">
|
||||
<!-- <el-button size="small">取 消</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('landPageForm')"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
export default {
|
||||
props: ["querry", "activeName"],
|
||||
data() {
|
||||
return {
|
||||
labelPosition: " left",
|
||||
flag: false,
|
||||
arrs: [],
|
||||
id: "", //唯一码
|
||||
ldyParam: {
|
||||
templet: "",
|
||||
buttons: [
|
||||
{
|
||||
type: "", //开关类型
|
||||
style: "", //开关样式
|
||||
enable: false, //true:显示按钮
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.intLdy();
|
||||
},
|
||||
methods: {
|
||||
submitForm(landPageForm) {
|
||||
this.$refs[landPageForm].validate((valid) => {
|
||||
if (valid) {
|
||||
this.editLdy();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editLdy() {
|
||||
this.flag = true;
|
||||
this.ldyParam.buttons = this.arrs;
|
||||
let param = Object.assign({}, this.ldyParam, { id: this.id });
|
||||
API.updateLandPage(param)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑落地页配置成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("editPage");
|
||||
} else {
|
||||
this.$message.error("编辑落地页配置失败！");
|
||||
}
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
//落地页配置--新增
|
||||
addAction() {
|
||||
if (!this.arrs) this.arrs = [];
|
||||
this.arrs.push({
|
||||
style: "switchStress",
|
||||
type: "",
|
||||
enable: false,
|
||||
});
|
||||
},
|
||||
// 落地页配置--删除某行
|
||||
deleteRow(i) {
|
||||
this.arrs.splice(i, 1);
|
||||
},
|
||||
input() {
|
||||
this.$forceUpdate();
|
||||
},
|
||||
//初始化数据
|
||||
// type: "", //开关类型
|
||||
// style: "", //开关样式
|
||||
// enable: false //true:显示按钮
|
||||
intLdy() {
|
||||
this.ldyParam = {
|
||||
templet: this.querry.ldyCfg.templet,
|
||||
buttons: this.querry.ldyCfg.buttons,
|
||||
};
|
||||
|
||||
this.arrs = this.ldyParam.buttons;
|
||||
this.id = this.querry.id;
|
||||
if (
|
||||
this.labelPosition.buttons &&
|
||||
this.labelPosition.buttons.length != 0
|
||||
) {
|
||||
this.labelPosition.buttons = {
|
||||
type: this.querry.ldyCfg.buttons.type,
|
||||
style: this.querry.ldyCfg.buttons.style,
|
||||
enable: this.querry.ldyCfg.buttons.enable,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
+353
@@ -0,0 +1,353 @@
|
||||
<!-- 充值配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="p_row" style="display: flex;justify-content:space-around;">
|
||||
<span class="sp">总量：{{addParams.oriRechargeCount}}</span>
|
||||
<span class="sp">扣量：{{addParams.dedRechargeCount}}</span>
|
||||
<span class="sp">计划扣量：{{addParams.preDedRechargeCount}}</span>
|
||||
</div>
|
||||
<div style="margin-left:4px;color:#000"></div>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- 扣新增充值折线图 -->
|
||||
<div
|
||||
class="line"
|
||||
ref="regChart"
|
||||
style="width:560px;height:320px;margin-left:-30px;margin-bottom:15px"
|
||||
></div>
|
||||
<!-- 扣新增充值折线图下方表单 -->
|
||||
<el-form
|
||||
:model="rechargeParam"
|
||||
label-width="120px"
|
||||
ref="rechargeForm"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<el-form-item label="采用时间:">
|
||||
<el-date-picker
|
||||
style="width:250px"
|
||||
size="small"
|
||||
v-model="time"
|
||||
type="daterange"
|
||||
range-separator="——"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期:"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起扣时间:">
|
||||
<el-date-picker
|
||||
v-model="rechargeParam.rechgDedAt"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
size="small"
|
||||
@click="rechgDedTime()"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="扣量起点(个):">
|
||||
<el-input-number
|
||||
v-model.number="rechargeParam.rechgDedLowerOutset"
|
||||
@change="rechgChartData()"
|
||||
placeholder="输入数字"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
:min="0"
|
||||
size="small"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="扣量比:">
|
||||
<el-input-number
|
||||
v-model="rechargeParam.rechgDeductionRatio"
|
||||
placeholder="输入数字"
|
||||
@change="rechgChartData()"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
:max="1"
|
||||
:min="0"
|
||||
size="small"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="开关:">
|
||||
<el-switch
|
||||
v-model="active"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item class="myFooter" style="position: absolute;bottom: -35px;right: 20px;">
|
||||
<!-- <el-button size="small">取 消</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('rechargeForm')"
|
||||
:loading="flag"
|
||||
size="small"
|
||||
>保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import echarts from "echarts";
|
||||
import { changeTime, changeSumDate } from "@/utils/global";
|
||||
export default {
|
||||
props: ["querry", "rechargeTime"],
|
||||
data() {
|
||||
return {
|
||||
active: "",
|
||||
labelPosition: "left",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
time: "",
|
||||
addParams: {}, //图表上方需要展示字段
|
||||
rechargeParam: {
|
||||
id: "", //唯一码
|
||||
discCode: "",
|
||||
rechgDeductionRatio: 0, //充值扣量比例
|
||||
rechgDedLowerOutset: 0, //充值扣量起点
|
||||
rechgDedAt: "" //充值扣量时间
|
||||
// deductType: ""
|
||||
},
|
||||
rechargeAnalysis: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.intRecharge();
|
||||
},
|
||||
methods: {
|
||||
submitForm(rechargeForm) {
|
||||
this.$refs[rechargeForm].validate(valid => {
|
||||
if (valid) {
|
||||
this.editRecharge();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editRecharge() {
|
||||
let param = Object.assign({}, this.rechargeParam, this.rechargeAnalysis, {
|
||||
deductType: this.active === true ? 8 : 0
|
||||
});
|
||||
API.updateDedRecharge(param)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑充值配置成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("editPage");
|
||||
} else {
|
||||
this.$message.error("编辑充值配置失败！");
|
||||
}
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
//扣充值--采样时间回掉
|
||||
changeTime(time) {
|
||||
this.rechargeAnalysis.startTime = time[0]
|
||||
? changeSumDate(time[0])
|
||||
: undefined;
|
||||
this.rechargeAnalysis.endTime = time[1]
|
||||
? changeSumDate(time[1])
|
||||
: undefined;
|
||||
this.rechgChartData();
|
||||
},
|
||||
//扣充值--起扣时间
|
||||
rechgDedTime() {
|
||||
this.rechgChartData();
|
||||
},
|
||||
rechgChartData() {
|
||||
// 初始化echart实例
|
||||
let myChart = echarts.init(this.$refs.regChart);
|
||||
const subTit = "充值趋势图";
|
||||
myChart.showLoading({
|
||||
text: "拼命加载中",
|
||||
color: "#d54867",
|
||||
textColor: "#d54867",
|
||||
maskColor: "rgba(255,255,255,0.8)",
|
||||
zlevel: 0
|
||||
});
|
||||
// 折线图数据接口
|
||||
// 获取新增扣充值数据
|
||||
const param = {
|
||||
startTime: changeSumDate(this.time[0]),
|
||||
endTime: changeSumDate(this.time[1]),
|
||||
discCode: this.rechargeParam.discCode,
|
||||
dedLowerOutset: this.rechargeParam.rechgDedLowerOutset,
|
||||
rechargeDedAt: changeTime(this.rechargeParam.rechgDedAt),
|
||||
rechargeDedRatio: this.rechargeParam.rechgDeductionRatio
|
||||
};
|
||||
let getLineChartData = API.handleRechargeAnalysis(param);
|
||||
getLineChartData
|
||||
.then(res => {
|
||||
if (res.code == 200) {
|
||||
let time = [];
|
||||
// 新增充值要展示字段
|
||||
this.addParams = {
|
||||
oriRechargeCount: res.data.oriRechargeCount,
|
||||
dedRechargeCount: res.data.dedRechargeCount,
|
||||
preDedRechargeCount: res.data.preDedRechargeCount
|
||||
};
|
||||
let oriRechargeCountMap = [];
|
||||
let oriDedRechargeCountMap = [];
|
||||
let preDedRechargeCountMap = [];
|
||||
let tit = [];
|
||||
tit.push("原始");
|
||||
tit.push("扣量");
|
||||
tit.push("计划");
|
||||
|
||||
Object.keys(res.data.oriRechargeCountMap).forEach(key => {
|
||||
time.push(key + "h");
|
||||
if (res.data.oriRechargeCountMap[key] !== undefined) {
|
||||
oriRechargeCountMap.push(res.data.oriRechargeCountMap[key]);
|
||||
}
|
||||
if (res.data.oriDedRechargeCountMap[key] !== undefined) {
|
||||
oriDedRechargeCountMap.push(
|
||||
res.data.oriDedRechargeCountMap[key]
|
||||
);
|
||||
}
|
||||
if (res.data.preDedRechargeCountMap[key] !== undefined) {
|
||||
preDedRechargeCountMap.push(
|
||||
res.data.preDedRechargeCountMap[key]
|
||||
);
|
||||
}
|
||||
});
|
||||
myChart.hideLoading();
|
||||
let option = {
|
||||
title: {
|
||||
text: `${subTit}`
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
color: ["#1e9f38", "#111110", "#c51f00"],
|
||||
legend: {
|
||||
data: [tit[0], tit[1], tit[2]]
|
||||
},
|
||||
xAxis: {
|
||||
min: -1,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: time,
|
||||
axisLine: { onZero: false }
|
||||
},
|
||||
yAxis: {
|
||||
min: -1,
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
},
|
||||
axisLine: { onZero: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: tit[0],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: oriRechargeCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: tit[1],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: oriDedRechargeCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: tit[2],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: preDedRechargeCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
} else {
|
||||
myChart.showLoading({
|
||||
text: "暂无数据",
|
||||
color: "rgba(250,250,250,0.1)",
|
||||
textColor: "#8a8e91",
|
||||
maskColor: "rgba(255, 255, 255, 0.8)"
|
||||
});
|
||||
this.load = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
myChart.showLoading({
|
||||
text: "暂无数据",
|
||||
color: "rgba(250,250,250,0.1)",
|
||||
textColor: "#8a8e91",
|
||||
maskColor: "rgba(255, 255, 255, 0.8)"
|
||||
});
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
|
||||
updateRechargeParam(val) {
|
||||
this.rechargeParam = {
|
||||
rechgDeductionRatio: val.rechgDeductionRatio,
|
||||
rechgDedLowerOutset: val.rechgDedLowerOutset,
|
||||
rechgDedAt: val.rechgDedAt,
|
||||
id: val.id,
|
||||
discCode: val.districtCode
|
||||
};
|
||||
this.time = this.rechargeTime;
|
||||
this.rechargeAnalysis = val.rechargeAnalysis;
|
||||
|
||||
this.active = Boolean(val.deductType & 8);
|
||||
},
|
||||
intRecharge() {
|
||||
this.updateRechargeParam(this.querry);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
querry: function(val, oldVal) {
|
||||
this.updateRechargeParam(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
+343
@@ -0,0 +1,343 @@
|
||||
<!-- 用户配置 -->
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="p_row" style="display: flex;justify-content:space-around;">
|
||||
<span class="sp">总量：{{addParams.oriNewUserCount}}</span>
|
||||
<span class="sp">扣量：{{addParams.dedNewUserCount}}</span>
|
||||
<span class="sp">计划扣量：{{addParams.preDedNewUserCount}}</span>
|
||||
</div>
|
||||
<div style="margin-left:4px;color:#000"></div>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
<!-- 扣新增用户折线图 -->
|
||||
<div
|
||||
class="line1"
|
||||
ref="regChart1"
|
||||
style="width:560px;height:320px;margin-left:-30px;margin-bottom:15px"
|
||||
></div>
|
||||
<!-- 扣新增用户折线图下方表单 -->
|
||||
<el-form :model="userParam" label-width="120px" ref="userForm" :label-position="labelPosition">
|
||||
<el-form-item label="采用时间:">
|
||||
<el-date-picker
|
||||
style="width:250px"
|
||||
size="small"
|
||||
v-model="time"
|
||||
type="daterange"
|
||||
range-separator="——"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期:"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起扣时间:">
|
||||
<el-date-picker
|
||||
v-model="userParam.nuDedAt"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
@change="nuDedTime()"
|
||||
size="small"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="扣量起点(个):">
|
||||
<el-input-number
|
||||
v-model.number="userParam.nuDedLowerOutset"
|
||||
@change="userChartData()"
|
||||
placeholder="输入数字"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
:min="0"
|
||||
size="small"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="扣量比:">
|
||||
<el-input-number
|
||||
v-model="userParam.nuDeductionRatio"
|
||||
placeholder="输入数字"
|
||||
@change="userChartData()"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
:max="1"
|
||||
:min="0"
|
||||
size="small"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="开关:">
|
||||
<el-switch
|
||||
v-model="active"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item class="myFooter" style="position: absolute;bottom: -35px;right: 20px;">
|
||||
<!-- <el-button size="small">取 消</el-button> -->
|
||||
<el-button type="primary" @click="submitForm('userForm')" :loading="flag" size="small">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import echarts from "echarts";
|
||||
import { changeTime, changeSumDate } from "@/utils/global";
|
||||
export default {
|
||||
props: ["querry", "userTime"],
|
||||
data() {
|
||||
return {
|
||||
active: "",
|
||||
labelPosition: "left",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
time: "", //采用时间
|
||||
addParams: {}, //图表上方需要展示字段
|
||||
userParam: {
|
||||
id: "", //唯一码
|
||||
discCode: "",
|
||||
nuDeductionRatio: 0, //充值扣量比例
|
||||
nuDedLowerOutset: 0, //充值扣量起点
|
||||
nuDedAt: "" //充值扣量时间
|
||||
},
|
||||
nuDedAnalysis: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.intUser();
|
||||
},
|
||||
methods: {
|
||||
submitForm(userForm) {
|
||||
this.$refs[userForm].validate(valid => {
|
||||
if (valid) {
|
||||
this.editUser();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editUser() {
|
||||
let param = Object.assign({}, this.userParam, {
|
||||
deductType: this.active === true ? 2 : 0
|
||||
});
|
||||
API.updateDedNewUser(param)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑用户配置成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("editPage");
|
||||
} else {
|
||||
this.$message.error("编辑用户配置失败！");
|
||||
}
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
//扣用户--采样时间回掉
|
||||
changeTime(time) {
|
||||
this.nuDedAnalysis.startTime = time[0]
|
||||
? changeSumDate(time[0])
|
||||
: undefined;
|
||||
this.nuDedAnalysis.endTime = time[1] ? changeSumDate(time[1]) : undefined;
|
||||
this.userChartData();
|
||||
},
|
||||
//扣用户--起扣时间
|
||||
nuDedTime() {
|
||||
this.userChartData();
|
||||
},
|
||||
userChartData() {
|
||||
// 初始化echart实例
|
||||
let myChart = echarts.init(this.$refs.regChart1);
|
||||
const subTit = "注册趋势图";
|
||||
myChart.showLoading({
|
||||
text: "拼命加载中",
|
||||
color: "#d54867",
|
||||
textColor: "#d54867",
|
||||
maskColor: "rgba(255,255,255,0.8)",
|
||||
zlevel: 0
|
||||
});
|
||||
// 折线图数据接口
|
||||
// 获取新增扣用户数据 this.userParam.nuAnalysisData.discCode = this.querry.districtCode;
|
||||
const param = {
|
||||
startTime: changeSumDate(this.time[0]),
|
||||
endTime: changeSumDate(this.time[1]),
|
||||
discCode: this.userParam.discCode,
|
||||
dedLowerOutset: this.userParam.nuDedLowerOutset,
|
||||
nuDedAt: changeTime(this.userParam.nuDedAt),
|
||||
nuDedRatio: this.userParam.nuDeductionRatio
|
||||
};
|
||||
let getLineChartData = API.handleNewUserAnalysis(param);
|
||||
getLineChartData
|
||||
.then(res => {
|
||||
if (res.code == 200) {
|
||||
let time = [];
|
||||
// 新增用户要展示字段
|
||||
this.addParams = {
|
||||
oriNewUserCount: res.data.oriNewUserCount,
|
||||
dedNewUserCount: res.data.dedNewUserCount,
|
||||
preDedNewUserCount: res.data.preDedNewUserCount
|
||||
};
|
||||
let oriNewUserCountMap = [];
|
||||
let oriDedNewUserCountMap = [];
|
||||
let preDedNewUserCountMap = [];
|
||||
let tit = [];
|
||||
tit.push("原始");
|
||||
tit.push("扣量");
|
||||
tit.push("计划");
|
||||
|
||||
Object.keys(res.data.oriNewUserCountMap).forEach(key => {
|
||||
time.push(key + "h");
|
||||
if (res.data.oriNewUserCountMap[key] !== undefined) {
|
||||
oriNewUserCountMap.push(res.data.oriNewUserCountMap[key]);
|
||||
}
|
||||
if (res.data.oriDedNewUserCountMap[key] !== undefined) {
|
||||
oriDedNewUserCountMap.push(res.data.oriDedNewUserCountMap[key]);
|
||||
}
|
||||
if (res.data.preDedNewUserCountMap[key] !== undefined) {
|
||||
preDedNewUserCountMap.push(res.data.preDedNewUserCountMap[key]);
|
||||
}
|
||||
});
|
||||
myChart.hideLoading();
|
||||
let option = {
|
||||
title: {
|
||||
text: `${subTit}`
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
color: ["#1e9f38", "#111110", "#c51f00"],
|
||||
legend: {
|
||||
data: [tit[0], tit[1], tit[2]]
|
||||
},
|
||||
xAxis: {
|
||||
min: -1,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: time,
|
||||
axisLine: { onZero: false }
|
||||
},
|
||||
yAxis: {
|
||||
min: -1,
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
},
|
||||
axisLine: { onZero: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: tit[0],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: oriNewUserCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: tit[1],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: oriDedNewUserCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: tit[2],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: preDedNewUserCountMap,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "最大值" },
|
||||
{ type: "min", name: "最小值" }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: "average", name: "平均值" }]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
} else {
|
||||
myChart.showLoading({
|
||||
text: "暂无数据",
|
||||
color: "rgba(250,250,250,0.1)",
|
||||
textColor: "#8a8e91",
|
||||
maskColor: "rgba(255, 255, 255, 0.8)"
|
||||
});
|
||||
this.load = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
myChart.showLoading({
|
||||
text: "暂无数据",
|
||||
color: "rgba(250,250,250,0.1)",
|
||||
textColor: "#8a8e91",
|
||||
maskColor: "rgba(255, 255, 255, 0.8)"
|
||||
});
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
// handleClose() {
|
||||
// this.userParam.id = ""; //唯一码
|
||||
// this.userParam.nuDeductionRatio = 0; //充值扣量比例
|
||||
// this.userParam.nuDedLowerOutset = 0; //充值扣量起点
|
||||
// this.userParam.nuDedAt = ""; //充值扣量时间
|
||||
// this.userParam.nuAnalysisData.startTime = ""; //采样开始时间
|
||||
// this.userParam.nuAnalysisData.endTime = ""; //采样结束时间
|
||||
// },
|
||||
|
||||
updateUserParam(val) {
|
||||
this.userParam = {
|
||||
nuDeductionRatio: val.nuDeductionRatio,
|
||||
nuDedLowerOutset: val.nuDedLowerOutset,
|
||||
nuDedAt: val.nuDedAt,
|
||||
id: val.id,
|
||||
discCode: val.districtCode
|
||||
};
|
||||
this.time = this.userTime;
|
||||
this.active = Boolean(val.deductType & 2);
|
||||
},
|
||||
intUser() {
|
||||
this.updateUserParam(this.querry);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
querry: function(val, oldVal) {
|
||||
this.updateUserParam(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="district-action-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="(activeName ==='four' ? '800px' : '600px')"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<el-row>
|
||||
<el-col style=" padding:0px 20px;">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" @change="changeChartData">
|
||||
<el-tab-pane label="基础配置" name="first"></el-tab-pane>
|
||||
<el-tab-pane label="充值配置" name="second"></el-tab-pane>
|
||||
<el-tab-pane label="用户配置" name="third"></el-tab-pane>
|
||||
<el-tab-pane label="落地页配置" name="four"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-row>
|
||||
<!-- 基础配置 -->
|
||||
<el-col v-if=" activeName=='first'">
|
||||
<BaseCfg :querry="querry" :roleList="roleList" @editPage="editPage" ref="baseCfg" />
|
||||
</el-col>
|
||||
<!-- 充值配置 line-->
|
||||
<el-col v-if="activeName=='second' ">
|
||||
<RechargeCfg
|
||||
:querry="querry"
|
||||
:rechargeTime="rechargeTime"
|
||||
@editPage="editPage"
|
||||
ref="rechargeCfg"
|
||||
/>
|
||||
</el-col>
|
||||
<!-- 用户配置 line1-->
|
||||
<el-col v-if=" activeName=='third'">
|
||||
<UserCfg :querry="querry" :userTime="userTime" @editPage="editPage" ref="userCfg" />
|
||||
</el-col>
|
||||
<!-- 落地页配置 -->
|
||||
<el-col v-if="activeName=='four'">
|
||||
<LsdyCfg :querry="querry" @editPage="editPage" :activeName="activeName" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from "moment";
|
||||
import BaseCfg from "./components/baseCfg.vue";
|
||||
import LsdyCfg from "./components/ldyCfg.vue";
|
||||
import RechargeCfg from "./components/rechargeCfg.vue";
|
||||
import UserCfg from "./components/userCfg.vue";
|
||||
import { changeDate } from "@/utils/global";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
querry: "",
|
||||
activeName: "first",
|
||||
dialogVisible: false,
|
||||
roleList: [], //基础配置中的role列表
|
||||
userTime: "", //用户扣量时间
|
||||
rechargeTime: "", //充值扣量时间
|
||||
// 弹窗标题
|
||||
title: "",
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
};
|
||||
},
|
||||
components: { BaseCfg, LsdyCfg, UserCfg, RechargeCfg },
|
||||
mounted() {
|
||||
this.currentStarteTime = moment().format().slice(0, 10) + "T00:00:00+08:00";
|
||||
this.currentEndTsime =
|
||||
moment(moment().format()).add(1, "days").format().slice(0, 10) +
|
||||
"T00:00:00+08:00";
|
||||
},
|
||||
methods: {
|
||||
//选项卡切换
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
handleClick(tab, event) {
|
||||
this.changeChartData(); // 切换到扣消费/扣用户页面，加载echart图
|
||||
},
|
||||
changeChartData() {
|
||||
switch (this.activeName) {
|
||||
case "first":
|
||||
break;
|
||||
case "second":
|
||||
this.$nextTick(() => {
|
||||
this.$refs.rechargeCfg.rechgChartData();
|
||||
});
|
||||
break;
|
||||
case "third":
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userCfg.userChartData();
|
||||
});
|
||||
break;
|
||||
case "four":
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 调用父组件获取列表方法
|
||||
editPage() {
|
||||
this.$emit("handlerDistrictList");
|
||||
},
|
||||
|
||||
//基础配置--获取role列表
|
||||
getAuthorList() {
|
||||
API.getRoleList({
|
||||
discCode: this.querry.parent ? this.querry.parent : "ZERO_VALUE", //商区码 [必传]
|
||||
pageNumber: 1, //当前页 [必传]
|
||||
pageSize: 10, //每页条数 [必传]
|
||||
}).then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.roleList = res.data.list;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data) {
|
||||
this.querry = data;
|
||||
this.title = `【商区${data.districtCode}】编辑`;
|
||||
this.dialogVisible = true;
|
||||
//充值 采集时间判断是否为空 && 充值扣量非空判断
|
||||
this.rechargeTime = [];
|
||||
if (
|
||||
data.rechargeAnalysis.startTime === "0001-01-01T00:00:00Z" &&
|
||||
data.rechargeAnalysis.endTime === "0001-01-01T00:00:00Z"
|
||||
) {
|
||||
this.rechargeTime.push(this.currentStarteTime);
|
||||
this.rechargeTime.push(this.currentEndTsime);
|
||||
} else {
|
||||
this.rechargeTime.push(changeDate(data.rechargeAnalysis.startTime));
|
||||
this.rechargeTime.push(changeDate(data.rechargeAnalysis.endTime));
|
||||
}
|
||||
if (data.rechgDedAt.slice(0, 4) == "0001") {
|
||||
data.rechgDedAt = this.currentEndTsime;
|
||||
}
|
||||
|
||||
//用户采集时间判断是否为空 &&用户扣量非空判断
|
||||
this.userTime = [];
|
||||
if (
|
||||
data.nuDedAnalysis.startTime === "0001-01-01T00:00:00Z" &&
|
||||
data.nuDedAnalysis.endTime === "0001-01-01T00:00:00Z"
|
||||
) {
|
||||
this.userTime.push(this.currentStarteTime);
|
||||
this.userTime.push(this.currentEndTsime);
|
||||
} else {
|
||||
this.userTime.push(changeDate(data.nuDedAnalysis.startTime));
|
||||
this.userTime.push(changeDate(data.nuDedAnalysis.endTime));
|
||||
}
|
||||
if (data.nuDedAt.slice(0, 4) == "0001") {
|
||||
data.nuDedAt = this.currentEndTsime;
|
||||
}
|
||||
|
||||
//每次打开编辑页 强制展示基础配置tag
|
||||
this.activeName = "first";
|
||||
this.getAuthorList();
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.district-action-box {
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.p_row {
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
margin: 0 6px;
|
||||
width: 460px !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.sp {
|
||||
color: #000000;
|
||||
}
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="agent-action-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="700px" class="el-dialogs">
|
||||
<p v-for="(item, i) in data" :key="i" class="link">{{'推广链接' + (i+1) + ': ' + item.inviteLink}} <span style="margin-left: 15px;" v-if="item.linkRemark">备注：{{item.linkRemark}}</span> </p>
|
||||
<div v-if="data.length === 0">暂无数据</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { validatorHanzi } from '@/utils/validator';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 弹窗标题
|
||||
title: '推广链接查看',
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data) {
|
||||
this.dialogVisible = true;
|
||||
this.data = data.inviteLink.length > 0 ? data.inviteLink : [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.agent-action-box {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
.checked {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
.el-pagination {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="recharge-list-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose" :close-on-click-modal="false" class="el-dialogs">
|
||||
<div class="recharge-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input size="small" clearable placeholder="流水id" v-model="params.id" @keyup.native.enter="getPayHisList('status')" class="param-input" />
|
||||
<el-input size="small" clearable placeholder="用户id" @change="getPayHisList('status')" v-model.number="params.uid" @keyup.native.enter="getPayHisList('status')" class="param-input" />
|
||||
<el-input size="small" clearable placeholder="推广序列" v-model="params.promSeqe" @keyup.native.enter="getPayHisList('status')" class="param-input" />
|
||||
<el-select v-model="params.isDirect" clearable size="small" placeholder="用户类型" @change="getPayHisList('status')" >
|
||||
<el-option :value="true" label="直推用户"></el-option>
|
||||
<el-option :value="false" label="裂变用户"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="params.sysType" clearable size="small" placeholder="请选择系统类型" @change="getPayHisList('status')">
|
||||
<el-option v-for="item in ['android','ios']" :value="item" :label="item" :key="item"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker v-model="params.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getPayHisList('status')">搜索</el-button>
|
||||
</div>
|
||||
<div class="price-box">购买总金额: {{rchgordMoney | numFormat}}元</div>
|
||||
<!--数据表格-->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
|
||||
<el-table-column prop="id" label="流水id" align="center" min-width="200" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户id" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="promSeqe" show-overflow-tooltip label="推广序列" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.promSeqe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sysType" label="系统类型" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sysType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isDirect" show-overflow-tooltip label="是直推用户" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.isDirect === true ? '是':'否'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="purchaseOrder" label="订单号" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.purchaseOrder }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金额" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.amount +'元' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tranType" label="交易类型" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.tranType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="desc" label="描述" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.desc }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" align="center" fixed="right" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="editDesc(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination :page-sizes="[10, 15, 20, 25]" :current-page="params.pageNumber" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
<div class="zw"></div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from '@/utils/global';
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '购买VIP记录',
|
||||
tableData: [],
|
||||
time: '',
|
||||
loading: false,
|
||||
rchgordMoney:0,
|
||||
total: 0,
|
||||
// 请求订单列表参数
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
id: '', //流水id
|
||||
time:'',
|
||||
uid: '', //用户UID
|
||||
promSeqe: '', //推广序列
|
||||
sysType: '', //系统类型
|
||||
isDirect: '', //是否是直推用户
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
discCode:'',//商区码
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 请求订单列表
|
||||
getPayHisList(type) {
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.getPayHisList(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
this.rchgordMoney = res.data.amountSum
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 打开弹窗
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.agent = row.agent;
|
||||
this.params.discCode =row.districtCode
|
||||
// this.params.discCode = row.districtCode
|
||||
this.getPayHisList();
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params= {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
id: '', //流水id
|
||||
uid: '', //用户UID
|
||||
time:'',
|
||||
promSeqe: '', //推广序列
|
||||
sysType: '', //系统类型
|
||||
isDirect: '', //是否是直推用户
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
discCode:'',//商区码
|
||||
}
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.getPayHisList()
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number
|
||||
this.getPayHisList()
|
||||
},
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || ''
|
||||
this.params.endTime = changeTime(time[1]) || ''
|
||||
} else {
|
||||
this.params.startTime = ''
|
||||
this.params.endTime = ''
|
||||
}
|
||||
this.getPayHisList('status')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.zw {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="recharge-list-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="1400px" :before-close="handleClose" :close-on-click-modal="false" class="el-dialogs">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input size="small" clearable placeholder="流水id" v-model="params.id" @keyup.native.enter="getRechargeList('status')" class="param-input" />
|
||||
<el-input size="small" clearable placeholder="用户id" v-model.number="params.uid" @keyup.native.enter="getRechargeList('status')" class="param-input" />
|
||||
充值类型:
|
||||
<el-select v-model="params.rechargeType" clearable size="small" placeholder="请选择充值类型" @change="getRechargeList('status')" >
|
||||
<el-option v-for="item in rechageList" :value="item.value" :label="item.label" :key="item.value" ></el-option>
|
||||
</el-select>
|
||||
订单状态:
|
||||
<el-select v-model.number="params.status" clearable size="small" placeholder="请选择订单状态" @change="getRechargeList('status')">
|
||||
<el-option v-for="item in statusList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
|
||||
<el-button type="primary" size="small" @click="getRechargeList('status')">搜索</el-button>
|
||||
</div>
|
||||
<div class="price-box">总充值金额: {{rchgordMoney | numFormat}}元</div>
|
||||
<!--数据表格-->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="id" label="流水id" align="center" min-width="220" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户id" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="promSeqe" label="推广序列" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.promSeqe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkRemark" label="链接备注" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.linkRemark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devID" show-overflow-tooltip label="设备id" align="center" min-width="320">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.devID }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="oid" label="支付平台订单号" align="center" min-width="320">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.oid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="userIP" show-overflow-tooltip label="用户IP" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userIP }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="用户名称" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tel" label="用户手机号码" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.tel }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payAct" label="支付账号" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payAct }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devType" label="设备系统类型" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.devType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金币" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.amount || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="money" label="充值金额" align="center" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.money/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payMoney" label="实际到账金额" align="center" min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.payMoney || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rechargeType" label="充值类型" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.rechargeType | rechargeRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="订单状态" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.status | statusRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="statusDesc" label="状态描述" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.statusDesc || '无'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.updatedAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" align="center" fixed="right" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="editDesc(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination :page-sizes="[5]" :current-page="params.pageNumber" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 5" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
<div class="zw"></div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from '@/utils/global'
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '充值记录查看',
|
||||
tableData: [],
|
||||
time: '',
|
||||
rchgordMoney: 0,
|
||||
loading: false,
|
||||
total: 0,
|
||||
// 充值类型选择
|
||||
rechageList:[
|
||||
{
|
||||
value: 'alipay',
|
||||
label: '支付宝'
|
||||
},
|
||||
{
|
||||
value: 'wechat',
|
||||
label: '微信'
|
||||
},
|
||||
{
|
||||
value: 'bankcard',
|
||||
label: '银行卡'
|
||||
}
|
||||
],
|
||||
// 订单状态选择
|
||||
statusList:[
|
||||
{
|
||||
value: 0,
|
||||
label: '下单失败'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '进行中'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '付款失败'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '付款成功'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '已经退款'
|
||||
},
|
||||
],
|
||||
// 请求订单列表参数
|
||||
params: {
|
||||
discCode:'',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
startTime: '',
|
||||
id: '',
|
||||
uid: '',
|
||||
rechargeType: '',
|
||||
status: 3,
|
||||
endTime: '',
|
||||
agent: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
rechargeRule(val) {
|
||||
const typeList = {
|
||||
alipay: '支付宝',
|
||||
wechat: '微信',
|
||||
bankcard: '银行卡'
|
||||
}
|
||||
return typeList[val] ? typeList[val] : '未知'
|
||||
},
|
||||
statusRule(val) {
|
||||
const statusList = {
|
||||
0: '下单失败',
|
||||
1: '进行中',
|
||||
2: '付款失败',
|
||||
3: '付款成功',
|
||||
4: '已经退款',
|
||||
}
|
||||
return statusList[val] ? statusList[val] : '未知'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 请求订单列表
|
||||
getRechargeList(type) {
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.getRechargeList(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
this.rchgordMoney = res.data.rchgordMoney
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.getRechargeList()
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number
|
||||
this.getRechargeList()
|
||||
},
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || ''
|
||||
this.params.endTime = changeTime(time[1]) || ''
|
||||
} else {
|
||||
this.params.startTime = ''
|
||||
this.params.endTime = ''
|
||||
}
|
||||
this.getRechargeList('status')
|
||||
},
|
||||
// 打开弹窗
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.agent = row.agent;
|
||||
this.params.discCode = row.districtCode
|
||||
this.getRechargeList();
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params= {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
startTime: '',
|
||||
id: '',
|
||||
uid: '',
|
||||
rechargeType: '',
|
||||
status: 3,
|
||||
endTime: '',
|
||||
agent: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.recharge-list-box {
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
color: #e63765;
|
||||
vertical-align: middle !important;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
.zw {
|
||||
height: 100px;
|
||||
}
|
||||
.price-box {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<div class="recharge-list-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="1400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<div class="recharge-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<!-- <el-input size="small" clearable placeholder="流水id" v-model="params.id" @keyup.native.enter="getPayHisList('status')" class="param-input" /> -->
|
||||
<!-- <el-input size="small" clearable placeholder="用户id" v-model.number="params.uid" @keyup.native.enter="getPayHisList('status')" class="param-input" /> -->
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="商区码"
|
||||
v-model="params.subDiscCode"
|
||||
@change="getStatDailyList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="推广序列"
|
||||
v-model="params.seqe"
|
||||
@change="getStatDailyList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<!-- <el-select v-model="params.isDirect" clearable size="small" placeholder="用户类型" @change="getPayHisList('status')" >
|
||||
<el-option :value="true" label="直推用户"></el-option>
|
||||
<el-option :value="false" label="分裂用户"></el-option>
|
||||
</el-select>-->
|
||||
<el-select
|
||||
v-model="params.sysType"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请选择系统类型"
|
||||
@change="getStatDailyList('status')"
|
||||
>
|
||||
<el-option v-for="item in ['android', 'ios']" :value="item" :label="item" :key="item"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="params.time"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getStatDailyList('status')">搜索</el-button>
|
||||
<div>
|
||||
<el-checkbox v-model="isDed" label="切换到扣量" @click="isExpandOne"></el-checkbox>
|
||||
<el-checkbox v-model="isShow" label="展示直推和裂变" @click="isExpand"></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column fixed prop="sumDate" label="日期" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.sumDate === '总共'">{{ scope.row.sumDate }}</span>
|
||||
<span v-else>{{ scope.row.sumDate | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed prop="districtCode" label="商区码" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.districtCode || " " }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sysType" label="系统类型" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sysType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="seqe" label="推广序列" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.seqe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkRemark" label="链接备注" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.linkRemark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dividendRatio" label="分红比" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.dividendRatio | filtersDividendRatio }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="商区账号" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="newUIDCount" label="注册数" align="center" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.newUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.newUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newDirectUIDCount"
|
||||
label="直推注册数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.newDirectUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.newDirectUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newFissionUIDCount"
|
||||
label="分裂注册数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.newFissionUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.newFissionUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rechargeCompleteOrderCount"
|
||||
label="充值单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.rechargeCompleteOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.rechargeCompleteOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directRechargePaidOrderCount"
|
||||
label="直推充值单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directRechargePaidOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directRechargePaidOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionRechargePaidOrderCount"
|
||||
label="分裂充值单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionRechargePaidOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionRechargePaidOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rechargeCompleteOrderAmount"
|
||||
label="充值金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.rechargeCompleteOrderAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.rechargeCompleteOrderAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directRechargePaidAmount"
|
||||
label="直推充值金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directRechargePaidAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directRechargePaidAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionRechargePaidAmount"
|
||||
label="分裂充值金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionRechargePaidAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionRechargePaidAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newAndRechargeOrderCount"
|
||||
label="新增充值单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.newAndRechargeOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.newAndRechargeOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newAndRechargeOrderYuan"
|
||||
label="新增充值金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.newAndRechargeOrderYuan |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.newAndRechargeOrderYuan |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="arpu" label="ARPU" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.arpu |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.arpu |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="userFissionRatio" label="用户分裂率" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.userFissionRatio + "%" |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.userFissionRatio + "%" |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
|
||||
<el-table-column prop="buyVIPCount" label="VIP数" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.buyVIPCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.buyVIPCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directBuyVIPCount"
|
||||
label="直推VIP数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directBuyVIPCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directBuyVIPCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionBuyVIPCount"
|
||||
label="分裂VIP数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionBuyVIPCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionBuyVIPCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="buyVIPAmount" label="VIP金额(元)" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.buyVIPAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.buyVIPAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="directBuyVIPAmount"
|
||||
label="直推VIP金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directBuyVIPAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directBuyVIPAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionBuyVIPAmount"
|
||||
label="分裂VIP金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionBuyVIPAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionBuyVIPAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="buyVIPUIDCount" label="VIP用户数" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.buyVIPUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.buyVIPUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directBuyVIPUIDCount"
|
||||
label="直推VIP用户数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directBuyVIPUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directBuyVIPUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionBuyVIPUIDCount"
|
||||
label="分裂VIP用户数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionBuyVIPUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionBuyVIPUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="buyVIDTaxAmount" label="视频收益(元)" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.buyVIDTaxAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.buyVIDTaxAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directBuyVIDTaxAmount"
|
||||
label="直推视频收益(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directBuyVIDTaxAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directBuyVIDTaxAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionBuyVIDTaxAmount"
|
||||
label="分裂视频收益(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionBuyVIDTaxAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionBuyVIDTaxAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="consume" label="消费(元)" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.consume |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.consume |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directConsume"
|
||||
label="直推消费(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directConsume |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directConsume |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionConsume"
|
||||
label="分裂消费(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionConsume |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionConsume |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directARPU"
|
||||
label="直推ARPU"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directARPU |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directARPU |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionARPU"
|
||||
label="分裂ARPU"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionARPU |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionARPU |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="withDrawPaidOrderCount"
|
||||
label="出款单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.withDrawPaidOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.withDrawPaidOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directWithDrawPaidOrderCount"
|
||||
label="直推出款单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directWithDrawPaidOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directWithDrawPaidOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionWithDrawPaidOrderCount"
|
||||
label="分裂出款单数"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionWithDrawPaidOrderCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionWithDrawPaidOrderCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="withDrawPaidAmount" label="出款金额(元)" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.withDrawPaidAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.withDrawPaidAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directWithDrawPaidAmount"
|
||||
label="直推出款金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directWithDrawPaidAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directWithDrawPaidAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionWithDrawPaidAmount"
|
||||
label="分裂出款金额(元)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionWithDrawPaidAmount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionWithDrawPaidAmount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="visitUIDCount" label="日活跃" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.visitUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.visitUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directVisitUIDCount"
|
||||
label="直推日活跃"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directVisitUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directVisitUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionVisitUIDCount"
|
||||
label="分裂日活跃"
|
||||
align="center"
|
||||
min-width="100"
|
||||
v-if="isShow"
|
||||
:key="Math.random()"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionVisitUIDCount |fixed2}}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionVisitUIDCount |fixed2}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="nextDayRetainUIDRatio"
|
||||
label="次日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.nextDayRetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.nextDayRetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="day3RetainUIDRatio" label="3日留存率" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.day3RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.day3RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="day7RetainUIDRatio" label="7日留存率" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.day7RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.day7RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="day15RetainUIDRatio" label="15日留存率" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.day15RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.day15RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="day30RetainUIDRatio" label="30日留存率" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.day30RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.day30RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directNextDayRetainUIDRatio"
|
||||
label="直推次日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directNextDayRetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directNextDayRetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directDay3RetainUIDRatio"
|
||||
label="直推3日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directDay3RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directDay3RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directDay7RetainUIDRatio"
|
||||
label="直推7日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directDay7RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directDay7RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directDay15RetainUIDRatio"
|
||||
label="直推15日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directDay15RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directDay15RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="directDay30RetainUIDRatio"
|
||||
label="直推30日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.directDay30RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.directDay30RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionNextDayRetainUIDRatio"
|
||||
label="分裂次日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionNextDayRetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionNextDayRetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionDay3RetainUIDRatio"
|
||||
label="分裂3日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionDay3RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionDay3RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionDay7RetainUIDRatio"
|
||||
label="分裂7日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionDay7RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionDay7RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionDay15RetainUIDRatio"
|
||||
label="分裂15日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionDay15RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionDay15RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fissionDay30RetainUIDRatio"
|
||||
label="分裂30日留存率"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="isDed">{{ scope.row.dedDailyData.fissionDay30RetainUIDRatio + "%" }}</span>
|
||||
<span v-else>{{ scope.row.dailyData.fissionDay30RetainUIDRatio + "%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="操作" align="center" fixed="right" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="editDesc(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 25]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div class="zw"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from "@/utils/global";
|
||||
import local from "@/utils/localStroage";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDed: false, //控制切换扣量
|
||||
isShow: false, //控制直推裂变
|
||||
sum: {},
|
||||
dialogVisible: false,
|
||||
title: "每日统计",
|
||||
tableData: [],
|
||||
showMap: {},
|
||||
loading: false,
|
||||
rchgordMoney: 0,
|
||||
total: 0,
|
||||
// 请求订单列表参数
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
time: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
seqe: "",
|
||||
subDiscCode: "", //下级商区码
|
||||
discCode: "",
|
||||
sysType: "", //系统类型
|
||||
// sortKey: '',
|
||||
// sortValue: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
filtersDividendRatio(params) {
|
||||
if (params) {
|
||||
return params + "%";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
let actJson = local.get("userInfo").actJson
|
||||
? JSON.parse(local.get("userInfo").actJson)
|
||||
: {};
|
||||
this.initShowMap(actJson.checked);
|
||||
this.initShowMap(actJson.halfChecked);
|
||||
},
|
||||
methods: {
|
||||
//初始化显示项
|
||||
initShowMap(actJson) {
|
||||
if (!actJson) return false;
|
||||
for (let k in actJson) {
|
||||
let auth = actJson[k];
|
||||
if (auth.children) {
|
||||
this.initShowMap(auth.children);
|
||||
}
|
||||
if (typeof auth === "string") {
|
||||
this.showMap[auth] = true;
|
||||
} else {
|
||||
this.showMap[auth.name] = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
//根据勾选权限判断是否显示
|
||||
hasItemAuth(key) {
|
||||
if (!this.showMap[key]) return false;
|
||||
return this.showMap[key];
|
||||
},
|
||||
|
||||
isExpand() {
|
||||
this.isShow = this.isShow ? false : true;
|
||||
},
|
||||
isExpandOne() {
|
||||
this.isDed = this.isDed ? false : true;
|
||||
},
|
||||
// 请求订单统计列表
|
||||
getStatDailyList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
let params = Object.assign({}, this.params, {
|
||||
discCode: this.params.discCode,
|
||||
srd: this.hasItemAuth("isRealData1"),
|
||||
});
|
||||
API.getStatDailyList(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
// this.tableData = res.data.list
|
||||
this.tableData = [];
|
||||
this.total = res.data.total;
|
||||
this.sum = {
|
||||
sumDate: "总共",
|
||||
subDiscCode: "",
|
||||
seqe: "",
|
||||
dividendRatio: "",
|
||||
name: "",
|
||||
dailyData: res.data.sum,
|
||||
dedDailyData: res.data.dedSum,
|
||||
};
|
||||
this.tableData = res.data.list;
|
||||
this.tableData.unshift(this.sum);
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 打开弹窗
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.agent = row.agent;
|
||||
this.params.discCode = row.districtCode;
|
||||
this.getStatDailyList();
|
||||
this.title = "【商区" + row.districtCode + "】每日统计表单";
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
time: "",
|
||||
seqe: "",
|
||||
discCode: "", //商区码
|
||||
sysType: "", //系统类型
|
||||
};
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getStatDailyList();
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getStatDailyList();
|
||||
},
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || "";
|
||||
this.params.endTime = changeTime(time[1]) || "";
|
||||
} else {
|
||||
this.params.startTime = "";
|
||||
this.params.endTime = "";
|
||||
}
|
||||
this.getStatDailyList("status");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.zw {
|
||||
height: 100px;
|
||||
}
|
||||
.recharge-list-box tbody tr.el-table__row:first-child {
|
||||
background: #ccc;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="edit-link-box">
|
||||
<el-dialog
|
||||
title="结算账单"
|
||||
:visible.sync="dialogVisible"
|
||||
top="1%"
|
||||
width="88%"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<div class="statSettlement-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="流水id"
|
||||
v-model="params.id"
|
||||
@change="getStatSettlementList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-select
|
||||
v-model="params.billType"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="交易类型"
|
||||
@change="getStatSettlementList('status')"
|
||||
>
|
||||
<el-option :value="1" label="收入"></el-option>
|
||||
<el-option :value="2" label="提现"></el-option>
|
||||
<el-option :value="3" label="退款"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="getStatSettlementList('status')">搜索</el-button>
|
||||
</div>
|
||||
<div class="price-box">总金额: {{sumYuan}}元</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column prop="id" label="id" align="center" min-width="220" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sumDate" label="日期" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.sumDate | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.districtCode}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="账号" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="billType" label="交易类型" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.billType | filterType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="transNo" label="交易订单号" align="center" min-width="260">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.transNo }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yuan"
|
||||
show-overflow-tooltip
|
||||
label="人民币元"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.yuan }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="desc" label="记录描述" align="center" min-width="350">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.desc }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="withd:500px">
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 25]"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer" style="height:80px"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from "@/utils/global";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// currentPage4: 4,
|
||||
title: "结算账单",
|
||||
tableData: [],
|
||||
time: "",
|
||||
loading: false,
|
||||
sumYuan: 0,
|
||||
total: 0,
|
||||
// 请求订单列表参数
|
||||
index: 0,
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 提交按钮状态
|
||||
flag: false,
|
||||
// 编辑链接参数
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
id: "", //流水id
|
||||
billType: "", //用户UID
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
discCode: "" //商区码
|
||||
}
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
filterType(params) {
|
||||
switch (params) {
|
||||
case 1:
|
||||
return "收入";
|
||||
case 2:
|
||||
return "提现";
|
||||
case 3:
|
||||
return "退款";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 请求订单列表
|
||||
getStatSettlementList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getStatSettlementList(this.params)
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.sumYuan = res.data.sumYuan;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getStatSettlementList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getStatSettlementList();
|
||||
},
|
||||
// 时间选择回调
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || "";
|
||||
this.params.endTime = changeTime(time[1]) || "";
|
||||
} else {
|
||||
this.params.startTime = "";
|
||||
this.params.endTime = "";
|
||||
}
|
||||
this.getStatSettlementList("status");
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
id: "", //流水id
|
||||
billType: "", //用户UID
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
discCode: "" //商区码
|
||||
};
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.agent = row.agent;
|
||||
this.params.discCode = row.districtCode;
|
||||
this.getStatSettlementList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.statSettlement-list-box {
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
color: #e63765;
|
||||
vertical-align: middle !important;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
.zw {
|
||||
height: 100px;
|
||||
}
|
||||
.price-box {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<div class="edit-link-box">
|
||||
<el-dialog
|
||||
:title="this.params.parent+ ' 下级代理'"
|
||||
:visible.sync="dialogVisible"
|
||||
top="1%"
|
||||
width="1400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
class="el-dialogs"
|
||||
>
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="商区码"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model="params.districtCode"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="用户名"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model.number="params.name"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="手机号码"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model="params.mobile"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button type="primary" size="small" @click="getDistrictList()">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="addSubDistrict">添加</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
ref="multipleTable"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="620"
|
||||
>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="120" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="parent" label="上级商区" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.parent }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discType" label="商区类型" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.discType | handleFilterDiscType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="用户名" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="mobile" label="手机号码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mobile }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="password" label="用户密码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>{{ scope.row.password }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag type="info" size="medium">查看密码</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="inviteLink"
|
||||
label="邀请链接"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- <span>{{scope.row.inviteLink || '未知'}}</span> -->
|
||||
<el-button type="primary" @click="showLink(scope.row)" size="mini">查看推广链接</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="balance" label="余额/元" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.balance || "无" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "无" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="添加时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disable" label="启用商区" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disable"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disable ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lock" label="允许登陆" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.lock"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.lock ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disTrans" label="允许提现" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disTrans"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disTrans ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deductType" label="扣量方式" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.deductType | deductionType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="nuDeductionRatio" label="用户扣量比例" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.nuDeductionRatio*100).toFixed(2) || "0" }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deductionRatio" label="消费扣量比例" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.deductionRatio*100).toFixed(2) || "0" }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operating"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
type="flex"
|
||||
justify="end"
|
||||
min-width="340"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div style="operating">
|
||||
<div style="margin-bottom:5px">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="editDistrict(scope.row)"
|
||||
>编 辑</el-button>
|
||||
<el-button
|
||||
:type="scope.row.disable ? 'success' : 'danger'"
|
||||
size="mini"
|
||||
@click="ban(scope.row)"
|
||||
>{{ scope.row.disable ? "启 用" : "禁 用" }}</el-button>
|
||||
<el-button
|
||||
class="flex-item"
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="remove(scope.row.id)"
|
||||
>删 除</el-button>
|
||||
<el-button size="mini" @click="rechage(scope.row)">充值记录</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="mini" @click="statDialy(scope.row)">每日统计</el-button>
|
||||
<el-button size="mini" @click="payVIPHis(scope.row)">购买记录</el-button>
|
||||
<el-button size="mini" @click="widthdraw(scope.row)">提现记录</el-button>
|
||||
<el-button size="mini" @click="statSettlement(scope.row)">结算账单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</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 > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<div class="zw"></div>
|
||||
</el-dialog>
|
||||
<!--编辑tag弹窗-->
|
||||
<edit-district ref="editDistrict" @handlerDistrictList="getDistrictList"></edit-district>
|
||||
<!--新增tag弹窗-->
|
||||
<add-sub-district ref="addSubDistrict" @handlerAddDistrict="getDistrictList()"></add-sub-district>
|
||||
<rechage-popup ref="rechage"></rechage-popup>
|
||||
<widthdraw-popup ref="widthdraw"></widthdraw-popup>
|
||||
<!--查看分享链接-->
|
||||
<link-popup ref="linkPopup"></link-popup>
|
||||
<PayHisPopup ref="payHisPopup"></PayHisPopup>
|
||||
<StatDialy ref="statDialy"></StatDialy>
|
||||
<StatSettlement ref="statSettlement"></StatSettlement>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import editDistrict from "./editPage/editDistrict";
|
||||
import AddSubDistrict from "./addSubDistrict";
|
||||
import RechagePopup from "./rechagePopup";
|
||||
import WidthdrawPopup from "./widthdrawPopup";
|
||||
import LinkPopup from "./linkPopup";
|
||||
import PayHisPopup from "./payHisPopup";
|
||||
import StatDialy from "./statDialy";
|
||||
import StatSettlement from "./statSettlement";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 外层弹出框
|
||||
dialogVisible: false,
|
||||
// 列表数据
|
||||
text: "",
|
||||
loading: false,
|
||||
total: 0,
|
||||
tableData: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
parent: "",
|
||||
districtCode: "",
|
||||
name: "",
|
||||
// showChild: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
handleFilterDiscType(params) {
|
||||
if (params === undefined || params === "") {
|
||||
return;
|
||||
}
|
||||
switch (params) {
|
||||
case 0:
|
||||
return "CPS";
|
||||
case 1:
|
||||
return "CPA";
|
||||
}
|
||||
},
|
||||
deductionType(params) {
|
||||
if (params === undefined || params === "") {
|
||||
return;
|
||||
}
|
||||
switch (params) {
|
||||
case 0:
|
||||
return "不扣量";
|
||||
case 1:
|
||||
return "扣消费";
|
||||
case 2:
|
||||
return "扣用户";
|
||||
case 3:
|
||||
return "扣消费和用户";
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
editDistrict,
|
||||
AddSubDistrict,
|
||||
RechagePopup,
|
||||
WidthdrawPopup,
|
||||
LinkPopup,
|
||||
PayHisPopup,
|
||||
StatDialy,
|
||||
StatSettlement,
|
||||
},
|
||||
methods: {
|
||||
// 获取商区代理列表
|
||||
getDistrictList(type) {
|
||||
this.loading = true;
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getDistrictList(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.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getDistrictList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getDistrictList();
|
||||
},
|
||||
// 禁用商区代理
|
||||
ban(row) {
|
||||
let params = { id: row.id, enable: row.disable };
|
||||
let t = row.disable ? "启用" : "禁用";
|
||||
let sucMsg = {
|
||||
message:
|
||||
"[商区: " + row.districtCode + "] " + t + "登陆、提现、结算功能成功",
|
||||
type: "success",
|
||||
};
|
||||
this.$confirm(
|
||||
"您确定要" + t + "当前代理的登陆、提现、结算功能吗？",
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
API.disDistrict(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message(sucMsg);
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("操作失败！");
|
||||
}
|
||||
}
|
||||
this.getDistrictList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm("您确定要删除这条商区信息吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
API.delDistrict({ id: id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getDistrictList();
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("删除失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//修改商区代理
|
||||
editDistrict(data) {
|
||||
this.$refs.editDistrict.open(data);
|
||||
},
|
||||
// 新增商区代理
|
||||
addSubDistrict() {
|
||||
this.$refs.addSubDistrict.open(this.params.parent);
|
||||
},
|
||||
// 查看上去代理充值列表
|
||||
rechage(row) {
|
||||
this.$refs.rechage.open(row);
|
||||
},
|
||||
// widthdraw
|
||||
widthdraw(row) {
|
||||
this.$refs.widthdraw.open(row);
|
||||
},
|
||||
// 查看邀请链接
|
||||
showLink(row) {
|
||||
this.$refs.linkPopup.open(row);
|
||||
},
|
||||
payVIPHis(row) {
|
||||
this.$refs.payHisPopup.open(row);
|
||||
},
|
||||
statDialy(row) {
|
||||
this.$refs.statDialy.open(row);
|
||||
},
|
||||
statSettlement(row) {
|
||||
this.$refs.statSettlement.open(row);
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
id: "", //流水id
|
||||
billType: "", //用户UID
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
discCode: "", //商区码
|
||||
};
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.parent = row.districtCode;
|
||||
this.getDistrictList("status");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.operating {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="withdraw-list-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose" :close-on-click-modal="false" class="el-dialogs">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input size="small" clearable placeholder="流水id" v-model="params.id" @keyup.native.enter="getWithdrawList('status')" class="param-input" />
|
||||
<el-input size="small" clearable placeholder="用户id" v-model.number="params.uid" @keyup.native.enter="getWithdrawList('status')" class="param-input" />
|
||||
提现类型:
|
||||
<el-select v-model.number="params.withdrawType" clearable size="small" placeholder="请选择提现类型" @change="getWithdrawList('status')">
|
||||
<el-option v-for="item in withdrawList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
订单状态:
|
||||
<el-select v-model.number="params.status" clearable size="small" placeholder="请选择订单状态" @change="getWithdrawList('status')">
|
||||
<el-option v-for="item in statusList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
提现方式:
|
||||
<el-select v-model="params.payType" clearable size="small" placeholder="请选择提现方式" @change="getWithdrawList('status')">
|
||||
<el-option v-for="item in payList" :value="item.value" :label="item.label" :key="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker v-model="params.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getWithdrawList('status')">搜索</el-button>
|
||||
</div>
|
||||
<div class="price-box">总提现金额: {{witdordMoney | numFormat}}元</div>
|
||||
<!--数据表格-->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
|
||||
<el-table-column prop="id" label="流水id" align="center" min-width="220" fixed>
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="promSeqe" label="推广序列" align="center" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.promSeqe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="linkRemark" label="链接备注" align="center" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.linkRemark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="用户名称" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户id" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金币" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.amount || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="oid" label="第三方平台id" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.oid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="money" label="提现金额" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.money/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payMoney" label="实际到账金额" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.payMoney || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payType" label="提现方式" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payType | payRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="withdrawType" label="提现类型" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.withdrawType | withdrawRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actName" label="交易账户持有人" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.actName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="act" label="交易账户" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.act}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="userIP" label="用户IP" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userIP }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceType" label="设备系统类型" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.deviceType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devID" label="设备id" align="center" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.devID }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="订单状态" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.status | statusRule}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="statusDesc" label="状态描述" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.statusDesc || '无'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="updatedAt" label="更新时间" align="center" min-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="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="editDesc(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination :page-sizes="[5]" :current-page="params.pageNumber" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 5" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
<div class="zw"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { changeTime } from '@/utils/global'
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '提现记录查看',
|
||||
tableData: [],
|
||||
time: '',
|
||||
loading: false,
|
||||
witdordMoney: 0,
|
||||
total: 0,
|
||||
// 提现类型选择
|
||||
withdrawList:[
|
||||
{
|
||||
label: '代理提现',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '金币提现',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '商区提现',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
// 订单状态选择
|
||||
statusList:[
|
||||
{
|
||||
label: '未审核',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '审核通过，转账中',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已拒绝',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '未知错误',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '提现成功',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: '提现失败',
|
||||
value: 6
|
||||
},
|
||||
],
|
||||
// 提现方式选择
|
||||
payList:[
|
||||
{
|
||||
label: '支付宝',
|
||||
value: 'alipay'
|
||||
},
|
||||
{
|
||||
label: '银行卡',
|
||||
value: 'bankcard'
|
||||
},
|
||||
],
|
||||
// 请求订单列表参数
|
||||
params: {
|
||||
discCode:'',
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
time:'',
|
||||
id: '',
|
||||
uid: '',
|
||||
withdrawType: '',
|
||||
status: 5,
|
||||
payType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
agent: '',
|
||||
// sortKey: '',
|
||||
// sortValue: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusRule(val) {
|
||||
const statusList = {
|
||||
1: '未审核',
|
||||
2: '审核通过',
|
||||
3: '已拒绝',
|
||||
4: '未知错误',
|
||||
5: '提现成功',
|
||||
6: '提现失败'
|
||||
}
|
||||
return statusList[val] ? statusList[val] : '未知'
|
||||
},
|
||||
payRule(val) {
|
||||
const payList = {
|
||||
alipay: '支付宝',
|
||||
bankcard: '银行卡',
|
||||
}
|
||||
return payList[val] ? payList[val] : '未知'
|
||||
},
|
||||
withdrawRule(val) {
|
||||
const withdrawList = {
|
||||
0: '代理提现',
|
||||
1: '金币提现',
|
||||
2: '商区提现'
|
||||
}
|
||||
return withdrawList[val] ? withdrawList[val] : '未知'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 请求提现记录列表
|
||||
getWithdrawList(type) {
|
||||
if (type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.getWithdrawLists(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
this.witdordMoney = res.data.witdordMoney
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.getWithdrawList()
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number
|
||||
this.getWithdrawList()
|
||||
},
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || ''
|
||||
this.params.endTime = changeTime(time[1]) || ''
|
||||
} else {
|
||||
this.params.startTime = ''
|
||||
this.params.endTime = ''
|
||||
}
|
||||
this.getWithdrawList('status')
|
||||
},
|
||||
// 打开弹窗
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.agent = row.agent;
|
||||
this.params.discCode = row.districtCode
|
||||
this.getWithdrawList();
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params= {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
id: '',
|
||||
uid: '',
|
||||
time:'',
|
||||
withdrawType: '',
|
||||
status: 5,
|
||||
payType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
agent: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.withdraw-list-box {
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
color: #e63765;
|
||||
vertical-align: middle !important;
|
||||
&:hover {
|
||||
color: #eb5f84;
|
||||
}
|
||||
}
|
||||
.zw {
|
||||
height: 100px;
|
||||
}
|
||||
.price-box {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+522
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<div class="districtProvider district-provider-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="params.discType"
|
||||
size="small"
|
||||
placeholder="请选择商区类型"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in discTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
placeholder="商区码"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model="params.districtCode"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="用户名"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model="params.name"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="手机号码"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model="params.mobile"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="备注"
|
||||
size="small"
|
||||
@clear="getDistrictList"
|
||||
class="param-input"
|
||||
v-model.number="params.remark"
|
||||
@change="getDistrictList()"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button type="primary" size="small" @click="getDistrictList('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="addDistrict">添加</el-button>
|
||||
<div>
|
||||
<el-checkbox v-model="checked" @change="getDistrictList('status')">显示子渠道</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
ref="multipleTable"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
height="620"
|
||||
>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" width="150" fixed>
|
||||
<template slot-scope="scope">
|
||||
<p v-if="scope.row.parent" style="background: #FF9300; color: white;">{{scope.row.parent}}</p>
|
||||
<p>{{ scope.row.districtCode }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discType" label="商区类型" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.discType | handleFilterDiscType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="用户名" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="mobile" label="手机号码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mobile }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="password" label="用户密码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>{{ scope.row.password }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag type="info" size="medium">查看密码</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="inviteLink"
|
||||
label="邀请链接"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" @click="showLink(scope.row)" size="mini">查看推广链接</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="balance" label="余额/元" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.balance || "无" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "无" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="添加时间" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.createdAt | changeDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disable" label="启用商区" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disable"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disable ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lock" label="允许登陆" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.lock"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.lock ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disTrans" label="允许提现" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disTrans"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disTrans ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disAd" label="允许广告" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disAd"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disAd ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disSettlement" label="允许结算" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disSettlement"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disSettlement ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disMulDivi" label="允许多级分成" align="center" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
<el-switch
|
||||
:value="!scope.row.disMulDivi"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#666666"
|
||||
:active-text="!scope.row.disMulDivi ? '是' : '否'"
|
||||
disabled
|
||||
></el-switch>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deductType" label="扣量方式" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.deductType | deductionType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="nuDeductionRatio" label="用户扣量比例" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.nuDeductionRatio*100).toFixed(2) || "0" }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rechgDeductionRatio" label="充值扣量比例" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.rechgDeductionRatio*100).toFixed(2) || "0" }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operating" fixed="right" label="操作" align="center" min-width="300">
|
||||
<template slot-scope="scope">
|
||||
<div style="operating">
|
||||
<div class="operating">
|
||||
<el-button
|
||||
class="flex-item"
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="Action(scope.row)"
|
||||
>编 辑</el-button>
|
||||
<el-button
|
||||
class="flex-item"
|
||||
:type="scope.row.disable ? 'success' : 'danger'"
|
||||
size="mini"
|
||||
@click="ban(scope.row)"
|
||||
>{{ scope.row.disable ? "启 用" : "禁 用" }}</el-button>
|
||||
<el-button
|
||||
class="flex-item"
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="remove(scope.row.id)"
|
||||
>删 除</el-button>
|
||||
<el-button class="flex-item" size="mini" @click="statDialy(scope.row)">每日统计</el-button>
|
||||
<el-button class="flex-item" size="mini" @click="widthdraw(scope.row)">提现记录</el-button>
|
||||
<el-button class="flex-item" size="mini" @click="payVIPHis(scope.row)">购买记录</el-button>
|
||||
<el-button class="flex-item" size="mini" @click="rechage(scope.row)">充值记录</el-button>
|
||||
<el-button class="flex-item" size="mini" @click="statSettlement(scope.row)">结算账单</el-button>
|
||||
<el-button
|
||||
class="flex-item"
|
||||
size="mini"
|
||||
@click="subDisc(scope.row)"
|
||||
>下级代理({{scope.row.childCount}})</el-button>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</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 > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!-- 下级代理弹窗 -->
|
||||
<sub-disc ref="subDisc"></sub-disc>
|
||||
<!--编辑tag弹窗-->
|
||||
<edit-district ref="editDistrict" @handlerDistrictList="getDistrictList"></edit-district>
|
||||
<!--新增tag弹窗-->
|
||||
<add-district ref="addDistrict" @handlerAddDistrict="getDistrictList()"></add-district>
|
||||
<rechage-popup ref="rechage"></rechage-popup>
|
||||
<widthdraw-popup ref="widthdraw"></widthdraw-popup>
|
||||
<!--查看分享链接-->
|
||||
<link-popup ref="linkPopup"></link-popup>
|
||||
<PayHisPopup ref="payHisPopup"></PayHisPopup>
|
||||
<StatDialy ref="statDialy"></StatDialy>
|
||||
<StatSettlement ref="statSettlement"></StatSettlement>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import editDistrict from "./components/editPage/editDistrict";
|
||||
import addDistrict from "./components/addDistrict";
|
||||
import RechagePopup from "./components/rechagePopup";
|
||||
import WidthdrawPopup from "./components/widthdrawPopup";
|
||||
import LinkPopup from "./components/linkPopup";
|
||||
import PayHisPopup from "./components/payHisPopup";
|
||||
import StatDialy from "./components/statDialy";
|
||||
import StatSettlement from "./components/statSettlement";
|
||||
import SubDisc from "./components/subDisc";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
param: "",
|
||||
// 列表数据
|
||||
text: "",
|
||||
loading: false,
|
||||
total: 0,
|
||||
tableData: [],
|
||||
// 是否显示子渠道
|
||||
checked: false,
|
||||
params: {
|
||||
parent: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
districtCode: "",
|
||||
name: "",
|
||||
},
|
||||
discTypeList: [
|
||||
{ label: "CPS", value: 0 },
|
||||
{ label: "CPA", value: 1 },
|
||||
{ label: "CPT", value: 2 },
|
||||
{ label: "CPC", value: 3 },
|
||||
],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
handleFilterDiscType(params) {
|
||||
if (params === undefined || params === "") {
|
||||
return;
|
||||
}
|
||||
switch (params) {
|
||||
case 0:
|
||||
return "CPS";
|
||||
case 1:
|
||||
return "CPA";
|
||||
case 2:
|
||||
return "CPT";
|
||||
case 3:
|
||||
return "CPC";
|
||||
}
|
||||
},
|
||||
deductionType(params) {
|
||||
if (params === undefined || params === "") {
|
||||
return;
|
||||
}
|
||||
const dedUser = 2;
|
||||
const dedRecharge = 8;
|
||||
let text = [];
|
||||
if (params & dedUser) {
|
||||
text.push("扣用户");
|
||||
}
|
||||
if (params & dedRecharge) {
|
||||
text.push("扣充值");
|
||||
}
|
||||
if (text.length === 0) {
|
||||
return "不扣量";
|
||||
}
|
||||
return text.join("和");
|
||||
},
|
||||
},
|
||||
components: {
|
||||
editDistrict,
|
||||
addDistrict,
|
||||
RechagePopup,
|
||||
WidthdrawPopup,
|
||||
LinkPopup,
|
||||
PayHisPopup,
|
||||
StatDialy,
|
||||
StatSettlement,
|
||||
SubDisc,
|
||||
},
|
||||
created() {
|
||||
this.getDistrictList();
|
||||
},
|
||||
methods: {
|
||||
// 获取商区代理列表
|
||||
getDistrictList(type) {
|
||||
this.loading = true;
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.params.parent = this.checked ? "" : "ZERO_VALUE";
|
||||
API.getDistrictList(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.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.params.pageNumber = 1;
|
||||
this.getDistrictList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getDistrictList();
|
||||
},
|
||||
// 禁用商区代理
|
||||
ban(row) {
|
||||
let params = { id: row.id, enable: row.disable };
|
||||
let t = row.disable ? "启用" : "禁用";
|
||||
let sucMsg = {
|
||||
message:
|
||||
"[商区: " + row.districtCode + "] " + t + "登陆、提现、结算功能成功",
|
||||
type: "success",
|
||||
};
|
||||
this.$confirm(
|
||||
"您确定要" + t + "当前代理的登陆、提现、结算功能吗？",
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
API.disDistrict(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message(sucMsg);
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(this.tip);
|
||||
} else {
|
||||
this.$message.error("操作失败！");
|
||||
}
|
||||
}
|
||||
this.getDistrictList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm("您确定要删除这条商区信息吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
API.delDistrict({ id: id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getDistrictList();
|
||||
} else {
|
||||
if (res.tip) {
|
||||
this.$message.error(res.tip);
|
||||
} else {
|
||||
this.$message.error("删除失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//修改商区代理
|
||||
Action(data) {
|
||||
this.$refs.editDistrict.open(data);
|
||||
},
|
||||
// 新增商区代理
|
||||
addDistrict() {
|
||||
this.$refs.addDistrict.open();
|
||||
},
|
||||
// 查看上去代理充值列表
|
||||
rechage(row) {
|
||||
this.$refs.rechage.open(row);
|
||||
},
|
||||
// widthdraw
|
||||
widthdraw(row) {
|
||||
this.$refs.widthdraw.open(row);
|
||||
},
|
||||
// 查看邀请链接
|
||||
showLink(row) {
|
||||
this.$refs.linkPopup.open(row);
|
||||
},
|
||||
payVIPHis(row) {
|
||||
this.$refs.payHisPopup.open(row);
|
||||
},
|
||||
statDialy(row) {
|
||||
this.$refs.statDialy.open(row);
|
||||
},
|
||||
statSettlement(row) {
|
||||
this.$refs.statSettlement.open(row);
|
||||
},
|
||||
subDisc(row) {
|
||||
this.$refs.subDisc.open(row);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.operating {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.flex-item {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.flex-item:nth-type-of(1),
|
||||
.flex-item:nth-type-of(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="300px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="params"
|
||||
:rules="rules"
|
||||
label-width="90px"
|
||||
:label-position="labelPosition"
|
||||
>
|
||||
<!-- <el-form-item label="ID:" prop="id" v-if="type === 'edit'">
|
||||
<el-input v-model="params.id" size="small"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="商区码:" prop="districtCode">
|
||||
<el-input v-model="params.districtCode" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="序列号:" prop="promSeqe">
|
||||
<el-input v-model="params.promSeqe" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="域名:" prop="domainName">
|
||||
<el-input v-model="params.domainName" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:" prop="remark">
|
||||
<el-input v-model="params.remark" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer" style="text-align:center">
|
||||
<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";
|
||||
// import {urlSchemes} from '@/utils/validator'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: "left",
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
flag: false,
|
||||
type :'',
|
||||
params: {
|
||||
id: "", //修改 必填
|
||||
districtCode: "", // 添加 必填
|
||||
domainName: "",
|
||||
remark: "",
|
||||
promSeqe:'',
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
id: [{ required: true, message: "请输入ID", trigger: "blur" }],
|
||||
districtCode: [
|
||||
{ required: true, message: "请输入商区码", trigger: "blur" }
|
||||
],
|
||||
domainName: [{ required: true, message: "请输入域名", trigger: "blur" }]
|
||||
}
|
||||
};
|
||||
},
|
||||
// computed: {
|
||||
// discCode() {
|
||||
// const discCode = this.$store.state.loginModule.userInfo.code;
|
||||
// return discCode.toString();
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.flag = true;
|
||||
if (this.type ==='add') {
|
||||
this.addDomain();
|
||||
} else {
|
||||
this.updateDomain();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加标签
|
||||
addDomain() {
|
||||
let params=Object.assign({},this.params,{promSeqe: this.params.promSeqe ? this.params.promSeqe : 'ZERO_VALUE',
|
||||
})
|
||||
API.addDomain(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑标签
|
||||
updateDomain() {
|
||||
let params=Object.assign({},this.params,{id:this.params.id,
|
||||
promSeqe: this.params.promSeqe ? this.params.promSeqe : 'ZERO_VALUE',
|
||||
})
|
||||
API.updateDomain(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerAgentList");
|
||||
} else {
|
||||
this.$message.error("编辑失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$refs.form.resetFields();
|
||||
this.params = {
|
||||
id: "", //修改 必填
|
||||
districtCode: "", // 添加 必填
|
||||
domainName: "",
|
||||
remark: ""
|
||||
};
|
||||
},
|
||||
// 打开编辑域名页、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true;
|
||||
this.type = type;
|
||||
if (type === "edit") {
|
||||
this.title = "修改域名列表";
|
||||
this.params.districtCode = data.districtCode;
|
||||
this.params.domainName = data.domainName;
|
||||
this.params.id = data.id;
|
||||
this.params.remark = data.remark;
|
||||
this.params.promSeqe = data.promSeqe;
|
||||
} else {
|
||||
this.title = "新增域名列表";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.edit-video-box {
|
||||
.item-box {
|
||||
margin-left: 28px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.item1 {
|
||||
flex: 1;
|
||||
.upload {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
left: -90px;
|
||||
}
|
||||
}
|
||||
.item2 {
|
||||
flex: 3;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: -60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="domainName-list-box">
|
||||
<div class="action-bar">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="商区码"
|
||||
v-model="params.districtCode"
|
||||
@change="getDomainList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="域名"
|
||||
v-model="params.domainName"
|
||||
@change="getDomainList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-button type="primary" size="small" @click="getDomainList('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="addDomain('add')">新增</el-button>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column prop="districtCode" label="商区码" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.districtCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="promSeqe" label="序列号" align="center" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.promSeqe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="domainName" label="域名" align="center" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.domainName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center" width="300">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="addDomain('edit',scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="remove(scope.row.id)"
|
||||
></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 25]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<!--新增、编辑申请广告弹窗-->
|
||||
<edit-page ref="editPage" @handlerAgentList="handlerAgentList"></edit-page>
|
||||
</div>
|
||||
<div class="zw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
// import { changeTime } from "@/utils/global";
|
||||
import EditPage from "./components/editPage";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDed: false,
|
||||
//服务器响应参数:
|
||||
total: 0,
|
||||
list: [],
|
||||
// dialogVisible: false,
|
||||
tableData: [], //Table表显示数据
|
||||
loading: false,
|
||||
// 请求列表参数
|
||||
params: {
|
||||
pageNumber: 1, //required
|
||||
pageSize: 10, //required
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDomainList();
|
||||
},
|
||||
components: {
|
||||
EditPage,
|
||||
},
|
||||
methods: {
|
||||
// 请求域名列表
|
||||
getDomainList() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loading = true;
|
||||
API.getDomainList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length !== 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handlerAgentList() {
|
||||
this.getDomainList();
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getDomainList();
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getDomainList();
|
||||
},
|
||||
// 新增、修改域名
|
||||
addDomain(type, data) {
|
||||
this.$refs.editPage.open(type, data);
|
||||
},
|
||||
//删除域名
|
||||
remove(id) {
|
||||
this.$confirm("您确定要删除这条域名信息吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.delDomain({ id: id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getDomainList();
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="" scoped></style>
|
||||
@@ -0,0 +1,694 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<div>
|
||||
<!-- 操作栏 -->
|
||||
<el-row>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="handleClose()">返回</el-button>
|
||||
<el-form ref="form" :model="roleInfo" label-width="100px" :rules="rules">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色名" prop="role">
|
||||
<el-input
|
||||
v-model="roleInfo.role"
|
||||
size="small"
|
||||
placeholder="请输入角色名"
|
||||
:disabled="flag1"
|
||||
></el-input>
|
||||
<!-- <el-button v-model="checkedAll" type="warning" size="small" @click="set">全选权限</el-button> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商区码" prop="role1">
|
||||
<el-input
|
||||
:disabled="flag1"
|
||||
v-model="roleInfo.discCode"
|
||||
size="small"
|
||||
placeholder="商区码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="页面权限">
|
||||
<el-tree
|
||||
:data="permessiList"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="title"
|
||||
ref="tree"
|
||||
highlight-current
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-form-item label="功能权限">
|
||||
<el-tree
|
||||
:data="itemList"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="name"
|
||||
ref="treeItem"
|
||||
highlight-current
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
class="submit"
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="flag"
|
||||
@click="submitForm()"
|
||||
>保存配置信息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
// import local from "@/utils/localStroage";
|
||||
// import _ from "lodash";
|
||||
export default {
|
||||
props: {
|
||||
// 父组件传递的参数
|
||||
type: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag1: false,
|
||||
roleInfo: {
|
||||
discCode: "系统",
|
||||
status: false,
|
||||
role: "",
|
||||
id: "",
|
||||
itemAuth: "",
|
||||
apiAuth: ""
|
||||
},
|
||||
flag: false,
|
||||
itemList: [
|
||||
{
|
||||
name: "home",
|
||||
title: "首页",
|
||||
children: [
|
||||
{
|
||||
name: "isWallet",
|
||||
title: "钱包",
|
||||
children: [
|
||||
{
|
||||
name: "isBalance",
|
||||
title: "余额"
|
||||
},
|
||||
{
|
||||
name: "isWithdrawBtn",
|
||||
title: "提现"
|
||||
},
|
||||
{
|
||||
name: "isBillBtn",
|
||||
title: "账单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isShowLinks",
|
||||
title: "链接"
|
||||
},
|
||||
{
|
||||
name: "isTodayData",
|
||||
title: "今日数据",
|
||||
children: [
|
||||
{
|
||||
name: "isTodayNewUIDCountGroup",
|
||||
title: "新增用户数",
|
||||
children: [
|
||||
{
|
||||
name: "isTodayNewUIDCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTodayNewDirectUIDCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTodayNewFissionUIDCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTodayVisitUIDCountGroup",
|
||||
title: "日活跃",
|
||||
children: [
|
||||
{
|
||||
name: "isTodayVisitUIDCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTodayDirectVisitUIDCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTodayFissionVisitUIDCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTodayRechargeCompleteOrderCountGroup",
|
||||
title: "充值单数",
|
||||
children: [
|
||||
{
|
||||
name: "isTodayRechargeCompleteOrderCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTodayDirectRechargePaidOrderCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTodayFissionRechargePaidOrderCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTodayRechargeCompleteOrderAmountGroup",
|
||||
title: "充值金额",
|
||||
children: [
|
||||
{
|
||||
name: "isTodayRechargeCompleteOrderAmount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTodayDirectRechargePaidAmount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTodayFissionRechargePaidAmount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: "isTotalData",
|
||||
title: "累计数据",
|
||||
children: [
|
||||
{
|
||||
name: "isTotalNewUIDCountGroup",
|
||||
title: "新增用户数",
|
||||
children: [
|
||||
{
|
||||
name: "isTotalNewUIDCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTotalNewDirectUIDCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTotalNewFissionUIDCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTotalVisitUIDCountGroup",
|
||||
title: "日活跃",
|
||||
children: [
|
||||
{
|
||||
name: "isTotalVisitUIDCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTotalDirectVisitUIDCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTotalFissionVisitUIDCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTotalRechargeCompleteOrderCountGroup",
|
||||
title: "充值单数",
|
||||
children: [
|
||||
{
|
||||
name: "isTotalRechargeCompleteOrderCount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTotalDirectRechargePaidOrderCount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTotalFissionRechargePaidOrderCount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isTotalRechargeCompleteOrderAmountGroup",
|
||||
title: "充值金额",
|
||||
children: [
|
||||
{
|
||||
name: "isTotalRechargeCompleteOrderAmount",
|
||||
title: "累计"
|
||||
},
|
||||
{
|
||||
name: "isTotalDirectRechargePaidAmount",
|
||||
title: "直推"
|
||||
},
|
||||
{
|
||||
name: "isTotalFissionRechargePaidAmount",
|
||||
title: "裂变"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "agentList",
|
||||
title: "商区列表",
|
||||
children: [
|
||||
{
|
||||
name: "isAgentDataList",
|
||||
title: "列表数据",
|
||||
children: [
|
||||
{
|
||||
name: "isParentDividendRatio",
|
||||
title: "收益比列"
|
||||
},
|
||||
{
|
||||
name: "isDividendRatio1",
|
||||
title: "分红比列"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "statistics",
|
||||
title: "每日统计",
|
||||
children: [
|
||||
{
|
||||
name: "isFeatures",
|
||||
title: "操作功能",
|
||||
children: [
|
||||
{
|
||||
name: "isTime",
|
||||
title: "检索日期"
|
||||
},
|
||||
{
|
||||
name: "isSerialNuber",
|
||||
title: "检索推广序列"
|
||||
},
|
||||
{
|
||||
name: "isSystemType",
|
||||
title: "检索系统类型"
|
||||
},
|
||||
{
|
||||
name: "isSearch",
|
||||
title: "搜索"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "isDataList",
|
||||
title: "列表数据",
|
||||
children: [
|
||||
{
|
||||
name: "isSumDate",
|
||||
title: "日期"
|
||||
},
|
||||
{
|
||||
name: "isDistrictCode",
|
||||
title: "商区码"
|
||||
},
|
||||
{
|
||||
name: "isSysType",
|
||||
title: "系统类型"
|
||||
},
|
||||
{
|
||||
name: "isSeqe",
|
||||
title: "推广序列"
|
||||
},
|
||||
{
|
||||
name: "isLinkRemark",
|
||||
title: "链接备注"
|
||||
},
|
||||
{
|
||||
name: "isDividendRatio",
|
||||
title: "分红比"
|
||||
},
|
||||
{
|
||||
name: "isName",
|
||||
title: "商区账号"
|
||||
},
|
||||
{
|
||||
name: "isNewUIDCount",
|
||||
title: "新增用户数"
|
||||
},
|
||||
{
|
||||
name: "isNewDirectUIDCount",
|
||||
title: "新增直推用户数"
|
||||
},
|
||||
{
|
||||
name: "isNewFissionUIDCount",
|
||||
title: "新增裂变用户数"
|
||||
},
|
||||
{
|
||||
name: "isVisitUIDCount",
|
||||
title: "日活跃"
|
||||
},
|
||||
{
|
||||
name: "isDirectVisitUIDCount",
|
||||
title: "直推日活跃"
|
||||
},
|
||||
{
|
||||
name: "isFissionVisitUIDCount",
|
||||
title: "裂变日活跃"
|
||||
},
|
||||
{
|
||||
name: "isRechargeCompleteOrderCount",
|
||||
title: "充值单数"
|
||||
},
|
||||
{
|
||||
name: "isDirectRechargePaidOrderCount",
|
||||
title: "直推充值单数"
|
||||
},
|
||||
{
|
||||
name: "isFissionRechargePaidOrderCount",
|
||||
title: "裂变充值单数"
|
||||
},
|
||||
{
|
||||
name: "isRechargeCompleteOrderAmount",
|
||||
title: "充值金额"
|
||||
},
|
||||
{
|
||||
name: "isDirectRechargePaidAmount",
|
||||
title: "直推充值金额"
|
||||
},
|
||||
{
|
||||
name: "isFissionRechargePaidAmount",
|
||||
title: "裂变充值金额"
|
||||
},
|
||||
{
|
||||
name: "isNextDayRetainUIDRatio",
|
||||
title: "次日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDay3RetainUIDRatio",
|
||||
title: "3日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDay7RetainUIDRatio",
|
||||
title: "7日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDay15RetainUIDRatio",
|
||||
title: "15日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDay30RetainUIDRatio",
|
||||
title: "30日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDirectNextDayRetainUIDRatio",
|
||||
title: "直推次日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDirectDay3RetainUIDRatio",
|
||||
title: "直推3日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDirectDay7RetainUIDRatio",
|
||||
title: "直推7日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDirectDay15RetainUIDRatio",
|
||||
title: "直推15日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isDirectDay30RetainUIDRatio",
|
||||
title: "直推30日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isFissionNextDayRetainUIDRatio",
|
||||
title: "分裂次日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isFissionDay3RetainUIDRatio",
|
||||
title: "分裂3日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isFissionDay7RetainUIDRatio",
|
||||
title: "分裂7日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isFissionDay15RetainUIDRatio",
|
||||
title: "分裂15日留存用户数"
|
||||
},
|
||||
{
|
||||
name: "isFissionDay30RetainUIDRatio",
|
||||
title: "分裂30日留存用户数"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
permessiList: [
|
||||
{
|
||||
path: "/home",
|
||||
name: "home",
|
||||
title: "首页",
|
||||
icon: "el-icon-s-home",
|
||||
level: 0,
|
||||
meta: { title: "首页" }
|
||||
},
|
||||
{
|
||||
path: "/roleMan",
|
||||
name: "RoleMan",
|
||||
level: 0,
|
||||
icon: "el-icon-s-cooperation",
|
||||
title: "权限管理",
|
||||
meta: { title: "权限管理" }
|
||||
},
|
||||
{
|
||||
path: "/agent-list",
|
||||
name: "agent-list",
|
||||
icon: "el-icon-s-cooperation",
|
||||
level: 0,
|
||||
title: "商区列表",
|
||||
meta: { title: "商区列表" }
|
||||
},
|
||||
{
|
||||
path: "/daily-statistics",
|
||||
name: "daily-statistics",
|
||||
level: 0,
|
||||
icon: "el-icon-s-data",
|
||||
title: "每日统计",
|
||||
meta: { title: "每日统计" }
|
||||
},
|
||||
{
|
||||
path: "/ad-review-list",
|
||||
name: "ad-review-list",
|
||||
icon: "el-icon-s-data",
|
||||
level: 0,
|
||||
title: "申请广告",
|
||||
meta: { title: "申请广告" }
|
||||
},
|
||||
{
|
||||
path: "/recharge-list",
|
||||
name: "recharge-list",
|
||||
icon: "el-icon-s-data",
|
||||
level: 0,
|
||||
title: "充值流水",
|
||||
meta: { title: "充值流水" }
|
||||
},
|
||||
{
|
||||
path: "/registered-list",
|
||||
name: "registered-list",
|
||||
icon: "el-icon-s-data",
|
||||
level: 0,
|
||||
title: "注册流水",
|
||||
meta: { title: "注册流水" }
|
||||
}
|
||||
],
|
||||
checkedAll: false, //checkbox的值
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "title"
|
||||
},
|
||||
rules: {
|
||||
role: [{ required: true, message: "请输入角色名称", trigger: "blur" }]
|
||||
// role1: [{ required: true, message: "请输入商区码", trigger: "blur" }]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
discCode() {
|
||||
return this.$store.state.loginModule.userInfo.code;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.permessiList = _.cloneDeep(permessiList);
|
||||
},
|
||||
methods: {
|
||||
/****************************权限列表数据*****************************/
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.flag = true;
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.type === "add") {
|
||||
this.addRole();
|
||||
} else {
|
||||
this.editRole();
|
||||
}
|
||||
} else {
|
||||
this.flag = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 全选权限
|
||||
set() {
|
||||
if (this.checkedAll) {
|
||||
//全选
|
||||
this.$refs.tree.setCheckedNodes(this.tree);
|
||||
this.$refs.treeItem.setCheckedNodes(this.treeItem);
|
||||
}
|
||||
// else{
|
||||
// //取消选中
|
||||
// this.treeAll.setCheckedNodes(this.treeAll);
|
||||
// this.treeItemAll.setCheckedNodes(this.treeItemAll);
|
||||
// }
|
||||
},
|
||||
//功能权限
|
||||
treeItemAuth() {
|
||||
let treeItem = this.$refs.treeItem;
|
||||
return {
|
||||
checked: treeItem.getCheckedNodes(),
|
||||
halfChecked: treeItem.getHalfCheckedKeys()
|
||||
};
|
||||
},
|
||||
// 添加角色
|
||||
addRole() {
|
||||
let tree = this.$refs.tree;
|
||||
let params = {
|
||||
discCode: this.roleInfo.discCode,
|
||||
apiAuth: JSON.stringify(tree.getCheckedNodes()),
|
||||
itemAuth: JSON.stringify(this.treeItemAuth()),
|
||||
role: this.roleInfo.role
|
||||
};
|
||||
if (params.discCode === "系统") {
|
||||
params.discCode = "ZERO_VALUE";
|
||||
}
|
||||
params.discCode = params.discCode || "ZERO_VALUE";
|
||||
API.addRole(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerRoleList");
|
||||
} else if (res.code === 9200) {
|
||||
this.$message.error("新增角色号低于当前最新角色");
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 编辑角色
|
||||
editRole() {
|
||||
let tree = this.$refs.tree;
|
||||
let params = {
|
||||
apiAuth: JSON.stringify(tree.getCheckedNodes()),
|
||||
itemAuth: JSON.stringify(this.treeItemAuth()),
|
||||
authID: this.roleInfo.id,
|
||||
role: this.roleInfo.role,
|
||||
discCode: this.roleInfo.discCode
|
||||
};
|
||||
if (params.discCode === "系统" || params.discCode === "") {
|
||||
params.discCode = "ZERO_VALUE";
|
||||
}
|
||||
API.updateRole(params)
|
||||
.then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改角色权限成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("handlerRoleList");
|
||||
this.handleClose();
|
||||
}
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.$refs.tree.setCheckedNodes([]);
|
||||
this.$refs.form.resetFields();
|
||||
// 回调父组件的关闭函数
|
||||
this.$emit("handleClose");
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, row) {
|
||||
if (type === "edit") {
|
||||
this.flag1 = true;
|
||||
row.discCode = row.discCode ? row.discCode : "系统";
|
||||
this.roleInfo = row;
|
||||
let auth = this.roleInfo.apiAuth
|
||||
? JSON.parse(this.roleInfo.apiAuth)
|
||||
: [];
|
||||
let itemAuth = this.roleInfo.itemAuth
|
||||
? JSON.parse(this.roleInfo.itemAuth)
|
||||
: [];
|
||||
this.$refs.tree.setCheckedNodes(auth);
|
||||
this.$refs.treeItem.setCheckedNodes(itemAuth.checked);
|
||||
} else {
|
||||
this.flag1 = false;
|
||||
}
|
||||
// 默认显示权限树已有的权限
|
||||
// this.flag1 = type === "edit";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tree-node.is-expanded > .el-tree-node__children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 100px;
|
||||
}
|
||||
/* .submit{
|
||||
position: fixed;
|
||||
top: 600px;
|
||||
left: 300px;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="role-box">
|
||||
<!--新增、编辑页面-->
|
||||
<role-action
|
||||
ref="roleAction"
|
||||
v-show="roleInfo.status"
|
||||
:type="type"
|
||||
:role-info="roleInfo"
|
||||
@handlerRoleList="handlerAuthorList"
|
||||
@handleClose="closeAction"
|
||||
></role-action>
|
||||
<div v-show="!roleInfo.status">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="商区码"
|
||||
v-model="query.discCode"
|
||||
@change="getAuthorList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="角色名"
|
||||
v-model="query.role"
|
||||
@change="getAuthorList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-button type="primary" size="small" @click="getAuthorList('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="authorAction('add',roleInfo)">+新增角色</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
@sort-change="handleSortChange"
|
||||
ref="multipleTable"
|
||||
>
|
||||
<!-- <el-table-column prop="id" label="ID" align="center" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.id }}
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column prop="discCode" label="商区码" align="center" min-width="140">
|
||||
<template slot-scope="scope">{{ scope.row.discCode ? scope.row.discCode : "系统"}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="role" label="角色名" align="center" min-width="140">
|
||||
<template slot-scope="scope">{{scope.row.role }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="createdAt" label="创建时间" align="center" min-width="200px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column label="操作" align="center" width="200px" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="authorAction('edit',scope.row)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="remove(scope.row.id)"
|
||||
></el-button>
|
||||
<!-- <el-button type="warning" size="mini" @click="openDialog(scope.row.id)">发布</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30]"
|
||||
:current-page="param.pageNumber"
|
||||
:page-size="param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<el-radio v-model="radio" label="0">cps子商区</el-radio>
|
||||
<el-radio v-model="radio" label="1">cpa子商区</el-radio>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="clone()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RoleAction from "./components/roleAction";
|
||||
import API from "@/api";
|
||||
import { sortEscape } from "@/utils/global";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cloneId: "",
|
||||
radio: "0",
|
||||
dialogVisible: false,
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
// 通过props传递给子组件的参数
|
||||
// 子组件的状态，新增还是修改
|
||||
type: "add",
|
||||
// 角色的详细信息
|
||||
roleInfo: {
|
||||
status: false,
|
||||
role: "",
|
||||
id: "",
|
||||
authjson: "[]",
|
||||
},
|
||||
// 角色管理列表请求参数
|
||||
param: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
discCode: "",
|
||||
key: "",
|
||||
value: "",
|
||||
},
|
||||
query: {
|
||||
discCode: "系统",
|
||||
role: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAuthorList();
|
||||
},
|
||||
components: {
|
||||
RoleAction,
|
||||
},
|
||||
computed: {
|
||||
discCode() {
|
||||
return this.$store.state.loginModule.userInfo.code;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/****************************角色列表数据*****************************/
|
||||
// 删除author
|
||||
remove(id) {
|
||||
this.$confirm("您确定要删除当前角色吗？", "删除提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
API.deleteRole({ authID: id, discCode: this.discCode }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getAuthorList();
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
} else if (res.code === 9200) {
|
||||
this.$message.error("该角色已绑定用户,不支持删除!");
|
||||
} else {
|
||||
this.$message.error("删除失败！");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 克隆author
|
||||
clone() {
|
||||
let params = {
|
||||
authID: this.cloneId,
|
||||
discType: Number(this.radio),
|
||||
};
|
||||
API.clone(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.dialogVisible = false;
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.tip || "操作失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 监听编辑、或者添加成功过后重新拉去数据
|
||||
handlerAuthorList() {
|
||||
this.param.pageNumber = 1;
|
||||
this.getAuthorList();
|
||||
},
|
||||
// 请求角色管理模块配置列表
|
||||
getAuthorList(type) {
|
||||
this.loading = true;
|
||||
if (type === "status") {
|
||||
this.param.pageNumber = 1;
|
||||
}
|
||||
let param = { ...this.param, ...this.query };
|
||||
if (param.discCode === "系统") {
|
||||
param.discCode = "";
|
||||
}
|
||||
param.discCode = param.discCode ? param.discCode : "ZERO_VALUE";
|
||||
API.getRoleList(param)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据排序
|
||||
handleSortChange(column) {
|
||||
this.param.value = sortEscape(column.order);
|
||||
this.param.key = column.prop;
|
||||
this.getAuthorList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.param.pageSize = size;
|
||||
this.param.pageNumber = 1;
|
||||
this.getAuthorList();
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.param.pageNumber = pageNumber;
|
||||
this.getAuthorList();
|
||||
},
|
||||
// 新增、修改角色
|
||||
authorAction(type, row) {
|
||||
this.type = type;
|
||||
this.roleInfo.status = !this.roleInfo.status;
|
||||
// this.roleInfo.authjson = row.authJson
|
||||
// this.roleInfo.role = row.role
|
||||
// this.roleInfo.id = row.id
|
||||
this.$refs.roleAction.open(type, row);
|
||||
},
|
||||
// 关闭修改页面回调函数,清除传递子页面的参数
|
||||
closeAction() {
|
||||
// 关闭修改页面
|
||||
this.roleInfo.status = false;
|
||||
// 清空权限数据
|
||||
this.roleInfo.authjson = "[]";
|
||||
// 清除角色名
|
||||
this.roleInfo.role = "";
|
||||
// 清除角色id
|
||||
this.roleInfo.id = "";
|
||||
this.getAuthorList();
|
||||
},
|
||||
openDialog(id) {
|
||||
this.dialogVisible = true;
|
||||
this.cloneId = id;
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then(() => {
|
||||
done();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,11 @@
|
||||
export var LableMap = {
|
||||
remark: "备注",
|
||||
discType: "商区类型",
|
||||
disc: "商区",
|
||||
name: "账号",
|
||||
totalNewUser: "本月注册",
|
||||
avgVisit: "日均活跃",
|
||||
mp: "本月业绩",
|
||||
avgARPU: "日均",
|
||||
sumAvgARPU: "累计日均",
|
||||
};
|
||||
@@ -0,0 +1,390 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="month-list-box">
|
||||
<div class="action-bar">
|
||||
<div class="month-list-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-select
|
||||
v-model="params.peportType"
|
||||
size="small"
|
||||
placeholder="请选择报表类型"
|
||||
@change="getMonthlyList('status')"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in PeportTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="params.discType"
|
||||
size="small"
|
||||
placeholder="请选择商区类型"
|
||||
@change="getMonthlyList('status')"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in discTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="i"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="商区"
|
||||
v-model="params.discCode"
|
||||
@change="getMonthlyList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="账号"
|
||||
v-model="params.name"
|
||||
@change="getMonthlyList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="备注"
|
||||
v-model="params.remark"
|
||||
@change="getMonthlyList('status')"
|
||||
class="param-input"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
align="right"
|
||||
size="small"
|
||||
type="month"
|
||||
placeholder="选择月份"
|
||||
:picker-options="pickerOptions"
|
||||
@change="changeTime"
|
||||
></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getMonthlyList('status')">搜索</el-button>
|
||||
<el-button type="primary" size="small" @click="exportdata">导出</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox v-model="isDed" label="切换到扣量" @click="isExpandOne"></el-checkbox>
|
||||
</div>
|
||||
<!-- 报表标题 -->
|
||||
<div style="font-size:20px;text-align:center;margin-bottom:10px">
|
||||
<span>{{ this.month + "月-" }}</span>
|
||||
<span>
|
||||
{{
|
||||
params.peportType === 0
|
||||
? "新增统计报表"
|
||||
: params.peportType === 1
|
||||
? "日活统计报表"
|
||||
: params.peportType === 2
|
||||
? "消费统计报表"
|
||||
: params.peportType === 3
|
||||
? "ARPU统计报表"
|
||||
: "累计ARPU统计报表"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<!--数据表格-->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
>
|
||||
<el-table-column prop="remark" label="备注" align="center" min-width="140">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discType" label="商区类型" align="center" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.discType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="disc" label="商区" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.disc }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="账号" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="params.peportType === 0"
|
||||
prop="totalNewUser"
|
||||
label="本月注册"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.totalNewUser|fixed2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="params.peportType === 1"
|
||||
prop="avgVisit"
|
||||
label="日均活跃"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.avgVisit|fixed2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="params.peportType === 2"
|
||||
prop="mp"
|
||||
label="本月业绩"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mp|fixed2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="params.peportType === 3"
|
||||
prop="avgARPU"
|
||||
label="日均"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.avgARPU|fixed2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumAvgARPU"
|
||||
v-if="params.peportType === 4"
|
||||
label="累计日均"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sumAvgARPU|fixed2 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(day, i) in days"
|
||||
:key="i"
|
||||
:label="i + 1 + '日'"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="isDed"
|
||||
>{{ scope.row.dedDailyData[i + 1] ? (scope.row.dedDailyData[i + 1]|fixed2): "无"}}</span>
|
||||
<span
|
||||
v-else
|
||||
>{{ scope.row.dailyData[i + 1] ? (scope.row.dailyData[i + 1]|fixed2 ): "无"}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 25]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
v-if="total > 10"
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div class="zw"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { paramsFilter } from "@/utils/global";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import { changeTime } from "@/utils/global";
|
||||
import * as define from "./define";
|
||||
import local from "@/utils/localStroage";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showMap: {},
|
||||
isDed: false,
|
||||
//服务器响应参数:
|
||||
total: 0,
|
||||
list: [],
|
||||
peportType: "",
|
||||
month: "",
|
||||
//页面所需参数:
|
||||
time: "",
|
||||
dialogVisible: false,
|
||||
// title: "每月报表",
|
||||
tableData: [], //Table表显示数据
|
||||
loading: false,
|
||||
PeportTypeList: [
|
||||
{ label: "新增统计", value: 0 },
|
||||
{ label: "日活统计", value: 1 },
|
||||
{ label: "消费统计", value: 2 },
|
||||
{ label: "ARPU统计", value: 3 },
|
||||
{ label: "累计ARPU统计", value: 4 },
|
||||
],
|
||||
discTypeList: [
|
||||
{ label: "cps", value: 0 },
|
||||
{ label: "cpa", value: 1 },
|
||||
{ label: "cpt", value: 2 },
|
||||
{ label: "cpc", value: 3 },
|
||||
],
|
||||
lableMap: define.LableMap,
|
||||
// 请求列表参数
|
||||
params: {
|
||||
peportType: 0, //required
|
||||
pageNumber: 1, //required
|
||||
pageSize: 10, //required
|
||||
sumDate: "",
|
||||
discCode: "", //商区码
|
||||
},
|
||||
days: [], //当月日期数组
|
||||
months: "",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let actJson = local.get("userInfo").actJson
|
||||
? JSON.parse(local.get("userInfo").actJson)
|
||||
: {};
|
||||
this.initShowMap(actJson.checked);
|
||||
this.initShowMap(actJson.halfChecked);
|
||||
this.getMonthlyList();
|
||||
let date = new Date();
|
||||
this.days = new Array(date.getDate());
|
||||
this.months = date.getMonth();
|
||||
},
|
||||
methods: {
|
||||
//初始化显示项
|
||||
initShowMap(actJson) {
|
||||
if (!actJson) return false;
|
||||
for (let k in actJson) {
|
||||
let auth = actJson[k];
|
||||
if (auth.children) {
|
||||
this.initShowMap(auth.children);
|
||||
}
|
||||
if (typeof auth === "string") {
|
||||
this.showMap[auth] = true;
|
||||
} else {
|
||||
this.showMap[auth.name] = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
//根据勾选权限判断是否显示
|
||||
hasItemAuth(key) {
|
||||
if (!this.showMap[key]) return false;
|
||||
return this.showMap[key];
|
||||
},
|
||||
isExpandOne() {
|
||||
this.isDed = this.isDed ? false : true;
|
||||
},
|
||||
// 请求订单统计列表
|
||||
getMonthlyList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
let params = Object.assign(this.params, {
|
||||
peportType: this.params.peportType,
|
||||
srd: this.hasItemAuth("isRealData3"),
|
||||
});
|
||||
API.getMonthlyList(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data.list.length !== 0) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
this.month = res.data.month;
|
||||
this.params.peportType = res.data.peportType;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 导出数据
|
||||
exportdata() {
|
||||
let params = paramsFilter({
|
||||
...this.params,
|
||||
lableMap: JSON.stringify(this.lableMap),
|
||||
srd: this.hasItemAuth("isExport2"),
|
||||
});
|
||||
let str = "";
|
||||
for (let key in params) {
|
||||
if (key == "sumDate") {
|
||||
params[key] = params[key].replace("+", "%2B");
|
||||
}
|
||||
str += key + "=" + params[key] + "&";
|
||||
}
|
||||
str = str.substring(0, str.length - 1);
|
||||
let url = baseConfig.baseServerUrl + "/export/disc/monthly/list?" + str;
|
||||
window.location.href = url;
|
||||
},
|
||||
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getMonthlyList();
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number;
|
||||
this.getMonthlyList();
|
||||
},
|
||||
// 打开弹窗
|
||||
open(row) {
|
||||
this.dialogVisible = true;
|
||||
this.params.discCode = row.disc;
|
||||
this.getMonthlyList();
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
sumDate: "",
|
||||
discCode: "", //商区码
|
||||
peportType: "",
|
||||
};
|
||||
},
|
||||
// 时间选择回掉
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.sumDate = changeTime(time) || "";
|
||||
//获取指定月份有多少天:
|
||||
// this.days= new Date(year, month, 0).getDate()
|
||||
// 使用 new Date() 创建时间对象时，如果 date 传入 0，就能直接通过 getDate() 获取到最后一天的日期
|
||||
let date = new Date(time.getFullYear(), time.getMonth() + 1, 0);
|
||||
this.days = date.getDate();
|
||||
} else {
|
||||
this.params.sumDate = "";
|
||||
}
|
||||
this.getMonthlyList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="" scoped></style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="edit-video-box">
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="400px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="params" label-width="80px">
|
||||
<el-form-item label="序号:">
|
||||
<el-input v-model="params.tagName" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="推广域名:">
|
||||
<el-input v-model="params.desc" size="small"></el-input>
|
||||
</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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: '',
|
||||
flag: false,
|
||||
params: {
|
||||
tagName: '',
|
||||
desc: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params = {
|
||||
tagName: '',
|
||||
desc: "",
|
||||
sort: "",
|
||||
Update:"",
|
||||
isJoin: false,
|
||||
}
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(type, data) {
|
||||
this.dialogVisible = true
|
||||
if (type === 'edit') {
|
||||
this.title = '编辑标签'
|
||||
this.params.tagName = data.a
|
||||
this.params.desc = data.b
|
||||
} else {
|
||||
this.title = '新增标签'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.edit-video-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="domainManagement-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" size="small" @click="tagsAction('add')">+添加</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="a" label="序号" align="center"></el-table-column>
|
||||
<el-table-column prop="b" label="推广域名" align="center"></el-table-column>
|
||||
<el-table-column prop="c" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column prop="c" label="修改时间" align="center"></el-table-column>
|
||||
<el-table-column prop="operating" label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" icon="el-icon-edit" @click="tagsAction('edit',scope.row)"></el-button>
|
||||
<el-button type="danger" size="mini" icon="el-icon-delete" @click="remove(scope.row.vid)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[5, 15, 20, 25]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" background></el-pagination>
|
||||
<!--新增、编辑tag弹窗-->
|
||||
<tag-action ref="tagAction"></tag-action>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TagAction from './components/addTag'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 列表数据
|
||||
tableData: [
|
||||
{
|
||||
a: 1561,
|
||||
b: 'AADDWd',
|
||||
c: 100,
|
||||
d: 0,
|
||||
e: 0,
|
||||
f: 0,
|
||||
g: 100,
|
||||
h: 100,
|
||||
i: 0,
|
||||
j: '2019-9-16 15:16:19',
|
||||
k: '2019-9-16 15:16:19',
|
||||
},
|
||||
{
|
||||
a: 1561,
|
||||
b: 'AADDWd',
|
||||
c: 100,
|
||||
d: 0,
|
||||
e: 0,
|
||||
f: 0,
|
||||
g: 100,
|
||||
h: 100,
|
||||
i: 0,
|
||||
j: '2019-9-16 15:16:19',
|
||||
k: '2019-9-16 15:16:19',
|
||||
},
|
||||
{
|
||||
a: 1561,
|
||||
b: 'AADDWd',
|
||||
c: 100,
|
||||
d: 0,
|
||||
e: 0,
|
||||
f: 0,
|
||||
g: 100,
|
||||
h: 100,
|
||||
i: 0,
|
||||
j: '2019-9-16 15:16:19',
|
||||
k: '2019-9-16 15:16:19',
|
||||
},
|
||||
{
|
||||
a: 1561,
|
||||
b: 'AADDWd',
|
||||
c: 100,
|
||||
d: 0,
|
||||
e: 0,
|
||||
f: 0,
|
||||
g: 100,
|
||||
h: 100,
|
||||
i: 0,
|
||||
j: '2019-9-16 15:16:19',
|
||||
k: '2019-9-16 15:16:19',
|
||||
},
|
||||
{
|
||||
a: 1561,
|
||||
b: 'AADDWd',
|
||||
c: 100,
|
||||
d: 0,
|
||||
e: 0,
|
||||
f: 0,
|
||||
g: 100,
|
||||
h: 100,
|
||||
i: 0,
|
||||
j: '2019-9-16 15:16:19',
|
||||
k: '2019-9-16 15:16:19',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TagAction
|
||||
},
|
||||
methods: {
|
||||
// 删除tags
|
||||
remove() {
|
||||
this.$confirm('您确定要删除当前标签吗？', '删除提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.then(_ => {
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.catch(_ => { });
|
||||
},
|
||||
// 新增、删除tags
|
||||
tagsAction(type, data) {
|
||||
this.$refs.tagAction.open(type, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="extensionLog-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input placeholder="请输入用户ID" size="small" clearable @keyup.enter.native="getExtensionList('status')" class="param-input" v-model="params.uid"></el-input>
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
<el-button type="primary" size="small" @click="getExtensionList()" class="search">搜索</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">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id || '暂无说明'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户ID" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid || '暂无说明'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--
|
||||
<el-table-column prop="promotionCode" label="用户推广码" align="center"></el-table-column>
|
||||
-->
|
||||
<el-table-column prop="invitee" label="下级ID" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.invitee || '暂无说明'}}</span>
|
||||
</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>
|
||||
<!--分页组件-->
|
||||
<el-pagination :page-sizes="[10, 15, 20, 25]" :current-page="params.pageNumber" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import { changeTime } from '@/utils/global'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
tableData: [],
|
||||
time: '',
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
uid: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getExtensionList()
|
||||
},
|
||||
methods: {
|
||||
// 请求推广列表
|
||||
getExtensionList(type) {
|
||||
if(type === 'status') {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.getExtensionList(this.params).then(res => {
|
||||
if (res.code === 200 && res.data.history) {
|
||||
this.tableData = res.data.history
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
})
|
||||
},
|
||||
// 时间触发回调
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.params.startTime = changeTime(time[0]) || ''
|
||||
this.params.endTime = changeTime(time[1]) || ''
|
||||
} else {
|
||||
this.params.startTime = ''
|
||||
this.params.endTime = ''
|
||||
}
|
||||
this.getExtensionList('status')
|
||||
},
|
||||
// 分页条数改变回掉
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size
|
||||
this.getExtensionList()
|
||||
},
|
||||
// 分页页码改变回掉
|
||||
changeCurrent(number) {
|
||||
this.params.pageNumber = number
|
||||
this.getExtensionList()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="promotion-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<div class="action-left">
|
||||
<el-input placeholder="请输入用户id" size="small" class="param-input" v-model="params.uid"></el-input>
|
||||
层级查询:
|
||||
<el-select v-model="params.type" placeholder="层级查询" size="small" @change="getUserExtensionList('status')">
|
||||
<el-option v-for="item in hierarchy" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="getUserExtensionList()">搜索</el-button>
|
||||
<span style="margin-left: 35px;font-size:14px;color:#ccc">请通过输入用户id进行精准查询</span>
|
||||
</div>
|
||||
<div class="action-right">
|
||||
<span>一级总人数：<span>{{totalLv1}}</span></span>
|
||||
<span>二级总人数：<span>{{totalLv2}}</span></span>
|
||||
<span>三级总人数：<span>{{totalLv3}}</span></span>
|
||||
<span>四级总人数：<span>{{totalLv4}}</span></span>
|
||||
</div>
|
||||
</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="uid" label="用户ID" align="center"></el-table-column>
|
||||
<el-table-column prop="iid" :label="params.type === 'up' ? '推广人ID' : '受邀人ID'" align="center"></el-table-column>
|
||||
<el-table-column prop="lv" label="层级" align="center"></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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
hierarchy: [{
|
||||
label: '上级',
|
||||
value: 'up'
|
||||
}, {
|
||||
label: '下级',
|
||||
value: 'down'
|
||||
}],
|
||||
tableData: [],
|
||||
// 一，二，三，四级人数
|
||||
totalLv1: 0,
|
||||
totalLv2: 0,
|
||||
totalLv3: 0,
|
||||
totalLv4: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
uid: '',
|
||||
type: 'up'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserExtensionList()
|
||||
},
|
||||
methods: {
|
||||
// 请求用户推广查询列表
|
||||
getUserExtensionList(type) {
|
||||
if (type) {
|
||||
this.params.pageNumber = 1
|
||||
}
|
||||
this.loading = true
|
||||
API.getUserExtensionList(this.params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (JSON.stringify(res.data) !== '[]') {
|
||||
if (res.data.list) {
|
||||
this.tableData = res.data.list
|
||||
this.totalLv1 = res.data.totalLv1 || 0
|
||||
this.totalLv2 = res.data.totalLv2 || 0
|
||||
this.totalLv3 = res.data.totalLv3 || 0
|
||||
this.totalLv4 = res.data.totalLv4 || 0
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.tableData.push(res.data[0])
|
||||
}
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.action-bar {
|
||||
display: flex;
|
||||
.action-right {
|
||||
display: flex;
|
||||
margin-left: 70px;
|
||||
span {
|
||||
flex-grow: 1;
|
||||
margin-right: 35px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="detailRecord-box">
|
||||
<el-dialog :visible.sync="dialogVisible" width="1200px" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" @change="changeTime"></el-date-picker>
|
||||
<div class="income">
|
||||
收益总额：
|
||||
<span>{{totalIncome || 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="uid" label="用户UID" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.uid || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="performance" label="绩效" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.performance/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="agentLevel" label="代理等级" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.agentLevel || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="money" label="收益金额(推广金额)" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.money/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rechargeID" label="充值订单号" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.rechargeID || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="originUID" label="被邀请用户id" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.originUID || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" align="center" :show-overflow-tooltip="true" width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createdAt | changeDate}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<div class="page-box" style="width:100%;height:70px">
|
||||
<el-pagination :page-sizes="[10, 15, 20, 30]" :current-page="form.pageNumber" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" background :total="total" v-if="total > 10" @size-change="changeSize" @current-change="changeCurrent"></el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from '@/api'
|
||||
import { changeTime } from '@/utils/global'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
data: '',
|
||||
time: '',
|
||||
// 收益总额
|
||||
totalIncome: '',
|
||||
form: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
created (){this.getPopupList()},
|
||||
methods: {
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
changeSize(size) {
|
||||
this.form.pageSize = size
|
||||
this.form.pageNumber = 1
|
||||
this.getPopupList()
|
||||
},
|
||||
// 当前页发生变化触发
|
||||
changeCurrent(pageNumber) {
|
||||
this.form.pageNumber = pageNumber
|
||||
this.getPopupList()
|
||||
},
|
||||
// 请求弹窗列表参数
|
||||
getPopupList(type) {
|
||||
if( type === 'status') {
|
||||
this.form.pageNumber = 1
|
||||
}
|
||||
this.loading = true;
|
||||
let form = Object.assign(this.form, { uid: this.data })
|
||||
API.getProxyDetails(form).then(res => {
|
||||
if (res.code === 200 && res.data.data) {
|
||||
this.totalIncome = res.data.totalIncome / 100
|
||||
this.tableData = res.data.data
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.tableData = []
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 时间触发回调
|
||||
changeTime(time) {
|
||||
if (time) {
|
||||
this.form.startTime = changeTime(time[0]) || ''
|
||||
this.form.endTime = changeTime(time[1]) || ''
|
||||
} else {
|
||||
this.form.startTime = ''
|
||||
this.form.endTime = ''
|
||||
}
|
||||
this.getPopupList('status')
|
||||
},
|
||||
// 打开编辑视频弹窗、传递需要编辑的参数
|
||||
open(data) {
|
||||
this.dialogVisible = true
|
||||
this.data = data
|
||||
// 请求弹窗列表
|
||||
this.getPopupList()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-box {
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.action-bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.income {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="proxyList-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input placeholder="代理ID" size="small" clearable class="param-input" v-model="form.uid"></el-input>
|
||||
<el-button type="primary" size="small" @click="search(form)">搜索</el-button>
|
||||
</div>
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
||||
<el-table-column prop="uid" label="代理ID" align="center" width="160" fixed></el-table-column>
|
||||
<el-table-column prop="promotionCode" label="推广码" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.promotionCode || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lv1" label="一级业绩总额（元）" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.lv1/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lv2" label="二级业绩总额（元）" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.lv2/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lv3" label="三级业绩总额（元）" align="center" width="160">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.lv3/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lv4" label="四级业绩总额（元）" align="center" width="160">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.lv4/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="总业绩（元）" align="center" width="120">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.total/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="withdraw" label="提现总金额（元）" align="center" width="140">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.withdraw/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="withdrawCount" label="提现次数" align="center">
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span>{{(scope.row.withdrawCount/100 || '0') | numFormat}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="a" label="更新时间" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.a || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="a" label="操作时间" align="center" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.a || '未知'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operating" label="操作" align="center" width="160" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" @click="tagsAction(scope.row.uid)">详情记录</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<!-- <el-pagination :page-sizes="[10, 15, 20, 30]" :current-page="form.pageNumber" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" background :total="total" @size-change="changeSize" @current-change="changeCurrent"></el-pagination> -->
|
||||
<!--详情记录弹窗-->
|
||||
<detail-record ref="detailRecord"></detail-record>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DetailRecord from './components/detailRecord'
|
||||
import API from '@/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
//代理列表请求参数
|
||||
form: {
|
||||
uid: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DetailRecord
|
||||
},
|
||||
methods: {
|
||||
// 详情记录
|
||||
tagsAction(data) {
|
||||
this.$refs.detailRecord.open(data);
|
||||
},
|
||||
// 请求搜索代理列表数据
|
||||
getProxyList() {
|
||||
var arr = [];
|
||||
if (!this.form.uid) {
|
||||
this.$message.error('请输入代理ID');
|
||||
return false
|
||||
} else {
|
||||
this.loading = true;
|
||||
API.getProxyList(this.form).then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
arr.push(res.data)
|
||||
this.tableData = arr
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索对应列表
|
||||
search() {
|
||||
this.getProxyList();
|
||||
},
|
||||
// pageSize发生变化触发
|
||||
// changeSize(size) {
|
||||
// this.form.pageSize = size
|
||||
// this.form.pageNumber = 1
|
||||
// this.getProxyList()
|
||||
// },
|
||||
// 当前页发生变化触发
|
||||
// changeCurrent(pageNumber) {
|
||||
// this.form.pageNumber = pageNumber
|
||||
// this.getProxyList()
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog-edit-flow"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="400px"
|
||||
>
|
||||
<ConfigForms
|
||||
ref="form"
|
||||
labelWidth="110px"
|
||||
:formItems="formItems"
|
||||
:data="formData"
|
||||
inline
|
||||
/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="close" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="sure" size="small">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ConfigForms from "@/components/ConfigForms";
|
||||
import { statusOptions } from "../config";
|
||||
|
||||
const formItems = [
|
||||
{
|
||||
type: "select",
|
||||
label: "状态",
|
||||
disabled: true,
|
||||
required: true,
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
},
|
||||
{ type: "textarea", label: "备注", required: true, key: "remark" },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "EditStatus",
|
||||
emit: ["close"],
|
||||
components: { ConfigForms },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
formItems,
|
||||
formData: null,
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return !!this.formData;
|
||||
},
|
||||
title() {
|
||||
return this.isEdit ? "退款" : "新增";
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
open(row) {
|
||||
this.formData = null;
|
||||
if (row) {
|
||||
this.formData = { id: row.id, status: 5 };
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
async sure() {
|
||||
try {
|
||||
const form = await this.$refs.form.validate();
|
||||
const data = { ...form };
|
||||
this.$emit("sure", { isEdit: this.isEdit, data });
|
||||
} catch (error) {
|
||||
console.error("sure error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-edit-flow {
|
||||
/deep/ .el-date-editor.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="tag-edit">
|
||||
<el-tag v-bind="$attrs">
|
||||
<slot></slot>
|
||||
</el-tag>
|
||||
<p v-if="msg" class="el-tag--danger">{{ msg }}</p>
|
||||
<!-- <el-button
|
||||
v-if="showEdit"
|
||||
type="text"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="onEdit"
|
||||
>退款</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TagEdit",
|
||||
props: ["showEdit", "onEdit", "msg"],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-edit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
line-height: 1.5;
|
||||
color: #ff4949;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
export const statusOptions = [
|
||||
{ label: "下单成功", value: 1, type: "" },
|
||||
{ label: "已提交", value: 2, type: "info" },
|
||||
{ label: "生成成功", value: 3, type: "success" },
|
||||
{ label: "生成失败", value: 4, type: "danger" },
|
||||
{ label: "退款", value: 5, type: "warning" },
|
||||
];
|
||||
|
||||
export const findLabel = (val, opts) => {
|
||||
const cur = opts.find((v) => v.value === val);
|
||||
if (cur) return cur.label;
|
||||
return "-";
|
||||
};
|
||||
|
||||
export const findStatusLabel = (val) => {
|
||||
const label = findLabel(val, statusOptions);
|
||||
return label;
|
||||
};
|
||||
|
||||
export const findStatusType = (val) => {
|
||||
const cur = statusOptions.find((v) => v.value === val);
|
||||
if (cur) return cur.type;
|
||||
return "";
|
||||
};
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="ai-order-list">
|
||||
<ConfigTable
|
||||
ref="ct"
|
||||
:searchConfig="searchConfig"
|
||||
:tableColumns="tableColumns"
|
||||
:tableData="list"
|
||||
:total="total"
|
||||
@change="loadData"
|
||||
@delete="delRow"
|
||||
@edit="editRow"
|
||||
></ConfigTable>
|
||||
<EditStatus ref="editDialog" @sure="callEdit"></EditStatus>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gallery from "@/components/Gallery";
|
||||
import ConfigTable from "@/components/ConfigTable";
|
||||
import { changeDate } from "@/utils/filter";
|
||||
import transApi from "@/api/transactionManagement";
|
||||
import TagEdit from "./components/TagEdit.vue";
|
||||
import { findStatusLabel, findStatusType, statusOptions } from "./config";
|
||||
import EditStatus from "./components/EditStatus.vue";
|
||||
|
||||
const searchConfig = [
|
||||
{ type: "input", placeholder: "请输入ID", key: "id" },
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择状态",
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
},
|
||||
// {
|
||||
// type: "select",
|
||||
// placeholder: "绘图风格",
|
||||
// key: "styleType",
|
||||
// options: styleList,
|
||||
// },
|
||||
{ type: "input", placeholder: "请输入用户ID", key: "uid" },
|
||||
{ type: "button", icon: "search", placeholder: "搜索", key: "search" },
|
||||
];
|
||||
|
||||
const tableColumns = (_this) => [
|
||||
{ name: "ID", key: "id", width: 220, fixed: "fixed" },
|
||||
{ name: "用户ID", key: "uid" },
|
||||
{ name: "金币", key: "coin" },
|
||||
{ name: "文案", key: "text", overflowTooltip2: true },
|
||||
{ name: "绘图比例", key: "aspectRatio" },
|
||||
{ name: "绘图风格", key: "styleType",
|
||||
valueHandler: styleTypeHandle,
|
||||
},
|
||||
// {
|
||||
// name: "未处理的图片",
|
||||
// key: "imgUrl",
|
||||
// component: Gallery,
|
||||
// props: (val) => ({ list: val }),
|
||||
// },
|
||||
{
|
||||
name: "处理后的图片",
|
||||
key: "newImgUrl",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "状态",
|
||||
key: "status",
|
||||
component: TagEdit,
|
||||
props(value, row) {
|
||||
return {
|
||||
type: findStatusType(value),
|
||||
msg: value === 4 ? row.msg : "",
|
||||
showEdit: value === 4,
|
||||
onEdit() {
|
||||
_this.editRow(row);
|
||||
},
|
||||
};
|
||||
},
|
||||
valueHandler: findStatusLabel,
|
||||
},
|
||||
{
|
||||
name: "备注",
|
||||
key: "remark",
|
||||
},
|
||||
{
|
||||
name: "创建时间",
|
||||
key: "createdAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "更新时间",
|
||||
key: "updatedAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "操作",
|
||||
fixed: "right",
|
||||
actions: [
|
||||
{
|
||||
action: "edit",
|
||||
key: "refresh",
|
||||
text: "退款",
|
||||
hidden: (row) => row.status === 4 || row.status === 5,
|
||||
},
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
];
|
||||
function styleTypeHandle(val) {
|
||||
const obj = {
|
||||
1: '2.5D',
|
||||
2: '二次元',
|
||||
3: '二次元1',
|
||||
4: '写实',
|
||||
5: '性感卡通',
|
||||
6: '美式像素'
|
||||
}
|
||||
return obj[val] || '---'
|
||||
}
|
||||
export default {
|
||||
name: "AiImageToVideoList",
|
||||
components: { ConfigTable, EditStatus },
|
||||
data() {
|
||||
return {
|
||||
searchConfig,
|
||||
total: 0,
|
||||
list: [],
|
||||
appOpts: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
return tableColumns(this);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
try {
|
||||
const newParams = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
if (params[key] !== "") newParams[key] = params[key];
|
||||
});
|
||||
const r = await transApi.getAiTextImage(newParams);
|
||||
const data = r.data;
|
||||
this.total = data.total;
|
||||
this.list = data.list;
|
||||
} catch (error) {
|
||||
console.error("查询失败：", error);
|
||||
}
|
||||
},
|
||||
async delRow(row) {
|
||||
try {
|
||||
await this.$confirm("您确定要删除该条数据吗？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const r = await transApi.delAiTextImage({ id: row.id });
|
||||
if (r.code === 200) {
|
||||
this.$message.success("已删除");
|
||||
this.$refs.ct.search();
|
||||
} else {
|
||||
this.$message.error(r.tip);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async editRow(row) {
|
||||
this.$refs.editDialog.open(row);
|
||||
},
|
||||
async callEdit(r) {
|
||||
try {
|
||||
console.log(r);
|
||||
const res = await transApi.updateAiTextImage(r.data);
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.data);
|
||||
} else {
|
||||
this.$message.success(r.isEdit ? "退款成功" : "");
|
||||
this.$refs.editDialog.close();
|
||||
setTimeout(() => {
|
||||
this.$refs.ct.search();
|
||||
}, 200);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("call edit error:", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-order-list {
|
||||
/deep/ .el-button {
|
||||
padding: 9px 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="add-switch-box">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-form ref="form" :model="params" :rules="rules" label-width="100px">
|
||||
<el-form-item label="模块名称:" prop="name">
|
||||
<el-input v-model="params.name" size="small" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块排序:" prop="sortNum">
|
||||
<el-input v-model.number="params.sortNum" size="small" placeholder="请输入排序"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块类型:" prop="type">
|
||||
<el-select v-model="params.type" size="small" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:" prop="status">
|
||||
<el-select v-model="params.status" size="small" placeholder="请选择样式" clearable>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
: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')" size="small">确 认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import voteApi from "@/api/ai";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
// 新增页面所需要数组
|
||||
operType: "add",
|
||||
params: {
|
||||
id: "",
|
||||
name: "",
|
||||
sortNum: "",
|
||||
status: "",
|
||||
type: ""
|
||||
},
|
||||
typeList: [
|
||||
{ label: "AI视频换脸", value: 1 },
|
||||
{ label: "AI图片换脸", value: 2 },
|
||||
],
|
||||
statusList: [
|
||||
{ label: "开启", value: 1 },
|
||||
{ label: "关闭", value: 2 },
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "请输入名称", trigger: "blur" },
|
||||
],
|
||||
sortNum: [
|
||||
{ required: true, message: "请输入排序", trigger: "blur" },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "请选择类型", trigger: "change" },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "请选择状态", trigger: "change" },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 表单验证提交
|
||||
submitForm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.operType === "edit") {
|
||||
this.edit();
|
||||
} else {
|
||||
this.add();
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
edit() {
|
||||
voteApi.updateTemplate(this.params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("reloadpage");
|
||||
} else {
|
||||
this.$message.error("编辑失败,请重试");
|
||||
}
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
add() {
|
||||
voteApi.addTemplate(this.params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "添加成功",
|
||||
type: "success"
|
||||
});
|
||||
this.$emit("reloadpage");
|
||||
} else {
|
||||
this.$message.error("添加失败,请重试");
|
||||
}
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.params.id = "";
|
||||
this.params.name = "";
|
||||
this.params.sortNum = "";
|
||||
this.params.status = "";
|
||||
this.params.type = "";
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
open(type, param) {
|
||||
// eslint-disable-next-line no-console
|
||||
this.dialogVisible = true;
|
||||
this.operType = type;
|
||||
if (type === "edit") {
|
||||
this.title = "编辑";
|
||||
this.params.id = param.id;
|
||||
this.params.name = param.name;
|
||||
this.params.sortNum = param.sortNum;
|
||||
this.params.status = param.status;
|
||||
this.params.type = param.type;
|
||||
} else {
|
||||
this.title = "新增";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-form-item__error {
|
||||
left: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<div class="action-bar">
|
||||
<!-- <el-input
|
||||
placeholder="请输入Id"
|
||||
v-model="params.id"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
></el-input> -->
|
||||
<el-select v-model="params.type" size="small" placeholder="请选择类型" clearable>
|
||||
<el-option :value="1" label="AI视频换脸"></el-option>
|
||||
<el-option :value="2" label="AI图片换脸"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="params.status" size="small" placeholder="请选择类型" clearable>
|
||||
<el-option :value="1" label="开启"></el-option>
|
||||
<el-option :value="2" label="关闭"></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getDataList"
|
||||
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
|
||||
ref="multipleTable"
|
||||
height="600"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" align="center" min-width="210" />
|
||||
<el-table-column prop="name" label="名称" align="center" min-width="210" />
|
||||
<el-table-column prop="status" label="状态" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status == 1 ? '开启' : '关闭' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" align="center" min-width="210">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.type == 1 ? 'AI视频换脸' : 'AI图片换脸' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sortNum" label="排序" align="center" min-width="210" />
|
||||
<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('edit', 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>
|
||||
<editOrAdd ref="editOrAddRef" @reloadpage="getDataList" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import editOrAdd from "./editOrAdd.vue";
|
||||
import voteApi from "@/api/ai";
|
||||
export default {
|
||||
components: { editOrAdd },
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
async getDataList() {
|
||||
const data = await voteApi.getTemplateList({
|
||||
...this.params,
|
||||
...this.form
|
||||
})
|
||||
this.tableData = data.data.list || []
|
||||
this.total = data.data.total
|
||||
},
|
||||
addAndEdit(type, data) {
|
||||
this.$refs.editOrAddRef.open(type, data)
|
||||
},
|
||||
del(data) {
|
||||
this.$confirm("确定删除吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
voteApi.deleteTemplate({
|
||||
id: data.id
|
||||
}).then(() => {
|
||||
this.getDataList()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getDataList();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup">
|
||||
<div v-for="(item, i) in pictureList" :key="i" class="pictureInside">
|
||||
<base-upload
|
||||
:cover="item.src"
|
||||
:action="action"
|
||||
@successCallback="item.successCallback"
|
||||
:wSize="360"
|
||||
:hSize="480"
|
||||
:width="'360px'"
|
||||
:height="'480px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
size="small"
|
||||
class="deleteButton"
|
||||
@click="deletePicture(i)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="handleClose" size="small">取 消</el-button> -->
|
||||
<el-button type="primary" size="small" @click="addPicture"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitDate()"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pictureList: [],
|
||||
picturePopupLength: ["1200px", "1250px", "1300px"],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pictureList.length < 4 && this.pictureList.length > 0) {
|
||||
return this.picturePopupLength[this.pictureList.length - 1];
|
||||
} else if (this.pictureList.length < 10) {
|
||||
return "1200px";
|
||||
} else {
|
||||
return "1250px";
|
||||
}
|
||||
},
|
||||
over() {
|
||||
return this.pictureList.length < 10 ? "hidden" : "auto";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.params.cover = res.data.coverImg;
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if (this.pictureList.length === 1) {
|
||||
this.$message.error("请至少保留一张！");
|
||||
return;
|
||||
}
|
||||
this.pictureList.splice(i, 1);
|
||||
},
|
||||
// 新增图片
|
||||
addPicture() {
|
||||
let obj = {
|
||||
src: "",
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
this.pictureList.push(obj);
|
||||
},
|
||||
// 提交表单
|
||||
submitDate() {
|
||||
let arr = [];
|
||||
this.pictureList.forEach((item) => {
|
||||
arr.push(item.src);
|
||||
});
|
||||
this.editVideoInfo({ newPic: arr, id: this.id, status: 2 });
|
||||
},
|
||||
editVideoInfo(params) {
|
||||
API.aiTransExamine(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "操作成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerPreviewList");
|
||||
} else {
|
||||
this.$message.error("操作失败！");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr, id) {
|
||||
this.id = id;
|
||||
this.dialogVisible = true;
|
||||
let arr = [];
|
||||
if (pictureArr) {
|
||||
for (var i = 0; i < pictureArr.length; i++) {
|
||||
let obj = {
|
||||
src: pictureArr[i],
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
arr.push(obj);
|
||||
}
|
||||
this.pictureList = arr;
|
||||
}
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.pictureList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
overflow-x: auto !important;
|
||||
border: solid 5px black;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog :title="'图集详情'" :visible.sync="dialogVisible" :width="width" :before-close="handleClose" :close-on-click-modal="false">
|
||||
<div class="picturePopup">
|
||||
<div v-for="(item,i) in pictureList" :key="i" class="pictureInside">
|
||||
<base-upload :cover="item.src" :action="action" @successCallback="item.successCallback" :wSize="360" :hSize="480" :width="'360px'" :height="'480px'" :hide="true"></base-upload>
|
||||
<!-- <el-button type="danger" icon="el-icon-delete" circle size="small" class="deleteButton" @click="deletePicture(i)"></el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from '@/utils/serverUrlConfig'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
tags:[],
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + '/vid/uploadStatic',
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pictureList: [],
|
||||
picturePopupLength: ['1200px','1250px','1300px'],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if(this.pictureList.length <4 && this.pictureList.length > 0) {
|
||||
return this.picturePopupLength[this.pictureList.length-1]
|
||||
} else if(this.pictureList.length < 10){
|
||||
return '1200px'
|
||||
} else {
|
||||
return '1250px'
|
||||
}
|
||||
},
|
||||
over() {
|
||||
return this.pictureList.length < 10 ? 'hidden' : 'auto'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.params.cover = res.data.coverImg
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if(this.pictureList.length === 1) {
|
||||
this.$message.error('请至少保留一张！')
|
||||
return
|
||||
}
|
||||
this.pictureList.splice(i,1)
|
||||
},
|
||||
// 新增图片
|
||||
addPicture() {
|
||||
let obj = {
|
||||
src: '',
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg
|
||||
}
|
||||
}
|
||||
this.pictureList.push(obj)
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr) {
|
||||
this.dialogVisible = true
|
||||
let arr = [];
|
||||
for(var i = 0; i< pictureArr.length; i++) {
|
||||
let obj = {
|
||||
src: pictureArr[i],
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg
|
||||
}
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
this.pictureList = arr
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.pictureList = []
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
overflow-x: auto !important;
|
||||
border: solid 5px black;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div class="ai-trade-list">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户id"
|
||||
v-model="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入id"
|
||||
v-model="params.id"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 280px"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入AI模版id"
|
||||
v-model="params.mId"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 280px"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="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
|
||||
>
|
||||
</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" fixed width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ initTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户ID" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.uid || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模版图" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'70px'"
|
||||
:height="'70px'"
|
||||
:src="imgUrl + scope.row.modPic"
|
||||
></img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原始图" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'70px'"
|
||||
:height="'70px'"
|
||||
:src="imgUrl + scope.row.originPic"
|
||||
></img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="AI换脸图"
|
||||
align="center"
|
||||
min-width="120"
|
||||
prop="newPic"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'70px'"
|
||||
:height="'70px'"
|
||||
:src="imgUrl + scope.row.newPic"
|
||||
></img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="warning" v-if="scope.row.status === 1">进行中</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.status === 2">生成成功</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.status === 3">生成失败</el-tag>
|
||||
<el-tag type="info" v-if="scope.row.status === 5">已经提交</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coin" label="金币" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.coin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mId" label="模版ID" align="center" width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.mId || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateAct"
|
||||
label="操作者"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ initTime(scope.row.updatedAt) }}</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="pass(scope.row)"
|
||||
v-if="scope.row.status == 1"
|
||||
>通过</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="openEdit(scope.row, 'pass')"
|
||||
v-if="scope.row.status == 1"
|
||||
>通过</el-button
|
||||
> -->
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-edit"
|
||||
@click="openEdit(scope.row, 'reject')"
|
||||
v-if="scope.row.status == 1"
|
||||
>拒绝</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
v-if="scope.row.status == 2 || scope.row.status == 5"
|
||||
@click="openReset(scope.row)"
|
||||
>状态重置</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
<!--分页组件-->
|
||||
<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="编辑"
|
||||
:visible.sync="editVisible"
|
||||
width="500px"
|
||||
@before-close="handleClose()"
|
||||
@close="handleClose()"
|
||||
>
|
||||
<el-form>
|
||||
<div class="form_item">
|
||||
<el-form-item label="AI图:" prop="newPic" v-if="optType == 'pass'">
|
||||
<base-upload
|
||||
:cover="form.newPic"
|
||||
:action="action"
|
||||
@successCallback="successCallback"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="拒绝原因" prop="remark" v-else>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
class="inp"
|
||||
v-model="form.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="原始图:" prop="background">
|
||||
<img-load
|
||||
:width="'148px'"
|
||||
:height="'148px'"
|
||||
:src="imgUrl + originPic"
|
||||
></img-load>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @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";
|
||||
import PreviewVideo from "./../../videoManagement/videoExamine/components/preview-video";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
statuses: [
|
||||
{ label: "进行中", value: 1 },
|
||||
{ label: "生成成功", value: 2 },
|
||||
{ label: "生成失败", value: 3 },
|
||||
{ label: "已提交", value: 5 },
|
||||
],
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: undefined,
|
||||
id: undefined,
|
||||
uid: undefined,
|
||||
mId: undefined,
|
||||
},
|
||||
editVisible: false,
|
||||
form: {
|
||||
id: "",
|
||||
newPic: undefined,
|
||||
status: undefined,
|
||||
remark: undefined,
|
||||
},
|
||||
originPic: undefined,
|
||||
optType: "",
|
||||
// 用户头像上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 请求列表
|
||||
getList(type) {
|
||||
this.loading = false;
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getAiImgTransList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
pass(row) {
|
||||
const req = {
|
||||
id: row.id,
|
||||
title: row.moduleTitle,
|
||||
status: 5,
|
||||
};
|
||||
API.aiImgTransExamine(req).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "通过成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.msg || "通过失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 上传成功回掉
|
||||
successCallback(res) {
|
||||
this.form.newPic = [res.data.coverImg];
|
||||
},
|
||||
// 打开编辑
|
||||
openEdit(param, type) {
|
||||
this.optType = type;
|
||||
this.form.id = param.id;
|
||||
this.originPic = param.originPic;
|
||||
if (type == "pass") {
|
||||
this.form.status = 2;
|
||||
} else {
|
||||
this.form.status = 3;
|
||||
}
|
||||
this.editVisible = true;
|
||||
},
|
||||
onSubmit() {
|
||||
if (!this.form.newPic && this.optType == "pass")
|
||||
return this.$message.warning("请上传AI图片");
|
||||
if (!this.form.remark && this.optType == "reject")
|
||||
return this.$message.warning("请填写拒绝原因");
|
||||
API.aiImgTransExamine(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: this.optType == "pass" ? "通过成功" : "拒绝成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message:
|
||||
res.tip || this.optType == "pass" ? "通过失败" : "拒绝失败",
|
||||
});
|
||||
}
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
openReset(row) {
|
||||
this.$confirm("确认重置该订单吗", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
})
|
||||
.then(() => {
|
||||
let req = {
|
||||
id: row.id,
|
||||
status: 1,
|
||||
};
|
||||
API.aiImgTransExamine(req).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "重置成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.msg || "重置失败!",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消重置",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.editVisible = false;
|
||||
this.form.id = "";
|
||||
this.form.newPic = undefined;
|
||||
this.form.status = undefined;
|
||||
this.form.remark = undefined;
|
||||
this.originPic = undefined;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
initTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.form_item {
|
||||
display: flex;
|
||||
}
|
||||
.clickNumDialog {
|
||||
/deep/ .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
/deep/ .el-pagination {
|
||||
float: none;
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
/deep/ .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
/deep/ .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup" :style="{ overflow: over }">
|
||||
<div v-for="(item, i) in pictureList" :key="i" class="pictureInside">
|
||||
<decrypt-img
|
||||
style="width: 180px; height: 180px"
|
||||
:src="imgUrl + item.src"
|
||||
:fit="fit"
|
||||
></decrypt-img>
|
||||
<!-- <base-upload
|
||||
:cover="item.src"
|
||||
:action="action"
|
||||
@successCallback="item.successCallback"
|
||||
:wSize="360"
|
||||
:hSize="480"
|
||||
:width="'180px'"
|
||||
:height="'180px'"
|
||||
:hide="true"
|
||||
></base-upload> -->
|
||||
<!-- <el-button type="danger" icon="el-icon-delete" circle size="small" class="deleteButton" @click="deletePicture(i)"></el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
tags: [],
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pictureList: [],
|
||||
picturePopupLength: ["240px", "430px", "620px"],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pictureList.length < 4 && this.pictureList.length > 0) {
|
||||
return this.picturePopupLength[this.pictureList.length - 1];
|
||||
} else if (this.pictureList.length < 10) {
|
||||
return "620px";
|
||||
} else {
|
||||
return "640px";
|
||||
}
|
||||
},
|
||||
over() {
|
||||
return this.pictureList.length < 10 ? "hidden" : "auto";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.params.cover = res.data.coverImg;
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if (this.pictureList.length === 1) {
|
||||
this.$message.error("请至少保留一张！");
|
||||
return;
|
||||
}
|
||||
this.pictureList.splice(i, 1);
|
||||
},
|
||||
// 新增图片
|
||||
addPicture() {
|
||||
let obj = {
|
||||
src: "",
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
this.pictureList.push(obj);
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr) {
|
||||
this.dialogVisible = true;
|
||||
let arr = [];
|
||||
for (var i = 0; i < pictureArr.length; i++) {
|
||||
let obj = {
|
||||
src: pictureArr[i],
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
arr.push(obj);
|
||||
}
|
||||
this.pictureList = arr;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.pictureList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
border: solid 5px white;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,728 @@
|
||||
<template>
|
||||
<div class="tag-box">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户id"
|
||||
v-model="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入id"
|
||||
v-model="params.id"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 280px"
|
||||
></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.vidId"
|
||||
>
|
||||
<el-option
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
v-for="item in faceModList"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="getList('status')"
|
||||
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"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<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="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ changeTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户ID" align="center" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.uid }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="picture"
|
||||
label="换脸人物图"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.picture || !scope.row.picture.length"
|
||||
>未知</span
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="picturePreview"
|
||||
>
|
||||
<decrypt-img
|
||||
style="width: 50px; height: 50px"
|
||||
:src="imgUrl + item"
|
||||
fit="fill"
|
||||
v-for="(item, i) in scope.row.picture"
|
||||
:key="i"
|
||||
></decrypt-img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="modTitle"
|
||||
label="模版标题"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.modTitle || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="modUrl"
|
||||
label="模版视频"
|
||||
align="center"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
class="el-icon-video-play views"
|
||||
title="点击预览"
|
||||
@click="checkMedia(scope.row.modUrl, 'video', scope.row)"
|
||||
v-if="scope.row.modUrl"
|
||||
>
|
||||
</i>
|
||||
<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.url, 'video', scope.row)"
|
||||
v-if="scope.row.url"
|
||||
>
|
||||
</i>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</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 == 1">已完成</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row.status == 2"
|
||||
>已提交</el-tag
|
||||
>
|
||||
<el-tag type="info" v-else-if="scope.row.status == 0">未完成</el-tag>
|
||||
<el-tag v-else-if="scope.row.status == -1">已退款</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="原因"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coin" label="价格" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.coin + scope.row.incomeCoin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="operator"
|
||||
label="审核人"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.operator || "-" }}</span>
|
||||
</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
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="220"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="pass(scope.row)"
|
||||
v-if="scope.row.status == 0"
|
||||
>通过</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="addAndEdit(scope.row)"
|
||||
v-if="scope.row.status == 0"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
@click="openReset(scope.row)"
|
||||
v-if="scope.row.status == 1 || scope.row.status == 2"
|
||||
>状态重置</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 修改 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="530px"
|
||||
@before-close="handleClose"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form :model="form" label-width="140px" ref="form">
|
||||
<el-form-item label="上传视频:">
|
||||
<!--视频分片上传-->
|
||||
<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 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-item label="原因:" prop="remark" v-if="form.status == -1">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
size="small"
|
||||
></el-input>
|
||||
</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-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>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import PreviewVideo from "../components/preview-video";
|
||||
import PreviewPicture from "./components/previewPicture";
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
PreviewPicture,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
faceModList: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: undefined, // 状态
|
||||
vidId: "", // 视频模版id
|
||||
},
|
||||
statuses: [
|
||||
{
|
||||
label: "未完成",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已完成",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "已提交",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "已退款",
|
||||
value: -1,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
id: undefined,
|
||||
url: "", // 视频资源地址
|
||||
remark: "", // 备注
|
||||
status: undefined, // 状态，0 未激活 1 激活
|
||||
},
|
||||
dataIds: [],
|
||||
batchUpdateDialog: false,
|
||||
batchStatus: 0,
|
||||
// 用户头像上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
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();
|
||||
this.getFaceModList();
|
||||
},
|
||||
methods: {
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getChangeFaceList(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;
|
||||
});
|
||||
},
|
||||
// 上传成功回掉
|
||||
successCallback(res) {
|
||||
this.form.cover = res.data.coverImg;
|
||||
},
|
||||
// 视频上传成功时回调函数
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onFileSuccess(rootFile, file, response, chunk) {
|
||||
const res = JSON.parse(response);
|
||||
this.form.url = 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();
|
||||
},
|
||||
// 图集预览
|
||||
previewPicture(pictureArr) {
|
||||
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
||||
this.$refs.previewPicture.open(Arr);
|
||||
},
|
||||
// 定义视频上传唯一标识符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.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
this.form.id = param.id;
|
||||
this.form.status = param.status;
|
||||
this.dialogVisible = true; // 打开编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
pass(row) {
|
||||
const req = {
|
||||
id: row.id,
|
||||
title: row.modTitle,
|
||||
status: 2,
|
||||
};
|
||||
API.updChangeFaceList(req).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "通过成功",
|
||||
});
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.msg || "通过失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.updChangeFaceList(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.updChangeFaceList(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.delPrompt(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: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
openReset(row) {
|
||||
this.$confirm("确认重置该订单吗", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
})
|
||||
.then(() => {
|
||||
let req = {
|
||||
id: row.id,
|
||||
status: 0,
|
||||
};
|
||||
API.updChangeFaceList(req).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "重置成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.msg || "重置失败!",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消重置",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.url = "";
|
||||
this.form.status = undefined;
|
||||
this.form.remark = "";
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
// 处理勾选时的数据
|
||||
handleSelectionChange(objArr) {
|
||||
/**
|
||||
* 1.取消勾选时，将添加的数据从this.dataIds这个数据表里去除;
|
||||
* ① 获取到当前数据列表中未勾选的数据；
|
||||
* ② 从this.dataIds这个数据表中移除未勾选的数据；
|
||||
*/
|
||||
// ①获取到当前数据列表中未勾选的数据；
|
||||
const tempTableData = JSON.parse(JSON.stringify(this.tableData));
|
||||
objArr.forEach((item) => {
|
||||
this.tableData.forEach((value, index) => {
|
||||
if (item === value) {
|
||||
tempTableData.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// ②从this.dataIds这个数据表中移除未勾选的数据；
|
||||
tempTableData.forEach((item) => {
|
||||
this.dataIds.forEach((value, index) => {
|
||||
if (item.id === value.id) {
|
||||
this.dataIds.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// 2.添加数组数据，需要去重
|
||||
this.dataIds = this.dataIds.concat(objArr);
|
||||
const tempDatas = new Set(this.dataIds);
|
||||
this.dataIds = Array.from(tempDatas);
|
||||
},
|
||||
//查询AI换脸模版
|
||||
getFaceModList() {
|
||||
var params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 30,
|
||||
};
|
||||
API.getChangeFaceModList(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.faceModList = res.data.list;
|
||||
} else {
|
||||
this.faceModList = [];
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.picturePreview {
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
}
|
||||
.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,973 @@
|
||||
<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.moduleType"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in moduleTypes"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="searchTemplateValue"
|
||||
size="small"
|
||||
placeholder="请选择换脸类型"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="1" label="AI视频换脸"></el-option>
|
||||
<el-option :value="2" label="AI图片换脸"></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="params.mid"
|
||||
>
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in searchTemplateListData"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
class="title-input"
|
||||
v-model="params.title"
|
||||
clearable
|
||||
placeholder="请输入标题搜索"
|
||||
size="small"
|
||||
></el-input>
|
||||
<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
|
||||
>
|
||||
<!-- <el-button type="danger" size="small" icon="el-icon-menu" :disabled="isBatch" plain @click="openBatch">批量操作</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"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
v-if="isBatch"
|
||||
width="55"
|
||||
fixed="left"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<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="moduleType"
|
||||
label="配置类型"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.moduleType == 1"
|
||||
>AI脱衣模型</el-tag
|
||||
>
|
||||
<el-tag v-else-if="scope.row.moduleType == 2">AI视频换脸</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row.moduleType == 3"
|
||||
>AI图片换脸</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.moduleType == 4"
|
||||
>AI图生视频</el-tag
|
||||
>
|
||||
<el-tag type="danger" v-else-if="scope.row.moduleType == 5"
|
||||
>AI绘图配置</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sceneType"
|
||||
label="场景类型"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.moduleType == 4"
|
||||
:type="findStatusLabel(scope.row.sceneType)"
|
||||
>{{ findLabel(scope.row.sceneType, sceneTypes) }}</el-tag
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.title || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模板名称" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.mid ? handleTemplateName(scope.row.mid) : "-"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="封面图" align="center" width="200" prop="cover">
|
||||
<template slot-scope="scope">
|
||||
<Gallery :list="scope.row.cover"></Gallery>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="视频审查" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<i
|
||||
v-if="!scope.row.newUrl"
|
||||
class="el-icon-video-play views"
|
||||
title="点击预览"
|
||||
@click="checkMedia(scope.row.sourceURL, 'video', scope.row)"
|
||||
>
|
||||
</i>
|
||||
<Gallery v-else :list="scope.row.newUrl"></Gallery>
|
||||
</template>
|
||||
</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 == 1">激活</el-tag>
|
||||
<el-tag v-else-if="scope.row.status == 0">未激活</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="playTime"
|
||||
label="影片时长"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.playTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="视频类型"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coin" label="价格" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.coin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="vipCoin"
|
||||
label="vip价格"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.vipCoin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="hotValue"
|
||||
label="热门值"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.hotValue || 0 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="hotMark"
|
||||
label="热门标签"
|
||||
align="center"
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.hotMark || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" align="center" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sort || 0 }}</span>
|
||||
</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="180"
|
||||
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>
|
||||
<div style="margin: 10px 0" v-if="isBatch">
|
||||
<el-button @click="giveUpBatch" type="danger" size="mini"
|
||||
>取消批量操作</el-button
|
||||
>
|
||||
<el-button @click="openBatchDelete" type="primary" size="mini"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
<!--分页组件-->
|
||||
<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="批量设置" :visible.sync="dialogVisibleAll" width="530px">
|
||||
<el-form :model="form" label-width="140px" :rules="rules" ref="form">
|
||||
<el-form-item label="类型" prop="moduleType" style="width: 400px">
|
||||
<el-select
|
||||
v-model="templateValue"
|
||||
size="small"
|
||||
placeholder="请选择换脸类型"
|
||||
clearable
|
||||
>
|
||||
<el-option :value="1" label="AI视频换脸"></el-option>
|
||||
<el-option :value="2" label="AI图片换脸"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="模版名称" prop="moduleType" style="width: 400px">
|
||||
<el-select
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="templateType"
|
||||
>
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in templateListData"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisibleAll = false" size="small"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" @click="setAllTemplate"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<!-- 新增、修改 -->
|
||||
<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="moduleType" style="width: 400px">
|
||||
<el-select
|
||||
placeholder="请选择配置类型"
|
||||
clearable
|
||||
size="small"
|
||||
v-model="form.moduleType"
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in moduleTypes"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title" style="width: 400px">
|
||||
<el-input type="textarea" :rows="3" v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片:" prop="cover">
|
||||
<base-upload
|
||||
:cover="form.cover"
|
||||
:action="action"
|
||||
@successCallback="successCallback"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.moduleType == 4"
|
||||
label="效果图片:"
|
||||
prop="newUrl"
|
||||
>
|
||||
<base-upload
|
||||
:cover="form.newUrl"
|
||||
:action="action"
|
||||
@successCallback="successCallback($event, 'newUrl')"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="form.moduleType == 4"
|
||||
label="场景类型:"
|
||||
prop="sceneType"
|
||||
style="width: 400px"
|
||||
>
|
||||
<el-select v-model="form.sceneType">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in sceneTypes"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传视频:" v-if="form.moduleType == 2">
|
||||
<!--视频分片上传-->
|
||||
<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
|
||||
label="影片时长"
|
||||
prop="playTime"
|
||||
style="width: 400px"
|
||||
v-if="form.moduleType == 2"
|
||||
>
|
||||
<el-input v-model.number="form.playTime"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="视频类型"
|
||||
prop="type"
|
||||
style="width: 400px"
|
||||
v-if="form.moduleType == 2"
|
||||
>
|
||||
<el-input v-model="form.type"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="热门值" prop="hotValue" style="width: 400px">
|
||||
<el-input v-model.number="form.hotValue"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="热门标签" prop="hotMark" style="width: 400px">
|
||||
<el-input v-model="form.hotMark"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" style="width: 400px">
|
||||
<el-input v-model.number="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="coin" style="width: 400px">
|
||||
<el-input v-model.number="form.coin"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="vip价格" prop="vipCoin" style="width: 400px">
|
||||
<el-input v-model.number="form.vipCoin"></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>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import voteApi from "@/api/ai";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import local from "@/utils/localStroage.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import PreviewVideo from "../components/preview-video";
|
||||
import Gallery from "@/components/Gallery";
|
||||
import {
|
||||
findLabel,
|
||||
findStatusLabel,
|
||||
sceneTypeMixin,
|
||||
} from "../aiImageToVideoList/config";
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
Gallery,
|
||||
},
|
||||
mixins: [sceneTypeMixin],
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
title: undefined,
|
||||
status: undefined, // 状态
|
||||
moduleType: undefined, // 类型
|
||||
},
|
||||
rules: {
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
type: [{ required: true, message: "请输入视频类型", trigger: "blur" }],
|
||||
},
|
||||
statuses: [
|
||||
{
|
||||
label: "激活",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "未激活",
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
moduleTypes: [
|
||||
{
|
||||
label: "AI脱衣模型",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "AI视频换脸",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "AI图片换脸",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "AI图生视频",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "AI绘图配置",
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
dialogTitle: "",
|
||||
dialogVisible: false,
|
||||
dialogVisibleAll: false,
|
||||
templateList: [],
|
||||
templateType: "",
|
||||
templateValue: "",
|
||||
searchTemplateValue: "",
|
||||
form: {
|
||||
id: undefined,
|
||||
title: "", // 标题
|
||||
sourceURL: "", // 视频资源地址
|
||||
status: 0, // 状态，0 未激活 1 激活
|
||||
playTime: 0, // 影片时长
|
||||
cover: "", // 封面图
|
||||
newUrl: "", // 图生视频效果图
|
||||
type: "", // 视频类型
|
||||
coin: 0, // 价格
|
||||
vipCoin: 0, // vip价格
|
||||
moduleType: undefined, // 配置类型
|
||||
hotValue: 0, // 热门值
|
||||
hotMark: undefined, // 热门标签
|
||||
sort: 0, // 排序
|
||||
sceneType: undefined, // 场景类型
|
||||
},
|
||||
isBatch: false,
|
||||
dataIds: [],
|
||||
batchUpdateDialog: false,
|
||||
batchStatus: 0,
|
||||
// 用户头像上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
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?/, "秒");
|
||||
},
|
||||
};
|
||||
},
|
||||
templateListData() {
|
||||
return (
|
||||
this.templateList.filter((item) => item.type == this.templateValue) ||
|
||||
[]
|
||||
);
|
||||
},
|
||||
searchTemplateListData() {
|
||||
return (
|
||||
this.templateList.filter(
|
||||
(item) => item.type == this.searchTemplateValue
|
||||
) || []
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
async getDataList() {
|
||||
const data = await voteApi.getTemplateAll();
|
||||
this.templateList = data.data || [];
|
||||
},
|
||||
handleTemplateName(id) {
|
||||
const obj = this.templateList.find((item) => item.id === id) || {};
|
||||
return obj.name || "--";
|
||||
},
|
||||
setAllTemplate() {
|
||||
const ids = this.dataIds.map((item) => item.id);
|
||||
if (!this.templateType) {
|
||||
return this.$message.error("请选择模板");
|
||||
}
|
||||
voteApi.setTemplateAll({ ids, mid: this.templateType }).then(() => {
|
||||
this.$message.success("设置成功");
|
||||
this.getList();
|
||||
this.dialogVisibleAll = false;
|
||||
this.giveUpBatch();
|
||||
});
|
||||
},
|
||||
getList(type) {
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getChangeFaceModList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
if (this.isBatch) {
|
||||
this.restoreCheckedState();
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 上传成功回掉
|
||||
successCallback(res, key = "cover") {
|
||||
this.form[key] = res.data.coverImg;
|
||||
},
|
||||
// 视频上传成功时回调函数
|
||||
// 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) {
|
||||
if (param === "add") {
|
||||
this.dialogTitle = "新增";
|
||||
} else {
|
||||
this.dialogTitle = "编辑";
|
||||
// 把数据回显给表单
|
||||
Object.assign(this.form, param);
|
||||
this.form.id = param.id;
|
||||
this.form.title = param.title;
|
||||
this.form.sourceURL = param.sourceURL;
|
||||
this.form.status = param.status;
|
||||
this.form.playTime = param.playTime;
|
||||
this.form.cover = param.cover;
|
||||
this.form.type = param.type;
|
||||
this.form.coin = param.coin;
|
||||
this.form.vipCoin = param.vipCoin;
|
||||
this.form.moduleType = param.moduleType;
|
||||
this.form.hotValue = param.hotValue;
|
||||
this.form.hotMark = param.hotMark;
|
||||
this.form.sort = param.sort;
|
||||
this.form.newUrl = param.newUrl;
|
||||
}
|
||||
this.dialogVisible = true; // 打开新增、编辑对话框
|
||||
},
|
||||
// 新增、修改提交
|
||||
onSubmit() {
|
||||
if (this.dialogTitle === "新增") {
|
||||
this.add();
|
||||
} else {
|
||||
this.edit();
|
||||
}
|
||||
},
|
||||
// 新增方法
|
||||
add() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
API.addChangeFaceMod(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.updateChangeFaceMod(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.delPrompt(delData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除失败!",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 关闭窗口清除数据
|
||||
handleClose() {
|
||||
this.form.id = undefined;
|
||||
this.form.title = "";
|
||||
this.form.sourceURL = "";
|
||||
this.form.status = 0;
|
||||
this.form.playTime = 0;
|
||||
this.form.cover = "";
|
||||
this.form.type = "";
|
||||
this.form.coin = 0;
|
||||
this.form.vipCoin = 0;
|
||||
this.form.moduleType = undefined;
|
||||
this.form.hotValue = 0;
|
||||
this.form.hotMark = undefined;
|
||||
this.form.sort = 0;
|
||||
this.form.newUrl = undefined;
|
||||
this.form.sceneType = undefined;
|
||||
this.isBatch = false;
|
||||
this.dataIds = [];
|
||||
this.batchStatus = 0;
|
||||
this.batchUpdateDialog = false;
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
changeTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
// *******************批量操作*********************
|
||||
// 翻页时的勾选回显
|
||||
restoreCheckedState() {
|
||||
/**
|
||||
* ①获取到当前数据表格中已经被选中的数据
|
||||
*/
|
||||
const indexs = this.tableData
|
||||
.map((item) => {
|
||||
let flag = false;
|
||||
this.dataIds.forEach((value) => {
|
||||
value.id === item.id ? (flag = true) : "";
|
||||
});
|
||||
if (flag) {
|
||||
return item;
|
||||
}
|
||||
})
|
||||
.filter((item) => item);
|
||||
/**
|
||||
* ②回显当前数据表格中已经被勾选过的数据
|
||||
*/
|
||||
this.$nextTick(() => {
|
||||
indexs.forEach((rows) => {
|
||||
this.$refs.multipleTable.toggleRowSelection(rows);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 批量操作窗口
|
||||
openBatch() {
|
||||
this.isBatch = true;
|
||||
},
|
||||
// 取消批量操作
|
||||
giveUpBatch() {
|
||||
this.isBatch = false;
|
||||
this.dataIds = [];
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
},
|
||||
// 打开批量删除窗口
|
||||
openBatchDelete() {
|
||||
if (this.dataIds.length === 0)
|
||||
return this.$message.error("请至少选择一条数据");
|
||||
this.dialogVisibleAll = true;
|
||||
this.templateType = "";
|
||||
this.templateValue = "";
|
||||
},
|
||||
// 处理勾选时的数据
|
||||
handleSelectionChange(objArr) {
|
||||
/**
|
||||
* 1.取消勾选时，将添加的数据从this.dataIds这个数据表里去除;
|
||||
* ① 获取到当前数据列表中未勾选的数据；
|
||||
* ② 从this.dataIds这个数据表中移除未勾选的数据；
|
||||
*/
|
||||
// ①获取到当前数据列表中未勾选的数据；
|
||||
const tempTableData = JSON.parse(JSON.stringify(this.tableData));
|
||||
objArr.forEach((item) => {
|
||||
this.tableData.forEach((value, index) => {
|
||||
if (item === value) {
|
||||
tempTableData.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// ②从this.dataIds这个数据表中移除未勾选的数据；
|
||||
tempTableData.forEach((item) => {
|
||||
this.dataIds.forEach((value, index) => {
|
||||
if (item.id === value.id) {
|
||||
this.dataIds.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// 2.添加数组数据，需要去重
|
||||
this.dataIds = this.dataIds.concat(objArr);
|
||||
const tempDatas = new Set(this.dataIds);
|
||||
this.dataIds = Array.from(tempDatas);
|
||||
},
|
||||
findLabel,
|
||||
findStatusLabel,
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.title-input {
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog-edit-flow"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="400px"
|
||||
>
|
||||
<ConfigForms
|
||||
ref="form"
|
||||
labelWidth="110px"
|
||||
:formItems="formItems"
|
||||
:data="formData"
|
||||
inline
|
||||
/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="close" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="sure" size="small">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ConfigForms from "@/components/ConfigForms";
|
||||
import { statusOptions } from "../config";
|
||||
|
||||
const formItems = [
|
||||
{
|
||||
type: "select",
|
||||
label: "状态",
|
||||
disabled: true,
|
||||
required: true,
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
},
|
||||
{ type: "textarea", label: "备注", required: true, key: "remark" },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "EditStatus",
|
||||
emit: ["close"],
|
||||
components: { ConfigForms },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
formItems,
|
||||
formData: null,
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return !!this.formData;
|
||||
},
|
||||
title() {
|
||||
return this.isEdit ? "退款" : "新增";
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
open(row) {
|
||||
this.formData = null;
|
||||
if (row) {
|
||||
this.formData = { id: row.id, status: 5 };
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
async sure() {
|
||||
try {
|
||||
const form = await this.$refs.form.validate();
|
||||
const data = { ...form };
|
||||
this.$emit("sure", { isEdit: this.isEdit, data });
|
||||
} catch (error) {
|
||||
console.error("sure error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-edit-flow {
|
||||
/deep/ .el-date-editor.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="tag-edit">
|
||||
<el-tag v-bind="$attrs">
|
||||
<slot></slot>
|
||||
</el-tag>
|
||||
<p v-if="msg" class="el-tag--danger">{{ msg }}</p>
|
||||
<!-- <el-button
|
||||
v-if="showEdit"
|
||||
type="text"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="onEdit"
|
||||
>退款</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TagEdit",
|
||||
props: ["showEdit", "onEdit", "msg"],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-edit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0;
|
||||
line-height: 1.5;
|
||||
color: #ff4949;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
import API from "@/api";
|
||||
export const statusOptions = [
|
||||
{ label: "下单成功", value: 1, type: "" },
|
||||
{ label: "已提交", value: 2, type: "info" },
|
||||
{ label: "生成成功", value: 3, type: "success" },
|
||||
{ label: "生成失败", value: 4, type: "danger" },
|
||||
{ label: "退款", value: 5, type: "warning" },
|
||||
];
|
||||
|
||||
export const statusAiPlazaListOptions = [
|
||||
{ label: "待审核", value: 0, type: "warning" },
|
||||
{ label: "通过", value: 1, type: "success" },
|
||||
{ label: "拒绝", value: 2, type: "danger" },
|
||||
{ label: "下架", value: 3, type: "info" },
|
||||
];
|
||||
export const typeOptions = [
|
||||
{ label: "ai图片换脸", value: 1, type: "success" },
|
||||
{ label: "ai视频换脸", value: 2, type: "danger" },
|
||||
{ label: "ai脱衣", value: 3, type: "warning" },
|
||||
{ label: "ai图生视频", value: 4, type: "info" },
|
||||
{ label: "ai绘画", value: 5, type: "danger" },
|
||||
];
|
||||
|
||||
export const sceneTypes = [
|
||||
{ label: "掀衣露乳", value: 0 },
|
||||
{ label: "男人撕衣", value: 1 },
|
||||
{ label: "神屌射脸", value: 2 },
|
||||
{ label: "阿黑颜", value: 3 },
|
||||
{ label: "接吻", value: 4 },
|
||||
{ label: "吸奶", value: 5 },
|
||||
{ label: "露逼", value: 6 },
|
||||
];
|
||||
export const findLabel = (val, opts) => {
|
||||
const cur = opts.find((v) => v.value === val);
|
||||
if (cur) return cur.label;
|
||||
return "-";
|
||||
};
|
||||
|
||||
export const findStatusLabel = (val) => {
|
||||
const label = findLabel(val, statusOptions);
|
||||
return label;
|
||||
};
|
||||
|
||||
export const findStatusType = (val) => {
|
||||
const cur = statusOptions.find((v) => v.value === val);
|
||||
if (cur) return cur.type;
|
||||
return "";
|
||||
};
|
||||
|
||||
export const sceneTypeMixin = {
|
||||
data() {
|
||||
return {
|
||||
sceneTypes,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.syncAllScene();
|
||||
},
|
||||
methods: {
|
||||
async syncAllScene() {
|
||||
try {
|
||||
const r = await API.getAllScene();
|
||||
this.sceneTypes = (r.data || []).map((it) => ({
|
||||
...it,
|
||||
label: it.name,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error("syncAllScene error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="ai-order-list">
|
||||
<ConfigTable
|
||||
ref="ct"
|
||||
:searchConfig="searchConfig"
|
||||
:tableColumns="tableColumns"
|
||||
:tableData="list"
|
||||
:total="total"
|
||||
@change="loadData"
|
||||
@delete="delRow"
|
||||
@edit="editRow"
|
||||
></ConfigTable>
|
||||
<EditStatus ref="editDialog" @sure="callEdit"></EditStatus>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gallery from "@/components/Gallery";
|
||||
import ConfigTable from "@/components/ConfigTable";
|
||||
import { changeDate } from "@/utils/filter";
|
||||
import transApi from "@/api/transactionManagement";
|
||||
import TagEdit from "./components/TagEdit.vue";
|
||||
import {
|
||||
findLabel,
|
||||
findStatusLabel,
|
||||
findStatusType,
|
||||
sceneTypeMixin,
|
||||
statusOptions,
|
||||
} from "./config";
|
||||
import EditStatus from "./components/EditStatus.vue";
|
||||
|
||||
const searchConfig = (_this) => {
|
||||
return [
|
||||
{ type: "input", placeholder: "请输入ID", key: "id" },
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择状态",
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择场景类型",
|
||||
key: "sceneType",
|
||||
options: _this.sceneTypes,
|
||||
},
|
||||
{ type: "input", placeholder: "请输入用户ID", key: "uid" },
|
||||
{ type: "button", icon: "search", placeholder: "搜索", key: "search" },
|
||||
];
|
||||
};
|
||||
|
||||
const tableColumns = (_this) => [
|
||||
{ name: "ID", key: "id", width: 220, fixed: "fixed" },
|
||||
{ name: "用户ID", key: "uid" },
|
||||
{ name: "金币", key: "coin" },
|
||||
{
|
||||
name: "场景类型",
|
||||
key: "sceneType",
|
||||
component: TagEdit,
|
||||
props(value) {
|
||||
return {
|
||||
type: findStatusType(value),
|
||||
msg: "",
|
||||
showEdit: false,
|
||||
};
|
||||
},
|
||||
valueHandler: (val) => findLabel(val, _this.sceneTypes),
|
||||
},
|
||||
{
|
||||
name: "未处理的图片",
|
||||
key: "imgUrl",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "处理后的图片",
|
||||
key: "newImgUrl",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "状态",
|
||||
key: "status",
|
||||
component: TagEdit,
|
||||
props(value, row) {
|
||||
return {
|
||||
type: findStatusType(value),
|
||||
msg: value === 4 ? row.msg : "",
|
||||
showEdit: value === 4,
|
||||
onEdit() {
|
||||
_this.editRow(row);
|
||||
},
|
||||
};
|
||||
},
|
||||
valueHandler: findStatusLabel,
|
||||
},
|
||||
{
|
||||
name: "备注",
|
||||
key: "remark",
|
||||
},
|
||||
{
|
||||
name: "创建时间",
|
||||
key: "createdAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "更新时间",
|
||||
key: "updatedAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "操作",
|
||||
fixed: "right",
|
||||
actions: [
|
||||
{
|
||||
action: "edit",
|
||||
key: "refresh",
|
||||
text: "退款",
|
||||
hidden: (row) => row.status === 4 || row.status === 5,
|
||||
},
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "AiImageToVideoList",
|
||||
components: { ConfigTable, EditStatus },
|
||||
mixins: [sceneTypeMixin],
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
list: [],
|
||||
appOpts: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
return tableColumns(this);
|
||||
},
|
||||
searchConfig() {
|
||||
return searchConfig(this);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
try {
|
||||
const newParams = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
if (params[key] !== "") newParams[key] = params[key];
|
||||
});
|
||||
const r = await transApi.getAiImageToVideoList(newParams);
|
||||
const data = r.data;
|
||||
this.total = data.total;
|
||||
this.list = data.list;
|
||||
} catch (error) {
|
||||
console.error("查询失败：", error);
|
||||
}
|
||||
},
|
||||
async delRow(row) {
|
||||
try {
|
||||
await this.$confirm("您确定要删除该条数据吗？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const r = await transApi.delAiImageToVideo({ id: row.id });
|
||||
if (r.code === 200) {
|
||||
this.$message.success("已删除");
|
||||
this.$refs.ct.search();
|
||||
} else {
|
||||
this.$message.error(r.tip);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async editRow(row) {
|
||||
this.$refs.editDialog.open(row);
|
||||
},
|
||||
async callEdit(r) {
|
||||
try {
|
||||
console.log(r);
|
||||
const res = await transApi.updateAiImageToVideo(r.data);
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.data);
|
||||
} else {
|
||||
this.$message.success(r.isEdit ? "退款成功" : "");
|
||||
this.$refs.editDialog.close();
|
||||
setTimeout(() => {
|
||||
this.$refs.ct.search();
|
||||
}, 200);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("call edit error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-order-list {
|
||||
/deep/ .el-button {
|
||||
padding: 9px 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="ai-novel-list">
|
||||
<ConfigTable
|
||||
ref="ct"
|
||||
:searchConfig="searchConfig"
|
||||
:tableColumns="tableColumns"
|
||||
:tableData="list"
|
||||
:total="total"
|
||||
@change="loadData"
|
||||
@delete="delRow"
|
||||
@edit="editRow"
|
||||
></ConfigTable>
|
||||
<EditStatus ref="editDialog" @sure="callEdit"></EditStatus>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConfigTable from "@/components/ConfigTable";
|
||||
import { changeDate } from "@/utils/filter";
|
||||
import transApi from "@/api/ai";
|
||||
import LongText from "../../../components/LongText.vue";
|
||||
import {
|
||||
findLabel,
|
||||
findStatusLabel,
|
||||
findStatusType,
|
||||
statusOptions,
|
||||
} from "../aiImageToVideoList/config";
|
||||
import TagEdit from "../aiImageToVideoList/components/TagEdit.vue";
|
||||
import EditStatus from "../aiImageToVideoList/components/EditStatus.vue";
|
||||
|
||||
const modelOptions = [
|
||||
{ label: "AI小艺", value: 1 },
|
||||
{ label: "AI小萌", value: 2 },
|
||||
];
|
||||
|
||||
const searchConfig = [
|
||||
{ type: "input", placeholder: "请输入ID", key: "id" },
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择状态",
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
},
|
||||
{ type: "input", placeholder: "请输入用户ID", key: "uid" },
|
||||
{ type: "button", icon: "search", placeholder: "搜索", key: "search" },
|
||||
];
|
||||
|
||||
const tableColumns = (_this) => [
|
||||
{ name: "ID", key: "id", width: 220, fixed: "fixed" },
|
||||
{ name: "用户ID", key: "uid" },
|
||||
{
|
||||
name: "故事情节",
|
||||
key: "description",
|
||||
component: LongText,
|
||||
width: 220,
|
||||
props: (val) => {
|
||||
return { text: val };
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "小说正文",
|
||||
key: "content",
|
||||
component: LongText,
|
||||
width: 220,
|
||||
props: (val) => {
|
||||
return { text: val };
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "状态",
|
||||
key: "status",
|
||||
component: TagEdit,
|
||||
props(value, row) {
|
||||
return {
|
||||
type: findStatusType(value),
|
||||
msg: value === 4 ? row.msg : "",
|
||||
showEdit: value === 4,
|
||||
onEdit() {
|
||||
_this.editRow(row);
|
||||
},
|
||||
};
|
||||
},
|
||||
valueHandler: findStatusLabel,
|
||||
},
|
||||
{ name: "地点场景", key: "locationScene" },
|
||||
{ name: "人物设定", key: "characterSetting" },
|
||||
{ name: "细节说明", key: "details" },
|
||||
{
|
||||
name: "小说模型",
|
||||
key: "modelType",
|
||||
component: TagEdit,
|
||||
valueHandler: (val) => findLabel(val, modelOptions),
|
||||
},
|
||||
{ name: "金币", key: "coin" },
|
||||
{ name: "扣除金币个数", key: "debitAmountCoin" },
|
||||
{ name: "扣除收益金币个数", key: "debitIncomeCoin" },
|
||||
{
|
||||
name: "备注",
|
||||
key: "remark",
|
||||
},
|
||||
{
|
||||
name: "创建时间",
|
||||
key: "createdAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "更新时间",
|
||||
key: "updatedAt",
|
||||
valueHandler: changeDate,
|
||||
},
|
||||
{
|
||||
name: "操作",
|
||||
fixed: "right",
|
||||
actions: [
|
||||
{
|
||||
action: "edit",
|
||||
key: "refresh",
|
||||
text: "退款",
|
||||
hidden: (row) => row.status === 4 || row.status === 5,
|
||||
},
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "AiNovelList",
|
||||
components: { ConfigTable, EditStatus },
|
||||
data() {
|
||||
return {
|
||||
searchConfig,
|
||||
total: 0,
|
||||
list: [],
|
||||
appOpts: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
return tableColumns(this);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async loadData(params) {
|
||||
try {
|
||||
const newParams = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
if (params[key] !== "") newParams[key] = params[key];
|
||||
});
|
||||
const r = await transApi.getAiNovelList(newParams);
|
||||
const data = r.data;
|
||||
this.total = data.total;
|
||||
this.list = data.list;
|
||||
} catch (error) {
|
||||
console.error("查询失败：", error);
|
||||
}
|
||||
},
|
||||
async delRow(row) {
|
||||
try {
|
||||
await this.$confirm("您确定要删除该条数据吗？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const r = await transApi.delAiNovel({ id: row.id });
|
||||
if (r.code === 200) {
|
||||
this.$message.success("已删除");
|
||||
this.$refs.ct.search();
|
||||
} else {
|
||||
this.$message.error(r.tip);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async editRow(row) {
|
||||
this.$refs.editDialog.open(row);
|
||||
},
|
||||
async callEdit(r) {
|
||||
try {
|
||||
console.log(r);
|
||||
const res = await transApi.updateAiNovel(r.data);
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.data);
|
||||
} else {
|
||||
this.$message.success(r.isEdit ? "退款成功" : "");
|
||||
this.$refs.editDialog.close();
|
||||
setTimeout(() => {
|
||||
this.$refs.ct.search();
|
||||
}, 200);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("call edit error:", error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-novel-list {
|
||||
/deep/ .el-button {
|
||||
padding: 9px 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="group-list">
|
||||
<ConfigTable
|
||||
ref="ct"
|
||||
:searchConfig="searchConfig"
|
||||
:tableColumns="tableColumns"
|
||||
:tableData="list"
|
||||
:total="total"
|
||||
@change="loadData"
|
||||
@delete="delRow"
|
||||
@edit="editRow"
|
||||
@add="addGroup"
|
||||
@editBatch="editBatch"
|
||||
@delBatch="delBatch"
|
||||
selection
|
||||
></ConfigTable>
|
||||
<UpdateAiPlaza ref="editDialog" @success="successCallback" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConfigTable from "@/components/ConfigTable";
|
||||
import VideoPlayIcon from "../components/VideoPlayIcon";
|
||||
import API from "@/api/ai";
|
||||
import Gallery from "@/components/Gallery";
|
||||
import { changeDate } from "@/utils/filter";
|
||||
import {
|
||||
statusAiPlazaListOptions,
|
||||
typeOptions,
|
||||
} from "../aiImageToVideoList/config";
|
||||
import UpdateAiPlaza from "../components/UpdateAiPlaza";
|
||||
const typeFilterFun = (v) => {
|
||||
switch (v) {
|
||||
case 1:
|
||||
return "ai图片换脸";
|
||||
case 2:
|
||||
return "ai视频换脸";
|
||||
case 3:
|
||||
return "ai脱衣";
|
||||
case 4:
|
||||
return "ai图生视频";
|
||||
case 5:
|
||||
return "ai绘画";
|
||||
default:
|
||||
return "-";
|
||||
}
|
||||
};
|
||||
const searchConfig = [
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择状态",
|
||||
key: "status",
|
||||
options: statusAiPlazaListOptions,
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
placeholder: "请选择类型",
|
||||
key: "type",
|
||||
options: typeOptions,
|
||||
},
|
||||
{ type: "input", placeholder: "请输入用户ID", key: "uid" },
|
||||
{ type: "button", icon: "search", placeholder: "搜索", key: "search" },
|
||||
{ type: "button", icon: "menu", placeholder: "批量修改", key: "editBatch", isBatch: true },
|
||||
{ type: "button", icon: "delete", placeholder: "批量删除", key: "delBatch", isBatch: true },
|
||||
];
|
||||
const tableColumns = () => [
|
||||
{ name: "ID", key: "id", width: 220 },
|
||||
{ name: "标题", key: "title", width: 100 },
|
||||
{ name: "用户id", key: "uid", width: 100 },
|
||||
{
|
||||
name: "原图",
|
||||
key: "originalImage",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "生成的图",
|
||||
key: "generateImage",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "原视频",
|
||||
key: "originalVideo",
|
||||
component: VideoPlayIcon,
|
||||
props: (val, row) => ({ url: val, videoInfo: row }),
|
||||
},
|
||||
{
|
||||
name: "生成的视频",
|
||||
key: "generateVideo",
|
||||
component: VideoPlayIcon,
|
||||
props: (val, row) => ({ url: val, videoInfo: row }),
|
||||
},
|
||||
{
|
||||
name: "原视频封面",
|
||||
key: "originalVideoCover",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{
|
||||
name: "生成的视频封面",
|
||||
key: "generateVideoCover",
|
||||
component: Gallery,
|
||||
props: (val) => ({ list: val }),
|
||||
},
|
||||
{ name: "置顶排序号", key: "sortCode" },
|
||||
{ name: "输入的原文", key: "originContent", width: 200 },
|
||||
{ name: "原因", key: "reason", width: 200 },
|
||||
{
|
||||
name: "状态",
|
||||
key: "status",
|
||||
valueHandler: (v) =>
|
||||
v == 1 ? "审核通过" : v == 2 ? "拒绝" : v == 3 ? "下架" : "待审核",
|
||||
},
|
||||
{ name: "关联模版id", key: "template", width: 140 },
|
||||
{
|
||||
name: "类型",
|
||||
key: "type",
|
||||
valueHandler: typeFilterFun,
|
||||
},
|
||||
{ name: "收藏数", key: "collectCount" },
|
||||
{ name: "评论数", key: "commentCount" },
|
||||
{ name: "点赞数", key: "likeCount" },
|
||||
{ name: "关联订单id", key: "orderId" },
|
||||
{ name: "浏览数", key: "viewCount" },
|
||||
{ name: "审核时间", key: "reviewAt", valueHandler: changeDate },
|
||||
{ name: "创建时间", key: "createdAt", valueHandler: changeDate },
|
||||
{ name: "更新时间", key: "updatedAt", valueHandler: changeDate },
|
||||
{
|
||||
name: "操作",
|
||||
fixed: "right",
|
||||
actions: [
|
||||
{
|
||||
action: "edit",
|
||||
key: "refresh",
|
||||
text: "修改",
|
||||
},
|
||||
"delete",
|
||||
],
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "AiPlazaList",
|
||||
components: { ConfigTable, UpdateAiPlaza },
|
||||
data() {
|
||||
return {
|
||||
searchConfig,
|
||||
total: 0,
|
||||
list: [],
|
||||
appOpts: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
return tableColumns(this);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
successCallback() {
|
||||
this.$refs.ct.search();
|
||||
},
|
||||
async loadData(params) {
|
||||
try {
|
||||
const newParams = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
if (params[key] !== "") newParams[key] = params[key];
|
||||
});
|
||||
const r = await API.geTaiplazaList(newParams);
|
||||
const data = r.data;
|
||||
this.total = data.total;
|
||||
this.list = data.list;
|
||||
} catch (error) {
|
||||
console.error("查询失败：", error);
|
||||
}
|
||||
},
|
||||
addGroup() {
|
||||
this.$refs.editDialog.open();
|
||||
},
|
||||
editRow(row) {
|
||||
this.$refs.editDialog.open(row);
|
||||
},
|
||||
editBatch(selectedRows) {
|
||||
if(selectedRows.length===0){
|
||||
this.$message.warning("请先选择要修改的数据");
|
||||
return;
|
||||
}
|
||||
const ids = selectedRows.map(row => row.id);
|
||||
this.$refs.editDialog.openBatch(ids);
|
||||
},
|
||||
async delBatch(selectedRows) {
|
||||
if(selectedRows.length===0){
|
||||
this.$message.warning("请先选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
const ids = selectedRows.map(row => row.id);
|
||||
try {
|
||||
await this.$confirm("您确定要删除选择的数据吗？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const r = await API.deleteAiplaza({ ids: ids });
|
||||
if (r.code === 200) {
|
||||
this.$message.success("已删除");
|
||||
this.$refs.ct.search();
|
||||
} else {
|
||||
this.$message.error(r.tip);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
async delRow(row) {
|
||||
try {
|
||||
await this.$confirm("您确定要删除该条数据吗？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const r = await API.deleteAiplaza({ id: row.id });
|
||||
if (r.code === 200) {
|
||||
this.$message.success("已删除");
|
||||
this.$refs.ct.search();
|
||||
} else {
|
||||
this.$message.error(r.tip);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-list {
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup">
|
||||
<div v-for="(item, i) in pictureList" :key="i" class="pictureInside">
|
||||
<base-upload
|
||||
:cover="item.src"
|
||||
:action="action"
|
||||
@successCallback="item.successCallback"
|
||||
:wSize="360"
|
||||
:hSize="480"
|
||||
:width="'360px'"
|
||||
:height="'480px'"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
size="small"
|
||||
class="deleteButton"
|
||||
@click="deletePicture(i)"
|
||||
></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="handleClose" size="small">取 消</el-button> -->
|
||||
<el-button type="primary" size="small" @click="addPicture"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="submitDate()"
|
||||
:loading="flag"
|
||||
>确 认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import API from "@/api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
flag: false,
|
||||
dialogVisible: false,
|
||||
// 封面上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
pictureList: [],
|
||||
picturePopupLength: ["1200px", "1250px", "1300px"],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pictureList.length < 4 && this.pictureList.length > 0) {
|
||||
return this.picturePopupLength[this.pictureList.length - 1];
|
||||
} else if (this.pictureList.length < 10) {
|
||||
return "1200px";
|
||||
} else {
|
||||
return "1250px";
|
||||
}
|
||||
},
|
||||
over() {
|
||||
return this.pictureList.length < 10 ? "hidden" : "auto";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 封面图上传成功回调
|
||||
successCallback(res) {
|
||||
this.params.cover = res.data.coverImg;
|
||||
},
|
||||
// 删除某张图片
|
||||
deletePicture(i) {
|
||||
if (this.pictureList.length === 1) {
|
||||
this.$message.error("请至少保留一张！");
|
||||
return;
|
||||
}
|
||||
this.pictureList.splice(i, 1);
|
||||
},
|
||||
// 新增图片
|
||||
addPicture() {
|
||||
let obj = {
|
||||
src: "",
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
this.pictureList.push(obj);
|
||||
},
|
||||
// 提交表单
|
||||
submitDate() {
|
||||
let arr = [];
|
||||
this.pictureList.forEach((item) => {
|
||||
arr.push(item.src);
|
||||
});
|
||||
this.editVideoInfo({ newPic: arr, id: this.id, status: 2 });
|
||||
},
|
||||
editVideoInfo(params) {
|
||||
API.aiTransExamine(params)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "操作成功！",
|
||||
type: "success",
|
||||
});
|
||||
this.$emit("handlerPreviewList");
|
||||
} else {
|
||||
this.$message.error("操作失败！");
|
||||
}
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.handleClose();
|
||||
this.flag = false;
|
||||
});
|
||||
},
|
||||
// 打开弹窗并初始化tags数据
|
||||
open(pictureArr, id) {
|
||||
this.id = id;
|
||||
this.dialogVisible = true;
|
||||
let arr = [];
|
||||
if (pictureArr) {
|
||||
for (var i = 0; i < pictureArr.length; i++) {
|
||||
let obj = {
|
||||
src: pictureArr[i],
|
||||
successCallback(res) {
|
||||
obj.src = res.data.coverImg;
|
||||
},
|
||||
};
|
||||
arr.push(obj);
|
||||
}
|
||||
this.pictureList = arr;
|
||||
}
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.pictureList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.el-dialog {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.input-box {
|
||||
margin-top: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-input {
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.picturePopup {
|
||||
overflow-x: auto !important;
|
||||
border: solid 5px black;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
.pictureInside {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
.deleteButton {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="tags-box">
|
||||
<el-dialog
|
||||
:title="'图集详情'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="680px"
|
||||
:before-close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="picturePopup">
|
||||
<decrypt-img
|
||||
v-for="url in fileList"
|
||||
:key="url"
|
||||
style="width: 150px; height: 150px;margin-right: 15px;"
|
||||
:src="url"
|
||||
:preview-src-list="fileList"
|
||||
>
|
||||
</decrypt-img>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
fileList: [], // 用于图片回显
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开弹窗
|
||||
open(pictureArr) {
|
||||
this.fileList = pictureArr.map((item) => {
|
||||
return this.imgUrl + item;
|
||||
});
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.fileList = [];
|
||||
this.pics = undefined;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.tags-box {
|
||||
.picturePopup {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-height: 580px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,682 @@
|
||||
<template>
|
||||
<div class="ai-trade-list">
|
||||
<!--操作栏-->
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户id"
|
||||
v-model="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
></el-input>
|
||||
<el-input
|
||||
placeholder="请输入id"
|
||||
v-model="params.id"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
style="width: 280px"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="params.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
size="small"
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statuses"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="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="danger"
|
||||
size="small"
|
||||
icon="el-icon-menu"
|
||||
:disabled="isBatch"
|
||||
plain
|
||||
@click="openBatch"
|
||||
>批量操作</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"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
v-if="isBatch"
|
||||
width="55"
|
||||
fixed="left"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column prop="id" label="ID" align="center" fixed width="240">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ initTime(scope.row.createdAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uid" label="用户ID" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.uid || "未知" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原始图" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<img-load
|
||||
:width="'70px'"
|
||||
:height="'70px'"
|
||||
:src="returnUrl(scope.row)"
|
||||
></img-load>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="用户标记图"
|
||||
align="center"
|
||||
min-width="120"
|
||||
prop="maskPics"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.maskPics">
|
||||
<img-load
|
||||
:width="'70px'"
|
||||
:height="'70px'"
|
||||
:src="imgUrl + scope.row.maskPics[0]"
|
||||
></img-load>
|
||||
</template>
|
||||
<span v-else>暂无图片</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="newPic"
|
||||
label="AI脱衣图"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.newPic">暂无图片</span>
|
||||
<div
|
||||
v-else
|
||||
class="picturePreview"
|
||||
>
|
||||
<decrypt-img
|
||||
style="width: 50px; height: 50px"
|
||||
:src="imgUrl + item"
|
||||
fit="fill"
|
||||
v-for="(item, i) in scope.row.newPic"
|
||||
:key="i"
|
||||
></decrypt-img>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="warning" v-if="scope.row.status === 1">进行中</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.status === 2">生成成功</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.status === 3">生成失败</el-tag>
|
||||
<el-tag type="info" v-if="scope.row.status === 6">已提交</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="coin" label="金币" align="center" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.coin }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updateAct"
|
||||
label="操作者"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateAct || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.remark || "-" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="修改时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ initTime(scope.row.updatedAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="280"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="auto(scope.row)"
|
||||
v-if="scope.row.status == 1"
|
||||
>自动处理</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
@click="openEdit(scope.row, 'pass')"
|
||||
v-if="scope.row.status == 1"
|
||||
>通过</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-edit"
|
||||
@click="openEdit(scope.row, 'reject')"
|
||||
v-if="scope.row.status == 1"
|
||||
>拒绝</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
v-if="scope.row.status == 2 || scope.row.status == 6"
|
||||
@click="openReset(scope.row)"
|
||||
>状态重置</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin: 10px 0" v-if="isBatch">
|
||||
<el-button @click="giveUpBatch" type="danger" size="mini"
|
||||
>取消批量操作</el-button
|
||||
>
|
||||
<el-button @click="openBatchAutoHandle" type="success" size="mini"
|
||||
>批量自动处理</el-button
|
||||
>
|
||||
<el-button @click="openBatchReject" type="primary" size="mini"
|
||||
>批量拒绝</el-button
|
||||
>
|
||||
</div>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
<!--分页组件-->
|
||||
<el-pagination
|
||||
:page-sizes="[10, 30, 50, 100]"
|
||||
: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="编辑"
|
||||
:visible.sync="editVisible"
|
||||
width="500px"
|
||||
@before-close="handleClose()"
|
||||
@close="handleClose()"
|
||||
>
|
||||
<el-form>
|
||||
<div class="form_item">
|
||||
<el-form-item label="AI图:" prop="newPic" v-if="optType == 'pass'">
|
||||
<base-upload
|
||||
:cover="form.newPic"
|
||||
:action="action"
|
||||
@successCallback="successCallback"
|
||||
:hide="true"
|
||||
></base-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="拒绝原因" prop="remark" v-else>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
class="inp"
|
||||
v-model="form.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="原始图:" prop="background">
|
||||
<img-load
|
||||
:width="'148px'"
|
||||
:height="'148px'"
|
||||
:src="imgUrl + originPic"
|
||||
></img-load>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 图集预览窗口 -->
|
||||
<preview-picture ref="previewPicture"></preview-picture>
|
||||
<!-- 打开窗口 -->
|
||||
<el-dialog
|
||||
title="拒绝原因"
|
||||
:visible.sync="rejectVisible"
|
||||
width="500px"
|
||||
@before-close="handleClose()"
|
||||
@close="handleClose()"
|
||||
>
|
||||
<el-form>
|
||||
<div class="form_item">
|
||||
<el-form-item label="拒绝原因" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
class="inp"
|
||||
v-model="rejectForm.remark"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="onRejectSubmit()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { uniteDate } from "@/utils/validator.js";
|
||||
import baseConfig from "@/utils/serverUrlConfig";
|
||||
import PreviewVideo from "./../../videoManagement/videoExamine/components/preview-video";
|
||||
import PreviewPicture from "./components/previewPicture";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PreviewVideo,
|
||||
PreviewPicture,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据加载动画
|
||||
loading: false,
|
||||
imgUrl: baseConfig.imgUrl,
|
||||
statuses: [
|
||||
{ label: "进行中", value: 1 },
|
||||
{ label: "生成成功", value: 2 },
|
||||
{ label: "生成失败", value: 3 },
|
||||
{ label: "已提交", value: 6 },
|
||||
],
|
||||
// 列表数据
|
||||
tableData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: undefined,
|
||||
uid: undefined,
|
||||
},
|
||||
editVisible: false,
|
||||
form: {
|
||||
id: "",
|
||||
newPic: undefined,
|
||||
status: undefined,
|
||||
remark: undefined,
|
||||
},
|
||||
rejectVisible: false,
|
||||
rejectForm: {
|
||||
remark: undefined,
|
||||
},
|
||||
originPic: undefined,
|
||||
optType: "",
|
||||
// 用户头像上传地址
|
||||
action: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
||||
isBatch: false,
|
||||
dataIds: [],
|
||||
batchUpdateDialog: false,
|
||||
batchStatus: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 请求列表
|
||||
getList(type) {
|
||||
this.loading = false;
|
||||
if (type === "status") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
API.getAiTransList(this.params)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
}
|
||||
if (this.isBatch) {
|
||||
this.restoreCheckedState();
|
||||
}
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 图集预览
|
||||
previewPicture(pictureArr) {
|
||||
let Arr = JSON.parse(JSON.stringify(pictureArr));
|
||||
this.$refs.previewPicture.open(Arr);
|
||||
},
|
||||
// 上传成功回掉
|
||||
successCallback(res) {
|
||||
this.form.newPic = [res.data.coverImg];
|
||||
},
|
||||
// 打开编辑
|
||||
openEdit(param, type) {
|
||||
this.optType = type;
|
||||
this.form.id = param.id;
|
||||
this.originPic = param.originPics && param.originPics[0];
|
||||
if (type == "pass") {
|
||||
this.form.status = 2;
|
||||
} else {
|
||||
this.form.status = 3;
|
||||
}
|
||||
this.editVisible = true;
|
||||
},
|
||||
// 自动处理
|
||||
auto(param) {
|
||||
API.aiTransAuto({ id: param.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "操作成功",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.tip || "操作失败",
|
||||
});
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
onSubmit() {
|
||||
if (!this.form.newPic && this.optType == "pass")
|
||||
return this.$message.warning("请上传AI图片");
|
||||
if (!this.form.remark && this.optType == "reject")
|
||||
return this.$message.warning("请填写拒绝原因");
|
||||
API.aiTransExamine(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: this.optType == "pass" ? "通过成功" : "拒绝成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message:
|
||||
res.tip || this.optType == "pass" ? "通过失败" : "拒绝失败",
|
||||
});
|
||||
}
|
||||
this.handleClose();
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
openReset(row) {
|
||||
this.$confirm("确认重置该订单吗", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
})
|
||||
.then(() => {
|
||||
let req = {
|
||||
id: row.id,
|
||||
status: 1,
|
||||
};
|
||||
API.aiTransExamine(req).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "重置成功!",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.msg || "重置失败!",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消重置",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.editVisible = false;
|
||||
this.form.id = "";
|
||||
this.form.newPic = undefined;
|
||||
this.form.status = undefined;
|
||||
this.form.remark = undefined;
|
||||
this.originPic = undefined;
|
||||
this.rejectVisible = false;
|
||||
this.rejectForm.remark = undefined;
|
||||
},
|
||||
// 分页条数改变回调
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
// 分页页码改变回调
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
// 更换时间格式
|
||||
initTime(time) {
|
||||
return uniteDate(time);
|
||||
},
|
||||
returnUrl(row) {
|
||||
if (row.originPics) {
|
||||
return this.imgUrl + row.originPics[0];
|
||||
} else {
|
||||
return this.imgUrl + row.originPic;
|
||||
}
|
||||
},
|
||||
// *******************批量操作*********************
|
||||
// 翻页时的勾选回显
|
||||
restoreCheckedState() {
|
||||
/**
|
||||
* ①获取到当前数据表格中已经被选中的数据
|
||||
*/
|
||||
const indexs = this.tableData
|
||||
.map((item) => {
|
||||
let flag = false;
|
||||
this.dataIds.forEach((value) => {
|
||||
value.id === item.id ? (flag = true) : "";
|
||||
});
|
||||
if (flag) {
|
||||
return item;
|
||||
}
|
||||
})
|
||||
.filter((item) => item);
|
||||
/**
|
||||
* ②回显当前数据表格中已经被勾选过的数据
|
||||
*/
|
||||
this.$nextTick(() => {
|
||||
indexs.forEach((rows) => {
|
||||
this.$refs.multipleTable.toggleRowSelection(rows);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 批量操作窗口
|
||||
openBatch() {
|
||||
this.isBatch = true;
|
||||
this.params.status = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 取消批量操作
|
||||
giveUpBatch() {
|
||||
this.isBatch = false;
|
||||
this.dataIds = [];
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
this.params.status = undefined;
|
||||
this.getList();
|
||||
},
|
||||
// 打开批量处理窗口
|
||||
openBatchAutoHandle() {
|
||||
if (this.dataIds.length === 0)
|
||||
return this.$message.error("请至少选择一条数据");
|
||||
const ids = this.dataIds.map((item) => item.id);
|
||||
// 确认处理提示
|
||||
this.$confirm("确定自动处理这些数据吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
const req = {
|
||||
ids: ids,
|
||||
pass: true,
|
||||
};
|
||||
API.aiTransBatchAuto(req).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList();
|
||||
this.handleClose();
|
||||
this.giveUpBatch();
|
||||
this.$message.success("批量自动处理成功");
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.success("取消成功");
|
||||
});
|
||||
},
|
||||
// 打开批量拒绝窗口
|
||||
openBatchReject() {
|
||||
if (this.dataIds.length === 0)
|
||||
return this.$message.error("请至少选择一条数据");
|
||||
this.rejectVisible = true;
|
||||
},
|
||||
onRejectSubmit() {
|
||||
const ids = this.dataIds.map((item) => item.id);
|
||||
const req = {
|
||||
ids: ids,
|
||||
pass: false,
|
||||
remark: this.rejectForm.remark,
|
||||
};
|
||||
API.aiTransBatchAuto(req).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList();
|
||||
this.handleClose();
|
||||
this.giveUpBatch();
|
||||
this.$message.success("批量拒绝成功");
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 处理勾选时的数据
|
||||
handleSelectionChange(objArr) {
|
||||
/**
|
||||
* 1.取消勾选时，将添加的数据从this.dataIds这个数据表里去除;
|
||||
* ① 获取到当前数据列表中未勾选的数据；
|
||||
* ② 从this.dataIds这个数据表中移除未勾选的数据；
|
||||
*/
|
||||
// ①获取到当前数据列表中未勾选的数据；
|
||||
const tempTableData = JSON.parse(JSON.stringify(this.tableData));
|
||||
objArr.forEach((item) => {
|
||||
this.tableData.forEach((value, index) => {
|
||||
if (item === value) {
|
||||
tempTableData.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// ②从this.dataIds这个数据表中移除未勾选的数据；
|
||||
tempTableData.forEach((item) => {
|
||||
this.dataIds.forEach((value, index) => {
|
||||
if (item.id === value.id) {
|
||||
this.dataIds.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
// 2.添加数组数据，需要去重
|
||||
this.dataIds = this.dataIds.concat(objArr);
|
||||
const tempDatas = new Set(this.dataIds);
|
||||
this.dataIds = Array.from(tempDatas);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-footer {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.form_item {
|
||||
display: flex;
|
||||
}
|
||||
.clickNumDialog {
|
||||
/deep/ .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
/deep/ .el-pagination {
|
||||
float: none;
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
/deep/ .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
/deep/ .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="aimatev2-order-logs">
|
||||
<div class="action-bar">
|
||||
<el-input
|
||||
placeholder="请输入用户ID"
|
||||
v-model="params.uid"
|
||||
clearable
|
||||
size="small"
|
||||
class="param-input"
|
||||
@keyup.native.enter="getList('search')"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
size="small"
|
||||
@change="onTimeChange"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
style="margin-right: 20px"
|
||||
@click="getList('search')"
|
||||
>
|
||||
搜索
|
||||
</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="220" />
|
||||
<el-table-column
|
||||
prop="username"
|
||||
label="第三方用户名"
|
||||
align="center"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column prop="type" label="类型" align="center" min-width="80" />
|
||||
<el-table-column
|
||||
prop="type_str"
|
||||
label="类型描述"
|
||||
align="center"
|
||||
min-width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="type_name"
|
||||
label="类型名称"
|
||||
align="center"
|
||||
min-width="100"
|
||||
/>
|
||||
<el-table-column prop="amount" label="金额" align="center" min-width="90" />
|
||||
<el-table-column
|
||||
prop="balance"
|
||||
label="余额"
|
||||
align="center"
|
||||
min-width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="currency"
|
||||
label="币种"
|
||||
align="center"
|
||||
min-width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="role_id"
|
||||
label="角色ID"
|
||||
align="center"
|
||||
min-width="90"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="role_name"
|
||||
label="角色名称"
|
||||
align="center"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
align="center"
|
||||
min-width="260"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="created_at"
|
||||
label="时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
:page-sizes="[10, 15, 20, 30, 50]"
|
||||
:current-page="params.pageNumber"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@size-change="changeSize"
|
||||
@current-change="changeCurrent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import API from "@/api";
|
||||
import { changeTime } from "@/utils/global";
|
||||
|
||||
function defaultTimeRange() {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setMonth(start.getMonth() - 1);
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "Aimatev2OrderLogs",
|
||||
data() {
|
||||
const range = defaultTimeRange();
|
||||
return {
|
||||
loading: false,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
timeRange: range,
|
||||
params: {
|
||||
uid: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
startTime: changeTime(range[0]),
|
||||
endTime: changeTime(range[1]),
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTimeChange(time) {
|
||||
if (time && time.length === 2) {
|
||||
this.params.startTime = changeTime(time[0]);
|
||||
this.params.endTime = changeTime(time[1]);
|
||||
} else {
|
||||
this.params.startTime = "";
|
||||
this.params.endTime = "";
|
||||
}
|
||||
},
|
||||
getList(type) {
|
||||
if (!this.params.uid && this.params.uid !== 0) {
|
||||
this.$message.warning("请输入用户ID");
|
||||
return;
|
||||
}
|
||||
if (type === "search") {
|
||||
this.params.pageNumber = 1;
|
||||
}
|
||||
const query = {
|
||||
uid: Number(this.params.uid),
|
||||
pageNumber: this.params.pageNumber,
|
||||
pageSize: this.params.pageSize,
|
||||
};
|
||||
if (this.params.startTime && this.params.endTime) {
|
||||
query.startTime = this.params.startTime;
|
||||
query.endTime = this.params.endTime;
|
||||
}
|
||||
this.loading = true;
|
||||
API.getAimatev2OrderLogs(query)
|
||||
.then((res) => {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.tableData = res.data.list || [];
|
||||
this.total = res.data.count || 0;
|
||||
} else {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
if (res.msg || res.tip) {
|
||||
this.$message.error(res.tip || res.msg);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.tableData = [];
|
||||
this.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
changeSize(size) {
|
||||
this.params.pageSize = size;
|
||||
this.getList();
|
||||
},
|
||||
changeCurrent(pageNumber) {
|
||||
this.params.pageNumber = pageNumber;
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="updateGroupChat"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
width="500px"
|
||||
>
|
||||
<!-- 修改 -->
|
||||
<ConfigForms
|
||||
v-if="isEdit"
|
||||
ref="form"
|
||||
labelWidth="110px"
|
||||
:formItems="formItems"
|
||||
:data="formData"
|
||||
inline
|
||||
/>
|
||||
<!-- 新增 -->
|
||||
<ConfigForms
|
||||
v-else
|
||||
ref="form"
|
||||
labelWidth="110px"
|
||||
:formItems="addformItems"
|
||||
:data="addformData"
|
||||
inline
|
||||
/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="close" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="sure" size="small">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConfigForms from "@/components/ConfigForms";
|
||||
import API from "@/api/ai";
|
||||
const formItems = [
|
||||
{ label: "原因", key: "reason", type: "textarea" },
|
||||
{
|
||||
label: "状态",
|
||||
key: "status",
|
||||
type: "select",
|
||||
required: true,
|
||||
options: [
|
||||
{ label: "审核通过", value: 1 },
|
||||
{ label: "拒绝", value: 2 },
|
||||
{ label: "下架", value: 3 },
|
||||
{ label: "待审核", value: 0 },
|
||||
],
|
||||
},
|
||||
];
|
||||
const addformItems = [
|
||||
{
|
||||
label: "标题",
|
||||
key: "title",
|
||||
type: "text",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "用户id",
|
||||
key: "uid",
|
||||
type: "number",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
key: "type",
|
||||
type: "select",
|
||||
required: true,
|
||||
options: [
|
||||
{ label: "ai图片换脸", value: 1 },
|
||||
{ label: "ai视频换脸", value: 2 },
|
||||
{ label: "ai脱衣", value: 3 },
|
||||
{ label: "ai图生视频", value: 4 },
|
||||
{ label: "ai绘画", value: 5 },
|
||||
],
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "UpdateAiPlaza",
|
||||
emit: ["close"],
|
||||
components: { ConfigForms },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
formItems,
|
||||
addformItems,
|
||||
formData: null,
|
||||
addformData: {
|
||||
groupId: undefined,
|
||||
uid: undefined,
|
||||
content: "",
|
||||
image: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return !!this.formData;
|
||||
},
|
||||
title() {
|
||||
return this.isEdit ? (this.formData.ids && this.formData.ids.length) ? "批量修改" : "修改" : "新增";
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
open(row) {
|
||||
this.formData = null;
|
||||
this.addformData = {
|
||||
groupId: undefined,
|
||||
uid: undefined,
|
||||
content: "",
|
||||
image: "",
|
||||
};
|
||||
if (row) {
|
||||
this.formData = row;
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
openBatch(ids) {
|
||||
this.formData = { ids: ids };
|
||||
this.visible = true;
|
||||
},
|
||||
async sure() {
|
||||
try {
|
||||
const form = await this.$refs.form.validate();
|
||||
const data = { ...form };
|
||||
// 修改
|
||||
if (this.isEdit) {
|
||||
this.update(data);
|
||||
} else {
|
||||
// 新增
|
||||
this.addHandle(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("sure error:", error);
|
||||
}
|
||||
},
|
||||
async addHandle(data) {
|
||||
try {
|
||||
const res = await API.createAiplaza(data);
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.close();
|
||||
this.$emit("success");
|
||||
} else {
|
||||
this.$message.error("新增失败！");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("add: ", err);
|
||||
}
|
||||
},
|
||||
async update(data) {
|
||||
try {
|
||||
await this.$confirm("您确定要修改状态？", "操作提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
const res = await ((data.ids && data.ids.length) ? API.updateBatchAiplaza(data) : API.updateAiplaza(data));
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.close();
|
||||
this.$emit("success");
|
||||
} else {
|
||||
this.$message.error("修改失败！");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("update: ", err);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.updateGroupChat {
|
||||
/deep/ .el-date-editor.el-input {
|
||||
width: 200px;
|
||||
}
|
||||
/deep/ .el-input-number__decrease {
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-input-number__increase {
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="video-wrap">
|
||||
<i
|
||||
class="el-icon-video-play views"
|
||||
title="点击预览"
|
||||
@click="checkMedia(url, 'video', videoInfo)"
|
||||
v-if="url"
|
||||
>
|
||||
</i>
|
||||
<!--封面图、视频弹窗组件-->
|
||||
<preview-video ref="previewVideo"></preview-video>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PreviewVideo from "./preview-video";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
PreviewVideo,
|
||||
},
|
||||
props: ["url", "videoInfo"],
|
||||
methods: {
|
||||
// 查看媒体
|
||||
checkMedia(url, type, data) {
|
||||
this.$refs.previewVideo.open(url, type, data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></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,126 @@
|
||||
<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.length + "s" }}</span>
|
||||
</div>
|
||||
<div class="media-box" id="media-box"></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, data) {
|
||||
this.myData = data;
|
||||
// console.log(this.myData)
|
||||
this.dialogVisible = true;
|
||||
|
||||
this.imgShow = false;
|
||||
this.videoShow = true;
|
||||
this.title = "视频查看";
|
||||
// console.log(url.slice(-1))
|
||||
if (url.slice(0, 1) == "/") {
|
||||
url = url.slice(1);
|
||||
}
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user