Merge branch 'xie0922'

This commit is contained in:
@fawn-nine
2023-12-06 16:03:06 +08:00
2 changed files with 516 additions and 369 deletions

View File

@@ -1,7 +1,18 @@
<template>
<el-dialog :title="!dataForm.productId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
@close="handlereset" lock-scroll width="750px">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
<el-dialog
:title="!dataForm.productId ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible"
@close="handlereset"
lock-scroll
width="750px"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
label-width="100px"
>
<!-- <el-form-item label="所属分类" prop="poids">
<el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
</el-form-item> -->
@@ -13,33 +24,90 @@
</el-form-item> -->
<!-- 关联的图书ids -->
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="请输入讲书标题"></el-input>
<el-input
v-model="dataForm.title"
placeholder="请输入讲书标题"
></el-input>
</el-form-item>
<el-form-item label="讲书章节" prop="chapter" :required="true">
<el-input style="width: 150px;" v-model.number="dataForm.chapter" @input="numberChange" placeholder="请输入章节序号" type="number" min="1"></el-input>
<el-input
style="width: 150px;"
v-model.number="dataForm.chapter"
@input="numberChange"
placeholder="请输入章节序号"
type="number"
min="1"
></el-input>
<br /><span style="color: #999;">请输入大于0的整数,且为必填项</span>
</el-form-item>
<el-form-item label="音频">
<el-upload :limit="1" class="el-uploadvideo " v-loading="loading" element-loading-text="正在保存到服务器,请勿离开..." element-loading-spinner="el-icon-loading"
<el-upload
:limit="1"
class="el-uploadvideo "
v-loading="loading"
element-loading-text="正在保存到服务器请勿离开..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
:class="{
uoloadSty: dataForm.showBtnDealImg,
disUoloadSty: dataForm.noneBtnImg
}"
:action="baseUrl + '/oss/fileoss'"
:file-list="voiceList" :on-success="videohandlePicSuccess" accept=".mp3" :on-remove="videohandleRemove"
:file-list="voiceList"
:on-success="videohandlePicSuccess"
accept=".mp3"
:on-remove="videohandleRemove"
:show-file-list="true"
:on-progress="uploadVideoProcess">
:on-progress="uploadVideoProcess"
>
<!-- <i class="el-icon-plus"></i> -->
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
<el-button slot="trigger" size="small" type="primary"
>上传文件</el-button
>
</el-upload>
<el-progress v-show="progressFlag" :percentage="loadProgress"></el-progress>
<el-progress
v-show="progressFlag"
:percentage="loadProgress"
></el-progress>
<div>
<audio id="resource" :src="dataForm.voices" controls v-show='true'></audio>
<audio
id="resource"
:src="dataForm.voices"
controls
v-show="true"
></audio>
</div>
</el-form-item>
<el-form-item label="轮播图" prop="images">
<el-upload
:limit="3"
class="el-uploadfeng"
:action="baseUrl + '/oss/fileoss'"
list-type="picture-card"
:file-list="swiperfileList"
:on-success="bannerHandlePicSuccess"
accept=".jpeg,.jpg,.gif,.png"
:on-remove="bannerHandleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<!-- <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
<img width="100%" :src="dataForm.productImageList" alt="">
</el-dialog> -->
<span>支持图片类型.jpeg,.jpg,.gif,.png 最多上传3张图片</span>
</el-form-item>
<el-form-item label="内容" prop="content">
<quill-editor v-model="dataForm.content" ref="myQuillEditor" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@ready="onEditorReady($event)" class="shangpin_editor">
<quill-editor
v-model="dataForm.content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
class="shangpin_editor"
>
</quill-editor>
</el-form-item>
<!-- <el-form-item label="排序" prop="sort">
@@ -48,34 +116,34 @@
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handlereset">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()" :disabled="loading">确定</el-button>
<el-button type="primary" @click="dataFormSubmit()" :disabled="loading"
>确定</el-button
>
</span>
</el-dialog>
</template>
<script>
import {
quillEditor
} from 'vue-quill-editor'
import global from '../../common/common.vue' //引入共用组间
import { quillEditor } from "vue-quill-editor";
import global from "../../common/common.vue"; //引入共用组间
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
data() {
// 自定义校验规则
var checkMoney = (rule, value, callback) => {
if (!value) {
return callback(new Error('章节序号不能为空,且必须大于0'));
return callback(new Error("章节序号不能为空,且必须大于0"));
}
// setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
callback(new Error("请输入数字值"));
} else {
if (value <= 0) {
callback(new Error('章节序号必须要大于0'));
callback(new Error("章节序号必须要大于0"));
} else {
callback();
}
@@ -102,113 +170,158 @@
productId: 0,
talkid: null,
limitCountImg: 1, // 图片数量
title: '',
productPid: '',
voices: '',
title: "",
productPid: "",
voices: "",
chapter: null,
content:''
content: "",
images:[]
},
voiceList: [],
swiperfileList:[],
dataRule: {
title: [{
title: [
{
required: true,
message: '书评标题不能为空',
trigger: 'blur'
}],
message: "书评标题不能为空",
trigger: "blur"
}
],
chapter: [{
chapter: [
{
validator: checkMoney,
trigger: 'blur'
}],
trigger: "blur"
}
]
},
// 富文本编辑器配置
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[
{
header: 1
}, {
},
{
header: 2
}], // 1、2 级标题
[{
list: 'ordered'
}, {
list: 'bullet'
}], // 有序、无序列表
[{
script: 'sub'
}, {
script: 'super'
}], // 上标/下标
[{
indent: '-1'
}, {
indent: '+1'
}], // 缩进
[{
direction: 'rtl'
}], // 文本方向
[{
size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
}], // 字体大小
[{
}
], // 1、2 级标题
[
{
list: "ordered"
},
{
list: "bullet"
}
], // 有序、无序列表
[
{
script: "sub"
},
{
script: "super"
}
], // 上标/下标
[
{
indent: "-1"
},
{
indent: "+1"
}
], // 缩进
[
{
direction: "rtl"
}
], // 文本方向
[
{
size: [
"12",
"14",
"16",
"18",
"20",
"22",
"24",
"28",
"32",
"36"
]
}
], // 字体大小
[
{
header: [1, 2, 3, 4, 5, 6]
}], // 标题
[{
}
], // 标题
[
{
color: []
}, {
},
{
background: []
}], // 字体颜色、字体背景颜色
}
], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{
[
{
align: []
}], // 对齐方式
['clean'], // 清除文本格
['image', 'video'] // 链接、图片、视频
}
], // 对齐方
["clean"], // 清除文本格式
["image", "video"] // 链接、图片、视频
]
},
placeholder: '请输入正文'
},
placeholder: "请输入正文"
}
};
},
created() {
},
created() {},
methods: {
init(id, bookid) {
this.productPid = bookid
this.dataForm.talkid = id || null
console.log(id,this.productPid,'this.productPid')
this.dataForm.productId = bookid || 0
this.visible = true
this.productPid = bookid;
this.dataForm.talkid = id || null;
console.log(id, this.productPid, "this.productPid");
this.dataForm.productId = bookid || 0;
this.visible = true;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.$refs["dataForm"].resetFields();
if (this.dataForm.talkid) {
this.$http({
url: this.$http.adornUrl(`/book/teach/getTeachDetail`),
method: 'get',
method: "get",
params: this.$http.adornParams({
'teachId': id
teachId: id
})
}).then(({
data
}) => {
console.log(data, 666)
}).then(({ data }) => {
// console.log(data, 666);
if (data && data.code === 0) {
this.dataForm.title = data.bookTeach.title
this.dataForm.voices = data.bookTeach.voices
this.dataForm.content = data.bookTeach.content
this.dataForm.chapter = data.bookTeach.chapter
if (this.dataForm.voices != '') {
this.dataForm.title = data.bookTeach.title;
this.dataForm.voices = data.bookTeach.voices;
this.dataForm.content = data.bookTeach.content;
this.dataForm.chapter = data.bookTeach.chapter;
if(data.bookTeach.images != ''){
let arr = data.bookTeach.images.split(';');
// console.log('转换成的数组',arr)
arr.forEach( (item,index) => {
this.swiperfileList.push({
name: index,
url:item
})
})
}
// console.log('初始化图片', this.swiperfileList)
if (this.dataForm.voices != "") {
this.voiceList.push({
name: data.bookTeach.title,
url: data.bookTeach.voices
})
});
}
// else {
// console.log(data.bookBuyConfig.productImageList)
@@ -225,17 +338,34 @@
// });
// this.swiperfileList = arr1
// }
}
})
});
} else {
console.log('为新增数据')
console.log("为新增数据");
}
})
});
},
bannerHandlePicSuccess(res, file) {
// 轮播图上传成功
if (res.msg == "success") {
this.swiperfileList.push({
name: file.name,
url: res.url
});
// this.dataForm.images.push(res.url)
// console.log(this.swiperfileList)
this.$message.success("上传成功");
} else {
this.$message.error("上传失败");
}
},
bannerHandleRemove(file, fileList) {
// 轮播图删除操作
this.swiperfileList = fileList
},
numberChange() {
console.log('改变了input值')
console.log("改变了input值");
},
dealImgChange(file, fileList) {
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
@@ -243,62 +373,72 @@
// 表单提交
dataFormSubmit() {
// console.log('userid', this.$store.state.user.id)
this.$refs['dataForm'].validate((valid) => {
this.$refs["dataForm"].validate(valid => {
if (valid && this.dataForm.chapter > 0) {
this.$http({
url: this.$http.adornUrl(`/book/teach/${!this.dataForm.talkid ? 'addTeach1' : 'updateTeach'}`),
method: 'post',
data: this.$http.adornData({
'bookId': parseInt(this.productPid),
'chapter': this.dataForm.chapter,
'title': this.dataForm.title,
'voices': this.dataForm.voices,
'content': this.dataForm.content,
// 'video': "https://ehh-private-01.oss-cn-beijing.aliyuncs.com…3/08/28/91fd5a4c35c34763abca5d2929637164movie.mp4",
'teachId': this.dataForm.talkid || undefined,
var imageslist = []
let arr = []
// console.log('this.swiperfileList',this.swiperfileList)
if(this.swiperfileList.length > 0){
arr = this.swiperfileList.map( item => {
return item.url
})
}).then(({
data
}) => {
}
imageslist = arr.join(";");
console.log(imageslist,'imageslist')
this.$http({
url: this.$http.adornUrl(
`/book/teach/${
!this.dataForm.talkid ? "addTeach1" : "updateTeach"
}`
),
method: "post",
data: this.$http.adornData({
bookId: parseInt(this.productPid),
chapter: this.dataForm.chapter,
title: this.dataForm.title,
voices: this.dataForm.voices,
content: this.dataForm.content,
images:imageslist, // 轮播图
// 'video': "https://ehh-private-01.oss-cn-beijing.aliyuncs.com…3/08/28/91fd5a4c35c34763abca5d2929637164movie.mp4",
teachId: this.dataForm.talkid || undefined
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.visible = false
this.dataForm.productDetails = ''
this.dataForm.video = ''
this.voiceList = []
this.$refs['dataForm'].resetFields()
this.visible = false;
this.dataForm.productDetails = "";
this.dataForm.video = "";
this.voiceList = [];
this.swiperfileList = []
this.dataForm.images = []
this.$refs["dataForm"].resetFields();
// this.$refs['dataForm'].reset()
this.$emit('refreshDataList')
this.$emit("refreshDataList");
}
})
});
} else {
this.$message.error(data.msg)
this.$message.error(data.msg);
}
})
});
} else {
this.$message.error('章节序号必须大于0!')
this.$message.error("章节序号必须大于0!");
}
})
});
},
changeTime(e) {
console.log(e)
},
handlePictureCardPreview(file) {
this.dataForm.productImages = file.url;
this.dialogVisible = true;
console.log(e);
},
// 字符串图片地址
getStringImgUrl() {
let arr = this.swiperfileList.map(item => item.url)
let arr = this.swiperfileList.map(item => item.url);
if (arr.length <= 0) {
return null
return null;
} else {
return arr.toString()
return arr.toString();
}
},
handlePicSuccess(res, file) {
@@ -308,9 +448,9 @@
this.fileList.push({
name: file.name,
url: res.url
})
this.dataForm.voices = res.url
console.log(this.dataForm.voices,'voices')
});
this.dataForm.voices = res.url;
console.log(this.dataForm.voices, "voices");
this.$message.success("上传成功");
} else {
this.$message.error("上传失败");
@@ -319,56 +459,59 @@
uploadVideoProcess(event, file, fileList) {
this.progressFlag = true; // 显示进度条
this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
console.log('this.loadProgress',this.loadProgress)
console.log("this.loadProgress", this.loadProgress);
if (this.loadProgress >= 100) {
this.loadProgress = 99
this.loading = true
this.loadProgress = 99;
this.loading = true;
// setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
}
},
videohandlePicSuccess(res, file) {
console.log(res,'res')
console.log(res, "res");
if (res.msg == "success") {
// this.dataForm.productImages = res.url;
this.voiceList.push({
name: file.name,
url: res.url
})
this.dataForm.voices = res.url
});
this.dataForm.voices = res.url;
// console.log(this.dataForm.productImages,'productImages')
this.loadProgress = 100
setTimeout(() => { this.progressFlag = false; this.loading = false; this.$message.success("上传成功");}, 1000) // 一秒后关闭进度条
this.loadProgress = 100;
setTimeout(() => {
this.progressFlag = false;
this.loading = false;
this.$message.success("上传成功");
}, 1000); // 一秒后关闭进度条
} else {
this.$message.error("上传失败");
}
},
handleRemove(file, fileList) {
this.dataForm.productImages = '';
this.fileList = fileList
this.dataForm.productImages = "";
this.fileList = fileList;
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
},
videohandleRemove(file, fileList) {
this.dataForm.voices = '';
this.voiceList = fileList
this.dataForm.voices = "";
this.voiceList = fileList;
},
handlereset() {
this.fileList = [],
this.voiceList = [] // 清空视频列表
this.dataForm.voices = ''
this.visible = false
(this.fileList = []), (this.voiceList = []); // 清空视频列表
this.dataForm.voices = "";
this.visible = false;
this.swiperfileList = []
this.$refs['dataForm'].resetFields()
this.dataForm.productDetails = ''
this.progressFlag = false
this.loading = false
this.dataForm.images = []
this.$refs["dataForm"].resetFields();
this.dataForm.productDetails = "";
this.progressFlag = false;
this.loading = false;
// this.$refs['dataForm'].reset()
},
// 失去焦点事件
onEditorBlur(quill) {
console.log('editor blur!', quill)
console.log("editor blur!", quill);
},
// 获得焦点事件
onEditorFocus(quill) {
@@ -377,16 +520,17 @@
// 准备富文本编辑器
onEditorReady(quill) {
// console.log('editor ready!', quill)
},
}
},
components: {
quillEditor
},
mounted() {
this.$bus.$on("haveBookIds", (data) => {
this.$bus.$on("haveBookIds", data => {
// console.log('haveBookIds', data)
data.bookIds.length > 0 ? this.dataForm.Books = data.bookIds : this.dataForm.Books = []
data.bookIds.length > 0
? (this.dataForm.Books = data.bookIds)
: (this.dataForm.Books = []);
});
},
@@ -396,13 +540,15 @@
// this.getGoodsTypeList()
},
deep: true
},
}
}
};
</script>
<style lang="less">
/deep/ .el-uploadvideo .el-upload-list li{height: auto !important;}
/deep/ .el-uploadvideo .el-upload-list li {
height: auto !important;
}
// .disUoloadSty {
// .el-upload--picture-card {
// display: none;

View File

@@ -7,10 +7,11 @@
// api接口请求地址
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com'; // 线上测试环境
window.SITE_CONFIG['baseUrl'] = 'https://testapi.nuttyreading.com'; // 线上测试环境
// window.SITE_CONFIG['baseUrl'] = 'https://api.nuttyreading.com'; // 线上正式环境
window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.110:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.110:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://59.110.212.44:9200/pb';
// window.SITE_CONFIG['baseUrl'] = 'http://192.168.110.100:9200/pb';
// cdn地址 = 域名 + 版本号
window.SITE_CONFIG['domain'] = './'; // 域名