first commit
This commit is contained in:
GYJ
1834
src/views/locality/locality.vue
Normal file
1834
src/views/locality/locality.vue
Normal file
File diff suppressed because it is too large
Load Diff
245
src/views/locality/materialLink.vue
Normal file
245
src/views/locality/materialLink.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style = "float: right;margin-right:2%;">
|
||||
<el-button style = "margin: 10px 0;" :disabled = "!isAuth('materialLink:add')" size = "mini" type = "primary" icon = "document"
|
||||
@click = "advertNotice">添加素材</el-button>
|
||||
</div>
|
||||
<el-table v-loading = "tableDataLoading" :data = "guangaoData">
|
||||
<el-table-column fixed prop = "id" label = "编号" width = "80"></el-table-column>
|
||||
<el-table-column prop = "imgUrl" label = "素材图片" width="180">
|
||||
<template slot-scope = "scope">
|
||||
<img :src = "scope.row.image_url" alt = "" width = "170px" height = "60">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop = "url" label = "素材链接"></el-table-column>
|
||||
<el-table-column prop = "createAt" label = "创建时间" width="180"></el-table-column>
|
||||
<el-table-column label = "操作" width = "150">
|
||||
<template slot-scope = "scope">
|
||||
<el-button size = "mini" type = "primary" :disabled = "!isAuth('materialLink:update')"
|
||||
@click = "advertUpdates(scope.row)">修改</el-button>
|
||||
<el-button size = "mini" type = "danger" :disabled = "!isAuth('materialLink:delete')"
|
||||
@click = "advertdeletes(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 添加素材 -->
|
||||
<el-dialog title = "添加素材" :visible.sync = "dialogFormVisible" center>
|
||||
<div style = "margin-bottom: 10px;display: flex;">
|
||||
<span style = "width: 200px;display: inline-block;text-align: right;">素材图片：</span>
|
||||
<div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
|
||||
<el-upload class = "avatar-uploader" v-model = "imgUrl" :action="$http.adornUrl('alioss/upload')"
|
||||
:show-file-list = "false" :on-success = "handleAvatarSuccess">
|
||||
<img v-if = "imgUrl" :src = "imgUrl" class = "avatar" style = "border-radius: 6px;width:148px;height: 148px;"/>
|
||||
<i v-else class = "el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div style = "margin-bottom: 10px;">
|
||||
<span style = "width: 200px;display: inline-block;text-align: right;position: relative;top: -68px;">素材地址：</span>
|
||||
<el-input style = "width:50%;" v-model = "linkUrl" placeholder = "请输入素材地址" type = "textarea" :rows = "4"></el-input>
|
||||
</div>
|
||||
<div slot = "footer" class = "dialog-footer">
|
||||
<el-button @click = "dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type = "primary" @click = "advertNoticeTo()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 修改素材 -->
|
||||
<el-dialog title = "修改素材" :visible.sync = "dialogFormVisible1" center>
|
||||
<el-form :model = "form">
|
||||
<el-form-item label = "素材图片：" :label-width = "formLabelWidth">
|
||||
<div style = " width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height:148px;">
|
||||
<el-upload class = "avatar-uploader" v-model = "form.imgUrl" :action="$http.adornUrl('alioss/upload')"
|
||||
:show-file-list = "false" :on-success = "handleAvatarSuccess1">
|
||||
<img v-if = "form.imgUrl" :src = "form.imgUrl" class = "avatar" style = "border-radius: 6px;width:148px;height: 148px;"/>
|
||||
<i v-else class = "el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label = "素材链接：" :label-width = "formLabelWidth">
|
||||
<el-input v-model = "form.linkUrl" style = "width:65%;" type = "textarea" :rows = "4"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot = "footer" class = "dialog-footer">
|
||||
<el-button @click = "dialogFormVisible1 = false">取 消</el-button>
|
||||
<el-button type = "primary" @click = "amendadvertTo()">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
imgUrl: '',
|
||||
linkUrl: '',
|
||||
type: 3,
|
||||
form: {
|
||||
id: '',
|
||||
imgUrl: '',
|
||||
linkUrl: '',
|
||||
createAt: ''
|
||||
},
|
||||
formLabelWidth: '200px',
|
||||
tableDataLoading: false,
|
||||
dialogFormVisible1: false,
|
||||
dialogFormVisible: false,
|
||||
guangaoData: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess (file) {
|
||||
this.imgUrl = file.data
|
||||
this.linkUrl = this.imgUrl
|
||||
},
|
||||
handleAvatarSuccess1 (file) {
|
||||
this.form.imgUrl = file.data
|
||||
this.form.linkUrl = this.form.imgUrl
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.size = val
|
||||
this.guangaoSelect()
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.page = val
|
||||
this.guangaoSelect()
|
||||
},
|
||||
// 刷新
|
||||
refresh () {
|
||||
this.choicenSelect()
|
||||
this.handpick()
|
||||
},
|
||||
// 添加素材弹框
|
||||
advertNotice () {
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
// 添加素材
|
||||
advertNoticeTo () {
|
||||
if (this.linkUrl == '') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
duration: 1800,
|
||||
message: '请输入跳转链接',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.imgUrl == '') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
duration: 1800,
|
||||
message: '请上传素材图',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`banner/update/-1?url=${this.linkUrl}&image=${this.imgUrl}&type=${this.type}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({})
|
||||
}).then(({data}) => {
|
||||
this.dialogFormVisible = false
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.imgUrl = ''
|
||||
this.linkUrl = ''
|
||||
this.guangaoSelect()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 点击修改
|
||||
advertUpdates (rows) {
|
||||
this.form.id = rows.id
|
||||
this.form.imgUrl = rows.image_url
|
||||
this.form.linkUrl = rows.url
|
||||
this.dialogFormVisible1 = true
|
||||
},
|
||||
// 确定修改
|
||||
amendadvertTo () {
|
||||
if (this.form.linkUrl == '') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
duration: 1800,
|
||||
message: '请输入跳转链接',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.form.imgUrl == '') {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
duration: 1800,
|
||||
message: '请上传素材图',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`banner/update/${this.form.id}?url=${this.form.linkUrl}&image=${this.form.imgUrl}&type=${this.type}`),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({})
|
||||
}).then(({data}) => {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.guangaoSelect()
|
||||
this.dialogFormVisible1 = false
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除广告
|
||||
advertdeletes (row) {
|
||||
this.$confirm(`确定删除此条信息?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`banner/delete/${row.id}`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({})
|
||||
}).then(({data}) => {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.guangaoSelect()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取素材数据
|
||||
guangaoSelect () {
|
||||
let page = this.page - 1
|
||||
this.tableDataLoading = true
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('banner/user/list/3'),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({})
|
||||
}).then(({data}) => {
|
||||
this.tableDataLoading = false
|
||||
let returnData = data.data
|
||||
this.guangaoData = returnData
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.guangaoSelect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.customWidth {
|
||||
width: 80% !important;
|
||||
}
|
||||
</style>
|
||||
97
src/views/locality/quill-config.js
Normal file
97
src/views/locality/quill-config.js
Normal file
@@ -0,0 +1,97 @@
|
||||
/*富文本编辑图片上传配置*/
|
||||
import http from '../../utils/httpRequest.js'
|
||||
const uploadConfig = {
|
||||
action: http.adornUrl('alioss/upload'), // 必填参数 图片上传地址
|
||||
methods: 'POST', // 必填参数 图片上传方式
|
||||
token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
|
||||
name: 'file', // 必填参数 文件的参数名
|
||||
size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
|
||||
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
|
||||
};
|
||||
|
||||
// toolbar工具栏的工具选项（默认展示全部）
|
||||
const toolOptions = [
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
[{'header': 1}, {'header': 2}],
|
||||
[{'list': 'ordered'}, {'list': 'bullet'}],
|
||||
[{'script': 'sub'}, {'script': 'super'}],
|
||||
[{'indent': '-1'}, {'indent': '+1'}],
|
||||
[{'direction': 'rtl'}],
|
||||
[{'size': ['small', false, 'large', 'huge']}],
|
||||
[{'header': [1, 2, 3, 4, 5, 6, false]}],
|
||||
[{'color': []}, {'background': []}],
|
||||
[{'font': []}],
|
||||
[{'align': []}],
|
||||
['clean'],
|
||||
['link', 'image', 'video']
|
||||
];
|
||||
const handlers = {
|
||||
image: function image() {
|
||||
var self = this;
|
||||
|
||||
var fileInput = this.container.querySelector('input.ql-image[type=file]');
|
||||
if (fileInput === null) {
|
||||
fileInput = document.createElement('input');
|
||||
fileInput.setAttribute('type', 'file');
|
||||
// 设置图片参数名
|
||||
if (uploadConfig.name) {
|
||||
fileInput.setAttribute('name', uploadConfig.name);
|
||||
}
|
||||
// 可设置上传图片的格式
|
||||
fileInput.setAttribute('accept', uploadConfig.accept);
|
||||
fileInput.classList.add('ql-image');
|
||||
// 监听选择文件
|
||||
fileInput.addEventListener('change', function () {
|
||||
// 创建formData
|
||||
var formData = new FormData();
|
||||
formData.append(uploadConfig.name, fileInput.files[0]);
|
||||
formData.append('object','product');
|
||||
// 如果需要token且存在token
|
||||
if (uploadConfig.token) {
|
||||
formData.append('token', uploadConfig.token)
|
||||
}
|
||||
// 图片上传
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open(uploadConfig.methods, uploadConfig.action, true);
|
||||
// 上传数据成功，会触发
|
||||
xhr.onload = function (e) {
|
||||
if (xhr.status === 200) {
|
||||
var res = JSON.parse(xhr.responseText);
|
||||
let length = self.quill.getSelection(true).index;
|
||||
//这里很重要，你图片上传成功后，img的src需要在这里添加，res.path就是你服务器返回的图片链接。
|
||||
self.quill.insertEmbed(length, 'image', res.data);
|
||||
self.quill.setSelection(length + 1)
|
||||
}
|
||||
fileInput.value = ''
|
||||
console.log('eeeeeeeeeeeeeeeee',e)
|
||||
};
|
||||
// 开始上传数据
|
||||
xhr.upload.onloadstart = function (e) {
|
||||
fileInput.value = ''
|
||||
};
|
||||
// 当发生网络异常的时候会触发，如果上传数据的过程还未结束
|
||||
xhr.upload.onerror = function (e) {
|
||||
};
|
||||
// 上传数据完成（成功或者失败）时会触发
|
||||
xhr.upload.onloadend = function (e) {
|
||||
// console.log('上传结束')
|
||||
};
|
||||
xhr.send(formData)
|
||||
});
|
||||
this.container.appendChild(fileInput);
|
||||
}
|
||||
fileInput.click();
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
placeholder: '',
|
||||
theme: 'snow', // 主题
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: toolOptions, // 工具栏选项
|
||||
handlers: handlers // 事件重写
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user