fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogFormVisible" @close="close" calss="ac-dialog" center width="800px">
|
||||
<div class="ac-dia-form">
|
||||
<el-form :model="rowData" :rules="rules" class="demo-form-inline" label-position="right" label-width="85px" ref="ruleForm">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input placeholder="长度在 2 到 15 个字符" v-model="rowData.userName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="title === '编辑账号' || title === '新增账号'">
|
||||
<el-form-item label="账号" prop="acc">
|
||||
<el-input placeholder="使用英文字母开头" v-model="rowData.acc" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template v-if="title === '编辑账号' || title === '新增账号'">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input placeholder="请输入邮箱" v-model="rowData.email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="密码" v-if="title === '编辑账号'">
|
||||
<el-button @click="dropPassword" size="mini" type="warning" v-if="!passwordStatus">修改密码
|
||||
</el-button>
|
||||
<el-input v-else-if="passwordStatus" v-model="rowData.pwd">
|
||||
<el-button @click="dropPassword" slot="append">取消修改
|
||||
</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="pwd" v-else>
|
||||
<el-input placeholder="长度在 2 到 15 个字符" v-model="rowData.pwd" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="roleId">
|
||||
<el-select placeholder="请选择角色" v-model="rowData.roleId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in selectRoles" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="isEnb">
|
||||
<el-radio-group v-model="rowData.isEnb">
|
||||
<el-radio :label="true">正常</el-radio>
|
||||
<el-radio :label="false">封号</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<!-- 更改账号状态模块begin -->
|
||||
<template v-if="title == '账号状态'">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="ID" prop="id">
|
||||
<el-input :disabled="true" v-model="rowData.id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="状态" prop="isEnb">
|
||||
<el-radio-group v-model="rowData.isEnb">
|
||||
<el-radio :label="true">正常</el-radio>
|
||||
<el-radio :label="false">封号</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="封号原因" prop="feed_back" v-if="rowData.isEnb === 2">
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" type="textarea" v-model="rowData.feed_back" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<!-- 更改账号状态模块end -->
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button :loading="btnLoading" @click="submitForm('ruleForm')" type="primary">确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
roleDrop,
|
||||
accAdd,
|
||||
accUp,
|
||||
accSavestatus,
|
||||
} from '@/api/account/accountList'
|
||||
|
||||
export default {
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
passwordStatus: false, // 点击修改密码时，状态更改，显示出愿密码
|
||||
title: undefined,
|
||||
rowData: {
|
||||
acc: undefined, // 账户
|
||||
email: undefined, // 邮箱
|
||||
isEnb: undefined, // 使能
|
||||
name: undefined, // 名称
|
||||
pwd: undefined, // 密码
|
||||
roleId: undefined, // 角色ID
|
||||
},
|
||||
selectRoles: [], // 可选用的角色列表
|
||||
btnLoading: false, // 控制确定按钮加载状态
|
||||
dialogFormVisible: true,
|
||||
rules: {
|
||||
acc: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
|
||||
message: '不用数字特殊符号开头,使用英文字母开头',
|
||||
},
|
||||
],
|
||||
roleId: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
email: [
|
||||
{
|
||||
required: true, // 是否必填
|
||||
message: '请输入邮箱地址', // 错误提示信息
|
||||
trigger: 'blur', // 检验方式（blur为鼠标点击其他地方，）
|
||||
},
|
||||
{
|
||||
type: 'email', // 要检验的类型（number，email，date等）
|
||||
message: '请输入正确的邮箱地址',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
pwd: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
isEnb: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
userName: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 15,
|
||||
message: '长度在 2 到 15 个字符',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 请求可选用角色列表
|
||||
if (this.$store.getters.roleList.length === 0) {
|
||||
roleDrop().then((res) => {
|
||||
this.selectRoles = res.data.roleDrop
|
||||
this.$store.dispatch('account/setRoleList', res.data.roleDrop)
|
||||
})
|
||||
} else {
|
||||
this.selectRoles = this.$store.getters.roleList
|
||||
}
|
||||
this.rowData = { ...this.data.data }
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑账号') {
|
||||
this.passwordStatus = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:账号新增
|
||||
handelAddAccount() {
|
||||
let param = {
|
||||
name: this.rowData.userName,
|
||||
pwd: this.rowData.pwd,
|
||||
acc: this.rowData.acc,
|
||||
email: this.rowData.email,
|
||||
roleId: this.rowData.roleId,
|
||||
isEnb: this.rowData.isEnb,
|
||||
}
|
||||
accAdd(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功!')
|
||||
this.dialogFormVisible = false // 关闭el-dialog
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑账号数据
|
||||
handelUpdateAccount() {
|
||||
let param = {
|
||||
id: this.rowData.id,
|
||||
acc: this.rowData.acc,
|
||||
email: this.rowData.email,
|
||||
pwd: this.rowData.pwd,
|
||||
roleId: this.rowData.roleId,
|
||||
isEnb: this.rowData.isEnb,
|
||||
userName: this.rowData.userName,
|
||||
}
|
||||
accUp(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功!')
|
||||
this.dialogFormVisible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:更改账号状态
|
||||
handelAccountStatusApi() {
|
||||
let param = {
|
||||
feed_back: this.rowData.feed_back,
|
||||
isEnb: this.rowData.isEnb,
|
||||
id: this.rowData.id,
|
||||
userName: this.rowData.userName,
|
||||
}
|
||||
accSavestatus(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('状态更新成功!')
|
||||
this.dialogFormVisible = false
|
||||
} else {
|
||||
this.$message.error('状态更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
// 提交编辑与创建的表单数据
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.btnLoading = true
|
||||
// todo 判断具体执行哪个接口
|
||||
if (this.title === '账号状态') {
|
||||
this.handelAccountStatusApi()
|
||||
} else {
|
||||
if (this.title === '新增账号') {
|
||||
this.handelAddAccount()
|
||||
} else if (this.title === '编辑账号') {
|
||||
this.handelUpdateAccount()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 修改密码
|
||||
dropPassword() {
|
||||
this.passwordStatus = !this.passwordStatus
|
||||
if (this.passwordStatus) {
|
||||
this.rowData.password = ''
|
||||
} else {
|
||||
this.rowData.password = ''
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入ID/姓名/账号/邮箱" v-model="searchData.keyWords" clearable @clear="onClear" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择账号状态" v-model="searchData.status" clearable>
|
||||
<el-option :value="1" label="正常" />
|
||||
<el-option :value="2" label="封号" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSubmit" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="onAddAccount" icon="el-icon-circle-plus-outline" plain type="success">新增账号</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="accountData" border element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="姓名">
|
||||
<template slot-scope="scope">{{ scope.row.userName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="账号">
|
||||
<template slot-scope="scope">{{ scope.row.acc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="密码" width="260">
|
||||
<template slot-scope="scope">{{ scope.row.pwd }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="两步验证" width="280">
|
||||
<template slot-scope="scope">{{ scope.row.base32 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="角色id">
|
||||
<template slot-scope="scope">{{ scope.row.roleId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="角色">
|
||||
<template slot-scope="scope">{{ scope.row.roleName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="邮箱" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.email }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="签名">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isBase32 ? 'success' : 'danger'" plain size="mini">{{ scope.row.isBase32 ? "已签名" : "未签名" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb ? 'success' : 'danger'" @click="handleAccountStatus(scope.$index, scope.row)" plain size="mini">{{ scope.row.isEnb ? "正常" : "封号" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="禁用原因" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.feedBack }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<Exit :data='editData' @close="close" v-if="dialogFormVisible"></Exit>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { accList, accDel } from '@/api/account/accountList'
|
||||
import Exit from './components/addOrExit'
|
||||
export default {
|
||||
name: 'AccountList',
|
||||
components: {
|
||||
Exit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 搜索拦数据
|
||||
searchData: {
|
||||
keyWords: undefined,
|
||||
status: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
editData: {},
|
||||
|
||||
// 权限信息
|
||||
loading: true, // el-table加载状态
|
||||
dialogFormVisible: false, // 弹框的状态
|
||||
accountData: [], // 组件总数据
|
||||
total: 0, // 总条数
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getAccountData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
//TODO：获取账号列表数据
|
||||
getAccountData() {
|
||||
this.loading = true
|
||||
// 组装api接口参数，当params没有传入时，默认使用this.searchData作为参选参数
|
||||
let data = JSON.parse(JSON.stringify(this.searchData))
|
||||
accList(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.accountData = res.data.accRec
|
||||
this.total = res.data.totalCount
|
||||
} else {
|
||||
this.accountData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false // 关闭el-table loading效果
|
||||
})
|
||||
},
|
||||
//TODO:删除账号列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确认删除？').then((_) => {
|
||||
accDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.warning('删除成功')
|
||||
this.getAccountData()
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 刷新本页面
|
||||
refreshView() {
|
||||
this.getAccountData()
|
||||
},
|
||||
// 关闭弹框调用
|
||||
close() {
|
||||
this.dialogFormVisible = false
|
||||
this.getAccountData()
|
||||
},
|
||||
|
||||
// 点击搜索input内的清空按钮触发
|
||||
onClear() {
|
||||
this.searchData.keyWords = undefined
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
// 点击搜索按钮触发，并获取数据
|
||||
onSubmit() {
|
||||
this.pageIndex = 1
|
||||
this.pageSize = 10
|
||||
this.getAccountData()
|
||||
},
|
||||
|
||||
// 切换每页数据条数
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getAccountData()
|
||||
},
|
||||
|
||||
// 切换页码
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getAccountData()
|
||||
},
|
||||
|
||||
// 更改账号状态
|
||||
handleAccountStatus(index, row) {
|
||||
this.editData = {
|
||||
title: '账号状态',
|
||||
data: row,
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
|
||||
// 编辑
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑账号',
|
||||
data: row,
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
|
||||
// 点击新增按钮触发
|
||||
onAddAccount() {
|
||||
this.editData = {
|
||||
title: '新增账号',
|
||||
data: {},
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<!-- 弹出框 -->
|
||||
<el-dialog :close-on-click-modal="false" :title="title" :top="title==='编辑权限'? '0':'8%'" :visible.sync="dialogVisible" :width="title==='编辑权限'? '40%':'50%'" @close="close" center>
|
||||
<el-form :model="params" :rules="rules" label-position="left" label-width="80px" ref="ruleForm">
|
||||
<template v-if="this.title==='新增角色'||this.title==='编辑角色'">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input placeholder="角色名称" v-model="params.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="职能描述" prop="desc">
|
||||
<el-input :autosize="{ minRows: 2, maxRows: 4}" placeholder="角色描述" type="textarea" v-model="params.desc" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="权限路由" v-else>
|
||||
<el-tree :check-strictly="checkStrictly" :data="routesData" :expand-on-click-node="false" :props="defaultProps" class="permission-tree" default-expand-all node-key="path" ref="tree" show-checkbox>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<div class="lable">
|
||||
<span :class="{textStyle:data.children}">{{ node.label }}</span>
|
||||
</div>
|
||||
<div class="apiPanle">
|
||||
<div :key="index" v-for="(item,index) in data.api_url">
|
||||
<el-checkbox :label="item.description" border size="mini" v-model="item.status" />
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<!-- 编辑角色 -->
|
||||
<template v-if="this.title==='新增角色'||this.title==='编辑角色'">
|
||||
<el-button @click="dialogVisible=false" type="danger">取 消</el-button>
|
||||
<el-button :disabled="disabled" @click="onSubmitRole('ruleForm')" type="primary">确 定</el-button>
|
||||
</template>
|
||||
<!-- 编辑权限 -->
|
||||
<template v-else>
|
||||
<el-button @click="dialogVisible=false" type="danger">取 消</el-button>
|
||||
<el-button @click="confirmRole('ruleForm')" type="primary">提 交</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { deepClone } from '@/utils'
|
||||
|
||||
import { serverRouter } from '@/utils/roleTreeList'
|
||||
import { roleAdd, roleUp, getAuth, upAuth } from '@/api/account/roleList'
|
||||
|
||||
export default {
|
||||
// props: {
|
||||
// title: {
|
||||
// type: String,
|
||||
// default: '',
|
||||
// },
|
||||
// role: {
|
||||
// type: Object,
|
||||
// default: function () {
|
||||
// return {
|
||||
// id: null,
|
||||
// name: '',
|
||||
// desc: '',
|
||||
// isEnb: true,
|
||||
// created_at: null,
|
||||
// updated_at: null,
|
||||
// api_menus: null,
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
props: ['data'],
|
||||
computed: {
|
||||
routesData() {
|
||||
return this.routes ? this.routes : []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: undefined,
|
||||
params: {},
|
||||
checkStrictly: false, // tree树插件是否关联父节点
|
||||
dialogVisible: true,
|
||||
routes: '', // 现有路由(整合后渲染数据)
|
||||
disabled: false, // 提交按钮加载状态
|
||||
// 定义tree的显示
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{ min: 2, max: 15, message: '长度在 2 到 15 个字符' },
|
||||
// { pattern: /^[\u4E00-\u9FA5]+$/, message: '角色名称只能为中文' }
|
||||
],
|
||||
isEnb: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
desc: [
|
||||
{ required: true, message: '必填', trigger: 'blur' },
|
||||
{
|
||||
min: 5,
|
||||
max: 38,
|
||||
message: '角色描述不能超过5-38个字符',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.params = { ...this.data.data }
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑权限') {
|
||||
this.routes = this.generateRoutes(serverRouter)
|
||||
this.checkStrictly = true
|
||||
getAuth({ id: this.params.id }).then((res) => {
|
||||
const resp = res.data.router || []
|
||||
const data = { ...res, ...{ router: resp } }
|
||||
const role = deepClone(data)
|
||||
this.generateAPIStatus(this.routes, resp)
|
||||
this.$nextTick(async () => {
|
||||
const r = await this.generateRoutes(role.router)
|
||||
await this.generateAPIStatus(this.routes, resp)
|
||||
await this.$refs.tree.setCheckedNodes(this.generateArr(r))
|
||||
// set checked state of a node not affects its father and child nodes
|
||||
this.checkStrictly = false
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增角色
|
||||
handleAddRoleAPI() {
|
||||
roleAdd(this.params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增角色成功')
|
||||
this.dialogVisible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
this.disabled = !this.disabled
|
||||
})
|
||||
},
|
||||
//TODO：编辑角色
|
||||
handleSaveRoleAPI() {
|
||||
roleUp(this.params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.dialogVisible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
this.disabled = !this.disabled
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
onSubmitRole(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.disabled = !this.disabled
|
||||
if (this.title === '新增角色') {
|
||||
this.handleAddRoleAPI()
|
||||
} else {
|
||||
this.handleSaveRoleAPI()
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 编辑权限
|
||||
confirmRole(formName) {
|
||||
this.$refs[formName].validate(async (valid) => {
|
||||
if (valid) {
|
||||
const checkedKeys = this.$refs.tree.getCheckedKeys()
|
||||
const routes = this.generateTree(
|
||||
deepClone(serverRouter),
|
||||
'/',
|
||||
checkedKeys
|
||||
)
|
||||
await upAuth({ id: this.params.id, router: routes })
|
||||
this.dialogVisible = false
|
||||
this.$message.success('权限更改成功')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
|
||||
// 重塑路线结构，使其看 起来与侧边栏相同
|
||||
generateRoutes(routes, basePath = '/') {
|
||||
const res = []
|
||||
if (routes.length) {
|
||||
for (const route of routes) {
|
||||
const data = {
|
||||
path: path.resolve(basePath, route.path),
|
||||
title: route.meta && route.meta.title,
|
||||
name: route.name,
|
||||
}
|
||||
if (route.children) {
|
||||
data.children = this.generateRoutes(route.children, data.path)
|
||||
}
|
||||
if (
|
||||
route.api_url &&
|
||||
route.api_url.length &&
|
||||
route.api_url.length > 0
|
||||
) {
|
||||
data.api_url = route.api_url
|
||||
for (let x = 0; x < data.api_url.length; x++) {
|
||||
data.api_url[x]['status'] = false
|
||||
}
|
||||
}
|
||||
res.push(data)
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
|
||||
generateTree(routes, basePath = '/', checkedKeys) {
|
||||
const res = []
|
||||
for (const route of routes) {
|
||||
const routePath = path.resolve(basePath, route.path)
|
||||
// recursive child routes
|
||||
if (route.children) {
|
||||
route.children = this.generateTree(
|
||||
route.children,
|
||||
routePath,
|
||||
checkedKeys
|
||||
)
|
||||
}
|
||||
if (
|
||||
checkedKeys.includes(routePath) ||
|
||||
(route.children && route.children.length >= 1)
|
||||
) {
|
||||
res.push(route)
|
||||
}
|
||||
}
|
||||
return res
|
||||
},
|
||||
// reference: src/view/layout/components/Sidebar/SidebarItem.vue
|
||||
|
||||
/**
|
||||
* 存在bug:时间复杂度 *2
|
||||
*/
|
||||
generateAPIStatus(allRoutes, r) {
|
||||
r.forEach((itmeFr, indexFr) => {
|
||||
allRoutes.forEach((itemFa, indexFa) => {
|
||||
const hasName =
|
||||
itemFa.name === itmeFr.name &&
|
||||
itemFa.children &&
|
||||
itemFa.children.length &&
|
||||
itmeFr.children &&
|
||||
itmeFr.children.length
|
||||
// 判断两个数组 的name 值是否相等
|
||||
const hasAPIURL =
|
||||
itemFa.name === itmeFr.name &&
|
||||
itemFa.api_url &&
|
||||
itemFa.api_url.length &&
|
||||
itemFa.api_url.length > 0 &&
|
||||
itmeFr.api_url &&
|
||||
itmeFr.api_url.length &&
|
||||
itmeFr.api_url.length > 0
|
||||
// 是否存在 描述字段
|
||||
const hasDescription =
|
||||
itemFa.description !== undefined &&
|
||||
itmeFr.description !== undefined &&
|
||||
itemFa.description === itmeFr.description &&
|
||||
itmeFr &&
|
||||
itmeFr.status === true
|
||||
if (hasName) {
|
||||
this.generateAPIStatus(itemFa.children, itmeFr.children)
|
||||
} else if (hasAPIURL) {
|
||||
this.generateAPIStatus(itemFa.api_url, itmeFr.api_url)
|
||||
} else if (hasDescription) {
|
||||
itemFa.status = true
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
generateArr(routes) {
|
||||
let data = []
|
||||
routes.forEach((route) => {
|
||||
data.push(route)
|
||||
if (route.children) {
|
||||
const temp = this.generateArr(route.children)
|
||||
if (temp.length > 0) {
|
||||
data = [...data, ...temp]
|
||||
}
|
||||
}
|
||||
})
|
||||
return data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="handleAddRole" icon="el-icon-circle-plus-outline" plain type="success">新增角色</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="list" border element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" height="750" style="width: 100%;" v-loading="loading" :row-style="{height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="角色">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="角色职能描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.isEnb" active-color="#13ce66" inactive-color="#ff4949" @change='change(scope.row)'>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleRolePermission(scope)" plain size="mini" type="primary">权限编辑</el-button>
|
||||
<el-button @click="handleEdit(scope)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="param.pageNum" :page-size="param.pageSize" :page-sizes="[10, 20, 30, 50,100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<!-- <Exit :dialogTit="dialogTit" :role="role" @close="close" v-if="dialogVisible"></Exit> -->
|
||||
<Exit :data='eidtData' @close="close" v-if="dialogVisible"></Exit>
|
||||
<div />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getRoleList, roleDel, roleEnable } from '@/api/account/roleList'
|
||||
import Exit from './components/addOrExit'
|
||||
export default {
|
||||
name: 'RoleList',
|
||||
components: {
|
||||
Exit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTit: '', // 控制弹出框标题
|
||||
loading: false, // 表格loading状态
|
||||
dialogVisible: false, // 弹出框显示状态
|
||||
role: {}, // 角色表格当行数据，新增角色与编辑时使用\
|
||||
routes: [], // 总的路由表
|
||||
list: [], // 角色list table data
|
||||
eidtData: {},
|
||||
// 请求角色列表参数
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRoleData()
|
||||
},
|
||||
methods: {
|
||||
//TODO:切换角色列表数据状态
|
||||
change(row) {
|
||||
roleEnable({ id: row.id, isEnb: row.isEnb }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功!')
|
||||
this.getRoleData()
|
||||
} else {
|
||||
this.$message.error(res.data)
|
||||
this.getRoleData()
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:获取角色列表
|
||||
getRoleData() {
|
||||
this.loading = true
|
||||
getRoleList(this.param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.list = res.data.roleRecs
|
||||
this.total = res.data.totalCount
|
||||
} else {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
this.$message.error('请求角色错误')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:删除角色列表
|
||||
handleDelete({ $index, row }) {
|
||||
this.$confirm('确定删除角色?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
roleDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getRoleData()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 切换列表显示数量
|
||||
handleSizeChange(v) {
|
||||
this.param.pageSize = v
|
||||
this.getRoleData()
|
||||
},
|
||||
// 切换列表显示页数
|
||||
handleCurrentChange(v) {
|
||||
this.param.pageNum = v
|
||||
this.getRoleData()
|
||||
},
|
||||
// 刷新
|
||||
refreshView() {
|
||||
this.getRoleData()
|
||||
},
|
||||
// 新增角色
|
||||
handleAddRole() {
|
||||
// this.role = {}
|
||||
// this.dialogTit = '新增角色'
|
||||
this.eidtData = {
|
||||
title: '新增角色',
|
||||
data: {},
|
||||
}
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 编辑角色
|
||||
handleEdit({ row }) {
|
||||
// this.role = row
|
||||
// this.dialogTit = '编辑角色'
|
||||
this.eidtData = {
|
||||
title: '编辑角色',
|
||||
data: row,
|
||||
}
|
||||
this.checkStrictly = true
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
this.getRoleData()
|
||||
},
|
||||
/**
|
||||
* 设置账号权限路由
|
||||
*/
|
||||
async handleRolePermission(scope) {
|
||||
// this.role = scope.row
|
||||
// this.dialogTit = '编辑权限'
|
||||
this.eidtData = {
|
||||
title: '编辑权限',
|
||||
data: scope.row,
|
||||
}
|
||||
this.dialogType = 'edit'
|
||||
this.dialogVisible = true
|
||||
this.checkStrictly = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动推广图">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="活动详情图片">
|
||||
<UploadImg @changeImgUrl="changeCoverDetailUrl" :img="form.coverDetail"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动时间" prop="time">
|
||||
<el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-ddTHH:mm:ss+08:00" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动类型" prop="type">
|
||||
<el-select v-model="form.type" size="mini" filterable default-first-option remote placeholder="请选择活动类型" class="header-search-select">
|
||||
<el-option v-for="item in options" :key="item.type" :value="item.type" :label="item.name"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入活动名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序参数" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="跳转链接" prop="rank">
|
||||
<el-input v-model="form.jumpUrl" placeholder="请输入跳转链接" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="活动描述" prop="describe">
|
||||
<el-input v-model="form.describe" placeholder="请输入活动描述" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="字母名(用户程序内部查找用)">
|
||||
<el-input v-model="form.name" placeholder="输入字母名(用户程序内部查找用)" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="注意事项">
|
||||
<el-input v-model="form.note" placeholder="请输入注意事项" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { activityAdd, activityUpdate } from '@/api/activity/activityList'
|
||||
import moment from 'moment'
|
||||
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
options:[
|
||||
{type:1,name:'官方活动'},
|
||||
{type:2,name:'日常活动'},
|
||||
{type:3,name:'社区活动'},
|
||||
],
|
||||
// 表单数据
|
||||
form: {
|
||||
note: undefined,
|
||||
time: undefined,
|
||||
cover: undefined,
|
||||
coverDetail: undefined,
|
||||
describe: undefined,
|
||||
id: undefined,
|
||||
jumpUrl: undefined,
|
||||
rank: undefined,
|
||||
status: true,
|
||||
title: undefined,
|
||||
name: undefined,
|
||||
type:undefined,
|
||||
},
|
||||
rules: {
|
||||
cover: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
coverDetail: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
end: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
jumpUrl: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
describe: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
rank: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
start: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
if (this.form.start && this.form.end) {
|
||||
this.time = [
|
||||
moment(this.form.start)
|
||||
.utcOffset(480)
|
||||
.format('yyyy-MM-DDTHH:mm:ss+08:00'),
|
||||
moment(this.form.end)
|
||||
.utcOffset(480)
|
||||
.format('yyyy-MM-DDTHH:mm:ss+08:00'),
|
||||
]
|
||||
}
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
//TODO:新增活动列表数据
|
||||
add(data) {
|
||||
activityAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑活动列表数据
|
||||
update(data) {
|
||||
activityUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.time && this.time.length) {
|
||||
this.form.start = this.time[0]
|
||||
this.form.end = this.time[1]
|
||||
} else {
|
||||
this.form.start = undefined
|
||||
this.form.end = undefined
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
// 切换图片
|
||||
changeCoverDetailUrl(data) {
|
||||
this.form.coverDetail = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 新增活动类型筛选 -->
|
||||
<el-select v-model="searchData.param.type" size="mini" filterable default-first-option remote placeholder="请选择活动类型" class="header-search-select">
|
||||
<el-option v-for="item in options" :key="item.type" :value="item.type" :label="item.name"/>
|
||||
</el-select>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="排序参数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动ID" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="字母名" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动标题" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动类型" width="200">
|
||||
<template slot-scope="scope">{{ activityList[scope.row.type] }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "开启" : "关闭" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动描述" width="400">
|
||||
<template slot-scope="scope">{{ scope.row.describe }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动推广图" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动详情图" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.coverDetail"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动详情跳转地址" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动时间" width="160">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
{{ scope.row.start | BeiJingTime }}
|
||||
</div>
|
||||
至
|
||||
<div>
|
||||
{{ scope.row.end | BeiJingTime }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { activitySearch, activityDel } from '@/api/activity/activityList'
|
||||
|
||||
export default {
|
||||
name: 'ActivityList',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
param: {
|
||||
end: undefined,
|
||||
start: undefined,
|
||||
type:undefined,
|
||||
},
|
||||
},
|
||||
time: undefined,
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
options:[
|
||||
{type:1,name:'官方活动'},
|
||||
{type:2,name:'日常活动'},
|
||||
{type:3,name:'社区活动'},
|
||||
],
|
||||
// 活动类型筛选
|
||||
activityList:{
|
||||
0:"暂无类型",
|
||||
1:"官方活动",
|
||||
2:"日常活动",
|
||||
3:"社区活动",
|
||||
},
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getActivity()
|
||||
},
|
||||
methods: {
|
||||
// TODO:查询活动列表数据
|
||||
getActivity() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.param.start = this.time[0]
|
||||
this.searchData.param.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.param.start = undefined
|
||||
this.searchData.param.end = undefined
|
||||
}
|
||||
activitySearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除活动列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
activityDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getActivity()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getActivity()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getActivity()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getActivity()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getActivity()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面图" prop="name">
|
||||
<UploadImg @changeImgUrl="changeCover" :img="form.cover" @onRemove="handleRemove('cover')"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="跳转地址" prop="href">
|
||||
<el-input v-model="form.href" placeholder="请输入跳转地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select clearable placeholder="请选择类型" v-model.number="form.type" style="width:163px">
|
||||
<el-option label="默认" :value="0" />
|
||||
<el-option label="新手" :value="1" />
|
||||
<el-option label="会员" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="过期时间">
|
||||
<el-date-picker v-model="form.timeOut" type="datetime" placeholder="结束时间" style="width: 163px" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { advertiseAdd, advertiseUpdate } from '@/api/activity/advertise'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
cover: undefined, // 封面图
|
||||
href: undefined, // 跳转地址
|
||||
rank: undefined, // 排序
|
||||
status: undefined, // 是否启用
|
||||
timeOut: undefined, // 过期时间
|
||||
title: undefined, // 标题
|
||||
type: undefined, // 类型：0：默认 1:新手 2:会员
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.timeOut =
|
||||
moment(this.data.data.timeOut)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增活动广告数据
|
||||
add(data) {
|
||||
advertiseAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑活动广告数据
|
||||
update(data) {
|
||||
const param = {
|
||||
id: data.id,
|
||||
param: data,
|
||||
}
|
||||
advertiseUpdate(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
changeCover(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.rank = Number(data.rank)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面图" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 100px; height: 40px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="过期时间">
|
||||
<template slot-scope="scope">{{ scope.row.timeOut|BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转地址">
|
||||
<template slot-scope="scope">{{ scope.row.href }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型">
|
||||
<template slot-scope="scope">{{ scope.row.type|filterChangeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否启用" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { advertiseList, advertiseDel } from '@/api/activity/advertise'
|
||||
export default {
|
||||
name: 'Advertise',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
filters: {
|
||||
filterChangeType(val) {
|
||||
switch (val) {
|
||||
case 0:
|
||||
return '默认'
|
||||
case 1:
|
||||
return '新手'
|
||||
case 2:
|
||||
return '会员'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求活动广告列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
advertiseList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除活动广告列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
advertiseDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="900px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
top="2%">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
ref="ruleForm"
|
||||
class="demo-form-inline"
|
||||
label-width="80px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="公告标题">
|
||||
<el-input placeholder="请输入公告标题" v-model="form.title" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="跳转地址">
|
||||
<el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeCoverUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="系统类型">
|
||||
<el-select placeholder="请选择系统类型" clearable v-model="form.sysType" style="width: 180px">
|
||||
<el-option label="app" value="app" />
|
||||
<el-option label="h5app" value="h5app" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="form.start"
|
||||
type="datetime"
|
||||
placeholder="开始时间"
|
||||
style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="form.end"
|
||||
type="datetime"
|
||||
placeholder="结束时间"
|
||||
style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input placeholder="请输入内容" :rows="10" style="width: 500px" v-model="form.content" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="富文本" class="post-details">
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
||||
<el-form-item class="text-post">
|
||||
<QuillEditor :textNode="form.textNode" ref="QuillEditor" height="1000"></QuillEditor>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { announcementAdd, announcementUpdate } from '@/api/activity/announcement'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import QuillEditor from '@/components/QuillEditor/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
QuillEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
content: undefined, // "string",内容
|
||||
cover: undefined, // "string",封面
|
||||
end: undefined, // "string",结束时间
|
||||
jumpUrl: undefined, // "string",跳转地址
|
||||
start: undefined, // "string",开始时间
|
||||
status: false, // true,是否开启
|
||||
title: undefined, // "string",标题
|
||||
textNode: undefined,
|
||||
sysType: 'app'
|
||||
},
|
||||
rules: {
|
||||
content: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
// rank: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.start =
|
||||
moment(this.data.data.start)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
this.form.end =
|
||||
moment(this.data.data.end)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增公告列表数据
|
||||
add(data) {
|
||||
announcementAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑公告列表数据
|
||||
update(data) {
|
||||
announcementUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更换封面
|
||||
changeCoverUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.textNode = this.$refs['QuillEditor'].getdata()
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
// const data = { ...this.form }
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.quill-editor {
|
||||
height: 490px;
|
||||
|
||||
.ql-container {
|
||||
height: 380px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入公告标题" clearable v-model="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择公告状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="开启" :value="true" />
|
||||
<el-option label="关闭" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="datetimerange"
|
||||
v-model="time"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="公告标题" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width:40px;height:40px;margin:0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="内容" width="350">
|
||||
<template slot-scope="scope">{{ scope.row.content }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="系统类型">
|
||||
<template slot-scope="scope">{{ scope.row.sysType }}</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转地址" width="350">
|
||||
<template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开始时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.start | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="结束时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.end | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { announcementList, announcementDel } from '@/api/activity/announcement'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'Announcement',
|
||||
components: { Edit, ShowImg },
|
||||
data() {
|
||||
return {
|
||||
time: [],
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
end: undefined, // "string",结束时间
|
||||
id: undefined, // "string",
|
||||
start: undefined, // "string",开始时间
|
||||
status: undefined, // true,状态
|
||||
title: undefined // "string"标题
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getAnnouncementList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求公告列表数据
|
||||
async getAnnouncementList() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.start = this.time[0]
|
||||
this.searchData.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.start = undefined
|
||||
this.searchData.end = undefined
|
||||
}
|
||||
announcementList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求数据列表失败')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除公告列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
announcementDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('成功删除!')
|
||||
this.getAnnouncementList()
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getAnnouncementList()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.onSearch()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getAnnouncementList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getAnnouncementList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getAnnouncementList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="750px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :rules="rules" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="跳转地址">
|
||||
<el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.sort" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="广播类型">
|
||||
<el-select placeholder="请选择广播类型" clearable v-model="form.type">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="显示位置" prop="advertisingId">
|
||||
<el-select placeholder="请选择显示位置" clearable v-model="form.location" filterable>
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in locationList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="是否启用">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="字体颜色">
|
||||
<el-color-picker v-model="form.wordColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input placeholder="请输入内容" style="width: 480px" v-model="form.content" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { broadcastAdd, broadcastUpdate } from '@/api/activity/broadcast'
|
||||
import { locationList } from '@/filters/mediaLibrary/videoList'
|
||||
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'typeList'],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
locationList:locationList(),
|
||||
// 表单数据
|
||||
form: {
|
||||
wordColor: undefined,
|
||||
jumpUrl: undefined,
|
||||
sort: undefined,
|
||||
status: false,
|
||||
content: undefined, // "string",内容
|
||||
type: undefined,
|
||||
location:undefined
|
||||
},
|
||||
rules: {
|
||||
content: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.wordColor = '#' + this.form.wordColor
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增广播列表数据
|
||||
add(data) {
|
||||
broadcastAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑广播列表数据
|
||||
update(data) {
|
||||
broadcastUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.wordColor) {
|
||||
this.form.wordColor = this.form.wordColor.substring(1)
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item class="search">
|
||||
<el-input clearable placeholder="请输入内容" v-model="searchData.content" @clear="onClear('content')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="search">
|
||||
<el-input clearable placeholder="请输入跳转地址" v-model="searchData.jumpUrl" @clear="onClear('jumpUrl')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="search">
|
||||
<el-select placeholder="请选择广播类型" clearable @clear="onClear('type')" v-model="searchData.type">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select @clear="onClear('status')" clearable placeholder="是否启用" size="mini" v-model="searchData.status">
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain size="mini" type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain size="mini" type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column fixed align="center" label="ID" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="广播内容" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.content }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="显示位置" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.location | changeLocation }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型" width="200">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.type | fitlerType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center " label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center " label="跳转地址">
|
||||
<template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center " label="字体颜色">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.row.wordColor }">
|
||||
{{ scope.row.wordColor }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" :typeList="typeList" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { broadcastList, broadcastDel } from '@/api/activity/broadcast'
|
||||
|
||||
export default {
|
||||
name: 'Broadcast',
|
||||
components: { Edit },
|
||||
filters: {
|
||||
fitlerType(v) {
|
||||
switch (v) {
|
||||
case 1:
|
||||
return '即时通讯'
|
||||
case 2:
|
||||
return '跑马灯'
|
||||
default:
|
||||
return '未知类型'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typeList: [
|
||||
{ name: '即时通讯', id: 1 },
|
||||
{ name: '跑马灯', id: 2 },
|
||||
{ name: '未知类型', id: 0 }
|
||||
],
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
status: undefined,
|
||||
content: undefined,
|
||||
jumpUrl: undefined,
|
||||
type: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getBroadcastList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求广播列表数据
|
||||
async getBroadcastList() {
|
||||
this.loading = true
|
||||
broadcastList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO：删除广播列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
broadcastDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getBroadcastList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getBroadcastList()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getBroadcastList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getBroadcastList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getBroadcastList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getBroadcastList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="竖版封面">
|
||||
<UploadImg @changeImgUrl="changeCoverVertical" :img="form.coverVertical"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="徽章">
|
||||
<UploadImg @changeImgUrl="changeLogo" :img="form.logo"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入活动名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序参数" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="充值数" prop="rechargeNum">
|
||||
<el-input v-model.number="form.rechargeNum" placeholder="请输入充值数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="奖励说明">
|
||||
<el-input v-model="form.desc" placeholder="请输入奖励说明" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="活动时间" prop="time">
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" value-format="yyyy-MM-ddTHH:mm:ss+08:00" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label=" ">
|
||||
<el-button @click="AddCapList" type="success">新增奖励</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" v-for="(item,index) in form.capList" :key="index">
|
||||
<el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
|
||||
<el-form-item label="集卡奖励">
|
||||
<el-select placeholder="请选择集卡奖励" v-model="item.prizesType">
|
||||
<el-option label="金币数量" :value="1" />
|
||||
<el-option label="积分数量" :value="2" />
|
||||
<el-option label="vip天数" :value="3" />
|
||||
<el-option label="全部抽卡次数" :value="4" />
|
||||
<el-option label="专题抽卡次数" :value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
|
||||
<el-form-item label="数量">
|
||||
<el-input v-model.number="item.prizesNum" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-form-item label="操作">
|
||||
<el-button @click="delCapList(item,index)" type="danger">删除奖励</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
cardActivityAdd,
|
||||
cardActivityUpdate,
|
||||
} from '@/api/activity/cardActivity'
|
||||
import moment from 'moment'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据
|
||||
form: {
|
||||
cover: undefined, // "string",封面
|
||||
id: undefined, //0,表Id
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
status: undefined, // true,是否启用
|
||||
desc: undefined, //奖励说明
|
||||
coverVertical: undefined, //竖版封面图
|
||||
logo: undefined, //徽章
|
||||
rechargeNum: undefined,
|
||||
startAt: undefined,
|
||||
endAt: undefined,
|
||||
capList: [],
|
||||
},
|
||||
rules: {
|
||||
rank: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
this.form.rechargeNum = this.form.rechargeNum / 100
|
||||
this.form.capList.forEach((item) => {
|
||||
if (item.prizesType === 1) {
|
||||
item.prizesNum = item.prizesNum / 100
|
||||
}
|
||||
})
|
||||
if (this.form.startAt && this.form.endAt) {
|
||||
this.time = [
|
||||
moment(this.form.startAt)
|
||||
.utcOffset(480)
|
||||
.format('yyyy-MM-DDTHH:mm:ss+08:00'),
|
||||
moment(this.form.endAt)
|
||||
.utcOffset(480)
|
||||
.format('yyyy-MM-DDTHH:mm:ss+08:00'),
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增集卡活动列表数据
|
||||
add(data) {
|
||||
cardActivityAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:编辑集卡轰动列表数据
|
||||
update(data) {
|
||||
let param = {
|
||||
id: data.id,
|
||||
param: data,
|
||||
}
|
||||
cardActivityUpdate(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
AddCapList() {
|
||||
if (this.form.capList) {
|
||||
} else {
|
||||
this.form.capList = []
|
||||
}
|
||||
this.form.capList.push({
|
||||
prizesNum: 0,
|
||||
prizesType: 1,
|
||||
})
|
||||
},
|
||||
delCapList(item, index) {
|
||||
this.form.capList.splice(index, 1)
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.time && this.time.length) {
|
||||
this.form.startAt = this.time[0]
|
||||
this.form.endAt = this.time[1]
|
||||
} else {
|
||||
this.form.startAt = undefined
|
||||
this.form.endAt = undefined
|
||||
}
|
||||
let param = JSON.parse(JSON.stringify(this.form))
|
||||
param.capList.forEach((item) => {
|
||||
if (item.prizesType === 1) {
|
||||
item.prizesNum = item.prizesNum * 100
|
||||
}
|
||||
})
|
||||
param.rechargeNum = param.rechargeNum * 100
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(param)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
changeCoverVertical(data) {
|
||||
this.form.coverVertical = data
|
||||
},
|
||||
changeLogo(data) {
|
||||
this.form.logo = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="Visible" @close="close" center class="ac-dialog" width="700px">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline" label-position="right" label-width="100px" ref="form">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="抽中数量" prop="publishNum">
|
||||
<el-input v-model.number="form.publishNum" placeholder="请输入抽中数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="发布总数" prop="publishTotal">
|
||||
<el-input v-model.number="form.publishTotal" placeholder="请输入发布总数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品类型" prop="prizesType">
|
||||
<el-select clearable placeholder="请选择类型" v-model.number="form.prizesType" style="width:163px">
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in prizesTypeList" :key="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品数量" prop="prizesNum">
|
||||
<el-input v-model.number="form.prizesNum" placeholder="请输入奖品数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible=false">取 消</el-button>
|
||||
<el-button @click="submit('form')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { cardinfoAdd, cardinfoUpdate } from '@/api/activity/cardActivity'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { prizesTypeList } from '@/filters/activity/cardActivity'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddCard',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
prizesTypeList: prizesTypeList(),
|
||||
// 表单数据
|
||||
form: {
|
||||
activityId: undefined, // 0,
|
||||
cover: undefined, // "string",
|
||||
publishNum: undefined, // 0,
|
||||
publishTotal: undefined, // 0,
|
||||
rank: undefined, // 0,
|
||||
status: undefined, // true,
|
||||
prizesType: undefined,
|
||||
prizesNum: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
if (this.form.prizesType === 1) {
|
||||
this.form.prizesNum = this.form.prizesNum / 100
|
||||
}
|
||||
this.form.activityId = this.data.data.activityId
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增集卡活动数据
|
||||
add(data) {
|
||||
cardinfoAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑集卡活动数据
|
||||
update(data) {
|
||||
let param = {
|
||||
id: data.id,
|
||||
param: data,
|
||||
}
|
||||
cardinfoUpdate(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
let param = JSON.parse(JSON.stringify(this.form))
|
||||
if (param.prizesType === 1) {
|
||||
param.prizesNum = changeMoneyFen(param.prizesNum)
|
||||
}
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(param)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="卡片信息列表" :visible.sync="Visible" width="90%" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="getCardInfo" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" border height="600px" style="width: 100%" highlight-current-row>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动ID">
|
||||
<template slot-scope="scope">{{ scope.row.activityId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width:70px;height:40px;margin:0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品类型">
|
||||
<template slot-scope="scope">{{ scope.row.prizesType|changePrizesType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品数量">
|
||||
<template slot-scope="scope">{{scope.row.prizesType===1?scope.row.prizesNum/100 : scope.row.prizesNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="发布总数">
|
||||
<template slot-scope="scope">{{ scope.row.publishTotal }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="抽中数量">
|
||||
<template slot-scope="scope">{{ scope.row.publishNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "启用" : "关闭" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150px">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt|BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150px">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt|BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="eidtMedia(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { cardinfoList, cardinfoDel } from '@/api/activity/cardActivity'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import Edit from './addCard.vue'
|
||||
|
||||
export default {
|
||||
name: 'ChannelRuleList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
ShowImg,
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
activityId: undefined,
|
||||
},
|
||||
rules: {},
|
||||
resData: [],
|
||||
total: 0,
|
||||
editVisible: false,
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.searchData.activityId = this.data.data.id
|
||||
this.getCardInfo()
|
||||
},
|
||||
methods: {
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {
|
||||
activityId: this.data.data.id,
|
||||
},
|
||||
}
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
getCardInfo() {
|
||||
cardinfoList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求视频列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 删除按钮
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
cardinfoDel({ id: row.id }).then((res) => {
|
||||
this.getCardInfo()
|
||||
this.$message.success('成功删除!')
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 编辑
|
||||
eidtMedia(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getCardInfo()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getCardInfo()
|
||||
},
|
||||
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getCardInfo()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入名称" v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "开启" : "关闭" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="徽章" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.logo"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面图" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="竖版封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width:40px; height:70px; margin: 0 auto" :urls="scope.row.coverVertical"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖励说明" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="充值数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.rechargeNum|changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="showCardInfo(scope.$index, scope.row)" size="mini" type="primary">查询卡片信息</el-button>
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
<CardInfoList :data="editData" v-if="cardInfoListVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import CardInfoList from './components/cardInfoList.vue'
|
||||
import { cardActivityList, cardActivityDel } from '@/api/activity/cardActivity'
|
||||
export default {
|
||||
name: 'CardActivity',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
CardInfoList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
cardInfoListVisible: false,
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getActivity()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求集卡活动列表数据
|
||||
getActivity() {
|
||||
cardActivityList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除集卡活动列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
cardActivityDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getActivity()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getActivity()
|
||||
},
|
||||
|
||||
showCardInfo(index, row) {
|
||||
this.cardInfoListVisible = true
|
||||
this.editData = {
|
||||
title: '视频列表',
|
||||
type: 3,
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getActivity()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getActivity()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.cardInfoListVisible = false
|
||||
this.editVisible = false
|
||||
this.getActivity()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getActivity()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入活动ID" v-model.number="searchData.activityId" @clear="onClear('activityId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入卡片ID" v-model.number="searchData.cardId" @clear="onClear('cardId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker :default-time="['00:00:00', '23:59:59']" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="datetimerange" v-model="time" value-format="yyyy-MM-ddTHH:mm:ss+08:00" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="活动ID">
|
||||
<template slot-scope="scope">{{ scope.row.activityId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动名称" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.activityName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡片ID">
|
||||
<template slot-scope="scope">{{ scope.row.cardId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button> -->
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { cardcolletList } from '@/api/activity/cardActivity'
|
||||
|
||||
export default {
|
||||
name: 'CardcolletList',
|
||||
components: {
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: [],
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
||||
activityId: undefined, // 0,
|
||||
cardId: undefined, //0,
|
||||
userId: undefined, //0
|
||||
end: undefined, //"string",
|
||||
start: undefined, //"string",
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
// editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getCardcolletList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求抽卡结果数据列表
|
||||
getCardcolletList() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.start = this.time[0]
|
||||
this.searchData.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.start = undefined
|
||||
this.searchData.end = undefined
|
||||
}
|
||||
cardcolletList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO:删除抽卡结果数据列表
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
cardActivityDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getCardcolletList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getCardcolletList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getCardcolletList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getCardcolletList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getCardcolletList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class='center'>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form ref="form" :model="form" label-width="200px" label-position="top" style="width:900px;margin-left: 80px;">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="背景图">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl('backgroundImage',$event)" @onRemove="onRemoveImage('backgroundImage',$event)" :img="form.backgroundImage"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-form-item label="规则说明" prop="status">
|
||||
<el-input type="textarea" placeholder="请输入规则说明" v-model="form.description" maxlength="500" show-word-limit style="width:500px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getCheckingCg, updateCheckingCg } from '@/api/activity/checkinList.js'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'SystemConfig',
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
enable: false, // 是否启用
|
||||
description: undefined, // 规则说明
|
||||
backgroundImage: undefined, // 背景图
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求抽奖配置列表数据
|
||||
getData() {
|
||||
getCheckingCg({}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.form = res.data
|
||||
} else {
|
||||
this.$message.error('请求签到配置失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：提交抽奖配置列表数据
|
||||
onSubmit() {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
updateCheckingCg(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('配置成功')
|
||||
} else {
|
||||
this.$message.error('配置失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 移除图片地址到form表单
|
||||
onRemoveImage(key) {
|
||||
this.form[key] = undefined
|
||||
},
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(name, data) {
|
||||
this.form[name] = data
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/variables.scss';
|
||||
.center {
|
||||
width: 100%;
|
||||
height: calc(100vh - 140px);
|
||||
padding: 45px 0;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
background-color: $themeBg;
|
||||
.el-row{
|
||||
.el-col {
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
.el-textarea{
|
||||
::v-deep{
|
||||
textarea{
|
||||
min-height: 160px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-03-14 15:21:11
|
||||
* @LastEditTime: 2022-06-07 11:04:21
|
||||
* @LastEditors:
|
||||
* @FilePath: /comics-admin/src/views/activity/checkInCfgList/components/AddOrEdit.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="签到天数" prop="dayNum">
|
||||
<el-input v-model.number="form.checkinDays" placeholder="请输入签到天数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题" prop="dayNum">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品" prop="prizeId">
|
||||
<el-select placeholder="请选择奖品" v-model="form.prizeId" style="width: 160px">
|
||||
<el-option v-for="item in checkinPrizeList" :label="item.title" :value="item.id" :key="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
|
||||
<el-form-item label="奖品图片">
|
||||
<UploadImg @onRemove="onRemove('image')" @changeImgUrl="changeAvatarUrl" :img="form.image"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="签到类型" prop="prizeType">
|
||||
<el-select placeholder="请选择签到类型" v-model="form.checkinType" style="width: 160px">
|
||||
<el-option v-for="item in checkinTypeList" :label="item.label" :value="item.value" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { checkinCfgAdd, checkinCfgUpdate } from '@/api/activity/checkinList'
|
||||
import { arryToString, numberToArry } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'checkinPrizeList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
title:undefined,
|
||||
checkinDays: undefined, // 0,
|
||||
status: undefined, // true,
|
||||
prizeId: undefined,
|
||||
checkinType: undefined,
|
||||
image: undefined
|
||||
},
|
||||
checkinTypeList: [
|
||||
{ label: '无意义', value: 0 },
|
||||
{ label: '连续签到', value: 1 },
|
||||
{ label: '累计签到', value: 2 },
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 移除图片地址到form表单
|
||||
onRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// 更改图片
|
||||
changeAvatarUrl(data) {
|
||||
console.log(data, 'rrr')
|
||||
this.form.image = data
|
||||
},
|
||||
// TODO:新增签到配置列表数据
|
||||
add(data) {
|
||||
checkinCfgAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑签到配置列表数据
|
||||
update(data) {
|
||||
checkinCfgUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,231 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="表ID" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="签到天数">
|
||||
<template slot-scope="scope">{{ scope.row.checkinDays }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否为大奖(有问题提示)" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.bigPrize? 'success' : 'danger'" plain size="mini">{{ scope.row.bigPrize? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名称" width="150">
|
||||
<template slot-scope="scope">{{scope.row.prizeId |changeName(checkinPrizeList,'id','name') }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="签到类型" width="150">
|
||||
<template slot-scope="scope">{{scope.row.checkinType |checkinTypeList }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{scope.row.createdAt | BeiJingTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{scope.row.updateAt | BeiJingTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :checkinPrizeList="checkinPrizeList" :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { checkinCfgSearch, checkinCfgDel } from '@/api/activity/checkinList'
|
||||
import { getDiscountcard } from '@/api/commodity/discountcard'
|
||||
import { prizeList } from '@/api/activity/prize';
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'CheckInCfgList',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
checkinPrizeList:[],
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
discountcardList: []
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
checkinTypeList(val){
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '连续签到'
|
||||
case 2:
|
||||
return '累计签到'
|
||||
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrizeList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getDiscountcardList() {
|
||||
getDiscountcard({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.discountcardList = res.data.list
|
||||
} else {
|
||||
this.discountcardList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
prizeList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.checkinPrizeList = res.data.list;
|
||||
} else {
|
||||
this.checkinPrizeList = [];
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// TODO：请求签到配置列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
checkinCfgSearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除签到配置列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
checkinCfgDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
param: {}
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入用户ID" clearable v-model.number="searchData.checkin.userId" @clear="onClear()" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="领取的奖品">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :key="index" v-for="(item, index) in scope.row.prizes" size="mini">
|
||||
{{ item | changeName(checkinPrizeList, 'id', 'title') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否发放奖品" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.gave ? 'success' : 'danger'" plain size="mini">{{ scope.row.gave ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否已重置" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isReset ? 'success' : 'danger'" plain size="mini">{{ scope.row.isReset ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="连续签到天数（跨月）">
|
||||
<template slot-scope="scope">{{ scope.row.continuouslyDays }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="累计签到天数（本月）">
|
||||
<template slot-scope="scope">{{ scope.row.cumulativeDays }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="签到日期">
|
||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间: 签到准确时间">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import { getCheckinList, checkinListDel } from '@/api/activity/checkinList'
|
||||
import { checkinCfgSearch } from '@/api/activity/checkinList'
|
||||
export default {
|
||||
name: 'CheckInList',
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
checkin: {
|
||||
userId: undefined,
|
||||
end: undefined,
|
||||
start: undefined
|
||||
}
|
||||
},
|
||||
time: undefined,
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
checkinPrizeList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getPrizeList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
checkinCfgSearch({ pageNum: 1, pageSize: 50 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.checkinPrizeList = res.data.list
|
||||
} else {
|
||||
this.checkinPrizeList = []
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO：请求签到历史列表数据
|
||||
getList() {
|
||||
if (this.time) {
|
||||
this.searchData.checkin.start = this.time[0]
|
||||
this.searchData.checkin.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.checkin.start = undefined
|
||||
this.searchData.checkin.end = undefined
|
||||
}
|
||||
this.loading = true
|
||||
getCheckinList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:删除签到列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
checkinListDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
checkin: {}
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.refreshView()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl='changeCoverUrl' :img='form.cover'></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题">
|
||||
<el-input placeholder="请输入联系方式标题" v-model="form.title" style="width:180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.rank" style="width:180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="描述">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" style="width:180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="跳转地址">
|
||||
<el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" style="width:180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否官方">
|
||||
<el-switch v-model="form.isOfficial" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { contactAdd, contactUpdate } from '@/api/activity/contact'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
desc:undefined,
|
||||
cover: undefined, // "string",封面
|
||||
jumpUrl: undefined, // "string",跳转地址
|
||||
rank: undefined, // 排序
|
||||
status: false, // true,是否开启
|
||||
title: undefined, // "string",标题
|
||||
isOfficial:undefined,//
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增联系方式
|
||||
add(data) {
|
||||
contactAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//TODO:编辑联系方式
|
||||
update(data) {
|
||||
contactUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
changeCoverUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit() {
|
||||
const data = { ...this.form }
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,177 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="onSearch" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column fixed align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{scope.row.rank}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="联系方式标题" width="200">
|
||||
<template slot-scope="scope">{{scope.row.title}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width:40px;height:40px;margin:0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否官方">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isOfficial? 'success' : 'danger'" plain size="mini">{{ scope.row.isOfficial? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转地址" width="350">
|
||||
<template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="350">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt |BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt |BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { contactList, contactDel } from '@/api/activity/contact'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'Contact',
|
||||
components: { Edit, ShowImg },
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getContactList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增联系方式列表数据
|
||||
async getContactList() {
|
||||
this.loading = true
|
||||
contactList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:编辑联系方式列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
contactDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getContactList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getContactList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getContactList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getContactList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getContactList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="头像" prop="gameAvatar">
|
||||
<UploadImg @changeImgUrl="changeGameAvatar" :img="form.gameAvatar" @onRemove="handleRemove('gameAvatar')" style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面图" prop="name">
|
||||
<UploadImg @changeImgUrl="changeCover" :img="form.cover" @onRemove="handleRemove('cover')" style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model.number="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="真实下载次数" prop="downloadCount">
|
||||
<el-input v-model.number="form.downloadCount" placeholder="请输入真实下载次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="虚拟下载次数" prop="downloadCount">
|
||||
<el-input v-model.number="form.fakeDownloadCount" placeholder="请输入虚拟下载次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="分数" prop="number">
|
||||
<el-input v-model.number="form.number" placeholder="请输入分数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="IOS下载链接" prop="iosUrl">
|
||||
<el-input v-model="form.iosUrl" placeholder="请输入游戏链接" style="width:400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否VIP" prop="isVip">
|
||||
<el-switch v-model="form.isVip" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="Android下载链接" prop="androidUrl">
|
||||
<el-input v-model="form.androidUrl" placeholder="请输入游戏链接" style="width:400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="标签" prop="desc">
|
||||
<div style="width:500px;" v-for="(item,index) in form.tags" :key="index">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="margin-bottom:5px">
|
||||
<el-input v-model="item.tagName" placeholder="请输入标签名称" style="width:300px;float:left" />
|
||||
<el-color-picker v-model="item.color" style="float:left;margin-left:10px;"></el-color-picker>
|
||||
<el-button type="danger" @click="delTag(index)" style="float:left;margin-left:10px">删除标签</el-button>
|
||||
</el-col>
|
||||
</div>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-button size="mini" type="success" @click="addTag">新增标签</el-button>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="游戏简介" prop="introduce">
|
||||
<el-input v-model="form.introduce" placeholder="请输入游戏简介" type="textarea" style="width:500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" type="textarea" style="width:500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="节点" prop="desc">
|
||||
<div style="width:500px;" v-for="(item,index) in form.nodes" :key="item.imgs+index">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<UploadImgArr @changeImgUrl='changeNodeImgs($event,index)' :img='item.imgs' style="width:500px"></UploadImgArr>
|
||||
</el-col>
|
||||
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
|
||||
<el-input v-model="item.text" placeholder="请输入描述" />
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" style="margin-bottom:50px">
|
||||
<el-button size="mini" type="danger" @click="editNode(index)">删除节点</el-button>
|
||||
</el-col>
|
||||
</div>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-button size="mini" type="success" @click="addNode">新增节点</el-button>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { hGameAdd, hGameUpdate } from '@/api/activity/hGame'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import UploadImgArr from '@/components/UploadImgArr/index'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
UploadImgArr,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
cover: undefined, // 封面图
|
||||
rank: undefined, // 排序
|
||||
status: undefined, // 是否启用
|
||||
desc: undefined, // 'string',
|
||||
downloadCount: undefined, // 0,
|
||||
gameAvatar: undefined, // 'string',
|
||||
id: undefined, // 0,
|
||||
introduce: undefined, // 'string',
|
||||
isVip: undefined, // true,
|
||||
name: undefined, // 'string',
|
||||
nodes: [],
|
||||
number: undefined, // 0,
|
||||
price: undefined, // 0,
|
||||
tags: [], // ['string'],
|
||||
androidUrl: undefined,
|
||||
iosUrl: undefined,
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
// this.form = { ...this.data.data }
|
||||
this.form.price = changeMoneyYuan(this.data.data.price)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增活动广告数据
|
||||
add(data) {
|
||||
hGameAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑活动广告数据
|
||||
update(data) {
|
||||
hGameUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
addNode() {
|
||||
if (!this.form.nodes) {
|
||||
this.form.nodes = []
|
||||
}
|
||||
this.form.nodes.push({
|
||||
imgs: [],
|
||||
text: undefined,
|
||||
})
|
||||
},
|
||||
editNode(index) {
|
||||
this.form.nodes.splice(index, 1)
|
||||
},
|
||||
changeNodeImgs(data, index) {
|
||||
this.form.nodes[index].imgs = data
|
||||
},
|
||||
|
||||
addTag() {
|
||||
if (!this.form.tags) {
|
||||
this.form.tags = []
|
||||
}
|
||||
this.form.tags.push({
|
||||
tagName: undefined,
|
||||
color: undefined,
|
||||
})
|
||||
},
|
||||
delTag(index) {
|
||||
this.form.tags.splice(index, 1)
|
||||
},
|
||||
|
||||
handleRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
changeCover(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
changeGameAvatar(data) {
|
||||
this.form.gameAvatar = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.price = changeMoneyFen(data.price)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入禁游名称" v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择活动状态" v-model.number="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="游戏头像" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 100px; height: 40px; margin: 0 auto" :urls="scope.row.gameAvatar"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面图" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 100px; height: 40px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="游戏简介" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.introduce }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="IOS下载链接" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.iosUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Android下载链接" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.androidUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="真实下载次数">
|
||||
<template slot-scope="scope">{{ scope.row.downloadCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="虚拟下载次数">
|
||||
<template slot-scope="scope">{{ scope.row.fakeDownloadCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分数">
|
||||
<template slot-scope="scope">{{ scope.row.number }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="价格">
|
||||
<template slot-scope="scope">{{ scope.row.price|changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否启用" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否会员" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isVip ? 'success' : 'danger'" plain size="mini">{{ scope.row.isVip ? "会员" : "非会员" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标签" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(item,index) in scope.row.tags" :key="item.tagName+index" :style="'background-color:'+item.color">{{item.tagName}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { hGameList, hGameDel } from '@/api/activity/hGame'
|
||||
export default {
|
||||
name: 'HGame',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
filters: {
|
||||
filterChangeType(val) {
|
||||
switch (val) {
|
||||
case 0:
|
||||
return '默认'
|
||||
case 1:
|
||||
return '新手'
|
||||
case 2:
|
||||
return '会员'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined, // 0,
|
||||
name: undefined, // 'string',
|
||||
status: undefined, // true,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求活动广告列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
hGameList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除活动广告列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
hGameDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.cover"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="许愿活动名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入奖品名称" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动状态" prop="activityStatus">
|
||||
<el-select placeholder="请选择活动状态" v-model.number="form.activityStatus">
|
||||
<el-option label="正在进行" :value="1" />
|
||||
<el-option label="结束" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="form.start" type="datetime" placeholder="开始时间" style="width: 180px" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="form.end" type="datetime" placeholder="结束时间" style="width: 180px" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import {
|
||||
hopeactivityAdd,
|
||||
hopeactivityUpdate,
|
||||
} from '@/api/activity/hopeActivity'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
cover: undefined, // "string",封面
|
||||
end: undefined, // "string",结束时间
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
start: undefined, // "string",开始时间
|
||||
status: undefined, // true,是否启用
|
||||
activityStatus: undefined, //活动状态
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.start =
|
||||
moment(this.data.data.start)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
this.form.end =
|
||||
moment(this.data.data.end)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增许愿活动
|
||||
add(data) {
|
||||
hopeactivityAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:编辑许愿活动
|
||||
update(data) {
|
||||
hopeactivityUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
let param = {
|
||||
id: this.form.id,
|
||||
param: this.form,
|
||||
}
|
||||
this.update(param)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.cover = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入愿望名称" v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择活动状态" v-model.number="searchData.activityStatus" @clear="onClear('activityStatus')">
|
||||
<el-option label="正在进行" :value="1" />
|
||||
<el-option label="结束" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="许愿活动名称" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动状态" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.activityStatus|changeActivityStatus }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="启用状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开始时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.start| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="结束时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.end| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { hopeactivityList, hopeactivityDel } from '@/api/activity/hopeActivity'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'HopeDetails',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
filters: {
|
||||
changeActivityStatus(val) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '正在进行'
|
||||
case 2:
|
||||
return '结束'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined, //名称
|
||||
activityStatus: undefined, //活动状态
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求许愿活动列表数据
|
||||
getHopeactivityList() {
|
||||
hopeactivityList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:删除许愿活动列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
hopeactivityDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getHopeactivityList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getHopeactivityList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="愿望名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="许愿人数" prop="hopeNum">
|
||||
<el-input v-model.number="form.hopeNum" placeholder="请输入许愿人数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="用户ID" prop="userId">
|
||||
<el-input v-model.number="form.userId" placeholder="请输入用户ID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="许愿活动" prop="activityId">
|
||||
<el-select placeholder="请选择许愿活动" v-model.number="form.activityId" style="width:163px">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in hopeactivityList" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型" prop="objectType">
|
||||
<el-select clearable placeholder="请选择奖品类型" v-model.number="form.objectType" style="width:163px">
|
||||
<el-option label="漫画" :value="1" />
|
||||
<el-option label="动画" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="对象ID" prop="objectId">
|
||||
<el-input v-model.number="form.objectId" placeholder="请输入对象ID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="更新状态" prop="updateStatus">
|
||||
<el-select clearable placeholder="请选择奖品类型" v-model.number="form.updateStatus" style="width:163px">
|
||||
<el-option label="未更新" :value="0" />
|
||||
<el-option label="更新" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="原因">
|
||||
<el-input v-model="form.reason" placeholder="请输入原因" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { hopeDetailsAdd, hopeDetailsUpdate } from '@/api/activity/hopeDetails'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'hopeactivityList'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
activityId: undefined, // 0,活动ID
|
||||
hopeNum: undefined, // 0,许愿人数
|
||||
name: undefined, // "string",名称
|
||||
objectId: undefined, // 0,对象ID
|
||||
objectType: undefined, // 0,类型： 1:漫画 2:动漫
|
||||
rank: undefined, // 0,排序
|
||||
reason: undefined, // "string",原因
|
||||
status: undefined, // true,是否启用
|
||||
updateStatus: undefined, // 0,更新状态
|
||||
userId: undefined, // 0,用户ID
|
||||
userName: undefined, // "string"用户名称
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增愿望列表数据
|
||||
add(data) {
|
||||
hopeDetailsAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:编辑愿望列表数据
|
||||
update(data) {
|
||||
hopeDetailsUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
let param = {
|
||||
id: this.form.id,
|
||||
param: this.form,
|
||||
}
|
||||
this.update(param)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入愿望名称" v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择许愿活动" v-model.number="searchData.activityId" @clear="onClear('activityId')">
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in hopeactivityList" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="愿望名称" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="许愿活动">
|
||||
<template slot-scope="scope">{{ scope.row.activityId|changeName(hopeactivityList,'id','name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户名称">
|
||||
<template slot-scope="scope">{{ scope.row.userName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="许愿人数" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.hopeNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="对象ID">
|
||||
<template slot-scope="scope">{{ scope.row.objectId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="对象类型" width="100">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.objectType===1 ? "漫画" : "动漫" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上架状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.updateStatus===1? 'success' : 'danger'" plain size="mini">{{ scope.row.updateStatus===1 ? "更新" : "未更新" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="原因" width="400">
|
||||
<template slot-scope="scope">{{ scope.row.reason }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" :hopeactivityList='hopeactivityList' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { hopeDetailsList, hopeDetailsDel } from '@/api/activity/hopeDetails'
|
||||
import { hopeactivityList } from '@/api/activity/hopeActivity'
|
||||
|
||||
export default {
|
||||
name: 'HopeDetails',
|
||||
components: {
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined, //名称
|
||||
activityId: undefined, //活动ID
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
hopeactivityList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getHopeactivityList()
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求许愿活动列表数据
|
||||
getHopeactivityList() {
|
||||
hopeactivityList({ pageNum: 1, pageSize: 100 }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.hopeactivityList = res.data.list
|
||||
} else {
|
||||
this.hopeactivityList = []
|
||||
this.$message.error('请求许愿活动列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:请求愿望列表数据
|
||||
getHopeDetailsList() {
|
||||
hopeDetailsList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除愿望列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
hopeDetailsDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getHopeDetailsList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getHopeDetailsList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :rules="rules" :model="form" ref="ruleForm" class="demo-form-inline" label-width="150px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="用户Id" prop="userId">
|
||||
<el-input placeholder="请输入用户Id" v-model="form.userId" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" @onRemove="onRemoveImage('img', $event)" :img="form.img"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="系统消息标题">
|
||||
<el-input placeholder="请输入系统消息标题" v-model="form.title" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="跳转链接" prop="content">
|
||||
<el-input placeholder="请输入跳转链接" v-model="form.link" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input placeholder="请输入内容" v-model="form.content" type="textarea" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { msgAdd, msgUpdate } from '@/api/activity/msg'
|
||||
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
img: undefined,
|
||||
userId: undefined,
|
||||
content: undefined, // "string",内容
|
||||
title: undefined // "string",标题
|
||||
},
|
||||
rules: {
|
||||
content: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.start = moment(this.data.data.start).utcOffset(480).format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
this.form.end = moment(this.data.data.end).utcOffset(480).format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：新增消息列表数据
|
||||
add(data) {
|
||||
msgAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑消息列表数据
|
||||
update(data) {
|
||||
msgUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.img = data
|
||||
},
|
||||
// 移除图片地址到form表单
|
||||
onRemoveImage(key, type) {
|
||||
if (type) {
|
||||
this.form[key].type = ''
|
||||
} else {
|
||||
this.form[key] = ''
|
||||
}
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.userId = +this.form.userId
|
||||
const data = { ...this.form }
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择消息类型" v-model="searchData.msgCenterType" >
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in msgTypeList" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="系统消息标题" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.type | fitlerType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="内容" width="500">
|
||||
<template slot-scope="scope">{{ scope.row.content }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转链接" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.link }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { msgList, msgDel } from '@/api/activity/msg'
|
||||
|
||||
export default {
|
||||
name: 'MsgList',
|
||||
components: { Edit },
|
||||
filters: {
|
||||
fitlerType(v) {
|
||||
switch (v) {
|
||||
case 0:
|
||||
return '缺省消息'
|
||||
case 1:
|
||||
return '评论消息'
|
||||
case 2:
|
||||
return '通知'
|
||||
case 3:
|
||||
return '关注'
|
||||
case 4:
|
||||
return '最大消息'
|
||||
default:
|
||||
return '未知类型'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msgTypeList:[
|
||||
{
|
||||
label:"缺省消息",
|
||||
value:0,
|
||||
},{
|
||||
label:"评论消息",
|
||||
value:1,
|
||||
},{
|
||||
label:"通知",
|
||||
value:2,
|
||||
},{
|
||||
label:"关注",
|
||||
value:3,
|
||||
},{
|
||||
label:"最大消息",
|
||||
value:4,
|
||||
}
|
||||
],
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
userId: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
msgCenterType:undefined
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getMsgList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求消息列表数据
|
||||
async getMsgList() {
|
||||
this.loading = true
|
||||
msgList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除消息列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
msgDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getMsgList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getMsgList()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getMsgList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getMsgList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getMsgList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getMsgList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="750px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :rules="rules" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.sort" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题">
|
||||
<el-input placeholder="请输入标题" v-model.number="form.title" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input placeholder="请输入内容" style="width: 480px" v-model="form.content" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
notificationAdd,
|
||||
notificationUpdate,
|
||||
} from '@/api/activity/notification'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
sort: undefined,
|
||||
title: undefined,
|
||||
content: undefined, // "string",内容
|
||||
},
|
||||
rules: {
|
||||
content: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增通知列表数据
|
||||
add(data) {
|
||||
notificationAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑通知列表数据
|
||||
update(data) {
|
||||
notificationUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.title = data.title ? data.title.toString() : undefined
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item class="search">
|
||||
<el-input clearable placeholder="请输入内容" v-model="searchData.content" @clear="onClear('content')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="search">
|
||||
<el-input clearable placeholder="请输入标题" v-model="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column fixed align="center" label="ID" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="通知内容" width="200" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.content }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="50">
|
||||
<template slot-scope="scope">{{scope.row.sort}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{scope.row.title}}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块ß
|
||||
import Edit from './components/AddOrEdit.vue'
|
||||
import { notificationList, notificationDel } from '@/api/activity/notification'
|
||||
|
||||
export default {
|
||||
name: 'Notification',
|
||||
components: { Edit },
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
content: undefined,
|
||||
jumpUrl: undefined,
|
||||
title: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求通知列表数据
|
||||
async getList() {
|
||||
this.loading = true
|
||||
let param = JSON.parse(JSON.stringify(this.searchData))
|
||||
notificationList(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除通知列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
notificationDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="750px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :rules="rules" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.rank" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题">
|
||||
<el-input placeholder="请输入标题" v-model="form.title" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型">
|
||||
<el-select placeholder="请选择类型" clearable v-model="form.category" style="width: 163px">
|
||||
<el-option v-for="item in taskCfgType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="目标参数">
|
||||
<el-input placeholder="请输入目标参数" v-model.number="form.count" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="跳转地址">
|
||||
<el-input placeholder="请输入跳转地址" v-model="form.jumpUrl" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务类型">
|
||||
<el-select placeholder="请选择任务类型" clearable v-model="form.type" style="width: 163px">
|
||||
<el-option v-for="item in missioncfgTaskType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图标" prop="name">
|
||||
<UploadImg @changeImgUrl="changeIcon" :img="form.icon" @onRemove="handleRemove('icon')"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="是否激活">
|
||||
<el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品" prop="prizeId">
|
||||
<el-select placeholder="请选择奖品" v-model="form.prizeIds" multiple style="width: 160px">
|
||||
<el-option v-for="item in checkinPrizeList" :label="item.title" :value="item.id" :key="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否自动发奖" prop="autoPrize">
|
||||
<el-switch v-model="form.autoPrize" :active-value="true" :inactive-value="false" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input placeholder="请输入描述" type="textarea" v-model="form.desc" style="width:520px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { noviceTaskAdd, noviceTaskUpdate } from '@/api/activity/noviceTaskCfg'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','checkinPrizeList','taskCfgType','missioncfgTaskType'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
|
||||
// 表单数据
|
||||
form: {
|
||||
prizeIds:[],
|
||||
icon:undefined,
|
||||
desc: undefined,
|
||||
enable: undefined,
|
||||
rank: undefined,
|
||||
title: undefined,
|
||||
type: undefined,
|
||||
jumpUrl:undefined,
|
||||
param: undefined, //0,
|
||||
rewardPoints: undefined, // 0,
|
||||
category: undefined, // 0,
|
||||
autoPrize:undefined,
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
components:{
|
||||
UploadImg
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增任务配置列表数据
|
||||
add(data) {
|
||||
noviceTaskAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑任务配置列表数据
|
||||
update(data) {
|
||||
noviceTaskUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
changeIcon(data){
|
||||
this.form.icon = data
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
const params = {
|
||||
id:this.form.id,
|
||||
param:{
|
||||
...data
|
||||
}
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(params)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(params)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,237 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item label="任务类型">
|
||||
<el-select placeholder="请选择任务类型" clearable v-model="searchData.type" style="width: 163px">
|
||||
<el-option v-for="item in missioncfgTaskType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图标" width="150">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 100px; height: 40px; margin: 0 auto" :urls="scope.row.icon"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名称" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="item in scope.row.prizeIds">
|
||||
{{item |changeName(checkinPrizeList,'id','title') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.category | changTaskCfgType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转地址" width="300">
|
||||
<template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="跳转链接" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.goTo }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="目标参数">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.count
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务类型">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.type|changeMissioncfgTaskType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="是否激活" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.enable ? 'success' : 'danger'" plain size="mini">{{ scope.row.enable ? "已激活" : "未激活" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否自动发奖" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.autoPrize ? 'success' : 'danger'" plain size="mini">{{ scope.row.autoPrize ? "是" : "否" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :taskCfgType="taskCfgType" :missioncfgTaskType="missioncfgTaskType" :checkinPrizeList="checkinPrizeList" :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { noviceTaskDel, noviceTaskSearch } from '@/api/activity/noviceTaskCfg'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { prizeList } from '@/api/activity/prize';
|
||||
import { taskCfgType, missioncfgTaskType } from '@/filters/activity/missionList'
|
||||
|
||||
export default {
|
||||
name: 'NoviceTaskCfg',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
type:undefined,
|
||||
},
|
||||
taskCfgType: taskCfgType(),
|
||||
missioncfgTaskType: missioncfgTaskType(),
|
||||
checkinPrizeList:[],
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getPrizeList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
prizeList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.checkinPrizeList = res.data.list;
|
||||
} else {
|
||||
this.checkinPrizeList = [];
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// TODO：请求任务配置列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
noviceTaskSearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除任务配置列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
noviceTaskDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.page.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.page.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="750px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :rules="rules" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input placeholder="请输入用户ID" v-model.number="form.userId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务">
|
||||
<el-select placeholder="请选择任务" clearable v-model="form.taskId" style="width: 163px">
|
||||
<el-option v-for="item in taskList" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务完成次数">
|
||||
<el-input placeholder="请输入任务完成次数" v-model.number="form.count" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label=" 跳转链接">
|
||||
<el-input placeholder="请输入跳转链接" v-model="form.jumpUrl" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务类型">
|
||||
<el-select placeholder="请选择任务类型" v-model="form.taskType" style="width: 163px">
|
||||
<el-option v-for="item in missioncfgTaskType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态">
|
||||
<el-select placeholder="请选择状态" v-model="form.done" style="width: 163px">
|
||||
<el-option v-for="item in taskStatus" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 163px">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { misssionAdd, misssionUpdate } from '@/api/activity/noviceTaskList'
|
||||
import { taskStatus, missioncfgTaskType } from '@/filters/activity/missionList'
|
||||
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'taskList'],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
missioncfgTaskType: missioncfgTaskType(),
|
||||
taskStatus: taskStatus(),
|
||||
// 表单数据
|
||||
form: {
|
||||
date: undefined,
|
||||
missionId: undefined,
|
||||
done: undefined,
|
||||
userId: undefined,
|
||||
count: undefined,
|
||||
jumpUrl:undefined,
|
||||
taskType: undefined,
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增任务列表数据
|
||||
add(data) {
|
||||
misssionAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:编辑任务列表数据
|
||||
update(data) {
|
||||
misssionUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入用户ID" clearable v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入任务ID" clearable v-model.number="searchData.taskId" @clear="onClear('taskId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务类型" clearable v-model="searchData.type" @clear="onClear('type')">
|
||||
<el-option v-for="item in missioncfgTaskType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option v-for="item in taskStatus" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-ddTHH:mm:ss+08:00" :default-time="['00:00:00', '23:59:59']">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务名" width="150">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.taskId|changeName(taskList,'id','title')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="日期" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.date
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务完成次数">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.count
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务类型">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.type|changeMissioncfgTaskType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务状态">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.done?'已完成':"完成中"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" :taskList="taskList" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { misssionDel, misssionSearch } from '@/api/activity/noviceTaskList'
|
||||
import { noviceTaskSearch } from '@/api/activity/noviceTaskCfg'
|
||||
import { taskStatus, missioncfgTaskType } from '@/filters/activity/missionList'
|
||||
export default {
|
||||
name: 'NoviceTaskList',
|
||||
components: {
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
userId: undefined,
|
||||
start: undefined, //"string",
|
||||
end: undefined, //"string",
|
||||
taskId: undefined, // 0,
|
||||
status: undefined, // 0,
|
||||
type: undefined, // 0,
|
||||
},
|
||||
taskStatus: taskStatus(),
|
||||
missioncfgTaskType: missioncfgTaskType(),
|
||||
time: undefined,
|
||||
taskList: [],
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.onSearchTaskList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:获取任务配置列表数据
|
||||
onSearchTaskList() {
|
||||
noviceTaskSearch({ pageNum: 1, pageSize: 500, param: {} }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.taskList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求任务配置列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：请求任务列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.start = this.time[0]
|
||||
this.searchData.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.start = undefined
|
||||
this.searchData.end = undefined
|
||||
}
|
||||
misssionSearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除任务列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
misssionDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入用户ID" clearable v-model.number="searchData.checkin.userId" @clear="onClear()" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="time" :default-time="['00:00:00', '23:59:59']" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="领取的奖品">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.prizeId | changeName(checkinPrizeList,'id','title')}}
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否发放奖品" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.gave? 'success' : 'danger'" plain size="mini">{{ scope.row.gave? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否已重置" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isReset? 'success' : 'danger'" plain size="mini">{{ scope.row.isReset? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" fixed="right" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import { getProxyPrizeHistory, proxyprizeHisyoryListDel,proxyprizeSearch } from '@/api/activity/proxyPrizeList.js'
|
||||
import { prizeList } from '@/api/activity/prize';
|
||||
export default {
|
||||
name: 'CheckInList',
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
checkin: {
|
||||
userId: undefined,
|
||||
end: undefined,
|
||||
start: undefined,
|
||||
},
|
||||
},
|
||||
time: undefined,
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
checkinPrizeList:[]
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getPrizeList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
proxyprizeSearch(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.checkinPrizeList = res.data.list;
|
||||
} else {
|
||||
this.checkinPrizeList = [];
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//TODO：请求签到历史列表数据
|
||||
getList() {
|
||||
if (this.time) {
|
||||
this.searchData.checkin.start = this.time[0]
|
||||
this.searchData.checkin.end = this.time[1]
|
||||
} else {
|
||||
this.searchData.checkin.start = undefined
|
||||
this.searchData.checkin.end = undefined
|
||||
}
|
||||
this.loading = true
|
||||
getProxyPrizeHistory(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除签到列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
proxyprizeHisyoryListDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
checkin: {},
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-03-14 15:21:11
|
||||
* @LastEditTime: 2022-06-07 11:04:21
|
||||
* @LastEditors:
|
||||
* @FilePath: /comics-admin/src/views/activity/checkInCfgList/components/AddOrEdit.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="邀请人数" prop="dayNum">
|
||||
<el-input v-model.number="form.invites" placeholder="邀请人数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="dayNum">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题" prop="dayNum">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品" prop="prizeId">
|
||||
<el-select placeholder="请选择奖品" v-model="form.prizeId" style="width: 160px">
|
||||
<el-option v-for="item in checkinPrizeList" :label="item.title" :value="item.id" :key="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
|
||||
<el-form-item label="奖品图片">
|
||||
<UploadImg @onRemove="onRemove('image')" @changeImgUrl="changeAvatarUrl" :img="form.image"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { proxyprizeAdd, proxyprizeUpdate } from '@/api/activity/proxyPrizeList.js'
|
||||
import { arryToString, numberToArry } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'checkinPrizeList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
title:undefined,
|
||||
checkinDays: undefined, // 0,
|
||||
status: undefined, // true,
|
||||
prizeId: undefined,
|
||||
image: undefined
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 移除图片地址到form表单
|
||||
onRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// 更改图片
|
||||
changeAvatarUrl(data) {
|
||||
console.log(data, 'rrr')
|
||||
this.form.image = data
|
||||
},
|
||||
// TODO:新增签到配置列表数据
|
||||
add(data) {
|
||||
proxyprizeAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑签到配置列表数据
|
||||
update(data) {
|
||||
proxyprizeUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,225 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="表ID" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="邀请人数">
|
||||
<template slot-scope="scope">{{ scope.row.invites }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名称" width="150">
|
||||
<template slot-scope="scope">{{scope.row.prizeId |changeName(checkinPrizeList,'id','name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{scope.row.createdAt | BeiJingTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{scope.row.updateAt | BeiJingTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :checkinPrizeList="checkinPrizeList" :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { proxyprizeSearch, proxyprizeDel } from '@/api/activity/proxyPrizeList.js'
|
||||
import { getDiscountcard } from '@/api/commodity/discountcard'
|
||||
import { prizeList } from '@/api/activity/prize';
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'CheckInCfgList',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
checkinPrizeList:[],
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
discountcardList: []
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
checkinTypeList(val){
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '连续签到'
|
||||
case 2:
|
||||
return '累计签到'
|
||||
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrizeList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getDiscountcardList() {
|
||||
getDiscountcard({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.discountcardList = res.data.list
|
||||
} else {
|
||||
this.discountcardList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
prizeList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.checkinPrizeList = res.data.list;
|
||||
} else {
|
||||
this.checkinPrizeList = [];
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// TODO：请求签到配置列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
proxyprizeSearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除签到配置列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
proxyprizeDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
param: {}
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品类型" prop="prizeId">
|
||||
<el-select clearable placeholder="请选择奖品" v-model.number="form.prizeId" style="width:160px">
|
||||
<el-option v-for="item in prizeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="用户ID" prop="userId">
|
||||
<el-input v-model.number="form.userId" placeholder="请输入用户ID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemprizeAdd, redeemprizeUpdate } from '@/api/activity/redeemprize'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'prizeList'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
prizeId: undefined, // 0,
|
||||
remark: undefined, // "string",
|
||||
userId: undefined, // 0
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增奖品兑换记录
|
||||
add(data) {
|
||||
redeemprizeAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑奖品兑换记录
|
||||
update(data) {
|
||||
redeemprizeUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker v-model="time" :default-time="['00:00:00', '23:59:59']" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button>
|
||||
|
||||
<!-- <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="总支出" width="100">
|
||||
<template slot-scope="scope">{{ totalRevenue }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="总收入" width="100">
|
||||
<template slot-scope="scope">{{ totalRevenue }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="购买订单号" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.orderNo }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.mark|changeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="流水类型" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.transType|transType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="开始时间" >
|
||||
<template slot-scope="scope">{{ scope.row.startTime| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="结束时间" >
|
||||
<template slot-scope="scope">{{ scope.row.endTime| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" >
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" :prizeList='prizeList' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { redeemprizeList, redeemcodeListExport } from '@/api/activity/redeemprize'
|
||||
|
||||
export default {
|
||||
name: 'Redeemprize',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
prizeId: undefined,
|
||||
userId: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
},
|
||||
time: undefined,
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
totalOutlay:0, //总支出
|
||||
totalRevenue:0, //总支出
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
changeType(val){
|
||||
switch (val) {
|
||||
case -1:
|
||||
return '支出';
|
||||
case 0:
|
||||
return '无';
|
||||
case 1:
|
||||
return '收入';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
transType(val){
|
||||
switch (val) {
|
||||
case 0:
|
||||
|
||||
return '消耗';
|
||||
case 100:
|
||||
|
||||
return '消耗积分兑换卡券';
|
||||
case 200:
|
||||
|
||||
return '签到得积分';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:到处兑换码列表数据
|
||||
exportExcel() {
|
||||
const data = JSON.parse(JSON.stringify(this.searchData))
|
||||
redeemcodeListExport(data).then((res) => {
|
||||
if (res.code) {
|
||||
this.$message.error('导出列表失败!')
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
var blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||
})
|
||||
const t = new Date().valueOf()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.setAttribute('href', url)
|
||||
a.download = `兑换码列表${t}.xlsx`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//TODO: 请求奖品兑换记录列表数据
|
||||
getRedeemprizeList() {
|
||||
this.loading = true
|
||||
if (this.time) {
|
||||
this.searchData.startTime = this.time[0]
|
||||
this.searchData.endTime = this.time[1]
|
||||
} else {
|
||||
this.searchData.startTime = undefined
|
||||
this.searchData.endTime = undefined
|
||||
}
|
||||
redeemprizeList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
this.totalRevenue = res.data.totalRevenue
|
||||
this.totalOutlay = res.data.totalOutlay
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除奖品兑换记录数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
redeemprizeDel({ id: row.id }).then((res) => {
|
||||
this.getRedeemprizeList()
|
||||
this.$message.success('成功删除!')
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getRedeemprizeList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品数量" prop="count">
|
||||
<el-input v-model.number="form.count" placeholder="请输入奖品数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品类型" prop="prizeType">
|
||||
<el-select clearable placeholder="请选择奖品类型" v-model.number="form.type" style="width: 160px" @change="changePrizeType">
|
||||
<el-option v-for="item in PrizeTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品个数随机范围（最大）" prop="countMax">
|
||||
<el-input v-model.number="form.countMax" placeholder="奖品个数随机范围（最大）" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="优惠券id" prop="countMax">
|
||||
<el-input v-model.number="form.couponsId" placeholder="优惠券id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品个数随机范围（最小）" prop="countMax">
|
||||
<el-input v-model.number="form.countMin" placeholder="奖品个数随机范围（最小）" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="奖品图片">
|
||||
<UploadImg @changeImgUrl="changeCoverUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="数量是否随机" prop="countRand">
|
||||
<el-switch v-model="form.countRand" :active-value="true" :inactive-value="false" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { prizeAdd, prizeUpdate } from '@/api/activity/prize';
|
||||
import UploadImg from '@/components/UploadImg/index';
|
||||
import { PrizeVipTypeList, PrizeTypeList } from '@/filters/activity/prize';
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters';
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PrizeVipTypeList: PrizeVipTypeList(),
|
||||
PrizeTypeList: PrizeTypeList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
title: undefined,
|
||||
countMax: undefined, //0 积分数
|
||||
countMin: undefined, //0 积分数
|
||||
type: undefined, //0 奖品类型
|
||||
count: undefined, //0 奖品数量
|
||||
rank: undefined, //0 排序
|
||||
image: undefined,
|
||||
remark: undefined, //"string" 备注
|
||||
countRand: undefined, //1 上架状态
|
||||
},
|
||||
rules: {},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title;
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data };
|
||||
this.formData = Object.assign({}, this.form);
|
||||
if (this.form.type === 1) {
|
||||
//郑东 3月29日让新增小数点转换更新
|
||||
this.form.count = changeMoneyYuan(this.form.count);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增奖品列表数据
|
||||
add(data) {
|
||||
prizeAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false;
|
||||
this.$message.success('新增成功');
|
||||
} else {
|
||||
this.$message.error('新增失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
//TODO:编辑奖品列表数据
|
||||
update(data) {
|
||||
prizeUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false;
|
||||
this.$message.success('更新成功');
|
||||
} else {
|
||||
this.$message.error('更新失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
let data = { ...this.form };
|
||||
if (data.type === 1) {
|
||||
data.count = changeMoneyFen(this.form.count);
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(data);
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
changePrizeType() {
|
||||
this.form.vipType = undefined;
|
||||
},
|
||||
changeCoverUrl(url) {
|
||||
this.form.image = url;
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入奖品名称" clearable v-model="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
|
||||
<el-table-column align="center" label="奖品ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名字" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品个数（固定个数）" width="210">
|
||||
<template slot-scope="scope">{{ scope.row.type===1?scope.row.count/100:scope.row.count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品个数随机范围（最大）" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.countMax }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品个数随机范围（最小）" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.countMin }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="优惠券id" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.couponsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品描述" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品类型">
|
||||
<template slot-scope="scope">{{ scope.row.type | changePrizeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量是否随机" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.countRand ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit';
|
||||
import ShowImg from '@/components/ShowImg/index.vue';
|
||||
import { prizeList, prizeDel } from '@/api/activity/prize';
|
||||
export default {
|
||||
name: 'Prize',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getPrizeList();
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求奖品列表数据
|
||||
getPrizeList() {
|
||||
prizeList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list;
|
||||
this.total = res.data.count;
|
||||
} else {
|
||||
this.resData = [];
|
||||
this.total = 0;
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// TODO:删除奖品列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
prizeDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getPrizeList();
|
||||
this.$message.success('成功删除!');
|
||||
} else {
|
||||
this.$message.error('操作失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1;
|
||||
this.searchData.pageSize = 10;
|
||||
this.getPrizeList();
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val;
|
||||
this.getPrizeList();
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val;
|
||||
this.getPrizeList();
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true;
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
};
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true;
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
};
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
};
|
||||
this.editVisible = false;
|
||||
this.getPrizeList();
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined;
|
||||
this.getPrizeList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="模版标题" prop="fakeSells">
|
||||
<el-input v-model="form.name" placeholder="模版标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.rank"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="分类所属">
|
||||
<el-select placeholder="请选择分类所属" clearable v-model="form.caType" @clear="onClear('caType')">
|
||||
<el-option label="图片换脸" :value="1" />
|
||||
<el-option label="视频换脸" :value="2" />
|
||||
<el-option label="AI脱衣" :value="3" />
|
||||
<el-option label="AI女友" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="展示方式">
|
||||
<el-select placeholder="请选择展示方式" clearable v-model="form.showType" @clear="onClear('showType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate'
|
||||
import { aitemplateCategoryAdd, aitemplateCategoryUpdate } from '@/api/aiManagement/aiOrder'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
caType: undefined,
|
||||
createdAt: undefined,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
rank: undefined,
|
||||
showType: undefined,
|
||||
status: undefined,
|
||||
updatedAt: undefined
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增应用列表数据
|
||||
add(data) {
|
||||
aitemplateCategoryAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
aitemplateCategoryUpdate(data).then(res => {
|
||||
if (res && res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="开启" :value="true" />
|
||||
<el-option label="关闭" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="Id">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="AI订单内容类型">
|
||||
<template slot-scope="scope">{{ scope.row.caType | changeAtType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="展示方式">
|
||||
<template slot-scope="scope">{{ scope.row.showType | changeAiContentType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否启用">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.createdAt | BeiJingTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.updatedAt | BeiJingTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import { aitemplateCategoryList, aitemplateCategoryDel } from '@/api/aiManagement/aiOrder'
|
||||
import Edit from './components/AddOrEdit'
|
||||
export default {
|
||||
name: 'AiOrder',
|
||||
components: {
|
||||
Edit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
status: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false,
|
||||
total: 0, // 数据总条数
|
||||
loading: true // 列表加载状态
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
aitemplateCategoryList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
aitemplateCategoryDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGameInfo()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
@close="close">
|
||||
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="AI生成的图片">
|
||||
<UploadImgArr @changeImgUrl="changeCoverImgUrl" :img="form.modifyImgs"></UploadImgArr>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="换脸方式">
|
||||
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务状态">
|
||||
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="原因" prop="fakeSells">
|
||||
<el-input v-model.number="form.reason" placeholder="请输入原因" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImgArr from '@/components/UploadImgArr/index'
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
|
||||
import { aiorderFacechangeUpdate } from '@/api/aiManagement/aiOrder'
|
||||
import UploadVideo from '@/components/UploadVideo/index'
|
||||
import DPlayer from '@/components/VueDplayerHls/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImgArr,
|
||||
UploadVideo,
|
||||
DPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
"byWay": undefined,
|
||||
"id": undefined,
|
||||
"modifyImgs": undefined,
|
||||
"modifyVideoUrl": undefined,
|
||||
"reason": undefined,
|
||||
"status": 0,
|
||||
"updatedAt": undefined
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
|
||||
aiorderFacechangeUpdate(data).then((res) => {
|
||||
if (res && res.code === 200) {
|
||||
this.$message.success(res.data ? res.data : '更新成功')
|
||||
} else {
|
||||
this.$message.error(res.data?res.data:'更新失败')
|
||||
}
|
||||
this.Visible = false
|
||||
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
this.form.id = data.id
|
||||
// this.$set(this.form, 'fieldNameFs', data.videoUri)
|
||||
this.form.videoUrl = data.videoUri
|
||||
// this.form.fieldNameFs = data.videoUri
|
||||
// this.form.videoTime = parseInt(data.duration)
|
||||
// this.form.size = data.size
|
||||
// this.open()
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
repeatVideo(data) {
|
||||
this.form.taskId = data.taskId
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.modifyImgs = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-row :gutter="24">
|
||||
<el-col >
|
||||
<h3>AI生成的视频URl</h3>
|
||||
<div v-if="form.vidUrl" style="width: 380px; height: 240px; overflow: hidden">
|
||||
<DPlayer ref="player" v-if="form.vidUrl.indexOf('mp4') === -1" :video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.vidUrl),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.vidUrl,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="换脸方式">
|
||||
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务状态">
|
||||
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="原因" prop="fakeSells">
|
||||
<el-input v-model.number="form.reason" placeholder="请输入原因" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImgArr from '@/components/UploadImgArr/index'
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
|
||||
import { aiorderFacechangeUpdate } from '@/api/aiManagement/aiOrder'
|
||||
import UploadVideo from '@/components/UploadVideo/index'
|
||||
import DPlayer from '@/components/VueDplayerHls/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImgArr,
|
||||
UploadVideo,
|
||||
DPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
"byWay": undefined,
|
||||
"id": undefined,
|
||||
"modifyImgs": undefined,
|
||||
"vidUrl": undefined,
|
||||
"reason": undefined,
|
||||
"status": 0,
|
||||
"updatedAt": undefined
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
|
||||
aiorderFacechangeUpdate(data).then((res) => {
|
||||
if (res && res.code === 200) {
|
||||
this.$message.success(res.data ? res.data : '更新成功')
|
||||
} else {
|
||||
this.$message.error(res.data ? res.data : '更新失败')
|
||||
}
|
||||
this.Visible = false
|
||||
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
this.form.id = data.id
|
||||
// this.$set(this.form, 'fieldNameFs', data.videoUri)
|
||||
this.form.vidUrl = data.videoUri
|
||||
// this.form.fieldNameFs = data.videoUri
|
||||
// this.form.videoTime = parseInt(data.duration)
|
||||
// this.form.size = data.size
|
||||
// this.open()
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
repeatVideo(data) {
|
||||
this.form.taskId = data.taskId
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.modifyImgs = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入模版标题" v-model="searchData.tplTitle" @clear="onClear('tplTitle')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="Id">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户Id">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="换脸AI任务ID">
|
||||
<template slot-scope="scope">{{ scope.row.aiVidId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="支付方式">
|
||||
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="AI订单内容类型">
|
||||
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务进度">
|
||||
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否已退款">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="订单退款次数">
|
||||
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="换脸方式">
|
||||
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版标题">
|
||||
<template slot-scope="scope">{{ scope.row.tplTitle }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="模版图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.tplPictures"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="用户上传的换脸人物图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="生成的图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.modifyImgs"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作人">
|
||||
<template slot-scope="scope">{{ scope.row.operator }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="原因">
|
||||
<template slot-scope="scope">{{ scope.row.reason }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="价格">
|
||||
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版Id">
|
||||
<template slot-scope="scope">{{ scope.row.tplId }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button v-if="!scope.row.isRefund && (scope.row.status===5 || scope.row.status===6)" @click="orderSumbit(scope.$index, scope.row)" size="mini" type="success">重新生成</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
<ShowVideo ref="showvideo"></ShowVideo>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEditPhoto';
|
||||
import ShowImg from '@/components/ShowImg/index.vue';
|
||||
import ShowVideo from '@/components/ShowVideo/index.vue';
|
||||
import { aiFacechangeSearch,facechangeResubmit } from '@/api/aiManagement/aiOrder';
|
||||
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate';
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder';
|
||||
export default {
|
||||
name: 'AiOrder',
|
||||
components: {
|
||||
ShowImg,
|
||||
ShowVideo,
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
userId: undefined,
|
||||
tplTitle: undefined,
|
||||
status: undefined,
|
||||
operator: undefined,
|
||||
id: undefined,
|
||||
byWay: undefined,
|
||||
aoContentType: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false,
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo();
|
||||
},
|
||||
methods: {
|
||||
orderSumbit(index,row){
|
||||
this.$confirm('此操作将重新提交该订单, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(async() => {
|
||||
const res = await facechangeResubmit({id:row.id})
|
||||
if(res.code===200){
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '提交成功!'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '提交失败!'
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
//TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
aiFacechangeSearch(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.resData = [];
|
||||
this.total = 0;
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
AppInfoDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo();
|
||||
this.$message.success('成功删除!');
|
||||
} else {
|
||||
this.$message.error('操作失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1;
|
||||
this.searchData.pageSize = 10;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true;
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true;
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
};
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
};
|
||||
this.editVisible = false;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, data) {
|
||||
this.$refs.showvideo.open(url, data, data.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入模版标题" v-model="searchData.tplTitle" @clear="onClear('tplTitle')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="Id">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户id">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="换脸AI任务ID">
|
||||
<template slot-scope="scope">{{ scope.row.aiVidId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="支付方式">
|
||||
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="AI订单内容类型">
|
||||
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务进度">
|
||||
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否已退款">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="订单退款次数">
|
||||
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="换脸方式">
|
||||
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版标题">
|
||||
<template slot-scope="scope">{{ scope.row.tplTitle }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" width="100" label="模版视频封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.tplVideoCover"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版视频">
|
||||
<template slot-scope="scope">
|
||||
<i v-if="scope.row.tplVideoUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.tplVideoUrl, scope.row)"></i>
|
||||
<div v-else>暂无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="用户上传的图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成的视频">
|
||||
<template slot-scope="scope">
|
||||
<i v-if="scope.row.vidUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.vidUrl, scope.row)"></i>
|
||||
<div v-else>暂无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作人">
|
||||
<template slot-scope="scope">{{ scope.row.operator }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="原因">
|
||||
<template slot-scope="scope">{{ scope.row.reason }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="价格">
|
||||
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版Id">
|
||||
<template slot-scope="scope">{{ scope.row.tplId }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button v-if="!scope.row.isRefund && (scope.row.status===5 || scope.row.status===6)" @click="orderSumbit(scope.$index, scope.row)" size="mini" type="success">重新生成</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
<ShowVideo ref="showvideo"></ShowVideo>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEditVideo';
|
||||
import ShowImg from '@/components/ShowImg/index.vue';
|
||||
import ShowVideo from '@/components/ShowVideo/index.vue';
|
||||
import { aiFacechangeSearch,facechangeResubmit } from '@/api/aiManagement/aiOrder';
|
||||
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate';
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder';
|
||||
export default {
|
||||
name: 'AiOrder',
|
||||
components: {
|
||||
ShowImg,
|
||||
ShowVideo,
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
userId: undefined,
|
||||
tplTitle: undefined,
|
||||
status: undefined,
|
||||
operator: undefined,
|
||||
id: undefined,
|
||||
byWay: undefined,
|
||||
aoContentType: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false,
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo();
|
||||
},
|
||||
methods: {
|
||||
orderSumbit(index,row){
|
||||
this.$confirm('此操作将重新提交该订单, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(async() => {
|
||||
const res = await facechangeResubmit({id:row.id})
|
||||
if(res.code===200){
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '提交成功!'
|
||||
});
|
||||
}else{
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '提交失败!'
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
//TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
aiFacechangeSearch(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.resData = [];
|
||||
this.total = 0;
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
AppInfoDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo();
|
||||
this.$message.success('成功删除!');
|
||||
} else {
|
||||
this.$message.error('操作失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1;
|
||||
this.searchData.pageSize = 10;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true;
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true;
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
};
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
};
|
||||
this.editVisible = false;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, data) {
|
||||
this.$refs.showvideo.open(url, data, data.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="现价(分)" prop="payAmount">
|
||||
<el-input v-model="form.payAmount" placeholder="请输入现价" />
|
||||
</el-form-item>
|
||||
<div style="margin: -20px 118px 20px; color: #c6c6c6">建议输入金额:30,50,100,200,300,500,1000</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="原价(分)" prop="prePayAmount">
|
||||
<el-input v-model="form.prePayAmount" placeholder="请输入原价" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="积分数量" prop="score">
|
||||
<el-input v-model.number="form.score" placeholder="请输入积分数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="赠送积分数量" prop="giftScore">
|
||||
<el-input v-model.number="form.giftScore" placeholder="请输入赠送积分数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="是否上架" prop="isEnb">
|
||||
<el-switch v-model="form.isEnb" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="排序" prop="desc">
|
||||
<el-input placeholder="请输入排序" v-model="form.sort" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { aiMateScoreConfAdd, aiMateScoreConfModify } from '@/api/aiManagement/aiGirlFriendConfig'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
giftScore: null, // 赠送金币
|
||||
score: undefined, // 金币基础
|
||||
isEnb: true, // 是否上架
|
||||
image: undefined,
|
||||
name: undefined, // 名称
|
||||
payAmount: undefined, // 支付金额
|
||||
desc: undefined,
|
||||
prePayAmount: undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.payAmount = changeMoneyYuan(this.form.payAmount)
|
||||
this.form.prePayAmount = changeMoneyYuan(this.form.prePayAmount)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：新增金币管理数据
|
||||
add(data) {
|
||||
aiMateScoreConfAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑金币管理数据
|
||||
update(data) {
|
||||
aiMateScoreConfModify(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.payAmount = data.payAmount ? changeMoneyFen(data.payAmount) : 0
|
||||
data.prePayAmount = data.prePayAmount ? changeMoneyFen(data.prePayAmount) : 0
|
||||
data.sort = Number(data.sort)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 40px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="积分数量">
|
||||
<template slot-scope="scope">{{ scope.row.score }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="赠送积分数量">
|
||||
<template slot-scope="scope">{{ scope.row.giftScore }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="现价(单位:分)" width="150px">
|
||||
<template slot-scope="scope">{{ scope.row.payAmount | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="原价(单位:分)" width="150px">
|
||||
<template slot-scope="scope">{{ scope.row.prePayAmount | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否上架">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb ? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? '上架' : '未上架' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160px">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160px">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { aiMateScoreConfList, aiMateScoreConfDel } from '@/api/aiManagement/aiGirlFriendConfig'
|
||||
export default {
|
||||
name: 'Gold',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGoldList()
|
||||
},
|
||||
methods: {
|
||||
// TODO：请求金币管理数据列表
|
||||
getGoldList() {
|
||||
this.loading = true
|
||||
aiMateScoreConfList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:删除金币管理列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
aiMateScoreConfDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGoldList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGoldList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGoldList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务状态">
|
||||
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { aiImgToVideoUpdate } from '@/api/aiManagement/aiImgToVideo.js'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'aiImgToVideoStatusList'],
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
remark: undefined, // 备注
|
||||
status: undefined // 状态
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：编辑金币管理数据
|
||||
update(data) {
|
||||
aiImgToVideoUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in aiImgToVideoStatusList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="Id">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图生视频金币个数">
|
||||
<template slot-scope="scope">{{ scope.row.coin/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务进度">
|
||||
<template slot-scope="scope">{{ scope.row.status | aiImgToVideoType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否删除">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isDelete ? 'danger' : 'success'" plain size="mini">{{ scope.row.isDelete ? '已删除' : '未删除' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否使用免费次数">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isFreeTimes ? 'danger' : 'success'" plain size="mini">{{ scope.row.isFreeTimes ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否被用户隐藏">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isHide ? 'danger' : 'success'" plain size="mini">{{ scope.row.isHide ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="未处理的图片地址">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.imgUrl"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="处理后的图片地址">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.newImgUrl"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="备注">
|
||||
<template slot-scope="scope">{{ scope.row.remark }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="changeStatus(scope.$index, scope.row)" size="mini" type="danger">退款</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" :aiImgToVideoStatusList="aiImgToVideoStatusList" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { aiImgToVideoList, aiImgToVideoDel, aiImgToVideoUpdate } from '@/api/aiManagement/aiImgToVideo.js'
|
||||
|
||||
export default {
|
||||
name: 'Gold',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aiImgToVideoStatusList: [
|
||||
{ id: 1, name: '下单成功' },
|
||||
{ id: 2, name: '已提交' },
|
||||
{ id: 3, name: '生成成功' },
|
||||
{ id: 4, name: '生成失败' },
|
||||
{ id: 5, name: '退款' }
|
||||
],
|
||||
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
userId: undefined,
|
||||
status: undefined,
|
||||
id: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGoldList()
|
||||
},
|
||||
filters: {
|
||||
aiImgToVideoType(id) {
|
||||
switch (id) {
|
||||
case 1:
|
||||
return '下单成功'
|
||||
case 2:
|
||||
return '已提交'
|
||||
case 3:
|
||||
return '生成成功'
|
||||
case 4:
|
||||
return '生成失败'
|
||||
case 5:
|
||||
return '退款'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// TODO：请求金币管理数据列表
|
||||
getGoldList() {
|
||||
this.loading = true
|
||||
aiImgToVideoList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO:删除金币管理列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
aiImgToVideoDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGoldList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
changeStatus(index, row) {
|
||||
this.$confirm('确定退款?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
aiImgToVideoUpdate({ id: row.id, status: 5 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGoldList()
|
||||
this.$message.success('已退款!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGoldList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGoldList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-row :gutter="24">
|
||||
<el-col>
|
||||
<h3>AI生成的视频URl</h3>
|
||||
<div v-if="form.modifyVideoUrl" style="width: 380px; height: 240px; overflow: hidden">
|
||||
|
||||
<DPlayer ref="player" v-if="form.modifyVideoUrl.indexOf('mp4') === -1" :video="{
|
||||
url: '/api/web/media/m3u8/' + filterM3u8(form.modifyVideoUrl),
|
||||
type: 'hls',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
<DPlayer ref="player" v-else :video="{
|
||||
url: this.$store.getters.getSystemConfig.webImgReq + form.modifyVideoUrl,
|
||||
type: 'mp4',
|
||||
pic: '',
|
||||
}" hotkey ></DPlayer>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="AI生成的图片">
|
||||
<UploadImgArr @changeImgUrl="changeCoverImgUrl" :img="form.modifyImgs"></UploadImgArr>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="换脸方式">
|
||||
<el-select placeholder="请选择换脸方式" clearable v-model="form.byWay">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"
|
||||
v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="任务状态">
|
||||
<el-select placeholder="请选择任务状态" clearable v-model="form.status">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="原因" prop="fakeSells">
|
||||
<el-input v-model.number="form.reason" placeholder="请输入原因" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImgArr from '@/components/UploadImgArr/index'
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder'
|
||||
import { aiorderStripUpdate } from '@/api/aiManagement/aiOrder'
|
||||
import UploadVideo from '@/components/UploadVideo/index'
|
||||
import DPlayer from '@/components/VueDplayerHls/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImgArr,
|
||||
UploadVideo,
|
||||
DPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
"byWay": undefined,
|
||||
"id": undefined,
|
||||
"modifyImgs": undefined,
|
||||
"modifyVideoUrl": undefined,
|
||||
"reason": undefined,
|
||||
"status": 0,
|
||||
"updatedAt": undefined
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
|
||||
aiorderStripUpdate(data).then((res) => {
|
||||
|
||||
|
||||
if (res && res.code === 200) {
|
||||
this.$message.success(res.data ? res.data : '更新成功')
|
||||
} else {
|
||||
this.$message.error(res.data ? res.data : '更新失败')
|
||||
}
|
||||
this.Visible = false
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
this.form.id = data.id
|
||||
// this.$set(this.form, 'fieldNameFs', data.videoUri)
|
||||
this.form.videoUrl = data.videoUri
|
||||
// this.form.fieldNameFs = data.videoUri
|
||||
// this.form.videoTime = parseInt(data.duration)
|
||||
// this.form.size = data.size
|
||||
// this.open()
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
repeatVideo(data) {
|
||||
this.form.taskId = data.taskId
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.modifyImgs = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai内容类型" clearable v-model="searchData.contentType" @clear="onClear('subType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai换脸方式" clearable v-model="searchData.byWay" @clear="onClear('byWay')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiOrderFaceChangeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择任务进度" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in aiFaceOrderList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入操作人" v-model="searchData.operator" @clear="onClear('operator')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="Id">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="支付方式">
|
||||
<template slot-scope="scope">{{ scope.row.payType | aiPayTypeChange }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="AI订单内容类型">
|
||||
<template slot-scope="scope">{{ scope.row.aoContentType | changeAiContentType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="任务进度">
|
||||
<template slot-scope="scope">{{ scope.row.status | aiFaceOrderType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="是否已退款">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isRefund ? 'danger' : 'success'" plain size="mini">{{ scope.row.isRefund ? '已退款' : '未退款' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="100" align="center" label="订单退款次数">
|
||||
<template slot-scope="scope">{{ scope.row.retryNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="换脸方式">
|
||||
<template slot-scope="scope">{{ scope.row.byWay | aiOrderFaceChangeType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="用户上传的图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.sourceImgs"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="生成的图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.modifyImgs"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="脱衣任务id">
|
||||
<template slot-scope="scope">{{ scope.row.aiJobId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作人">
|
||||
<template slot-scope="scope">{{ scope.row.operator }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="原因">
|
||||
<template slot-scope="scope">{{ scope.row.reason }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="价格">
|
||||
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
<ShowVideo ref="showvideo"></ShowVideo>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit';
|
||||
import ShowImg from '@/components/ShowImg/index.vue';
|
||||
import ShowVideo from '@/components/ShowVideo/index.vue';
|
||||
import { aiStripSearch } from '@/api/aiManagement/aiOrder';
|
||||
import { AiContentTypeList } from '@/filters/aiManagement/aiTemplate';
|
||||
import { aiOrderFaceChangeList, aiFaceOrderList } from '@/filters/aiManagement/aiFaceOrder';
|
||||
export default {
|
||||
name: 'AiOrder',
|
||||
components: {
|
||||
ShowImg,
|
||||
ShowVideo,
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
userId: undefined,
|
||||
tplTitle: undefined,
|
||||
status: undefined,
|
||||
operator: undefined,
|
||||
id: undefined,
|
||||
byWay: undefined,
|
||||
aoContentType: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false,
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
aiOrderFaceChangeList: aiOrderFaceChangeList(),
|
||||
aiFaceOrderList: aiFaceOrderList(),
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo();
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
aiStripSearch(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list;
|
||||
this.total = res.data.total;
|
||||
} else {
|
||||
this.resData = [];
|
||||
this.total = 0;
|
||||
this.$message.error('请求列表失败!');
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
AppInfoDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo();
|
||||
this.$message.success('成功删除!');
|
||||
} else {
|
||||
this.$message.error('操作失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1;
|
||||
this.searchData.pageSize = 10;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true;
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true;
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
};
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
};
|
||||
this.editVisible = false;
|
||||
this.getGameInfo();
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined;
|
||||
this.getGameInfo();
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, data) {
|
||||
this.$refs.showvideo.open(url, data, data.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="请选择Ai内容类型">
|
||||
<el-select placeholder="请选择Ai内容类型" clearable v-model="form.contentType" @clear="onClear('subType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.contentType == 2">
|
||||
<el-form-item label="媒资库视频taskId" prop="fakeSells">
|
||||
<el-input v-model="form.taskID" placeholder="请输入媒资库视频taskId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="请选择Ai类型">
|
||||
<el-select placeholder="请选择Ai类型" clearable v-model="form.atType" @clear="onClear('subType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="模版分类" prop="categoryId">
|
||||
<el-select placeholder="请选择模版分类" clearable v-model="form.categoryId" filterable @clear="onClear('categoryId')">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in categoryIdList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="模版图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.picture"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="激活状态">
|
||||
<el-select placeholder="请选择激活状态" clearable v-model="form.enable">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="售卖次数（虚拟）" prop="fakeSells">
|
||||
<el-input v-model.number="form.fakeSells" placeholder="请输入售卖次数（虚拟）" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="模版标题" prop="fakeSells">
|
||||
<el-input v-model="form.title" placeholder="模版标题" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="价格">
|
||||
<el-input placeholder="请输入价格" v-model.number="form.price"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input placeholder="请输入排序" v-model.number="form.rank"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { AtTypeList, AiContentTypeList, AiEnableList } from '@/filters/aiManagement/aiTemplate'
|
||||
import { aitemplateAdd, aitemplateUpdate } from '@/api/aiManagement/aiTemplate'
|
||||
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
|
||||
// import UploadVideo from '@/components/UploadVideo/index'
|
||||
// import DPlayer from '@/components/VueDplayerHls/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'categoryIdList'],
|
||||
components: {
|
||||
UploadImg
|
||||
// UploadVideo,
|
||||
// DPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AtTypeList: AtTypeList(),
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
AiEnableList: AiEnableList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
atType: undefined,
|
||||
contentType: undefined,
|
||||
createdAt: undefined,
|
||||
enable: undefined,
|
||||
fakeSells: undefined,
|
||||
height: undefined,
|
||||
id: undefined,
|
||||
picture: undefined,
|
||||
playTime: undefined,
|
||||
price: undefined,
|
||||
rank: undefined,
|
||||
sells: undefined,
|
||||
taskID: undefined,
|
||||
title: undefined,
|
||||
updatedAt: undefined,
|
||||
videoCover: undefined,
|
||||
videoUrl: undefined,
|
||||
width: undefined,
|
||||
categoryId: undefined
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
this.form.price = changeMoneyYuan(this.formData.price)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增应用列表数据
|
||||
add(data) {
|
||||
data.price = changeMoneyFen(data.price)
|
||||
if (data.contentType === 2 && !data.taskID) return this.$message.error('请输入视频taskId进行视频绑定！')
|
||||
|
||||
aitemplateAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
filterM3u8(v) {
|
||||
return /\.m3u8/g.test(v) ? v : v + '.m3u8'
|
||||
},
|
||||
// TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
data.price = changeMoneyFen(data.price)
|
||||
aitemplateUpdate(data).then(res => {
|
||||
if (res && res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传视频返回地址
|
||||
changeVideoUrl(data) {
|
||||
this.form.id = data.id
|
||||
// this.$set(this.form, 'fieldNameFs', data.videoUri)
|
||||
this.form.videoUri = data.videoUri
|
||||
// this.form.fieldNameFs = data.videoUri
|
||||
// this.form.videoTime = parseInt(data.duration)
|
||||
// this.form.size = data.size
|
||||
// this.open()
|
||||
},
|
||||
|
||||
// 重复上传视频
|
||||
repeatVideo(data) {
|
||||
this.form.taskId = data.taskId
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.picture = data
|
||||
},
|
||||
changeVideoCoverImgUrl(data) {
|
||||
this.form.videoCover = data
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai类型" clearable v-model="searchData.atType" @clear="onClear('subType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AtTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择Ai内容类型" clearable v-model="searchData.contentType" @clear="onClear('subType')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiContentTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择激活状态" clearable v-model="searchData.enable" @clear="onClear('enable')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in AiEnableList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择排序状态" clearable v-model="searchData.sort" @clear="onClear('sort')">
|
||||
<el-option key="0" :label="'最新'" :value="0" />
|
||||
<el-option key="1" :label="'最热'" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入视频媒资库taskID" v-model.number="searchData.taskID" @clear="onClear('taskID')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入模版标题" v-model.number="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="类型">
|
||||
<template slot-scope="scope">{{ scope.row.atType | changeAtType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="AI内容类型">
|
||||
<template slot-scope="scope">{{ scope.row.contentType | changeAiContentType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖次数（虚拟）">
|
||||
<template slot-scope="scope">{{ scope.row.fakeSells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖次数（真）">
|
||||
<template slot-scope="scope">{{ scope.row.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="价格">
|
||||
<template slot-scope="scope">{{ scope.row.price / 100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否激活">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.enable ? 'success' : 'error'" plain size="mini">{{ scope.row.enable ? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="视频媒资库taskID（视频才会存在）">
|
||||
<template slot-scope="scope">{{ scope.row.taskID }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="模版标题">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="模版图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.picture"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="视频封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.videoCover"> </ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="影片时长">
|
||||
<template slot-scope="scope">{{ scope.row.playTime | secondToHouseMinuteSecond }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="视频">
|
||||
<template slot-scope="scope">
|
||||
<i v-if="scope.row.videoUrl" class="el-icon-video-play views" title="点击预览" @click="checkMedia(scope.row.videoUrl, scope.row)"></i>
|
||||
<div v-else>暂无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" :categoryIdList="categoryIdList" />
|
||||
<ShowVideo ref="showvideo"></ShowVideo>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { aitemplateSearch, aitemplateDel } from '@/api/aiManagement/aiTemplate'
|
||||
import ShowVideo from '@/components/ShowVideo/index.vue'
|
||||
import { AtTypeList, AiContentTypeList, AiEnableList } from '@/filters/aiManagement/aiTemplate'
|
||||
import { aitemplateCategoryList } from '@/api/aiManagement/aiOrder'
|
||||
|
||||
export default {
|
||||
name: 'AiTemplate',
|
||||
components: {
|
||||
ShowImg,
|
||||
Edit,
|
||||
ShowVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
atType: undefined,
|
||||
contentType: undefined, // 搜索结束时间
|
||||
enable: undefined, // 搜索开始时间
|
||||
sort: undefined, // 发布者ID
|
||||
taskID: undefined,
|
||||
title: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
AtTypeList: AtTypeList(),
|
||||
AiContentTypeList: AiContentTypeList(),
|
||||
AiEnableList: AiEnableList(),
|
||||
editVisible: false,
|
||||
categoryIdList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo()
|
||||
this.getCategoryId()
|
||||
},
|
||||
methods: {
|
||||
getCategoryId() {
|
||||
aitemplateCategoryList({
|
||||
pageNum: 1,
|
||||
pageSize: 1000
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.categoryIdList = res.data.list
|
||||
} else {
|
||||
this.categoryIdList = []
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
aitemplateSearch(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
aitemplateDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增'
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGameInfo()
|
||||
},
|
||||
// 视频查看
|
||||
checkMedia(url, data) {
|
||||
this.$refs.showvideo.open(url, data, data.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="应用图标">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.avatar"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="应用名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入应用名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序参数" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="下载地址" prop="download_url">
|
||||
<el-input v-model="form.download_url" placeholder="请输入下载地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="应用标签" prop="created_id">
|
||||
<el-select placeholder="请选择应用标签" clearable v-model="form.tag" @clear="onClear('tag')" style="width: 163px">
|
||||
<el-option v-for="item in changeAppList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="应用描述" prop="desc">
|
||||
<el-input v-model="form.desc" placeholder="请输入应用描述" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { changeAppList } from '@/filters/appManagement/appList'
|
||||
import { AppInfoAdd, AppInfoUpdate } from '@/api/appManagement/appList'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
changeAppList: changeAppList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
time: [],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
avatar: undefined, // 头像
|
||||
rank: 0, // 排序
|
||||
tag: undefined, // 标签
|
||||
name: undefined, // 应用名称
|
||||
download_url: undefined, // 下载地址
|
||||
desc: undefined, // 描述
|
||||
status: false, // 开启状态
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增应用列表数据
|
||||
add(data) {
|
||||
AppInfoAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑应用列表数据
|
||||
update(data) {
|
||||
AppInfoUpdate(data).then((res) => {
|
||||
if (res && res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.avatar = data
|
||||
},
|
||||
onClear(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入应用名称" v-model="searchData.name" @clear="onClear('app_name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入发布者ID" v-model.number="searchData.publicer" @clear="onClear('publicer')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker :default-time="['00:00:00', '23:59:59']" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="datetimerange" v-model="time" value-format="yyyy-MM-ddTHH:mm:ss+08:00" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应用ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应用名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应用描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="下载地址">
|
||||
<template slot-scope="scope">{{ scope.row.download_url }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="所属标签">
|
||||
<template slot-scope="scope">{{ scope.row.tag | changeAppTagType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否开启">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success':'error'" plain size="mini">{{ scope.row.status ? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="发布者ID">
|
||||
<template slot-scope="scope">{{ scope.row.created_id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="最后更新者ID">
|
||||
<template slot-scope="scope">{{ scope.row.updated_id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" width="100" label="应用图标">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width:70px; height: 70px; margin: 0 auto" :urls="scope.row.avatar"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { AppInfoDel, AppInfoSearch } from '@/api/appManagement/appList'
|
||||
export default {
|
||||
name: 'AppList',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
name: undefined,
|
||||
end_time: undefined, // 搜索结束时间
|
||||
start_time: undefined, // 搜索开始时间
|
||||
publicer: undefined, // 发布者ID
|
||||
tag: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
time: undefined,
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGameInfo()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求应用列表数据
|
||||
getGameInfo() {
|
||||
if (this.time) {
|
||||
this.searchData.start_time = this.time[0]
|
||||
this.searchData.end_time = this.time[1]
|
||||
} else {
|
||||
this.searchData.start_time = undefined
|
||||
this.searchData.end_time = undefined
|
||||
}
|
||||
AppInfoSearch(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除应用列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
AppInfoDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGameInfo()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGameInfo()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGameInfo()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-04-06 17:32:20
|
||||
* @LastEditTime: 2022-06-09 11:08:45
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @FilePath: /comics-admin/src/views/comicsManagement/comics/components/setTag.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
width="700px"
|
||||
center
|
||||
class="ac-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
class="demo-form-inline"
|
||||
label-width="80"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col v-if="isB" :span="24">
|
||||
<el-form-item prop="jmId" label="jmId">
|
||||
<el-input
|
||||
v-model='form.jmId'
|
||||
style="width: 90%"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="text" label="文本">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{minRows: 4, maxRows: 10}"
|
||||
v-model='form.text'
|
||||
style="width: 90%"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消</el-button>
|
||||
<el-button type="primary" @click="submit"> 确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addComicCrawler } from '@/api/comicsManagement/comicsNotUpList'
|
||||
|
||||
export default {
|
||||
name: 'AddComic',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
form: {
|
||||
text: '',
|
||||
jmId: null
|
||||
},
|
||||
//
|
||||
rules: {
|
||||
text: [
|
||||
{ required: true, message: '请输入文本', trigger: 'blur' }
|
||||
],
|
||||
jmId: [
|
||||
{ required: true, message: '请输入jmId', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
labelList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isB() {
|
||||
return this.data.type === 'B'
|
||||
},
|
||||
title() {
|
||||
return this.data.title || '更新'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.form = { ...this.form, ...this.data.data }
|
||||
},
|
||||
methods: {
|
||||
// TODO:手动爬虫
|
||||
submit() {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
addComicCrawler(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('手动爬取漫画成功')
|
||||
} else {
|
||||
this.$message.error('手动爬取漫画失败')
|
||||
}
|
||||
// this.Visible = false
|
||||
})
|
||||
this.$emit('cancel')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('cancel')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form" type="flex" justify="space-between">
|
||||
<el-col :span="10">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
placeholder="请输入页数"
|
||||
clearable
|
||||
v-model.number="searchData.pageNum"
|
||||
@clear="onClear('pageNum')"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button :loading="loading" @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="toUpdate" icon="el-icon-plus" plain type="primary">更新漫画</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col span="2">
|
||||
<el-button size="mini">更新数量: {{ total }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table ref="table" v-loading="loading" :data="tableData" border height="750" style="width: 100%">
|
||||
<el-table-column align="center" label="唯一标识" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.jmId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标题" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="已经更新章节数量" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.updateNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="网址" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.url }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="addComic(scope.row)" size="mini" type="success">手动爬取漫画</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<AddComic :data="addComicData" v-if="addComicVisible" @close="closeEdit" @cancel="cancel"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getComicsNotUpList } from '@/api/comicsManagement/comicsNotUpList'
|
||||
import AddComic from '@/views/comicsManagement/comicNotUpList/components/addComic.vue'
|
||||
|
||||
export default {
|
||||
name: 'ComicNotUpList',
|
||||
components: {
|
||||
AddComic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
pageNum: 1
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
loading: true,
|
||||
addComicVisible: false,
|
||||
addComicData: {
|
||||
type: '',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
activated() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table.doLayout()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求漫画列表数据
|
||||
getData() {
|
||||
this.loading = true
|
||||
getComicsNotUpList(this.searchData).then((res) => {
|
||||
this.loading = false
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求每日更新列表数据失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
if (key === 'pageNum') this.searchData.pageNum = 1
|
||||
this.getData()
|
||||
},
|
||||
closeEdit() {
|
||||
this.addComicVisible = false
|
||||
this.addComicData = null
|
||||
this.getData()
|
||||
},
|
||||
cancel() {
|
||||
this.addComicVisible = false
|
||||
this.addComicData = null
|
||||
},
|
||||
addComic(row) {
|
||||
this.addComicData = {
|
||||
type: 'A',
|
||||
title: '手动爬取漫画',
|
||||
data: {
|
||||
jmId: row.jmId
|
||||
}
|
||||
}
|
||||
this.addComicVisible = true
|
||||
},
|
||||
toUpdate() {
|
||||
this.addComicData = {
|
||||
type: 'B',
|
||||
title: '更新漫画',
|
||||
data: null
|
||||
}
|
||||
this.addComicVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" calss="ac-dialog" center width="800px" @close="close">
|
||||
<div>
|
||||
<el-form :rules="rules" :model="dialogForm" label-width="130px" ref="dialogForm">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画标题">
|
||||
<el-input placeholder="请输入标题" v-model="dialogForm.title" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画作者">
|
||||
<el-input placeholder="请输入作者" v-model="dialogForm.author" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画主题">
|
||||
<el-select placeholder="请选择漫画主题" v-model="dialogForm.topics" filterable multiple>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in topicsList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画标签">
|
||||
<el-select placeholder="请选择漫画标题" v-model="dialogForm.tags" value-key="id" filterable multiple>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in labelList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input placeholder="请输入排序" v-model.number="dialogForm.rank" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否VIP" prop="isVip">
|
||||
<el-switch v-model="dialogForm.isVip" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否参与会员日活动" prop="memberDayActivity">
|
||||
<el-switch v-model="dialogForm.memberDayActivity" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否精选" prop="isRecomend">
|
||||
<el-switch v-model="dialogForm.isRecomend" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="圈子">
|
||||
<el-select style="width: 180px" clearable placeholder="请选择圈子" v-model="dialogForm.circleId" filterable>
|
||||
<el-option :key="item.id + item.name" :label="item.name" :value="item.id" v-for="item in circleList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="免费章节" prop="noneChapter">
|
||||
<el-input placeholder="请输入免费章节" v-model.number="dialogForm.noneChapter" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg('coverImg', $event)" :img="dialogForm.coverImg"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="背景图">
|
||||
<UploadImg @onRemove="onRemove('backgroundImg')" @changeImgUrl="changeCoverImg('backgroundImg', $event)" :img="dialogForm.backgroundImg"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="人物图">
|
||||
<UploadImg @onRemove="onRemove('characterImg')" @changeImgUrl="changeCoverImg('characterImg', $event)" :img="dialogForm.characterImg"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="章节数量">
|
||||
<el-input placeholder="请输入章节数量" v-model.number="dialogForm.chapterCount" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="最新章节">
|
||||
<el-input placeholder="请输入最新章节" v-model.number="dialogForm.newChapter" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="售价">
|
||||
<el-input placeholder="请输入售价" v-model.number="dialogForm.price" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画上架状态">
|
||||
<el-select placeholder="请选择漫画上架状态" v-model="dialogForm.status">
|
||||
<el-option label="上架" :value="1" />
|
||||
<el-option label="下架" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画更新状态">
|
||||
<el-select placeholder="请选择漫画更新状态" v-model="dialogForm.updateStatus">
|
||||
<el-option label="待发布" :value="0" />
|
||||
<el-option label="连载中" :value="1" />
|
||||
<el-option label="已完结" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="dialogForm.desc" type="textarea" style="width: 520px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="背景颜色">
|
||||
<el-color-picker v-model="dialogForm.backgroundColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template v-for="(item, index) in dialogForm.roleList">
|
||||
<el-row :key="index" :gutter="10" style="background: #efe4d2; padding: 5px 0; margin: 5px 0">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="CV">
|
||||
<el-select placeholder="请选择CvId" v-model="item.comicsCvId">
|
||||
<el-option :label="item.name" :value="item.id" v-for="(item, index) in resData" :key="index" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="配音角色">
|
||||
<el-input placeholder="请输入配音角色" v-model="item.roleName" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="4" :md="4" :sm="4" :xl="4" :xs="4">
|
||||
<el-button v-if="dialogForm.roleList.length === index + 1" type="succsees" size="mini" icon="el-icon-circle-plus-outline" @click="addSectionItem"> 新增节点 </el-button>
|
||||
<el-button type="danger" size="mini" style="margin: 5px 0" icon="el-icon-delete-solid" @click="delSectionItem(index)"> 删除节点 </el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button @click="submitForm('dialogForm')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { comicsAdd, comicsUpdate } from '@/api/comicsManagement/comics'
|
||||
import { comicLabelsList } from '@/api/comicsManagement/comicsTopic'
|
||||
import { comicsCvList } from '@/api/comicsManagement/comicsCV'
|
||||
import { changeMoneyYuan, changeMoneyFen, arryToString, stringToArry } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'circleList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
dialogForm: {
|
||||
author: undefined, // "string",漫画作者
|
||||
chapterCount: undefined, // 0,章节数量
|
||||
coverImg: undefined, // "string",封面
|
||||
desc: undefined, // "string",描述信息
|
||||
fake: {
|
||||
comments: undefined, // 0,评论条数
|
||||
likes: undefined, // 0,点赞次数
|
||||
sells: undefined, // 0,售卖次数
|
||||
shares: undefined, // 0,分享次数
|
||||
watchTimes: undefined // 0观看次数
|
||||
},
|
||||
isVip: undefined, // true,是否VIp
|
||||
isRecomend: undefined, // 是否精选
|
||||
newChapter: undefined, // 0,最新章节
|
||||
price: undefined, // 0,售价，单位分
|
||||
rank: undefined, // 0,排序
|
||||
status: undefined, // 0,漫画状态
|
||||
tags: [], // 0 漫画标签
|
||||
title: undefined, // string 标题
|
||||
topics: undefined, // 0 漫画话题
|
||||
updateStatus: undefined, // 漫画更新状态
|
||||
noneChapter: undefined, // 免费章节
|
||||
circleId: undefined,
|
||||
memberDayActivity: undefined, // 是否参与会员日活动
|
||||
roleList: [
|
||||
{
|
||||
comicsId: undefined,
|
||||
roleName: undefined
|
||||
}
|
||||
]
|
||||
},
|
||||
topicsList: this.$store.getters.comicsTopicList,
|
||||
labelList: [],
|
||||
rules: {
|
||||
// sort: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
resData: []
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.dialogForm = { ...this.data.data }
|
||||
if (!this.dialogForm.roleList.length) {
|
||||
this.dialogForm.roleList.push({
|
||||
comicsId: undefined,
|
||||
roleName: undefined
|
||||
})
|
||||
console.log(this.dialogForm, 'dialogForm')
|
||||
}
|
||||
this.dialogForm.price = changeMoneyYuan(this.dialogForm.price)
|
||||
this.dialogForm.author = arryToString(this.data.data.author)
|
||||
}
|
||||
this.getComicLabelsList()
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求漫画标签列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicsCvList({ pageNum: 1, pageSize: 50 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
addSectionItem() {
|
||||
this.dialogForm.roleList.push({
|
||||
comicsId: undefined,
|
||||
roleName: undefined
|
||||
})
|
||||
},
|
||||
delSectionItem(index) {
|
||||
this.dialogForm.roleList.splice(index, 1)
|
||||
},
|
||||
// TODO：请求漫画标签列表
|
||||
async getComicLabelsList() {
|
||||
console.log('tianjia1')
|
||||
this.labelList = this.title === '编辑' ? this.data.data.tagName : []
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
// pageSize: 500,
|
||||
status: true
|
||||
}
|
||||
comicLabelsList(param).then(res => {
|
||||
if (res.code === 200) {
|
||||
// if (this.title === '编辑') {
|
||||
// for (let tagindex = 0; tagindex < this.data.data.tagName.length; tagindex++) {
|
||||
// const tag = this.data.data.tagName[tagindex]
|
||||
// let e = 0
|
||||
// for (let index = 0; index < this.labelList.length; index++) {
|
||||
// const element = this.labelList[index]
|
||||
// if (element.id === tag.id) {
|
||||
// e = 1
|
||||
// }
|
||||
// }
|
||||
// if (e === 0) {
|
||||
// this.labelList.push(tag)
|
||||
// }
|
||||
// }
|
||||
// res.data.forEach(item => {
|
||||
// });
|
||||
// this.labelList = res.data
|
||||
// } else {
|
||||
// this.labelList = res.data
|
||||
// }
|
||||
this.labelList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:新增漫画列表数据
|
||||
comicsAddFun(data) {
|
||||
comicsAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:编辑漫画列表数据
|
||||
comicsUpdateFun(data) {
|
||||
comicsUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('编辑失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(key, data) {
|
||||
console.log(key, data)
|
||||
this.dialogForm[key] = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.dialogForm[data] = undefined
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.dialogForm))
|
||||
data.price = data.price ? changeMoneyFen(data.price) : 0
|
||||
data.author = stringToArry(data.author)
|
||||
data.circleId = data.circleId ? data.circleId : undefined
|
||||
if (this.title === '编辑') {
|
||||
this.comicsUpdateFun(data)
|
||||
} else {
|
||||
this.comicsAddFun(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-05-17 14:17:25
|
||||
* @LastEditTime: 2022-06-09 11:04:13
|
||||
* @LastEditors:
|
||||
* @FilePath: /comics-admin/src/views/comicsManagement/comics/components/EditCom.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :title="title" :visible.sync="Visible" @close="close" center class="ac-dialog" width="500px">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline" label-position="right" label-width="100px" ref="form">
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input v-model.number="form.userId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
|
||||
<el-form-item label="评论内容">
|
||||
<el-input v-model="form.text" type="textarea" style="width:300px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible=false">取 消</el-button>
|
||||
<el-button @click="submit('form')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { comicsAddComment } from '@/api/comicsManagement/comics'
|
||||
export default {
|
||||
name: 'EditCom',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
userId: undefined, // 用户id
|
||||
comicsId: undefined, //漫画ID
|
||||
text: undefined, //评论
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
this.form.comicsId = this.data.data.id
|
||||
},
|
||||
methods: {
|
||||
//TODO：添加评论
|
||||
submit(formName) {
|
||||
comicsAddComment(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('评论成功')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.error('评论失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-04-06 17:32:20
|
||||
* @LastEditTime: 2022-06-09 11:08:45
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @FilePath: /comics-admin/src/views/comicsManagement/comics/components/setTag.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画标签">
|
||||
<el-select placeholder="请选择漫画标题" v-model="form.tags" value-key="id" filterable multiple>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in labelList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { comicsAddTags } from '@/api/comicsManagement/comics'
|
||||
import { comicLabelsList } from '@/api/comicsManagement/comicsTopic'
|
||||
export default {
|
||||
name: 'SetTag',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
MediaSatusList: [],
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
tags: [] // 0 漫画标签
|
||||
},
|
||||
//
|
||||
rules: {},
|
||||
labelList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getComicLabelsList()
|
||||
},
|
||||
methods: {
|
||||
// TODO：请求漫画标签列表
|
||||
async getComicLabelsList() {
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
status: true
|
||||
}
|
||||
comicLabelsList(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.labelList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:批量增加漫画标签
|
||||
submit() {
|
||||
if (this.data.length) {
|
||||
const comicsIds = []
|
||||
this.data.forEach((item) => {
|
||||
comicsIds.push(item.id)
|
||||
})
|
||||
const param = {
|
||||
comicsIds: comicsIds,
|
||||
tags: this.form.tags
|
||||
}
|
||||
comicsAddTags(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('增加标签成功')
|
||||
} else {
|
||||
this.$message.error('增加标签失败')
|
||||
}
|
||||
this.Visible = false
|
||||
})
|
||||
} else {
|
||||
this.$message.error('未选择视频')
|
||||
}
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules"
|
||||
ref="ruleForm" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画ID" prop="comicsId">
|
||||
<el-input v-model.number="form.comicsId" placeholder="请输入漫画ID" disabled style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="章节序列" prop="chapterNum">
|
||||
<el-input v-model.number="form.chapterNum" placeholder="请输入章节序列" style="width: 180px">
|
||||
<template slot="prepend">第</template>
|
||||
<template slot="append">话</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="章节标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入章节标题" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="章节页数" prop="pageNum">
|
||||
<el-input v-model.number="form.pageNum" placeholder="请输入章节页数" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-loading.fullscreen.lock="isAddReqLoading" element-loading-text="漫画添加中" :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="内容图片" label-width="655px" class="upLoadFormItem" style="text-align:center">
|
||||
<UploadComicsImgArrByOrder @changeImgUrl='changeImagesUrl' @setIsUploadIng='setIsUploadIng'
|
||||
:img='form.chapter'>
|
||||
</UploadComicsImgArrByOrder>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启"
|
||||
inactive-text="关闭"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="最新章节" prop="isNew">
|
||||
<el-switch v-model="form.isNew" active-color="#13ce66" inactive-color="#ff4949" active-text="最新"
|
||||
inactive-text="非最新"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="章节描述" prop="desc">
|
||||
<el-input placeholder="请输入章节描述" v-model="form.desc" type="textarea" style="width: 520px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
comicChapterAdd,
|
||||
comicChapterUpdate,
|
||||
} from '@/api/comicsManagement/comicChapter'
|
||||
import UploadComicsImgArrByOrder from '@/components/UploadComicsImgArrByOrder/index'
|
||||
export default {
|
||||
name: 'ChapterAddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadComicsImgArrByOrder,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
chapter: undefined, //[]内容图片
|
||||
chapterNum: undefined, // 0,第几章节
|
||||
comicsId: undefined, // 0,漫画ID
|
||||
desc: undefined, // "string",章节描述
|
||||
isNew: undefined, // true,是否为最新章节
|
||||
pageNum: undefined, // 0,章节页数
|
||||
status: undefined, // true,是否启用
|
||||
title: undefined, // "string",章节标题
|
||||
jmid: undefined, //漫画唯一标识
|
||||
},
|
||||
rules: {},
|
||||
isUploadIng: false,
|
||||
isAddReqLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
// this.form.jmid
|
||||
} else {
|
||||
this.form.jmid = this.data.data.jmid
|
||||
this.form.comicsId = this.data.data.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增漫画章节列表数据
|
||||
add(data) {
|
||||
if (this.isUploadIng) {
|
||||
this.$message('图片上传中,稍后尝试');
|
||||
|
||||
return false
|
||||
}
|
||||
if (this.isAddReqLoading) {
|
||||
this.$message('漫画添加中');
|
||||
return false
|
||||
}
|
||||
this.isAddReqLoading = true
|
||||
comicChapterAdd(data).then((res) => {
|
||||
// this.Visible = false
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
this.isAddReqLoading = false
|
||||
} else {
|
||||
this.isAddReqLoading = false
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.isAddReqLoading = false
|
||||
this.$message.error(error.message)
|
||||
})
|
||||
},
|
||||
//TODO：编辑漫画章节列表数据
|
||||
update(data) {
|
||||
comicChapterUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeImagesUrl(data) {
|
||||
this.form.chapter = data
|
||||
},
|
||||
setIsUploadIng(status) {
|
||||
this.isUploadIng = status
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.upLoadFormItem{
|
||||
label{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="漫画章节列表" :visible.sync="Visible" width="90%" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入章节名称" clearable v-model.trim="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否启用" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="展示顺序" clearable v-model="searchData.sort" @clear="onClear('sort')">
|
||||
<el-option label="正序" :value="true" />
|
||||
<el-option label="倒序" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getList" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="550" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="标题" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.comicsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="章节序列" width="80">
|
||||
<template slot-scope="scope">第{{ scope.row.chapterNum}}话</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="章节页数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.pageNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否最新章节" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isNew? 'success' : 'danger'" plain size="mini">{{ scope.row.isNew ? "最新" : "非最新" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否启用" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑
|
||||
</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="Visible = false"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<ChapterAddOrEdit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
comicChapterList,
|
||||
comicChapterDel,
|
||||
} from '@/api/comicsManagement/comicChapter'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import ChapterAddOrEdit from './chapterAddOrEdit.vue'
|
||||
|
||||
export default {
|
||||
name: 'ChapterList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
ShowImg,
|
||||
ChapterAddOrEdit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: undefined, //"string",
|
||||
status: undefined, // true
|
||||
id: undefined,
|
||||
sort: true,
|
||||
},
|
||||
resData: [],
|
||||
total: 0,
|
||||
loading: false, // 列表加载状态
|
||||
editVisible: false,
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.searchData.id = this.data.data.id
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求漫画章节列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicChapterList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除漫画章节列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
comicChapterDel({ comicsChapterId: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {
|
||||
id: this.data.data.id,
|
||||
jmid: this.data.data.jmid,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-04-06 17:32:20
|
||||
* @LastEditTime: 2022-06-09 11:08:45
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @FilePath: /comics-admin/src/views/comicsManagement/comics/components/setTag.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="400px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-form-item label="漫画主题">
|
||||
<el-select placeholder="请选择漫画主题" clearable v-model.number="form.topicId" filterable>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in data" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { comicsDelTags } from '@/api/comicsManagement/comics'
|
||||
export default {
|
||||
name: 'DelTag',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
MediaSatusList: [],
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
topicId: undefined,
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.data,'this.dat')
|
||||
},
|
||||
|
||||
methods: {
|
||||
// TODO:批量设置漫画主题
|
||||
submit() {
|
||||
|
||||
comicsDelTags(this.form).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除标签成功')
|
||||
} else {
|
||||
this.$message.error('删除标签失败')
|
||||
}
|
||||
this.Visible = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:请求漫画主题列表数据
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
<!--
|
||||
* @Author:
|
||||
* @Mail:
|
||||
* @Date: 2022-04-06 17:32:20
|
||||
* @LastEditTime: 2022-06-09 11:08:45
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @FilePath: /comics-admin/src/views/comicsManagement/comics/components/setTag.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画主题" prop="status">
|
||||
<el-select placeholder="请选择漫画主题" clearable v-model="form.topics" style="width: 180px" multiple filterable>
|
||||
<el-option v-for="item in MediaSatusList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="" prop="flag">
|
||||
<el-switch v-model="form.flag" active-text="增加" inactive-text="删除" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { comicsAddTopics } from '@/api/comicsManagement/comics'
|
||||
import { comicsTopicList } from '@/api/comicsManagement/comicsTopic'
|
||||
export default {
|
||||
name: 'SetTag',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
MediaSatusList: [],
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
topics: undefined,
|
||||
flag: true
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getComicsTopicList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:批量设置漫画主题
|
||||
submit() {
|
||||
if (this.data.length) {
|
||||
const comicsIds = []
|
||||
this.data.forEach((item) => {
|
||||
comicsIds.push(item.id)
|
||||
})
|
||||
const param = {
|
||||
comicsIds: comicsIds,
|
||||
flag: this.form.flag,
|
||||
topicsIds: this.form.topics
|
||||
}
|
||||
comicsAddTopics(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('设置标签成功')
|
||||
} else {
|
||||
this.$message.error('设置标签失败')
|
||||
}
|
||||
this.Visible = false
|
||||
})
|
||||
} else {
|
||||
this.$message.error('未选择视频')
|
||||
}
|
||||
},
|
||||
|
||||
// TODO:请求漫画主题列表数据
|
||||
getComicsTopicList(val) {
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
pageSize: 5000
|
||||
}
|
||||
comicsTopicList(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.MediaSatusList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求漫画主题列表失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,562 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画ID" clearable v-model.number="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画标题" clearable v-model.trim="searchData.title" @clear="onClear('title')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画作者" clearable v-model.trim="searchData.author" @clear="onClear('author')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画唯一标识" clearable v-model.trim="searchData.jmid" @clear="onClear('jmid')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择漫画上架状态" clearable v-model.number="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="待上架" :value="0" />
|
||||
<el-option label="上架" :value="1" />
|
||||
<el-option label="下架" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
placeholder="是否参与会员日活动"
|
||||
clearable
|
||||
v-model.number="searchData.memberDayActivity"
|
||||
@clear="onClear('memberDayActivity')">
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
placeholder="请选择漫画更新状态"
|
||||
clearable
|
||||
v-model.number="searchData.updateStatus"
|
||||
@clear="onClear('updateStatus')">
|
||||
<el-option label="待发布" :value="0" />
|
||||
<el-option label="连载中" :value="1" />
|
||||
<el-option label="已完结" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
placeholder="请选择漫画主题"
|
||||
clearable
|
||||
v-model.number="searchData.topicId"
|
||||
@clear="onClear('topicId')"
|
||||
filterable>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in topicIdList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画标签" clearable v-model.trim="searchData.tagStr" @clear="onClear('tagStr')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
placeholder="请选择漫画付费类型"
|
||||
clearable
|
||||
v-model="searchData.comicsPayType"
|
||||
@clear="onClear('comicsPayType')">
|
||||
<el-option label="免费" :value="0" />
|
||||
<el-option label="会员" :value="1" />
|
||||
<el-option label="金币" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="排序方式" clearable v-model.number="searchData.sort" @clear="onClear('sort')">
|
||||
<el-option label="上架时间" :value="0" />
|
||||
<el-option label="更新时间" :value="1" />
|
||||
<el-option label="观看次数排序" :value="2" />
|
||||
<el-option label="收藏次数排序" :value="3" />
|
||||
<el-option label="章节数量排序" :value="4" />
|
||||
<el-option label="图片数量排序" :value="5" />
|
||||
<el-option label="虚假观看数排序" :value="6" />
|
||||
<el-option label="周观看次数" :value="7" />
|
||||
<el-option label="月观看次数" :value="8" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="handleAdd()" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getData" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
<el-button @click="setTag" icon="el-icon-edit-outline" plain type="warning">批量设置主题</el-button>
|
||||
<el-button @click="setTags" icon="el-icon-edit-outline" plain type="warning">批量添加标签</el-button>
|
||||
<!-- <el-button @click="delTheme" icon="el-icon-edit-outline" plain type="warning">一键移除漫画主题</el-button> -->
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
height="750"
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
:row-style="{ height: '70px' }">
|
||||
<el-table-column type="selection" width="50" fixed="left"> </el-table-column>
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="唯一标识">
|
||||
<template slot-scope="scope">{{ scope.row.jmid }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画标题" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画作者" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(item, index) in scope.row.author" :key="index">{{ item }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="章节数量">
|
||||
<template slot-scope="scope">{{ scope.row.chapterCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="最新章节">
|
||||
<template slot-scope="scope">{{ scope.row.chapterCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="页数">
|
||||
<template slot-scope="scope">{{ scope.row.pageCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售价">
|
||||
<template slot-scope="scope">{{ scope.row.price | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="免费章节">
|
||||
<template slot-scope="scope">{{ scope.row.noneChapter }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="周观看次数">
|
||||
<template slot-scope="scope">{{ scope.row.weekWatchTimes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="月观看次数">
|
||||
<template slot-scope="scope">{{ scope.row.monthWatchTimes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="最后观看时间">
|
||||
<template slot-scope="scope">{{ scope.row.lastWatchTime | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.coverImg">
|
||||
</ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="背景图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg
|
||||
style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px"
|
||||
:urls="scope.row.backgroundImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="人物图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg
|
||||
style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px"
|
||||
:urls="scope.row.characterImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center " label="字体颜色">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ backgroundColor: '#' + scope.row.backGroupImage }">
|
||||
{{ scope.row.backGroupImage }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述信息" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否VIP" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isVip ? 'success' : 'danger'" plain size="mini">{{ scope.row.isVip ? "VIP" :
|
||||
"非VIP" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上架状态">
|
||||
<template slot-scope="scope">{{ scope.row.status | changeStatus }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上架时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.addedTime | BeiJingTime2 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新状态">
|
||||
<template slot-scope="scope">{{ scope.row.updateStatus | changeUpdateStatus }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画主题" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :key="index" v-for="(item, index) in scope.row.topics" type="success">{{
|
||||
item | changeName(topicIdList, 'id', 'name') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画标签" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :key="index" v-for="(item, index) in scope.row.tagName" type="success">{{ item.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="配音角色" width="300">
|
||||
<template slot-scope="scope">
|
||||
<template>
|
||||
<el-table :data="scope.row.roleList" max-height="200" border style="width: 100%">
|
||||
<el-table-column align="center" prop="comicsCvId" label="CV-id" width="135">
|
||||
<template slot-scope="scopes">{{
|
||||
scopes.row.comicsCvId
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="roleName" label="配音角色" width="135">
|
||||
<template slot-scope="scopes">{{
|
||||
scopes.row.roleName
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="真实信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.real.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.real.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.real.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.real.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.real.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="虚拟信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="450">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onAddComment(scope.row)" size="mini" type="success">添加评论</el-button>
|
||||
<el-button @click="showChapterList(scope.$index, scope.row)" size="mini" type="primary">查看章节列表</el-button>
|
||||
<el-button @click="topComics(scope.$index, scope.row)" size="mini" type="success">最新置顶</el-button>
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增/编辑弹出框 -->
|
||||
<Edit :data="editData" v-if="dialogFormVisible" @close="closeEdit" :circleList="circleList"></Edit>
|
||||
<ChapterList :data="editData" v-if="chapterListVisible" @close="closeEdit" />
|
||||
<SetTag :data="selectBatch" v-if="setTagVisible" @close="closeEdit"></SetTag>
|
||||
<DelTag :data="topicIdList" v-if="delThemeVisible" @close="closeEdit"></DelTag>
|
||||
<EditCom :data="editData" v-if="editComVisible" :objectype="5" @close="closeEdit" />
|
||||
<AddTags :data="selectBatch" v-if="tagsVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
comicsList,
|
||||
comicsDel,
|
||||
comicsNewOne
|
||||
} from '@/api/comicsManagement/comics'
|
||||
import { comicsTopicList } from '@/api/comicsManagement/comicsTopic'
|
||||
import { comicsTagList } from '@/api/comicsManagement/comicsTag'
|
||||
import { circleListSearch } from '@/api/user/circleList'
|
||||
import ChapterList from './components/chapterList'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import Edit from './components/AddOrEdit'
|
||||
import SetTag from './components/setTag'
|
||||
import DelTag from './components/delTag'
|
||||
import EditCom from '@/views/videoManagement/videoList/components/videoComment.vue'
|
||||
import AddTags from './components/addTags'
|
||||
export default {
|
||||
name: 'Comics',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
ChapterList,
|
||||
SetTag,
|
||||
EditCom,
|
||||
AddTags,
|
||||
DelTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
id: undefined,
|
||||
status: undefined, // 激活状态
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
comicsPayType: undefined, // true 是否VIp
|
||||
sort: undefined, // integer 排序，0创建时间，1rank排序，2观看数量排序，3收藏数量排序
|
||||
tagId: undefined, // integer 标签
|
||||
title: undefined, // "string",标题
|
||||
topicId: undefined, // integer 主题
|
||||
author: undefined, // 漫画作者
|
||||
tagStr: undefined,
|
||||
memberDayActivity: undefined
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialogFormVisible: false,
|
||||
chapterListVisible: false,
|
||||
editComVisible: false, // 评论弹出框
|
||||
setTagVisible: false,
|
||||
tagsVisible: false, // 批量添加标签
|
||||
delThemeVisible: false,
|
||||
|
||||
editData: {},
|
||||
topicIdList: [],
|
||||
tagIdList: [],
|
||||
selectBatch: [],
|
||||
circleList: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
changeStatus(val) {
|
||||
switch (val) {
|
||||
case 0:
|
||||
return '待上架'
|
||||
case 1:
|
||||
return '上架'
|
||||
case 2:
|
||||
return '取消上架'
|
||||
case 3:
|
||||
return '待审核'
|
||||
case 4:
|
||||
return '拒绝'
|
||||
}
|
||||
},
|
||||
changeUpdateStatus(val) {
|
||||
switch (val) {
|
||||
case 0:
|
||||
return '待发布'
|
||||
case 1:
|
||||
return '连载中'
|
||||
case 2:
|
||||
return '已完结'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// this.getComicsTagList()
|
||||
this.getComicsTopicList()
|
||||
await this.getData()
|
||||
// this.getCircleListSearch()
|
||||
},
|
||||
methods: {
|
||||
// TODO：请求漫画主题列表数据
|
||||
getComicsTopicList() {
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
status: true
|
||||
}
|
||||
comicsTopicList(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.topicIdList = res.data.list
|
||||
this.$store.dispatch('comics/setComicsTopicList', res.data.list)
|
||||
} else {
|
||||
this.topicIdList = []
|
||||
this.$store.dispatch('comics/setComicsTopicList', [])
|
||||
this.$message.error('请求漫画主题列表失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:请求漫画标签列表数据
|
||||
getComicsTagList() {
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
}
|
||||
comicsTagList(param).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tagIdList = res.data.list
|
||||
this.$store.dispatch('comics/setComicsTagList', res.data.list)
|
||||
} else {
|
||||
this.tagIdList = []
|
||||
this.$store.dispatch('comics/setComicsTagList', [])
|
||||
this.$message.error('请求漫画标签列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:请求漫画列表数据
|
||||
getData() {
|
||||
comicsList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求漫画列表数据失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:漫画置顶
|
||||
topComics(index, row) {
|
||||
comicsNewOne({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('置顶成功')
|
||||
} else {
|
||||
this.$message.error('置顶失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除漫画列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
comicsDel({ comicsId: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getData({ pageNum: 1 }) // 刷新商品列表
|
||||
this.$message.success('删除成功')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:请求圈子列表数据
|
||||
getCircleListSearch() {
|
||||
circleListSearch({ pageNum: 1, pageSize: 5000 }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.circleList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求圈子列表失败!')
|
||||
this.circleList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.getData()
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.selectBatch = val
|
||||
},
|
||||
setTag() {
|
||||
this.setTagVisible = true
|
||||
},
|
||||
setTags() {
|
||||
this.tagsVisible = true
|
||||
},
|
||||
delTheme() {
|
||||
this.delThemeVisible = true
|
||||
},
|
||||
showChapterList(index, row) {
|
||||
this.editData = {
|
||||
title: '视频列表',
|
||||
type: 3,
|
||||
data: row
|
||||
}
|
||||
this.chapterListVisible = true
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleAdd() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editComVisible = false
|
||||
this.setTagVisible = false
|
||||
this.delThemeVisible = false
|
||||
this.dialogFormVisible = false
|
||||
this.chapterListVisible = false
|
||||
this.tagsVisible = false
|
||||
this.getData()
|
||||
},
|
||||
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换每页显示的条数触发
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换页码时触发
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
onAddComment(row) {
|
||||
this.editData = {
|
||||
title: '添加评论',
|
||||
data: row
|
||||
}
|
||||
this.editComVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="90px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @onRemove="onRemove('avatar')" @changeImgUrl="changeCoverImg" :img="form.avatar">
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="配音漫画数" prop="comicsCount">
|
||||
<el-input v-model.number="form.comicsCount" placeholder="请输入配音漫画数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="CV名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入标签名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="收藏次数" prop="likeCount">
|
||||
<el-input v-model.number="form.likeCount" placeholder="请输入收藏次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="推荐排序" prop="recommentRank">
|
||||
<el-input v-model.number="form.recommentRank" placeholder="请输入推荐排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="观看次数" prop="watchCount">
|
||||
<el-input v-model.number="form.watchCount" placeholder="请输入观看数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否推荐" prop="recomment">
|
||||
<el-switch v-model="form.recomment" active-color="#13ce66" inactive-color="#ff4949" active-text="推荐" inactive-text="不推荐"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { comicsCvAdd, comicsCvUpdate } from '@/api/comicsManagement/comicsCV'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
avatar: undefined, // 头像
|
||||
comicsCount: undefined, // "string",
|
||||
name: undefined, // "string",
|
||||
likeCount: undefined, // 0,
|
||||
rank: undefined, // true,
|
||||
recomment: undefined, // 0
|
||||
recommentRank: undefined,
|
||||
status: undefined,
|
||||
watchCount: undefined,
|
||||
desc: undefined
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(data) {
|
||||
comicsCvAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
update(data) {
|
||||
comicsCvUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.avatar = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入CVID" clearable v-model.number="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入CV名称" clearable v-model.trim="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否启用" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="排序方式" clearable v-model.number="searchData.sort" @clear="onClear('sort')">
|
||||
<el-option label="rank排序" :value="0" />
|
||||
<el-option label="推荐排序" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getList" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="表ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="CV名称" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="CV头像">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.avatar"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看次数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.watchCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否展示" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.status ? '展示' : '不展示'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑
|
||||
</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { comicsCvList, comicsCvDel } from '@/api/comicsManagement/comicsCV'
|
||||
|
||||
export default {
|
||||
name: 'ComicsTag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
name: undefined, //"string",
|
||||
status: undefined, // true
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: false, // 列表加载状态
|
||||
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求漫画CV列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicsCvList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除漫画标签列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
comicsCvDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 50
|
||||
this.getList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="分类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="name">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="广告模式" prop="advertisingId">
|
||||
<el-select placeholder="请选择广告模式" clearable v-model="form.adsType" filterable>
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in videoTypeMode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="广告模式" prop="advertisingId">
|
||||
<el-select placeholder="请选择广告模式" clearable v-model="form.newAdsType" filterable>
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in videoNewTypeMode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="广告ID" prop="advertisingId">
|
||||
<el-input v-model.number="form.advertisingId" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="展示类型">
|
||||
<el-select placeholder="请选择展示方式" clearable v-model="form.showType">
|
||||
<el-option label="主题列表" :value="1" />
|
||||
<el-option label="推荐" :value="2" />
|
||||
<el-option label="每日精选" :value="3" />
|
||||
<el-option label="单行本" :value="4" />
|
||||
<el-option label="最新" :value="5" />
|
||||
<el-option label="会员日" :value="6" />
|
||||
<el-option label="标签模式" :value="7" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标签" prop="tagIds">
|
||||
<el-input v-model="form.tagIds" placeholder="请用，分割" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
comicsCategoryAdd,
|
||||
comicsCategoryUpdate
|
||||
} from '@/api/comicsManagement/comicsCategory'
|
||||
import { numberToArry, arryToString } from '@/filters/index'
|
||||
import { videoNewTypeMode } from '@/filters/videoManagement/videoType'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
videoNewTypeMode: videoNewTypeMode(),
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
advertisingId: undefined, // 0,广告ID
|
||||
desc: undefined, // "string",描述信息
|
||||
name: undefined, // "string",分类名
|
||||
rank: undefined, // 0,排序
|
||||
status: undefined, // true,是否启用
|
||||
tagIds: []
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
const tagIds = []
|
||||
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
this.data.data.tagStrList.forEach((item) => {
|
||||
tagIds.push(item.id)
|
||||
})
|
||||
}
|
||||
this.$set(this.form, 'tagIds', arryToString(tagIds))
|
||||
},
|
||||
methods: {
|
||||
// TODO:新增漫画分类列表数据
|
||||
add(data) {
|
||||
comicsCategoryAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑漫画分类列表数据
|
||||
update(data) {
|
||||
comicsCategoryUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.tagIds = numberToArry(data.tagIds)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入分类名称" clearable v-model.trim="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否启用" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getList" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table
|
||||
:data="resData"
|
||||
element-loading-text="拼命加载中"
|
||||
border
|
||||
height="750"
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
v-loading="loading">
|
||||
<el-table-column align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.rank
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.id
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分类名称">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.name
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否启用" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.status ? '已开启' : '已关闭' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述信息" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.desc
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="展示类型" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.showType | changeshowType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标签">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:key="index + 'tagData'"
|
||||
style="margin: 2px"
|
||||
v-for="(item, index) in scope.row.tagStrList"
|
||||
size="mini">
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="广告模式" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.adsType | changeVideoTypeMode }}</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="广告模式" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.newAdsType | changeVideoNewTypeMode }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import {
|
||||
comicsCategoryList,
|
||||
comicsCategoryDel
|
||||
} from '@/api/comicsManagement/comicsCategory'
|
||||
export default {
|
||||
name: 'ComicsCategory',
|
||||
components: {
|
||||
Edit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
name: undefined, // "string",
|
||||
status: undefined // true
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: false, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
changeshowType(val) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '主题列表'
|
||||
case 2:
|
||||
return '推荐'
|
||||
case 3:
|
||||
return '每日精选'
|
||||
case 4:
|
||||
return '单行本'
|
||||
case 5:
|
||||
return '最新'
|
||||
case 6:
|
||||
return '会员日'
|
||||
case 7:
|
||||
return '标签模式'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求漫画分类列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicsCategoryList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除漫画分类列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
comicsCategoryDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="推荐名称">
|
||||
<el-input v-model="form.name" placeholder="请输入推荐名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画ID">
|
||||
<el-input v-model.number="form.comicId" placeholder="请输入漫画ID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型">
|
||||
<el-select placeholder="请选择类型" v-model="form.greatestType" filterable allow-create default-first-option style="width:163px">
|
||||
<el-option label="氪金NO.1" :value="1" />
|
||||
<el-option label="精选必读" :value="2" />
|
||||
<el-option label="万人追捧" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="背景图">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg" :img="form.backgroundImg" style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="人物图">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeFigureImg" :img="form.figureImg" style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import {
|
||||
comicsDayrecommendAdd,
|
||||
comicsDayrecommendUpdate
|
||||
} from '@/api/comicsManagement/comicsDayRecommend'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
comicId: undefined, // 漫画ID
|
||||
status: true, // true, 状态
|
||||
name: undefined, // "string",
|
||||
rank: undefined, // 0,排序
|
||||
greatestType: undefined, // 0,展示方式
|
||||
desc: undefined, // "string",//描述
|
||||
backgroundImg: undefined, // 'string',封面
|
||||
figureImg: undefined// 人物图
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// TODO:新增漫画主题列表数据
|
||||
add(data) {
|
||||
comicsDayrecommendAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑漫画主题列表数据
|
||||
update(data) {
|
||||
comicsDayrecommendUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const param = JSON.parse(JSON.stringify(this.form))
|
||||
param.rank = param.rank ? Number(param.rank) : 0
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
const data = {
|
||||
id: param.id,
|
||||
param: param
|
||||
}
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.backgroundImg = data
|
||||
},
|
||||
changeFigureImg(data) {
|
||||
this.form.figureImg = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="150" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.greatestType|changeGreatestType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画ID" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.comicId }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="背景图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.backgroundImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="人物图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.figureImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import {
|
||||
comicsDayrecommendList,
|
||||
comicsDayrecommendDel
|
||||
} from '@/api/comicsManagement/comicsDayRecommend'
|
||||
export default {
|
||||
name: 'ComicsTopic',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
filters: {
|
||||
changeGreatestType(item) {
|
||||
switch (item) {
|
||||
case 1:
|
||||
return '氪金NO.1'
|
||||
case 2:
|
||||
return '精选必读'
|
||||
case 3:
|
||||
return '万人追捧'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
categoryIdList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getDayrecommend()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// TODO：请求漫画主题列表数据
|
||||
getDayrecommend() {
|
||||
this.loading = true
|
||||
comicsDayrecommendList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求主题列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除漫画主题列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
comicsDayrecommendDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getDayrecommend()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getDayrecommend()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getDayrecommend()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标签名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入标签名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="观看数" prop="watchTimes">
|
||||
<el-input v-model.number="form.watchTimes" placeholder="请输入观看数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { comicsTagAdd, comicsTagUpdate } from '@/api/comicsManagement/comicsTag'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
cover: undefined, //"string",
|
||||
name: undefined, //"string",
|
||||
rank: undefined, //0,
|
||||
status: undefined, // true,
|
||||
watchTimes: undefined, // 0
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(data) {
|
||||
comicsTagAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
update(data) {
|
||||
comicsTagUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入标签ID" clearable v-model.number="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入标签名称" clearable v-model.trim="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否启用" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="排序方式" clearable v-model.number="searchData.sort" @clear="onClear('sort')">
|
||||
<el-option label="rank排序" :value="0" />
|
||||
<el-option label="观看次数排序" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getList" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="标签ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标签名称" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="标签排序" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="标签封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="观看次数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否展示" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.status ? '展示' : '不展示'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑
|
||||
</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { comicsTagList, comicsTagDel } from '@/api/comicsManagement/comicsTag'
|
||||
|
||||
export default {
|
||||
name: 'ComicsTag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
name: undefined, //"string",
|
||||
status: undefined, // true
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: false, // 列表加载状态
|
||||
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求漫画标签列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicsTagList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除漫画标签列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
comicsTagDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 50
|
||||
this.getList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="主题名称">
|
||||
<el-input v-model="form.name" placeholder="请输入主题名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="展示顺序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="主题列表排序">
|
||||
<el-input v-model.number="form.topicRank" placeholder="请输入主题列表排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="分类">
|
||||
<el-select placeholder="请选择分类" v-model="form.categoryId" filterable allow-create default-first-option style="width: 163px">
|
||||
<el-option :key="item.value" :label="item.name" :value="item.id" v-for="item in categoryIdList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="封面">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg" :img="form.coverImg" style="border: 1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画数量">
|
||||
<el-input v-model.number="form.comicsCount" placeholder="请输入漫画数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="合集价格">
|
||||
<el-input v-model="form.price" placeholder="请输入合集价格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="售卖次数">
|
||||
<el-input v-model.number="form.sells" placeholder="请输入售卖次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="展示方式">
|
||||
<el-select placeholder="请选择展示方式" v-model="form.showType" style="width: 163px">
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in comicsTopicshowTypeList" :key="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.showType === 6">
|
||||
<el-form-item label="其他主题">
|
||||
<el-select placeholder="请选择其他主题" v-model="form.topicIds" multiple>
|
||||
<el-option :label="item.name" :value="item.id" v-for="item in topicIdsList" :key="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="观看次数">
|
||||
<el-input v-model.number="form.watchTimes" placeholder="请输入观看次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="filter">
|
||||
<el-input v-model="form.filter" placeholder="请输入filter" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启首页随机功能">
|
||||
<el-switch v-model="form.isHomeRandom" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="合集主题">
|
||||
<el-switch v-model="form.isTopicGather" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标签绑定">
|
||||
<el-select placeholder="请选择标签" multiple v-model="form.tagIds" clearable filterable>
|
||||
<el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in allTags" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="主题展示方式" label-width="100px">
|
||||
<el-select placeholder="请选择主题展示模式" v-model="form.bindType" filterable allow-create default-first-option>
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in bindTypeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="主题描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入主题描述" style="width: 520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { comicsTopicshowTypeList } from '@/filters/comicsManagement/comicsTopic'
|
||||
import { comicsTopicAdd, comicsTopicUpdate, comicsTopicList } from '@/api/comicsManagement/comicsTopic'
|
||||
import { comicsTagList } from '@/api/comicsManagement/comicsTag'
|
||||
import { bindTypeList } from '@/filters/videoManagement/topic'
|
||||
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bindTypeList: bindTypeList(),
|
||||
Visible: true,
|
||||
title: '',
|
||||
comicsTopicshowTypeList: comicsTopicshowTypeList(),
|
||||
allTags: [],
|
||||
// 表单数据
|
||||
form: {
|
||||
categoryId: undefined, // 分类ID
|
||||
name: undefined, // "string",
|
||||
rank: undefined, // 0,排序
|
||||
showType: undefined, // 0,展示方式
|
||||
status: true, // true, 状态
|
||||
desc: undefined, // "string",//描述
|
||||
watchTimes: undefined, // 0 观看次数
|
||||
filter: undefined,
|
||||
topicRank: undefined, // 主题列表排序
|
||||
topicIds: [], // 请选择其他主题
|
||||
isTopicGather: undefined,
|
||||
isHomeRandom: undefined,
|
||||
comicsCount: undefined, // 0,漫画数量
|
||||
coverImg: undefined, // 'string',封面
|
||||
price: undefined, // 0,合集价格
|
||||
sells: undefined, // 0,售卖次数
|
||||
bindType: undefined, // 主题展示方式
|
||||
tagIds: []
|
||||
},
|
||||
categoryIdList: this.$store.getters.comicsCategoryList,
|
||||
topicIdsList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getComicsTagList()
|
||||
this.title = this.data.title
|
||||
this.getTopicSearch()
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
this.form.price = changeMoneyYuan(this.data.data.price)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求主题列表
|
||||
getTopicSearch() {
|
||||
comicsTopicList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
isTopicGather: true
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.topicIdsList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求主题列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:新增漫画主题列表数据
|
||||
add(data) {
|
||||
comicsTopicAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑漫画主题列表数据
|
||||
update(data) {
|
||||
comicsTopicUpdate(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 请求漫画标签列表
|
||||
getComicsTagList() {
|
||||
comicsTagList({
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
name: undefined, // "string",
|
||||
status: undefined // true
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.allTags = res.data.list
|
||||
} else {
|
||||
this.allTags = []
|
||||
this.$message.error('请求标签列表数据失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const param = JSON.parse(JSON.stringify(this.form))
|
||||
param.rank = param.rank ? Number(param.rank) : 0
|
||||
param.price = changeMoneyFen(param.price)
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(param)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.coverImg = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,275 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入ID" clearable v-model.number="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入主题名" clearable v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择漫画分类" clearable v-model="searchData.categoryId" @clear="onClear('categoryId')" filterable allow-create default-first-option>
|
||||
<el-option v-for="item in categoryIdList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择排序类型" clearable v-model="searchData.sort" @clear="onClear('sort')" filterable allow-create default-first-option>
|
||||
<el-option label="rank排序" :value="0" />
|
||||
<el-option label="创建时间" :value="1" />
|
||||
<el-option label="观看数量" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择状态" clearable v-model="searchData.status" @clear="onClear('status')" filterable allow-create default-first-option>
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否合集主题" clearable v-model="searchData.isTopicGather" @clear="onClear('isTopicGather')" filterable allow-create default-first-option>
|
||||
<el-option label="合集主题" :value="true" />
|
||||
<el-option label="未合集主题" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="主题ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="主题列表排序">
|
||||
<template slot-scope="scope">{{ scope.row.topicRank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="APP展示顺序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分类">
|
||||
<template slot-scope="scope">{{ scope.row.categoryId | changeName(categoryIdList, 'id', 'name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="主题名称" width="150" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="主题描述" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="封面">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.coverImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="展示方式">
|
||||
<template slot-scope="scope">{{ scope.row.showType | changComicsTopicshowType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="主题状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '已启用' : '未启用' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否开启首页随机功能" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isHomeRandom ? 'success' : 'danger'" plain size="mini">{{ scope.row.isHomeRandom ? '开启' : '关闭' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="filter" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.filter }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="漫画数量" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.comicsCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="合集价格" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.price | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.sells }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt | BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-size="searchData.pageSize"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { comicsTopicList, comicsTopicDel } from '@/api/comicsManagement/comicsTopic'
|
||||
import { comicsCategoryList } from '@/api/comicsManagement/comicsCategory'
|
||||
export default {
|
||||
name: 'ComicsTopic',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
categoryId: undefined,
|
||||
sort: undefined, // 0 排序，0rank排序，1创建时间，2观看数量
|
||||
status: undefined, // true 是否启用
|
||||
isTopicGather: undefined // 是否集合主题
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
categoryIdList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getTopicSearch()
|
||||
if (!this.$store.getters.comicsCategoryList.length) {
|
||||
this.getComicsCategory()
|
||||
} else {
|
||||
this.categoryIdList = this.$store.getters.comicsCategoryList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：请求漫画分类列表数据
|
||||
getComicsCategory() {
|
||||
const param = {
|
||||
pageNum: 1,
|
||||
pageSize: 500
|
||||
}
|
||||
comicsCategoryList(param).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.categoryIdList = res.data.list
|
||||
this.$store.dispatch('comics/setComicsCategoryList', res.data.list)
|
||||
} else {
|
||||
this.$message.error('请求漫画分类列表失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：请求漫画主题列表数据
|
||||
getTopicSearch() {
|
||||
this.loading = true
|
||||
comicsTopicList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求主题列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除漫画主题列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
comicsTopicDel({ id: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getTopicSearch()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getTopicSearch()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getTopicSearch()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getTopicSearch()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
console.log(row)
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getTopicSearch()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getTopicSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="90px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画id" prop="comicsId">
|
||||
<el-input v-model.number="form.comicsId" placeholder="请输入漫画id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="视频id" prop="mediaId">
|
||||
<el-input v-model.number="form.mediaId" placeholder="请输入视频id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="第几集" prop="num">
|
||||
<el-input v-model.number="form.num" placeholder="请输入第几集" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { comicsmediaAdd, comicsmediaUpdate } from '@/api/comicsManagement/comicsVideo'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
comicsId: undefined, // 漫画id
|
||||
mediaId: undefined, // 视频id,
|
||||
num: undefined, // 第几集,
|
||||
rank: undefined, // 排序,
|
||||
status: undefined // 是否启用
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(data) {
|
||||
comicsmediaAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
update(data) {
|
||||
comicsmediaUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.avatar = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入ID" clearable v-model.number="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画ID" clearable v-model.number="searchData.comicsId" @clear="onClear('comicsId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入视频ID" clearable v-model.number="searchData.mediaId" @clear="onClear('mediaId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择是否启用" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="未启用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="getList" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="漫画ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.comicsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="表ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="视频ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.mediaId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="第几集" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.num }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否展示" width="80">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.status ? '展示' : '不展示'
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="真实信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.real.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.real.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.real.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.real.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.real.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="虚拟信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑
|
||||
</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { comicsmediaList, comicsmediaDel } from '@/api/comicsManagement/comicsVideo'
|
||||
|
||||
export default {
|
||||
name: 'ComicsTag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
name: undefined, // "string",
|
||||
status: undefined // true
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: false, // 列表加载状态
|
||||
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求漫画标签列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
comicsmediaList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO：删除漫画标签列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
comicsmediaDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 50
|
||||
this.getList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="推荐名称">
|
||||
<el-input v-model="form.name" placeholder="请输入推荐名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="需要完成的任务">
|
||||
<el-select placeholder="请选择类型" v-model="form.taskIds" multiple filterable style="width:163px">
|
||||
<el-option v-for="item in taskList" :key="item.id" :value="item.id" :label="item.title"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画ID">
|
||||
<el-input v-model="form.comicIds" placeholder="请输入漫画ID" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型">
|
||||
<el-select placeholder="请选择类型" v-model="form.greatestType" filterable allow-create default-first-option style="width:163px">
|
||||
<el-option label="氪金NO.1" :value="1" />
|
||||
<el-option label="精选必读" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="form.starTime" type="datetime" placeholder="开始时间" style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24">
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="form.endTime" type="datetime" placeholder="结束时间" style="width: 180px"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss+08:00"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="背景颜色">
|
||||
<el-color-picker v-model="form.backgroundColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="背景图">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg" :img="form.backgroundImg" style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import moment from 'moment'
|
||||
|
||||
import {
|
||||
singleRecommendAdd,
|
||||
singleRecommendUpdate
|
||||
} from '@/api/comicsManagement/singleRecommend'
|
||||
import { arryToString, stringToArryNum } from '@/filters/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','taskList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
taskIds:[],
|
||||
comicIds: undefined, // 漫画ID
|
||||
status: true, // true, 状态
|
||||
name: undefined, // "string",
|
||||
rank: undefined, // 0,排序
|
||||
greatestType: undefined, // 0,展示方式
|
||||
desc: undefined, // "string",//描述
|
||||
starTime:undefined,
|
||||
endTime:undefined,
|
||||
backgroundImg: undefined, // 'string',封面
|
||||
backgroundColor:undefined, //背景色
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
this.form.comicIds = arryToString(this.data.data.comicIds)
|
||||
this.form.starTime =
|
||||
moment(this.data.data.starTime)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
this.form.endTime =
|
||||
moment(this.data.data.endTime)
|
||||
.utcOffset(480)
|
||||
.format('YYYY-MM-DDTHH:mm:ss') + '+08:00'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// TODO:新增漫画主题列表数据
|
||||
add(data) {
|
||||
singleRecommendAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑漫画主题列表数据
|
||||
update(data) {
|
||||
singleRecommendUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const param = JSON.parse(JSON.stringify(this.form))
|
||||
param.rank = param.rank ? Number(param.rank) : 0
|
||||
param.comicIds = stringToArryNum(this.form.comicIds)
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
const data = {
|
||||
id: param.id,
|
||||
param: param
|
||||
}
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.backgroundImg = data
|
||||
},
|
||||
changeFigureImg(data) {
|
||||
this.form.figureImg = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="150" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="类型" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.greatestType|changeGreatestType }}</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="漫画ID" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.comicIds }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="需要完成的任务id" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="item in scope.row.taskIds">
|
||||
{{ item | changeName(taskList,'id','title') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="背景图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.backgroundImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已启用" : "未启用" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="300" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :taskList="taskList" :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import {
|
||||
singleRecommendList,
|
||||
singleRecommendDel
|
||||
} from '@/api/comicsManagement/singleRecommend'
|
||||
import { noviceTaskSearch } from '@/api/activity/noviceTaskCfg'
|
||||
export default {
|
||||
name: 'ComicsTopic',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
filters: {
|
||||
changeGreatestType(item) {
|
||||
switch (item) {
|
||||
case 1:
|
||||
return '氪金NO.1'
|
||||
case 2:
|
||||
return '精选必读'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
},
|
||||
categoryIdList: [],
|
||||
taskList:[]
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.onSearchTaskList()
|
||||
this.getDayrecommend()
|
||||
},
|
||||
methods: {
|
||||
// TODO:获取任务配置列表数据
|
||||
onSearchTaskList() {
|
||||
noviceTaskSearch({ pageNum: 1, pageSize: 500, param: {} }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.taskList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求任务配置列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：请求漫画主题列表数据
|
||||
getDayrecommend() {
|
||||
this.loading = true
|
||||
singleRecommendList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.$message.error('请求主题列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：删除漫画主题列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
singleRecommendDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getDayrecommend()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getDayrecommend()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getDayrecommend()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getDayrecommend()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="900px" center class="ac-dialog" :close-on-click-modal="false"
|
||||
@close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px"
|
||||
label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="漫画id">
|
||||
<el-input v-model.number="form.comicsId" placeholder="漫画id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="选集ID">
|
||||
<el-select placeholder="请选择选集ID" v-model="form.episode" clearable>
|
||||
<el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in vComicsEplicodeList" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="背景图">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeCoverImg" :img="form.backGroupImage"
|
||||
style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="人物图">
|
||||
<UploadImg @onRemove="onRemove('coverImg')" @changeImgUrl="changeFigureImg" :img="form.figureImg"
|
||||
style="border:1px dashed gray"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="展示顺序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="启用状态" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="类型">
|
||||
<el-select placeholder="请选择类型" v-model="form.greatestType" filterable allow-create default-first-option
|
||||
style="width:163px">
|
||||
<el-option label="氪金NO.1" :value="1" />
|
||||
<el-option label="精选必读" :value="2" />
|
||||
<el-option label="万人追捧" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="虚拟观看次数">
|
||||
<el-input v-model.number="form.fake.watchTimes" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="虚拟点赞次数">
|
||||
<el-input v-model.number="form.fake.likes" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="虚拟评论数">
|
||||
<el-input v-model.number="form.fake.comments" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="虚拟售卖数">
|
||||
<el-input v-model.number="form.fake.sells" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="虚拟分享数">
|
||||
<el-input v-model.number="form.fake.shares" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
|
||||
import {
|
||||
comicsmediaAdd,
|
||||
comicsmediaUpdate
|
||||
// topicMediaTop,
|
||||
} from '@/api/comicsManagement/comicsVideo.js'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'vComicsEplicodeList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
topicList: [], // 主题列表
|
||||
// 表单数据
|
||||
form: {
|
||||
name: undefined, // "string",
|
||||
rank: undefined, // 0,排序
|
||||
status: true, // true, 状态
|
||||
comicsId: undefined,
|
||||
comicstopicId: undefined,
|
||||
episode: undefined,
|
||||
backGroupImage: undefined,
|
||||
figureImg: undefined,
|
||||
greatestType: undefined,
|
||||
fake: {},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = JSON.parse(JSON.stringify(this.data.data))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
// TODO:新增漫画主题列表数据
|
||||
add(data) {
|
||||
comicsmediaAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:编辑漫画主题列表数据
|
||||
update(data) {
|
||||
comicsmediaUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCoverImg(data) {
|
||||
this.form.backGroupImage = data
|
||||
},
|
||||
changeFigureImg(data) {
|
||||
this.form.figureImg = data
|
||||
},
|
||||
onRemove(data) {
|
||||
this.form[data] = undefined
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const param = JSON.parse(JSON.stringify(this.form))
|
||||
|
||||
if (this.title === '新增') {
|
||||
this.add(param)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(param)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,305 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入漫画id" clearable v-model.number="searchData.comicsId" @clear="onClear('mediaId')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入选集ID" clearable v-model.number="searchData.episode" @clear="onClear('mediaId')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="getcomicsmediaList" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" border height="700px" style="width: 100%" highlight-current-row>
|
||||
<el-table-column align="center" label="id" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画id" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.comicsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="选集ID" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.episode | changeName(vComicsEplicodeList, 'id', 'name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画名称" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.comicsName }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="类型" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.greatestType|changeGreatestType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="漫画封面" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg :urls="scope.row.comicsCover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="背景图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.backGroupImage"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="人物图">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto;line-height: 40px" :urls="scope.row.figureImg"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="真实信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.real.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.real.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.real.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.real.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.real.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="虚拟信息">
|
||||
<el-table-column align="center" label="评论数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.comments }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="点赞数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.likes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="售卖数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.sells }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="分享数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.shares }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观看数">
|
||||
<template slot-scope="scope">{{ scope.row.fake.watchTimes }}</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="eidtMedia(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
|
||||
<Edit :vComicsEplicodeList="vComicsEplicodeList" :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
comicsmediaList,
|
||||
comicsmediaDel
|
||||
// topicMediaTop,
|
||||
} from '@/api/comicsManagement/comicsVideo.js'
|
||||
import {
|
||||
mediaepisodeSearch
|
||||
|
||||
} from '@/api/videoManagement/mediagpisode'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import Edit from './components/editOrAdd.vue'
|
||||
export default {
|
||||
name: 'MediaList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
ShowImg,
|
||||
Edit,
|
||||
},
|
||||
filters: {
|
||||
changeGreatestType(item) {
|
||||
switch (item) {
|
||||
case 1:
|
||||
return '氪金NO.1'
|
||||
case 2:
|
||||
return '精选必读'
|
||||
case 3:
|
||||
return '万人追捧'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vComicsEplicodeList: [],
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mediaId: undefined,
|
||||
type: undefined,
|
||||
objectId: undefined
|
||||
},
|
||||
rules: {},
|
||||
resData: [],
|
||||
total: 0,
|
||||
editVisible: false,
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getMediaepisodeSearch()
|
||||
this.getcomicsmediaList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求选集列表数据
|
||||
getMediaepisodeSearch() {
|
||||
this.loading = true
|
||||
mediaepisodeSearch({pageSize:500,pageNum:1}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.vComicsEplicodeList = res.data.list
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
|
||||
// TODO:请求视频列表数据
|
||||
getcomicsmediaList() {
|
||||
comicsmediaList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求视频列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：删除漫画主题列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
comicsmediaDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getcomicsmediaList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error(res.tip)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// // 置顶按钮
|
||||
// toTop(index, row) {
|
||||
// this.$confirm('确定置顶?', '警告', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning',
|
||||
// }).then(() => {
|
||||
// topicMediaTop({ id: row.id }).then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// this.$message.success('置顶成功!')
|
||||
// } else {
|
||||
// this.$message.error(res.tip)
|
||||
// }
|
||||
// })
|
||||
// this.getcomicsmediaList()
|
||||
// })
|
||||
// },
|
||||
// 视频查看
|
||||
checkMedia(url, data) {
|
||||
this.$refs.showvideo.open(url, data, data.id)
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
// 编辑
|
||||
eidtMedia(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
},
|
||||
|
||||
// 排序
|
||||
sortMedia(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑排序',
|
||||
data: {
|
||||
mediaId: row.id,
|
||||
rank: row.rank,
|
||||
objectId: this.searchData.objectId,
|
||||
type: this.searchData.type
|
||||
}
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getcomicsmediaList()
|
||||
},
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getcomicsmediaList()
|
||||
},
|
||||
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getcomicsmediaList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getcomicsmediaList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="600px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" placeholder="请输入排序" style="width: 180px"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="卡类型">
|
||||
<el-select placeholder="请选择卡类型" clearable v-model="form.type">
|
||||
<el-option v-for="item in vipCardType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="卡的颜色" prop="goldBase">
|
||||
<el-color-picker v-model="form.color"></el-color-picker>
|
||||
<div style="color:#">值：{{ form.color }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="是否上架" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cardtypeAdd, cardtypeModify } from '@/api/commodity/cardType'
|
||||
import { vipCardType } from '@/filters/commodity/vipcard'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
vipCardType: vipCardType(),
|
||||
// 表单数据
|
||||
form: {
|
||||
sort: undefined,
|
||||
status: true, // 是否激活
|
||||
name: undefined, // 名称
|
||||
color: undefined,
|
||||
type: undefined,
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
color: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增卡类型管理数据
|
||||
add(data) {
|
||||
cardtypeAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑卡类型管理数据
|
||||
update(data) {
|
||||
cardtypeModify(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡类型">
|
||||
<template slot-scope="scope">{{ scope.row.type | changeVipCardType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡的颜色">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ backgroundColor: scope.row.color }">
|
||||
{{ scope.row.color }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否上架" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已上架" : "未上架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { cardTypeList, cardtypeDel } from '@/api/commodity/cardType'
|
||||
export default {
|
||||
name: 'CardType',
|
||||
components: {
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getCardtypeList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求卡类型管理数据
|
||||
getCardtypeList() {
|
||||
this.loading = true
|
||||
cardTypeList({}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO:删除卡类型管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
cardtypeDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getCardtypeList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getCardtypeList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
calss="ac-dialog"
|
||||
center
|
||||
top="50px"
|
||||
id="activity"
|
||||
width="800px"
|
||||
@close="close">
|
||||
<el-form :rules="rules" :model="dialogForm" label-position="right" label-width="120px" ref="dialogForm">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input placeholder="请输入名称" v-model="dialogForm.name" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="折扣券类型">
|
||||
<el-select placeholder="请选择折扣券类型" clearable v-model="dialogForm.couponsType">
|
||||
<el-option v-for="item in couponsTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @onRemove="onRemove('cover')" @changeImgUrl="changeAvatarUrl" :img="dialogForm.cover">
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="折扣" prop="sort">
|
||||
<el-input placeholder="请输入折扣" v-model.number="dialogForm.discount" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="抵用金额" prop="sort">
|
||||
<el-input placeholder="请输入抵用金额" v-model.number="dialogForm.coupon" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="使用门槛" prop="sort">
|
||||
<el-input placeholder="请输入使用门槛" v-model.number="dialogForm.threshold" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="有效天数" prop="sort">
|
||||
<el-input placeholder="请输入有效天数" v-model.number="dialogForm.expireDay" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="权重" prop="sort">
|
||||
<el-input placeholder="请输入排序" v-model.number="dialogForm.rank" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="描述" prop="sort">
|
||||
<el-input placeholder="请输入描述" v-model.number="dialogForm.desc" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="dialogForm.status" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button @click="submitForm('dialogForm')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDiscountcard, upadteDiscountcard } from '@/api/commodity/discountcard'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
dialogForm: {
|
||||
status: undefined, // 新手奖励文字
|
||||
discount: undefined,
|
||||
name: undefined, // "string",会员卡名称
|
||||
id: undefined, // 0,唯一ID
|
||||
rank: undefined,
|
||||
cover: undefined,
|
||||
desc: undefined,
|
||||
isDraw: undefined,
|
||||
threshold:undefined,
|
||||
expireDay:undefined
|
||||
},
|
||||
|
||||
rules: {
|
||||
discount: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
|
||||
},
|
||||
couponsTypeList:[
|
||||
{value:1,label:'抵用券'},
|
||||
{value:2,label:'折扣券'},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.dialogForm = { ...this.data.data }
|
||||
this.dialogForm.coupon = changeMoneyYuan(this.dialogForm.coupon)
|
||||
this.dialogForm.threshold = changeMoneyYuan(this.dialogForm.threshold)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更改图片
|
||||
changeAvatarUrl(data) {
|
||||
this.dialogForm.cover = data
|
||||
},
|
||||
// TODO：编辑卡片管理数据
|
||||
update(data) {
|
||||
upadteDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('编辑失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 移除图片地址到form表单
|
||||
onRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// TODO：新增卡片管理数据
|
||||
add(data) {
|
||||
addDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.dialogForm))
|
||||
data.coupon = changeMoneyFen(data.coupon)
|
||||
data.threshold = changeMoneyFen(data.threshold)
|
||||
if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
} else {
|
||||
this.add(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择上架状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in vipCardStatus" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="handleAdd()" icon="el-icon-circle-plus-outline" plain type="success">新增商品</el-button>
|
||||
<el-button @click="getData" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table :data="tableData" border height="750" highlight-current-row style="width: 100%" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="id" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.discount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="抵用金额" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.coupon/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="使用门槛(满多少可用)" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.threshold/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣券类型" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.couponsType===1?'抵用券':'折扣券' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="权重" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="有效天数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.expireDay }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="启用状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '上架' : '下架' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增/编辑弹出框 -->
|
||||
<Edit :data="editData" v-if="dialogFormVisible" @close="closeEdit"></Edit>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDiscountcard, delDiscountcard } from '@/api/commodity/discountcard'
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'Vipcard',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vipCardStatus: [
|
||||
{ label: '启用', value: true },
|
||||
{ label: '禁用', value: false }
|
||||
],
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
status: undefined, // 激活状态
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialogFormVisible: false,
|
||||
editData: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getData() {
|
||||
getDiscountcard(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除卡片管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDiscountcard({ cardId: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getData({ pageNum: 1 }) // 刷新商品列表
|
||||
this.$message.success('删除成功')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换每页显示的条数触发
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换页码时触发
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleAdd() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 列表编辑按钮点击事件
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.getData()
|
||||
},
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼包名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼品类型" prop="giftbagType">
|
||||
<el-select placeholder="请选择礼品类型" v-model="form.giftbagType" style="width:160px">
|
||||
<el-option v-for="item in giftbagTypeList" :label="item.label" :value="item.value" :key='item.value' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼品数量" prop="giftbagNum">
|
||||
<el-input v-model.number="form.giftbagNum" placeholder="请输入礼品数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否上架" prop="status">
|
||||
<el-switch v-model="form.isEnb" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { giftbagAdd, giftbagUpdate } from '@/api/commodity/giftBag'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { giftbagTypeList } from '@/filters/commodity/giftBag'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
giftbagTypeList: giftbagTypeList(),
|
||||
// 表单数据
|
||||
form: {
|
||||
desc: undefined, //"string",描述
|
||||
image: undefined, // "string",图片
|
||||
isEnb: undefined, // true,true:上架，false:下架
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
giftbagNum: undefined,
|
||||
giftbagType: undefined,
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
if (this.form.giftbagType === 1) {
|
||||
this.form.giftbagNum = changeMoneyYuan(this.form.giftbagNum)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增礼包列表数据
|
||||
add(data) {
|
||||
giftbagAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑礼包列表数据
|
||||
update(data) {
|
||||
giftbagUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.form))
|
||||
if (data.giftbagType === 1) {
|
||||
data.giftbagNum = changeMoneyFen(data.giftbagNum)
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入礼包ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择上架状态" v-model.number="searchData.isEnb" @clear="onClear('isEnb')">
|
||||
<el-option label="上架" :value="true" />
|
||||
<el-option label="下架" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼包名称" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上架状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? "上架" : "下架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼品类型">
|
||||
<template slot-scope="scope">{{ scope.row.giftbagType|changeGiftbagType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼品数量">
|
||||
<template slot-scope="scope" v-if="scope.row.giftbagType===1">{{ scope.row.giftbagNum|changeMoneyYuan }}</template>
|
||||
<template slot-scope="scope" v-else>{{ scope.row.giftbagNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { giftbagList, giftbagDel } from '@/api/commodity/giftBag'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'GiftBag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
isEnb: undefined, //ture:上架，false:下架
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGiftbagList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求礼包列表数据
|
||||
getGiftbagList() {
|
||||
giftbagList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除礼包列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
giftbagDel({ comicsId: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGiftbagList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGiftbagList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="商品价格(元)" prop="payAmount">
|
||||
<el-input v-model="form.payAmount" placeholder="请输入商品价格" />
|
||||
</el-form-item>
|
||||
<div style="margin: -20px 118px 20px; color: #c6c6c6">建议输入金额:30,50,100,200,300,500,1000</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="金币数量" prop="gold">
|
||||
<el-input v-model.number="form.gold" placeholder="请输入金币数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="赠送金币" prop="giftGold">
|
||||
<el-input v-model.number="form.giftGold" placeholder="请输入赠送数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="是否上架" prop="isEnb">
|
||||
<el-switch v-model="form.isEnb" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="排序" prop="desc">
|
||||
<el-input placeholder="请输入排序" v-model="form.sort" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { goldAdd, goldModify } from '@/api/commodity/gold'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
giftGold: null, // 赠送金币
|
||||
gold: undefined, // 金币基础
|
||||
isEnb: true, // 是否上架
|
||||
image: undefined,
|
||||
name: undefined, // 名称
|
||||
payAmount: undefined, // 支付金额
|
||||
desc: undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.payAmount = changeMoneyYuan(this.form.payAmount)
|
||||
this.form.gold = changeMoneyYuan(this.form.gold)
|
||||
this.form.giftGold = changeMoneyYuan(this.form.giftGold)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：新增金币管理数据
|
||||
add(data) {
|
||||
goldAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑金币管理数据
|
||||
update(data) {
|
||||
goldModify(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.payAmount = data.payAmount ? changeMoneyFen(data.payAmount) : 0
|
||||
data.gold = data.gold ? changeMoneyFen(data.gold) : 0
|
||||
data.giftGold = data.giftGold ? changeMoneyFen(data.giftGold) : 0
|
||||
data.sort = Number(data.sort)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="商品名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 40px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="金币数量">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.gold | changeMoneyYuan
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="赠送金币">
|
||||
<template slot-scope="scope">{{ scope.row.giftGold | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="商品价格(单位:元)" width="150px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.payAmount | changeMoneyYuan
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否上架">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb ? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? "上架" : "未上架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
import { goldList, goldDel } from '@/api/commodity/gold'
|
||||
export default {
|
||||
name: 'Gold',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGoldList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求金币管理数据列表
|
||||
getGoldList() {
|
||||
this.loading = true
|
||||
goldList({}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除金币管理列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
goldDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGoldList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGoldList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGoldList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="特权类型">
|
||||
<el-input v-model.number="form.type" placeholder="请输入特权类型" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" type="textarea" style="width: 500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { vcrightAdd, vcrightModify } from '@/api/commodity/listOfBenefits'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
image: undefined,
|
||||
name: undefined,
|
||||
desc: undefined,
|
||||
type: undefined,
|
||||
rank: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增权益管理数据
|
||||
add(data) {
|
||||
vcrightAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑权益管理数据
|
||||
update(data) {
|
||||
vcrightModify(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入ID" clearable v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入名称" clearable v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="特权类型">
|
||||
<template slot-scope="scope">{{ scope.row.type }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="70px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 50px; height: 50px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { vcrightList, vcrightDel } from '@/api/commodity/listOfBenefits'
|
||||
export default {
|
||||
name: 'ListOfBenefits',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
},
|
||||
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getvcrightList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求权益管理数据
|
||||
getvcrightList() {
|
||||
this.loading = true
|
||||
vcrightList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除权益管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
vcrightDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getvcrightList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getvcrightList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换用户ID" v-model="searchData.uid" @clear="onClear('uid')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换码" v-model="searchData.code" @clear="onClear('code')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
<el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '30px' }">
|
||||
<el-table-column align="center" label="使用时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.activedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.uId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码">
|
||||
<template slot-scope="scope">{{ scope.row.code }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码类型" width="140">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.cardType | filterCardType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码信息" width="110">
|
||||
<template slot-scope="scope">{{
|
||||
handleAvailbileValue(scope.row.availbileValue, scope.row.cardType)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="vip类型" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.vipType | changevipType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="vip过期时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.vipExpiredAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updateAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemcodeRecord, redeemcodeListExport } from '@/api/commodity/vipcode'
|
||||
import { BeiJingTime } from '@/filters/index'
|
||||
|
||||
export default {
|
||||
name: 'ListRecord',
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
code: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求兑换记录列表数据
|
||||
async getList() {
|
||||
this.loading = true
|
||||
redeemcodeRecord(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:导出兑换记录列表数据
|
||||
exportExcel() {
|
||||
redeemcodeListExport(this.searchData).then((res) => {
|
||||
if (res.code) {
|
||||
this.$message.error('导出列表失败!')
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
var blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||
})
|
||||
const t = BeiJingTime(new Date())
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.setAttribute('href', url)
|
||||
a.download = `兑换记录${t}.xlsx`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleAvailbileValue(v, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return v + '天数'
|
||||
case 2:
|
||||
return v + '张观影券'
|
||||
case 3:
|
||||
return v / 100 + '金币'
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品名称" prop="name">
|
||||
<el-input v-model="form.title" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品封面">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="兑换所需积分" prop="score">
|
||||
<el-input v-model.number="form.score" placeholder="请输入兑换所需积分" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="绑定的兑换券id" prop="couponsId">
|
||||
<el-input v-model.number="form.couponsId" placeholder="请输入绑定的兑换券id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="绑定的兑换券名称" prop="couponsName">
|
||||
<el-input v-model="form.couponsName" placeholder="请输入绑定的兑换券名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品类型" prop="type">
|
||||
<el-select placeholder="请选择奖品类型" v-model="form.type" style="width:160px">
|
||||
<el-option v-for="item in redeem" :label="item.label" :value="item.value" :key='item.value' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品个数" prop="count">
|
||||
<el-input v-model.number="form.count" placeholder="请输入奖品个数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemAdd, redeemUpdate } from '@/api/commodity/redeem.js'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','redeem'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
couponsId: undefined, //"string",描述
|
||||
couponsName: undefined, // "string",图片
|
||||
status: undefined, // true,true:上架，false:下架
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
desc: undefined,
|
||||
type: undefined,
|
||||
image:undefined, // 封面
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
if(this.form.type===1){
|
||||
this.form.count = this.form.count/100
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增礼包列表数据
|
||||
add(data) {
|
||||
redeemAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑礼包列表数据
|
||||
update(data) {
|
||||
redeemUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.form))
|
||||
if(data.type===1){
|
||||
data.count = data.count*100
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="id" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名字" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换所需积分">
|
||||
<template slot-scope="scope">{{ scope.row.score }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "开启" : "关闭" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品类型">
|
||||
<template slot-scope="scope">{{ scope.row.type | changeRedeem }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品封面" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品个数">
|
||||
<template slot-scope="scope">{{ scope.row.type==1?scope.row.count/100:scope.row.count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="优惠券id">
|
||||
<template slot-scope="scope">{{ scope.row.couponsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" :redeem="redeem" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { redeemList, redeemDel } from '@/api/commodity/redeem'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import {redeem } from '@/filters/commodity/redeem.js'
|
||||
|
||||
export default {
|
||||
name: 'GiftBag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
isEnb: undefined, //ture:上架，false:下架
|
||||
},
|
||||
redeem:redeem(),
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGiftbagList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求礼包列表数据
|
||||
getGiftbagList() {
|
||||
redeemList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除礼包列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
redeemDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGiftbagList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGiftbagList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
<!-- <el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '30px' }">
|
||||
|
||||
<el-table-column align="center" label="兑换用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品id">
|
||||
<template slot-scope="scope">{{ scope.row.prizeId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖励名称">
|
||||
<template slot-scope="scope">{{ scope.row.prizeName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="消耗积分">
|
||||
<template slot-scope="scope">{{ scope.row.usePoint }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="备注" >
|
||||
<template slot-scope="scope">{{ scope.row.remark }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemUserList, redeemcodeListExport } from '@/api/commodity/redeem'
|
||||
export default {
|
||||
name: 'ListRecord',
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
userId: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求兑换记录列表数据
|
||||
async getList() {
|
||||
this.loading = true
|
||||
redeemUserList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:导出兑换记录列表数据
|
||||
exportExcel() {
|
||||
redeemcodeListExport(this.searchData).then((res) => {
|
||||
if (res.code) {
|
||||
this.$message.error('导出列表失败!')
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
var blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||
})
|
||||
const t = BeiJingTime(new Date())
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.setAttribute('href', url)
|
||||
a.download = `兑换记录${t}.xlsx`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleAvailbileValue(v, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return v + '天数'
|
||||
case 2:
|
||||
return v + '张观影券'
|
||||
case 3:
|
||||
return v / 100 + '金币'
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user