mirror of
https://gitee.com/was666/as-editor.git
synced 2025-02-24 02:52:54 +08:00
feat: 优化组件设置
This commit is contained in:
王奥斯
parent
fc63abc5b1
commit
76e03410c8
162
package-lock.json
generated
162
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "as-editor",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -2852,6 +2852,63 @@
|
||||
"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",
|
||||
@ -2866,6 +2923,28 @@
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -13204,87 +13283,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"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.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
|
||||
"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",
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
v-model="datas.type"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
@ -57,35 +56,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="datas.http.name"
|
||||
v-if="datas.type !== '11'"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId"
|
||||
:no-data-text="emptyText"
|
||||
@visible-change="
|
||||
(isVisible) => {
|
||||
return changeType(isVisible, datas.type)
|
||||
}
|
||||
"
|
||||
>
|
||||
<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
|
||||
style="width: 100%"
|
||||
v-if="datas.type === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="datas.http.externalLink"
|
||||
@ -117,78 +90,19 @@ export default {
|
||||
],
|
||||
},
|
||||
optionsType: [
|
||||
// {
|
||||
// type: '1',
|
||||
// name: '视频'
|
||||
// },
|
||||
// {
|
||||
// type: '2',
|
||||
// name: '音频'
|
||||
// },
|
||||
// {
|
||||
// type: '6',
|
||||
// name: '直播'
|
||||
// },
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择类型
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
if (
|
||||
linkType === '1' ||
|
||||
linkType === '2' ||
|
||||
linkType === '6' ||
|
||||
linkType === '3'
|
||||
) {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
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
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId(res) {
|
||||
console.log(res)
|
||||
if (res.component) delete res.component
|
||||
this.datas.http = res
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -36,7 +36,6 @@
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
@ -47,35 +46,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="item.http.name"
|
||||
v-if="item.linktype !== '11'"
|
||||
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
|
||||
style="width: 100%"
|
||||
v-if="item.linktype === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="item.http.externalLink"
|
||||
@ -285,36 +258,15 @@ export default {
|
||||
'#c7158577',
|
||||
],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [],
|
||||
emptyText: '',
|
||||
uploadImgDataType: null,
|
||||
}
|
||||
@ -353,82 +305,6 @@ export default {
|
||||
deleteimg(index) {
|
||||
this.datas.imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
selectType(index) {
|
||||
// 每次切换类型之前 清空之前选中跳转
|
||||
this.datas.imageList[index].http = {}
|
||||
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
|
||||
changeId(res) {
|
||||
// 商品类型只匹配 1 2 3 6
|
||||
if (
|
||||
this.$utils.coursewareMetchArr.includes(
|
||||
this.datas.imageList[res[0]].linktype
|
||||
)
|
||||
) {
|
||||
console.log('-----------1')
|
||||
// 查询本地动态数据 然后再赋值
|
||||
let dynamic = this.$utils.getCoursewareData(
|
||||
this.datas.imageList[res[0]].linktype,
|
||||
res[1].id
|
||||
)
|
||||
this.datas.imageList[res[0]].http = dynamic
|
||||
} else {
|
||||
console.log('-----------2')
|
||||
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')
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
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
|
||||
)
|
||||
console.log(this.options, '----------this.options')
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
components: { uploadimg, vuedraggable },
|
||||
}
|
||||
|
||||
@ -268,7 +268,6 @@
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
@ -279,33 +278,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"
|
||||
@ -422,31 +396,10 @@ export default {
|
||||
},
|
||||
],
|
||||
imgActive: 0, //默认选中第一个图片
|
||||
options: [], //选择
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
@ -480,84 +433,10 @@ export default {
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
|
||||
selectType() {
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
|
||||
/* 替换 */
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList[this.imgActive].src = res
|
||||
},
|
||||
/* 获取下拉框内容 */
|
||||
/* getOption() {
|
||||
this.$httpApi.shopTemplate().then( res => {
|
||||
if(res.code !== 0) return this.$message.error(res.msg);
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
}, */
|
||||
changeId(res) {
|
||||
// 商品类型只匹配 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')
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
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
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -98,14 +98,6 @@
|
||||
placeholder="请输入标题，也可不填"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<!-- <el-select v-model="item.http.name" placeholder="请选择图片跳转链接" size="mini" @change="changeId" @visible-change="getOption">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="[index,item]">
|
||||
</el-option>
|
||||
</el-select>-->
|
||||
|
||||
<!-- 选择类型 -->
|
||||
<div class="select-type">
|
||||
@ -114,7 +106,6 @@
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
@ -124,34 +115,9 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="item.http.name"
|
||||
v-if="item.linktype !== '11'"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
:no-data-text="emptyText"
|
||||
@change="changeId"
|
||||
@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
|
||||
style="width: 100%"
|
||||
v-if="item.linktype === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="item.http.externalLink"
|
||||
@ -265,36 +231,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [], //选择
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
@ -326,78 +271,6 @@ export default {
|
||||
deleteimg(index) {
|
||||
this.datas.imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
selectType(index) {
|
||||
// 每次切换类型之前 清空之前选中跳转
|
||||
this.datas.imageList[index].http = {}
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
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
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeId(res) {
|
||||
// 商品类型只匹配 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: {
|
||||
|
||||
@ -29,34 +29,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-if="datas.type !== '11'"
|
||||
v-model="datas.http.name"
|
||||
placeholder="请选择跳转链接"
|
||||
size="mini"
|
||||
:no-data-text="emptyText"
|
||||
@change="changeId"
|
||||
@visible-change="
|
||||
(isVisible) => {
|
||||
return changeType(isVisible, datas.type)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 输入外部链接 -->
|
||||
<!-- 输入链接 -->
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
v-if="datas.type === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="datas.http.externalLink"
|
||||
@ -78,7 +53,7 @@ export default {
|
||||
optionsType: [
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
@ -90,52 +65,6 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 选择类型
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
if (
|
||||
linkType === '1' ||
|
||||
linkType === '2' ||
|
||||
linkType === '6' ||
|
||||
linkType === '3'
|
||||
) {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
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
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId(res) {
|
||||
console.log(res)
|
||||
if (res.component) delete res.component
|
||||
this.datas.http = res
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -75,7 +75,6 @@
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="iteml in optionsType"
|
||||
@ -86,33 +85,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"
|
||||
@ -147,7 +121,7 @@ import uploadimg from '../../uploadImg' //图片上传
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'investigatestyle',
|
||||
name: 'tabBarStyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
@ -174,29 +148,9 @@ export default {
|
||||
'#c7158577',
|
||||
],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
name: '内部链接',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
@ -204,7 +158,6 @@ export default {
|
||||
},
|
||||
], // 选择跳转类型
|
||||
emptyText: '',
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
@ -226,7 +179,7 @@ export default {
|
||||
/** 是否显示小圆点 */
|
||||
isDot: false,
|
||||
/** 跳转类型 */
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
/** 跳转参数 */
|
||||
http: {},
|
||||
})
|
||||
@ -237,75 +190,6 @@ export default {
|
||||
this.datas.iconList.splice(index, 1)
|
||||
},
|
||||
|
||||
selectType(index) {
|
||||
// 每次切换类型之前 清空之前选中跳转
|
||||
this.datas.iconList[index].http = {}
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
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
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeId(res) {
|
||||
console.log(this.datas.iconList[res[0]].linktype, '-------------type')
|
||||
// 商品类型只匹配 1 2 3 6
|
||||
if (
|
||||
this.$utils.coursewareMetchArr.includes(
|
||||
this.datas.iconList[res[0]].linktype
|
||||
)
|
||||
) {
|
||||
// 查询本地动态数据 然后再赋值
|
||||
let dynamic = this.$utils.getCoursewareData(
|
||||
this.datas.iconList[res[0]].linktype,
|
||||
res[1].id
|
||||
)
|
||||
this.datas.iconList[res[0]].http = dynamic
|
||||
} else {
|
||||
this.datas.iconList[res[0]].http = res[1]
|
||||
}
|
||||
this.datas.iconList.forEach((item) => {
|
||||
item.http.component = ''
|
||||
})
|
||||
console.log(this.datas.iconList, '-----------------------save data')
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
@ -141,27 +141,27 @@ componentsData.set('magiccube', {
|
||||
imageList: [
|
||||
{
|
||||
src: '',
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
http: {},
|
||||
},
|
||||
{
|
||||
src: '',
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
http: {},
|
||||
},
|
||||
{
|
||||
src: '',
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
http: {},
|
||||
},
|
||||
{
|
||||
src: '',
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
http: {},
|
||||
},
|
||||
{
|
||||
src: '',
|
||||
linktype: '1',
|
||||
linktype: '10',
|
||||
http: {},
|
||||
},
|
||||
], //图片列表
|
||||
|
||||
Loading…
Reference in New Issue
Block a user