481 行
19 KiB
HTML
可执行文件
481 行
19 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
|
||
<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.2.8.2.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
.select-image-content {
|
||
font-size: 14px;
|
||
width: 100%;
|
||
height: calc(100vh - 340px);
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.select-image-list {
|
||
height: 70px;
|
||
border: 1px solid #ddd;
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
position: relative;
|
||
cursor: default;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.select-image-list-check {
|
||
border: 1px solid #b3d8ff;
|
||
box-shadow: 0 0 5px #409EFF;
|
||
}
|
||
|
||
.select-image-list-img {
|
||
height: 100%;
|
||
}
|
||
|
||
.select-image-big-box {
|
||
background-color: #eee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.select-image-check {
|
||
position: absolute;
|
||
top: -1px;
|
||
left: -1px;
|
||
border: 1px solid #ddd;
|
||
width: 16px;
|
||
height: 16px;
|
||
z-index: 3;
|
||
background-color: white;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.select-image-check:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.select-image-isChecked, .select-image-someChecked {
|
||
border-color: #409eff;
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.select-image-isChecked:before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 9px;
|
||
border-bottom: 2px solid white;
|
||
border-right: 2px solid white;
|
||
transform: rotateZ(45deg);
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 4px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.select-image-someChecked:before {
|
||
content: '';
|
||
width: 9px;
|
||
height: 1px;
|
||
position: absolute;
|
||
background-color: white;
|
||
top: 6px;
|
||
left: 3px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.select-image-flex {
|
||
margin: 10px auto;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.el-upload-list--picture .el-upload-list__item-thumbnail {
|
||
width: auto;
|
||
max-width: 200px;
|
||
height: auto;
|
||
max-height: 70px;
|
||
}
|
||
|
||
.el-upload-list .el-upload-list--text {
|
||
text-align: left;
|
||
}
|
||
|
||
.select-image-tip {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
margin-top: 7px;
|
||
text-align: center;
|
||
padding: 15px;
|
||
}
|
||
|
||
.select-image-top-select {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
}
|
||
|
||
.select-image-top-select > div {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.select-image-search-box {
|
||
width: 200px;
|
||
}
|
||
|
||
.select-image-el-dialog {
|
||
width: 80%;
|
||
min-width: 500px;
|
||
}
|
||
|
||
.select-image-content-left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.select-image-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.select-image-big-image {
|
||
max-width: 100%;
|
||
max-height: calc(100vh - 212px);
|
||
}
|
||
|
||
.select-image-original-name {
|
||
width: 100%;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
color: #666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
background-color: white;
|
||
margin-top: -20px;
|
||
}
|
||
|
||
.list > .input_div {
|
||
width: 600px;
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
.list > .el-button {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.select-image-cursor {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.select-image-cursor:hover {
|
||
color: #409eff;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
Vue.component('template-select-image', {
|
||
template: `<div v-cloak>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="图库图片">
|
||
<div class="select-image-top-select">
|
||
<el-select v-if="selectTypeListC" @change="changeSelectTypeC($event)" clearable filterable size="small"
|
||
v-model="selectTypeC" placeholder="请选择文件来源">
|
||
<el-option
|
||
v-for="item in selectTypeListC"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-if="selectTypeListD.length" filterable clearable size="small"
|
||
v-model="selectTypeD" placeholder="请选择文件来源">
|
||
<el-option
|
||
v-for="item in selectTypeListD"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select filterable size="small"
|
||
clearable
|
||
v-model="fileType" placeholder="请选择文件类型">
|
||
<el-option label="图片" :value="1"></el-option>
|
||
<el-option label="视频" :value="2"></el-option>
|
||
</el-select>
|
||
<div class="select-image-search-box">
|
||
<el-input type="text" size="small" placeholder="搜索图片名称" clearable v-model="searchKey"></el-input>
|
||
</div>
|
||
<el-button type="primary" plain @click="doSearch" size="small">查询</el-button>
|
||
</div>
|
||
<div class="select-image-flex">
|
||
<span>可选<span style="padding-left:5px;font-size: 12px;color: #666">{{checkedLength}}/{{canSelectNum}}</span></span>
|
||
<span @click="refresh" style="color: #409EFF;cursor: pointer">刷新</span>
|
||
</div>
|
||
<div class="select-image-content" id="serverImage" ref="contentBigHeight" :style="'height: calc(100vh - '+((lessHeight?lessHeight:0)+340)+'px);'">
|
||
<div ref="contentHeight">
|
||
<div class="select-image-list" v-for="(item,index) in allFileList" :class="item.checked?'select-image-list-check':''" :key="index" @click="seeBig(item)">
|
||
<img v-if="item.type == 1" v-cloak class="select-image-list-img" :src="item.path">
|
||
<video v-if="item.type == 2" :src="item.path" class="select-image-list-img"></video>
|
||
<div class="select-image-check" :class="item.checked?'select-image-isChecked':''"
|
||
@click.stop="useIt(index)"></div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!canLoad&&allFileList.length" class="select-image-tip">已显示全部</div>
|
||
<div v-else-if="!allFileList" class="select-image-tip">暂无数据</div>
|
||
<div v-if="showGetMore&&canLoad" class="select-image-tip select-image-cursor" @click="getData">获取更多</div>
|
||
</div>
|
||
<div class="select-image-center">
|
||
<el-button type="primary" :disabled="isDisabled" @click="selectImage" size="medium">确定选择</el-button>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-dialog :title="bigImgName" :visible.sync="showBigImage" :width="'80%'" :top="bigImgNameTop" :modal-append-to-body="false" >
|
||
<div class="select-image-big-box" ref="bigImgName">
|
||
<div class="select-image-original-name">原名：{{bigImgOriginalName}}</div>
|
||
<img v-if="bigType==1" class="select-image-big-image" :src="bigImg">
|
||
<video v-if="bigType == 2" :src="bigImg" class="select-image-big-image" controls="controls"></video>
|
||
</div>
|
||
</el-dialog>
|
||
</div>`,
|
||
props: {
|
||
'canSelectNum': {
|
||
type: Number
|
||
},
|
||
'lessHeight': {
|
||
type: Number
|
||
},
|
||
'usedImageList': {
|
||
type: Array
|
||
}
|
||
},
|
||
data: function () {
|
||
return {
|
||
selectTypeListC: {$from_class},
|
||
selectTypeListD: [],
|
||
tempMerchantClass: {$merchantClass},
|
||
tempStoreClass: {$storeClass},
|
||
searchKey: '',
|
||
selectTypeC: '',
|
||
selectTypeD: '',
|
||
fileType: '',
|
||
isUploading: false,
|
||
bigImgName: '图片名称',
|
||
showBigImage: false,
|
||
bigImg: '',
|
||
bigType: 1,
|
||
page: 1,
|
||
canLoad: true,
|
||
limit: 25,
|
||
checkedLength: 0,
|
||
bigImgNameTop: '0px',
|
||
allFileList: [],
|
||
isDisabled: true,
|
||
bigImgOriginalName: '',
|
||
showGetMore: false
|
||
}
|
||
},
|
||
methods: {
|
||
useIt: function (index) {
|
||
var allFileList = JSON.parse(JSON.stringify(this.allFileList));
|
||
if (allFileList[index].checked) {
|
||
allFileList[index].checked = false;
|
||
this.checkedLength = this.checkedLength - 1;
|
||
} else {
|
||
if (this.checkedLength < this.canSelectNum) {
|
||
allFileList[index].checked = true;
|
||
this.checkedLength = this.checkedLength + 1;
|
||
}
|
||
}
|
||
this.allFileList = [];
|
||
this.allFileList = allFileList;
|
||
},
|
||
selectImage: function () {
|
||
var item = [];
|
||
// console.log(this.usedImageList);
|
||
var allFileList = JSON.parse(JSON.stringify(this.allFileList));
|
||
for (var i = 0; i < allFileList.length; i++) {
|
||
if (allFileList[i].checked) {
|
||
if (typeof this.usedImageList == "object") {
|
||
if (this.usedImageList.indexOf(allFileList[i].id) == -1) {
|
||
item.push(JSON.parse(JSON.stringify(allFileList[i])));
|
||
}
|
||
} else {
|
||
item.push(JSON.parse(JSON.stringify(allFileList[i])));
|
||
}
|
||
}
|
||
allFileList[i].checked = false;
|
||
}
|
||
this.allFileList = [];
|
||
this.allFileList = allFileList;
|
||
this.checkindex = [];
|
||
this.checkedLength = 0;
|
||
this.isDataTable = false;
|
||
this.$nextTick(function () {
|
||
this.$emit('selectfile', item);
|
||
}.bind(this))
|
||
},
|
||
doSearch: function () {
|
||
this.page = 1;
|
||
this.canLoad = true;
|
||
this.$nextTick(function () {
|
||
this.getData();
|
||
}.bind(this));
|
||
},
|
||
changeSelectTypeC: function (val) {
|
||
if (val == -1 && this.tempMerchantClass.length) {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
this.selectTypeListD = JSON.parse(JSON.stringify(this.tempMerchantClass));
|
||
} else if (val > 0 && this.tempStoreClass.length) {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
this.selectTypeListD = JSON.parse(JSON.stringify(this.tempStoreClass));
|
||
} else {
|
||
this.selectTypeListD = [];
|
||
this.selectTypeD = '';
|
||
}
|
||
console.log(val);
|
||
},
|
||
seeBig: function (item) {
|
||
this.bigImgName = item.name + '（大小：' + item.size + '）';
|
||
this.bigImgOriginalName = item.original_name;
|
||
this.bigImg = item.path;
|
||
this.bigType = item.type;
|
||
this.showBigImage = true;
|
||
var height = document.body.clientHeight | document.documentElement.clientHeight;
|
||
this.$nextTick(function () {
|
||
// console.log(height, this.$refs.bigImgName.offsetHeight)
|
||
var _height = (this.$refs.bigImgName.offsetHeight + 130) / 2;
|
||
console.log(_height, height)
|
||
if (height > _height) {
|
||
this.bigImgNameTop = 'calc(50vh - ' + _height + 'px)';
|
||
} else {
|
||
this.bigImgNameTop = '0px';
|
||
}
|
||
}.bind(this))
|
||
},
|
||
refresh: function () {
|
||
this.page = 1;
|
||
this.canLoad = true;
|
||
this.getData();
|
||
},
|
||
getData: function () {
|
||
var that = this;
|
||
if (!this.canLoad) {
|
||
return;
|
||
}
|
||
var page = that.page;
|
||
this.$loading({
|
||
lock: true,
|
||
text: '加载中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.post("{:U('Retail/Menu/getGalleryImages')}", {
|
||
page: page,
|
||
limit: that.limit,
|
||
selectTypeC: this.selectTypeC,
|
||
selectTypeD: this.selectTypeD,
|
||
key: this.searchKey,
|
||
fileType: this.fileType,
|
||
}, function (res) {
|
||
if (res.status == 1) {
|
||
var allFileList = JSON.parse(JSON.stringify(that.allFileList));
|
||
if (page == 1) {
|
||
allFileList = res.list;
|
||
} else {
|
||
var list = allFileList;
|
||
var arr = list.concat(res.list);
|
||
allFileList = arr;
|
||
}
|
||
that.page = page + 1;
|
||
that.allFileList = [];
|
||
that.allFileList = allFileList;
|
||
that.$nextTick(function () {
|
||
that.$loading().close();
|
||
if (res.list.length == that.limit) {
|
||
that.canLoad = true;
|
||
} else {
|
||
that.canLoad = false;
|
||
}
|
||
var height1 = this.$refs.contentBigHeight.offsetHeight;
|
||
var height2 = this.$refs.contentHeight.offsetHeight;
|
||
if (height1 > height2) {
|
||
that.showGetMore = true;
|
||
} else {
|
||
that.showGetMore = false;
|
||
}
|
||
})
|
||
} else {
|
||
that.$confirm(res.msg, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'error'
|
||
}).then(() => {
|
||
top.window.location.href = "{:U('Login/index')}"
|
||
}).catch(() => {
|
||
that.$loading().close();
|
||
});
|
||
}
|
||
})
|
||
},
|
||
handleScroll: function (e) {
|
||
var scrollTop = e.target.scrollTop; //变量windowHeight是可视区的高度
|
||
var windowHeight = e.target.clientHeight; //变量scrollHeight是滚动条的总高度
|
||
var scrollHeight = e.target.scrollHeight; //滚动条到底部的条件
|
||
if (scrollTop + windowHeight == scrollHeight) {
|
||
// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
|
||
this.getData();
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
checkedLength: function () {
|
||
if (this.checkedLength > 0) {
|
||
this.isDisabled = false;
|
||
} else {
|
||
this.isDisabled = true;
|
||
}
|
||
},
|
||
usedImageList: function () {
|
||
this.checkedLength = 0;
|
||
for (var i = 0; i < this.allFileList.length; i++) {
|
||
if (this.usedImageList.indexOf(this.allFileList[i].id) != -1) {
|
||
this.allFileList[i].checked = true;
|
||
this.checkedLength++;
|
||
} else {
|
||
this.allFileList[i].checked = false;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
document.getElementById('serverImage').addEventListener('scroll', this.handleScroll, true);
|
||
},
|
||
created: function () {
|
||
this.getData();
|
||
},
|
||
});
|
||
|
||
</script> |