280 行
11 KiB
HTML
可执行文件
280 行
11 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>
|
||
.image_slide_show {
|
||
display: block;
|
||
font-size: 80px;
|
||
font-weight: 100;
|
||
color: #bbb;
|
||
width: 210px;
|
||
height: 130px;
|
||
text-align: center;
|
||
line-height: 126px;
|
||
margin-right: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.file_label > input {
|
||
width: 100px;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.close {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
color: white;
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close::selection {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.image_slide_show:hover > .close {
|
||
display: block;
|
||
}
|
||
|
||
.close:hover {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
body, html {
|
||
position: relative;
|
||
}
|
||
|
||
i {
|
||
color: #999999;
|
||
}
|
||
|
||
.banner_wrap {
|
||
position: relative;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak>
|
||
<el-radio size="mini" v-model="type" label="1" border @change="ScreenOperation">与主频一致</el-radio>
|
||
<el-radio size="mini" v-model="type" label="2" border @change="ScreenOperation">图片/视频</el-radio>
|
||
<form id="form" style="padding: 20px 0 100px;">
|
||
<div style="display: none">
|
||
<input type="file" name="image" id="image">
|
||
<input type="hidden" name="image_id">
|
||
<input type="hidden" name="image_type">
|
||
</div>
|
||
<div class="pic_set">
|
||
<div style="margin-left: 53px">
|
||
<el-button type="primary" size="small" @click="localImage">本地图片/视频</el-button>
|
||
<el-button type="primary" size="small" @click="selectImage('image')">图库图片/视频</el-button>
|
||
<i style="color: #c2ccd1;font-size: 15px;">建议尺寸：414 x 204，或等比例图片,视频小于10M</i>
|
||
</div>
|
||
<div style="display: flex;padding: 10px 50px;flex-wrap: wrap;">
|
||
<div class="banner_wrap" v-for="(item,index) in checkStand">
|
||
<img :src="item.image" class="image_slide_show" v-if="item.type == 1">
|
||
<video v-if="item.type == 2" :src="item.image" class="image_slide_show"
|
||
controls="controls">
|
||
</video>
|
||
<span class="close" @click="del(index)">X</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<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>
|
||
</body>
|
||
<script type="text/javascript">
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
showSelectImage: false,
|
||
actFileName: '',
|
||
checkStand: {$checkStand},
|
||
type:'{$type}'
|
||
}
|
||
},
|
||
methods: {
|
||
ScreenOperation:function(){
|
||
var that = this;
|
||
$.ajax({
|
||
url:"{:U('ScreenOperation')}",
|
||
type:"post",
|
||
data:{
|
||
type:that.type
|
||
},
|
||
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,
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
selectFile: function (item) {
|
||
if (item.length) {
|
||
$('input[name="'+this.actFileName+'"]').val('');
|
||
$("input[name='" + this.actFileName + "_id']").val(item[0].id);
|
||
$("input[name='" + this.actFileName + "_type']").val(item[0].type);
|
||
this.addBanner(item[0].path,item[0].type);
|
||
}
|
||
this.showSelectImage = false;
|
||
},
|
||
selectImage: function (actName) {
|
||
this.actFileName = actName;
|
||
this.showSelectImage = true;
|
||
},
|
||
localImage:function () {
|
||
$('#image').click();
|
||
},
|
||
del: function (index) {
|
||
var that = this;
|
||
this.$confirm("确认要删除该文件吗?", "温馨提示", {
|
||
confirmButtonText: '删除',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
that.$loading({
|
||
lock: true,
|
||
text: '删除中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
var checkStand = JSON.parse(JSON.stringify(that.checkStand));
|
||
$.post("{:U('checkStandDel')}", {
|
||
id: checkStand[index].id
|
||
}, function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'success',
|
||
duration: 1000
|
||
});
|
||
checkStand.splice(index, 1);
|
||
that.checkStand = [];
|
||
that.checkStand = checkStand;
|
||
} else {
|
||
that.$message({
|
||
message: res.msg,
|
||
type: 'error',
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
addBanner:function (path,type) {
|
||
var fd = new FormData(document.getElementById('form'));
|
||
var that = this;
|
||
that.$loading({
|
||
lock: true,
|
||
text: '上传中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('addCheckStand')}",
|
||
type: "POST",
|
||
data: fd,
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
$('input[name="'+this.actFileName+'"]').val('');
|
||
if (res.status == 1) {
|
||
var checkStand = JSON.parse(JSON.stringify(that.checkStand));
|
||
var obj = {
|
||
id: res.id,
|
||
image: path,
|
||
type:type,
|
||
}
|
||
checkStand.unshift(obj);
|
||
that.checkStand = [];
|
||
that.checkStand = checkStand;
|
||
that.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
});
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
error:function () {
|
||
that.$loading().close();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
$("input[type='file']").on('change', function () {
|
||
if (this.files.length) {
|
||
var that = this;
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
var videoType = ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
app.addBanner(this.result,1);
|
||
}
|
||
}else if(jQuery.inArray(imgObj.type, videoType) != -1){
|
||
//视频
|
||
const isLt10M = imgObj.size / 1024 / 1024 < 10;
|
||
if (!isLt10M) {
|
||
this.$message.error('上传视频大小不能超过10MB哦!');
|
||
return false;
|
||
}
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
console.log(this.result);
|
||
app.addBanner(this.result,2);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
</html> |