From e8746fe5bb553c17e0052958d9c39a5e2bc6f6a1 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 15 七月 2025 14:58:32 +0800
Subject: [PATCH] 商家端活动申请
---
manager/src/views/news/index.vue | 388 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 348 insertions(+), 40 deletions(-)
diff --git a/manager/src/views/news/index.vue b/manager/src/views/news/index.vue
index e9d2d95..0b5b888 100644
--- a/manager/src/views/news/index.vue
+++ b/manager/src/views/news/index.vue
@@ -135,7 +135,28 @@
</Col>
<Col span="24">
<FormItem label="鏂伴椈鍐呭锛�" prop="content">
- <editor ref="editor" @input="getReason" />
+ <Upload
+ :show-upload-list="false"
+ ref="upload"
+ style="display: none"
+ :before-upload="handleUploadEdit"
+ :format="['jpg','jpeg','png','gif','mp4','mov']"
+ :max-size="20480"
+ action=""
+ accept="image/*,video/*"
+ >
+ </Upload>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
+ <quill-editor
+ v-model="newsForm.content"
+ ref="QuillEditor"
+ class="editor"
+ :options="editorOption"
+ @blur="onEditorBlur($event)"
+ @focus="onEditorFocus($event)"
+ @ready="onEditorReady($event)"
+ >
+ </quill-editor>
</FormItem>
</Col>
</Row>
@@ -202,11 +223,87 @@
</div>
</template>
<script>
-import Editor from '@/components/editor/index.vue'
import { getNews,editNews,addNews,publish,delById } from '@/api/news.js'
+import { uploadFileByLmk, delByKey } from "@/api/common.js"
+import { quillEditor } from 'vue-quill-editor'
+
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+
+import * as Quill from 'quill' //寮曞叆缂栬緫鍣�
+import VideoBlot from '../activity/video.js';
+
+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': [] }], // 灞呬腑
+ ['clean'], // 娓呴櫎鏍峰紡,
+ ['link'],
+ ['myUploadBtn'],
+]
+
+// toolbar鏍囬
+const titleConfig = [
+ { Choice: '.ql-insertMetric', title: '璺宠浆閰嶇疆' },
+ { Choice: '.ql-bold', title: '鍔犵矖' },
+ { Choice: '.ql-italic', title: '鏂滀綋' },
+ { Choice: '.ql-underline', title: '涓嬪垝绾�' },
+ { Choice: '.ql-header', title: '娈佃惤鏍煎紡' },
+ { Choice: '.ql-strike', title: '鍒犻櫎绾�' },
+ { Choice: '.ql-blockquote', title: '鍧楀紩鐢�' },
+ { Choice: '.ql-code', title: '鎻掑叆浠ｇ爜' },
+ { Choice: '.ql-code-block', title: '鎻掑叆浠ｇ爜娈�' },
+ { Choice: '.ql-font', title: '瀛椾綋' },
+ { Choice: '.ql-size', title: '瀛椾綋澶у皬' },
+ { Choice: '.ql-list[value="ordered"]', title: '缂栧彿鍒楄〃' },
+ { Choice: '.ql-list[value="bullet"]', title: '椤圭洰鍒楄〃' },
+ { Choice: '.ql-direction', title: '鏂囨湰鏂瑰悜' },
+ { Choice: '.ql-header[value="1"]', title: 'h1' },
+ { Choice: '.ql-header[value="2"]', title: 'h2' },
+ { Choice: '.ql-align', title: '瀵归綈鏂瑰紡' },
+ { Choice: '.ql-color', title: '瀛椾綋棰滆壊' },
+ { Choice: '.ql-background', title: '鑳屾櫙棰滆壊' },
+ { Choice: '.ql-image', title: '鍥惧儚' },
+ { Choice: '.ql-video', title: '瑙嗛' },
+ { Choice: '.ql-link', title: '娣诲姞閾炬帴' },
+ { Choice: '.ql-formula', title: '鎻掑叆鍏紡' },
+ { Choice: '.ql-clean', title: '娓呴櫎瀛椾綋鏍煎紡' },
+ { Choice: '.ql-script[value="sub"]', title: '涓嬫爣' },
+ { Choice: '.ql-script[value="super"]', title: '涓婃爣' },
+ { Choice: '.ql-indent[value="-1"]', title: '鍚戝乏缂╄繘' },
+ { Choice: '.ql-indent[value="+1"]', title: '鍚戝彸缂╄繘' },
+ { Choice: '.ql-header .ql-picker-label', title: '鏍囬澶у皬' },
+ { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '鏍囬涓�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '鏍囬浜�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '鏍囬涓�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '鏍囬鍥�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '鏍囬浜�' },
+ { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '鏍囬鍏�' },
+ { Choice: '.ql-header .ql-picker-item:last-child', title: '鏍囧噯' },
+ { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '灏忓彿' },
+ { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '澶у彿' },
+ { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '瓒呭ぇ鍙�' },
+ { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '鏍囧噯' },
+ { Choice: '.ql-align .ql-picker-item:first-child', title: '灞呭乏瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '灞呬腑瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '灞呭彸瀵归綈' },
+ { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '涓ょ瀵归綈' }
+]
+
+
export default {
name: "newsManagement",
- components: {Editor},
+ components: {quillEditor},
data(){
return{
// 鍥剧墖棰勮
@@ -316,13 +413,126 @@
value:1
}
- ]
+ ],
+
+ file: null,
+ Quill:'',
+ defaultValue: '',
+ editorOption: {
+ placeholder: '璇峰湪杩欓噷杈撳叆',
+ theme: 'snow', //涓婚 snow/bubble
+ modules: {
+ history: {
+ delay: 1000,
+ maxStack: 50,
+ userOnly: false
+ },
+ toolbar: {
+ container: toolbarOptions,
+ handlers: {
+ myUploadBtn: this.myMethod,
+ }
+ }
+ }
+ }
}
},
+ // 鍦ㄧ粍浠跺垱寤哄墠娉ㄥ唽
+ beforeCreate() {
+ Quill.register(VideoBlot, true);
+ },
mounted() {
+ //鍒濆鍖�
+ this.Quill=this.$refs.QuillEditor.quill
this.getNewsList();
+ this.initTitle();
+ this.initButton();
},
methods:{
+ onEditorBlur(editor) {
+ },
+ // 鑾峰緱鐒︾偣
+ onEditorFocus(editor) {
+ },
+ // 寮�濮�
+ onEditorReady(editor) {
+ },
+ myMethod(){
+ this.$refs.upload.handleClick();
+ },
+ initButton(){
+ const editorButton = document.querySelector('.ql-myUploadBtn')
+ editorButton.innerHTML = '<svg t="1751966766109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1530" fill="currentColor" style="width: 1em; height: 1em; vertical-align: middle;"><path d="M1024 693.248q0 25.6-8.704 48.128t-24.576 40.448-36.864 30.208-45.568 16.384l1.024 1.024-17.408 0-4.096 0-4.096 0-675.84 0q-5.12 1.024-16.384 1.024-39.936 0-74.752-15.36t-60.928-41.472-40.96-60.928-14.848-74.752 14.848-74.752 40.96-60.928 60.928-41.472 74.752-15.36l1.024 0q-1.024-8.192-1.024-15.36l0-16.384q0-72.704 27.648-137.216t75.776-112.128 112.128-75.264 136.704-27.648 137.216 27.648 112.64 75.264 75.776 112.128 27.648 137.216q0 37.888-8.192 74.24t-22.528 69.12q5.12-1.024 10.752-1.536t10.752-0.512q27.648 0 52.736 10.752t43.52 29.696 29.184 44.032 10.752 53.76zM665.6 571.392q20.48 0 26.624-4.608t-8.192-22.016q-14.336-18.432-31.744-48.128t-36.352-60.416-38.4-57.344-37.888-38.912q-18.432-13.312-27.136-14.336t-25.088 12.288q-18.432 15.36-35.84 38.912t-35.328 50.176-35.84 52.224-36.352 45.056q-18.432 18.432-13.312 32.768t25.6 14.336l16.384 0q9.216 0 19.968 0.512t20.992 0.512l17.408 0q14.336 1.024 18.432 9.728t4.096 24.064q0 17.408-0.512 30.72t-0.512 25.6-0.512 25.6-0.512 30.72q0 7.168 1.536 15.36t5.632 15.36 12.288 11.776 21.504 4.608l23.552 0q9.216 0 27.648 1.024 24.576 0 28.16-12.288t3.584-38.912q0-23.552 0.512-42.496t0.512-51.712q0-23.552 4.608-36.352t19.968-12.8q11.264 0 32.256-0.512t32.256-0.512z" p-id="1531"></path></svg>'
+ },
+
+ initTitle() {
+ document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
+ for (let item of titleConfig) {
+ let tip = document.querySelector('.quill-editor ' + item.Choice)
+ if (!tip) continue
+ tip.setAttribute('title', item.title)
+ }
+ },
+ handleUploadEdit(file){
+ const fileType = file.type
+ const isImage = fileType.includes('image')
+ const isVideo = fileType.includes('video')
+
+ if (!isImage && !isVideo) {
+ this.$Message.error('璇蜂笂浼犲浘鐗囨垨瑙嗛鏂囦欢')
+ return false
+ }
+
+ if (file.size > 20 * 1024 * 1024) {
+ this.$Message.error('鏂囦欢澶у皬涓嶈兘瓒呰繃20MB')
+ return false
+ }
+
+ this.file = file
+ this.uploadFile2()
+ return false
+ },
+ uploadFile2() {
+
+ if (!this.file) return
+
+ this.submitLoading = true
+ const formData = new FormData()
+ formData.append('file', this.file)
+ uploadFileByLmk(formData).then(res => {
+ this.submitLoading = false
+ if (res.code === 200) {
+ let url = res.data.url;
+ let fileKey = res.data.fileKey;
+ let fileType = this.getFileType(this.file);
+
+ const range = this.Quill.getSelection();
+ const index = range ? range.index : this.Quill.getLength();
+
+ console.log("--------");
+ if (fileType === 'video') {
+ this.Quill.insertEmbed(index, 'video', {
+ url:url,
+ controls:'controls',
+ width:'100%',
+ height:'auto'
+ });
+ } else if (fileType === 'image') {
+ this.Quill.insertEmbed(index, "image", url);
+ } else {
+ // 濡傛灉涓嶆槸鍥剧墖鎴栬棰戯紝鍙互澶勭悊鍏朵粬绫诲瀷鎴栫粰鍑烘彁绀�
+ this.$Message.warning('涓嶆敮鎸佺殑鏂囦欢绫诲瀷');
+ return;
+ }
+ console.log("--------");
+ console.log(this.newsForm.content)
+ this.Quill.setSelection(index + 1);
+ this.$Message.success('涓婁紶鎴愬姛')
+ }
+ }).catch(() => {
+ this.submitLoading = false
+ })
+ },
getNewsList(){
this.loading = true
getNews(this.searchForm).then(res =>{
@@ -338,54 +548,57 @@
this.loading = false
})
},
- getReason(content) {
- this.newsForm.content = content
- },
- saveOrUpdate(){
- this.$refs.form.validate(valid => {
- if (valid) {
- this.submitLoading = true
- const submitData = {
- ...this.newsForm,
- publish: this.newsForm.publish !== 0, // true 鈫� 1, false 鈫� 0
- };
- if (this.newsForm.id){
- editNews(submitData).then(res => {
- this.submitLoading = false
- if (res.code === 200) {
- this.$Message.success(res.msg)
- this.modelClose()
- this.getNewsList()
- }
- }).catch(() => {
- this.submitLoading = false
- })
- }else {
- addNews(submitData).then(res => {
- this.submitLoading = false
- if (res.code === 200) {
- this.$Message.success(res.msg)
- this.modelClose()
- this.getNewsList()
- }
- }).catch(() => {
- this.submitLoading = false
- })
- }
- }
- })
+ saveOrUpdate(){
+ console.log(this.newsForm)
+ // this.$refs.form.validate(valid => {
+ // if (valid) {
+ // this.submitLoading = true
+ // const submitData = {
+ // ...this.newsForm,
+ // publish: this.newsForm.publish !== 0, // true 鈫� 1, false 鈫� 0
+ // };
+ // if (this.newsForm.id){
+ // editNews(submitData).then(res => {
+ // this.submitLoading = false
+ // if (res.code === 200) {
+ // this.$Message.success(res.msg)
+ // this.modelClose()
+ // this.getNewsList()
+ // }
+ // }).catch(() => {
+ // this.submitLoading = false
+ // })
+ // }else {
+ // addNews(submitData).then(res => {
+ // this.submitLoading = false
+ // if (res.code === 200) {
+ // this.$Message.success(res.msg)
+ // this.modelClose()
+ // this.getNewsList()
+ // }
+ // }).catch(() => {
+ // this.submitLoading = false
+ // })
+ // }
+ //
+ // }
+ // })
},
+
infoModelClose(){
this.infoModelShow = false;
},
+
modelClose(){
this.modelShow = false;
},
+
changePage(page) {
this.searchForm.pageNumber = page
this.getNewsList()
},
+
// 鏀瑰彉姣忛〉鏉℃暟
changePageSize(pageSize) {
this.searchForm.pageNumber = 1
@@ -402,6 +615,7 @@
})
},
+
openEdit(row){
this.modelTitle = '淇敼鏂伴椈';
this.modelShow = true;
@@ -411,18 +625,23 @@
this.newsForm.id = row.id;
this.$refs.editor.setContent(this.newsForm.content)
},
+
openAdd(){
this.modelTitle = '鏂板鏂伴椈';
this.modelShow = true;
this.$refs.form.resetFields()
this.newsForm.id = '';
+ this.newsForm.content = '';
+ this.newsForm.publish = 0;
},
+
detail(row){
this.modelTitle = '娲诲姩璇︽儏'
this.infoModelShow = true
this.newsInfo = row
},
+
changeStatus(row,action){
row.statusLoading = true;
@@ -436,6 +655,7 @@
row.statusLoading = false
})
},
+
// 琛ㄦ牸閫夋嫨鍙樺寲
showSelect(selection) {
this.selectList = selection.map(item => item.id)
@@ -449,6 +669,7 @@
this.searchForm.pageNumber = 1
this.getNewsList()
},
+
resetSearch(){
this.$refs.searchForm.resetFields()
this.searchForm.pageNumber = 1
@@ -460,6 +681,11 @@
</script>
<style scoped lang="scss">
+.ql-editor .ql-video {
+ width: 50%;
+ height: auto; /* 鏍规嵁浣犵殑闇�姹傝皟鏁撮珮搴� */
+ max-width: 100%;
+}
.activity-management {
.search-form {
padding: 16px;
@@ -540,4 +766,86 @@
}
}
}
+/*
+ 鏂囧瓧澶у皬
+*/
+.ql-snow .ql-picker.ql-size{
+ width: 70px; // 鑿滃崟鏍忓崰姣斿搴�
+}
+/*
+ 瀛椾綋
+*/
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
+ content: "榛戜綋";
+ font-family: "SimHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
+ content: "寰蒋闆呴粦";
+ font-family: "Microsoft YaHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
+ content: "妤蜂綋";
+ font-family: "KaiTi";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
+ content: "浠垮畫";
+ font-family: "FangSong";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
+ content: "Arial";
+ font-family: "Arial";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
+ content: "Times New Roman";
+ font-family: "Times New Roman";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
+ content: "sans-serif";
+ font-family: "sans-serif";
+}
+
+.ql-font-SimSun {
+ font-family: "SimSun";
+}
+
+.ql-font-SimHei {
+ font-family: "SimHei";
+}
+
+.ql-font-Microsoft-YaHei {
+ font-family: "Microsoft YaHei";
+}
+
+.ql-font-KaiTi {
+ font-family: "KaiTi";
+}
+
+.ql-font-FangSong {
+ font-family: "FangSong";
+}
+
+.ql-font-Arial {
+ font-family: "Arial";
+}
+
+.ql-font-Times-New-Roman {
+ font-family: "Times New Roman";
+}
+
+.ql-font-sans-serif {
+ font-family: "sans-serif";
+}
</style>
--
Gitblit v1.8.0