diff --git a/src/router/index.js b/src/router/index.js index b9d9997..58103dd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -97,7 +97,7 @@ const mainRoutes = { { path: '/orderInService', component: _import('business/orderInService'), name: 'orderInService', meta: { title: '服务中订单', isTab: true } }, - // 2023.02.16 按摩 5.0 版本 新增 + // 2023.02.16 按摩 5.0 版本 新增 // 采购商城 { path: '/classifyAdmin', component: _import('purchaseShop/classifyAdmin'), name: 'classifyAdmin', meta: { title: '商品分类', isTab: true } }, { path: '/orderAdmin', component: _import('purchaseShop/orderAdmin'), name: 'orderAdmin', meta: { title: '自营订单', isTab: true } }, @@ -125,11 +125,8 @@ const mainRoutes = { { path: '/creditScore', component: _import('riderTop/creditScore'), name: 'creditScore', meta: { title: '信用分明细', isTab: true } }, // 2023.03.23 { path: '/conversionRate', component: _import('conversionRate/conversionRate'), name: 'conversionRate', meta: { title: '转化率列表', isTab: true } }, - - - - - + // 2024.06.05 + { path: '/massagePackage', component: _import('bl/massage/massagePackage'), name: 'massagePackage', meta: { title: '服务包列表', isTab: true } }, ], beforeEnter(to, from, next) { @@ -173,7 +170,7 @@ router.beforeEach((to, from, next) => { next() } }).catch((e) => { - console.log(`%c${e} 请求菜单列表和权限失败,跳转至登录页!!`, 'color:blue') + // console.log(`%c${e} 请求菜单列表和权限失败,跳转至登录页!!`, 'color:blue') router.push({ name: 'login' }) }) } @@ -243,10 +240,10 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) { { path: '*', redirect: { name: '404' } } ]) sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]')) - console.log('\n') - console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue') - console.log(mainRoutes.children) - console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue') + // console.log('\n') + // console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue') + // console.log(mainRoutes.children) + // console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue') } } diff --git a/src/views/bl/massage/massagePackage.vue b/src/views/bl/massage/massagePackage.vue new file mode 100644 index 0000000..2f4c0b5 --- /dev/null +++ b/src/views/bl/massage/massagePackage.vue @@ -0,0 +1,1164 @@ + + + + + diff --git a/src/views/bl/massage/quill-config.js b/src/views/bl/massage/quill-config.js new file mode 100644 index 0000000..836a941 --- /dev/null +++ b/src/views/bl/massage/quill-config.js @@ -0,0 +1,98 @@ +import { serverPaths } from '@/utils/enumData' + +/*富文本编辑图片上传配置*/ +const uploadConfig = { + action: serverPaths.uploadUrl, // 必填参数 图片上传地址 + 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 // 事件重写 + } + } +};