wangyifang
/
yunyubang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片上传

Browse Source
master
lion 3 years ago
parent 86aac60c44
commit 4df083b62b
12 changed files with 508 additions and 251 deletions
Show Stats Download Patch File Download Diff File

4
.env.development
Unescape View File

@ -2,5 +2,5 @@
ENV = 'development'
# base api
#VUE_APP_BASE_API = https://yybtest.ali251.langye.net/
VUE_APP_BASE_API = https://yunyubang.ali251.langye.net/
VUE_APP_BASE_API = https://yybtest.ali251.langye.net/
#VUE_APP_BASE_API = https://yunyubang.ali251.langye.net/

9
src/api/uploads.js
Unescape View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function uploads(data) {
return request({
url: '/api/admin/upload-file',
method: 'post',
data
})
}

3
src/api/user.js
Unescape View File

@ -29,4 +29,5 @@ export function getAuthMenu(token) {
method: 'get',
params: { token }
})
}
}

2
src/components/XyTable/index.vue
Unescape View File

@ -178,7 +178,7 @@ export default {
tableHeight: null,
//document.documentElement.clientHeight -50 -37 - 20- 25 - 76,
isShowPage: true,
checkTable: this.tableItem.map((item) => item?.prop),
checkTable:this.tableItem.map((item)=> item?.prop),
loading: false,
visibleBtn: true, //操作按钮显示

1
src/components/XyTinymce/EditorImage.vue
Unescape View File

@ -102,6 +102,7 @@ export default {
},
beforeUpload(file) {
console.log(file)
return
if((file.size/1000) > 1024){
Message({
type:'warning',

142
src/components/XyTinymce/index copy.vue
Unescape View File

@ -0,0 +1,142 @@
<template>
<div class="tinymce">
<Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
<EditorImage
:show="showImg"
class="tinymce__upload"
@successCBK="imageSuccessCBK"
@updateshow="updateshow"
></EditorImage>
</div>
</template>
<script>
import EditorImage from "@/components/XyTinymce/EditorImage.vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/langs/zh_CN";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/media";
import "tinymce/plugins/lists";
import "tinymce/plugins/table";
import "tinymce/plugins/hr";
import "tinymce/plugins/autolink";
import "tinymce/plugins/help";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default"
import 'tinymce/plugins/code'
export default {
components: {
Editor,
EditorImage,
},
props: {
height: {
type: Number,
default: 300,
},
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default:
"code paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
},
toolbar: {
type: [String, Array],
default: ` undo redo restoredraft | code | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent |
styleselect formatselect fontselect fontsizeselect | table image charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat |
insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
},
menubar: {
type: String,
default: "edit insert view format table CardBtn",
},
},
data() {
return {
myValue: this.value,
showImg:false,
init: {
language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
language: "zh_CN",
height: this.height,
plugins: this.plugins,
fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
toolbar: this.toolbar,
branding: false,
menubar: this.menubar,
setup: (editor) => {
let _this = this
//定义一个名为 assignment 的toolbar
editor.ui.registry.addButton('assignment', {
text: `<i class="el-icon-position" style="font-size: 16px">上传</i>`,
// tooltip: '图片上传',
onAction: () => {
this.showImg = true
// _this.showEdit = true
},
})
},
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
// },
},
};
},
methods: {
updateshow(val){
this.showImg = val
},
imageSuccessCBK(arr) {
console.log("arr",arr)
arr.forEach(
(v) => (this.myValue += `<img class="wscnph" src="${v.url}" >`)
);
},
},
computed: {},
mounted() {
tinymce.init({});
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
},
},
};
</script>
<style scoped lang="scss">
.tinymce {
position: relative;
&__upload {
z-index: 2;
position: absolute;
right: 4px;
top: 0px;
}
::v-deep .tox.tox-tinymce.tox-fullscreen{
z-index:0
}
}
</style>

309
src/components/XyTinymce/index.vue
Unescape View File

@ -1,142 +1,169 @@
<template>
<div class="tinymce">
<Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
<EditorImage
:show="showImg"
class="tinymce__upload"
@successCBK="imageSuccessCBK"
@updateshow="updateshow"
></EditorImage>
</div>
</template>
<script>
import EditorImage from "@/components/XyTinymce/EditorImage.vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/langs/zh_CN";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/media";
import "tinymce/plugins/lists";
import "tinymce/plugins/table";
import "tinymce/plugins/hr";
import "tinymce/plugins/autolink";
import "tinymce/plugins/help";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default"
import 'tinymce/plugins/code'
export default {
components: {
Editor,
EditorImage,
},
props: {
height: {
type: Number,
default: 300,
},
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default:
"code paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
},
toolbar: {
type: [String, Array],
default: ` undo redo restoredraft | code | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent |
styleselect formatselect fontselect fontsizeselect | table image charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat |
insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
},
menubar: {
type: String,
default: "edit insert view format table CardBtn",
},
},
data() {
return {
myValue: this.value,
showImg:false,
init: {
language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
language: "zh_CN",
height: this.height,
plugins: this.plugins,
fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
toolbar: this.toolbar,
branding: false,
menubar: this.menubar,
setup: (editor) => {
let _this = this
//定义一个名为 assignment 的toolbar
editor.ui.registry.addButton('assignment', {
text: `<i class="el-icon-position" style="font-size: 16px">上传</i>`,
// tooltip: '图片上传',
onAction: () => {
this.showImg = true
// _this.showEdit = true
},
})
},
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
// },
},
};
},
methods: {
updateshow(val){
this.showImg = val
},
imageSuccessCBK(arr) {
console.log("arr",arr)
arr.forEach(
(v) => (this.myValue += `<img class="wscnph" src="${v.url}" >`)
);
},
},
computed: {},
mounted() {
tinymce.init({});
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
},
},
};
</script>
<style scoped lang="scss">
.tinymce {
position: relative;
&__upload {
z-index: 2;
position: absolute;
right: 4px;
top: 0px;
}
::v-deep .tox.tox-tinymce.tox-fullscreen{
z-index:0
}
}
<template>
<div class="tinymce">
<Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
</div>
</template>
<script>
import {
uploads
} from '@/api/uploads.js'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/langs/zh_CN";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/media";
import "tinymce/plugins/lists";
import "tinymce/plugins/table";
import "tinymce/plugins/hr";
import "tinymce/plugins/autolink";
import "tinymce/plugins/help";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default"
import 'tinymce/plugins/code'
import "tinymce/plugins/image"
import "tinymce/plugins/imagetools"
export default {
components: {
Editor
},
props: {
height: {
type: Number,
default: 300,
},
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default: "code image paste preview searchreplace autolink directionality visualblocks visualchars fullscreen template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
},
toolbar: {
type: [String, Array],
default: ` undo redo restoredraft | code | image | imagetools | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent |
styleselect formatselect fontselect fontsizeselect | table charmap emoticons hr pagebreak | bullist numlist | blockquote subscript superscript removeformat |
insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
},
menubar: {
type: String,
default: "edit insert view format table CardBtn",
},
},
data() {
return {
myValue: this.value,
showImg: false,
imgUploadUrl: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
init: {
language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
language: "zh_CN",
height: this.height,
plugins: this.plugins,
fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
toolbar: this.toolbar,
branding: false,
menubar: this.menubar,
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
images_upload_url: this.imgUploadUrl,
images_upload_handler: (blobInfo, success, failure) => {
this.handleImgUpload(blobInfo, success, failure);
},
// setup: (editor) => {
// let _this = this
// //定义一个名为 assignment 的toolbar
// editor.ui.registry.addButton('assignment', {
// text: `<i class="el-icon-position" style="font-size: 16px">上传</i>`,
// // tooltip: '图片上传',
// onAction: () => {
// this.showImg = true
// // _this.showEdit = true
// },
// })
// },
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
// },
},
};
},
methods: {
updateshow(val) {
this.showImg = val
},
imageSuccessCBK(arr) {
console.log("arr", arr)
arr.forEach(
(v) => (this.myValue += `<img class="wscnph" src="${v.url}" >`)
);
},
handleImgUpload(blobInfo, success, failure) {
console.log("我要上传", blobInfo);
let self = this;
let file = blobInfo.blob();
const isLt2M = file.size / 1024 < 1024;
if (!isLt2M) {
failure("上传失败，图片不可超过1M!");
return false;
}
let formdate = new FormData();
formdate.append("file", blobInfo.blob()); //imageFile文件名和后端统一
uploads(formdate).then(res => {
if (res) {
let url = res.url;
success(url); //回显url
} else {
failure(res.errmsg);
this.$message.error(res.errmsg);
}
})
}
},
computed: {},
mounted() {
tinymce.init({});
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
},
},
};
</script>
<style scoped lang="scss">
.tinymce {
position: relative;
&__upload {
z-index: 2;
position: absolute;
right: 4px;
top: 0px;
}
::v-deep .tox.tox-tinymce.tox-fullscreen {
z-index: 0
}
}
</style>

4
src/views/activity/activityList.vue
Unescape View File

@ -137,7 +137,7 @@ export default {
// align:"right"
// },
{
label:"开放名额",
label:"总活动名额",
width: 140,
prop:'member_sum',
formatter:(cell,data,value)=>{
@ -160,7 +160,7 @@ export default {
}
},
{
label:"报名次数",
label:"已报名数",
width: 140,
prop:'total',
customFn: (cell) => {

61
src/views/activity/component/addActivity.vue
Unescape View File

@ -159,6 +159,25 @@
</div>
</div>
</template>
<template v-slot:applyDate>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>预约报名日期：
</div>
<div class="xy-table-item-content">
<el-date-picker
align='center'
style="width: 360px;"
v-model="form.applyDate"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:address>
<div class="xy-table-item">
<div class="xy-table-item-label">
@ -202,7 +221,7 @@
<template v-slot:memberSum>
<div class="xy-table-item">
<div class="xy-table-item-label">
活动人数：
总活动人数：
</div>
<div class="xy-table-item-content">
<el-input-number :precision="0" :controls="false" v-model="form.memberSum" placeholder="请输入活动人数" clearable style="width: 300px;"></el-input-number>
@ -229,25 +248,6 @@
</div>
</div>
</template>
<template v-slot:applyDate>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>报名日期：
</div>
<div class="xy-table-item-content">
<el-date-picker
align='center'
style="width: 360px;"
v-model="form.applyDate"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
</template>
<!-- <template v-slot:money>
<div class="xy-table-item">
<div class="xy-table-item-label">
@ -336,7 +336,7 @@ import { Message } from 'element-ui'
import { getparameter } from "@/api/system/dictionary";
import xyTinymce from "@/components/XyTinymce/index.vue";
import {replaceAll} from "@/utils/index"
export default {
components:{
xyTinymce
@ -358,14 +358,16 @@ companykeyword:"",
recommend:"",
//slogan:"",
date:"",
applyDate:[],
address:'',
relationName:"",
phoneNumber:"",
group:"",
memberSum:"",
startMemberSum:"",
memberSum:"",
greatServices:"",
applyDate:[],
// applyDate:[],
// money:0.00,
activePlaybill:"",
sort:0,
@ -548,8 +550,8 @@ companykeyword:"",
relationName:res.relation_name,
phoneNumber:res.phone_number,
group:res.group,
startMemberSum:res.start_member_sum,
memberSum:res.member_sum,
startMemberSum:res.start_member_sum,
greatServices:res.great_services,
applyDate:[res.apply_start,res.apply_end],
// money:Number(res.money),
@ -557,6 +559,7 @@ companykeyword:"",
sort:res.sort,
content:res?.content,
}
},
compareDate(d1, d2) {
@ -566,12 +569,12 @@ companykeyword:"",
},
submit(){
let start_date = this.form.date[0]
let end_date = this.form.date[1]
let apply_end = this.form.applyDate[1]
if(this.compareDate(apply_end,start_date)){
if(this.compareDate(apply_end,end_date)){
Message({
type:'warning',
message:'截止报名日期不能晚于活动开始日期'
message:'截止报名日期不能晚于活动结束日期'
})
return
@ -605,7 +608,7 @@ companykeyword:"",
active_playbill:this.form.activePlaybill,
sort:this.form.sort,
content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
}).then(res => {
Message({
type:'success',
@ -644,7 +647,7 @@ companykeyword:"",
active_playbill:this.form.activePlaybill,
sort:this.form.sort,
content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
}).then(res => {
Message({
type:'success',

4
src/views/activity/component/addActivityCompany.vue
Unescape View File

@ -112,7 +112,7 @@ export default {
}).then(res => {
Message({
type:'success',
message:'新增活动成功'
message:'新增活动关联方成功'
})
this.isShow = false
this.$emit('refresh')
@ -128,7 +128,7 @@ export default {
}).then(res => {
Message({
type:'success',
message:'编辑活动成功'
message:'编辑活动关联方成功'
})
this.isShow = false
this.$emit('refresh')

217
src/views/order/orderList.vue
Unescape View File

@ -282,9 +282,10 @@
{
label: "客户服务地址",
width: 220,
align: "left",
align: "left",
prop:'customAddress',
customFn: (row) => {
return ( < div style = {
return ( <div style = {
{
display: 'flex',
alignItems: 'left',
@ -300,36 +301,25 @@
this.isShowEdit = true;
}
}
}
>
}>
{
row.order.member_address ? row.order.member_address : "修改服务地址"
} < /div> )
} </div> )
}
},
{
label: "用户信息",
Fprop: 'member',
multiHd: [{
prop: "name",
{
prop: "member.name",
label: "姓名",
width: 110,
customFn: (row) => {
return (row.row.member?.name)
}
width: 110
},
{
prop: "wechat_nickname",
prop: "member.wechat_nickname",
label: "微信昵称",
width: 110,
customFn: (row) => {
return (row.row.member?.wechat_nickname)
}
width: 110
},
{
label: "头像",
label: "头像",
prop:'member.avatar',
width: 80,
customFn: (row) => {
return ( < div style = {
@ -339,69 +329,148 @@
justifyContent: 'center'
}
} > <el-avatar src = {
row.row.member?.avatar
row.member?.avatar
} > </el-avatar></div > )
}
},
{
prop: "phone",
prop: "member.phone",
label: "联系电话",
width: 120,
customFn: (row) => {
return (row.row.member?.phone)
}
width: 120
},
{
prop: "area",
prop: "member.area",
label: "区域",
width: 110,
customFn: (row) => {
return (row.row.member?.area)
}
width: 110
},
{
prop: "due_date",
prop: "member.due_date",
label: "预产期",
width: 120,
customFn: (row) => {
return (row.row.member?.due_date)
}
}
],
},
{
label: '订单明细',
multiHd: [{
prop: "product_type.name",
label: "产品类型",
width: 100
},
{
prop: "merchant.username",
label: "服务商家",
align: "left",
width: 160
},
{
label: "历史商家",
width: 160,
align: "left",
customFn: (row) => {
return row.row.assign_merchant.map(item => {
return ( <div> {
item.username
} </div>)
})
}
},
{
prop: "state_name",
label: "状态",
width: 120
}
]
},
},
{
prop: "product_type.name",
label: "产品类型",
width: 100
},
{
prop: "merchant.username",
label: "服务商家",
align: "left",
width: 160
},
{
label: "历史商家",
width: 160,
align: "left",
customFn: (row) => {
return row.assign_merchant.map(item => {
return ( <div> {
item.username
} </div>)
})
}
},
{
prop: "state_name",
label: "状态",
width: 120
},
// {
// label: "用户信息",
// prop: 'member',
// multiHd: [{
// prop: "name",
// label: "姓名",
// width: 110,
// customFn: (row) => {
// return (row.row.member?.name)
// }
// },
// {
// prop: "wechat_nickname",
// label: "微信昵称",
// width: 110,
// customFn: (row) => {
// return (row.row.member?.wechat_nickname)
// }
// },
// {
// label: "头像",
// width: 80,
// customFn: (row) => {
// return ( < div style = {
// {
// display: 'flex',
// alignItems: 'center',
// justifyContent: 'center'
// }
// } > <el-avatar src = {
// row.row.member?.avatar
// } > </el-avatar></div > )
// }
// },
// {
// prop: "phone",
// label: "联系电话",
// width: 120,
// customFn: (row) => {
// return (row.row.member?.phone)
// }
// },
// {
// prop: "area",
// label: "区域",
// width: 110,
// customFn: (row) => {
// return (row.row.member?.area)
// }
// },
// {
// prop: "due_date",
// label: "预产期",
// width: 120,
// customFn: (row) => {
// return (row.row.member?.due_date)
// }
// }
// ],
// },
// {
// label: '订单明细',
// prop:'orderInfo',
// multiHd: [{
// prop: "product_type.name",
// label: "产品类型",
// width: 100
// },
// {
// prop: "merchant.username",
// label: "服务商家",
// align: "left",
// width: 160
// },
// {
// label: "历史商家",
// width: 160,
// align: "left",
// customFn: (row) => {
// return row.row.assign_merchant.map(item => {
// return ( <div> {
// item.username
// } </div>)
// })
// }
// },
// {
// prop: "state_name",
// label: "状态",
// width: 120
// }
// ]
// },
{
prop: "order.member_comment",
@ -520,7 +589,9 @@
product_type_id: this.select.productType,
merchant_id: this.select.merchant.id,
order_state: this.select.orderStates.key,
member_id:this.memberId,
member_id:this.memberId,
sort_name:'paid_at',
sort_type:'DESC',
...this.select
})
this.select.is_merchant = is_merchant;

3
src/views/productService/components/common/addCommonService.vue
Unescape View File

@ -948,6 +948,9 @@ export default {
::v-deep .el-input__inner {
text-align: left;
}
::v-deep .avue-dialog{
z-index:2374
}
</style>
<style>
.avatar-uploader .el-upload {

Write Preview
Loading…
Cancel
Save