fix:项目初始化
This commit is contained in:
ouyangxiu
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="600px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model.number="form.sort" :min="0" placeholder="请输入排序" style="width: 180px"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="卡类型">
|
||||
<el-select placeholder="请选择卡类型" clearable v-model="form.type">
|
||||
<el-option v-for="item in vipCardType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="卡的颜色" prop="goldBase">
|
||||
<el-color-picker v-model="form.color"></el-color-picker>
|
||||
<div style="color:#">值：{{ form.color }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="是否上架" prop="status">
|
||||
<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cardtypeAdd, cardtypeModify } from '@/api/commodity/cardType'
|
||||
import { vipCardType } from '@/filters/commodity/vipcard'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
vipCardType: vipCardType(),
|
||||
// 表单数据
|
||||
form: {
|
||||
sort: undefined,
|
||||
status: true, // 是否激活
|
||||
name: undefined, // 名称
|
||||
color: undefined,
|
||||
type: undefined,
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
color: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增卡类型管理数据
|
||||
add(data) {
|
||||
cardtypeAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑卡类型管理数据
|
||||
update(data) {
|
||||
cardtypeModify(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(this.form)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡类型">
|
||||
<template slot-scope="scope">{{ scope.row.type | changeVipCardType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡的颜色">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ backgroundColor: scope.row.color }">
|
||||
{{ scope.row.color }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否上架" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "已上架" : "未上架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { cardTypeList, cardtypeDel } from '@/api/commodity/cardType'
|
||||
export default {
|
||||
name: 'CardType',
|
||||
components: {
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getCardtypeList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求卡类型管理数据
|
||||
getCardtypeList() {
|
||||
this.loading = true
|
||||
cardTypeList({}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO:删除卡类型管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
cardtypeDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getCardtypeList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getCardtypeList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getCardtypeList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="Visible"
|
||||
calss="ac-dialog"
|
||||
center
|
||||
top="50px"
|
||||
id="activity"
|
||||
width="800px"
|
||||
@close="close">
|
||||
<el-form :rules="rules" :model="dialogForm" label-position="right" label-width="120px" ref="dialogForm">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input placeholder="请输入名称" v-model="dialogForm.name" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="折扣券类型">
|
||||
<el-select placeholder="请选择折扣券类型" clearable v-model="dialogForm.couponsType">
|
||||
<el-option v-for="item in couponsTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @onRemove="onRemove('cover')" @changeImgUrl="changeAvatarUrl" :img="dialogForm.cover">
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="折扣" prop="sort">
|
||||
<el-input placeholder="请输入折扣" v-model.number="dialogForm.discount" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="抵用金额" prop="sort">
|
||||
<el-input placeholder="请输入抵用金额" v-model.number="dialogForm.coupon" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="使用门槛" prop="sort">
|
||||
<el-input placeholder="请输入使用门槛" v-model.number="dialogForm.threshold" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="有效天数" prop="sort">
|
||||
<el-input placeholder="请输入有效天数" v-model.number="dialogForm.expireDay" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="权重" prop="sort">
|
||||
<el-input placeholder="请输入排序" v-model.number="dialogForm.rank" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="描述" prop="sort">
|
||||
<el-input placeholder="请输入描述" v-model.number="dialogForm.desc" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="dialogForm.status" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button @click="submitForm('dialogForm')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDiscountcard, upadteDiscountcard } from '@/api/commodity/discountcard'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
dialogForm: {
|
||||
status: undefined, // 新手奖励文字
|
||||
discount: undefined,
|
||||
name: undefined, // "string",会员卡名称
|
||||
id: undefined, // 0,唯一ID
|
||||
rank: undefined,
|
||||
cover: undefined,
|
||||
desc: undefined,
|
||||
isDraw: undefined,
|
||||
threshold:undefined,
|
||||
expireDay:undefined
|
||||
},
|
||||
|
||||
rules: {
|
||||
discount: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
|
||||
},
|
||||
couponsTypeList:[
|
||||
{value:1,label:'抵用券'},
|
||||
{value:2,label:'折扣券'},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.dialogForm = { ...this.data.data }
|
||||
this.dialogForm.coupon = changeMoneyYuan(this.dialogForm.coupon)
|
||||
this.dialogForm.threshold = changeMoneyYuan(this.dialogForm.threshold)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更改图片
|
||||
changeAvatarUrl(data) {
|
||||
this.dialogForm.cover = data
|
||||
},
|
||||
// TODO：编辑卡片管理数据
|
||||
update(data) {
|
||||
upadteDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('编辑失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 移除图片地址到form表单
|
||||
onRemove(key) {
|
||||
this.form[key] = ''
|
||||
},
|
||||
// TODO：新增卡片管理数据
|
||||
add(data) {
|
||||
addDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.dialogForm))
|
||||
data.coupon = changeMoneyFen(data.coupon)
|
||||
data.threshold = changeMoneyFen(data.threshold)
|
||||
if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
} else {
|
||||
this.add(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择上架状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in vipCardStatus" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="handleAdd()" icon="el-icon-circle-plus-outline" plain type="success">新增商品</el-button>
|
||||
<el-button @click="getData" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table :data="tableData" border height="750" highlight-current-row style="width: 100%" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="id" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.discount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="抵用金额" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.coupon/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="使用门槛(满多少可用)" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.threshold/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣券类型" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.couponsType===1?'抵用券':'折扣券' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="权重" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="有效天数" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.expireDay }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="启用状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? '上架' : '下架' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增/编辑弹出框 -->
|
||||
<Edit :data="editData" v-if="dialogFormVisible" @close="closeEdit"></Edit>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDiscountcard, delDiscountcard } from '@/api/commodity/discountcard'
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
export default {
|
||||
name: 'Vipcard',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vipCardStatus: [
|
||||
{ label: '启用', value: true },
|
||||
{ label: '禁用', value: false }
|
||||
],
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
status: undefined, // 激活状态
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialogFormVisible: false,
|
||||
editData: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getData() {
|
||||
getDiscountcard(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除卡片管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDiscountcard({ cardId: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getData({ pageNum: 1 }) // 刷新商品列表
|
||||
this.$message.success('删除成功')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换每页显示的条数触发
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换页码时触发
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleAdd() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 列表编辑按钮点击事件
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.getData()
|
||||
},
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼包名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼品类型" prop="giftbagType">
|
||||
<el-select placeholder="请选择礼品类型" v-model="form.giftbagType" style="width:160px">
|
||||
<el-option v-for="item in giftbagTypeList" :label="item.label" :value="item.value" :key='item.value' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="礼品数量" prop="giftbagNum">
|
||||
<el-input v-model.number="form.giftbagNum" placeholder="请输入礼品数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否上架" prop="status">
|
||||
<el-switch v-model="form.isEnb" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { giftbagAdd, giftbagUpdate } from '@/api/commodity/giftBag'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { giftbagTypeList } from '@/filters/commodity/giftBag'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
giftbagTypeList: giftbagTypeList(),
|
||||
// 表单数据
|
||||
form: {
|
||||
desc: undefined, //"string",描述
|
||||
image: undefined, // "string",图片
|
||||
isEnb: undefined, // true,true:上架，false:下架
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
giftbagNum: undefined,
|
||||
giftbagType: undefined,
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
if (this.form.giftbagType === 1) {
|
||||
this.form.giftbagNum = changeMoneyYuan(this.form.giftbagNum)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增礼包列表数据
|
||||
add(data) {
|
||||
giftbagAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑礼包列表数据
|
||||
update(data) {
|
||||
giftbagUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.form))
|
||||
if (data.giftbagType === 1) {
|
||||
data.giftbagNum = changeMoneyFen(data.giftbagNum)
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入礼包ID" v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择上架状态" v-model.number="searchData.isEnb" @clear="onClear('isEnb')">
|
||||
<el-option label="上架" :value="true" />
|
||||
<el-option label="下架" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼包名称" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 70px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="上架状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? "上架" : "下架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼品类型">
|
||||
<template slot-scope="scope">{{ scope.row.giftbagType|changeGiftbagType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="礼品数量">
|
||||
<template slot-scope="scope" v-if="scope.row.giftbagType===1">{{ scope.row.giftbagNum|changeMoneyYuan }}</template>
|
||||
<template slot-scope="scope" v-else>{{ scope.row.giftbagNum }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { giftbagList, giftbagDel } from '@/api/commodity/giftBag'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'GiftBag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
isEnb: undefined, //ture:上架，false:下架
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGiftbagList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求礼包列表数据
|
||||
getGiftbagList() {
|
||||
giftbagList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除礼包列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
giftbagDel({ comicsId: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGiftbagList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGiftbagList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="商品价格(元)" prop="payAmount">
|
||||
<el-input v-model="form.payAmount" placeholder="请输入商品价格" />
|
||||
</el-form-item>
|
||||
<div style="margin: -20px 118px 20px; color: #c6c6c6">建议输入金额:30,50,100,200,300,500,1000</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="金币数量" prop="gold">
|
||||
<el-input v-model.number="form.gold" placeholder="请输入金币数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="赠送金币" prop="giftGold">
|
||||
<el-input v-model.number="form.giftGold" placeholder="请输入赠送数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24">
|
||||
<el-form-item label="是否上架" prop="isEnb">
|
||||
<el-switch v-model="form.isEnb" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="排序" prop="desc">
|
||||
<el-input placeholder="请输入排序" v-model="form.sort" type="textarea" style="width: 350px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
import { goldAdd, goldModify } from '@/api/commodity/gold'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
giftGold: null, // 赠送金币
|
||||
gold: undefined, // 金币基础
|
||||
isEnb: true, // 是否上架
|
||||
image: undefined,
|
||||
name: undefined, // 名称
|
||||
payAmount: undefined, // 支付金额
|
||||
desc: undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.form.payAmount = changeMoneyYuan(this.form.payAmount)
|
||||
this.form.gold = changeMoneyYuan(this.form.gold)
|
||||
this.form.giftGold = changeMoneyYuan(this.form.giftGold)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO：新增金币管理数据
|
||||
add(data) {
|
||||
goldAdd(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：编辑金币管理数据
|
||||
update(data) {
|
||||
goldModify(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.payAmount = data.payAmount ? changeMoneyFen(data.payAmount) : 0
|
||||
data.gold = data.gold ? changeMoneyFen(data.gold) : 0
|
||||
data.giftGold = data.giftGold ? changeMoneyFen(data.giftGold) : 0
|
||||
data.sort = Number(data.sort)
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="商品名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 70px; height: 40px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="金币数量">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.gold | changeMoneyYuan
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="赠送金币">
|
||||
<template slot-scope="scope">{{ scope.row.giftGold | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="商品价格(单位:元)" width="150px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.payAmount | changeMoneyYuan
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否上架">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isEnb ? 'success' : 'danger'" plain size="mini">{{ scope.row.isEnb ? "上架" : "未上架" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160px">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
import { goldList, goldDel } from '@/api/commodity/gold'
|
||||
export default {
|
||||
name: 'Gold',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGoldList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求金币管理数据列表
|
||||
getGoldList() {
|
||||
this.loading = true
|
||||
goldList({}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除金币管理列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
goldDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGoldList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGoldList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGoldList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGoldList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="700px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="80px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="特权类型">
|
||||
<el-input v-model.number="form.type" placeholder="请输入特权类型" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" type="textarea" style="width: 500px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { vcrightAdd, vcrightModify } from '@/api/commodity/listOfBenefits'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
image: undefined,
|
||||
name: undefined,
|
||||
desc: undefined,
|
||||
type: undefined,
|
||||
rank: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增权益管理数据
|
||||
add(data) {
|
||||
vcrightAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑权益管理数据
|
||||
update(data) {
|
||||
vcrightModify(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('更新成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片返回地址
|
||||
changeCoverImgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入ID" clearable v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入名称" clearable v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="特权类型">
|
||||
<template slot-scope="scope">{{ scope.row.type }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片" width="70px">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 50px; height: 50px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="150">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updatedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { vcrightList, vcrightDel } from '@/api/commodity/listOfBenefits'
|
||||
export default {
|
||||
name: 'ListOfBenefits',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
},
|
||||
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getvcrightList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求权益管理数据
|
||||
getvcrightList() {
|
||||
this.loading = true
|
||||
vcrightList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.$message.error('请求列表失败!')
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:删除权益管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
vcrightDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getvcrightList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getvcrightList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getvcrightList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.refreshView()
|
||||
},
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.refreshView()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换用户ID" v-model="searchData.uid" @clear="onClear('uid')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换码" v-model="searchData.code" @clear="onClear('code')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
<el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '30px' }">
|
||||
<el-table-column align="center" label="使用时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.activedAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.uId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码名称">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码">
|
||||
<template slot-scope="scope">{{ scope.row.code }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码类型" width="140">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.cardType | filterCardType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码信息" width="110">
|
||||
<template slot-scope="scope">{{
|
||||
handleAvailbileValue(scope.row.availbileValue, scope.row.cardType)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="vip类型" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.vipType | changevipType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="vip过期时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.vipExpiredAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.updateAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemcodeRecord, redeemcodeListExport } from '@/api/commodity/vipcode'
|
||||
import { BeiJingTime } from '@/filters/index'
|
||||
|
||||
export default {
|
||||
name: 'ListRecord',
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
code: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求兑换记录列表数据
|
||||
async getList() {
|
||||
this.loading = true
|
||||
redeemcodeRecord(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:导出兑换记录列表数据
|
||||
exportExcel() {
|
||||
redeemcodeListExport(this.searchData).then((res) => {
|
||||
if (res.code) {
|
||||
this.$message.error('导出列表失败!')
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
var blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||
})
|
||||
const t = BeiJingTime(new Date())
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.setAttribute('href', url)
|
||||
a.download = `兑换记录${t}.xlsx`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleAvailbileValue(v, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return v + '天数'
|
||||
case 2:
|
||||
return v + '张观影券'
|
||||
case 3:
|
||||
return v / 100 + '金币'
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" width="780px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
|
||||
<el-form :inline="true" :model="form" :rules="rules" ref="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品名称" prop="name">
|
||||
<el-input v-model="form.title" placeholder="请输入奖品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品封面">
|
||||
<UploadImg @changeImgUrl="changeimgUrl" :img="form.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="兑换所需积分" prop="score">
|
||||
<el-input v-model.number="form.score" placeholder="请输入兑换所需积分" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="绑定的兑换券id" prop="couponsId">
|
||||
<el-input v-model.number="form.couponsId" placeholder="请输入绑定的兑换券id" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="绑定的兑换券名称" prop="couponsName">
|
||||
<el-input v-model="form.couponsName" placeholder="请输入绑定的兑换券名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="rank">
|
||||
<el-input v-model.number="form.rank" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品类型" prop="type">
|
||||
<el-select placeholder="请选择奖品类型" v-model="form.type" style="width:160px">
|
||||
<el-option v-for="item in redeem" :label="item.label" :value="item.value" :key='item.value' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖品个数" prop="count">
|
||||
<el-input v-model.number="form.count" placeholder="请输入奖品个数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.desc" placeholder="请输入描述" style="width:520px" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="是否开启" prop="status">
|
||||
<el-switch v-model="form.status" inactive-color="#ff4949" active-color="#13ce66" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemAdd, redeemUpdate } from '@/api/commodity/redeem.js'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data','redeem'],
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
form: {
|
||||
couponsId: undefined, //"string",描述
|
||||
couponsName: undefined, // "string",图片
|
||||
status: undefined, // true,true:上架，false:下架
|
||||
name: undefined, // "string",名称
|
||||
rank: undefined, // 0,排序
|
||||
desc: undefined,
|
||||
type: undefined,
|
||||
image:undefined, // 封面
|
||||
},
|
||||
rules: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
if(this.form.type===1){
|
||||
this.form.count = this.form.count/100
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO:新增礼包列表数据
|
||||
add(data) {
|
||||
redeemAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO：编辑礼包列表数据
|
||||
update(data) {
|
||||
redeemUpdate(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.form))
|
||||
if(data.type===1){
|
||||
data.count = data.count*100
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(data)
|
||||
} else if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
// 切换图片
|
||||
changeimgUrl(data) {
|
||||
this.form.image = data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="id" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品名字" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换所需积分">
|
||||
<template slot-scope="scope">{{ scope.row.score }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序">
|
||||
<template slot-scope="scope">{{ scope.row.rank }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status ? "开启" : "关闭" }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品类型">
|
||||
<template slot-scope="scope">{{ scope.row.type | changeRedeem }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品封面" width="120">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 104px; height: 70px; margin: 0 auto" :urls="scope.row.image"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品个数">
|
||||
<template slot-scope="scope">{{ scope.row.type==1?scope.row.count/100:scope.row.count }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="优惠券id">
|
||||
<template slot-scope="scope">{{ scope.row.couponsId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.createdAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="更新时间" width="180">
|
||||
<template slot-scope="scope">{{ scope.row.updatedAt| BeiJingTime }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增及编辑 -->
|
||||
<Edit :data="editData" :redeem="redeem" v-if="editVisible" @close="closeEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入模块
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { redeemList, redeemDel } from '@/api/commodity/redeem'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import {redeem } from '@/filters/commodity/redeem.js'
|
||||
|
||||
export default {
|
||||
name: 'GiftBag',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
isEnb: undefined, //ture:上架，false:下架
|
||||
},
|
||||
redeem:redeem(),
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGiftbagList()
|
||||
},
|
||||
methods: {
|
||||
//TODO:请求礼包列表数据
|
||||
getGiftbagList() {
|
||||
redeemList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
//TODO：删除礼包列表数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
redeemDel({ id: row.id }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.getGiftbagList()
|
||||
this.$message.success('成功删除!')
|
||||
} else {
|
||||
this.$message.error('操作失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getGiftbagList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getGiftbagList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
|
||||
<template>
|
||||
<div class="pf-warpper avlist">
|
||||
<el-row class="table-form">
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-input clearable placeholder="请输入兑换用户ID" v-model.number="searchData.userId" @clear="onClear('userId')" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="refreshView" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
<!-- <el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '30px' }">
|
||||
|
||||
<el-table-column align="center" label="兑换用户ID">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="ID">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖品id">
|
||||
<template slot-scope="scope">{{ scope.row.prizeId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="奖励名称">
|
||||
<template slot-scope="scope">{{ scope.row.prizeName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="消耗积分">
|
||||
<template slot-scope="scope">{{ scope.row.usePoint }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="备注" >
|
||||
<template slot-scope="scope">{{ scope.row.remark }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { redeemUserList, redeemcodeListExport } from '@/api/commodity/redeem'
|
||||
export default {
|
||||
name: 'ListRecord',
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
userId: undefined,
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
total: 0, // 数据总条数
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
//TODO：请求兑换记录列表数据
|
||||
async getList() {
|
||||
this.loading = true
|
||||
redeemUserList(this.searchData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.resData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.resData = []
|
||||
this.total = 0
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//TODO:导出兑换记录列表数据
|
||||
exportExcel() {
|
||||
redeemcodeListExport(this.searchData).then((res) => {
|
||||
if (res.code) {
|
||||
this.$message.error('导出列表失败!')
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
var blob = new Blob([res], {
|
||||
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||
})
|
||||
const t = BeiJingTime(new Date())
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
a.setAttribute('href', url)
|
||||
a.download = `兑换记录${t}.xlsx`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 清理搜索框
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
// 刷新数据
|
||||
refreshView() {
|
||||
this.searchData = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
uid: undefined,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleAvailbileValue(v, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return v + '天数'
|
||||
case 2:
|
||||
return v + '张观影券'
|
||||
case 3:
|
||||
return v / 100 + '金币'
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" calss="ac-dialog" center top="50px" id="activity" width="800px" @close="close">
|
||||
<el-form :rules="rules" :model="dialogForm" label-position="right" label-width="120px" ref="dialogForm">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="抵用金额" prop="sort">
|
||||
<el-input placeholder="请输入抵用金额" v-model.number="dialogForm.coupon" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
|
||||
<el-form-item label="奖品图片">
|
||||
<UploadImg @changeImgUrl="changeAvatarUrl" :img="dialogForm.cover"> </UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="折扣券类型" prop="couponsType">
|
||||
<el-select placeholder="请选择折折扣券类型" v-model="dialogForm.couponsType" style="width:160px">
|
||||
<el-option v-for="item in couponsTypeList" :label="item.name" :value="item.id" :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="couponsId">
|
||||
<el-select placeholder="请选择折扣卡" v-model="dialogForm.couponsId" style="width:160px">
|
||||
<el-option v-for="item in discountcardList" :label="item.name" :value="item.id" :key='item.id' />
|
||||
</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="dialogForm.expireTime" type="datetime" placeholder="结束时间" style="width: 163px" value-format="yyyy-MM-ddTHH:mm:ss+08:00">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="用户ID" prop="sort">
|
||||
<el-input placeholder="请输入用户ID" v-model.number="dialogForm.userId" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="门槛" prop="sort">
|
||||
<el-input placeholder="请输入门槛" v-model.number="dialogForm.threshold" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button @click="submitForm('dialogForm')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addUserDiscountcard, upadteUserDiscountcard } from '@/api/commodity/userDiscountcard'
|
||||
import { changeMoneyFen, changeMoneyYuan } from '@/filters'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'discountcardList'],
|
||||
components:{
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
Visible: true,
|
||||
// 表单数据
|
||||
dialogForm: {
|
||||
userId: undefined,
|
||||
couponsId: undefined,
|
||||
cover:undefined,
|
||||
couponsType:undefined,
|
||||
},
|
||||
couponsTypeList:[
|
||||
{id:1,name:'抵用券'},
|
||||
{id:2,name:'折扣券'},
|
||||
],
|
||||
|
||||
rules: {
|
||||
discount: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.dialogForm = { ...this.data.data }
|
||||
this.dialogForm.coupon = changeMoneyYuan(this.dialogForm.coupon)
|
||||
this.dialogForm.threshold = changeMoneyYuan(this.dialogForm.threshold)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeAvatarUrl(data){
|
||||
this.dialogForm.cover = data
|
||||
},
|
||||
// TODO：编辑卡片管理数据
|
||||
update(data) {
|
||||
upadteUserDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('编辑失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：新增卡片管理数据
|
||||
add(data) {
|
||||
addUserDiscountcard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
// 提交按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.dialogForm))
|
||||
data.coupon = changeMoneyFen(data.coupon)
|
||||
data.threshold = changeMoneyFen(data.threshold)
|
||||
if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
} else {
|
||||
this.add(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择折扣卡" v-model="searchData.couponsId" style="width:160px" @clear="onClear('couponsId')">
|
||||
<el-option v-for="item in discountcardList" :label="item.name" :value="item.id" :key='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入id" clearable v-model="searchData.id" @clear="onClear('id')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<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="请输入订单号" clearable v-model="searchData.tradeNo" @clear="onClear('tradeNo')" />
|
||||
</el-form-item>
|
||||
<el-select placeholder="请选择上架状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in vipCardStatus" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="handleAdd()" icon="el-icon-circle-plus-outline" plain type="success">新增商品</el-button>
|
||||
<el-button @click="getData" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table :data="tableData" border height="750" highlight-current-row style="width: 100%" :row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="奖品ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.discount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="用户ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.userId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣卡" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.couponsId | changeDiscountCardList(discountcardList) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="抵用金额" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.coupon/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="门槛" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.threshold/100 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="图片">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px" :urls="scope.row.cover"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="折扣券类型" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.couponsType===1?'抵用券':'折扣券' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.state ? 'danger' : 'success'" plain size="mini">{{ scope.row.state===1 ? '未使用' :scope.row.state===2 ? '已使用':'已过期' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="过期时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.expireTime | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="创建时间" width="160">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.createdAt | BeiJingTime
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
:current-page="searchData.pageNum"
|
||||
:page-sizes="[10, 20, 30, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"/>
|
||||
</div>
|
||||
<!-- 新增/编辑弹出框 -->
|
||||
<Edit :discountcardList="discountcardList" :data="editData" v-if="dialogFormVisible" @close="closeEdit"></Edit>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserDiscountcard, delUserDiscountcard } from '@/api/commodity/userDiscountcard'
|
||||
import { getDiscountcard } from '@/api/commodity/discountcard'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
|
||||
import Edit from './components/AddOrEdit'
|
||||
|
||||
export default {
|
||||
name: 'Vipcard',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vipCardStatus: [
|
||||
{ label: '启用', value: true },
|
||||
{ label: '禁用', value: false }
|
||||
],
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
status: undefined, // 激活状态
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
couponsId: undefined,
|
||||
tradeNo: undefined,
|
||||
id: undefined,
|
||||
userId: undefined
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialogFormVisible: false,
|
||||
editData: {},
|
||||
discountcardList: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
changeDiscountCardList(v, l) {
|
||||
if (l && l.length > 0) {
|
||||
let name = ''
|
||||
l.find(item => {
|
||||
if (item.id === v) {
|
||||
name = item.name
|
||||
}
|
||||
})
|
||||
return name
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDiscountcardList()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getDiscountcardList() {
|
||||
getDiscountcard({ pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.discountcardList = res.data.list
|
||||
} else {
|
||||
this.discountcardList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:请求卡片管理数据
|
||||
getData() {
|
||||
getUserDiscountcard(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.count
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除卡片管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delUserDiscountcard({ cardId: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getData({ pageNum: 1 }) // 刷新商品列表
|
||||
this.$message.success('删除成功')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换每页显示的条数触发
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换页码时触发
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleAdd() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 列表编辑按钮点击事件
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.getData()
|
||||
},
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="Visible" calss="ac-dialog" center top="50px" id="activity" width="800px" @close="close">
|
||||
<el-form :rules="rules" :model="dialogForm" label-position="right" label-width="120px" ref="dialogForm">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input placeholder="请输入名称" v-model="dialogForm.name" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="标题">
|
||||
<el-input placeholder="请输入标题" v-model="dialogForm.title" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input placeholder="请输入排序" v-model.number="dialogForm.sort" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="卡片等级">
|
||||
<el-select placeholder="请选择卡片等级" v-model="dialogForm.vipGrade" style="width: 180px">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in vipGradeList" />
|
||||
</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="卡片类型">
|
||||
<el-select placeholder="请选择会员卡类型" v-model="dialogForm.category" style="width: 180px">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in cardType" />
|
||||
</el-select>
|
||||
</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 placeholder="下载次数" v-model.number="dialogForm.downLoadCount" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="看片天数" prop="dayCount">
|
||||
<el-input placeholder="请输入看片天数" v-model.number="dialogForm.dayCount" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="卡片等级">
|
||||
<el-select placeholder="请选择卡片等级" v-model.number="dialogForm.vipType">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in vipTypeList" style="width: 180px" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="图片">
|
||||
<UploadImg @onRemove="onRemove('image')" @changeImgUrl="changeAvatarUrl" :img="dialogForm.image"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="会员头像框">
|
||||
<UploadImg @onRemove="onRemove('avatarFrame')" @changeImgUrl="changeAvatarFrameUrl" :img="dialogForm.avatarFrame"></UploadImg>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="24">
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="奖励文字">
|
||||
<el-input placeholder="请输入奖励文字" v-model="dialogForm.newUserGift" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="赠送的金币数量">
|
||||
<el-input placeholder="赠送的金币币数量" v-model.number="dialogForm.giftCoin" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="原价">
|
||||
<el-input placeholder="请输入原价" v-model="dialogForm.preMoney" style="width: 180px">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="优惠价" prop="money">
|
||||
<el-input placeholder="请输入原价" v-model="dialogForm.money" style="width: 180px">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="免费AI脱衣次数" prop="aiFreeRemoveClothCount">
|
||||
<el-input placeholder="请输入免费AI脱衣次数" v-model.number="dialogForm.aiFreeRemoveClothCount" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="免费AI换脸次数" prop="aiFreeChangeFaceCount">
|
||||
<el-input placeholder="请输入免费AI换脸次数" v-model.number="dialogForm.aiFreeChangeFaceCount" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="限时卡第一部分卡ID">
|
||||
<el-select
|
||||
placeholder="限时卡第一部分的卡ID"
|
||||
v-model.number="dialogForm.firstPartCardId"
|
||||
clearable
|
||||
@clear="onRemove('firstPartCardId')"
|
||||
>
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in cardList"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="限时卡第二部分ID">
|
||||
<el-select
|
||||
placeholder="限时卡第二部分ID"
|
||||
v-model.number="dialogForm.secondPartCardId"
|
||||
clearable
|
||||
@clear="onRemove('secondPartCardId')"
|
||||
>
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in cardList"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label=" 限时卡第一部分限时购买到期时间" prop="limitedAt">
|
||||
<el-date-picker v-model="dialogForm.limitedAt" type="datetime" placeholder=" 限时卡第一部分限时购买到期时间" style="width: 180px"> </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="movieRate">
|
||||
<el-input placeholder="请输入购片折扣" v-model.number="dialogForm.movieRate" style="width: 180px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="观影券数量" prop="movieTicket">
|
||||
<el-input placeholder="请输入观影券数量" v-model.number="dialogForm.movieTicket" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="免费抽奖次数" prop="lotteryCount">
|
||||
<el-input placeholder="请输入免费抽奖次数" v-model.number="dialogForm.lotteryCount" style="width: 180px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row :gutter="24">
|
||||
<el-col :xs="12">
|
||||
<el-form-item label="标题字体颜色" prop="goldBase">
|
||||
<el-color-picker v-model="dialogForm.wordColor"></el-color-picker>
|
||||
<div>值：{{ dialogForm.wordColor }}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input placeholder="请输入描述" v-model="dialogForm.desc" type="textarea" style="width: 520px" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item label="会员卡备注" prop="cardRemark">
|
||||
<el-input placeholder="请输入会员卡备注" v-model="dialogForm.cardRemark" type="textarea" style="width: 520px" />
|
||||
</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="activityDesc">
|
||||
<el-input placeholder="请输入活动倒计时文案" v-model="dialogForm.activityDesc" type="textarea" style="width: 520px" />
|
||||
</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="rights">
|
||||
<el-select v-model="dialogForm.rights" multiple filterable placeholder="请选择权益列表">
|
||||
<el-option v-for="item in VcrightList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model.number="dialogForm.status" :active-value="1" :inactive-value="2" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否为直播会员卡" prop="canWatchLive">
|
||||
<el-switch
|
||||
v-model="dialogForm.canWatchLive"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否允许金币购买" label-width="200px" prop="canUseCoin">
|
||||
<el-switch v-model="dialogForm.canUseCoin" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" 是否可使用折扣卡" label-width="200px" prop="canUseDiscountCard">
|
||||
<el-switch v-model="dialogForm.canUseDiscountCard" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" 是否签到返额" label-width="200px" prop="isCheckinCashback">
|
||||
<el-switch v-model="dialogForm.isCheckinCashback" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否24小时新人卡" label-width="200px" prop="isNewUserCard">
|
||||
<el-switch v-model="dialogForm.isNewUserCard" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否动漫/漫画/小说视频免费" label-width="200px" prop="isCartoonMediaFree">
|
||||
<el-switch v-model="dialogForm.isCartoonMediaFree" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否追踪售卖" label-width="200px" prop="isTrack">
|
||||
<el-switch v-model="dialogForm.isTrack" active-color="#13ce66"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否是活动卡" label-width="200px" prop="isActivityCard">
|
||||
<el-switch v-model="dialogForm.isActivityCard" active-color="#13ce66"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否参加首冲膨胀活动" label-width="200px" prop="isJoinFirstExpandActivity">
|
||||
<el-switch v-model="dialogForm.isJoinFirstExpandActivity" active-color="#13ce66"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="活动到期时间" prop="activityEndAt">
|
||||
<el-date-picker v-model="dialogForm.activityEndAt" type="datetime" placeholder="活动到期时间" style="width: 180px"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="dialogForm.isTrack">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
|
||||
<el-form-item label="有效期" prop="validityDays">
|
||||
<el-input v-model.number="dialogForm.validityDays" placeholder="请输入有效期" style="width: 194px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
|
||||
<el-form-item label="失效期" prop="invalidityDays">
|
||||
<el-input v-model.number="dialogForm.invalidityDays" placeholder="请输入失效期" style="width: 194px"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="Visible = false">取 消</el-button>
|
||||
<el-button @click="submitForm('dialogForm')" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addVipCard, upadteVipCard, getVipCardList } from '@/api/commodity/vipcard'
|
||||
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
|
||||
import { vipTypeList } from '@/filters/user/userList'
|
||||
import UploadImg from '@/components/UploadImg/index'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data', 'cardType','vipGradeList'],
|
||||
components: {
|
||||
UploadImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vipTypeList: vipTypeList(),
|
||||
VcrightList: this.$store.getters.getVcrightList,
|
||||
GiftbagList: this.$store.getters.getGiftbagList,
|
||||
cardList: [],
|
||||
Visible: true,
|
||||
title: '',
|
||||
// 表单数据
|
||||
dialogForm: {
|
||||
newUserGift: undefined, // 新手奖励文字
|
||||
canUseCoin: undefined,
|
||||
name: undefined, // "string",会员卡名称
|
||||
cardType: undefined, // 0,卡类型
|
||||
category: undefined, // 卡片类型枚举
|
||||
dayCount: undefined, // 0,天数
|
||||
desc: undefined, // "string",描述
|
||||
id: undefined, // 0,唯一ID
|
||||
preMoney: undefined, // 0,原价
|
||||
money: undefined, // 0,售价(单位:分)
|
||||
firstPartCardId: undefined, // 限时卡第一部分卡ID
|
||||
limitedAt: undefined, // 预售到期时间
|
||||
rchgGiftRate: undefined, // 0,赠送比例
|
||||
rights: undefined, // [0],会员卡拥有的权益列表
|
||||
rigtTitle: undefined, // 权益标题
|
||||
sort: undefined, // 0,排序
|
||||
status: 1, // 0,状态
|
||||
activityDesc:undefined, // 活动倒计时文案
|
||||
title: undefined, // "string",标题
|
||||
vipType: undefined, // 0会员卡所属等级
|
||||
giftCoin: undefined,
|
||||
movieTicket: undefined,
|
||||
image: undefined,
|
||||
userVipImage: undefined,
|
||||
avatarFrame: undefined, // 会员头像框
|
||||
wordColor: '#000000', // 卡片颜色
|
||||
dayMoney: undefined, // 每日消耗
|
||||
cardRemark: undefined, // 会员卡备注
|
||||
freeGame: undefined,
|
||||
lotteryCount: undefined, // 免费抽奖次数
|
||||
isTrack: false, // 是否追踪售卖
|
||||
validityDays: undefined,
|
||||
invalidityDays: undefined,
|
||||
aiFreeCount: undefined, // 免费ai次数
|
||||
isCartoonMediaFree: false, // 是否动漫/漫画/小说视频免费
|
||||
isNewUserCard: undefined, // 是否新人24小时卡
|
||||
aiFreeRemoveClothCount: undefined,
|
||||
aiFreeChangeFaceCount: undefined,
|
||||
isJoinFirstExpandActivity:undefined,
|
||||
isActivityCard: undefined, // 是否活动卡
|
||||
isCheckinCashback:undefined, // 是否签到返额
|
||||
activityEndAt: undefined // 活动到期时间
|
||||
},
|
||||
rules: {
|
||||
sort: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
movieTicket: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
downLoadCount: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
dayCount: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
movieRate: [{ required: true, message: '必填', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData()
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.dialogForm = { ...this.data.data }
|
||||
this.dialogForm.money = changeMoneyYuan(this.dialogForm.money)
|
||||
this.dialogForm.limitedTimePrice = changeMoneyYuan(this.dialogForm.limitedTimePrice)
|
||||
this.dialogForm.preMoney = changeMoneyYuan(this.dialogForm.preMoney)
|
||||
this.dialogForm.giftCoin = changeMoneyYuan(this.dialogForm.giftCoin)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getData() {
|
||||
getVipCardList({ pageNum: 1, pageSize: 200 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.cardList = res.data.list
|
||||
} else {
|
||||
this.cardList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO：编辑卡片管理数据
|
||||
update(data) {
|
||||
upadteVipCard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('编辑失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO：新增卡片管理数据
|
||||
add(data) {
|
||||
addVipCard(data).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.Visible = false
|
||||
} else {
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更改图片
|
||||
changeAvatarUrl(data) {
|
||||
this.dialogForm.image = data
|
||||
},
|
||||
|
||||
// 会员头像框
|
||||
changeAvatarFrameUrl(data) {
|
||||
this.dialogForm.avatarFrame = data
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
onRemove(data) {
|
||||
this.dialogForm[data] = undefined
|
||||
},
|
||||
// 提交按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.dialogForm))
|
||||
data.money = data.money ? changeMoneyFen(data.money) : 0
|
||||
data.limitedTimePrice = data.limitedTimePrice ? changeMoneyFen(data.limitedTimePrice) : 0
|
||||
data.preMoney = data.preMoney ? changeMoneyFen(data.preMoney) : 0
|
||||
data.giftCoin = data.giftCoin ? changeMoneyFen(data.giftCoin) : 0
|
||||
if (this.title === '编辑') {
|
||||
this.update(data)
|
||||
} else {
|
||||
this.add(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="pf-warpper">
|
||||
<el-row class="table-form">
|
||||
<!-- 查询条件 -->
|
||||
<el-form :inline="true" :model="searchData" class="form-inline" label-width="80px" size="mini">
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入商品名称" clearable v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select placeholder="请选择激活状态" clearable v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in vipCardStatus" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="handleAdd()" icon="el-icon-circle-plus-outline" plain type="success">新增商品</el-button>
|
||||
<el-button @click="getData" icon="el-icon-refresh" plain type="info">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 展示列表 -->
|
||||
<el-table :data="tableData" border height="750" highlight-current-row style="width: 100%"
|
||||
:row-style="{ height: '70px' }">
|
||||
<el-table-column align="center" label="id" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="排序" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.sort }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="名称" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡片类型" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.category | changeName(cardType, 'id', 'name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡片等级" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.vipGrade | changeName(vipGradeList, 'id', 'name') }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="卡的标题" width="120" :show-overflow-tooltip="true">
|
||||
<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; line-height: 40px" :urls="scope.row.image">
|
||||
</ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="会员头像框">
|
||||
<template slot-scope="scope">
|
||||
<ShowImg style="width: 40px; height: 40px; margin: 0 auto; line-height: 40px"
|
||||
:urls="scope.row.avatarFrame"></ShowImg>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="天数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.dayCount }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="是否免费禁游" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.freeGame ? 'success' : 'danger'" plain size="mini">{{ scope.row.freeGame ?
|
||||
'免费' : '收费' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否参加首冲膨胀活动" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isJoinFirstExpandActivity ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.isJoinFirstExpandActivity ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否动漫/漫画/小说视频免费" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isCartoonMediaFree ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.isCartoonMediaFree ? '免费' : '收费' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否允许金币购买" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.canUseCoin ? '允许' : '不允许' }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.status === 1 ? 'success' : 'danger'" plain size="mini">{{ scope.row.status ===
|
||||
1 ? '上架' : '下架' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="会员卡所属等级" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.vipType | changevipType }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="原价(元)" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.preMoney | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="优惠价(元)" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.money | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="购片折扣">
|
||||
<template slot-scope="scope">{{ scope.row.movieRate === 0 ? 0 : scope.row.movieRate + '%' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="免费AI脱衣次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.aiFreeRemoveClothCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="免费AI换脸次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.aiFreeChangeFaceCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="限时卡第一部分卡ID" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.firstPartCardId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="限时卡第二部分卡ID" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.secondPartCardId }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="限时购买的价格(元)" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.limitedTimePrice | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否是活动卡" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isActivityCard ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.isActivityCard ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否为直播会员" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.canWatchLive ? "是" : "否"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否签到返额" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isCheckinCashback ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.isCheckinCashback ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="活动到期时间" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.activityEndAt }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="活动倒计时文案" width="200">
|
||||
<template slot-scope="scope">{{ scope.row.activityDesc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否24小时新人卡" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.isNewUserCard ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.isNewUserCard ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否可使用折扣卡" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.canUseDiscountCard ? 'success' : 'danger'" plain size="mini">{{
|
||||
scope.row.canUseDiscountCard ? '是' : '否' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="新手奖励文字" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.newUserGift }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="观影券数量" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.movieTicket }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="免费抽奖次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.lotteryCount }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="赠送的金币数量" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.giftCoin | changeMoneyYuan }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="每天消耗">
|
||||
<template slot-scope="scope">{{ scope.row.dayMoney }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="会员卡拥有的权益列表" width="300">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :key="index" v-for="(item, index) in scope.row.rights" type="success">{{ item |
|
||||
changeRights(rightsList) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="权益的标题" width="100" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.rigtTitle }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="描述" width="220" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">{{ scope.row.desc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="会员卡备注" width="220" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">{{ scope.row.cardRemark }}</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" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 分页 -->
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-sizes="[10, 20, 30, 50, 100]" :total="total"
|
||||
@current-change="handleCurrentChange" @size-change="handleSizeChange"
|
||||
layout="total, sizes, prev, pager, next, jumper" />
|
||||
</div>
|
||||
<!-- 新增/编辑弹出框 -->
|
||||
<Edit :cardType="cardType" :vipGradeList="vipGradeList" :data="editData" v-if="dialogFormVisible"
|
||||
@close="closeEdit">
|
||||
</Edit>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getVipCardList, delVipCard } from '@/api/commodity/vipcard'
|
||||
import ShowImg from '@/components/ShowImg/index.vue'
|
||||
import { vcrightList } from '@/api/commodity/listOfBenefits'
|
||||
import { vipCardStatus } from '@/filters/commodity/vipcard'
|
||||
import Edit from './components/AddOrEdit'
|
||||
import { giftbagList } from '@/api/commodity/giftBag'
|
||||
|
||||
export default {
|
||||
name: 'Vipcard',
|
||||
components: {
|
||||
Edit,
|
||||
ShowImg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cardType: [
|
||||
{
|
||||
id: 0, name: 'vip会员'
|
||||
}, {
|
||||
id: 1, name: '暗网会员卡'
|
||||
}, {
|
||||
id: 2, name: '全网通会员卡'
|
||||
},{
|
||||
id: 3, name: '直播卡'
|
||||
},
|
||||
],
|
||||
vipGradeList: [{ id: 0, name: '普通VIP' }, { id: 1, name: '至尊VIP' }],
|
||||
vipCardStatus: vipCardStatus(),
|
||||
rightsList: [],
|
||||
giftbagList: [],
|
||||
// 请求列表筛选参数
|
||||
searchData: {
|
||||
name: undefined, // vip卡名称
|
||||
status: undefined, // 激活状态
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialogFormVisible: false,
|
||||
editData: {}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getVcrightList()
|
||||
// this.getGiftbagList()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求卡片管理数据
|
||||
getData() {
|
||||
getVipCardList(this.searchData).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.total
|
||||
} else {
|
||||
this.tableData = []
|
||||
this.total = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// TODO:删除卡片管理数据
|
||||
handleDelete(index, row) {
|
||||
this.$confirm('确定删除?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delVipCard({ cardId: row.id }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getData({ pageNum: 1 }) // 刷新商品列表
|
||||
this.$message.success('删除成功')
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
// TODO:请求会员礼包列表数据
|
||||
getGiftbagList() {
|
||||
giftbagList({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.giftbagList = res.data.list
|
||||
this.$store.dispatch('vipCard/setGiftbagList', res.data.list)
|
||||
} else {
|
||||
this.giftbagList = []
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
// TODO:请求权益列表数据
|
||||
getVcrightList() {
|
||||
vcrightList({ pageNum: 1, pageSize: 100 }).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.rightsList = res.data.list
|
||||
this.$store.dispatch('vipCard/setVcrightList', res.data.list)
|
||||
} else {
|
||||
this.rightsList = []
|
||||
this.$message.error('请求列表失败!')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 10
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换每页显示的条数触发
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 切换页码时触发
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// 列表编辑按钮点击事件
|
||||
handleAdd() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 列表编辑按钮点击事件
|
||||
handleEdit(index, row) {
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {}
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.getData()
|
||||
},
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,183 @@
|
||||
<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="form" class="demo-form-inline" label-width="120px" label-position="right">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="名称">
|
||||
<el-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="totalTimes">
|
||||
<el-input v-model.number="form.totalTimes" placeholder="请输入可使用次数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="兑换码类型">
|
||||
<el-select clearable placeholder="请选择兑换码类型" v-model="form.cardType" style="width:163px">
|
||||
<el-option v-for="(item, index) in cardList" :value="item.id" :label="item.name" :key="index" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="form.cardType === 1" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="会员卡类型">
|
||||
<el-select clearable placeholder="请选择会员卡类型" v-model="form.vipType">
|
||||
<el-option label="体验卡" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="form.cardType" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item :label="filterLabelValue(form.cardType)" prop="availbileValue">
|
||||
<el-input v-model.number="form.availbileValue" :placeholder="'请输入' + filterLabelValue(form.cardType)" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="title === '新增'">
|
||||
<el-form-item label="兑换码有效期">
|
||||
<el-input v-model.number="form.validPeriod" placeholder="请输入天数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="title === '新增'">
|
||||
<el-form-item label="生成的数量">
|
||||
<el-input v-model.number="form.count" placeholder="生成多少个兑换码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" v-if="title === '编辑'">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="过期时间">
|
||||
<el-date-picker style="width:163px" v-model="form.expiredAt" type="date" placeholder="选择日期" value-format="yyyy-MM-ddTHH:mm:ss.sssZ">
|
||||
</el-date-picker>
|
||||
</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.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="Visible = false"> 取 消 </el-button>
|
||||
<el-button type="primary" @click="submit('form')"> 确 定 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { redeemcodeAdd, redeemcodeModify } from '@/api/commodity/vipcode'
|
||||
export default {
|
||||
name: 'AddOrEdit',
|
||||
props: ['data'],
|
||||
data() {
|
||||
return {
|
||||
Visible: true,
|
||||
title: '',
|
||||
cardList: [
|
||||
{ name: '会员卡', id: 1 },
|
||||
{ name: '观影券', id: 2 },
|
||||
{ name: '金币', id: 3 },
|
||||
{ name: '积分', id: 4 },
|
||||
],
|
||||
// 表单数据备份
|
||||
formData: {},
|
||||
// 表单数据
|
||||
form: {
|
||||
availbileValue: undefined, // 0,兑换码有效时长(单位：天)
|
||||
count: undefined, // 0,生成兑换码的个数
|
||||
vipType: undefined,
|
||||
name: undefined, // "string",名称
|
||||
totalTimes: undefined, // 0,兑换码可使用次数
|
||||
validPeriod: undefined, // 0 会员有效时长(单位：天)
|
||||
expiredAt: undefined, // "string",过期时间
|
||||
id: undefined, // "string",唯一ID
|
||||
enable: undefined, // true,是否可用
|
||||
},
|
||||
rules: {
|
||||
availbileValue: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
totalTimes: [{ required: true, message: '必填', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.title = this.data.title
|
||||
if (this.title === '编辑') {
|
||||
this.form = { ...this.data.data }
|
||||
this.formData = Object.assign({}, this.form)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//TODO：新增兑换码列表数据
|
||||
add(data) {
|
||||
redeemcodeAdd(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('新增成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('新增失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
//TODO:编辑兑换码列表数据
|
||||
update(data) {
|
||||
redeemcodeModify(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.Visible = false
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.Visible = false
|
||||
this.$message.error('更新失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
filterLabelValue(v) {
|
||||
switch (v) {
|
||||
case 1:
|
||||
return 'VIP天数'
|
||||
case 2:
|
||||
return '观影券张数'
|
||||
case 3:
|
||||
return '金币数量'
|
||||
case 4:
|
||||
return '积分数量'
|
||||
}
|
||||
},
|
||||
// 提交按钮
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.cardType === 3) {
|
||||
this.form.availbileValue = this.form.availbileValue * 100
|
||||
}
|
||||
if (this.title === '新增') {
|
||||
this.add(this.form)
|
||||
} else if (this.title === '编辑') {
|
||||
const changeData = {}
|
||||
for (const key in this.form) {
|
||||
if (this.form[key] !== this.formData[key]) {
|
||||
changeData[key] = this.form[key]
|
||||
}
|
||||
}
|
||||
if (Object.keys(changeData).length) {
|
||||
const param = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: this.form.id,
|
||||
...changeData,
|
||||
}
|
||||
)
|
||||
this.update(param)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭编辑
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,263 @@
|
||||
<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.code" @clear="onClear('code')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input placeholder="请输入兑换码名称" clearable v-model="searchData.name" @clear="onClear('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择兑换码状态" v-model="searchData.status" @clear="onClear('status')">
|
||||
<el-option label="未使用" :value="0" />
|
||||
<el-option label="已使用" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择兑换码类型" v-model="searchData.cardType" @clear="onClear('cardType')">
|
||||
<el-option label="会员卡" :value="1" />
|
||||
<el-option label="观影券" :value="2" />
|
||||
<el-option label="金币" :value="3" />
|
||||
<el-option label="积分" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select clearable placeholder="请选择是否可用" v-model="searchData.enable" @clear="onClear('enable')">
|
||||
<el-option label="可用" :value="true" />
|
||||
<el-option label="不可用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="onSearch" icon="el-icon-search" plain type="primary">搜索</el-button>
|
||||
<el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
|
||||
<el-button @click="exportExcel" icon="el-icon-download" plain type="primary">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading" :row-style="{ height: '30px' }">
|
||||
<el-table-column align="center" label="兑换码ID" width="110">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码名称" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.code }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码是否可用" width="120">
|
||||
<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">{{ scope.row.totalTimes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="已使用次数" width="100">
|
||||
<template slot-scope="scope">{{ scope.row.usedTimes }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码类型" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.cardType | filterCardType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="兑换码信息" width="110">
|
||||
<template slot-scope="scope">{{
|
||||
handleAvailbileValue(scope.row.availbileValue, scope.row.cardType)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="vip类型" width="100">
|
||||
<template slot-scope="scope">{{
|
||||
scope.row.vipType | changevipType
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="生成时间" 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.expiredAt | 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="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-pagination">
|
||||
<el-pagination :current-page="searchData.pageNum" :page-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 {
|
||||
redeemcodeList,
|
||||
redeemcodeDel,
|
||||
vipcodeListExport,
|
||||
} from '@/api/commodity/vipcode'
|
||||
|
||||
export default {
|
||||
name: 'Vipcode',
|
||||
components: {
|
||||
Edit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 请求列表参数
|
||||
searchData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
cardType: undefined,
|
||||
code: undefined, // "string",兑换码
|
||||
enable: undefined, // true,是否可用
|
||||
name: undefined, // "string",名称
|
||||
status: undefined, // 0 0:未使用, 1:已使用
|
||||
},
|
||||
resData: [], // el-table表格数据
|
||||
editVisible: false, // 新增或编辑弹出框
|
||||
total: 0, // 数据总条数
|
||||
loading: true, // 列表加载状态
|
||||
// 编辑数据
|
||||
editData: {
|
||||
title: '新增',
|
||||
data: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// TODO:请求兑换码列表数据
|
||||
getList() {
|
||||
this.loading = true
|
||||
redeemcodeList(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(() => {
|
||||
redeemcodeDel({ id: row.id }).then((res) => {
|
||||
this.getList()
|
||||
this.$message.success('成功删除!')
|
||||
})
|
||||
})
|
||||
},
|
||||
//TODO:到处兑换码列表数据
|
||||
exportExcel() {
|
||||
const data = JSON.parse(JSON.stringify(this.searchData))
|
||||
vipcodeListExport(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)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAvailbileValue(v, type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return v + '天数'
|
||||
case 2:
|
||||
return v + '张观影券'
|
||||
case 3:
|
||||
return v / 100 + '金币'
|
||||
case 4:
|
||||
return v + '积分'
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
this.searchData.pageNum = 1
|
||||
this.searchData.pageSize = 20
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 切换每页数据量
|
||||
handleSizeChange(val) {
|
||||
this.searchData.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 切换页数
|
||||
handleCurrentChange(val) {
|
||||
this.searchData.pageNum = val
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 新增按钮
|
||||
add() {
|
||||
this.editVisible = true
|
||||
},
|
||||
|
||||
// 编辑按钮
|
||||
handleEdit(index, row) {
|
||||
this.editVisible = true
|
||||
if (row.cardType === 3) {
|
||||
row.availbileValue = row.availbileValue / 100
|
||||
}
|
||||
this.editData = {
|
||||
title: '编辑',
|
||||
data: row,
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭编辑弹窗
|
||||
closeEdit() {
|
||||
this.editData = {
|
||||
title: '新增',
|
||||
data: {},
|
||||
}
|
||||
this.editVisible = false
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 清空某一项筛选列表
|
||||
onClear(key) {
|
||||
this.searchData[key] = undefined
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user