<template>
<div class="setMember usersList">
<div class="head-title">
<span @click="goUrl" class="blue">会员等级</span> / 会员设置
</div>
<div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
<el-form-item label="会员等级" prop="name">
<el-select style="width:293px;" size="small" v-model="addMsg.name" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="等级名称" prop="name">
<el-input style="width:293px;" size="small" v-model="addMsg.name"></el-input>
</el-form-item>
<el-form-item class="discount commonLabel" label="折扣" prop="name">
<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.name" class="input-with-select">
<el-button slot="append">折</el-button>
</el-input>
</el-form-item>
<el-form-item label="会员状态" prop="name">
<el-switch
v-model="addMsg.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="会员图标" prop="name">
<el-button @click="openChangeDig" size="small">选择文件</el-button>
<div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
</el-form-item>
<el-form-item label="会员背景色" prop="name">
<el-button @click="openChangeDig" size="small">选择文件</el-button>
<div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
</el-form-item>
<el-form-item label="累计金额自动升级">
<el-switch
v-model="addMsg.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="升级条件" prop="name">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容" v-model="addMsg.name" 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.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="购买价格" prop="name">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入购买价格" v-model="addMsg.name" class="input-with-select">
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item label="h会员权益(多条)">
<div style="width:700px;">
<el-table class="setTable"
:data="tableData"
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="input" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column
prop="address"
width="180px"
label="权益图标">
<template slot-scope="scope">
<el-button @click="openChangeDig" size="small">选择图片</el-button>
<img style="margin-left: 10px;width:50px;height:50px" src="../../assets/img/default.png" 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="textarea">
</el-input>
</template>
</el-table-column>
<el-table-column
prop="address"
width="80px"
label="操作">
<template>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<img style="width:32px;height:32px" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div>
<i class="el-icon-plus" style="font-weight: bolder;margin-left:5px;color:#409EFF"></i>
<span style="color: rgb(53, 53, 53);font-size: 14px;">新增权益</span>
</div>
</el-form-item>
<el-form-item label="会员规则" prop="name">
</el-form-item>
</el-form>
</div>
<div style="margin-top:20px">
<el-button size="small" type="primary" @click="dialogVisible = false">保存</el-button>
</div>
<!-- 选择文件 -->
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<el-row style="border: 1px solid rgb(227, 227, 227);">
<el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
<el-button style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组</el-button>
<div style="margin:20px 0">
<el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
</div>
<div class="el-scrollbar" style="height: 450px; width: 100%;">
<div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
<div class="el-scrollbar__view">
<li class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
<i class="el-icon-tickets"></i>
<span>全部</span>
</li>
<li v-for="item in 9" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
<div flex="dir:left box:last">
<el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
<i class="el-icon-tickets"></i>
<span>羊肚菌</span>
</el-col>
<el-col class="blue" :span="6">
<span>编辑</span> | <span>删除</span>
</el-col>
</div>
</li>
</div>
</div>
</div>
</el-col>
<el-col :span="18">
<div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
<el-input size="small" style="width:250px" placeholder="请输入内容" v-model="val">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<div class="basefix app-attachment-list">
<div class="app-attachment-item app-attachment-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
<i class="el-icon-upload"></i>
<input type="file" accept="image/*" multiple="multiple" style="display: none;">
</div>
</div>
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<div class="el-tooltip item app-attachment-item" >
<img src="https://cdnimg.iotweixin.com/uploads/mall1285/20200422/58aac71950e2d86e6d7138484a3f7f7e.jpg" class="app-attachment-img" style="width: 100px; height: 100px;">
<div class="app-attachment-name">微信图片_20200422125658.jpg</div>
</div>
</el-tooltip>
</div>
<div>
<el-pagination style="text-align:right"
background
:current-page="currentPage4"
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="changeState = false">选定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
currentPage4:3,
changeState:false,
val:'',
addMsg:{},
dialogVisible:false,
value:'',
options:[],
tableData:[
{ID:'111'}
],
msg:{
pageIndex:1,
pageSize:15,
},
total:0,
rules: {
name: [
{ required: true, message: '新手机号', trigger: 'blur' }
],
},
};
},
created() {
},
methods: {
openChangeDig(){
this.changeState=true;
},
goUrl(){
this.$router.push({
name: 'MembershipGrade',
query: {
blank: "y"
}
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList(){
},
},
mounted() {
}
};
</script>
<style>
.setMember .app-attachment-name {
color: #666666;
margin-top: 5px;
font-size: 13px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.setMember .app-attachment-item .app-attachment-img {
display: block;
}
.setMember .app-attachment-upload i {
font-size: 30px;
color: #909399;
}
.setMember .app-attachment-item {
display: inline-block;
cursor: pointer;
position: relative;
float: left;
width: 120px;
height: 140px;
margin: 7.5px;
text-align: center;
padding: 10px 10px 0;
}
.setMember .app-attachment-upload {
box-shadow: none;
border: 1px dashed #b2b6bd;
height: 100px;
width: 100px;
margin: 17.5px;
padding: 0;
}
.setMember .app-attachment-list{
padding: 5px;
}
.setMember .appendInput .el-input__inner{
border-right: none;
}
.setMember .appendInput .el-input-group__append{
background-color: #fff!important;
border-left: none;
padding: 0 15px;
}
.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>