mirror of
https://gitee.com/was666/as-editor.git
synced 2025-02-23 02:32:53 +08:00
feat: 优化视频/文章组件
This commit is contained in:
王奥斯
parent
1154489e67
commit
5b91c88880
160
package-lock.json
generated
160
package-lock.json
generated
@ -2852,63 +2852,6 @@
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
|
||||
"integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
|
||||
@ -2923,28 +2866,6 @@
|
||||
"requires": {
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
|
||||
"integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -13283,6 +13204,87 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
import httpAjax from './http.js'
|
||||
|
||||
class httpApi {
|
||||
|
||||
// 获取视频列表
|
||||
newsList = (data) => httpAjax({
|
||||
url: '/adm/component/getCourseList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
|
||||
// 上传图片base64
|
||||
miniShop = (data) => httpAjax({
|
||||
url: '/upload/base64/miniShop',
|
||||
@ -23,14 +16,6 @@ class httpApi {
|
||||
header: 'json',
|
||||
data
|
||||
})
|
||||
|
||||
//上架
|
||||
shelves = (data) => httpAjax({
|
||||
url: '/adm/shopTemplate/shelves',
|
||||
method: 'post',
|
||||
header: 'json',
|
||||
data
|
||||
})
|
||||
|
||||
//获取创建过的页面列表
|
||||
shopTemplate = (data) => httpAjax({
|
||||
|
||||
@ -10,7 +10,6 @@ export { default as storeinformation } from './storeinformation'
|
||||
export { default as entertheshop } from './entertheshop'
|
||||
export { default as notice } from './notice'
|
||||
export { default as videoss } from './videoss'
|
||||
export { default as voicer } from './voicer'
|
||||
export { default as custommodule } from './custommodule'
|
||||
export { default as communitypowder } from './communitypowder'
|
||||
export { default as storenotecard } from './storenotecard'
|
||||
|
||||
@ -154,17 +154,9 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<div class="videoss">
|
||||
<!-- 默认视频 -->
|
||||
<section class="default" v-if="!datas.videoData">
|
||||
<section class="default" v-if="!datas.src">
|
||||
<van-icon name="tv-o" size="150px" />
|
||||
</section>
|
||||
|
||||
<!-- 选择视频后 -->
|
||||
<section v-else style="min-height: 200px; position: relative">
|
||||
<!-- 视频封面 -->
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.videoData.coverUrl"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 图标 -->
|
||||
<van-icon class="bof" name="play-circle-o" />
|
||||
<section v-else style="position: relative">
|
||||
<video
|
||||
:src="datas.src"
|
||||
controls
|
||||
:autoplay="datas.autoplay"
|
||||
:poster="datas.coverUrl"
|
||||
width="100%"
|
||||
></video>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
@ -31,19 +29,9 @@ export default {
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
if (this.datas.videoData) {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
this.datas.videoData =
|
||||
shopCommodity[this.datas.videoData.type][this.datas.videoData.id]
|
||||
console.log(this.datas.videoData, '------------created imageList')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div class="voicer">
|
||||
<!-- 默认音频 -->
|
||||
<section class="default" v-if="!datas.voicerData">
|
||||
<van-icon name="music-o" size="150px" />
|
||||
</section>
|
||||
|
||||
<!-- 选择音频后 -->
|
||||
<section v-else style="min-height: 200px; position: relative">
|
||||
<!-- 音频封面 -->
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.voicerData.coverUrl"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 图标 -->
|
||||
<van-icon class="bof" name="music-o" />
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'voicer',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
if (this.datas.voicerData) {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
this.datas.voicerData =
|
||||
shopCommodity[this.datas.voicerData.type][this.datas.voicerData.id]
|
||||
console.log(this.datas.voicerData, '------------created imageList')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.voicer {
|
||||
position: relative;
|
||||
/* 默认音频 */
|
||||
.default {
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
background: #979797;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 播放图标 */
|
||||
.bof {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 100px;
|
||||
opacity: 0.5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,6 @@ export { default as storeinformationstyle } from './storeinformationstyle'
|
||||
export { default as entertheshopstyle } from './entertheshopstyle'
|
||||
export { default as noticestyle } from './noticestyle'
|
||||
export { default as videostyle } from './videostyle'
|
||||
export { default as voicerstyle } from './voicerstyle'
|
||||
export { default as custommodulestyle } from './custommodulestyle'
|
||||
export { default as communitypowderstyle } from './communitypowderstyle'
|
||||
export { default as storenotecardstyle } from './storenotecardstyle'
|
||||
|
||||
@ -84,33 +84,8 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
v-if="item.linktype !== '11'"
|
||||
v-model="item.http.name"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId"
|
||||
:no-data-text="emptyText"
|
||||
@visible-change="
|
||||
(isVisible) => {
|
||||
return changeType(isVisible, item.linktype)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="[index, item]"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 输入外部链接 -->
|
||||
<el-input
|
||||
v-if="item.linktype === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="item.http.externalLink"
|
||||
@ -259,29 +234,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-if="datas.linktype !== '11'"
|
||||
v-model="datas.http.name"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId1"
|
||||
@visible-change="changeType1(datas.linktype)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 输入外部链接 -->
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-if="datas.linktype === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="datas.http.externalLink"
|
||||
@ -314,7 +269,7 @@ export default {
|
||||
optionsType1: [
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
@ -376,29 +331,9 @@ export default {
|
||||
animation: 200,
|
||||
},
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
@ -409,16 +344,8 @@ export default {
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
|
||||
selectType(index) {
|
||||
// 每次切换类型之前 清空之前选中跳转
|
||||
this.datas.imageList[index].http = {}
|
||||
@ -439,92 +366,6 @@ export default {
|
||||
deleteimg(index) {
|
||||
this.datas.imageList.splice(index, 1)
|
||||
},
|
||||
// 选择类型
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
if (
|
||||
linkType === '1' ||
|
||||
linkType === '2' ||
|
||||
linkType === '6' ||
|
||||
linkType === '3' ||
|
||||
linkType === '7'
|
||||
) {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
this.$httpApi.newsList({ type: linkType }).then((res) => {
|
||||
this.activ = 0
|
||||
|
||||
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
||||
this.options = res.data
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
})
|
||||
} else if (linkType === '10') {
|
||||
// 历史页面
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options = res.data.shopTemplateList
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 尾部查看更多
|
||||
changeType1(res) {
|
||||
if (res === '1' || res === '2' || res === '6' || res === '3') {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
this.$httpApi.newsList({ type: res }).then((res) => {
|
||||
this.activ = 0
|
||||
|
||||
this.options1 = res.data
|
||||
})
|
||||
} else if (res === '10') {
|
||||
// 历史页面
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options1 = res.data.shopTemplateList
|
||||
})
|
||||
}
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId1(res) {
|
||||
if (res.component) delete res.component
|
||||
this.datas.http = res
|
||||
},
|
||||
|
||||
changeId(res) {
|
||||
console.log(this.datas.imageList[res[0]].linktype, '-------------type')
|
||||
// 商品类型只匹配 1 2 3 6
|
||||
if (
|
||||
this.$utils.coursewareMetchArr.includes(
|
||||
this.datas.imageList[res[0]].linktype
|
||||
)
|
||||
) {
|
||||
// 查询本地动态数据 然后再赋值
|
||||
let dynamic = this.$utils.getCoursewareData(
|
||||
this.datas.imageList[res[0]].linktype,
|
||||
res[1].id
|
||||
)
|
||||
this.datas.imageList[res[0]].http = dynamic
|
||||
} else {
|
||||
this.datas.imageList[res[0]].http = res[1]
|
||||
}
|
||||
this.datas.imageList.forEach((item) => {
|
||||
if (item.http.component) {
|
||||
item.http.component = ''
|
||||
}
|
||||
})
|
||||
console.log(this.datas.imageList, '-----------------------save data')
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// eslint-disable-next-line vue/return-in-computed-property
|
||||
|
||||
@ -4,27 +4,19 @@
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<el-form label-width="70px" :model="datas" size="small" class="lef">
|
||||
<el-form-item label="视频">
|
||||
<!-- 选择器 -->
|
||||
<el-select
|
||||
size="medium"
|
||||
v-model="videoData"
|
||||
placeholder="请选择需要播放的视频"
|
||||
@change="listChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in videoList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 刷新 -->
|
||||
<span class="link" @click="links">{{
|
||||
activ === 0 ? '刷新' : '刷新中...'
|
||||
}}</span>
|
||||
<el-form-item label="封面链接">
|
||||
<el-input
|
||||
v-model="datas.coverUrl"
|
||||
placeholder="请输入封面链接"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频链接">
|
||||
<el-input
|
||||
v-model="datas.src"
|
||||
placeholder="请输入视频链接"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 是否自动播放 -->
|
||||
<el-form-item class="lef" label="是否自动播放" label-width="100px">
|
||||
@ -42,56 +34,10 @@ export default {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoList: [], // 视频列表
|
||||
activ: 0, //刷新
|
||||
videoData: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.links()
|
||||
this.videoData = this.datas.videoData.name
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
if (this.datas.videoData) {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
this.datas.videoData =
|
||||
shopCommodity[this.datas.videoData.type][this.datas.videoData.id]
|
||||
console.log(this.datas.videoData, '------------created imageList')
|
||||
}
|
||||
},
|
||||
|
||||
/* 加载视频下拉框 */
|
||||
links() {
|
||||
if (this.activ === 1) return
|
||||
this.activ = 1
|
||||
/* 获取视频信息 */
|
||||
this.$httpApi.newsList({ type: 1 }).then((res) => {
|
||||
this.activ = 0
|
||||
|
||||
this.videoList = res.data
|
||||
})
|
||||
},
|
||||
|
||||
// 下拉框数据变化
|
||||
listChange(data) {
|
||||
let filterArr = this.videoList.filter((item) => {
|
||||
return item.name == data
|
||||
})
|
||||
|
||||
// 通过商品 type 和 id 获取到商品数据 newList接口数据可以不用
|
||||
this.datas.videoData = this.$utils.getCoursewareData('1', filterArr[0].id)
|
||||
console.log(this.datas.videoData, '------------------new video data')
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
datas: function () {
|
||||
this.videoData = this.datas.videoData.name
|
||||
},
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<div class="voicerstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<el-form label-width="70px" :model="datas" size="small" class="lef">
|
||||
<el-form-item label="音频">
|
||||
<!-- 选择器 -->
|
||||
<el-select
|
||||
size="medium"
|
||||
v-model="voicerData"
|
||||
placeholder="请选择需要播放的音频"
|
||||
@change="listChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voicerList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 刷新 -->
|
||||
<span class="link" @click="links">{{
|
||||
activ === 0 ? '刷新' : '刷新中...'
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'voicerstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
voicerList: [], // 视频列表
|
||||
activ: 0, //刷新
|
||||
voicerData: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links()
|
||||
this.voicerData = this.datas.voicerData.name
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
if (this.datas.voicerData) {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
this.datas.voicerData =
|
||||
shopCommodity[this.datas.voicerData.type][this.datas.voicerData.id]
|
||||
console.log(this.datas.voicerData, '------------created imageList')
|
||||
}
|
||||
},
|
||||
|
||||
/* 加载视频下拉框 */
|
||||
links() {
|
||||
if (this.activ === 1) return
|
||||
this.activ = 1
|
||||
/* 获取视频信息 */
|
||||
this.$httpApi.newsList({ type: 3 }).then((res) => {
|
||||
this.activ = 0
|
||||
console.log(res.data)
|
||||
|
||||
|
||||
this.voicerList = res.data
|
||||
})
|
||||
},
|
||||
|
||||
// 下拉框数据变化
|
||||
listChange(data) {
|
||||
let filterArr = this.voicerList.filter((item) => {
|
||||
return item.name == data
|
||||
})
|
||||
|
||||
// 通过商品 type 和 id 获取到商品数据 newList接口数据可以不用
|
||||
this.datas.voicerData = this.$utils.getCoursewareData(
|
||||
'3',
|
||||
filterArr[0].id
|
||||
)
|
||||
console.log(this.datas.voicerData, '------------------new video data')
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
datas: function () {
|
||||
this.voicerData = this.datas.voicerData.name
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.voicerstyle {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 10px 20px;
|
||||
box-sizing: border-box;
|
||||
/* 标题 */
|
||||
h2 {
|
||||
padding: 24px 16px 24px 0;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #f2f4f6;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.lef {
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* 刷新 */
|
||||
.link {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #155bd4;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -88,12 +88,6 @@ export default {
|
||||
icon: 'icon-shipin',
|
||||
name: 'videoss',
|
||||
},
|
||||
{
|
||||
text: '音频',
|
||||
type: '1-9',
|
||||
icon: 'icon-yuyin',
|
||||
name: 'voicer',
|
||||
},
|
||||
{
|
||||
text: '富文本',
|
||||
type: '1-10',
|
||||
|
||||
@ -79,25 +79,9 @@ export default {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
dialogImageUrl: {}, // 选择的数据
|
||||
type: '1',
|
||||
type: '2',
|
||||
uploadShow: false, //是否显示上传图片
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
@ -106,14 +90,6 @@ export default {
|
||||
type: '5',
|
||||
name: '其他',
|
||||
},
|
||||
// {
|
||||
// type: '10',
|
||||
// name: '跳转至历史页面'
|
||||
// },
|
||||
// {
|
||||
// type: '11',
|
||||
// name: '外部链接'
|
||||
// }
|
||||
], // 选择跳转类型
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
externalLink: null,
|
||||
@ -131,47 +107,138 @@ export default {
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
if (
|
||||
linkType === '1' ||
|
||||
linkType === '2' ||
|
||||
linkType === '6' ||
|
||||
linkType === '3' ||
|
||||
linkType === '7' ||
|
||||
linkType === '5'
|
||||
) {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
this.$httpApi.newsList({ type: linkType }).then((res) => {
|
||||
this.activ = 0
|
||||
|
||||
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
||||
this.options = res.data
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
})
|
||||
} else if (linkType === '10') {
|
||||
// 历史页面
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options = res.data.shopTemplateList
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
})
|
||||
/* 获取视频,音频,直播信息 */
|
||||
let res = {
|
||||
code: 0,
|
||||
success: true,
|
||||
error: false,
|
||||
data: [
|
||||
{
|
||||
id: 403,
|
||||
createTime: 1621504872000,
|
||||
updateTime: 1621504872000,
|
||||
remark: null,
|
||||
name: '查玛代表传承人',
|
||||
classifyId: null,
|
||||
type: 2,
|
||||
retailPrice: 0,
|
||||
price: 0,
|
||||
memberPrice: 0,
|
||||
vipPrice: 0,
|
||||
costPrice: 0,
|
||||
jidPrice: 0,
|
||||
zidPrice: 0,
|
||||
tidPrice: 0,
|
||||
scorePrice: 0,
|
||||
freight: 0,
|
||||
top: null,
|
||||
score: null,
|
||||
sort: 1,
|
||||
status: 1,
|
||||
code: null,
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
||||
url: 'https://mgt.starfirelink.com/mobile/index.html#/videoOnDemand?videoId=5285890818212341060',
|
||||
lengths: '',
|
||||
introduce: '',
|
||||
free: 1,
|
||||
classOne: null,
|
||||
classTwo: null,
|
||||
classThree: null,
|
||||
seriesId: 0,
|
||||
vId: null,
|
||||
videoId: '5285890818212341060',
|
||||
teacherId: 1,
|
||||
details: '',
|
||||
buys: 0,
|
||||
tryVideoId: null,
|
||||
tryLengths: null,
|
||||
num: 0,
|
||||
bannerImgUrl: null,
|
||||
specifications: null,
|
||||
color: null,
|
||||
createTimes: null,
|
||||
createTimee: null,
|
||||
updateTimes: null,
|
||||
updateTimee: null,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
order: null,
|
||||
ordertype: null,
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
seriesName: null,
|
||||
},
|
||||
{
|
||||
id: 396,
|
||||
createTime: 1621403190000,
|
||||
updateTime: 1621416056000,
|
||||
remark: null,
|
||||
name: '测试',
|
||||
classifyId: null,
|
||||
type: 2,
|
||||
retailPrice: 0,
|
||||
price: 1,
|
||||
memberPrice: 1,
|
||||
vipPrice: 0,
|
||||
costPrice: 0,
|
||||
jidPrice: 0,
|
||||
zidPrice: 0,
|
||||
tidPrice: 0,
|
||||
scorePrice: 0,
|
||||
freight: 0,
|
||||
top: null,
|
||||
score: null,
|
||||
sort: 1,
|
||||
status: 1,
|
||||
code: null,
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
||||
url: 'https://mgt.starfirelink.com/mobile/index.html#/videoOnDemand?videoId=',
|
||||
lengths: '1',
|
||||
introduce: '1',
|
||||
free: 0,
|
||||
classOne: null,
|
||||
classTwo: null,
|
||||
classThree: null,
|
||||
seriesId: 85,
|
||||
vId: null,
|
||||
videoId: '',
|
||||
teacherId: 1,
|
||||
details: '1',
|
||||
buys: 1,
|
||||
tryVideoId: null,
|
||||
tryLengths: null,
|
||||
num: 0,
|
||||
bannerImgUrl: null,
|
||||
specifications: null,
|
||||
color: null,
|
||||
createTimes: null,
|
||||
createTimee: null,
|
||||
updateTimes: null,
|
||||
updateTimee: null,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
order: null,
|
||||
ordertype: null,
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
seriesName: '非遗商城',
|
||||
},
|
||||
],
|
||||
}
|
||||
this.activ = 0
|
||||
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
||||
this.options = res.data
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(linkType, this.options)
|
||||
}
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId(res) {
|
||||
console.log(res)
|
||||
// 通过商品 type 和 id 获取到商品数据 newList接口数据可以不用
|
||||
console.log(this.$utils.getCoursewareData(this.type, res.id))
|
||||
console.log(this.$utils.getCoursewareData(this.type, res.id),'--------')
|
||||
this.dialogImageUrl = this.$utils.getCoursewareData(this.type, res.id)
|
||||
},
|
||||
/* 显示上传文件组件 */
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"
|
||||
@click="Previous"
|
||||
>
|
||||
返回店铺列表
|
||||
<!-- 返回 -->
|
||||
</p>
|
||||
<div>
|
||||
<el-button @click="reloads" type="danger"
|
||||
@ -24,9 +24,6 @@
|
||||
<!-- <el-button @click="Preservation"
|
||||
><i class="el-icon-s-claim el-icon--left"></i>保存</el-button
|
||||
> -->
|
||||
<!-- <el-button @click="upperShelf" type="primary"
|
||||
><i class="el-icon-upload el-icon--left"></i>上架</el-button
|
||||
> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -187,7 +184,6 @@ import {
|
||||
investigate,
|
||||
notice,
|
||||
videoss,
|
||||
voicer,
|
||||
custommodule,
|
||||
communitypowder,
|
||||
storenotecard,
|
||||
@ -216,7 +212,6 @@ import {
|
||||
investigatestyle,
|
||||
noticestyle,
|
||||
videostyle,
|
||||
voicerstyle,
|
||||
custommodulestyle,
|
||||
communitypowderstyle,
|
||||
storenotecardstyle,
|
||||
@ -313,32 +308,6 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 上架
|
||||
*
|
||||
* @param {Function} callBack 回调函数
|
||||
*/
|
||||
upperShelf() {
|
||||
this.Preservation(() => {
|
||||
const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '上架中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi.shelves({ shopTemplateId: this.id }).then((res) => {
|
||||
/* 取消加载 */
|
||||
loadingss.close()
|
||||
console.log(res)
|
||||
this.$message({
|
||||
message: '上架成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$router.push({ path: 'establishShop' })
|
||||
this.id = null
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查看JSON
|
||||
catJson() {
|
||||
this.$alert(
|
||||
@ -820,8 +789,6 @@ export default {
|
||||
noticestyle,
|
||||
videoss,
|
||||
videostyle,
|
||||
voicer,
|
||||
voicerstyle,
|
||||
custommodule,
|
||||
custommodulestyle,
|
||||
communitypowder,
|
||||
|
||||
@ -251,21 +251,12 @@ componentsData.set('videoss', {
|
||||
style: 'videostyle',
|
||||
setStyle: {
|
||||
text: '视频',
|
||||
videoData: null, //视频信息
|
||||
autoplay: false,
|
||||
},
|
||||
})
|
||||
componentsData.set('voicer', {
|
||||
component: 'voicer',
|
||||
text: '音频',
|
||||
type: '1-9',
|
||||
active: true,
|
||||
style: 'voicerstyle',
|
||||
setStyle: {
|
||||
text: '音频',
|
||||
voicerData: null, //音频信息
|
||||
src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 视频地址
|
||||
coverUrl:null, // 封面地址
|
||||
autoplay: false, // 是否自动播放
|
||||
},
|
||||
})
|
||||
|
||||
componentsData.set('custommodule', {
|
||||
component: 'custommodule',
|
||||
text: '自定义模块',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user