427 行
18 KiB
HTML
可执行文件
427 行
18 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
||
<style>
|
||
.goods_edit {
|
||
padding: 0 0 10px;
|
||
}
|
||
|
||
.el-pagination {
|
||
padding: 8px;
|
||
}
|
||
|
||
span[type='text'] {
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
cursor: pointer;
|
||
}
|
||
|
||
span[type='text']::selection {
|
||
background-color: transparent;
|
||
}
|
||
|
||
span[type='text']:active {
|
||
color: #999;
|
||
}
|
||
|
||
.lavel-discount-setting{
|
||
width: 100%;
|
||
/*height: 100px;*/
|
||
/*background-color: #999;*/
|
||
}
|
||
|
||
</style>
|
||
<div class="goodsBox" id="vipGroups" v-cloak>
|
||
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="等级设置" name="first">
|
||
|
||
<div class="goods_edit">
|
||
<if condition="$authArr['groupSet'] eq true">
|
||
<el-button type="primary" size="small" @click="createGroup">新增会员等级</el-button>
|
||
</if>
|
||
</div>
|
||
<div>
|
||
<el-table border :data="gradeList" style="width: calc(100% - 5px);">
|
||
<el-table-column type="index" label="序号" width="50"></el-table-column>
|
||
<el-table-column prop="cardname" label="等级名称" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="img" label="等级图标" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<img style="max-height: 70px" :src="scope.row.gradeimgurl">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="min_integral" label="最低积分" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="grade" label="等级" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="discount" label="享受折扣" show-overflow-tooltip></el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="130" style="border-right: none;">
|
||
<template slot-scope="scope">
|
||
<if condition="$authArr['groupSet'] eq true">
|
||
<el-button @click.native.prevent="edit(scope.$index)" type="text" size="small">编辑</el-button>
|
||
</if>
|
||
<if condition="$authArr['groupDel'] eq true">
|
||
<span @click="deleteGrade(scope.$index)" type="text">删除</span>
|
||
</if>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
||
:page-size="100"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="len">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
|
||
|
||
<el-tab-pane label="特殊等级折扣" name="second">
|
||
|
||
<div class="lavel-discount-setting">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="时间" >
|
||
<el-select v-model="form.week" placeholder="请选择时间">
|
||
<el-option label="周一" value="1"></el-option>
|
||
<el-option label="周二" value="2"></el-option>
|
||
<el-option label="周三" value="3"></el-option>
|
||
<el-option label="周四" value="4"></el-option>
|
||
<el-option label="周五" value="5"></el-option>
|
||
<el-option label="周六" value="6"></el-option>
|
||
<el-option label="周日" value="7"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="享受折扣">
|
||
<el-input type="number" v-model="form.discount" style="width:70%" placeholder="请输入会员所享受的折扣(如0.95)" ></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">立即提交</el-button>
|
||
<!--<el-button>取消</el-button>-->
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
|
||
<el-dialog :title="title" :modal-append-to-body="false" :visible.sync="showSetGrade" :width="'450px'"
|
||
:close-on-click-modal="false" :before-close="closeSetGrade">
|
||
<el-form label-width="100px" id="form">
|
||
<input type="hidden" name="id" v-model="ruleForm.id">
|
||
<el-form-item label="等级名称" required>
|
||
<el-input type="text" name="cardname" v-model="ruleForm.cardname" auto-complete="off"
|
||
placeholder="如：普通会员"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="等级" required>
|
||
<el-input type="number" name="grade" v-model="ruleForm.grade" auto-complete="off"
|
||
placeholder="如：1"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所需积分" required>
|
||
<el-input type="number" name="min_integral" v-model="ruleForm.min_integral" auto-complete="off"
|
||
placeholder="所需最少积分"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="享受折扣" required>
|
||
<el-input type="number" name="discount" v-model="ruleForm.discount" auto-complete="off"
|
||
placeholder="范围（0.01~1）如：0.1"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="等级图片" required>
|
||
<label class="file_label" style="margin-right: 10px;display: block">
|
||
<input type="hidden" name="gradeimgurl_id" v-model="ruleForm.gradeimgurl_id"/>
|
||
<input type="file" name="gradeimgurl" placeholder="选择图片" accept="image/png,image/jpeg"/>
|
||
<img id="head_url" style="max-width: 200px" :src="ruleForm.img">
|
||
</label>
|
||
<el-button plain size="small" @click="selectImage('gradeimgurl')"
|
||
>图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片" placement="top-start">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="center" style="margin-top: 50px">
|
||
<el-button type="primary" size="medium" @click="save">保存</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage"
|
||
custom-class="select-image-el-dialog" :top="'10px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
var vipGroups = new Vue({
|
||
el: '#vipGroups',
|
||
data: function () {
|
||
return {
|
||
showSelectImage: false,
|
||
actFileName: '',
|
||
showSetGrade: false,
|
||
title: '添加等级',
|
||
gradeList: [],
|
||
len: 0,
|
||
currentPage: 1,
|
||
currentLimit: 10,
|
||
ruleForm: {
|
||
grade: '',
|
||
min_integral: '',
|
||
discount: '',
|
||
cardname: '',
|
||
id: 0,
|
||
img: '__PUBLIC__/paper/images/wx_add.png',
|
||
gradeimgurl_id: 0
|
||
},
|
||
editIndex: -1,
|
||
activeName:'first',
|
||
form:{
|
||
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
closeSetGrade: function () {
|
||
$("input[name='gradeimgurl']").val('');
|
||
this.showSetGrade = false;
|
||
},
|
||
handleClick:function(e,e1){
|
||
// console.log(e,e1)
|
||
// this.activeName = e
|
||
},
|
||
onSubmit:function(e){
|
||
if(!this.form.week){
|
||
this.$message.error("请选择时间")
|
||
return false
|
||
}
|
||
|
||
if(!this.form.discount){
|
||
this.$message.error("请输入折扣")
|
||
return false
|
||
}
|
||
var that = this
|
||
$.post("{:U('Retail/Vip/submitDiscount')}",this.form,function(res){
|
||
if(res.status == 1){
|
||
that.$message.success(res.msg)
|
||
}else{
|
||
that.$message.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
createGroup: function () {
|
||
this.showSetGrade = true;
|
||
this.title = '添加等级';
|
||
this.editIndex = -1;
|
||
this.ruleForm = {
|
||
grade: '',
|
||
min_integral: '',
|
||
discount: '',
|
||
cardname: '',
|
||
id: 0,
|
||
img: '__PUBLIC__/paper/images/wx_add.png',
|
||
gradeimgurl_id: 0
|
||
};
|
||
this.$nextTick(function () {
|
||
var that = this;
|
||
$("input[type='file']").on('change', function () {
|
||
if (this.files.length) {
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
that.ruleForm.img = this.result;
|
||
that.ruleForm.gradeimgurl_id = 0;
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}.bind(this));
|
||
},
|
||
edit: function (index) {
|
||
var gradeList = JSON.parse(JSON.stringify(this.gradeList));
|
||
this.ruleForm = {
|
||
grade: gradeList[index].grade,
|
||
min_integral: gradeList[index].min_integral,
|
||
discount: gradeList[index].discount,
|
||
cardname: gradeList[index].cardname,
|
||
id: gradeList[index].id,
|
||
img: gradeList[index].gradeimgurl,
|
||
gradeimgurl_id: gradeList[index].gradeimgurl_id,
|
||
};
|
||
this.showSetGrade = true;
|
||
this.editIndex = index;
|
||
this.$nextTick(function () {
|
||
var that = this;
|
||
$("input[type='file']").on('change', function () {
|
||
if (this.files.length) {
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
that.ruleForm.img = this.result;
|
||
that.ruleForm.gradeimgurl_id = 0;
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}.bind(this));
|
||
},
|
||
deleteGrade: function (index) {
|
||
var that = this;
|
||
console.log(index)
|
||
this.$confirm('删除后会员等级可能产生变动,请谨慎操作！确定要删除吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
$.post("{:U('Retail/Vip/groupDel')}", {
|
||
id: that.gradeList[index].id
|
||
}, function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
var gradeList = JSON.parse(JSON.stringify(that.gradeList));
|
||
gradeList.splice(index, 1);
|
||
that.gradeList = [];
|
||
that.gradeList = gradeList;
|
||
that.len--;
|
||
} else {
|
||
that.$message({
|
||
type: 'warning',
|
||
message: res.msg
|
||
});
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getData();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
this.getData();//切换页数
|
||
},
|
||
selectFile: function (item) {
|
||
console.log(item);
|
||
this.showSelectImage = false;
|
||
if (item.length) {
|
||
$("input[name='" + this.actFileName + "']").val('');
|
||
this.ruleForm.gradeimgurl_id = item[0].id;
|
||
this.ruleForm.img = item[0].path;
|
||
}
|
||
},
|
||
selectImage: function (actName) {
|
||
this.actFileName = actName;
|
||
this.showSelectImage = true;
|
||
},
|
||
getWeekDiscount:function(){
|
||
var that = this
|
||
$.post("{:U('Retail/Vip/getWeekDiscount')}",{},function(res){
|
||
that.form = res.data
|
||
})
|
||
},
|
||
getData: function () {
|
||
var that = this;
|
||
$.post("{:U('groupList')}", {
|
||
page: this.currentPage,
|
||
limit: this.currentLimit
|
||
}, function (res) {
|
||
if (res.status == 1) {
|
||
that.gradeList = [];
|
||
that.gradeList = res.data;
|
||
that.len = res.count;
|
||
that.currentPage = that.currentPage + 1;
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'warning',
|
||
duration: 1000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
save: function () {
|
||
var gradeimgurl = $("input[name='gradeimgurl']").val();
|
||
if ((!this.ruleForm.gradeimgurl_id && !gradeimgurl) || !this.ruleForm.cardname || !this.ruleForm.grade || !this.ruleForm.min_integral || !this.ruleForm.discount) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请完善设置',
|
||
duration: 1000
|
||
});
|
||
return false;
|
||
}
|
||
if (parseFloat(this.ruleForm.discount) < 0.01 || parseFloat(this.ruleForm.discount) > 1) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '等级折扣值不正确',
|
||
duration: 1000
|
||
});
|
||
return false;
|
||
}
|
||
var fd = new FormData(document.getElementById('form'));
|
||
var that = this;
|
||
this.$loading({
|
||
lock: true,
|
||
text: '保存中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('groupSet')}",
|
||
type: "POST",
|
||
data: fd,
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
onClose: function () {
|
||
$("input[name='gradeimgurl']").val('');
|
||
that.showSetGrade = false;
|
||
that.currentPage = 1;
|
||
that.getData();
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
that.$message({
|
||
type: 'error',
|
||
message: '出错了！',
|
||
duration: 1000
|
||
});
|
||
that.$loading().close();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
|
||
},
|
||
created: function () {
|
||
this.getData();
|
||
this.getWeekDiscount()
|
||
}
|
||
});
|
||
|
||
</script> |