232 行
9.3 KiB
HTML
可执行文件
232 行
9.3 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--[1.8.50]-->
|
||
<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 style="max-width: calc(100vw - 208px);">
|
||
<el-table :data="BackgroundList" :highlight-current-row="true" border size="mini"
|
||
:header-cell-style="{background:'#F5F7FA',color:'#606266'}"
|
||
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="max-height: 100px;max-width: 95%" :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" style="color: #999" @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="轮播图" :append-to-body="true" :visible.sync="showSetLabel">
|
||
<el-form id="label_form">
|
||
<el-form-item style="text-align: center;">
|
||
<choose-one-file :file-url.sync="label_img"
|
||
:file-id.sync="label_img_id"
|
||
:select-file-type="1"></choose-one-file>
|
||
<div class="suggest">建议尺寸：750 x 274，或等比例图片</div>
|
||
</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="medium" @click="labelAdd"
|
||
style="margin:10px;" :loading="loading">确定
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
<script type="text/javascript">
|
||
new Vue({
|
||
el: "#Cash",
|
||
data: {
|
||
showSetLabel: false,
|
||
label_show_close_image: false,
|
||
loading: false,
|
||
BackgroundList: [],
|
||
currentPage: 1,
|
||
currentLimit: 10,
|
||
currentLen: 0,
|
||
editId: '',
|
||
order: '',
|
||
label_img: '',
|
||
label_img_id: '',
|
||
},
|
||
methods: {
|
||
handleCurrentChange: function (val) {
|
||
this.currentPage = val;
|
||
this.getData();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getData();
|
||
},
|
||
//添加轮播图
|
||
setLabel: function () {
|
||
this.resetImgData()
|
||
this.showSetLabel = true;
|
||
},
|
||
resetImgData() {
|
||
this.editId = '';
|
||
this.label_img = '';
|
||
this.label_img_id = '';
|
||
this.order = '';
|
||
},
|
||
//添加编辑操作
|
||
labelAdd() {
|
||
if (this.loading) return;
|
||
this.loading = true
|
||
$.ajax({
|
||
url: "{:U('advanceImgAdd')}",
|
||
type: "POST",
|
||
data: {
|
||
label_img: this.label_img,
|
||
label_img_id: this.label_img_id,
|
||
order: this.order,
|
||
editId: this.editId,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000,
|
||
onClose: () => {
|
||
this.resetImgData()
|
||
this.loading = false
|
||
this.getData();
|
||
this.showSetLabel = false;
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//列表
|
||
getData() {
|
||
$.ajax({
|
||
url: "{:U('advanceImgList')}",
|
||
type: "post",
|
||
data: {
|
||
page: this.currentPage,
|
||
limit: this.currentLimit
|
||
},
|
||
success: (res) => {
|
||
this.BackgroundList = [];
|
||
this.BackgroundList = res.imgList;
|
||
this.$nextTick(() => {
|
||
this.currentLen = parseInt(res.count);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//开启关闭
|
||
changeStatus(id, status) {
|
||
$.ajax({
|
||
url: "{:U('advanceChange')}",
|
||
type: "post",
|
||
data: {
|
||
id: id,
|
||
status: status
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message.success(res.msg)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
labelEdit(index, sort) {
|
||
this.showSetLabel = true;
|
||
var data = this.BackgroundList[index];
|
||
this.editId = data.id;
|
||
this.order = data.order;
|
||
this.label_img_id = data.img_id;
|
||
this.label_img = data.img;
|
||
this.order = sort;
|
||
},
|
||
//删除
|
||
delLabel(id) {
|
||
this.$confirm('此操作将删除该图片, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "{:U('advanceDelList')}",
|
||
type: "POST",
|
||
data: {
|
||
id: id,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message.success(res.msg)
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
},
|
||
created: function () {
|
||
this.getData();
|
||
}
|
||
})
|
||
</script> |