310 行
14 KiB
HTML
可执行文件
310 行
14 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--[1.6.48]-->
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>轮播图</title>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css?v=1.0.3">
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js?v=1.0.3"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<div id="Cash" v-cloak>
|
||
<div style="margin-bottom:10px;">
|
||
<el-button type="primary" size="mini" @click="setLabel">添加背景图</el-button>
|
||
</div>
|
||
<div>
|
||
<el-dialog title="背景图" :visible.sync="showSetLabel">
|
||
<el-form id="label_form">
|
||
<el-form-item style="text-align: center;">
|
||
<label class="file_label" style="display: block;margin-top:10px;">
|
||
<input type="hidden" name="label_img_id" value=""/>
|
||
<input @change="changeLabelImage" type="file" name="label_img" placeholder="选择背景图片"
|
||
accept="image/png,image/jpeg,image/gif"/>
|
||
<img id="label_url" style="max-width: 200px" src=""
|
||
onerror="this.onerror=null;this.src='__PUBLIC__/paper/images/wx_add.png'">
|
||
</label>
|
||
<el-button plain size="mini" @click="selectImageLabel" style="margin-left:210px">图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片"
|
||
placement="top-start">
|
||
<i class="el-icon-question"></i></el-tooltip>
|
||
</el-button>
|
||
<span class="suggest">建议尺寸：60 x 60，或等比例图片</span>
|
||
</el-form-item>
|
||
<el-form-item style="text-align: center;">
|
||
<el-input v-model="order" placeholder="请输入排序" size="small"
|
||
style="width:250px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item style="display: flex;justify-content: center;">
|
||
<el-button type="primary" size="mini" @click="labelAdd"
|
||
style="margin:10px;" id="loadingOne">确定
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
<div style="border: 1px solid #e6e6e6;max-width: calc(100vw - 208px);">
|
||
<el-table :data="BackgroundList" :highlight-current-row="true" border size="mini"
|
||
style="width: calc(100vw - 208px);box-sizing: border-box;">
|
||
<el-table-column type="index" label="序号" align="center"></el-table-column>
|
||
<el-table-column label="背景图" align="center">
|
||
<template slot-scope="scope">
|
||
<a :href="scope.row.img" target="_blank">
|
||
<img style="width:auto;height: 200px;" :src="scope.row.img">
|
||
</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.status"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
:active-text="scope.row.status == 1 ? '开启' : '关闭'"
|
||
@change="changeStatus(scope.row.id,scope.row.status)">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sort" label="排序" align="center"></el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="labelEdit(scope.$index,scope.row.sort)">编辑
|
||
</el-button>
|
||
<el-button size="mini" type="text" @click="delLabel(scope.row.id)">删除</el-button>
|
||
</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="currentLen">
|
||
</el-pagination>
|
||
</el-pagination>
|
||
</div>
|
||
<!-- 选择图片 -->
|
||
<el-dialog title="选择图片" modal-append-to-body="false"
|
||
:visible.sync="label_show_close_image" custom-class="select-image-el-dialog" :top="'10px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFileLabel"></template-select-image>
|
||
</el-dialog>
|
||
</div>
|
||
<script type="text/javascript">
|
||
new Vue({
|
||
el: "#Cash",
|
||
data: {
|
||
showSetLabel: false,
|
||
label_show_close_image: false,
|
||
BackgroundList: [],
|
||
currentPage: 1,
|
||
currentLimit: 10,
|
||
currentLen: 0,
|
||
editId: '',
|
||
order: '',
|
||
img:"__PUBLIC__/paper/images/wx_add.png"
|
||
},
|
||
methods: {
|
||
handleCurrentChange: function (val) {
|
||
this.currentPage = val;
|
||
this.getData();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getData();
|
||
},
|
||
//添加背景图
|
||
setLabel: function () {
|
||
this.showSetLabel = true;
|
||
this.sort = "";
|
||
$("input[name='label_img_id']").val('');
|
||
},
|
||
changeLabelImage: function () {
|
||
if (window.event.target.files.length) {
|
||
var that = this;
|
||
var imgObj = window.event.target.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$("input[name='label_img_id']").val('');
|
||
$("input[name='label_img']").next('img').attr('src', this.result);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
selectImageLabel: function () {
|
||
this.label_show_close_image = true;
|
||
},
|
||
selectFileLabel: function (item) {
|
||
//选择文件
|
||
this.label_show_close_image = false;
|
||
if (!item.length) {
|
||
$("input[name='label_img']").click();
|
||
} else {
|
||
$("input[name='label_img_id']").val(item[0].id);
|
||
$("input[name='label_img']").val('');
|
||
$("input[name='label_img']").next('img').attr('src', item[0].path);
|
||
}
|
||
},
|
||
//添加编辑操作
|
||
labelAdd: function () {
|
||
var that = this;
|
||
var form_data = new FormData(document.getElementById('label_form'));
|
||
form_data.append("order", JSON.stringify(that.order));
|
||
form_data.append("editId", JSON.stringify(that.editId)); // 压入data数据
|
||
const loadsing = that.$loading({
|
||
target:"#loadingOne",
|
||
lock: true,
|
||
text: '保存中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('selfCashImgAdd')}",
|
||
type: "POST",
|
||
data: form_data,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: function () {
|
||
that.editId = '';
|
||
$("#label_url").attr('src', "__PUBLIC__/paper/images/wx_add.png");
|
||
that.order = "";
|
||
loadsing.close();
|
||
that.getData();
|
||
that.showSetLabel = false;
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//列表
|
||
getData: function () {
|
||
var that = this;
|
||
$.ajax({
|
||
url: "{:U('selfCashImgList')}",
|
||
type: "post",
|
||
data: {
|
||
page: that.currentPage,
|
||
limit: that.currentLimit
|
||
},
|
||
success: function (res) {
|
||
that.BackgroundList = [];
|
||
that.BackgroundList = res.imgList;
|
||
that.$nextTick(function () {
|
||
that.currentLen = parseInt(res.count);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//开启关闭
|
||
changeStatus: function (id, status) {
|
||
var that = this;
|
||
$.ajax({
|
||
url: "{:U('changeState')}",
|
||
type: "post",
|
||
data: {
|
||
id: id,
|
||
status: status
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: "success",
|
||
message: res.msg,
|
||
duration: 1000
|
||
})
|
||
} else {
|
||
that.$message({
|
||
type: "warning",
|
||
message: res.msg,
|
||
duration: 1000
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
labelEdit: function (index, sort) {
|
||
var that = this;
|
||
that.showSetLabel = true;
|
||
var data = that.BackgroundList[index];
|
||
that.$nextTick(function () {
|
||
that.editId = data.id;
|
||
that.order = data.order;
|
||
$("input[name='label_img_id']").val(data.img_id);
|
||
$("#label_url").attr('src', data.img);
|
||
that.order = sort;
|
||
})
|
||
},
|
||
//删除
|
||
delLabel: function (id) {
|
||
var that = this;
|
||
that.$confirm('此操作将删除该图片, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "{:U('delList')}",
|
||
type: "POST",
|
||
data: {
|
||
id: id,
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: function () {
|
||
that.getData();
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
that.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
},
|
||
created: function () {
|
||
this.getData();
|
||
}
|
||
})
|
||
</script> |