Skip to content

C
cloud-platform-ui
Commit bf744562 authored by guoyou's avatar guoyou
Browse files
Options

会员等级修改

parent 021c6558
Hide whitespace changes
Inline Side-by-side
Showing with 360 additions and 215 deletions
src/api/admin/member/index.js
View file @ bf744562
......@@ -20,3 +20,10 @@ export function addMembershipGrade(obj) {
data:obj
});
}
export function update(params) {
return fetch({
url: 'api/admin/member/update',
method: 'PUT',
data:params
});
}
\ No newline at end of file
src/views/userManagement/memberManagement/index.vue
View file @ bf744562
<template>
<div class="app-container calendar-list-container">
<div>
<el-button class="filter-item" style="margin-bottom: 10px;" @click="newMembershipGrade"
type="primary" icon="edit" v-if="memberManagement_btn_add">添加会员等级
</el-button>
<el-button
class="filter-item"
style="margin-bottom: 10px;"
@click="newMembershipGrade"
type="primary"
icon="edit"
v-if="memberManagement_btn_add"
>添加会员等级</el-button>
</div>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
style="width: 100%">
<el-table-column width="205" align="center" label="等级序号">
<el-table
:key="tableKey"
:data="list"
v-loading.body="listLoading"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column align="center" label="等级序号">
<template scope="scope">
<span>{{scope.row.level}}</span>
</template>
</el-table-column>
<el-table-column width="205" align="center" label="名称">
<el-table-column align="center" label="名称">
<template scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column width="205" align="center" label="图标">
<el-table-column align="center" label="图标">
<template scope="scope">
<span> <img class="image" :src="scope.row.icon"/></span>
<span>
<img class="image" :src="scope.row.icon" />
</span>
</template>
</el-table-column>
<el-table-column width="205" align="center" label="折扣">
<el-table-column align="center" label="大图标">
<template scope="scope">
<span>
<img class="image" :src="scope.row.bigIcon" />
</span>
</template>
</el-table-column>
<el-table-column align="center" label="折扣">
<template scope="scope">
<span>{{scope.row.discount}}</span>
</template>
</el-table-column>
<el-table-column width="205" align="center" label="免费天数">
<el-table-column align="center" label="免费天数">
<template scope="scope">
<span>{{scope.row.number}}</span>
</template>
</el-table-column>
<el-table-column width="205" align="center" label="价格">
<el-table-column align="center" label="价格">
<template scope="scope">
<span>{{scope.row.price}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="有效期">
<el-table-column align="center" label="有效期">
<template scope="scope">
<span>{{scope.row.endDate}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="65" fixed="right">
<el-table-column align="center" label="操作" fixed="right">
<template scope="scope">
<el-button size="small" class="el-button el-button--text el-button--small" style="color:red" @click="delMembership(scope.row)" v-if="memberManagement_btn_del">删除
</el-button>
<el-button
size="small"
class="el-button el-button--text el-button--small"
style="color:red"
@click="delMembership(scope.row)"
v-if="memberManagement_btn_del"
>删除</el-button>
<el-button
size="small"
class="el-button el-button--text el-button--small"
style="color:red"
@click="compileShip(scope.row)"
>编辑</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-dialog title="增加会员等级" :visible.sync="addMembershipGrade" class="mGrade">
<el-form :model="add" :rules="rules" ref="membershipGrade" label-width="100px">
<el-dialog :title="vipTitle" :visible.sync="addMembershipGrade" class="mGrade" @close='cllsePop'>
<el-form :model="add" :rules="rules" ref="membershipGrade" label-width="110px">
<el-row>
<el-col :span="16">
<el-form-item label="会员等级名称" prop="name">
<el-input type="text" v-model="add.name"
placeholder="请填写会员等级名称"></el-input>
<el-input type="text" v-model="add.name" placeholder="请填写会员等级名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="等级" prop="level">
<el-input type="number" min="0" v-model="add.level" placeholder="请填会员等级" v-enterNumber></el-input>
<el-input
type="number"
min="0"
v-model="add.level"
placeholder="请填会员等级"
v-enterNumber
:disabled="forbid"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="有效期" prop="endDate">
<el-select class="filter-item" v-model="add.endDate" placeholder="请选择有效期">
<el-option v-for="(val, key, index) in endDatelist " :key="val.id" :label="val.name"
:value="val.id"></el-option>
<el-select
class="filter-item"
v-model="add.endDate"
placeholder="请选择有效期"
:disabled="forbid"
>
<el-option
v-for="(val, key, index) in endDatelist "
:key="val.id"
:label="val.name"
:value="val.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
......@@ -82,22 +128,40 @@
<el-row>
<el-col :span="16">
<el-form-item label="折扣" prop="discount">
<el-input type="number" min="0" v-model="add.discount"
placeholder="请填写折扣"></el-input>
<el-input
type="number"
min="0"
v-model="add.discount"
placeholder="请填写折扣"
:disabled="forbid"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="免费天数" prop="number">
<el-input type="number" min="0" v-model="add.number" placeholder="请填免费天数" v-enterNumber></el-input>
<el-input
type="number"
min="0"
v-model="add.number"
placeholder="请填免费天数"
v-enterNumber
:disabled="forbid"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<el-form-item label="价格" prop="price">
<el-input type="number" min="0" v-model="add.price" placeholder="请填价格"></el-input>
<el-input
type="number"
min="0"
v-model="add.price"
placeholder="请填价格"
:disabled="forbid"
></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -109,222 +173,296 @@
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
list-type="picture">
<img v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)" :src="add.icon"
style="width:300px;max-height:300px;">
<i v-else class="el-icon-plus avatar-uploader-icon"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i>
list-type="picture"
>
<img
v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)"
:src="add.icon"
style="width:300px;max-height:300px;"
/>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
></i>
</el-upload>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="大图标" :style="{display:'block'}">
<el-upload
class="upload-demo"
:headers="getHeaderWithToken"
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccessBig"
list-type="picture"
>
<img
v-if="$utils.isString(add.bigIcon) && !$utils.isEmpty(add.bigIcon)"
:src="add.bigIcon"
style="width:300px;max-height:300px;"
/>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"
></i>
</el-upload>
</el-form-item>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelSetMemberArea('membershipGrade')">取消</el-button>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelSetMemberArea('membershipGrade')">取消</el-button>
<el-button type="primary" @click="save('membershipGrade')">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {getMembers, delMembershipGrade, addMembershipGrade} from 'src/api/admin/member/index'
import {mapGetters} from 'vuex';
import {getToken} from 'src/utils/auth';
import {
getMembers,
delMembershipGrade,
addMembershipGrade,
update
} from "src/api/admin/member/index";
import { mapGetters } from "vuex";
import { getToken } from "src/utils/auth";
export default {
name: 'membershipGrade',
data() {
return {
BASE_API: process.env.BASE_API,
list: [],
listLoading: true,
tableKey: 0,
addMembershipGrade: false,
add: {
level: undefined,
name: undefined,
discount: undefined,
number: undefined,
price: undefined,
endDate: undefined,
icon: undefined
},
endDatelist: [
{id: 0, name: '永久'},
{id: 1, name: '半年'},
{id: 2, name: '一年'},
{id: 3, name: '二年'},
{id: 4, name: '三年'},
{id: 5, name: '四年'},
{id: 6, name: '五年'},
export default {
name: "membershipGrade",
data() {
return {
forbid: false,
vipTitle: "增加会员等级",
BASE_API: process.env.BASE_API,
list: [],
listLoading: true,
tableKey: 0,
addMembershipGrade: false,
activeId:'',
add: {
level: undefined,
name: undefined,
discount: undefined,
number: undefined,
price: undefined,
endDate: undefined,
icon: undefined,
bigIcon: null
},
endDatelist: [
{ id: 0, name: "永久" },
{ id: 1, name: "半年" },
{ id: 2, name: "一年" },
{ id: 3, name: "二年" },
{ id: 4, name: "三年" },
{ id: 5, name: "四年" },
{ id: 6, name: "五年" }
],
year: {
"-1": "永久",
"0": "半年",
"1": "一年",
"2": "二年",
"3": "三年",
"4": "四年",
"5": "五年"
},
rules: {
name: [
{
type: "string",
required: true,
message: "请输入消息内容",
trigger: "blur"
},
{
min: 0,
max: 50,
message: "长度小于 50个字符",
trigger: "blur"
}
],
year: {
'-1': '永久',
'0': '半年',
'1': '一年',
'2': '二年',
'3': '三年',
'4': '四年',
'5': '五年',
},
rules: {
name: [
{
type: 'string',
required: true,
message: '请输入消息内容',
trigger: 'blur'
},
{
min: 0,
max: 50,
message: '长度小于 50个字符',
trigger: 'blur'
}
],
level: [
{
required: true,
message: '请输入消息内容',
trigger: 'blur'
},
{
min: 0,
max: 20,
message: '长度小于 20个字符',
trigger: 'blur'
}
]
},
memberManagement_btn_add: false,//添加
memberManagement_btn_del: false,//删除
}
},
created() {
this.memberManagement_btn_add=this.elements['memberManagement:btn_add'];//添加
this.memberManagement_btn_del=this.elements['memberManagement:btn_del'];//删除
this.getList();
}
,
computed: {
...
mapGetters([
'elements'
]),
/**
* 获取token
*/
getHeaderWithToken() {
return {Authorization: getToken()};
level: [
{
required: true,
message: "请输入消息内容",
trigger: "blur"
},
{
min: 0,
max: 20,
message: "长度小于 20个字符",
trigger: "blur"
}
]
},
memberManagement_btn_add: false, //添加
memberManagement_btn_del: false //删除
};
},
created() {
this.memberManagement_btn_add = this.elements["memberManagement:btn_add"]; //添加
this.memberManagement_btn_del = this.elements["memberManagement:btn_del"]; //删除
this.getList();
},
computed: {
...mapGetters(["elements"]),
/**
* 获取token
*/
getHeaderWithToken() {
return { Authorization: getToken() };
}
},
methods: {
cllsePop(){
// console.log('0000');
this.cancelSetMemberArea('membershipGrade')
},
methods: {
getList() {
this.listLoading= true
getMembers().then(
res => {
for (let dataKey of res.data) {
if (dataKey.endDate == 0) {
dataKey.endDate = '半年'
} else {
dataKey.endDate = dataKey.endDate ? this.year[dataKey.endDate] : ''
}
}
this.list = res.data
this.listLoading = false;
//编辑
compileShip(row) {
console.log(row);
this.vipTitle = "编辑会员等级";
this.forbid = true;
this.addMembershipGrade = true;
this.add = {
level: row.level,
name: row.name,
discount: row.discount,
number: row.number,
price: row.price,
endDate: row.endDate,
icon: row.icon,
bigIcon: row.bigIcon
};
this.activeId = row.id
},
getList() {
this.listLoading = true;
getMembers().then(res => {
for (let dataKey of res.data) {
if (dataKey.endDate == 0) {
dataKey.endDate = "半年";
} else {
dataKey.endDate = dataKey.endDate ? this.year[dataKey.endDate] : "";
}
)
},
/**
* 删除会员等级
* */
delMembership(row) {
delMembershipGrade(row.id).then(res => {
if (res.rel) {
}
this.list = res.data;
this.listLoading = false;
});
},
/**
* 删除会员等级
* */
delMembership(row) {
delMembershipGrade(row.id).then(res => {
if (res.rel) {
this.$notify.success({
title: "成功",
message: `success`
});
} else {
this.$notify.warning({
title: "失败",
message: `failed`
});
}
this.getList();
});
},
/**
* 关闭清除
* */
cancelSetMemberArea(refName) {
this.addMembershipGrade = false;
this.$refs[refName].resetFields();
this.add = {};
},
/**
* 显示添加窗
* */
newMembershipGrade() {
this.forbid = false;
this.addMembershipGrade = true;
},
/**
* 新建会员等级
* **/
save(refName) {
let membership = JSON.parse(JSON.stringify(this.add));
membership.endDate = membership.endDate - 1;
membership.id = this.activeId
if (this.vipTitle == "增加会员等级") {
addMembershipGrade(membership).then(res => {
if (!res.rel) {
this.$notify.success({
title: '成功',
title: "成功",
message: `success`
})
});
} else {
this.$notify.warning({
title: '失败',
title: "失败",
message: `failed`
})
});
}
this.getList()
})
},
/**
* 关闭清除
* */
cancelSetMemberArea(refName) {
this.addMembershipGrade = false
this.$refs[refName].resetFields()
this.add={}
console.log(JSON.stringify(this.add))
},
/**
* 显示添加窗
* */
newMembershipGrade() {
this.addMembershipGrade = true
},
/**
* 新建会员等级
* **/
save(refName) {
let membership = JSON.parse(JSON.stringify(this.add))
membership.endDate = membership.endDate - 1
addMembershipGrade(membership).then(
res => {
if (!res.rel) {
this.$notify.success({
title: '成功',
message: `success`
})
} else {
this.$notify.warning({
title: '失败',
message: `failed`
})
}
this.getList()
if (this.$refs[refName]) {
this.$refs[refName].resetFields()
}
this.addMembershipGrade = false
})
},
/**
* 封面图上传
* **/
handleAvatarSuccess(res, file) {
this.getList();
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
this.addMembershipGrade = false;
});
} else {
update(membership).then(data => {
if (data.status == 200) {
this.$notify.success({
title: "成功",
message: `success`
});
} else {
this.$notify.warning({
title: "失败",
message: `failed`
});
}
this.getList();
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
this.addMembershipGrade = false;
});
}
},
/**
* 封面图上传
* **/
handleAvatarSuccess(res, file) {
this.add.icon = res.data;
},
this.add.icon = res.data;
},
//大图标
handleAvatarSuccessBig(res) {
this.add.bigIcon = res.data;
}
}
};
</script>
<style>
textarea {
display: none;
}
textarea {
display: none;
}
.image {
width: 50px;
height: 50px;
}
.image {
width: 50px;
height: 50px;
}
.mGrade .el-dialog--small {
width: 500px;
}
.mGrade .el-dialog--small {
width: 500px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment