|
|
@ -9,196 +9,148 @@ |
|
|
</el-breadcrumb> |
|
|
</el-breadcrumb> |
|
|
</div> |
|
|
</div> |
|
|
<div class="container banner_title"> |
|
|
<div class="container banner_title"> |
|
|
<div class="banner_title_item"> |
|
|
<div class="banner_title_item"> |
|
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
|
|
<img src="../../../assets/img/photo.png" alt="" class="photo"> |
|
|
<p>图片库</p> |
|
|
<p>图片库</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="banner_title_item"> |
|
|
<div class="banner_title_item"> |
|
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
|
|
<img src="../../../assets/img/preview.png" alt="" class="preview"> |
|
|
<p>效果预览</p> |
|
|
<p>效果预览</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="container banner_content"> |
|
|
<div class="container banner_content"> |
|
|
<div class="banner_num"> |
|
|
|
|
|
<span class="banner_num_span">图片数量：</span> |
|
|
|
|
|
<el-select placeholder="请选择图片数量" class="handle-select mr10"> |
|
|
|
|
|
<el-option key="1" label="广东省" value="广东省"></el-option> |
|
|
|
|
|
<el-option key="2" label="湖南省" value="湖南省"></el-option> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="feed_item"> |
|
|
|
|
|
<div class="banner_num"> |
|
|
|
|
|
<span class="banner_num_span">图片1：</span> |
|
|
|
|
|
<el-input placeholder="请输入图片名称"></el-input> |
|
|
|
|
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
|
|
|
|
|
<span class="banner_num_span1">上传图片</span> |
|
|
|
|
|
<span class="banner_num_span1">打开图片库</span> |
|
|
|
|
|
<span class="banner_num_span1">上移</span> |
|
|
|
|
|
<span class="banner_num_span1">下移</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<el-input |
|
|
|
|
|
type="textarea" |
|
|
|
|
|
:rows="4" |
|
|
|
|
|
placeholder="请输入文案" |
|
|
|
|
|
v-model="textarea"> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="feed_item"> |
|
|
|
|
|
<div class="banner_num"> |
|
|
<div class="banner_num"> |
|
|
<span class="banner_num_span">图片2：</span> |
|
|
<span class="banner_num_span">图片数量：</span> |
|
|
<el-input placeholder="请输入图片名称"></el-input> |
|
|
<el-input placeholder="请输入图片数量" v-model.number="banner_num" @input="changeNum()"></el-input> |
|
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
|
|
|
|
|
<span class="banner_num_span1">上传图片</span> |
|
|
|
|
|
<span class="banner_num_span1">打开图片库</span> |
|
|
|
|
|
<span class="banner_num_span1">上移</span> |
|
|
|
|
|
<span class="banner_num_span1">下移</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<el-input |
|
|
<template v-if="banner.length !=0"> |
|
|
type="textarea" |
|
|
<div class="feed_item" v-for="(item,index) in banner.slice(0,banner_num)" :key="index"> |
|
|
:rows="4" |
|
|
|
|
|
placeholder="请输入文案" |
|
|
<div class="banner_num" > |
|
|
v-model="textarea"> |
|
|
<span class="banner_num_span">图片{{index+1}}：</span> |
|
|
</el-input> |
|
|
<el-input placeholder="请输入图片名称" v-model="item.name" readonly></el-input> |
|
|
</div> |
|
|
<el-input placeholder="请选择图片路径" class="banner_num_input" v-model="item.img" readonly></el-input> |
|
|
<div class="feed_item"> |
|
|
<el-upload |
|
|
<div class="banner_num"> |
|
|
class="upload-demo" |
|
|
<span class="banner_num_span">图片3：</span> |
|
|
:action="action" |
|
|
<el-input placeholder="请输入图片名称"></el-input> |
|
|
:on-change="fileChange" |
|
|
<el-input placeholder="请选择图片路径" class="banner_num_input"></el-input> |
|
|
:show-file-list="false" |
|
|
<span class="banner_num_span1">上传图片</span> |
|
|
:on-error="handleAvatarError" |
|
|
<span class="banner_num_span1">打开图片库</span> |
|
|
list-type="picture" |
|
|
<span class="banner_num_span1">上移</span> |
|
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,index)}" |
|
|
<span class="banner_num_span1">下移</span> |
|
|
> |
|
|
|
|
|
<span class="banner_num_span1">上传图片</span> |
|
|
|
|
|
</el-upload> |
|
|
|
|
|
<span class="banner_num_span1">打开图片库</span> |
|
|
|
|
|
<span class="banner_num_span1" @click="moveUp(index)">上移</span> |
|
|
|
|
|
<span class="banner_num_span1" @click="moveDown(index)">下移</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<el-input |
|
|
|
|
|
type="textarea" |
|
|
|
|
|
:rows="4" |
|
|
|
|
|
placeholder="请输入文案" |
|
|
|
|
|
v-model="item.content"> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<div v-if="banner_num!='' || banner_num!=0"> |
|
|
|
|
|
<el-button type="primary" @click="setBanner">保存</el-button> |
|
|
</div> |
|
|
</div> |
|
|
<el-input |
|
|
|
|
|
type="textarea" |
|
|
|
|
|
:rows="4" |
|
|
|
|
|
placeholder="请输入文案" |
|
|
|
|
|
v-model="textarea"> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<!-- 编辑弹出框 --> |
|
|
|
|
|
<el-dialog title="编辑" :visible.sync="editVisible" width="30%"> |
|
|
|
|
|
<el-form ref="form" :model="form" label-width="70px"> |
|
|
|
|
|
<el-form-item label="用户名"> |
|
|
|
|
|
<el-input v-model="form.name"></el-input> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item label="地址"> |
|
|
|
|
|
<el-input v-model="form.address"></el-input> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
|
<el-button @click="editVisible = false">取 消</el-button> |
|
|
|
|
|
<el-button type="primary" @click="saveEdit">确 定</el-button> |
|
|
|
|
|
</span> |
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { fetchData } from '../../../api/index'; |
|
|
import { getFeed,setFeed } from '../../../api/index'; |
|
|
export default { |
|
|
export default { |
|
|
name: 'basetable', |
|
|
|
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
query: { |
|
|
host:'http://wenhua.xingtongworld.com', |
|
|
address: '', |
|
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadimg', |
|
|
name: '', |
|
|
banner_num:'', |
|
|
pageIndex: 1, |
|
|
banner:[] |
|
|
pageSize: 10 |
|
|
|
|
|
}, |
|
|
|
|
|
tableData: [], |
|
|
|
|
|
multipleSelection: [], |
|
|
|
|
|
delList: [], |
|
|
|
|
|
editVisible: false, |
|
|
|
|
|
pageTotal: 0, |
|
|
|
|
|
form: {}, |
|
|
|
|
|
idx: -1, |
|
|
|
|
|
id: -1, |
|
|
|
|
|
pickerOptions: { |
|
|
|
|
|
shortcuts: [ |
|
|
|
|
|
{ |
|
|
|
|
|
text: "最近一周", |
|
|
|
|
|
onClick(picker) { |
|
|
|
|
|
const end = new Date(); |
|
|
|
|
|
const start = new Date(); |
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
|
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "最近一个月", |
|
|
|
|
|
onClick(picker) { |
|
|
|
|
|
const end = new Date(); |
|
|
|
|
|
const start = new Date(); |
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
|
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: "最近三个月", |
|
|
|
|
|
onClick(picker) { |
|
|
|
|
|
const end = new Date(); |
|
|
|
|
|
const start = new Date(); |
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|
|
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.getData(); |
|
|
this.getData(); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
// 获取 easy-mock 的模拟数据 |
|
|
moveDown(index){ |
|
|
getData() { |
|
|
let length=this.banner.length |
|
|
fetchData(this.query).then(res => { |
|
|
if (length!=1) { |
|
|
// console.log(res); |
|
|
let list= this.banner[index + 1]; |
|
|
this.tableData = res.list; |
|
|
this.$set(this.banner, index + 1, this.banner[index]); |
|
|
this.pageTotal = res.pageTotal || 50; |
|
|
this.$set(this.banner, index, list) |
|
|
}); |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 触发搜索按钮 |
|
|
moveUp(index){ |
|
|
handleSearch() { |
|
|
let length=this.banner.length |
|
|
this.$set(this.query, 'pageIndex', 1); |
|
|
if (length!=1) { |
|
|
this.getData(); |
|
|
let list= this.banner[index - 1]; |
|
|
|
|
|
this.$set(this.banner, index - 1, this.banner[index]); |
|
|
|
|
|
this.$set(this.banner, index, list) |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 删除操作 |
|
|
changeNum(){ |
|
|
handleDelete(index, row) { |
|
|
if (this.banner_num>this.banner.length) { |
|
|
// 二次确认删除 |
|
|
let index=this.banner_num-this.banner.length |
|
|
this.$confirm('确定要删除吗？', '提示', { |
|
|
for (let i=0;i<index;i++){ |
|
|
type: 'warning' |
|
|
this.banner.push({name:'',img:''}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
setBanner(){ |
|
|
|
|
|
setFeed(this.banner).then(res=>{ |
|
|
|
|
|
console.info(res) |
|
|
|
|
|
if (res.code==100) { |
|
|
|
|
|
this.$message.success('文件上传成功！'); |
|
|
|
|
|
}else{ |
|
|
|
|
|
this.$message.error(res.msg) |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
.then(() => { |
|
|
|
|
|
this.$message.success('删除成功'); |
|
|
|
|
|
this.tableData.splice(index, 1); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => {}); |
|
|
|
|
|
}, |
|
|
}, |
|
|
// 多选操作 |
|
|
// 获取 easy-mock 的模拟数据 |
|
|
handleSelectionChange(val) { |
|
|
getData() { |
|
|
this.multipleSelection = val; |
|
|
getFeed().then(res => { |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
if (res.code==100) { |
|
|
|
|
|
this.banner =res.data.list |
|
|
|
|
|
if (this.banner.length!=0) { |
|
|
|
|
|
this.banner_num=this.banner.length |
|
|
|
|
|
} |
|
|
|
|
|
}else{ |
|
|
|
|
|
this.$message.error(res.msg) |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
handleAvatarSuccess(res, file, index,key){ |
|
|
|
|
|
console.info(res) |
|
|
|
|
|
console.info(file) |
|
|
|
|
|
if(res.code==1){ |
|
|
|
|
|
let data={name:file.name,img:this.host+res.data.img_url} |
|
|
|
|
|
this.$set(this.banner, index , data); |
|
|
|
|
|
// this.banner.push() |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 编辑操作 |
|
|
handleAvatarError(){ |
|
|
handleEdit(index, row) { |
|
|
this.$message.error('文件上传失败！'); |
|
|
this.idx = index; |
|
|
|
|
|
this.form = row; |
|
|
|
|
|
this.editVisible = true; |
|
|
|
|
|
}, |
|
|
}, |
|
|
// 保存编辑 |
|
|
fileChange(file){ |
|
|
saveEdit() { |
|
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']; |
|
|
this.editVisible = false; |
|
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1; |
|
|
this.$message.success(`修改第 ${this.idx + 1} 行成功`); |
|
|
const isLt3M = file.size / 1024 / 1024 < 3; |
|
|
this.$set(this.tableData, this.idx, this.form); |
|
|
if (!isJPG) { |
|
|
|
|
|
this.$message.error('只能是图片!'); |
|
|
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!isLt3M) { |
|
|
|
|
|
this.$message.error('上传图片大小不能超过 3MB!'); |
|
|
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
|
|
// this.$set(this.query, 'goods_img', ''); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 分页导航 |
|
|
|
|
|
handlePageChange(val) { |
|
|
|
|
|
this.$set(this.query, 'pageIndex', val); |
|
|
|
|
|
this.getData(); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
xiaweibo1
4 years ago