|
|
@@ -4,11 +4,11 @@
|
|
|
<el-tab-pane label="用户协议" name="first"></el-tab-pane>
|
|
|
<el-tab-pane label="隐私声明" name="second"></el-tab-pane>
|
|
|
<el-tab-pane label="服务协议" name="third"></el-tab-pane>
|
|
|
- <el-tab-pane label="以旧换新协议" name="fourth"></el-tab-pane>
|
|
|
- <el-tab-pane label="二手商城购买须知" name="fiveth"></el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="以旧换新协议" name="fourth"></el-tab-pane> -->
|
|
|
+ <!-- <el-tab-pane label="二手商城购买须知" name="fiveth"></el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
|
|
|
- <el-form v-show="activeName=='first'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
+ <el-form v-show="activeName == 'first'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
<el-form-item label="" prop="content1">
|
|
|
<el-upload
|
|
|
ref="imageListUpload1"
|
|
|
@@ -20,20 +20,17 @@
|
|
|
:show-file-list="false"
|
|
|
:on-success="uploadSuccess1"
|
|
|
:on-error="uploadError1"
|
|
|
- :before-upload="beforeUpload1">
|
|
|
+ :before-upload="beforeUpload1"
|
|
|
+ >
|
|
|
</el-upload>
|
|
|
<!--富文本编辑器组件-->
|
|
|
<el-row v-loading="quillImgLoading1">
|
|
|
- <quill-editor
|
|
|
- v-model="mainForm.content1"
|
|
|
- ref="myQuillEditor1"
|
|
|
- :options="editorOption1">
|
|
|
- </quill-editor>
|
|
|
+ <quill-editor v-model="mainForm.content1" ref="myQuillEditor1" :options="editorOption1"> </quill-editor>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <el-form v-show="activeName=='second'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
+ <el-form v-show="activeName == 'second'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
<el-form-item label="" prop="content2">
|
|
|
<el-upload
|
|
|
ref="imageListUpload2"
|
|
|
@@ -45,100 +42,89 @@
|
|
|
:show-file-list="false"
|
|
|
:on-success="uploadSuccess2"
|
|
|
:on-error="uploadError2"
|
|
|
- :before-upload="beforeUpload2">
|
|
|
+ :before-upload="beforeUpload2"
|
|
|
+ >
|
|
|
</el-upload>
|
|
|
<!--富文本编辑器组件-->
|
|
|
<el-row v-loading="quillImgLoading2">
|
|
|
- <quill-editor
|
|
|
- v-model="mainForm.content2"
|
|
|
- ref="myQuillEditor2"
|
|
|
- :options="editorOption2">
|
|
|
- </quill-editor>
|
|
|
+ <quill-editor v-model="mainForm.content2" ref="myQuillEditor2" :options="editorOption2"> </quill-editor>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-show="activeName == 'third'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
+ <el-form-item label="" prop="content3">
|
|
|
+ <el-upload
|
|
|
+ ref="imageListUpload3"
|
|
|
+ class="avatar-uploader3"
|
|
|
+ :action="baseURL + 'common/upload'"
|
|
|
+ :headers="myHeaders"
|
|
|
+ multiple
|
|
|
+ name="file"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="uploadSuccess3"
|
|
|
+ :on-error="uploadError3"
|
|
|
+ :before-upload="beforeUpload3"
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ <!--富文本编辑器组件-->
|
|
|
+ <el-row v-loading="quillImgLoading3">
|
|
|
+ <quill-editor v-model="mainForm.content3" ref="myQuillEditor3" :options="editorOption3"> </quill-editor>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-show="activeName == 'fourth'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
+ <el-form-item label="" prop="content4">
|
|
|
+ <el-upload
|
|
|
+ ref="imageListUpload4"
|
|
|
+ class="avatar-uploader4"
|
|
|
+ :action="baseURL + 'common/upload'"
|
|
|
+ :headers="myHeaders"
|
|
|
+ multiple
|
|
|
+ name="file"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="uploadSuccess4"
|
|
|
+ :on-error="uploadError4"
|
|
|
+ :before-upload="beforeUpload4"
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ <!--富文本编辑器组件-->
|
|
|
+ <el-row v-loading="quillImgLoading4">
|
|
|
+ <quill-editor v-model="mainForm.content4" ref="myQuillEditor4" :options="editorOption4"> </quill-editor>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-show="activeName == 'fiveth'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
+ <el-form-item label="" prop="content5">
|
|
|
+ <el-upload
|
|
|
+ ref="imageListUpload5"
|
|
|
+ class="avatar-uploader5"
|
|
|
+ :action="baseURL + 'common/upload'"
|
|
|
+ :headers="myHeaders"
|
|
|
+ multiple
|
|
|
+ name="file"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="uploadSuccess5"
|
|
|
+ :on-error="uploadError5"
|
|
|
+ :before-upload="beforeUpload5"
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ <!--富文本编辑器组件-->
|
|
|
+ <el-row v-loading="quillImgLoading5">
|
|
|
+ <quill-editor v-model="mainForm.content5" ref="myQuillEditor5" :options="editorOption5"> </quill-editor>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
- <el-form v-show="activeName=='third'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
- <el-form-item label="" prop="content3">
|
|
|
- <el-upload
|
|
|
- ref="imageListUpload3"
|
|
|
- class="avatar-uploader3"
|
|
|
- :action="baseURL + 'common/upload'"
|
|
|
- :headers="myHeaders"
|
|
|
- multiple
|
|
|
- name="file"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="uploadSuccess3"
|
|
|
- :on-error="uploadError3"
|
|
|
- :before-upload="beforeUpload3">
|
|
|
- </el-upload>
|
|
|
- <!--富文本编辑器组件-->
|
|
|
- <el-row v-loading="quillImgLoading3">
|
|
|
- <quill-editor
|
|
|
- v-model="mainForm.content3"
|
|
|
- ref="myQuillEditor3"
|
|
|
- :options="editorOption3">
|
|
|
- </quill-editor>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <el-form v-show="activeName=='fourth'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
- <el-form-item label="" prop="content4">
|
|
|
- <el-upload
|
|
|
- ref="imageListUpload4"
|
|
|
- class="avatar-uploader4"
|
|
|
- :action="baseURL + 'common/upload'"
|
|
|
- :headers="myHeaders"
|
|
|
- multiple
|
|
|
- name="file"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="uploadSuccess4"
|
|
|
- :on-error="uploadError4"
|
|
|
- :before-upload="beforeUpload4">
|
|
|
- </el-upload>
|
|
|
- <!--富文本编辑器组件-->
|
|
|
- <el-row v-loading="quillImgLoading4">
|
|
|
- <quill-editor
|
|
|
- v-model="mainForm.content4"
|
|
|
- ref="myQuillEditor4"
|
|
|
- :options="editorOption4">
|
|
|
- </quill-editor>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <el-form v-show="activeName=='fiveth'" ref="mainForm" label-width="80px" label-position="top">
|
|
|
- <el-form-item label="" prop="content5">
|
|
|
- <el-upload
|
|
|
- ref="imageListUpload5"
|
|
|
- class="avatar-uploader5"
|
|
|
- :action="baseURL + 'common/upload'"
|
|
|
- :headers="myHeaders"
|
|
|
- multiple
|
|
|
- name="file"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="uploadSuccess5"
|
|
|
- :on-error="uploadError5"
|
|
|
- :before-upload="beforeUpload5">
|
|
|
- </el-upload>
|
|
|
- <!--富文本编辑器组件-->
|
|
|
- <el-row v-loading="quillImgLoading5">
|
|
|
- <quill-editor
|
|
|
- v-model="mainForm.content5"
|
|
|
- ref="myQuillEditor5"
|
|
|
- :options="editorOption5">
|
|
|
- </quill-editor>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
|
|
|
<div class="page-footer">
|
|
|
<div class="footer" :class="classObj">
|
|
|
- <el-button type="primary" @click="submitForm" :loading="formLoading">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm" :loading="formLoading">{{
|
|
|
+ formLoading ? '保存中 ...' : '保 存'
|
|
|
+ }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -154,17 +140,17 @@ import 'quill/dist/quill.bubble.css'
|
|
|
const toolbarOptions = [
|
|
|
['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': []}],
|
|
|
- ['link', 'image', 'video'],
|
|
|
+ [{ 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: [] }],
|
|
|
+ ['link', 'image', 'video']
|
|
|
// ['clean']
|
|
|
]
|
|
|
|
|
|
@@ -176,27 +162,28 @@ export default {
|
|
|
return {
|
|
|
activeName: 'first',
|
|
|
baseURL: process.env.VUE_APP_BASE_API,
|
|
|
- myHeaders: {'x-token': getToken()},
|
|
|
+ myHeaders: { 'x-token': getToken() },
|
|
|
|
|
|
mainForm: {
|
|
|
content1: '',
|
|
|
content2: '',
|
|
|
- content5: ''
|
|
|
+ content5: ''
|
|
|
},
|
|
|
|
|
|
quillImgLoading1: false, // 富文本上传图片loading
|
|
|
- editorOption1: { // 富文本配置
|
|
|
+ editorOption1: {
|
|
|
+ // 富文本配置
|
|
|
placeholder: '请输入公共内容',
|
|
|
theme: 'snow',
|
|
|
modules: {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- 'image': function (value) {
|
|
|
+ image: function (value) {
|
|
|
if (value) {
|
|
|
document.querySelector('.avatar-uploader1 input').click()
|
|
|
} else {
|
|
|
- this.quill.format('image', false);
|
|
|
+ this.quill.format('image', false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -206,18 +193,19 @@ export default {
|
|
|
editorImages1: [],
|
|
|
|
|
|
quillImgLoading2: false, // 富文本上传图片loading
|
|
|
- editorOption2: { // 富文本配置
|
|
|
+ editorOption2: {
|
|
|
+ // 富文本配置
|
|
|
placeholder: '请输入公共内容',
|
|
|
theme: 'snow',
|
|
|
modules: {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- 'image': function (value) {
|
|
|
+ image: function (value) {
|
|
|
if (value) {
|
|
|
document.querySelector('.avatar-uploader2 input').click()
|
|
|
} else {
|
|
|
- this.quill.format('image', false);
|
|
|
+ this.quill.format('image', false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -225,20 +213,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
editorImages2: [],
|
|
|
-
|
|
|
+
|
|
|
quillImgLoading3: false, // 富文本上传图片loading
|
|
|
- editorOption3: { // 富文本配置
|
|
|
+ editorOption3: {
|
|
|
+ // 富文本配置
|
|
|
placeholder: '请输入公共内容',
|
|
|
theme: 'snow',
|
|
|
modules: {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- 'image': function (value) {
|
|
|
+ image: function (value) {
|
|
|
if (value) {
|
|
|
document.querySelector('.avatar-uploader3 input').click()
|
|
|
} else {
|
|
|
- this.quill.format('image', false);
|
|
|
+ this.quill.format('image', false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -248,18 +237,19 @@ export default {
|
|
|
editorImages3: [],
|
|
|
|
|
|
quillImgLoading4: false, // 富文本上传图片loading
|
|
|
- editorOption4: { // 富文本配置
|
|
|
+ editorOption4: {
|
|
|
+ // 富文本配置
|
|
|
placeholder: '请输入公共内容',
|
|
|
theme: 'snow',
|
|
|
modules: {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- 'image': function (value) {
|
|
|
+ image: function (value) {
|
|
|
if (value) {
|
|
|
document.querySelector('.avatar-uploader4 input').click()
|
|
|
} else {
|
|
|
- this.quill.format('image', false);
|
|
|
+ this.quill.format('image', false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -267,29 +257,30 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
editorImages4: [],
|
|
|
-
|
|
|
- quillImgLoading5: false, // 富文本上传图片loading
|
|
|
- editorOption5: { // 富文本配置
|
|
|
- placeholder: '请输入公共内容',
|
|
|
- theme: 'snow',
|
|
|
- modules: {
|
|
|
- toolbar: {
|
|
|
- container: toolbarOptions,
|
|
|
- handlers: {
|
|
|
- 'image': function (value) {
|
|
|
- if (value) {
|
|
|
- document.querySelector('.avatar-uploader5 input').click()
|
|
|
- } else {
|
|
|
- this.quill.format('image', false);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- editorImages5: [],
|
|
|
-
|
|
|
- formLoading: false,
|
|
|
+
|
|
|
+ quillImgLoading5: false, // 富文本上传图片loading
|
|
|
+ editorOption5: {
|
|
|
+ // 富文本配置
|
|
|
+ placeholder: '请输入公共内容',
|
|
|
+ theme: 'snow',
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: toolbarOptions,
|
|
|
+ handlers: {
|
|
|
+ image: function (value) {
|
|
|
+ if (value) {
|
|
|
+ document.querySelector('.avatar-uploader5 input').click()
|
|
|
+ } else {
|
|
|
+ this.quill.format('image', false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editorImages5: [],
|
|
|
+
|
|
|
+ formLoading: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -301,11 +292,11 @@ export default {
|
|
|
hideSidebar: !this.sidebar.opened,
|
|
|
openSidebar: this.sidebar.opened
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
- this.getAgreement();
|
|
|
+ this.getAgreement()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
@@ -315,243 +306,244 @@ export default {
|
|
|
this.mainForm = {
|
|
|
content1: res.data.userAgreementContent,
|
|
|
content2: res.data.privacyStatementContent,
|
|
|
- content3: res.data.serviceContent,
|
|
|
- content4: res.data.tradeContent,
|
|
|
- content5: res.data.esShopBuyRemarkContent,
|
|
|
+ content3: res.data.serviceContent,
|
|
|
+ content4: res.data.tradeContent,
|
|
|
+ content5: res.data.esShopBuyRemarkContent
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
submitForm() {
|
|
|
- this.formLoading = true;
|
|
|
+ this.formLoading = true
|
|
|
editAgreement({
|
|
|
- companyWechatId: JSON.parse(localStorage.getItem("greemall_user")).companyWechatId,
|
|
|
+ companyWechatId: JSON.parse(localStorage.getItem('greemall_user')).companyWechatId,
|
|
|
userAgreementContent: this.mainForm.content1,
|
|
|
privacyStatementContent: this.mainForm.content2,
|
|
|
- serviceContent: this.mainForm.content3,
|
|
|
+ serviceContent: this.mainForm.content3,
|
|
|
tradeContent: this.mainForm.content4,
|
|
|
- esShopBuyRemarkContent: this.mainForm.content5,
|
|
|
- }).then(res => {
|
|
|
- this.formLoading = false;
|
|
|
- this.$successMsg('编辑成功');
|
|
|
- setTimeout(()=>{
|
|
|
- this.getAgreement();
|
|
|
- }, 1000)
|
|
|
- }).catch(err => {
|
|
|
- this.formLoading = false;
|
|
|
+ esShopBuyRemarkContent: this.mainForm.content5
|
|
|
})
|
|
|
+ .then(res => {
|
|
|
+ this.formLoading = false
|
|
|
+ this.$successMsg('编辑成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getAgreement()
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.formLoading = false
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传前
|
|
|
beforeUpload1() {
|
|
|
- this.quillImgLoading1 = true;
|
|
|
+ this.quillImgLoading1 = true
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传成功
|
|
|
uploadSuccess1(res, file, fileList) {
|
|
|
fileList.forEach(item => {
|
|
|
- if(this.editorImages1.indexOf(item.response.data.url) < 0) {
|
|
|
- this.editorImages1.push(item.response.data.url);
|
|
|
+ if (this.editorImages1.indexOf(item.response.data.url) < 0) {
|
|
|
+ this.editorImages1.push(item.response.data.url)
|
|
|
}
|
|
|
})
|
|
|
this.showImage1()
|
|
|
- this.quillImgLoading1 = false;
|
|
|
+ this.quillImgLoading1 = false
|
|
|
},
|
|
|
|
|
|
showImage1() {
|
|
|
- console.log(this.editorImages1);
|
|
|
- let quill = this.$refs.myQuillEditor1.quill;
|
|
|
+ console.log(this.editorImages1)
|
|
|
+ let quill = this.$refs.myQuillEditor1.quill
|
|
|
this.editorImages1.forEach(item => {
|
|
|
// 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
+ let length = quill.getSelection().index
|
|
|
// 插入图片 res.info为服务器返回的图片地址
|
|
|
- console.log(item);
|
|
|
- quill.insertEmbed(length, 'image', item);
|
|
|
+ console.log(item)
|
|
|
+ quill.insertEmbed(length, 'image', item)
|
|
|
// this.$refs.imageListUpload1.clearFiles()
|
|
|
// 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
+ quill.setSelection(length + 1)
|
|
|
})
|
|
|
- this.editorImages1 = [];
|
|
|
- this.$refs.imageListUpload1.clearFiles();
|
|
|
+ this.editorImages1 = []
|
|
|
+ this.$refs.imageListUpload1.clearFiles()
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传失败
|
|
|
uploadError1() {
|
|
|
- this.quillImgLoading1 = false;
|
|
|
- this.$errorMsg('图片插入失败');
|
|
|
+ this.quillImgLoading1 = false
|
|
|
+ this.$errorMsg('图片插入失败')
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传前
|
|
|
beforeUpload2() {
|
|
|
- this.quillImgLoading2 = true;
|
|
|
+ this.quillImgLoading2 = true
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传成功
|
|
|
uploadSuccess2(res, file, fileList) {
|
|
|
- console.log(fileList);
|
|
|
+ console.log(fileList)
|
|
|
fileList.forEach(item => {
|
|
|
- if(this.editorImages2.indexOf(item.response.data.url) < 0) {
|
|
|
- this.editorImages2.push(item.response.data.url);
|
|
|
+ if (this.editorImages2.indexOf(item.response.data.url) < 0) {
|
|
|
+ this.editorImages2.push(item.response.data.url)
|
|
|
}
|
|
|
})
|
|
|
this.showImage2()
|
|
|
- this.quillImgLoading2 = false;
|
|
|
+ this.quillImgLoading2 = false
|
|
|
},
|
|
|
|
|
|
showImage2() {
|
|
|
- console.log(this.editorImages2);
|
|
|
- let quill = this.$refs.myQuillEditor2.quill;
|
|
|
+ console.log(this.editorImages2)
|
|
|
+ let quill = this.$refs.myQuillEditor2.quill
|
|
|
this.editorImages2.forEach(item => {
|
|
|
// 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
+ let length = quill.getSelection().index
|
|
|
// 插入图片 res.info为服务器返回的图片地址
|
|
|
- console.log(item);
|
|
|
- quill.insertEmbed(length, 'image', item);
|
|
|
+ console.log(item)
|
|
|
+ quill.insertEmbed(length, 'image', item)
|
|
|
// this.$refs.imageListUpload2.clearFiles()
|
|
|
// 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
+ quill.setSelection(length + 1)
|
|
|
})
|
|
|
- this.editorImages2 = [];
|
|
|
- this.$refs.imageListUpload2.clearFiles();
|
|
|
+ this.editorImages2 = []
|
|
|
+ this.$refs.imageListUpload2.clearFiles()
|
|
|
},
|
|
|
|
|
|
// 富文本图片上传失败
|
|
|
uploadError2() {
|
|
|
- this.quillImgLoading2 = false;
|
|
|
- this.$errorMsg('图片插入失败');
|
|
|
+ this.quillImgLoading2 = false
|
|
|
+ this.$errorMsg('图片插入失败')
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 富文本图片上传前
|
|
|
beforeUpload3() {
|
|
|
- this.quillImgLoading3 = true;
|
|
|
+ this.quillImgLoading3 = true
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 富文本图片上传成功
|
|
|
uploadSuccess3(res, file, fileList) {
|
|
|
- console.log(fileList);
|
|
|
+ console.log(fileList)
|
|
|
fileList.forEach(item => {
|
|
|
- if(this.editorImages3.indexOf(item.response.data.url) < 0) {
|
|
|
- this.editorImages3.push(item.response.data.url);
|
|
|
+ if (this.editorImages3.indexOf(item.response.data.url) < 0) {
|
|
|
+ this.editorImages3.push(item.response.data.url)
|
|
|
}
|
|
|
})
|
|
|
this.showImage3()
|
|
|
- this.quillImgLoading3 = false;
|
|
|
+ this.quillImgLoading3 = false
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
showImage3() {
|
|
|
- console.log(this.editorImages3);
|
|
|
- let quill = this.$refs.myQuillEditor3.quill;
|
|
|
+ console.log(this.editorImages3)
|
|
|
+ let quill = this.$refs.myQuillEditor3.quill
|
|
|
this.editorImages3.forEach(item => {
|
|
|
// 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
+ let length = quill.getSelection().index
|
|
|
// 插入图片 res.info为服务器返回的图片地址
|
|
|
- console.log(item);
|
|
|
- quill.insertEmbed(length, 'image', item);
|
|
|
+ console.log(item)
|
|
|
+ quill.insertEmbed(length, 'image', item)
|
|
|
// this.$refs.imageListUpload2.clearFiles()
|
|
|
// 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
+ quill.setSelection(length + 1)
|
|
|
})
|
|
|
- this.editorImages3 = [];
|
|
|
- this.$refs.imageListUpload3.clearFiles();
|
|
|
+ this.editorImages3 = []
|
|
|
+ this.$refs.imageListUpload3.clearFiles()
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 富文本图片上传失败
|
|
|
uploadError3() {
|
|
|
- this.quillImgLoading3 = false;
|
|
|
- this.$errorMsg('图片插入失败');
|
|
|
+ this.quillImgLoading3 = false
|
|
|
+ this.$errorMsg('图片插入失败')
|
|
|
},
|
|
|
|
|
|
-
|
|
|
// ----------
|
|
|
// 富文本图片上传前
|
|
|
beforeUpload4() {
|
|
|
- this.quillImgLoading4 = true;
|
|
|
+ this.quillImgLoading4 = true
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 富文本图片上传成功
|
|
|
uploadSuccess4(res, file, fileList) {
|
|
|
fileList.forEach(item => {
|
|
|
- if(this.editorImages4.indexOf(item.response.data.url) < 0) {
|
|
|
- this.editorImages4.push(item.response.data.url);
|
|
|
+ if (this.editorImages4.indexOf(item.response.data.url) < 0) {
|
|
|
+ this.editorImages4.push(item.response.data.url)
|
|
|
}
|
|
|
})
|
|
|
this.showImage4()
|
|
|
- this.quillImgLoading4 = false;
|
|
|
+ this.quillImgLoading4 = false
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
showImage4() {
|
|
|
- let quill = this.$refs.myQuillEditor4.quill;
|
|
|
+ let quill = this.$refs.myQuillEditor4.quill
|
|
|
this.editorImages4.forEach(item => {
|
|
|
// 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
- quill.insertEmbed(length, 'image', item);
|
|
|
+ let length = quill.getSelection().index
|
|
|
+ quill.insertEmbed(length, 'image', item)
|
|
|
// this.$refs.imageListUpload2.clearFiles()
|
|
|
// 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
+ quill.setSelection(length + 1)
|
|
|
})
|
|
|
- this.editorImages4 = [];
|
|
|
- this.$refs.imageListUpload4.clearFiles();
|
|
|
+ this.editorImages4 = []
|
|
|
+ this.$refs.imageListUpload4.clearFiles()
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 富文本图片上传失败
|
|
|
uploadError4() {
|
|
|
- this.quillImgLoading4 = false;
|
|
|
- this.$errorMsg('图片插入失败');
|
|
|
+ this.quillImgLoading4 = false
|
|
|
+ this.$errorMsg('图片插入失败')
|
|
|
+ },
|
|
|
+
|
|
|
+ // ----------
|
|
|
+ // 富文本图片上传前
|
|
|
+ beforeUpload5() {
|
|
|
+ this.quillImgLoading5 = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 富文本图片上传成功
|
|
|
+ uploadSuccess5(res, file, fileList) {
|
|
|
+ fileList.forEach(item => {
|
|
|
+ if (this.editorImages5.indexOf(item.response.data.url) < 0) {
|
|
|
+ this.editorImages5.push(item.response.data.url)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.showImage5()
|
|
|
+ this.quillImgLoading5 = false
|
|
|
+ },
|
|
|
+
|
|
|
+ showImage5() {
|
|
|
+ let quill = this.$refs.myQuillEditor5.quill
|
|
|
+ this.editorImages5.forEach(item => {
|
|
|
+ // 获取光标所在位置
|
|
|
+ let length = quill.getSelection().index
|
|
|
+ quill.insertEmbed(length, 'image', item)
|
|
|
+ // this.$refs.imageListUpload2.clearFiles()
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(length + 1)
|
|
|
+ })
|
|
|
+ this.editorImages5 = []
|
|
|
+ this.$refs.imageListUpload5.clearFiles()
|
|
|
},
|
|
|
-
|
|
|
- // ----------
|
|
|
- // 富文本图片上传前
|
|
|
- beforeUpload5() {
|
|
|
- this.quillImgLoading5 = true;
|
|
|
- },
|
|
|
-
|
|
|
- // 富文本图片上传成功
|
|
|
- uploadSuccess5(res, file, fileList) {
|
|
|
- fileList.forEach(item => {
|
|
|
- if(this.editorImages5.indexOf(item.response.data.url) < 0) {
|
|
|
- this.editorImages5.push(item.response.data.url);
|
|
|
- }
|
|
|
- })
|
|
|
- this.showImage5()
|
|
|
- this.quillImgLoading5 = false;
|
|
|
- },
|
|
|
-
|
|
|
- showImage5() {
|
|
|
- let quill = this.$refs.myQuillEditor5.quill;
|
|
|
- this.editorImages5.forEach(item => {
|
|
|
- // 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
- quill.insertEmbed(length, 'image', item);
|
|
|
- // this.$refs.imageListUpload2.clearFiles()
|
|
|
- // 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
- })
|
|
|
- this.editorImages5 = [];
|
|
|
- this.$refs.imageListUpload5.clearFiles();
|
|
|
- },
|
|
|
-
|
|
|
- // 富文本图片上传失败
|
|
|
- uploadError5() {
|
|
|
- this.quillImgLoading5 = false;
|
|
|
- this.$errorMsg('图片插入失败');
|
|
|
- },
|
|
|
+
|
|
|
+ // 富文本图片上传失败
|
|
|
+ uploadError5() {
|
|
|
+ this.quillImgLoading5 = false
|
|
|
+ this.$errorMsg('图片插入失败')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-uploader1,
|
|
|
- .avatar-uploader2,
|
|
|
- .avatar-uploader3,
|
|
|
- .avatar-uploader4 {
|
|
|
- height: 0;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader1,
|
|
|
+.avatar-uploader2,
|
|
|
+.avatar-uploader3,
|
|
|
+.avatar-uploader4 {
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|
linwenxin