<template>
<div v-loading="loading" class="setMember usersList">
<div class="head-title">
<span @click="goUrl" class="blue point">会员等级</span> / 会员设置
</div>
<div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
<el-form-item label="会员等级" prop="Grade">
<el-select style="width:293px;" size="small" v-model="addMsg.Grade" placeholder="请选择">
<el-option v-for="(item,index) in numList"
:key="index" :label="`等级${index+1}`"
:value="item.Id"
:disabled="item.dis"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="等级名称" prop="Name">
<el-input style="width:293px;" size="small" v-model="addMsg.Name" placeholder="请输入等级名称"></el-input>
</el-form-item>
<el-form-item class="discount commonLabel" label="折扣" prop="Discount">
<el-tooltip class="item" effect="dark" content="请输入0.1~10之间的数字" placement="top-start">
<i class="elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容"
v-model="addMsg.Discount" class="input-with-select">
<el-button slot="append">折</el-button>
</el-input>
</el-form-item>
<el-form-item label="会员状态" prop="Enabled">
<el-switch v-model="addMsg.Enabled" active-color="#409EFF" :active-value="1" :inactive-value="2">
</el-switch>
</el-form-item>
<el-form-item label="会员图标" prop="Icon">
<el-button @click="openChangeDig('Icon')" size="small">选择文件</el-button>
<div>
<img v-if="addMsg.IconPath==''" style="width:80px;height:80px" src="../../assets/img/default.png" alt="">
<img v-else style="width:80px;height:80px"
:src="getIconLink(addMsg.IconPath)" alt="">
</div>
</el-form-item>
<el-form-item label="会员背景色" prop="BackgroundImage">
<el-button @click="openChangeDig('BackgroundImage')" size="small">选择文件</el-button>
<div>
<img v-if="addMsg.BackgroundImagePath==''" style="width:80px;height:80px" src="../../assets/img/default.png"
alt="">
<img v-else style="width:80px;height:80px"
:src="getIconLink(addMsg.BackgroundImagePath)" alt="">
</div>
</el-form-item>
<el-form-item label="累计金额自动升级">
<el-switch v-model="addMsg.IsAutoUpGrade" active-color="#409EFF" :active-value="1" :inactive-value="2">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="升级条件" prop="UpGradeMoney">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容"
v-model="addMsg.UpGradeMoney" class="input-with-select">
<template slot="prepend">累计完成订单金额满</template>
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item label="会员是否可购买">
<el-switch v-model="addMsg.IsMemberBuy" active-color="#409EFF" :active-value="1" :inactive-value="2">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="购买价格" prop="MemberBuyMoney">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入购买价格"
v-model="addMsg.MemberBuyMoney" class="input-with-select">
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item label="h会员权益(多条)">
<div v-if="addMsg.EquityList.length>0" style="width:700px;">
<el-table class="setTable" :data="addMsg.EquityList" border style="margin-bottom:20px">
<el-table-column prop="ID" width="180px" label="权益标题">
<template slot-scope="scope">
<el-input style="width:159px" size="small" v-model="scope.row.Title" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="address" width="180px" label="权益图标">
<template slot-scope="scope">
<el-button @click="openChangeDig('qy',scope.$index)" size="small">选择图片</el-button>
<img v-if="scope.row.ImagePath==''" style="margin-left: 10px;width:50px;height:50px"
src="../../assets/img/default.png" alt="">
<img v-else style="margin-left: 10px;width:50px;height:50px"
:src="getIconLink(scope.row.ImagePath)" alt="">
</template>
</el-table-column>
<el-table-column prop="address" width="500px" label="权益内容">
<template slot-scope="scope">
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.Content">
</el-input>
</template>
</el-table-column>
<el-table-column prop="address" width="80px" label="操作">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<img @click.prevent="Delete(scope.$index)" style="width:32px;height:32px"
src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div class="point">
<i class="el-icon-plus" style="font-weight: bolder;margin-left:5px;color:#409EFF"></i>
<span @click="addEquityList" style="color: rgb(53, 53, 53);font-size: 14px;">新增权益</span>
</div>
</el-form-item>
<el-form-item class="hygz" label="会员规则" prop="MemberSpecification">
<div style="width:455px">
<UE :defaultMsg="addMsg.MemberSpecification" :config="config" ref="ue"></UE>
</div>
</el-form-item>
</el-form>
</div>
<div style="margin-top:20px">
<el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
</div>
<!-- 选择文件 -->
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import UE from '@/components/global/UE.vue'
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
components: {
ChooseImg,
UE
},
data() {
return {
loading: false,
defaultMsg: '',
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
},
currentPage4: 3,
changeState: false,
val: '',
addMsg: {
EquityList: [],
Id: 0,
Grade: '',
Name: '',
Discount: 0,
Enabled: 2,
Icon: '',
BackgroundImage: '',
IsAutoUpGrade: 1,
UpGradeMoney: '',
IsMemberBuy: 1,
MemberBuyMoney: '',
MemberSpecification: '',
MallBaseId: this.getLocalStorage().MallBaseId,
},
dialogVisible: false,
value: '',
options: [],
tableData: [],
msg: {
pageIndex: 1,
pageSize: 15,
},
total: 0,
rules: {
Grade: [{
required: true,
message: '请选择会员等级',
trigger: 'change'
}],
Name: [{
required: true,
message: '请输入等级名称',
trigger: 'blur'
}],
Discount: [{
required: true,
message: '请输入折扣',
trigger: 'blur'
}],
UpGradeMoney: [{
required: true,
message: '请输入金额',
trigger: 'blur'
}],
MemberBuyMoney: [{
required: true,
message: '请输入金额',
trigger: 'blur'
}],
},
imgType: '',
imgIndex: -1,
GradeId: 0,
gradeList:[],
numList:[],
};
},
created() {
this.numList=[]
for(let i=1;i<101;i++){
let obj={
Id:i,
dis:false,
}
this.numList.push(obj)
}
},
mounted() {
this.$refs.ue.InitData();
if (this.$route.query.GradeId) {
this.GradeId = this.$route.query.GradeId;
this.getData()
}
this.getgradeList();
},
methods: {
input(){},
openChangeDig(str, index) {
this.imgType = str;
this.changeState = true;
this.imgIndex = index;
},
SelectId(msg) {
this.changeState = false;
if (this.imgType == 'Icon') {
this.addMsg.Icon = msg.selectId;
this.addMsg.IconPath = msg.url;
}
if (this.imgType == 'BackgroundImage') {
this.addMsg.BackgroundImage = msg.selectId;
this.addMsg.BackgroundImagePath = msg.url;
}
if (this.imgType == 'qy') {
let imgIndex = this.imgIndex;
this.addMsg.EquityList[imgIndex].Image = msg.selectId;
this.addMsg.EquityList[imgIndex].ImagePath = msg.url;
}
},
addEquityList() {
let obj = {
Id: 0,
Title: '',
Content: '',
Image: '',
ImagePath: '',
};
this.addMsg.EquityList.push(obj)
},
Delete(index) {
this.addMsg.EquityList.splice(index, 1);
},
Save(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let content = this.$refs.ue.getUEContent();
this.addMsg.MemberSpecification = content;
let cmd = "/api/user/SetMemberGradeInfo";
this.apipost(cmd, this.addMsg,
res => {
if (res.data.resultCode === 1) {
this.goUrl();
} else {
this.Error(res.data.message);
}
},
null
);
} else {
return false;
}
});
},
goUrl() {
this.$router.push({
name: 'MembershipGrade',
query: {
blank: "y"
}
});
},
getData() {
this.loading = true;
this.apipost("/api/user/GetMemberGradeInfo", {
GradeId: this.GradeId
}, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
this.defaultMsg=this.addMsg.MemberSpecification;
}
})
},
getgradeList(){
this.apipost("/api/user/GetMemberGrade", {}, res => {
if (res.data.resultCode == 1) {
this.gradeList = res.data.data;
this.numList.forEach(item=>{
this.gradeList.forEach(val=>{
if(item.Id==val){
item.dis=true;
}
})
})
}
})
},
},
};
</script>
<style>
.setMember .hygz .el-form-item__content {
line-height: inherit !important;
}
.setMember .setTable .el-table__body .cell {
display: flex;
align-items: center;
}
.setMember .commonLabel .el-form-item__label {
margin-top: -4px;
}
.setMember .discount .el-form-item__label {
padding-right: 30px;
margin-top: -4px;
}
.setMember .el-form-item .elzk {
position: absolute;
left: -25px;
top: 8px;
}
.setMember .el-form-item {
position: relative;
}
.usersList .blue {
color: #409EFF;
}
.usersList .content {
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>