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) { ...@@ -20,3 +20,10 @@ export function addMembershipGrade(obj) {
data: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> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<div> <div>
<el-button class="filter-item" style="margin-bottom: 10px;" @click="newMembershipGrade" <el-button
type="primary" icon="edit" v-if="memberManagement_btn_add">添加会员等级 class="filter-item"
</el-button> style="margin-bottom: 10px;"
@click="newMembershipGrade"
type="primary"
icon="edit"
v-if="memberManagement_btn_add"
>添加会员等级</el-button>
</div> </div>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row <el-table
style="width: 100%"> :key="tableKey"
<el-table-column width="205" align="center" label="等级序号"> :data="list"
v-loading.body="listLoading"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column align="center" label="等级序号">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.level}}</span> <span>{{scope.row.level}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="205" align="center" label="名称"> <el-table-column align="center" label="名称">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.name}}</span> <span>{{scope.row.name}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="205" align="center" label="图标"> <el-table-column align="center" label="图标">
<template scope="scope"> <template scope="scope">
<span> <img class="image" :src="scope.row.icon"/></span> <span>
<img class="image" :src="scope.row.icon" />
</span>
</template> </template>
</el-table-column> </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"> <template scope="scope">
<span>{{scope.row.discount}}</span> <span>{{scope.row.discount}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="205" align="center" label="免费天数"> <el-table-column align="center" label="免费天数">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.number}}</span> <span>{{scope.row.number}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="205" align="center" label="价格"> <el-table-column align="center" label="价格">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.price}}</span> <span>{{scope.row.price}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="有效期"> <el-table-column align="center" label="有效期">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.endDate}}</span> <span>{{scope.row.endDate}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作" width="65" fixed="right"> <el-table-column align="center" label="操作" fixed="right">
<template scope="scope"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div> <div>
<el-dialog title="增加会员等级" :visible.sync="addMembershipGrade" class="mGrade"> <el-dialog :title="vipTitle" :visible.sync="addMembershipGrade" class="mGrade" @close='cllsePop'>
<el-form :model="add" :rules="rules" ref="membershipGrade" label-width="100px"> <el-form :model="add" :rules="rules" ref="membershipGrade" label-width="110px">
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="会员等级名称" prop="name"> <el-form-item label="会员等级名称" prop="name">
<el-input type="text" v-model="add.name" <el-input type="text" v-model="add.name" placeholder="请填写会员等级名称"></el-input>
placeholder="请填写会员等级名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="等级" prop="level"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="有效期" prop="endDate"> <el-form-item label="有效期" prop="endDate">
<el-select class="filter-item" v-model="add.endDate" placeholder="请选择有效期"> <el-select
<el-option v-for="(val, key, index) in endDatelist " :key="val.id" :label="val.name" class="filter-item"
:value="val.id"></el-option> 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-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -82,22 +128,40 @@ ...@@ -82,22 +128,40 @@
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="折扣" prop="discount"> <el-form-item label="折扣" prop="discount">
<el-input type="number" min="0" v-model="add.discount" <el-input
placeholder="请填写折扣"></el-input> type="number"
min="0"
v-model="add.discount"
placeholder="请填写折扣"
:disabled="forbid"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="免费天数" prop="number"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<el-form-item label="价格" prop="price"> <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-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -109,222 +173,296 @@ ...@@ -109,222 +173,296 @@
:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'" :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
list-type="picture"> list-type="picture"
<img v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)" :src="add.icon" >
style="width:300px;max-height:300px;"> <img
<i v-else class="el-icon-plus avatar-uploader-icon" v-if="$utils.isString(add.icon) && !$utils.isEmpty(add.icon)"
style="lineHeight:100px;width:300px;height: 100px;border: 1px dashed #ccc;"></i> :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-upload>
</el-form-item> </el-form-item>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="cancelSetMemberArea('membershipGrade')">取消</el-button> <el-button @click="cancelSetMemberArea('membershipGrade')">取消</el-button>
<el-button type="primary" @click="save('membershipGrade')">确 定</el-button> <el-button type="primary" @click="save('membershipGrade')">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {getMembers, delMembershipGrade, addMembershipGrade} from 'src/api/admin/member/index' import {
import {mapGetters} from 'vuex'; getMembers,
import {getToken} from 'src/utils/auth'; delMembershipGrade,
addMembershipGrade,
update
} from "src/api/admin/member/index";
import { mapGetters } from "vuex";
import { getToken } from "src/utils/auth";
export default { export default {
name: 'membershipGrade', name: "membershipGrade",
data() { data() {
return { return {
BASE_API: process.env.BASE_API, forbid: false,
list: [], vipTitle: "增加会员等级",
listLoading: true, BASE_API: process.env.BASE_API,
tableKey: 0, list: [],
addMembershipGrade: false, listLoading: true,
add: { tableKey: 0,
level: undefined, addMembershipGrade: false,
name: undefined, activeId:'',
discount: undefined, add: {
number: undefined, level: undefined,
price: undefined, name: undefined,
endDate: undefined, discount: undefined,
icon: undefined number: undefined,
}, price: undefined,
endDatelist: [ endDate: undefined,
{id: 0, name: '永久'}, icon: undefined,
{id: 1, name: '半年'}, bigIcon: null
{id: 2, name: '一年'}, },
{id: 3, name: '二年'}, endDatelist: [
{id: 4, name: '三年'}, { id: 0, name: "永久" },
{id: 5, name: '四年'}, { id: 1, name: "半年" },
{id: 6, 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: { level: [
'-1': '永久', {
'0': '半年', required: true,
'1': '一年', message: "请输入消息内容",
'2': '二年', trigger: "blur"
'3': '三年', },
'4': '四年', {
'5': '五年', min: 0,
}, max: 20,
rules: { message: "长度小于 20个字符",
name: [ trigger: "blur"
{ }
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()};
}, },
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() { compileShip(row) {
this.listLoading= true console.log(row);
getMembers().then( this.vipTitle = "编辑会员等级";
res => { this.forbid = true;
for (let dataKey of res.data) { this.addMembershipGrade = true;
if (dataKey.endDate == 0) { this.add = {
dataKey.endDate = '半年' level: row.level,
} else { name: row.name,
dataKey.endDate = dataKey.endDate ? this.year[dataKey.endDate] : '' discount: row.discount,
} number: row.number,
price: row.price,
} endDate: row.endDate,
this.list = res.data icon: row.icon,
this.listLoading = false; 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] : "";
} }
) }
}, this.list = res.data;
/** this.listLoading = false;
* 删除会员等级 });
* */ },
delMembership(row) { /**
delMembershipGrade(row.id).then(res => { * 删除会员等级
* */
if (res.rel) { 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({ this.$notify.success({
title: '成功', title: "成功",
message: `success` message: `success`
}) });
} else { } else {
this.$notify.warning({ this.$notify.warning({
title: '失败', title: "失败",
message: `failed` message: `failed`
}) });
} }
this.getList() this.getList();
if (this.$refs[refName]) {
}) this.$refs[refName].resetFields();
}, }
/** this.addMembershipGrade = false;
* 关闭清除 });
* */ } else {
cancelSetMemberArea(refName) { update(membership).then(data => {
this.addMembershipGrade = false if (data.status == 200) {
this.$refs[refName].resetFields() this.$notify.success({
this.add={} title: "成功",
console.log(JSON.stringify(this.add)) message: `success`
}, });
/** } else {
* 显示添加窗 this.$notify.warning({
* */ title: "失败",
newMembershipGrade() { message: `failed`
this.addMembershipGrade = true });
}, }
/** this.getList();
* 新建会员等级 if (this.$refs[refName]) {
* **/ this.$refs[refName].resetFields();
save(refName) { }
let membership = JSON.parse(JSON.stringify(this.add)) this.addMembershipGrade = false;
membership.endDate = membership.endDate - 1 });
addMembershipGrade(membership).then( }
res => { },
/**
if (!res.rel) { * 封面图上传
this.$notify.success({ * **/
title: '成功', handleAvatarSuccess(res, file) {
message: `success` this.add.icon = res.data;
}) },
} 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; //大图标
}, handleAvatarSuccessBig(res) {
this.add.bigIcon = res.data;
} }
} }
};
</script> </script>
<style> <style>
textarea { textarea {
display: none; display: none;
} }
.image { .image {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.mGrade .el-dialog--small { .mGrade .el-dialog--small {
width: 500px; width: 500px;
} }
</style> </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