fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user