mirror of
https://gitee.com/was666/as-editor.git
synced 2026-07-23 00:00:02 +08:00
feat: v1.0.0
This commit is contained in:
王奥斯
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="auxiliarysegmentation">
|
||||
<section
|
||||
class="contan"
|
||||
:style="{
|
||||
height: datas.blankHeight + 'px',
|
||||
padding: datas.paddType === 0 ? '0px' : '0px 15px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-show="datas.segmentationtype === 1"
|
||||
style="height: 1px; width: 100%; border-top-width: 1px"
|
||||
:style="{
|
||||
'border-top-style': datas.bordertp,
|
||||
'border-top-color': datas.auxliarColor,
|
||||
}"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'auxiliarysegmentation',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.auxiliarysegmentation {
|
||||
position: relative;
|
||||
.contan {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="captiontext" :style="{ background: datas.backColor }">
|
||||
<div
|
||||
style="padding: 6px 0"
|
||||
:style="{
|
||||
'border-bottom': datas.borderBott
|
||||
? '1px solid #F9F9F9'
|
||||
: '1px solid #fff',
|
||||
}"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<h2
|
||||
:style="{
|
||||
'font-size': datas.wordSize + 'px',
|
||||
'font-weight': datas.wordWeight,
|
||||
color: datas.wordColor,
|
||||
'text-align': datas.positions,
|
||||
height: datas.wordHeight + 'px',
|
||||
'line-height': datas.wordHeight + 'px',
|
||||
'padding-right': !(datas.positions !== 'center' && datas.more.show)
|
||||
? '0'
|
||||
: '60px',
|
||||
}"
|
||||
v-if="datas.name"
|
||||
>
|
||||
{{ datas.name }}
|
||||
</h2>
|
||||
|
||||
<!-- 描述文字 -->
|
||||
<p
|
||||
:style="{
|
||||
'font-size': datas.descriptionSize + 'px',
|
||||
'font-weight': datas.descriptionWeight,
|
||||
color: datas.descriptionColor,
|
||||
'text-align': datas.positions,
|
||||
}"
|
||||
style="margin-top: 8px"
|
||||
v-if="datas.description"
|
||||
>
|
||||
{{ datas.description }}
|
||||
</p>
|
||||
|
||||
<!-- 更多 -->
|
||||
<p
|
||||
class="more"
|
||||
v-show="datas.more.show"
|
||||
:class="datas.positions !== 'center' ? 'lef' : ''"
|
||||
:style="{
|
||||
color: datas.more.type === 0 ? '#38f' : '',
|
||||
top: (datas.wordHeight - 6) / 2 + 'px',
|
||||
}"
|
||||
>
|
||||
{{ datas.more.type === 2 ? '' : datas.more.text }}
|
||||
<span> {{ datas.more.type === 0 ? '' : '>' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'captiontext',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.captiontext {
|
||||
border: 2px solid #fff;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 14px;
|
||||
min-height: 20px;
|
||||
position: relative;
|
||||
|
||||
h2,
|
||||
p {
|
||||
word-wrap: break-word;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
/* 更多 */
|
||||
.more {
|
||||
font-size: 10px;
|
||||
color: #969799;
|
||||
text-align: center;
|
||||
&.lef {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div
|
||||
class="commoditysearch"
|
||||
:style="{
|
||||
background: datas.backgroundColor,
|
||||
border: `1px solid ${datas.backgroundColor}`,
|
||||
}"
|
||||
>
|
||||
<!-- 搜索框 -->
|
||||
<section
|
||||
class="searchs"
|
||||
:style="{
|
||||
height: datas.heights + 'px',
|
||||
'justify-content': datas.textPosition === 0 ? 'left' : 'center',
|
||||
background: datas.borderColor,
|
||||
'border-radius': datas.borderRadius === 0 ? '0px' : '10px',
|
||||
}"
|
||||
>
|
||||
<div class="search-left">
|
||||
<van-icon name="search" size="16" :style="{ color: datas.textColor }" />
|
||||
<span :style="{ color: datas.textColor }">搜索商品</span>
|
||||
</div>
|
||||
<!-- 扫一扫 -->
|
||||
<div
|
||||
class="sweep"
|
||||
v-show="datas.sweep"
|
||||
:style="{ color: datas.textColor }"
|
||||
>
|
||||
<span>扫一扫</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'commoditysearch',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.commoditysearch {
|
||||
position: relative;
|
||||
/* 搜索框 */
|
||||
.searchs {
|
||||
position: relative;
|
||||
width: 345px;
|
||||
min-height: 28px;
|
||||
margin: 5px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
.search-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sweep {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
i {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="communitypowder">
|
||||
<!-- 社区粉丝 -->
|
||||
<section class="powder" :style="{ background: datas.backColor }">
|
||||
<!-- 内容 -->
|
||||
<div class="container">
|
||||
<div class="lef">
|
||||
<img
|
||||
draggable="false"
|
||||
src="../../../assets/images/powder.png"
|
||||
alt=""
|
||||
v-if="!datas.mainImg"
|
||||
/>
|
||||
<img draggable="false" :src="datas.mainImg" alt="" v-else />
|
||||
<div class="text">
|
||||
<p class="first">{{ datas.title }}</p>
|
||||
<p class="last">{{ datas.describe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<van-button class="rig" type="danger" size="small" color="#f44">{{
|
||||
datas.buttonName
|
||||
}}</van-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'communitypowder',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.communitypowder {
|
||||
position: relative;
|
||||
/* 社区涨粉 */
|
||||
.powder {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.container {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* 左半部分 */
|
||||
.lef {
|
||||
display: flex;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
width: 146px;
|
||||
padding: 8px 0;
|
||||
.first {
|
||||
width: 100%;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.last {
|
||||
width: 100%;
|
||||
color: #a9a9a9;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="crowdoperation">
|
||||
{{ datas.text }}
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'crowdoperation',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.crowdoperation {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="custommodule">
|
||||
{{ datas.demo }}
|
||||
<img :src="datas.img" alt="">
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'custommodule',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.custommodule {
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="entertheshop">
|
||||
<!-- 内容 -->
|
||||
<van-cell
|
||||
icon="shop-collect-o"
|
||||
:title="datas.shopName"
|
||||
is-link
|
||||
:value="datas.copywriting"
|
||||
/>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'entertheshop',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.entertheshop {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div id="follow">
|
||||
<div class="follow-box">
|
||||
<div class="follow-pic">
|
||||
<img :src="datas.heade" alt="" />
|
||||
</div>
|
||||
<div class="follow-info">
|
||||
<span>{{ datas.followName }}</span>
|
||||
</div>
|
||||
<div class="follow-right">
|
||||
<van-button color="#07C160">关注公众号</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'follow',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#follow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
.follow-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #999;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.follow-pic {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.follow-info {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div
|
||||
class="graphicnavigation"
|
||||
:style="{ backgroundImage: 'url(' + datas.bgImg + ')' }"
|
||||
>
|
||||
<!-- 默认导航 -->
|
||||
<section
|
||||
class="defaultNavigation"
|
||||
v-if="!datas.imageList[0]"
|
||||
:style="{
|
||||
background: datas.backgroundColor,
|
||||
display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
|
||||
'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
|
||||
}"
|
||||
>
|
||||
<!-- 导航 -->
|
||||
<div
|
||||
class="navigationList"
|
||||
v-for="index in 5"
|
||||
:key="index"
|
||||
:style="{
|
||||
width:
|
||||
datas.imgStyle === 0 ? 'auto' : 375 / datas.showSize - 1 + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
src="../../../assets/images/imgs.png"
|
||||
alt="默认图片"
|
||||
v-show="datas.navigationType === 0"
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + '%' }"
|
||||
/>
|
||||
<!-- 文字 -->
|
||||
<p :style="{ color: datas.textColor }">导航</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 导航列表 -->
|
||||
<section
|
||||
class="defaultNavigation"
|
||||
v-else
|
||||
:style="{
|
||||
background: datas.backgroundColor,
|
||||
display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
|
||||
'flex-wrap': datas.imgStyle === 0 ? 'wrap' : 'nowrap',
|
||||
'justify-content':
|
||||
datas.imgStyle === 0 ? 'space-evenly' : 'space-around',
|
||||
'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
|
||||
}"
|
||||
>
|
||||
<!-- 导航 -->
|
||||
<div
|
||||
class="navigationList"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
:style="{
|
||||
width: datas.imgStyle === 0 ? '20%' : 375 / datas.showSize - 1 + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="item.src"
|
||||
alt="默认图片"
|
||||
v-show="datas.navigationType === 0"
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + '%' }"
|
||||
/>
|
||||
<!-- 文字 -->
|
||||
<p
|
||||
:style="{
|
||||
color: datas.textColor,
|
||||
'font-size': datas.textSize + 'px',
|
||||
height: datas.textHeight + 'px',
|
||||
'line-height': datas.textHeight + 'px',
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'graphicnavigation',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
created(){
|
||||
console.log(this.datas,'--------graphicnavigation')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.graphicnavigation {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
/* 默认导航 */
|
||||
.defaultNavigation {
|
||||
// overflow-x: scroll;
|
||||
justify-content: space-evenly;
|
||||
&::-webkit-scrollbar {
|
||||
height: 1px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #155bd4;
|
||||
}
|
||||
/deep/.el-collapse-item__header,
|
||||
/deep/.el-collapse-item__wrap {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
/* 导航 */
|
||||
.navigationList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
margin-top: 5px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
export { default as captiontext } from './captiontext'
|
||||
export { default as pictureads } from './pictureads'
|
||||
export { default as placementarea } from './placementarea'
|
||||
export { default as graphicnavigation } from './graphicnavigation'
|
||||
export { default as richtext } from './richtext'
|
||||
export { default as magiccube } from './magiccube'
|
||||
export { default as auxiliarysegmentation } from './auxiliarysegmentation'
|
||||
export { default as commoditysearch } from './commoditysearch'
|
||||
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'
|
||||
export { default as crowdoperation } from './crowdoperation'
|
||||
export { default as personalizedrecommendation } from './personalizedrecommendation'
|
||||
export { default as onlineservice } from './onlineservice'
|
||||
export { default as listswitching } from './listswitching'
|
||||
export { default as investigate } from './investigate'
|
||||
export { default as tabBar } from './tabBar'
|
||||
export { default as follow } from './follow'
|
||||
export { default as suspension } from './suspension'
|
||||
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="investigate" @click="guanbi">
|
||||
<!-- 内容 -->
|
||||
<div class="title">{{ datas.title }}</div>
|
||||
<div
|
||||
class="rescon"
|
||||
v-for="(item1, index1) in datas.jsonData"
|
||||
:key="index1"
|
||||
@mouseleave="leave()"
|
||||
>
|
||||
<!-- 输入框 -->
|
||||
<div v-if="item1.type == 0">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
:label="item1.name"
|
||||
:placeholder="item1.value"
|
||||
:value="item1.value2"
|
||||
readonly="readonly"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
<!-- 下拉框 -->
|
||||
<div v-if="item1.type == 1" class="xiala">
|
||||
<div class="titlename">{{ item1.name }}</div>
|
||||
<div class="select">
|
||||
<input
|
||||
type="text"
|
||||
readonly="readonly"
|
||||
:placeholder="'点击选择' + item1.name"
|
||||
class="readinput"
|
||||
@click="showpic(index1)"
|
||||
:value="item1.value2"
|
||||
/>
|
||||
<ul :class="{ ulshow: item1.showPicker, ultext: true }">
|
||||
<li
|
||||
v-for="(item, index) in item1.value1"
|
||||
:key="index"
|
||||
@click="xuanze(index1, item)"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单选框 -->
|
||||
<van-field name="radio" :label="item1.name" v-if="item1.type == 2">
|
||||
<template #input>
|
||||
<van-radio-group :value="item1.value2" direction="horizontal">
|
||||
<van-radio
|
||||
:name="item"
|
||||
v-for="(item, index) in item1.value1"
|
||||
:key="index"
|
||||
>{{ item }}</van-radio
|
||||
>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 复选框 -->
|
||||
|
||||
<van-field
|
||||
name="checkboxGroup"
|
||||
:label="item1.name"
|
||||
v-if="item1.type == 3"
|
||||
>
|
||||
<template #input>
|
||||
<van-checkbox-group direction="horizontal">
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
v-for="(item, index) in item1.value1"
|
||||
:key="index"
|
||||
:shape="item1.name"
|
||||
>{{ item }}</van-checkbox
|
||||
>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
<div class="button">
|
||||
<button>提交</button>
|
||||
</div>
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'investigate',
|
||||
data() {
|
||||
return {
|
||||
jsonData: [],
|
||||
}
|
||||
},
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//点击显示下拉框
|
||||
showpic(index1) {
|
||||
event.stopPropagation()
|
||||
this.datas.jsonData.forEach((el) => {
|
||||
el.showPicker = false
|
||||
})
|
||||
this.datas.jsonData[index1].showPicker = !this.datas.jsonData[index1]
|
||||
.showPicker
|
||||
},
|
||||
|
||||
// //下拉选择
|
||||
xuanze(index1) {
|
||||
this.datas.jsonData[index1].showPicker = false
|
||||
},
|
||||
|
||||
//关闭下拉选项
|
||||
guanbi() {
|
||||
this.datas.jsonData.forEach((el) => {
|
||||
el.showPicker = false
|
||||
})
|
||||
},
|
||||
leave() {
|
||||
this.datas.jsonData.forEach((el) => {
|
||||
el.showPicker = false
|
||||
})
|
||||
},
|
||||
//
|
||||
},
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.investigate {
|
||||
position: relative;
|
||||
padding: 0 6px;
|
||||
}
|
||||
form select {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.xiala {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
// overflow: hidden;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background-color: #fff;
|
||||
.titlename {
|
||||
width: 5.6em;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
select {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/deep/.van-cell {
|
||||
display: block;
|
||||
}
|
||||
/deep/.el-form-item__label {
|
||||
text-align: center;
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/deep/.el-form-item__content {
|
||||
margin-left: 100% !important;
|
||||
}
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/deep/.van-radio,
|
||||
.van-checkbox {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
/deep/.van-field__label {
|
||||
width: 100%;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding-bottom: 10px;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
/deep/.van-field__value {
|
||||
padding-left: 10px;
|
||||
font-size: 13px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.button {
|
||||
padding: 12px 24px;
|
||||
button {
|
||||
width: 100%;
|
||||
background: rgb(48, 116, 243);
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.readinput {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #323233;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
resize: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.ultext {
|
||||
display: none;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all linear 1s;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 16px 1px rgba(200, 200, 200, 0.5);
|
||||
li {
|
||||
padding: 4px 16px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
&:hover {
|
||||
background: #c3d4f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ulshow {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-top: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<div
|
||||
class="magiccube"
|
||||
:style="{
|
||||
'padding-left': datas.pageMargin + 'px',
|
||||
'padding-right': datas.pageMargin + 'px',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
v-show="!showimageList"
|
||||
src="../../../assets/images/mor.png"
|
||||
alt=""
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
||||
<!-- 一行二个 -->
|
||||
<section
|
||||
class="buju buju0"
|
||||
v-show="datas.rubiksCubeType === 0 && showimageList"
|
||||
>
|
||||
<div
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
class="rubiksCubeType0 rubiksCubeType"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin / 2 + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一行三个 -->
|
||||
<section
|
||||
class="buju buju0"
|
||||
v-show="datas.rubiksCubeType === 1 && showimageList"
|
||||
>
|
||||
<div
|
||||
v-for="index in 3"
|
||||
:key="index"
|
||||
class="rubiksCubeType1 rubiksCubeType"
|
||||
:style="{
|
||||
margin: datas.imgMargin / 10 + '%',
|
||||
width: 33.33 + '%',
|
||||
}"
|
||||
>
|
||||
<!-- width: 33 - datas.imgMargin / 10 + '%', -->
|
||||
<img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一行四个 -->
|
||||
<section
|
||||
class="buju buju0"
|
||||
v-show="datas.rubiksCubeType === 2 && showimageList"
|
||||
>
|
||||
<div
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
class="rubiksCubeType2 rubiksCubeType"
|
||||
:style="{
|
||||
margin: datas.imgMargin / 10 + '%',
|
||||
width: 25 - datas.imgMargin / 10 + '%',
|
||||
}"
|
||||
>
|
||||
<img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 二左二右 -->
|
||||
<section
|
||||
class="buju buju0"
|
||||
v-show="datas.rubiksCubeType === 3 && showimageList"
|
||||
>
|
||||
<div
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
class="rubiksCubeType3 rubiksCubeType"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一左二右 -->
|
||||
<section
|
||||
class="buju buju4"
|
||||
v-show="datas.rubiksCubeType === 4 && showimageList"
|
||||
>
|
||||
<div class="rubiksCubeType hw" style="padding-top: 100%">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
style="height:300px"
|
||||
:style="{ 'padding-right': datas.imgMargin + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: inline-flex; flex-direction: column; width: 100%">
|
||||
<div
|
||||
class=" hw imgone"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
style="padding-top: 150px;height:150px"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
style="height:150px"
|
||||
:style="{ padding: datas.imgMargin + 'px'}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一上二下 -->
|
||||
<section
|
||||
class="buju buju5"
|
||||
v-show="datas.rubiksCubeType === 5 && showimageList"
|
||||
>
|
||||
<div class="rubiksCubeType hw" style="display: block; padding-top: 50%">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
:style="{ 'padding-bottom': datas.imgMargin + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; width: 100%">
|
||||
<div
|
||||
class="rubiksCubeType hw imgtow"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
style="padding-top: 50%"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
:style="{ padding: datas.imgMargin + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一左三右 -->
|
||||
<section
|
||||
class="buju buju4"
|
||||
v-show="datas.rubiksCubeType === 6 && showimageList"
|
||||
>
|
||||
<!-- 第一张图片 -->
|
||||
<div class="rubiksCubeType hw" style="padding-top: 100%">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[0].src"
|
||||
alt=""
|
||||
style="height:300px"
|
||||
:style="{ 'padding-right': datas.imgMargin + 'px' }"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: inline-flex; flex-direction: column; width: 100%">
|
||||
<!-- 第二张图片 -->
|
||||
<div class="rubiksCubeType hw" style="padding-top: 150px">
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[1].src"
|
||||
alt=""
|
||||
:style="{
|
||||
'padding-bottom': datas.imgMargin + 'px',
|
||||
'padding-left': datas.imgMargin + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="rubiksCubeType">
|
||||
<div
|
||||
class="hw"
|
||||
style="
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 150px;
|
||||
"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
:src="datas.imageList[index + 1].src"
|
||||
alt=""
|
||||
style="height:150px"
|
||||
:style="{
|
||||
'padding-left': datas.imgMargin + 'px',
|
||||
'padding-top': datas.imgMargin + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'magiccube',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
computed: {
|
||||
showimageList() {
|
||||
if (
|
||||
this.datas.rubiksCubeType === 0 &&
|
||||
!this.datas.imageList[0].src &&
|
||||
!this.datas.imageList[1].src
|
||||
)
|
||||
return false
|
||||
|
||||
if (
|
||||
(this.datas.rubiksCubeType === 1 ||
|
||||
this.datas.rubiksCubeType === 4 ||
|
||||
this.datas.rubiksCubeType === 5) &&
|
||||
!this.datas.imageList[0].src &&
|
||||
!this.datas.imageList[1].src &&
|
||||
!this.datas.imageList[2].src
|
||||
)
|
||||
return false
|
||||
|
||||
if (
|
||||
(this.datas.rubiksCubeType === 2 ||
|
||||
this.datas.rubiksCubeType === 6 ||
|
||||
this.datas.rubiksCubeType === 3) &&
|
||||
!this.datas.imageList[0].src &&
|
||||
!this.datas.imageList[1].src &&
|
||||
!this.datas.imageList[2].src &&
|
||||
!this.datas.imageList[3].src
|
||||
)
|
||||
return false
|
||||
|
||||
return true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.magiccube {
|
||||
position: relative;
|
||||
/* 布局 */
|
||||
.imgone {
|
||||
&:last-of-type {
|
||||
img {
|
||||
padding-bottom: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
img {
|
||||
padding-top: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.imgtow {
|
||||
&:first-of-type {
|
||||
img {
|
||||
padding-bottom: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
img {
|
||||
padding-bottom: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hw {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.buju {
|
||||
&.buju0 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&.buju4 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.active {
|
||||
background: #e0edff;
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
z-index: 2;
|
||||
}
|
||||
.rubiksCubeType {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&.rubiksCubeType0 {
|
||||
width: 50%;
|
||||
// height: 200px;
|
||||
&:first-of-type {
|
||||
img {
|
||||
padding-left: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
img {
|
||||
padding-right: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType1 {
|
||||
width: 33.333%;
|
||||
&:nth-of-type(1) {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType2 {
|
||||
width: 25%;
|
||||
&:nth-of-type(1) {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
margin-top: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType3 {
|
||||
width: 50%;
|
||||
padding-top: 50%;
|
||||
position: relative;
|
||||
&:nth-of-type(1) {
|
||||
img {
|
||||
padding-top: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
img {
|
||||
padding-top: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
img {
|
||||
padding-bottom: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
img {
|
||||
padding-bottom: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType4 {
|
||||
width: 187px;
|
||||
height: 187px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="notice">
|
||||
<!-- 公告 -->
|
||||
<van-notice-bar
|
||||
:text="datas.noticeText"
|
||||
left-icon="volume-o"
|
||||
:background="datas.backColor"
|
||||
:color="datas.textColor"
|
||||
/>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'notice',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notice {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="onlineservice">
|
||||
{{ datas.text }}
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'onlineservice',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.onlineservice {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="personalizedrecommendation">
|
||||
{{ datas.text }}
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'personalizedrecommendation',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.personalizedrecommendation {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="pictureads">
|
||||
<!-- 无图片 -->
|
||||
<div class="upload" v-if="!imageList[0]">
|
||||
<i class="iconfont icon-lunbotu"></i>
|
||||
</div>
|
||||
|
||||
<!-- 一行一个 -->
|
||||
<div
|
||||
v-if="imageList[0] && swiperType === 0"
|
||||
class="type0"
|
||||
:style="{
|
||||
'padding-left': datas.pageMargin + 'px',
|
||||
'padding-right': datas.pageMargin + 'px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
class="imgLis"
|
||||
:style="{ 'margin-bottom': datas.imageMargin + 'px' }"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="item.src"
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/>
|
||||
<!-- 图片标题 -->
|
||||
<p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 轮播组件 -->
|
||||
<div
|
||||
class="swiper-container"
|
||||
v-if="
|
||||
(imageList[0] && swiperType === 1) ||
|
||||
swiperType === 2 ||
|
||||
swiperType === 3
|
||||
"
|
||||
>
|
||||
<div
|
||||
:class="
|
||||
swiperType === 3 && imageList[0]
|
||||
? 'type3 type1 swiper-wrapper type3H'
|
||||
: 'swiper-wrapper type1'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="swiper-slide"
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="item.src"
|
||||
alt=""
|
||||
draggable="false"
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/>
|
||||
<!-- 图片标题 -->
|
||||
<p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="swiper-pagination" style="color: #007aff"></div>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Swiper from 'swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
|
||||
export default {
|
||||
name: 'pictureads',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mySwiper: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/* 类型切换 */
|
||||
swiperType() {
|
||||
console.log(this.datas.swiperType, '----------------轮播类型')
|
||||
this.addSwiper()
|
||||
return this.datas.swiperType
|
||||
},
|
||||
/* 图片删除或者增加 */
|
||||
imageList() {
|
||||
this.addSwiper()
|
||||
console.log(this.datas.imageList.length, '-------轮播数量')
|
||||
return this.datas.imageList
|
||||
},
|
||||
/* 分页器类型切换 */
|
||||
pagingType() {
|
||||
this.addSwiper()
|
||||
return this.datas.pagingType
|
||||
},
|
||||
/* 一行个数 */
|
||||
rowindividual() {
|
||||
this.addSwiper()
|
||||
if (this.datas.swiperType === 1) {
|
||||
return 1
|
||||
} else {
|
||||
return this.datas.rowindividual
|
||||
}
|
||||
},
|
||||
/* 图片间距 */
|
||||
imageMargin() {
|
||||
this.addSwiper()
|
||||
if (this.datas.swiperType === 1) {
|
||||
return 0
|
||||
} else {
|
||||
return this.datas.imageMargin
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
pagingType() {},
|
||||
rowindividual() {},
|
||||
imageMargin() {},
|
||||
},
|
||||
methods: {
|
||||
/* 创建轮播对象 */
|
||||
addSwiper() {
|
||||
this.$nextTick(() => {
|
||||
if (this.datas.swiperType !== 0 && this.datas.imageList[0]) {
|
||||
if (this.mySwiper instanceof Array) {
|
||||
this.mySwiper.forEach((element) => {
|
||||
element.destroy()
|
||||
})
|
||||
} else if (this.mySwiper instanceof Object) {
|
||||
// 每次重新创建swiper前都要销毁之前存在的轮播 不然轮播会重复
|
||||
this.mySwiper.destroy()
|
||||
}
|
||||
|
||||
let params = {
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: this.pagingType,
|
||||
},
|
||||
}
|
||||
|
||||
if (this.datas.swiperType === 1 || this.datas.swiperType === 2) {
|
||||
params.slidesPerView = this.rowindividual
|
||||
params.spaceBetween = this.imageMargin
|
||||
} else if (this.datas.swiperType === 3) {
|
||||
params.slidesPerView = 1.3
|
||||
params.centeredSlides = true
|
||||
}
|
||||
|
||||
this.mySwiper = new Swiper('.swiper-container', params)
|
||||
} else {
|
||||
if (this.mySwiper instanceof Array) {
|
||||
this.mySwiper.forEach((element) => {
|
||||
element.destroy()
|
||||
})
|
||||
}
|
||||
// 每次重新创建swiper前都要销毁之前存在的轮播 不然轮播会重复
|
||||
if (this.mySwiper instanceof Object) {
|
||||
this.mySwiper.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pictureads {
|
||||
position: relative;
|
||||
|
||||
/* 无图片 */
|
||||
.upload {
|
||||
background: #979797;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
i {
|
||||
font-size: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 类型0 */
|
||||
.type0 {
|
||||
box-sizing: border-box;
|
||||
/* 图片列表 */
|
||||
.imgLis {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* 图片 */
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 类型1 */
|
||||
.type1 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.type3 {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
align-items: center;
|
||||
.swiper-slide {
|
||||
height: 210px !important;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
box-shadow: rgba(173, 173, 173, 0.8) 0px 7px 24px 0px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
transition: 300ms;
|
||||
transform: scale(0.8);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active,
|
||||
.swiper-slide-duplicate-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
.swiper-pagination {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.title {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
.type3H {
|
||||
height: 250px;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-progressbar {
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="placementarea">
|
||||
<span>组件放置区域</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'placementarea',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.placementarea {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #94b4eb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url('../../../assets/images/obliqueLine.png');
|
||||
background-size: 50%, 100%;
|
||||
transition: all 0.5s;
|
||||
span {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
background: #5487df;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="richtext" :style="{ background: datas.backColor }">
|
||||
<img
|
||||
draggable="false"
|
||||
src="../../../assets/images/fwb.png"
|
||||
alt=""
|
||||
v-if="!datas.myValue.length"
|
||||
/>
|
||||
<section v-else v-html="datas.myValue" />
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'richtext',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.richtext {
|
||||
position: relative;
|
||||
}
|
||||
/deep/img {
|
||||
max-width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
.richtext {
|
||||
position: relative;
|
||||
/deep/pre {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
/deep/p {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div class="storeinformation">
|
||||
<!-- 样式一 -->
|
||||
<section
|
||||
class="type0"
|
||||
v-show="datas.rubiksCubeType === 0 || datas.rubiksCubeType === 2"
|
||||
>
|
||||
<div
|
||||
v-if="datas.rubiksCubeType === 0"
|
||||
class="menban"
|
||||
style="background-color: rgba(0, 0, 0, 0.3)"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="menban"
|
||||
style="background-image: linear-gradient(to top, #000, transparent)"
|
||||
/>
|
||||
|
||||
<!-- 蒙版 -->
|
||||
<div class="men">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.bakcgroundImg"
|
||||
:src="datas.bakcgroundImg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/backimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<div class="storIinformation">
|
||||
<div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.headPortrait"
|
||||
:src="datas.headPortrait"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/headerimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin-top: 5px; font-weight: 700; font-size: 18px">
|
||||
{{ datas.name }}
|
||||
</p>
|
||||
<p style="font-size: 12px; margin-top: 10px">{{ datas.Discount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 样式二 -->
|
||||
<section class="type1" v-show="datas.rubiksCubeType === 1">
|
||||
<div
|
||||
class="menban"
|
||||
style="background-image: linear-gradient(to top, #000, transparent)"
|
||||
/>
|
||||
<!-- 蒙版 -->
|
||||
<div class="men">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.bakcgroundImg"
|
||||
:src="datas.bakcgroundImg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/backimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<div class="storIinformation">
|
||||
<div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.headPortrait"
|
||||
:src="datas.headPortrait"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/headerimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin-top: 5px; font-weight: 700; font-size: 18px">
|
||||
{{ datas.name }}
|
||||
</p>
|
||||
<p style="font-size: 12px; margin-top: 10px">{{ datas.Discount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 样式四 -->
|
||||
<section class="type3" v-show="datas.rubiksCubeType === 3">
|
||||
<div
|
||||
class="menban"
|
||||
style="background-image: linear-gradient(to top, #000, transparent)"
|
||||
/>
|
||||
<!-- 蒙版 -->
|
||||
<div class="men">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.bakcgroundImg"
|
||||
:src="datas.bakcgroundImg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/backimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<div class="storIinformation">
|
||||
<div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.headPortrait"
|
||||
:src="datas.headPortrait"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/headerimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p style="margin-top: 5px; font-weight: 700; font-size: 18px">
|
||||
{{ datas.name }}
|
||||
</p>
|
||||
<p style="font-size: 12px; margin-top: 10px">{{ datas.Discount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 样式五 -->
|
||||
<section class="type4" v-show="datas.rubiksCubeType === 4">
|
||||
<div
|
||||
class="menban"
|
||||
style="background-image: linear-gradient(to top, #000, transparent)"
|
||||
/>
|
||||
<!-- 蒙版 -->
|
||||
<div class="men">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.bakcgroundImg"
|
||||
:src="datas.bakcgroundImg"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/backimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<div class="storIinformation">
|
||||
<div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="datas.headPortrait"
|
||||
:src="datas.headPortrait"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
src="../../../assets/images/headerimg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style="
|
||||
margin-top: 5px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #fff;
|
||||
"
|
||||
>
|
||||
{{ datas.name }}
|
||||
</p>
|
||||
<p style="font-size: 12px; margin-top: 10px">{{ datas.Discount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'storeinformation',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.storeinformation {
|
||||
position: relative;
|
||||
|
||||
/* 类型一 */
|
||||
.type0 {
|
||||
width: 100%;
|
||||
background-repeat: round;
|
||||
position: relative;
|
||||
height: 185px;
|
||||
/* 蒙版 */
|
||||
.men {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 店铺信息 */
|
||||
.storIinformation {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 110px;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menban {
|
||||
position: absolute;
|
||||
left: 0p;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 类型二 */
|
||||
.type1 {
|
||||
width: 100%;
|
||||
background-repeat: round;
|
||||
position: relative;
|
||||
height: 238px;
|
||||
/* 蒙版 */
|
||||
.men {
|
||||
width: 100%;
|
||||
height: 185px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 店铺信息 */
|
||||
.storIinformation {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 类型四 */
|
||||
.type3 {
|
||||
width: 100%;
|
||||
background-repeat: round;
|
||||
position: relative;
|
||||
height: 238px;
|
||||
/* 蒙版 */
|
||||
.men {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 店铺信息 */
|
||||
.storIinformation {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 类型五 */
|
||||
.type4 {
|
||||
width: 100%;
|
||||
background-repeat: round;
|
||||
position: relative;
|
||||
height: 250px;
|
||||
/* 蒙版 */
|
||||
.men {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 店铺信息 */
|
||||
.storIinformation {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,521 @@
|
||||
<template>
|
||||
<div class="storenotecard">
|
||||
<!-- 更多 -->
|
||||
<div class="more1">
|
||||
<h4>{{ datas.name }}</h4>
|
||||
<p v-show="datas.viewMore1">查看更多 <van-icon name="arrow" /></p>
|
||||
</div>
|
||||
|
||||
<!-- 没有视频展示默认 -->
|
||||
<section
|
||||
v-show="!datas.imageList[0]"
|
||||
:class="[datas.commodityType === 2 ? 'defaultcommodityList2' : '']"
|
||||
class="defaultcommodity"
|
||||
>
|
||||
<div
|
||||
v-for="index in 3"
|
||||
:key="index"
|
||||
class="defaultcommodityList"
|
||||
:class="[
|
||||
datas.commodityType === 0 ? 'defaultcommodityList0' : '',
|
||||
datas.commodityType === 1 ? 'defaultcommodityList1' : '',
|
||||
datas.commodityType === 2 ? 'defaultcommodityList2' : '',
|
||||
datas.commodityType === 3 ? 'defaultcommodityList3' : '',
|
||||
datas.commodityType === 4 ? 'defaultcommodityList4' : '',
|
||||
datas.commodityType === 5 ? 'defaultcommodityList5' : '',
|
||||
]"
|
||||
:style="{
|
||||
'border-radius': datas.borderRadius + 'px',
|
||||
border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
|
||||
'box-shadow':
|
||||
datas.moditystyle === 1 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
|
||||
width:
|
||||
datas.commodityType === 1
|
||||
? 50 - datas.commodityMargin / 6 + '%'
|
||||
: datas.commodityType === 2
|
||||
? 33 - datas.commodityMargin / 5 + '%'
|
||||
: datas.commodityType === 4
|
||||
? 50 - datas.commodityMargin / 5 + '%'
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
<!-- 视频图片 -->
|
||||
<div
|
||||
class="imgss"
|
||||
style="position: relative; width: 100%"
|
||||
:class="[datas.positions === 'top' ? 'containoptions' : '']"
|
||||
>
|
||||
<img draggable="false" src="../../../assets/images/imgs.png" alt="" />
|
||||
<!-- 标签 -->
|
||||
<p class="marks" v-if="datas.noteLabels"><span>#</span>笔记标签</p>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div
|
||||
class="text"
|
||||
:class="[datas.positions === 'top' ? 'positionsTop' : '']"
|
||||
:style="{ background: datas.moditystyle !== 3 ? '#fff' : 'none' }"
|
||||
>
|
||||
<!-- 视频名称 -->
|
||||
<h5>这里显示商品名称，最多显示2行</h5>
|
||||
<!-- 点赞和阅读量 -->
|
||||
<div class="dianz">
|
||||
<span class="fir" v-if="datas.readingNumber">999 阅读</span>
|
||||
<span v-else></span>
|
||||
<span v-show="datas.praisePoints"
|
||||
><van-icon name="good-job-o" /> 999</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-show="datas.imageList[0]"
|
||||
:class="[datas.commodityType === 2 ? 'defaultcommodityList2' : '']"
|
||||
class="defaultcommodity"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
class="defaultcommodityList"
|
||||
:class="[
|
||||
datas.commodityType === 0 ? 'defaultcommodityList0' : '',
|
||||
datas.commodityType === 1 ? 'defaultcommodityList1' : '',
|
||||
datas.commodityType === 2 ? 'defaultcommodityList2' : '',
|
||||
datas.commodityType === 3 ? 'defaultcommodityList3' : '',
|
||||
datas.commodityType === 4 ? 'defaultcommodityList4' : '',
|
||||
datas.commodityType === 5 ? 'defaultcommodityList5' : '',
|
||||
]"
|
||||
:style="{
|
||||
'border-radius': datas.borderRadius + 'px',
|
||||
border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
|
||||
'box-shadow':
|
||||
datas.moditystyle === 1 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
|
||||
width:
|
||||
datas.commodityType === 1
|
||||
? 50 - datas.commodityMargin / 6 + '%'
|
||||
: datas.commodityType === 2
|
||||
? 33 - datas.commodityMargin / 5 + '%'
|
||||
: datas.commodityType === 4
|
||||
? 50 - datas.commodityMargin / 5 + '%'
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
<!-- 视频图片 -->
|
||||
<div
|
||||
class="imgss"
|
||||
style="position: relative; width: 100%"
|
||||
:class="[datas.positions === 'top' ? 'containoptions' : '']"
|
||||
>
|
||||
<img draggable="false" :src="item.src" alt="" />
|
||||
<!-- 标签 -->
|
||||
<p class="marks" v-if="datas.noteLabels"><span>#</span>笔记标签</p>
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div
|
||||
class="text"
|
||||
:class="[datas.positions === 'top' ? 'positionsTop' : '']"
|
||||
:style="{ background: datas.moditystyle !== 3 ? '#fff' : 'none' }"
|
||||
>
|
||||
<!-- 视频名称 -->
|
||||
<h5>{{ item.text }}</h5>
|
||||
<!-- 点赞和阅读量 -->
|
||||
<div class="dianz">
|
||||
<span class="fir" v-if="datas.readingNumber">999 阅读</span>
|
||||
<span v-else></span>
|
||||
<span v-show="datas.praisePoints"
|
||||
><van-icon name="good-job-o" /> 999</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="more2" v-show="datas.viewMore2">
|
||||
查看更多 <van-icon name="arrow" />
|
||||
</p>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'storenotecard',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.storenotecard {
|
||||
position: relative;
|
||||
|
||||
/* 更多1 */
|
||||
.more1 {
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
color: #323233;
|
||||
font-weight: 400;
|
||||
width: 270px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
p {
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 更多2 */
|
||||
.more2 {
|
||||
text-align: center;
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 默认商品 */
|
||||
.defaultcommodity {
|
||||
box-sizing: border-box;
|
||||
margin: 1px;
|
||||
padding: 0 15px;
|
||||
/* 横向滑动 */
|
||||
&.defaultcommodityList2 {
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
/* 滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
height: 1px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #155bd4;
|
||||
}
|
||||
/deep/.el-collapse-item__header,
|
||||
/deep/.el-collapse-item__wrap {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
/* 卡片列表 */
|
||||
.defaultcommodityList {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* 大图模式 */
|
||||
&.defaultcommodityList0 {
|
||||
width: 100%;
|
||||
/* 标签 */
|
||||
.containoptions {
|
||||
.marks {
|
||||
bottom: 33px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 147px;
|
||||
}
|
||||
/* 文字在图片中 */
|
||||
.positionsTop {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: none !important;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(0, 0, 0, 0.5)
|
||||
) !important;
|
||||
/* 标题 */
|
||||
h5 {
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
/* 点赞和阅读量 */
|
||||
.dianz {
|
||||
padding-left: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 一行两个 */
|
||||
&.defaultcommodityList1 {
|
||||
width: 48%;
|
||||
&:nth-of-type(even) {
|
||||
margin-left: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横向滑动 */
|
||||
&.defaultcommodityList2 {
|
||||
width: 150px;
|
||||
flex: none;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
/* 一大两小 */
|
||||
&.defaultcommodityList3 {
|
||||
display: flex;
|
||||
&:nth-of-type(3n-2) {
|
||||
margin-bottom: 0 !important;
|
||||
.marks {
|
||||
bottom: 33px;
|
||||
z-index: 3;
|
||||
}
|
||||
img {
|
||||
height: 147px;
|
||||
}
|
||||
/* 文字在图片中 */
|
||||
.text {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: none !important;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(0, 0, 0, 0.5)
|
||||
) !important;
|
||||
/* 标题 */
|
||||
h5 {
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
/* 点赞和阅读量 */
|
||||
.dianz {
|
||||
padding-left: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
flex-direction: row-reverse;
|
||||
margin-bottom: 15px;
|
||||
.imgss {
|
||||
width: 65px !important;
|
||||
height: 67px;
|
||||
z-index: 99;
|
||||
position: absolute !important;
|
||||
top: 10%;
|
||||
right: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.marks {
|
||||
left: 0;
|
||||
background: #fff;
|
||||
opacity: 0.85;
|
||||
bottom: 0;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 10px 80px 10px 10px;
|
||||
min-height: 87px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.dianz {
|
||||
justify-content: start;
|
||||
line-height: 20px;
|
||||
span {
|
||||
&.fir {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3n-1) {
|
||||
flex-direction: row-reverse;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
.marks {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.imgss {
|
||||
width: 65px !important;
|
||||
height: 67px;
|
||||
z-index: 99;
|
||||
position: absolute !important;
|
||||
top: 10%;
|
||||
right: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 10px 80px 10px 10px;
|
||||
min-height: 87px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.dianz {
|
||||
justify-content: start;
|
||||
line-height: 20px;
|
||||
span {
|
||||
&.fir {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* 详细列表 */
|
||||
&.defaultcommodityList4 {
|
||||
width: 100%;
|
||||
flex-direction: row-reverse;
|
||||
margin-bottom: 15px;
|
||||
.imgss {
|
||||
width: 120px !important;
|
||||
height: 122px;
|
||||
z-index: 99;
|
||||
position: absolute !important;
|
||||
top: 8%;
|
||||
right: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.marks {
|
||||
left: 0;
|
||||
background: #fff;
|
||||
opacity: 0.85;
|
||||
bottom: 0;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 10px 160px 10px 10px;
|
||||
min-height: 145px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.dianz {
|
||||
justify-content: start;
|
||||
line-height: 20px;
|
||||
span {
|
||||
&.fir {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.marks {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 13px;
|
||||
font-size: 10px;
|
||||
padding: 2px 5px;
|
||||
background: #fff;
|
||||
opacity: 0.85;
|
||||
border-radius: 3px;
|
||||
span {
|
||||
color: #d40;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 文字 */
|
||||
.text {
|
||||
padding: 10px 10px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* 商品名称 */
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin: 0 0 5px;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
/* 点赞和阅读量 */
|
||||
.dianz {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 35px;
|
||||
span {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.van-icon-good-job-o {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div id="suspension">
|
||||
<div class="suspension-wrap">
|
||||
<img
|
||||
class="suspension-logo"
|
||||
src="https://imgs.starfirelink.com/vue-fire-start-h5/shop-peison/icon_back_36.png"
|
||||
/>
|
||||
</div>
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'suspension',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#suspension {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10%;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
.suspension-wrap {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
z-index: 1001;
|
||||
.suspension-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="tabBar">
|
||||
<div v-if="datas.iconList.length !== 0" class="tabbar">
|
||||
<van-tabbar
|
||||
v-model="active"
|
||||
:fixed="false"
|
||||
:placeholder="true"
|
||||
:border="datas.isShowBorder"
|
||||
:active-color="datas.activeColor"
|
||||
:inactive-color="datas.inactiveColor"
|
||||
>
|
||||
<van-tabbar-item
|
||||
v-for="(item, index) in datas.iconList"
|
||||
:key="index"
|
||||
:name="item.iconName"
|
||||
:icon="item.iconPic"
|
||||
:dot="item.isDot"
|
||||
>{{ item.iconText }}</van-tabbar-item
|
||||
>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<van-tabbar
|
||||
v-model="datas.Highlight"
|
||||
:fixed="false"
|
||||
:placeholder="true"
|
||||
:border="datas.isShowBorder"
|
||||
:active-color="datas.activeColor"
|
||||
:inactive-color="datas.inactiveColor"
|
||||
>
|
||||
<van-tabbar-item icon="search" dot name="home">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabBar',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// active: 'home',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
console.log(this.datas, '--------------tabbar data created')
|
||||
document.querySelector('.phone-container').style.cssText =
|
||||
'padding-bottom: 50px'
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
beforeDestroy() {
|
||||
document.querySelector('.phone-container').style.cssText =
|
||||
'padding-bottom: 0px'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tabBar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
/deep/ .van-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="videoss">
|
||||
<!-- 默认视频 -->
|
||||
<section class="default" v-if="!datas.videoData">
|
||||
<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>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<slot name="deles" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'videoss',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
.videoss {
|
||||
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>
|
||||
@@ -0,0 +1,73 @@
|
||||
<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>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="createTemplate">
|
||||
<!-- 上传图片 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="选择页面模板"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="860px"
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<el-tabs v-model="activeName" width="100%" @tab-click="handleClick">
|
||||
<el-tab-pane label="系统页模板" name="0">
|
||||
<!-- 模板列表 -->
|
||||
<section class="templateList">
|
||||
<div class="entyTemplate">
|
||||
<i
|
||||
class="el-icon-circle-plus-outline"
|
||||
style="
|
||||
font-size: 45px;
|
||||
color: #fff;
|
||||
background: rgb(217, 220, 223, 0.5);
|
||||
border-radius: 50%;
|
||||
"
|
||||
/>
|
||||
<p style="margin-top: 10px; font-size: 14px; color: #7d7e80">
|
||||
使用空白模板
|
||||
</p>
|
||||
<!-- 进入事件 -->
|
||||
<div class="hove">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="$router.push({ path: 'home' })"
|
||||
>使用模板</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div v-for="(item, index) in dtList" :key="index">
|
||||
<section class="templateList">
|
||||
<!-- <i class="el-icon-circle-plus-outline" style="font-size: 45px;color: #fff;background: rgb(217, 220, 223, .5);border-radius: 50%;" />-->
|
||||
<van-image
|
||||
width="100%"
|
||||
height="320px"
|
||||
fit="scale-down"
|
||||
:src="item.imgUrl"
|
||||
/>
|
||||
<p style="margin-top: 10px; font-size: 14px; color: #7d7e80">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
<!-- 进入事件 -->
|
||||
<div class="hove">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="
|
||||
$router.push({ path: 'home?id=' + item.id + '&type=tpl' })
|
||||
"
|
||||
>使用模板</el-button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- <el-tab-pane label="行业模板" name="1">行业模板</el-tab-pane>
|
||||
<el-tab-pane label="活动/节日模板" name="2">活动/节日模板</el-tab-pane>
|
||||
<el-tab-pane label="主页模板" name="3">主页模板</el-tab-pane>
|
||||
<el-tab-pane label="我的模板" name="4">我的模板</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'createTemplate',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
activeName: '0', //tab选项
|
||||
dtList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadDefaultTemplate()
|
||||
},
|
||||
methods: {
|
||||
/* 显示弹框 */
|
||||
showExtension() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
},
|
||||
/* tab切换 */
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
loadDefaultTemplate() {
|
||||
this.$httpApi.defaultTemplate().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
console.log(res)
|
||||
this.dtList = res.data.defaultTemplateList
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.createTemplate {
|
||||
/* tab */
|
||||
/deep/.el-tabs__nav-wrap .is-top {
|
||||
padding: 0 40px !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/deep/.el-dialog__title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
min-height: 280px;
|
||||
/deep/.el-tabs__content {
|
||||
min-height: 380px;
|
||||
}
|
||||
/deep/.el-tabs__nav-scroll {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/deep/.el-tab-pane {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
/* 模板列表 */
|
||||
.templateList {
|
||||
width: 184px;
|
||||
height: 380px;
|
||||
position: relative;
|
||||
transition: all 1s;
|
||||
transform: translateY(0);
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: 1px solid #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.entyTemplate {
|
||||
width: 185px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hove {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
margin-top: -10px;
|
||||
/* 进入事件 */
|
||||
.hove {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="extension">
|
||||
<!-- 上传图片 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="推广"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="646px"
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<section class="container">
|
||||
<img :src="poster" style="width: 280px; height: 450px" alt="" />
|
||||
|
||||
<!-- 二维码 -->
|
||||
<img
|
||||
ref="qrcodeImg"
|
||||
:src="qrcodeData"
|
||||
id="qrcode"
|
||||
style="width: 235px; height: 235px; position: absolute; z-index: -999"
|
||||
/>
|
||||
|
||||
<!-- 操作 -->
|
||||
<div class="text">
|
||||
<div style="margin: 0 0 20px 0">
|
||||
<span style="font-size: 14px; margin-right: 10px">选择海报：</span>
|
||||
<el-select v-model="selectType" size="mini" @change="templatetype">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<p class="top">复制推广链接</p>
|
||||
|
||||
<!-- 复制内容 -->
|
||||
<div class="cilp">
|
||||
<span id="foo">{{ URL }}</span>
|
||||
<el-button
|
||||
size="small"
|
||||
data-clipboard-target="#foo"
|
||||
id="btn"
|
||||
data-clipboard-action="copy"
|
||||
type="primary"
|
||||
>复制</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 下载图片 -->
|
||||
<p class="operation">
|
||||
<span @click="downloadPoster">下载完整海报</span>
|
||||
<span @click="downloadqrcode">仅下载二维码</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Clipboard from 'clipboard'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
export default {
|
||||
name: 'extension',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
activeName: '0', //tab选项
|
||||
URL: '', //页面链接
|
||||
qrcodeData: '', //二维码base64
|
||||
poster: '', //海报链接
|
||||
selectType: '', //下拉框
|
||||
options: [], // 海报类型选择
|
||||
templateId: '', //当前页面id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.clipboard()
|
||||
},
|
||||
methods: {
|
||||
/* 显示弹框 */
|
||||
showExtension(res, isHome) {
|
||||
// 默认模板
|
||||
this.poster = res.posterUrl
|
||||
this.templateId = res.id
|
||||
console.log(res, isHome,'-----------------showExtension')
|
||||
if (isHome) {
|
||||
console.log(res, isHome,'-----------------showExtension')
|
||||
this.URL = `${this.$baseURL}#/shop?orgId=${res.userAdminId}`
|
||||
} else {
|
||||
this.URL = `${this.$baseURL}#/shop?id=${res.id}&orgId=${res.userAdminId}`
|
||||
}
|
||||
|
||||
QRCode.toDataURL(this.URL)
|
||||
.then((url) => {
|
||||
this.qrcodeData = url
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
this.dialogVisible = true
|
||||
// 获取模板
|
||||
this.selectDataApi()
|
||||
},
|
||||
|
||||
// 获取海报模板
|
||||
selectDataApi() {
|
||||
this.$httpApi.selectData().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.posterList
|
||||
this.selectType = res.data.posterList[0].title
|
||||
// 没有默认模板请求
|
||||
if (!this.poster) {
|
||||
this.getPoster(res.data.posterList[0].id)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取海报
|
||||
getPoster(id) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '海报加载中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi
|
||||
.poster({
|
||||
posterId: id,
|
||||
shopTemplateId: this.templateId,
|
||||
path: this.URL,
|
||||
})
|
||||
.then((res) => {
|
||||
loading.close()
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.$message({
|
||||
message: '海报加载成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.poster = res.data.url
|
||||
})
|
||||
},
|
||||
|
||||
// 选择模板类型
|
||||
templatetype(res) {
|
||||
this.getPoster(res)
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
/* 复制 */
|
||||
clipboard() {
|
||||
const clipboard = new Clipboard('#btn')
|
||||
clipboard.on('success', (e) => {
|
||||
this.$message({
|
||||
message: '复制成功',
|
||||
type: 'success',
|
||||
})
|
||||
e.clearSelection()
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
this.$message.error('复制失败')
|
||||
})
|
||||
},
|
||||
|
||||
/* 下载二维码 */
|
||||
downloadqrcode() {
|
||||
var link = document.createElement('a')
|
||||
link.setAttribute('href', this.qrcodeData)
|
||||
link.setAttribute('download', '星火.png')
|
||||
link.click()
|
||||
},
|
||||
|
||||
// 下载海报
|
||||
downloadPoster() {
|
||||
this.getUrlBase64(this.poster).then((base64) => {
|
||||
let link = document.createElement('a')
|
||||
link.href = base64
|
||||
link.download = '星火海报.png'
|
||||
link.click()
|
||||
})
|
||||
},
|
||||
getUrlBase64(url) {
|
||||
return new Promise((resolve) => {
|
||||
let canvas = document.createElement('canvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
let img = new Image()
|
||||
img.crossOrigin = 'Anonymous' //允许跨域
|
||||
img.src = url
|
||||
img.onload = function () {
|
||||
canvas.height = 720
|
||||
canvas.width = 400
|
||||
ctx.drawImage(img, 0, 0, 400, 720)
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
canvas = null
|
||||
resolve(dataURL)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.extension {
|
||||
position: relative;
|
||||
|
||||
/deep/.el-dialog__title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
/* 内容 */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
/* 操作 */
|
||||
.text {
|
||||
margin-left: 12px;
|
||||
.top {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
/* 复制 */
|
||||
.cilp {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
#foo {
|
||||
width: 245px;
|
||||
cursor: no-drop;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: #f8f8f8;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/* 下载图片 */
|
||||
.operation {
|
||||
margin-top: 20px;
|
||||
span {
|
||||
color: #38f;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
&:first-of-type {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="phoneBottom">
|
||||
<p class="ft-links" v-show="datas.isShowBootom">
|
||||
<span>店铺主页</span>
|
||||
<span>个人中心</span>
|
||||
<!-- <span>关注我们</span> -->
|
||||
<!-- <span>店铺信息</span> -->
|
||||
</p>
|
||||
<!-- <img
|
||||
draggable="false"
|
||||
v-show="datas.botLogo"
|
||||
:src="datas.botLogo"
|
||||
style="width: 110px; margin-left: 35%; margin-top: 10px"
|
||||
/> -->
|
||||
<p class="yinjia" :style="{ 'margin-top': datas ? '0px' : '10px' }">
|
||||
<img
|
||||
draggable="false"
|
||||
class="logo"
|
||||
src="@/assets/images/Robot.png"
|
||||
/><span>星火相连提供技术支持</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'phoneBottom',
|
||||
props:['datas'],
|
||||
watch: {
|
||||
datas() {
|
||||
// console.log(this.datas,'------------this.datas')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.phoneBottom {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
min-height: 145px;
|
||||
cursor: pointer;
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
.ft-links {
|
||||
text-align: center;
|
||||
padding: 0px 15px 10px;
|
||||
span {
|
||||
padding: 0 6px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yinjia {
|
||||
color: #bfbfc3;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.logo {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="auxiliarysegmentationstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<!-- 空白高度 -->
|
||||
<el-form-item label="空白高度" class="lef">
|
||||
<el-slider
|
||||
v-model="datas.blankHeight"
|
||||
:max="100"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 分割类型 -->
|
||||
<el-form-item class="lef" label="分割类型">
|
||||
<div class="weiz">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '辅助空白' : '辅助线'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0
|
||||
? 'icon-fuzhukongbai_weixuanzhong'
|
||||
: 'icon-fuzhuxiantiao',
|
||||
datas.segmentationtype === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.segmentationtype = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 选择样式 -->
|
||||
<el-form-item
|
||||
v-show="datas.segmentationtype === 1"
|
||||
class="lef"
|
||||
label="选择样式"
|
||||
>
|
||||
<div class="weiz">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="item.text"
|
||||
placement="bottom"
|
||||
v-for="(item, index) in borderType"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[item.icon, datas.bordertp === item.type ? 'active' : '']"
|
||||
@click="datas.bordertp = item.type"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="datas.segmentationtype === 1" style="height: 20px" />
|
||||
|
||||
<!-- 左右边距 -->
|
||||
<el-form-item
|
||||
v-show="datas.segmentationtype === 1"
|
||||
class="lef"
|
||||
label="左右边距"
|
||||
>
|
||||
<div class="weiz">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '无边距' : '左右留边'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0
|
||||
? 'icon-icon_wubianju'
|
||||
: 'icon-icon_zuoyoubianju',
|
||||
datas.paddType === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.paddType = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="datas.segmentationtype === 1" style="height: 20px" />
|
||||
|
||||
<!-- 辅助线颜色 -->
|
||||
<el-form-item
|
||||
v-show="datas.segmentationtype === 1"
|
||||
label="辅助线颜色"
|
||||
class="lef aa"
|
||||
>
|
||||
<!-- 辅助线颜色 -->
|
||||
<el-color-picker
|
||||
v-model="datas.auxliarColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'auxiliarysegmentationstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
borderType: [
|
||||
//线类型
|
||||
{
|
||||
icon: 'icon-icon_fengexian_shixian',
|
||||
text: '实线',
|
||||
type: 'solid',
|
||||
},
|
||||
{
|
||||
icon: 'icon-xuxian',
|
||||
text: '虚线',
|
||||
type: 'dashed',
|
||||
},
|
||||
{
|
||||
icon: 'icon-dianxian--',
|
||||
text: '点线',
|
||||
type: 'dotted',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.auxiliarysegmentationstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.aa {
|
||||
/deep/.el-form-item__label {
|
||||
width: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.weiz {
|
||||
text-align: right;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<section class="captiontextsstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small" :rules="rules">
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item label="标题内容">
|
||||
<el-input
|
||||
v-model="datas.name"
|
||||
placeholder="请输入标题"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 描述内容 -->
|
||||
<el-form-item label="描述内容">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="datas.description"
|
||||
placeholder="请输入要说明的文字，最多 100 字"
|
||||
maxlength="100"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 显示位置 -->
|
||||
<el-form-item label="显示位置">
|
||||
<div class="weiz">
|
||||
<i
|
||||
:class="datas.positions === 'left' ? 'active' : ''"
|
||||
class="iconfont icon-horizontal-left"
|
||||
@click="datas.positions = 'left'"
|
||||
/>
|
||||
<i
|
||||
:class="datas.positions === 'center' ? 'active' : ''"
|
||||
class="iconfont icon-juzhong"
|
||||
@click="datas.positions = 'center'"
|
||||
/>
|
||||
<!-- <i
|
||||
:class="datas.positions === 'right' ? 'active': ''"
|
||||
class="iconfont icon-juyou"
|
||||
@click="datas.positions = 'right'"
|
||||
/> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 标题大小 -->
|
||||
<el-form-item
|
||||
label="标题大小"
|
||||
prop="wordSize"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.wordSize"
|
||||
placeholder="请输入标题文字大小"
|
||||
:maxlength="2"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 描述大小 -->
|
||||
<el-form-item
|
||||
label="描述大小"
|
||||
prop="descriptionSize"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.descriptionSize"
|
||||
placeholder="请输入描述文字大小"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 标题粗细 -->
|
||||
<el-form-item
|
||||
label="标题粗细"
|
||||
prop="wordWeight"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.wordWeight"
|
||||
placeholder="请输入标题粗细"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!--描述粗细 -->
|
||||
<el-form-item
|
||||
label="描述粗细"
|
||||
prop="descriptionWeight"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.descriptionWeight"
|
||||
placeholder="请输入描述粗细"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 框体高度 -->
|
||||
<el-form-item class="lef" label="框体高度">
|
||||
<el-slider
|
||||
v-model="datas.wordHeight"
|
||||
:max="100"
|
||||
:min="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 标题颜色 -->
|
||||
<el-form-item label="标题颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.wordColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 描述颜色 -->
|
||||
<el-form-item label="描述颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.descriptionColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色">
|
||||
<!-- 背景颜色 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!--查看更多 -->
|
||||
<el-form-item label="底部分割线" class="wid">
|
||||
{{ datas.borderBott ? '显示' : '隐藏' }}
|
||||
<el-checkbox v-model="datas.borderBott" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!--查看更多 -->
|
||||
<el-form-item label="查看更多" class="wid">
|
||||
{{ datas.more.show ? '显示' : '隐藏' }}
|
||||
<el-checkbox v-model="datas.more.show" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 更多样式选择 -->
|
||||
<div v-show="datas.more.show ? true : false">
|
||||
<el-radio-group v-model="datas.more.type">
|
||||
<el-radio :label="0">样式一</el-radio>
|
||||
<el-radio :label="1">样式二</el-radio>
|
||||
<el-radio :label="2">样式三</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 更多文字 -->
|
||||
<el-input
|
||||
v-show="datas.more.type === 2 ? false : true"
|
||||
type="text"
|
||||
style="width: 110px; margin: 15px"
|
||||
v-model="datas.more.text"
|
||||
size="mini"
|
||||
/>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 跳转链接 -->
|
||||
<el-form-item label="跳转链接">
|
||||
<!-- <el-radio-group v-model="datas.more.httpType" style="margin-left: 18px">
|
||||
<el-radio :label="0">方式一</el-radio>
|
||||
<el-radio :label="1">方式二</el-radio>
|
||||
</el-radio-group> -->
|
||||
|
||||
<!-- 输入http -->
|
||||
<el-input
|
||||
v-show="datas.more.httpType === 0"
|
||||
v-model="datas.more.http"
|
||||
placeholder="请输入跳转链接: http://www...."
|
||||
show-word-limit
|
||||
style="margin-top: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 选择创建好的页面 -->
|
||||
<el-select
|
||||
style="margin-top: 10px"
|
||||
@change="changeId"
|
||||
@visible-change="getOption"
|
||||
v-show="datas.more.httpType === 1"
|
||||
v-model="datas.more.select.name"
|
||||
placeholder="请选择要跳转的页面"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'captiontextsstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
let checkAge = (rule, value, callback) => {
|
||||
if (value.length === 0) callback(new Error('请输入有效数字'))
|
||||
if (value > 99) callback(new Error('数字最大为99'))
|
||||
}
|
||||
let kon = (rule, value, callback) => {
|
||||
if (value.length === 0) callback(new Error('请输入有效数字'))
|
||||
}
|
||||
return {
|
||||
options: [],
|
||||
rules: {
|
||||
wordSize: [{ required: true, validator: checkAge, trigger: 'blur' }],
|
||||
descriptionSize: [
|
||||
{ required: true, validator: checkAge, trigger: 'blur' },
|
||||
],
|
||||
wordWeight: [{ required: true, validator: kon, trigger: 'blur' }],
|
||||
descriptionWeight: [
|
||||
{ required: true, validator: kon, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 获取下拉框内容 */
|
||||
getOption() {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
},
|
||||
changeId(res) {
|
||||
this.datas.more.select = {
|
||||
name: res.name,
|
||||
id: res.id,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.captiontextsstyle {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 位置 */
|
||||
.weiz {
|
||||
text-align: right;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.wid .el-form-item__label {
|
||||
width: 94px !important;
|
||||
}
|
||||
/deep/.wid .el-form-item__content {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="commoditysearchstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<p style="color: #323233; font-size: 14px">搜索热词</p>
|
||||
<p style="font-size: 12px; color: #969799; margin-top: 10px">
|
||||
鼠标拖拽调整热词顺序，搜索框默认展示第一个热词，其他搜索词将以标签形式显示在搜索页中
|
||||
</p>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<div v-if="datas.hotords[0]">
|
||||
<vuedraggable v-model="datas.hotords" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgList"
|
||||
v-for="(item, index) in datas.hotords"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteHotords(index)" />
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<el-input v-model="item.text" placeholder="请输入热词" />
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
|
||||
<!-- 添加热词 -->
|
||||
<el-button @click="addHotords" class="uploadImg" type="primary" plain
|
||||
><i class="el-icon-plus" />点击添加热词</el-button
|
||||
>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 显示位置 -->
|
||||
<el-form-item class="lef" label="显示位置">
|
||||
<div class="weiz">
|
||||
<span>{{
|
||||
datas.position === 0 ? '正常模式' : '滚动至顶部固定'
|
||||
}}</span>
|
||||
<div>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '正常模式' : '滚动至顶部固定'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0 ? 'icon-wangye1' : 'icon-zhiding',
|
||||
datas.position === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.position = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 框体样式 -->
|
||||
<el-form-item class="lef" label="框体样式">
|
||||
<div class="weiz">
|
||||
<span>{{ datas.borderRadius === 0 ? '方形' : '圆形' }}</span>
|
||||
<div>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '方形' : '圆形'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0 ? 'icon-sousuokuang1' : 'icon-sousuokuang',
|
||||
datas.borderRadius === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.borderRadius = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文本位置 -->
|
||||
<el-form-item class="lef" label="文本位置">
|
||||
<div class="weiz">
|
||||
<span>{{ datas.textPosition === 0 ? '居左' : '居中' }}</span>
|
||||
<div>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '居左' : '居中'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0 ? 'icon-horizontal-left' : 'icon-juzhong',
|
||||
datas.textPosition === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.textPosition = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 扫一扫 -->
|
||||
<el-form-item class="lef" label="扫一扫">
|
||||
{{ datas.sweep ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.sweep" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 框体高度 -->
|
||||
<el-form-item label="框体高度" class="lef borrediu">
|
||||
<el-slider
|
||||
v-model="datas.heights"
|
||||
:max="50"
|
||||
:min="28"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item class="lef" label="背景颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backgroundColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 框体颜色 -->
|
||||
<el-form-item class="lef" label="框体颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.borderColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文本颜色 -->
|
||||
<el-form-item class="lef" label="文本颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.textColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'commoditysearchstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
components: { vuedraggable },
|
||||
data() {
|
||||
return {
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
dragOptions: {
|
||||
//拖拽配置
|
||||
animation: 200,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 添加热词 */
|
||||
addHotords() {
|
||||
this.datas.hotords.push({
|
||||
text: '',
|
||||
})
|
||||
},
|
||||
/* 删除热词 */
|
||||
deleteHotords(index) {
|
||||
this.datas.hotords.splice(index, 1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.commoditysearchstyle {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 热词列表 */
|
||||
.imgList {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 热词文字 */
|
||||
.imgText {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.weiz {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lef {
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="communitypowderstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 提示 -->
|
||||
<!-- <el-tooltip class="item" effect="dark" content="" placement="bottom">
|
||||
<div slot="content">活码是用户推广个人微信号或粉丝群的二维码，适用于线上线下，吸引用户<br/>添加好友或粉丝群进行长期维护的场景</div>
|
||||
<i class="el-icon-question" style="cursor: pointer;"></i>
|
||||
</el-tooltip> -->
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="80px"
|
||||
:model="datas"
|
||||
size="small"
|
||||
:rules="rules"
|
||||
>
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 描述 -->
|
||||
<el-form-item label="入口图片" :hide-required-asterisk="true">
|
||||
<div class="backgroundImg" @click="showImg('mainImg')">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!datas.mainImg"
|
||||
src="../../../assets/images/powder.png"
|
||||
alt=""
|
||||
/>
|
||||
<img draggable="false" v-else :src="datas.mainImg" alt="" />
|
||||
<p>更换图片</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 二维码 -->
|
||||
<el-form-item label="二维码" :hide-required-asterisk="true">
|
||||
<div class="backgroundImg" @click="showImg('qrcodeImg')">
|
||||
<i class="el-icon-plus" v-if="!datas.qrcodeImg" size="30"></i>
|
||||
<img draggable="false" v-else :src="datas.qrcodeImg" alt="" />
|
||||
<p>更换图片</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 标题 -->
|
||||
<el-form-item label="标题" prop="title" :hide-required-asterisk="true">
|
||||
<el-input
|
||||
v-model="datas.title"
|
||||
placeholder="个人微信号, 群名称或活动标题"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 描述 -->
|
||||
<el-form-item label="描述" prop="describe" :hide-required-asterisk="true">
|
||||
<el-input
|
||||
v-model="datas.describe"
|
||||
placeholder="请添加描述"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 按钮名称 -->
|
||||
<el-form-item
|
||||
label="按钮名称"
|
||||
prop="buttonName"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
v-model="datas.buttonName"
|
||||
placeholder="请输入按钮名称"
|
||||
show-word-limit
|
||||
maxlength="8"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色" class="color-select">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'communitypowderstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
title: [
|
||||
//页面名称
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' },
|
||||
],
|
||||
describe: [
|
||||
// 描述
|
||||
{ required: true, message: '请输入描述', trigger: 'blur' },
|
||||
],
|
||||
buttonName: [
|
||||
// 按钮名称
|
||||
{ required: true, message: '请输入按钮名称', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
imgText: '', //哪一个图片
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas[this.imgText] = res
|
||||
},
|
||||
showImg(res) {
|
||||
this.imgText = res
|
||||
this.$refs.upload.showUpload()
|
||||
},
|
||||
},
|
||||
components: { uploadimg },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.communitypowderstyle {
|
||||
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;
|
||||
}
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
margin-left: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* 背景图 */
|
||||
.backgroundImg {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
background: #f2f4f6;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.color-select {
|
||||
/deep/.el-form-item__content {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="componenManagement">
|
||||
<!-- 标题 -->
|
||||
<h2>组件设置</h2>
|
||||
|
||||
<!-- 拖拽 -->
|
||||
<vuedraggable v-model="data" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<div v-for="(item, ind) in data" :key="item.text + ind" class="item">
|
||||
<p>
|
||||
<i class="el-icon-s-grid" style="margin-right: 15px" />{{
|
||||
item.text
|
||||
}}
|
||||
</p>
|
||||
<el-popconfirm
|
||||
title="您确定要删除该组件吗?"
|
||||
icon="el-icon-warning"
|
||||
iconColor="red"
|
||||
@confirm="onConfirms(ind)"
|
||||
>
|
||||
<i
|
||||
class="el-icon-delete-solid"
|
||||
slot="reference"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'componenManagement',
|
||||
props: ['datas'],
|
||||
components: { vuedraggable },
|
||||
data() {
|
||||
return {
|
||||
data: this.datas,
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 删除组件 */
|
||||
onConfirms(res) {
|
||||
this.data.splice(res, 1)
|
||||
this.$emit('componenmanagement', this.data)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
datas(newVal) {
|
||||
this.data = newVal
|
||||
},
|
||||
|
||||
data(newVal) {
|
||||
this.$emit('componenmanagement', newVal)
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 组件管理 */
|
||||
.componenManagement {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 选项 */
|
||||
.item {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
cursor: all-scroll;
|
||||
color: #323233;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
margin-bottom: 10px;
|
||||
i {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="crowdoperationstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'crowdoperationstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.crowdoperationstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="custommodulestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
<el-input v-model="datas.demo" placeholder="请输入公告" />
|
||||
<el-input v-model="datas.img" placeholder="图片地址" />
|
||||
{{ 'aaa'+ data-type}}
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'custommodulestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
'data-type':String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.custommodulestyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="decorate">
|
||||
<!-- 标题 -->
|
||||
<h2>页面设置</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="80px"
|
||||
:model="datas"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="页面名称" :hide-required-asterisk="true" prop="name">
|
||||
<el-input
|
||||
v-model="datas.name"
|
||||
placeholder="页面标题"
|
||||
maxlength="25"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="页面描述"
|
||||
:hide-required-asterisk="true"
|
||||
prop="details"
|
||||
>
|
||||
<el-input
|
||||
v-model="datas.details"
|
||||
placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 个人中心 -->
|
||||
<el-form-item label="个人中心" class="lef">
|
||||
{{ datas.isPerson ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.isPerson" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 返回 -->
|
||||
<el-form-item label="返回按钮" class="lef">
|
||||
{{ datas.isBack ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.isBack" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 高度 -->
|
||||
<el-form-item label="高度" class="lef-height">
|
||||
<el-slider
|
||||
v-model="datas.titleHeight"
|
||||
:max="100"
|
||||
:min="35"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 页面分类 -->
|
||||
<!-- <el-form-item label="分类" :hide-required-asterisk="true" prop="classification">
|
||||
<el-select v-model="datas.classification" placeholder="请选择页面分类">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
|
||||
<span class="ification">刷新</span>|<span class="ification">新建</span>
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色">
|
||||
<!-- 单选框 -->
|
||||
<el-radio-group v-model="colourAction">
|
||||
<el-radio label="默认颜色" />
|
||||
<el-radio label="自定义颜色" />
|
||||
</el-radio-group>
|
||||
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.bgColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
v-show="pickeShow"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="背景图片">
|
||||
<div class="shop-head-pic" style="text-align: center">
|
||||
<img class="home-bg" :src="datas.bgImg" alt="" v-if="datas.bgImg" />
|
||||
<div class="shop-head-pic-btn" style="text-align: center">
|
||||
<el-button
|
||||
@click="showUpload('2')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />更换图片</el-button
|
||||
>
|
||||
<el-button type="primary" @click="clear()">清空图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="底部LOGO">
|
||||
<div class="bottomLogo">
|
||||
<img :src="datas.bottomLogo.botLogo" alt="" />
|
||||
<el-button
|
||||
@click="showUpload('0')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加图片</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<!-- 底部主页 -->
|
||||
<el-form-item label="店铺主页" class="lef" v-if="datas.bottomLogo">
|
||||
{{ datas.bottomLogo.isShowBootom ? '显示' : '隐藏' }}
|
||||
<el-checkbox
|
||||
style="margin-left: 196px"
|
||||
v-model="datas.bottomLogo.isShowBootom"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<el-form-item label="店铺信息">
|
||||
<div class="shop-info">
|
||||
<div class="shop-name">
|
||||
店铺名称：
|
||||
<el-input
|
||||
v-model="shopData.shopName"
|
||||
@blur="changeShopInfo"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="shop-head-pic">
|
||||
店铺头像:
|
||||
<img :src="shopData.shopPic" alt="" />
|
||||
<div class="shop-head-pic-btn">
|
||||
<el-button
|
||||
@click="showUpload('1')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />更换头像</el-button
|
||||
>
|
||||
<!-- <el-button @click="changeShopInfo" type="primary" plain>保存店铺信息</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'decorate',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
//校验表单输入
|
||||
name: [
|
||||
//页面名称
|
||||
{ required: true, message: '请输入页面名称', trigger: 'blur' },
|
||||
],
|
||||
details: [
|
||||
//页面描述
|
||||
{ required: true, message: '请输入页面描述', trigger: 'blur' },
|
||||
],
|
||||
classification: [
|
||||
//分类
|
||||
{ required: true, message: '请选择页面分类', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
colourAction: '默认颜色', // 颜色选择
|
||||
pickeShow: false, //颜色选择器是否显示
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
shopData: {
|
||||
shopName: null, // 店铺名称
|
||||
shopPic: null, // 店铺头像
|
||||
},
|
||||
uploadImgDataType: null, // 获取到的图片地址属于哪一类别 0 修改底部logo 1 修改店铺图标 2 页面背景图
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getShopInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 显示上传图片组件 type : 0 修改底部logo 1 修改店铺图标 2 页面背景图
|
||||
showUpload(type) {
|
||||
this.uploadImgDataType = type
|
||||
this.$refs.upload.showUpload()
|
||||
},
|
||||
|
||||
// 底部logo
|
||||
uploadInformation(res) {
|
||||
if (this.uploadImgDataType === '0') {
|
||||
this.datas.bottomLogo.botLogo = res
|
||||
} else if (this.uploadImgDataType === '1') {
|
||||
this.shopData.shopPic = res
|
||||
this.changeShopInfo()
|
||||
} else if (this.uploadImgDataType === '2') {
|
||||
this.datas.bgImg = res
|
||||
}
|
||||
},
|
||||
|
||||
// 获取店铺信息
|
||||
getShopInfo() {
|
||||
this.$httpApi.queryShopInfo().then((res) => {
|
||||
// console.log('shop info ', res)
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
|
||||
this.shopData.shopName = res.data.name // 店铺名称
|
||||
this.shopData.shopPic = res.data.icon // 店铺头像
|
||||
})
|
||||
},
|
||||
// 清空背景图片
|
||||
clear() {
|
||||
this.datas.bgImg = ''
|
||||
},
|
||||
|
||||
// 修改店铺信息
|
||||
changeShopInfo() {
|
||||
let params = {
|
||||
name: this.shopData.shopName,
|
||||
icon: this.shopData.shopPic,
|
||||
}
|
||||
|
||||
this.$httpApi.updateShopInfo(params).then((res) => {
|
||||
console.log('change shop info ::', res)
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.$message.success(res.msg)
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
colourAction(data) {
|
||||
if (data === '默认颜色') {
|
||||
this.datas.bgColor = 'rgba(249, 249, 249, 10)'
|
||||
this.pickeShow = false
|
||||
return
|
||||
} else return (this.pickeShow = true)
|
||||
},
|
||||
},
|
||||
components: { uploadimg },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 页面设置 */
|
||||
.decorate {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
}
|
||||
/* 选择器添加和刷新 */
|
||||
.ification {
|
||||
color: #155bd4;
|
||||
font-size: 14px;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
margin-left: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.home-bg {
|
||||
width: 100px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.lef {
|
||||
display: flex;
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.lef-height {
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
width: 80px;
|
||||
float: left;
|
||||
}
|
||||
/deep/.el-form-item__content {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部logo
|
||||
.bottomLogo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
display: block;
|
||||
width: 220px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 店铺信息修改
|
||||
.shop-info {
|
||||
.shop-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #ababab;
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.shop-head-pic {
|
||||
color: #ababab;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.shop-head-pic-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.el-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="entertheshopstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="80px"
|
||||
:model="datas"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item
|
||||
label="店铺名称"
|
||||
:hide-required-asterisk="true"
|
||||
prop="shopName"
|
||||
>
|
||||
<el-input
|
||||
v-model="datas.shopName"
|
||||
placeholder="请输入店铺名称"
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文案 -->
|
||||
<el-form-item
|
||||
label="文案"
|
||||
:hide-required-asterisk="true"
|
||||
prop="copywriting"
|
||||
>
|
||||
<el-input
|
||||
v-model="datas.copywriting"
|
||||
placeholder="请输入文案"
|
||||
maxlength="8"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 跳转页面 -->
|
||||
<el-form-item label="跳转页面">
|
||||
<div class="imgText">
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="datas.type"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'entertheshopstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
//校验表单输入
|
||||
shopName: [
|
||||
//页面名称
|
||||
{ required: true, message: '请输入店铺名称', trigger: 'blur' },
|
||||
],
|
||||
copywriting: [
|
||||
//页面描述
|
||||
{ required: true, message: '请输入文案', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
optionsType: [
|
||||
// {
|
||||
// type: '1',
|
||||
// name: '视频'
|
||||
// },
|
||||
// {
|
||||
// type: '2',
|
||||
// name: '音频'
|
||||
// },
|
||||
// {
|
||||
// type: '6',
|
||||
// name: '直播'
|
||||
// },
|
||||
{
|
||||
type: '10',
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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">
|
||||
.entertheshopstyle {
|
||||
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;
|
||||
}
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.fir-sele.el-select {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div id="followStyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<el-form>
|
||||
<el-form-item class="lef" label="公众号图片">
|
||||
<div class="follow-pic">
|
||||
<img :src="datas.heade" alt="" />
|
||||
<el-button
|
||||
@click="$refs.upload.showUpload()"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
>
|
||||
<i class="el-icon-plus" />上传公众号图片
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="公众号名称">
|
||||
<input type="text" placeholder="请输入公众号名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="公众号Id">
|
||||
<input type="text" placeholder="请输入公众号Id" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
export default {
|
||||
name: 'followStyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
created() {
|
||||
console.log(this.datas,'-------------followStyle datas')
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas.heade = res
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
components: {
|
||||
uploadimg,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#followStyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-pic {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.uploadImg {
|
||||
width: 80%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,584 @@
|
||||
<template>
|
||||
<div class="graphicnavigationstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 提示 -->
|
||||
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
||||
拖动选中的导航可对其排序
|
||||
</p>
|
||||
|
||||
<!-- 图片广告 -->
|
||||
<div v-if="datas.imageList[0]">
|
||||
<vuedraggable v-model="datas.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgList"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
||||
<!-- 图片 -->
|
||||
<div class="imag">
|
||||
<img draggable="false" :src="item.src" alt="" />
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
placeholder="请输入标题，也可不填"
|
||||
size="mini"
|
||||
></el-input>
|
||||
<!-- 选择类型 -->
|
||||
<div class="select-type">
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<el-button @click="showUpload('0')" class="uploadImg" type="primary" plain
|
||||
><i class="el-icon-plus" />点击添加图片</el-button
|
||||
>
|
||||
|
||||
<div class="bor"></div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<!-- 商品类型选择 -->
|
||||
<el-form-item class="lef" label="商品类型">
|
||||
<el-radio-group v-model="datas.navigationType">
|
||||
<el-radio
|
||||
style="margin-left: 35px"
|
||||
:label="index - 1"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>{{ index === 1 ? '图片导航' : '文字导航' }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片样式 -->
|
||||
<el-form-item class="lef" label="图片样式">
|
||||
<div class="weiz">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="index - 1 === 0 ? '固定' : '滑动'"
|
||||
placement="bottom"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="iconfont"
|
||||
:class="[
|
||||
index - 1 === 0 ? 'icon-guding' : 'icon-hengxianghuadong',
|
||||
datas.imgStyle === index - 1 ? 'active' : '',
|
||||
]"
|
||||
@click="datas.imgStyle = index - 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 一屏显示 -->
|
||||
<el-form-item class="lef" label="一屏显示" v-show="datas.imgStyle === 1">
|
||||
<el-select
|
||||
v-model="datas.showSize"
|
||||
placeholder="请选择活动区域"
|
||||
style="margin-left: 90px"
|
||||
>
|
||||
<el-option
|
||||
:label="index + 4 + '个导航'"
|
||||
:value="index + 4"
|
||||
v-for="index in 7"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文字高度 -->
|
||||
<el-form-item label="文字高度" class="lef">
|
||||
<el-slider
|
||||
v-model="datas.textHeight"
|
||||
:max="50"
|
||||
:min="24"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文字大小 -->
|
||||
<el-form-item
|
||||
label="文字大小"
|
||||
prop="textSize"
|
||||
:hide-required-asterisk="true"
|
||||
class="lef"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.textSize"
|
||||
placeholder="请输入文字大小"
|
||||
:maxlength="2"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片倒角 -->
|
||||
<el-form-item label="图片倒角" class="lef borrediu">
|
||||
<el-slider
|
||||
v-model="datas.borderRadius"
|
||||
:max="50"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<el-form-item class="lef" label="背景图片">
|
||||
<div class="shop-head-pic" style="text-align: center">
|
||||
<img class="home-bg" :src="datas.bgImg" alt="" v-if="datas.bgImg" />
|
||||
<div class="shop-head-pic-btn" style="text-align: center">
|
||||
<el-button
|
||||
@click="showUpload('1')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />更换图片</el-button
|
||||
>
|
||||
<el-button type="primary" class="uploadImg" @click="clear()"
|
||||
>清空图片</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item class="lef" label="背景颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backgroundColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文字颜色 -->
|
||||
<el-form-item class="lef" label="文字颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.textColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'graphicnavigationstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dragOptions: {
|
||||
//拖拽配置
|
||||
animation: 200,
|
||||
},
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [],
|
||||
emptyText: '',
|
||||
uploadImgDataType: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
showUpload(type) {
|
||||
this.uploadImgDataType = type
|
||||
this.$refs.upload.showUpload()
|
||||
},
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
if (this.uploadImgDataType === '0') {
|
||||
this.datas.imageList.push({
|
||||
src: res,
|
||||
text: '',
|
||||
http: {},
|
||||
})
|
||||
} else if (this.uploadImgDataType === '1') {
|
||||
this.datas.bgImg = res
|
||||
}
|
||||
},
|
||||
|
||||
// 清空背景图片
|
||||
clear() {
|
||||
this.datas.bgImg = ''
|
||||
},
|
||||
/* 删除图片列表的图片 */
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
console.log(this.options, '----------this.options')
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
components: { uploadimg, vuedraggable },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.graphicnavigationstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.imgList {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
.select-type {
|
||||
display: flex;
|
||||
/deep/.el-select {
|
||||
.el-input {
|
||||
input {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.weiz {
|
||||
text-align: right;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-head-pic {
|
||||
color: #ababab;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-bg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.shop-head-pic-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.el-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
export { default as decorate } from './decorate'
|
||||
export { default as componenmanagement } from './componenmanagement'
|
||||
export { default as captiontextsstyle } from './captiontextsstyle'
|
||||
export { default as pictureadsstyle } from './pictureadsstyle'
|
||||
export { default as graphicnavigationstyle } from './graphicnavigationstyle'
|
||||
export { default as richtextstyle } from './richtextstyle'
|
||||
export { default as magiccubestyle } from './magiccubestyle'
|
||||
export { default as auxiliarysegmentationstyle } from './auxiliarysegmentationstyle'
|
||||
export { default as commoditysearchstyle } from './commoditysearchstyle'
|
||||
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'
|
||||
export { default as crowdoperationstyle } from './crowdoperationstyle'
|
||||
export { default as personalizedrecommendationstyle } from './personalizedrecommendationstyle'
|
||||
export { default as onlineservicestyle } from './onlineservicestyle'
|
||||
export { default as listswitchingstyle } from './listswitchingstyle'
|
||||
export { default as investigatestyle } from './investigatestyle'
|
||||
export { default as tabBarStyle } from './tabBarStyle'
|
||||
export { default as followStyle } from './followStyle'
|
||||
export { default as suspensionstyle } from './suspensionstyle'
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="investigatestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div>
|
||||
<p class="info" style="color: #ff0000">
|
||||
下拉框，单选，多选等文本用，符号隔开#如：(男#女)
|
||||
</p>
|
||||
</div>
|
||||
<!-- <el-from ref="form" :model="datas" label-width="80px">
|
||||
|
||||
</el-from>-->
|
||||
<el-form ref="form" :model="datas" label-width="80px">
|
||||
<el-form-item label="名称" label-width="40px">
|
||||
<el-input v-model="datas.title" style="width: 87%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(item, index) in datas.jsonData"
|
||||
:key="index"
|
||||
class="lef"
|
||||
>
|
||||
<span class="delete" @click="deletetext(index)">x</span>
|
||||
<el-input
|
||||
v-model="item.name"
|
||||
class="title"
|
||||
placeholder="调研名称"
|
||||
></el-input>
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
placeholder="请选择显示格式"
|
||||
@change="conChange(index)"
|
||||
>
|
||||
<el-option
|
||||
:label="item"
|
||||
:value="index"
|
||||
v-for="(item, index) in selecttext"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="item.value"
|
||||
placeholder="提示语句如:(请输入姓名)"
|
||||
v-if="item.type == 0"
|
||||
></el-input>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="item.value"
|
||||
@input="item.value1 = item.value.split('#')"
|
||||
placeholder="多项之间用‘#’逗号隔开"
|
||||
v-else
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="addText" class="uploadImg" type="primary" plain>
|
||||
<i class="el-icon-plus" />点击添加内容
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'investigatestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selecttext: ['文本', '下拉框', '单选', '多选'],
|
||||
index1: 0,
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//添加文本
|
||||
addText() {
|
||||
console.log(this.datas.jsonData)
|
||||
var text = {
|
||||
name: '',
|
||||
type: '',
|
||||
value: '',
|
||||
value1: [],
|
||||
value2: '',
|
||||
showPicker: false,
|
||||
}
|
||||
this.datas.jsonData.push(text)
|
||||
},
|
||||
//删除文本
|
||||
deletetext(index) {
|
||||
this.datas.jsonData.splice(index, 1)
|
||||
},
|
||||
//下拉内容改变发生发生事件
|
||||
conChange(index) {
|
||||
this.datas.jsonData[index].value = ''
|
||||
this.datas.jsonData[index].value1 = []
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.investigatestyle {
|
||||
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 {
|
||||
position: relative;
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
.delete {
|
||||
background: #ff0000;
|
||||
color: #ffffff;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
// display: flex;
|
||||
div {
|
||||
&:nth-child(2) {
|
||||
// flex: 1;
|
||||
width: 90%;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 90%;
|
||||
// flex: 1;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
// flex: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
// /deep/.el-input__inner{
|
||||
// padding: 0 5px;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<div class="listswitchingstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small" :rules="rules">
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="选择模板"
|
||||
v-show="datas.commoditylisttype !== 2"
|
||||
>
|
||||
<p style="color: #000">{{ styleText }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 商品样式选择 -->
|
||||
<div class="commodityType" v-show="datas.commoditylisttype !== 2">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.content"
|
||||
placement="bottom"
|
||||
v-for="(item, index) in commodityTypes"
|
||||
:key="index"
|
||||
>
|
||||
<span
|
||||
class="iconfont"
|
||||
style="font-size: 21px"
|
||||
:class="[
|
||||
item.type === datas.commodityType ? 'active' : '',
|
||||
item.icon,
|
||||
]"
|
||||
@click="datas.commodityType = index"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 下划线 -->
|
||||
<div class="bor" v-show="datas.commoditylisttype !== 2" />
|
||||
|
||||
<!-- 商品类型选择 -->
|
||||
<el-form-item label="商品类型" class="lef">
|
||||
<el-radio-group v-model="datas.commoditylisttype">
|
||||
<el-radio :label="index - 1" v-for="index in 3" :key="index"
|
||||
>类型{{ index }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- tabbar颜色 -->
|
||||
<el-form-item
|
||||
label="标签颜色"
|
||||
class="lef"
|
||||
v-show="datas.commoditylisttype !== 0"
|
||||
>
|
||||
<el-color-picker
|
||||
v-model="datas.tabColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 更多 -->
|
||||
<el-form-item label="更多" class="lef">
|
||||
{{ datas.showMore ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.showMore" />
|
||||
<el-select
|
||||
v-model="datas.moreUrl"
|
||||
v-show="datas.showMore"
|
||||
placeholder="请选择更多跳转链接"
|
||||
size="mini"
|
||||
@visible-change="getOption"
|
||||
@change="selectMore"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="[item.id, item.name]"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="datas.commoditylisttype === 0">
|
||||
<h5 style="color: #000; font-size: 14px">添加商品</h5>
|
||||
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
||||
鼠标拖拽调整商品顺序
|
||||
</p>
|
||||
|
||||
<!-- 图片广告 -->
|
||||
<div v-if="datas.imageList[0]">
|
||||
<vuedraggable v-model="datas.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
||||
<div class="imag">
|
||||
<img draggable="false" :src="item.coverUrl" alt="" />
|
||||
</div>
|
||||
<div class="imgText">
|
||||
<div>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
style="width: 65%"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
/>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
type="number"
|
||||
style="width: 35%"
|
||||
v-model.number="item.price"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
v-model="item.introduce"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<el-button
|
||||
@click="dialogVisibleshow('imageList', null)"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加商品</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-show="datas.commoditylisttype !== 0">
|
||||
<h5 style="color: #000; font-size: 14px; margin-left: 7px">
|
||||
添加商品分组<el-button
|
||||
style="padding: 2px 4px; fnot-size: 12px; margin-left: 200px"
|
||||
@click="addGrouping"
|
||||
type="primary"
|
||||
size="mini"
|
||||
plain
|
||||
>
|
||||
<i class="el-icon-plus" />添加</el-button
|
||||
>
|
||||
</h5>
|
||||
<p
|
||||
style="
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
margin-left: 7px;
|
||||
margin-top: 10px;
|
||||
"
|
||||
>
|
||||
鼠标拖拽调整分组顺序
|
||||
</p>
|
||||
|
||||
<!-- 分类名称 -->
|
||||
<section
|
||||
v-for="(item, index) in datas.commoditylisttypetab"
|
||||
:key="index"
|
||||
>
|
||||
<div class="bor" />
|
||||
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
class="tit"
|
||||
style="width: 100px"
|
||||
placeholder="请输入分组名称"
|
||||
size="mini"
|
||||
/>
|
||||
<i
|
||||
@click="delecommoditylisttypetab(index)"
|
||||
class="el-icon-delete"
|
||||
style="
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
fnot-size: 12px;
|
||||
margin-left: 200px;
|
||||
color: red;
|
||||
"
|
||||
/>
|
||||
|
||||
<vuedraggable v-model="item.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, ind) in item.imageList"
|
||||
:key="item + ind"
|
||||
>
|
||||
<i
|
||||
class="el-icon-circle-close"
|
||||
@click="delecommodityimg(index, ind)"
|
||||
/>
|
||||
<!-- 图片 -->
|
||||
<div class="imag">
|
||||
<img draggable="false" :src="item.coverUrl" alt="" />
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<div>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
style="width: 65%"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
/>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
type="number"
|
||||
style="width: 35%"
|
||||
v-model.number="item.price"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
<el-input
|
||||
disabled="disabled"
|
||||
v-model="item.introduce"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
|
||||
<el-button
|
||||
@click="dialogVisibleshow('commoditylisttypetab', index)"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加商品</el-button
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 商品样式 -->
|
||||
<el-form-item label="商品样式" class="lef" />
|
||||
<!-- 商品样式选择 -->
|
||||
<div class="moditystyle">
|
||||
<span
|
||||
v-for="(item, index) in moditystyles"
|
||||
:key="index"
|
||||
:class="item.type == datas.moditystyle ? 'active' : ''"
|
||||
@click="datas.moditystyle = index"
|
||||
>
|
||||
{{ item.text }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<!-- 显示位置 -->
|
||||
<el-form-item label="显示位置" class="lef">
|
||||
<div class="weiz">
|
||||
<i
|
||||
:class="datas.positions === 'left' ? 'active' : ''"
|
||||
class="iconfont icon-horizontal-left"
|
||||
@click="datas.positions = 'left'"
|
||||
/>
|
||||
<i
|
||||
:class="datas.positions === 'center' ? 'active' : ''"
|
||||
class="iconfont icon-juzhong"
|
||||
@click="datas.positions = 'center'"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文本粗细 -->
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="文本粗细"
|
||||
prop="textWeight"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.textWeight"
|
||||
placeholder="请输入文本粗细"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片倒角 -->
|
||||
<el-form-item label="图片倒角" class="lef borrediu">
|
||||
<el-slider
|
||||
v-model="datas.borderRadius"
|
||||
:max="30"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 页面边距 -->
|
||||
<el-form-item class="lef" label="页面边距">
|
||||
<el-slider
|
||||
v-model="datas.pageMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 商品间距 -->
|
||||
<el-form-item class="lef" label="商品间距">
|
||||
<el-slider
|
||||
v-model="datas.commodityMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<el-form-item class="lef" label="背景图片">
|
||||
<div class="shop-head-pic" style="text-align: center">
|
||||
<img class="home-bg" :src="datas.bgImg" alt="" v-if="datas.bgImg" />
|
||||
<div class="shop-head-pic-btn" style="text-align: center">
|
||||
<el-button
|
||||
@click="showUpload('0')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />更换图片</el-button
|
||||
>
|
||||
<el-button type="primary" class="uploadImg" @click="clear()">清空图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div style="height: 10px" />
|
||||
<!--商品价格 -->
|
||||
<el-form-item class="lef" label="商品价格">
|
||||
{{ datas.priceofcommodity ? '显示' : '隐藏' }}
|
||||
<el-checkbox
|
||||
style="margin-left: 196px"
|
||||
v-model="datas.priceofcommodity"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!--购买按钮 -->
|
||||
<el-form-item class="lef" label="购买按钮">
|
||||
{{ datas.purchasebutton ? '显示' : '隐藏' }}
|
||||
<el-checkbox
|
||||
style="margin-left: 196px"
|
||||
v-model="datas.purchasebutton"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-radio-group
|
||||
v-model="datas.purchasebuttonType"
|
||||
class="radi1"
|
||||
v-show="datas.purchasebutton"
|
||||
>
|
||||
<el-radio :label="index - 1" v-for="index in 8" :key="index"
|
||||
>样式{{ index }}</el-radio
|
||||
>
|
||||
|
||||
<el-input
|
||||
v-show="datas.purchasebuttonType > 3"
|
||||
style="width: 40%; margin-top: 10px"
|
||||
v-model="datas.purchase"
|
||||
size="mini"
|
||||
/>
|
||||
</el-radio-group>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!--商品角标 -->
|
||||
<el-form-item class="lef" label="商品角标">
|
||||
{{ datas.commoditycorner ? '显示' : '隐藏' }}
|
||||
<el-checkbox
|
||||
style="margin-left: 196px"
|
||||
v-model="datas.commoditycorner"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-radio-group
|
||||
v-model="datas.commoditycornertype"
|
||||
class="radi1"
|
||||
v-show="datas.commoditycorner"
|
||||
>
|
||||
<el-radio :label="index" v-for="(item, index) in marker" :key="index">{{
|
||||
item
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-form-item class="lef" label="颜色">
|
||||
<el-color-picker
|
||||
v-model="datas.commodityTagColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="位置">
|
||||
<el-radio-group v-model="datas.tagPosition" class="radi1">
|
||||
<el-radio
|
||||
:label="index"
|
||||
v-for="(item, index) in tagPosition"
|
||||
:key="index"
|
||||
>{{ item }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传商品 -->
|
||||
<uploadCommodity
|
||||
ref="upload"
|
||||
@uploadListInformation="uploadListInformation"
|
||||
/>
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="uploadImg" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadCommodity from '../../uploadCommodity' //图片上传
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'listswitchingstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
components: { vuedraggable, uploadCommodity, uploadimg },
|
||||
data() {
|
||||
let kon = (rule, value, callback) => {
|
||||
if (value.length === 0) callback(new Error('请输入有效数字'))
|
||||
}
|
||||
return {
|
||||
color1: '#07c160',
|
||||
moditystyles: [
|
||||
/* 商品样式 */
|
||||
{
|
||||
text: '无边白底',
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
text: '卡片投影',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
text: '描边白底',
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
text: '无边透明底',
|
||||
type: 3,
|
||||
},
|
||||
],
|
||||
commodityTypes: [
|
||||
{
|
||||
icon: 'icon-datumoshi',
|
||||
type: 0,
|
||||
content: '大图模式',
|
||||
},
|
||||
{
|
||||
icon: 'icon-commodity-yihangliangge',
|
||||
type: 1,
|
||||
content: '一行两个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yihangsange',
|
||||
type: 2,
|
||||
content: '一行三个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-commodity-xiangxiliebiao',
|
||||
type: 3,
|
||||
content: '详细列表',
|
||||
},
|
||||
{
|
||||
icon: 'icon-icon_shangpintu_yidaliangxiao',
|
||||
type: 4,
|
||||
content: '一大两小',
|
||||
},
|
||||
{
|
||||
icon: 'icon-xuanzemokuai-daohanghengxianghuadong',
|
||||
type: 5,
|
||||
content: '横向滑动',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
textWeight: [{ required: true, validator: kon, trigger: 'blur' }],
|
||||
},
|
||||
marker: ['新品', '热卖', 'NEW', 'HOT'],
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
imgText: null, //当前选中的类型
|
||||
imgNumber: null, //第几个数组
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
options: [], // 更多跳转链接
|
||||
moreName: null,
|
||||
tagPosition: [
|
||||
// 标记位置
|
||||
'左上',
|
||||
'左下',
|
||||
'右上',
|
||||
'右下',
|
||||
],
|
||||
uploadImgDataType: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// if(this.datas.moreUrl) {
|
||||
// this.moreName = this.datas.moreUrl[1]
|
||||
// }
|
||||
// this.changeImageListData()
|
||||
},
|
||||
methods: {
|
||||
changeImageListData() {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
console.log(shopCommodity, '--------------listswitching datas')
|
||||
// let newList = []
|
||||
// this.datas.imageList.forEach((element) => {
|
||||
// newList.push(shopCommodity[element.type][element.id])
|
||||
// })
|
||||
|
||||
// this.datas.imageList = newList
|
||||
},
|
||||
/* 上传图片弹框 */
|
||||
dialogVisibleshow(text, number) {
|
||||
this.$refs.upload.showUpload()
|
||||
this.imgText = text
|
||||
this.number = number
|
||||
},
|
||||
/* 添加分组 */
|
||||
addGrouping() {
|
||||
this.datas.commoditylisttypetab.push({
|
||||
text: '分组',
|
||||
imageList: [],
|
||||
})
|
||||
},
|
||||
// 提交
|
||||
uploadListInformation(res) {
|
||||
if (this.imgText === 'imageList') {
|
||||
this.datas.imageList.push(res)
|
||||
} else {
|
||||
this.datas.commoditylisttypetab[this.number].imageList.push(res)
|
||||
}
|
||||
|
||||
this.imgText = null
|
||||
this.number = null
|
||||
},
|
||||
|
||||
showUpload(type) {
|
||||
this.uploadImgDataType = type
|
||||
this.$refs.uploadImg.showUpload()
|
||||
},
|
||||
|
||||
// 背景图
|
||||
uploadInformation(res) {
|
||||
console.log(res, '---------uploadImg')
|
||||
if (this.uploadImgDataType === '0') {
|
||||
this.datas.bgImg = res
|
||||
console.log(this.datas.bgImg, '---------uploadImg')
|
||||
}
|
||||
},
|
||||
|
||||
// 清空背景图片
|
||||
clear() {
|
||||
this.datas.bgImg = ''
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
deleteimg(index) {
|
||||
this.datas.imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除分组里的图片 */
|
||||
delecommodityimg(ind, index) {
|
||||
this.datas.commoditylisttypetab[ind].imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除分组 */
|
||||
delecommoditylisttypetab(index) {
|
||||
this.datas.commoditylisttypetab.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 获取下拉框内容 */
|
||||
getOption() {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
},
|
||||
|
||||
selectMore() {
|
||||
this.datas.showMore = true
|
||||
this.datas.moreUrl = this.moreName
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
styleText() {
|
||||
let modeType
|
||||
if (this.datas.commodityType === 0) return (modeType = '大图模式')
|
||||
if (this.datas.commodityType === 1) return (modeType = '一行两个')
|
||||
if (this.datas.commodityType === 2) return (modeType = '一行三个')
|
||||
if (this.datas.commodityType === 3) return (modeType = '详细列表')
|
||||
if (this.datas.commodityType === 4) return (modeType = '一大两小')
|
||||
if (this.datas.commodityType === 5) return (modeType = '横向滑动')
|
||||
|
||||
return modeType
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.listswitchingstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-head-pic {
|
||||
color: #ababab;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-bg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.shop-head-pic-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.el-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 列表样式 */
|
||||
.commodityType {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebedf0;
|
||||
color: #979797;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品样式 */
|
||||
.moditystyle {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
span {
|
||||
width: 86px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ebedf0;
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 位置 */
|
||||
.weiz {
|
||||
text-align: right;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 单选框 */
|
||||
/deep/.radi1 {
|
||||
border-top: 1px solid #f7f8fa;
|
||||
border-bottom: 1px solid #f7f8fa;
|
||||
padding: 12px 0;
|
||||
.el-radio {
|
||||
margin: 10px 25px 7px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
margin-bottom: 20px;
|
||||
/deep/.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,410 @@
|
||||
<!-- 已被弃用 该组件为抽离的 魔方组件种商品上传 -->
|
||||
<template>
|
||||
<div class="productUpload">
|
||||
<!-- 分类名称 -->
|
||||
<!-- <section v-for="(item, index) in datas.commoditylisttypetab" :key="index">
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<el-input v-model="item.text" class="tit" style="width: 100px" placeholder="请输入分组名称" size="mini" />
|
||||
<i @click="delecommoditylisttypetab(index)" class="el-icon-delete" style="cursor: pointer;padding: 2px 4px;fnot-size: 12px;margin-left: 200px;color: red;" />
|
||||
|
||||
<vuedraggable v-model="item.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section class="imgBanner" v-for="(item, ind) in item.imageList" :key="item+ind">
|
||||
<i class="el-icon-circle-close" @click="delecommodityimg(index, ind)" />
|
||||
<div class="imag">
|
||||
<img draggable="false" :src="item.coverUrl" alt="">
|
||||
</div>
|
||||
<div class="imgText">
|
||||
<div>
|
||||
<el-input disabled="disabled" style="width: 65%" v-model="item.name" size="mini" />
|
||||
<el-input disabled="disabled" type="number" style="width: 35%" v-model.number="item.price" size="mini" />
|
||||
</div>
|
||||
<el-input disabled="disabled" v-model="item.introduce" size="mini" />
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
|
||||
<el-button @click="dialogVisibleshow('commoditylisttypetab', index)" class="uploadImg" type="primary" plain><i class="el-icon-plus" />点击添加商品</el-button>
|
||||
</section> -->
|
||||
<vuedraggable v-model="datas.commoditylisttypetab" v-bind="dragOptions">
|
||||
<section
|
||||
class="magiccubestyleList"
|
||||
v-for="(item, index) in datas.commoditylisttypetab"
|
||||
:key="index"
|
||||
>
|
||||
<div class="magiccubestyleList-top">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
class="tit"
|
||||
style="width: 100px"
|
||||
placeholder="请输入分组名称"
|
||||
size="mini"
|
||||
/>
|
||||
<i
|
||||
@click="delecommoditylisttypetab(index)"
|
||||
class="el-icon-delete"
|
||||
style="
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
fnot-size: 12px;
|
||||
margin-left: 200px;
|
||||
color: red;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 拖拽 -->
|
||||
<vuedraggable v-model="item.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, ind) in item.imageList"
|
||||
:key="item + ind"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="imag" @click="$refs.upload.showUpload()">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!item.src"
|
||||
src="../../../assets/images/add.png"
|
||||
style="border: 1px solid #e5e5e5"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else style="position: relative">
|
||||
<img draggable="false" :src="item.src" alt="" />
|
||||
<p
|
||||
style="
|
||||
width: 100%;
|
||||
background: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-size: 5px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-hright: 20px;
|
||||
"
|
||||
>
|
||||
点击跟换图片图片
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 删除 -->
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index, ind)" />
|
||||
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<div class="imgText-in">
|
||||
<el-input
|
||||
placeholder="请输入商品标题"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
v-model="item.httpType"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
v-if="item.httpType !== '11'"
|
||||
v-model="item.http"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId"
|
||||
@visible-change="changeType(item.httpType)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- 输入外部链接 -->
|
||||
<el-input
|
||||
v-if="item.httpType === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="item.externalLink"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
|
||||
<!-- 添加商品 -->
|
||||
<el-button
|
||||
@click="addproduct(index)"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加商品</el-button
|
||||
>
|
||||
</section>
|
||||
</vuedraggable>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
imgActive: 0, //默认选中第一个图片
|
||||
options: [],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], //跳转类型
|
||||
}
|
||||
},
|
||||
|
||||
props: ['datas'],
|
||||
|
||||
created() {
|
||||
console.log(this.datas)
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* 删除分组 */
|
||||
delecommoditylisttypetab(index) {
|
||||
this.datas.commoditylisttypetab.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除分组里的图片 */
|
||||
delecommodityimg(ind, index) {
|
||||
this.datas.commoditylisttypetab[ind].imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
deleteimg(index, ind) {
|
||||
this.datas.commoditylisttypetab[index].imageList.splice(ind, 1)
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
changeType(res) {
|
||||
console.log(res)
|
||||
if (res === '1' || res === '2' || res === '6' || res === '3') {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
this.$httpApi.newsList({ type: res }).then((res) => {
|
||||
this.activ = 0
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data
|
||||
})
|
||||
} else if (res === '10') {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
}
|
||||
},
|
||||
changeId(res) {
|
||||
if (res.component) delete res.component
|
||||
this.datas.imageList[this.imgActive].http = res
|
||||
},
|
||||
|
||||
/* 替换 */
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList[this.imgActive].src = res
|
||||
},
|
||||
|
||||
// 添加商品
|
||||
addproduct(index) {
|
||||
let params = {
|
||||
httpType: '1', // 跳转类型
|
||||
coverUrl: null, // 商品图片
|
||||
id: null, // 跳转id
|
||||
externalLink: null, // 外链地址
|
||||
}
|
||||
this.datas.commoditylisttypetab[index].imageList.push(params)
|
||||
},
|
||||
},
|
||||
|
||||
components: { vuedraggable, uploadimg },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 商品列表 */
|
||||
.magiccubestyleList {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 0px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.magiccubestyleList-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tit {
|
||||
/deep/.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,758 @@
|
||||
<template>
|
||||
<div class="magiccubestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<p style="color: #d40000; font-size: 14px">魔方布局</p>
|
||||
<p style="color: #969799; font-size: 12px; margin: 5px 0">
|
||||
选定布局区域，在下方添加图片
|
||||
</p>
|
||||
|
||||
<!-- 图片布局 -->
|
||||
<!-- 一行二个 -->
|
||||
<section class="buju buju0" v-show="datas.rubiksCubeType === 0">
|
||||
<div
|
||||
@click="imgActive = index - 1"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
class="rubiksCubeType0 rubiksCubeType"
|
||||
:class="[index - 1 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index - 1].src">
|
||||
宽度375像素
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一行三个 -->
|
||||
<section class="buju buju0" v-show="datas.rubiksCubeType === 1">
|
||||
<div
|
||||
@click="imgActive = index - 1"
|
||||
v-for="index in 3"
|
||||
:key="index"
|
||||
class="rubiksCubeType1 rubiksCubeType"
|
||||
:class="[index - 1 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index - 1].src">
|
||||
宽度250像素
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一行四个 -->
|
||||
<section class="buju buju0" v-show="datas.rubiksCubeType === 2">
|
||||
<div
|
||||
@click="imgActive = index - 1"
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
class="rubiksCubeType2 rubiksCubeType"
|
||||
:class="[index - 1 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index - 1].src">
|
||||
宽度188像素
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 二左二右 -->
|
||||
<section class="buju buju0" v-show="datas.rubiksCubeType === 3">
|
||||
<div
|
||||
@click="imgActive = index - 1"
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
class="rubiksCubeType3 rubiksCubeType"
|
||||
:class="[index - 1 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index - 1].src">
|
||||
375x375像素<br />或同等比例
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index - 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一左二右 -->
|
||||
<section class="buju buju4" v-show="datas.rubiksCubeType === 4">
|
||||
<div
|
||||
@click="imgActive = 0"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
style="width: 163px; height: 300px"
|
||||
:class="[0 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[0].src">
|
||||
375x750像素<br />或同等比例
|
||||
</div>
|
||||
<img draggable="false" v-else :src="datas.imageList[0].src" alt="" />
|
||||
<div></div>
|
||||
</div>
|
||||
<div style="display: inline-flex; flex-direction: column">
|
||||
<div
|
||||
@click="imgActive = index"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
:class="[index === imgActive ? 'active' : '']"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index].src">
|
||||
375x375像素<br />或同等比例
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
/>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一上二下 -->
|
||||
<section class="buju buju5" v-show="datas.rubiksCubeType === 5">
|
||||
<div
|
||||
@click="imgActive = 0"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
style="width: 325px; height: 163px"
|
||||
:class="[0 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[0].src">
|
||||
375x750像素<br />或同等比例
|
||||
</div>
|
||||
<img draggable="false" v-else :src="datas.imageList[0].src" alt="" />
|
||||
<div></div>
|
||||
</div>
|
||||
<div style="display: inline-flex">
|
||||
<div
|
||||
@click="imgActive = index"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
:class="[index === imgActive ? 'active' : '']"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index].src">
|
||||
375x375像素<br />或同等比例
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index].src"
|
||||
alt=""
|
||||
style="width: 163px; height: 163px"
|
||||
/>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 一左三右 -->
|
||||
<section class="buju buju4" v-show="datas.rubiksCubeType === 6">
|
||||
<!-- 第一张图片 -->
|
||||
<div
|
||||
@click="imgActive = 0"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
style="width: 163px; height: 325px"
|
||||
:class="[0 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[0].src">
|
||||
375x750像素<br />或同等比例
|
||||
</div>
|
||||
<img draggable="false" v-else :src="datas.imageList[0].src" alt="" />
|
||||
</div>
|
||||
<div style="display: inline-flex; flex-direction: column">
|
||||
<!-- 第二张图片 -->
|
||||
<div
|
||||
@click="imgActive = 1"
|
||||
class="rubiksCubeType4 rubiksCubeType"
|
||||
:class="[1 === imgActive ? 'active' : '']"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[1].src">
|
||||
375x375像素<br />或同等比例
|
||||
</div>
|
||||
<img draggable="false" v-else :src="datas.imageList[1].src" alt="" />
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="rubiksCubeType4 rubiksCubeType">
|
||||
<div
|
||||
@click="imgActive = index + 1"
|
||||
:class="[index + 1 === imgActive ? 'active' : '']"
|
||||
style="
|
||||
display: inline-flex;
|
||||
width: 82px;
|
||||
height: 163px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #ebedf0;
|
||||
"
|
||||
v-for="index in 2"
|
||||
:key="index"
|
||||
>
|
||||
<div style="font-size: 12px" v-if="!datas.imageList[index + 1].src">
|
||||
188x375像素<br />或同等比例
|
||||
</div>
|
||||
<img
|
||||
draggable="false"
|
||||
v-else
|
||||
:src="datas.imageList[index + 1].src"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p style="color: #d40000; font-size: 12px; margin-top: 10px">请添加图片</p>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<section
|
||||
class="magiccubestyleList"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="index"
|
||||
v-show="imgActive === index"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="imag" @click="$refs.upload.showUpload()">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!item.src"
|
||||
src="../../../assets/images/add.png"
|
||||
style="border: 1px solid #e5e5e5"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else style="position: relative">
|
||||
<img draggable="false" :src="item.src" alt="" />
|
||||
<p
|
||||
style="
|
||||
width: 100%;
|
||||
background: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-size: 5px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-hright: 20px;
|
||||
"
|
||||
>
|
||||
点击跟换图片图片
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item label="选择模板" class="lef">
|
||||
<p style="color: #000">{{ styleText }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 商品样式选择 -->
|
||||
<div class="rubiksCubeType">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.content"
|
||||
placement="bottom"
|
||||
v-for="(item, index) in rubiksCubeTypes"
|
||||
:key="index"
|
||||
>
|
||||
<span
|
||||
class="iconfont"
|
||||
style="font-size: 21px"
|
||||
:class="[
|
||||
item.linktype === datas.rubiksCubeType ? 'active' : '',
|
||||
item.icon,
|
||||
]"
|
||||
@click="datas.rubiksCubeType = index"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px" />
|
||||
|
||||
<!-- 页面边距 -->
|
||||
<el-form-item label="页面边距" class="lef">
|
||||
<el-slider
|
||||
v-model="datas.pageMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 图片间隙 -->
|
||||
<el-form-item label="图片间隙" class="lef">
|
||||
<el-slider
|
||||
v-model="datas.imgMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'magiccubestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
components: { uploadimg },
|
||||
data() {
|
||||
return {
|
||||
rubiksCubeTypes: [
|
||||
{
|
||||
icon: 'icon-yihangerge',
|
||||
type: 0,
|
||||
content: '一行二个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yihangsange',
|
||||
type: 1,
|
||||
content: '一行三个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yihangsige',
|
||||
type: 2,
|
||||
content: '一行四个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-erzuoeryou',
|
||||
type: 3,
|
||||
content: '二左二右',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yizuoeryou',
|
||||
type: 4,
|
||||
content: '一左二右',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yishangerxia',
|
||||
type: 5,
|
||||
content: '一上二下',
|
||||
},
|
||||
{
|
||||
icon: 'icon-yizuosanyou',
|
||||
type: 6,
|
||||
content: '一左三右',
|
||||
},
|
||||
],
|
||||
imgActive: 0, //默认选中第一个图片
|
||||
options: [], //选择
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], //跳转类型
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// eslint-disable-next-line vue/return-in-computed-property
|
||||
styleText() {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
this.imgActive = 0
|
||||
if (this.datas.rubiksCubeType === 0) return '一行二个'
|
||||
if (this.datas.rubiksCubeType === 1) return '一行三个'
|
||||
if (this.datas.rubiksCubeType === 2) return '一行四个'
|
||||
if (this.datas.rubiksCubeType === 3) return '二左二右'
|
||||
if (this.datas.rubiksCubeType === 4) return '一左二右'
|
||||
if (this.datas.rubiksCubeType === 5) return '一上二下'
|
||||
if (this.datas.rubiksCubeType === 6) return '一左三右'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(
|
||||
linkType,
|
||||
this.options
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.magiccubestyle {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 布局 */
|
||||
.buju {
|
||||
&.buju0 {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&.buju4 {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.active {
|
||||
background: #e0edff;
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
z-index: 2;
|
||||
}
|
||||
.rubiksCubeType {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebedf0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #7d7e80;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
background: #e0edff;
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
z-index: 2;
|
||||
}
|
||||
&.rubiksCubeType0 {
|
||||
width: 163px;
|
||||
margin: 10px 0;
|
||||
// height: 200px;
|
||||
img {
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType1 {
|
||||
width: 109px;
|
||||
margin: 10px 0;
|
||||
height: 150px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType2 {
|
||||
width: 82px;
|
||||
margin: 10px 0;
|
||||
height: 150px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType3 {
|
||||
width: 163px;
|
||||
margin: 10px 0;
|
||||
height: 163px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.rubiksCubeType4 {
|
||||
width: 163px;
|
||||
height: 163px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lef {
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.magiccubestyleList {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 0px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
.rubiksCubeType {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebedf0;
|
||||
color: #979797;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="noticestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 公告 -->
|
||||
<el-form
|
||||
label-width="90px"
|
||||
:model="datas"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
class="lef"
|
||||
>
|
||||
<el-form-item
|
||||
label="公告"
|
||||
:hide-required-asterisk="true"
|
||||
prop="noticeText"
|
||||
>
|
||||
<el-input v-model="datas.noticeText" placeholder="请输入公告" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色" class="lef">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 文字颜色 -->
|
||||
<el-form-item label="文字颜色" class="lef">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.textColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'noticestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
//校验表单输入
|
||||
noticeText: [
|
||||
//页面名称
|
||||
{ required: true, message: '请输入公告', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.noticestyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="onlineservicestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'onlineservicestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.onlineservicestyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="personalizedrecommendationstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'personalizedrecommendationstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.personalizedrecommendationstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,604 @@
|
||||
<template>
|
||||
<div class="pictureadsstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>图片广告</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item label="选择模板" class="lef">
|
||||
<p style="color: #000">{{ styleText }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 轮播图选择 -->
|
||||
<div class="swiperType">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="一行一个"
|
||||
placement="bottom"
|
||||
>
|
||||
<span
|
||||
class="iconfont icon-yihangyige"
|
||||
style="font-size: 21px"
|
||||
:class="datas.swiperType === 0 ? 'active' : ''"
|
||||
@click="datas.swiperType = 0"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="轮播海报"
|
||||
placement="bottom"
|
||||
>
|
||||
<span
|
||||
class="iconfont icon-icon_tupian_lunbohaibao"
|
||||
style="font-size: 20px"
|
||||
:class="datas.swiperType === 1 ? 'active' : ''"
|
||||
@click="datas.swiperType = 1"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="多图单行"
|
||||
placement="bottom"
|
||||
>
|
||||
<span
|
||||
class="iconfont icon-daohanghengxianghuadong"
|
||||
style="font-size: 24px"
|
||||
:class="datas.swiperType === 2 ? 'active' : ''"
|
||||
@click="datas.swiperType = 2"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="立体轮播"
|
||||
placement="bottom"
|
||||
>
|
||||
<span
|
||||
class="iconfont icon-xiaotuhengxianghuadong"
|
||||
style="font-size: 24px"
|
||||
:class="datas.swiperType === 3 ? 'active' : ''"
|
||||
@click="datas.swiperType = 3"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 下划线 -->
|
||||
<div class="bor" />
|
||||
|
||||
<h5 style="color: #000; font-size: 14px">添加图片</h5>
|
||||
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
||||
拖动选中的导航可对其排序
|
||||
</p>
|
||||
|
||||
<!-- 图片广告 -->
|
||||
<div v-if="datas.imageList[0]">
|
||||
<vuedraggable v-model="datas.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
||||
<!-- 图片 -->
|
||||
<div class="imag">
|
||||
<img :src="item.src" alt draggable="false" />
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
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">
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
></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"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
<!-- 上传图片 -->
|
||||
<el-button
|
||||
@click="$refs.upload.showUpload()"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
>
|
||||
<i class="el-icon-plus" />点击添加图片
|
||||
</el-button>
|
||||
|
||||
<!-- 下划线 -->
|
||||
<div class="bor"></div>
|
||||
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="一行个数"
|
||||
v-show="datas.swiperType === 2"
|
||||
>
|
||||
<!-- 单选框 -->
|
||||
<el-radio-group v-model="datas.rowindividual" class="radi">
|
||||
<el-radio :label="2">2个</el-radio>
|
||||
<el-radio :label="3">3个</el-radio>
|
||||
<el-radio :label="4">4个</el-radio>
|
||||
<el-radio :label="5">5个</el-radio>
|
||||
<el-radio :label="6">6个</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片倒角 -->
|
||||
<el-form-item label="分页类型" class="lef borrediu">
|
||||
<el-radio-group v-model="datas.pagingType" class="radi1">
|
||||
<el-radio :label="0">不显示</el-radio>
|
||||
<el-radio label="bullets">样式一</el-radio>
|
||||
<el-radio label="fraction">样式二</el-radio>
|
||||
<el-radio label="progressbar">样式三</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片倒角 -->
|
||||
<el-form-item label="图片倒角" class="lef borrediu">
|
||||
<el-slider
|
||||
v-model="datas.borderRadius"
|
||||
:max="30"
|
||||
input-size="mini"
|
||||
show-input
|
||||
></el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 页面边距 -->
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="页面边距"
|
||||
v-show="datas.swiperType === 0"
|
||||
>
|
||||
<el-slider
|
||||
v-model="datas.pageMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
></el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片边距 -->
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="图片边距"
|
||||
v-show="datas.swiperType === 0 || datas.swiperType === 2"
|
||||
>
|
||||
<el-slider
|
||||
v-model="datas.imageMargin"
|
||||
:max="20"
|
||||
input-size="mini"
|
||||
show-input
|
||||
></el-slider>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'pictureadsstyle',
|
||||
components: { vuedraggable, uploadimg },
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [], //选择
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList.push({
|
||||
src: res,
|
||||
text: '',
|
||||
http: {},
|
||||
})
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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: {
|
||||
styleText() {
|
||||
let data
|
||||
if (this.datas.swiperType === 0) return (data = '一行一个')
|
||||
if (this.datas.swiperType === 1) return (data = '轮播海报')
|
||||
if (this.datas.swiperType === 2) return (data = '多图单行')
|
||||
if (this.datas.swiperType === 3) return (data = '立体模式')
|
||||
if (this.datas.swiperType === 4) return (data = '导航横向滑动')
|
||||
|
||||
return data
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.pictureadsstyle {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.swiperType {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
background: #ebedf0;
|
||||
color: #979797;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 圆角 */
|
||||
.borrediu {
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
background: #ebedf0;
|
||||
color: #979797;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.radi .el-radio {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/deep/.radi1 .el-radio {
|
||||
margin-right: 7px;
|
||||
.el-radio__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片广告列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
.select-type {
|
||||
display: flex;
|
||||
/deep/.el-select {
|
||||
.el-input {
|
||||
input {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="richtextstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<el-form label-width="80px" :model="datas" size="small">
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色">
|
||||
<!-- 背景颜色 -->
|
||||
<el-color-picker
|
||||
v-model="datas.backColor"
|
||||
show-alpha
|
||||
style="float: right"
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="edit">
|
||||
<editor v-model="datas.myValue" :init="init" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
import 'tinymce/themes/silver'
|
||||
import 'tinymce/skins/ui/oxide/skin.min.css'
|
||||
import 'tinymce/plugins/image'
|
||||
import 'tinymce/plugins/lists'
|
||||
import 'tinymce/plugins/advlist'
|
||||
import 'tinymce/plugins/anchor'
|
||||
import 'tinymce/plugins/autosave'
|
||||
import 'tinymce/plugins/code'
|
||||
import 'tinymce/plugins/paste'
|
||||
import 'tinymce/plugins/directionality'
|
||||
import 'tinymce/plugins/link'
|
||||
import 'tinymce/plugins/fullscreen'
|
||||
import 'tinymce/plugins/hr'
|
||||
import 'tinymce/plugins/insertdatetime'
|
||||
import 'tinymce/plugins/pagebreak'
|
||||
import 'tinymce/plugins/preview'
|
||||
import 'tinymce/plugins/print'
|
||||
import 'tinymce/plugins/save'
|
||||
import 'tinymce/plugins/searchreplace'
|
||||
import 'tinymce/plugins/table'
|
||||
import 'tinymce/plugins/wordcount'
|
||||
import 'tinymce/plugins/toc'
|
||||
import 'tinymce/plugins/charmap'
|
||||
|
||||
export default {
|
||||
name: 'richtextstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
components: {
|
||||
Editor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
init: {
|
||||
height: 550,
|
||||
language_url: '/langs/zh_CN.js',
|
||||
language: 'zh_CN',
|
||||
plugins: [
|
||||
'charmap',
|
||||
'toc',
|
||||
'wordcount',
|
||||
'table',
|
||||
'searchreplace',
|
||||
'image',
|
||||
'link',
|
||||
'lists',
|
||||
'advlist',
|
||||
'anchor',
|
||||
'autosave',
|
||||
'code',
|
||||
'paste',
|
||||
'directionality',
|
||||
'fullscreen',
|
||||
'hr',
|
||||
'insertdatetime',
|
||||
'pagebreak',
|
||||
'preview',
|
||||
'print',
|
||||
'save',
|
||||
],
|
||||
image_advtab: true,
|
||||
toolbar: [
|
||||
'fullscreen code bold italic underline strikethrough alignleft aligncenter alignright alignjustify \
|
||||
outdent indent image link removeformat cut copy paste ltr rtl anchor restoredraft pagebreak save \
|
||||
table tabledelete tableprops tablerowprops tablecellprops tableinsertrowbefore tableinsertrowafter tabledeleterow tableinsertcolbefore tableinsertcolafter tabledeletecol \
|
||||
backcolor formatselect fontselect fontsizeselect forecolor \
|
||||
subscript superscript hr preview print searchreplace wordcount toc charmap bullist numlist insertdatetime undo redo',
|
||||
],
|
||||
theme: 'silver', //主题
|
||||
menubar: false,
|
||||
images_upload_handler: (blobInfo, succFun, failFun) => {
|
||||
var formData = new FormData()
|
||||
|
||||
formData.append('path', 'test/')
|
||||
formData.append('file', blobInfo.blob(), blobInfo.blob().name)
|
||||
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.withCredentials = false
|
||||
xhr.open('POST', `${window.global_config.BASE_URL}upload/miniShop`)
|
||||
|
||||
xhr.onload = function () {
|
||||
// 获取数据
|
||||
var res = JSON.parse(xhr.response)
|
||||
if (res.success != true) return failFun('HTTP Error: ' + res.msg)
|
||||
succFun(res.result)
|
||||
}
|
||||
xhr.send(formData)
|
||||
|
||||
// this.$httpApi.uploadImgs(formData).then(res => {
|
||||
// if(res.success != true) return failFun('HTTP Error: ' + res.msg)
|
||||
// succFun(res.result)
|
||||
// })
|
||||
},
|
||||
},
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.richtextstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改富文本样式 */
|
||||
/deep/.tox {
|
||||
border: 1px solid #ebedf0 !important;
|
||||
}
|
||||
/deep/.tox .tox-tbtn {
|
||||
height: 25px !important;
|
||||
margin: 0 2px !important;
|
||||
width: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/deep/.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
|
||||
width: auto !important;
|
||||
}
|
||||
/deep/.tox .tox-toolbar,
|
||||
.tox .tox-toolbar__primary,
|
||||
.tox .tox-toolbar__overflow {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/deep/.tox .tox-toolbar__group {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
/deep/.tox .tox-tbtn--enabled,
|
||||
.tox .tox-tbtn--enabled:hover {
|
||||
background: none !important;
|
||||
/deep/svg {
|
||||
fill: #155bd4 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="storeinformationstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<p style="color: #323233; font-size: 14px">背景图片</p>
|
||||
<div style="height: 10px"></div>
|
||||
<p style="color: #969799; font-size: 12px">
|
||||
建议尺寸：750x370 像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面
|
||||
</p>
|
||||
|
||||
<div style="height: 10px"></div>
|
||||
<!-- 背景图 -->
|
||||
<div class="backgroundImg" @click="uploadI('bakcgroundImg')">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!datas.bakcgroundImg"
|
||||
src="../../../assets/images/backimg.png"
|
||||
alt=""
|
||||
/>
|
||||
<img draggable="false" v-else :src="datas.bakcgroundImg" alt="" />
|
||||
<p>更换图片</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px"></div>
|
||||
<p style="color: #323233; font-size: 14px">店铺头像</p>
|
||||
|
||||
<div style="height: 10px"></div>
|
||||
<!-- 店铺头像 -->
|
||||
<div class="backgroundImg" @click="uploadI('headPortrait')">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!datas.headPortrait"
|
||||
src="../../../assets/images/headerimg.png"
|
||||
alt=""
|
||||
/>
|
||||
<img draggable="false" v-else :src="datas.headPortrait" alt="" />
|
||||
<p>更换图片</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="margin: 20px 0; height: 1px; background: rgb(235, 237, 240)"
|
||||
></div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small" :rules="rules">
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item label="选择模板" class="lef"> </el-form-item>
|
||||
|
||||
<!-- 商品样式选择 -->
|
||||
<el-radio-group v-model="datas.rubiksCubeType" class="select-sp">
|
||||
<el-radio
|
||||
style="margin-top: 10px; margin-right: 10px"
|
||||
:label="item.type"
|
||||
v-for="(item, index) in rubiksCubeTypes"
|
||||
:key="index"
|
||||
>{{ item.content }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
|
||||
<div style="height: 30px"></div>
|
||||
|
||||
<!-- 店铺名称 -->
|
||||
<el-form-item label="店铺名称" class="lef" prop="name">
|
||||
<el-input
|
||||
v-model="datas.name"
|
||||
placeholder="请填写店铺名称"
|
||||
maxlength="20"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 店铺名称 -->
|
||||
<el-form-item label="优惠信息" class="lef">
|
||||
<el-input
|
||||
v-model="datas.Discount"
|
||||
placeholder="请填写优惠信息也可不填"
|
||||
maxlength="45"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'storeinformationstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
danqian: '', //当前选中的是背景还是头像
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
|
||||
},
|
||||
rubiksCubeTypes: [
|
||||
{
|
||||
type: 0,
|
||||
content: '样式一',
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
content: '样式二',
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
content: '样式三',
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
content: '样式四',
|
||||
},
|
||||
{
|
||||
type: 4,
|
||||
content: '样式五',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 上传图片 */
|
||||
uploadI(res) {
|
||||
this.danqian = res
|
||||
this.$refs.upload.showUpload()
|
||||
},
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas[this.danqian] = res
|
||||
},
|
||||
},
|
||||
components: { uploadimg },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.storeinformationstyle {
|
||||
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;
|
||||
}
|
||||
/* 背景图 */
|
||||
.backgroundImg {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
background: #f2f4f6;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.lef {
|
||||
/deep/.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.select-sp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,762 @@
|
||||
<template>
|
||||
<div class="storenotecardstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="datas" size="small" :rules="rules">
|
||||
<el-form-item label="活动名称" class="lef">
|
||||
<el-input v-model="datas.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<!-- 标题内容 -->
|
||||
<el-form-item class="lef" label="选择模板">
|
||||
<p style="color: #000">{{ styleText }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 卡片样式选择 -->
|
||||
<div class="commodityType">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.content"
|
||||
placement="bottom"
|
||||
v-for="(item, index) in commodityTypes"
|
||||
:key="index"
|
||||
>
|
||||
<span
|
||||
class="iconfont"
|
||||
style="font-size: 21px"
|
||||
:class="[
|
||||
item.type === datas.commodityType ? 'active' : '',
|
||||
item.icon,
|
||||
]"
|
||||
@click="datas.commodityType = index"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<h5 style="color: #000; font-size: 14px">添加卡片</h5>
|
||||
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
||||
鼠标拖拽调整卡片顺序
|
||||
</p>
|
||||
|
||||
<!-- 图片广告 -->
|
||||
<div v-if="datas.imageList[0]">
|
||||
<vuedraggable v-model="datas.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, index) in datas.imageList"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
||||
<!-- 图片 -->
|
||||
<div class="imag">
|
||||
<img :src="item.src" alt="" draggable="false" />
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
placeholder="笔记标题"
|
||||
size="mini"
|
||||
/>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgTextChild">
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="iteml in optionsType"
|
||||
:key="iteml.name"
|
||||
:label="iteml.name"
|
||||
:value="iteml.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<el-button
|
||||
@click="$refs.upload.showUpload()"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加卡片</el-button
|
||||
>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 卡片样式 -->
|
||||
<el-form-item label="卡片样式" class="lef" />
|
||||
<!-- 卡片样式选择 -->
|
||||
<div class="moditystyle">
|
||||
<span
|
||||
v-for="(item, index) in moditystyles"
|
||||
:key="index"
|
||||
:class="item.type == datas.moditystyle ? 'active' : ''"
|
||||
@click="datas.moditystyle = index"
|
||||
>
|
||||
{{ item.text }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<!-- 文本粗细 -->
|
||||
<el-form-item
|
||||
class="lef"
|
||||
label="文本粗细"
|
||||
prop="textWeight"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
v-model.number="datas.textWeight"
|
||||
placeholder="请输入文本粗细"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" />
|
||||
|
||||
<!-- 图片倒角 -->
|
||||
<el-form-item label="图片倒角" class="lef borrediu">
|
||||
<el-slider
|
||||
v-model="datas.borderRadius"
|
||||
:max="30"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<div style="height: 10px" v-if="datas.commodityType === 0" />
|
||||
|
||||
<!-- 显示位置 -->
|
||||
<el-form-item
|
||||
label="标题位置"
|
||||
class="lef"
|
||||
v-if="datas.commodityType === 0"
|
||||
>
|
||||
<div class="weiz">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="上方"
|
||||
placement="bottom"
|
||||
>
|
||||
<i
|
||||
:class="datas.positions === 'top' ? 'active' : ''"
|
||||
class="iconfont icon-shang"
|
||||
@click="datas.positions = 'top'"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="下方"
|
||||
placement="bottom"
|
||||
>
|
||||
<i
|
||||
:class="datas.positions === 'bottom' ? 'active' : ''"
|
||||
class="iconfont icon-jiantou"
|
||||
@click="datas.positions = 'bottom'"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="bor" />
|
||||
|
||||
<!--笔记标签 -->
|
||||
<el-form-item class="lef" label="笔记标签">
|
||||
{{ datas.noteLabels ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.noteLabels" />
|
||||
</el-form-item>
|
||||
|
||||
<!--阅读数 -->
|
||||
<el-form-item class="lef" label="阅读数">
|
||||
{{ datas.readingNumber ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.readingNumber" />
|
||||
</el-form-item>
|
||||
|
||||
<!--点赞数 -->
|
||||
<el-form-item class="lef" label="点赞数">
|
||||
{{ datas.praisePoints ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.praisePoints" />
|
||||
</el-form-item>
|
||||
|
||||
<!--查看更多 -->
|
||||
<el-form-item class="lef" label="查看更多">
|
||||
<!-- {{datas.viewMore1 ? '显示' : '隐藏'}} -->
|
||||
<el-checkbox v-model="datas.viewMore1"
|
||||
>头部{{ datas.viewMore1 ? '显示' : '隐藏' }}</el-checkbox
|
||||
>
|
||||
<el-checkbox v-model="datas.viewMore2"
|
||||
>尾部{{ datas.viewMore2 ? '显示' : '隐藏' }}</el-checkbox
|
||||
>
|
||||
<div class="imgText1" v-show="datas.viewMore1 || datas.viewMore2">
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="datas.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType1"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
name: 'storenotecardstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
components: { vuedraggable, uploadimg },
|
||||
data() {
|
||||
let kon = (rule, value, callback) => {
|
||||
if (value.length === 0) callback(new Error('请输入有效数字'))
|
||||
}
|
||||
return {
|
||||
optionsType1: [
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options1: [],
|
||||
moditystyles: [
|
||||
/* 卡片样式 */
|
||||
{
|
||||
text: '无边白底',
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
text: '卡片投影',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
text: '描边白底',
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
text: '无边透明底',
|
||||
type: 3,
|
||||
},
|
||||
],
|
||||
commodityTypes: [
|
||||
{
|
||||
icon: 'icon-datumoshi',
|
||||
type: 0,
|
||||
content: '大图模式',
|
||||
},
|
||||
{
|
||||
icon: 'icon-commodity-yihangliangge',
|
||||
type: 1,
|
||||
content: '一行两个',
|
||||
},
|
||||
{
|
||||
icon: 'icon-xuanzemokuai-daohanghengxianghuadong',
|
||||
type: 2,
|
||||
content: '横向滑动',
|
||||
},
|
||||
{
|
||||
icon: 'icon-sanlan',
|
||||
type: 3,
|
||||
content: '一大两小',
|
||||
},
|
||||
{
|
||||
icon: 'icon-commodity-xiangxiliebiao',
|
||||
type: 4,
|
||||
content: '详细列表',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
textWeight: [{ required: true, validator: kon, trigger: 'blur' }],
|
||||
},
|
||||
marker: ['新品', '热卖', 'NEW', 'HOT'],
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
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 = {}
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList.push({
|
||||
src: res,
|
||||
text: '这里显示笔记标题最多显示2行',
|
||||
http: {},
|
||||
type: '1',
|
||||
})
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options1 = res.data
|
||||
})
|
||||
} else if (res === '10') {
|
||||
// 历史页面
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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
|
||||
styleText() {
|
||||
if (this.datas.commodityType === 0) return '大图模式'
|
||||
if (this.datas.commodityType === 1) return '一行两个'
|
||||
if (this.datas.commodityType === 2) return '横向滑动'
|
||||
if (this.datas.commodityType === 3) return '详细列表'
|
||||
if (this.datas.commodityType === 4) return '一大两小'
|
||||
if (this.datas.commodityType === 5) return '横向滑动'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.storenotecardstyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.fir-sele.el-select {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
.commodityType {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebedf0;
|
||||
color: #979797;
|
||||
margin: 0 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #155bd4;
|
||||
color: #155bd4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.moditystyle {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
span {
|
||||
width: 86px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ebedf0;
|
||||
&.active {
|
||||
border: 1px solid #155bd4;
|
||||
background-color: #e0edff;
|
||||
color: #155bd4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 位置 */
|
||||
.weiz {
|
||||
text-align: right;
|
||||
i {
|
||||
padding: 5px 14px;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ebedf0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #155bd4;
|
||||
border: 1px solid #155bd4;
|
||||
background: #e0edff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 单选框 */
|
||||
/deep/.radi1 {
|
||||
border-top: 1px solid #f7f8fa;
|
||||
border-bottom: 1px solid #f7f8fa;
|
||||
padding: 12px 0;
|
||||
.el-radio {
|
||||
margin: 10px 25px 7px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
/* 图片字 */
|
||||
.imgTextChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.fir-sele.el-select {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
/deep/.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="suspensionstyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="80px"
|
||||
:model="datas"
|
||||
size="small"
|
||||
>
|
||||
<!-- 跳转页面 -->
|
||||
<el-form-item label="跳转页面">
|
||||
<div class="imgText">
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="datas.type"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'suspensionstyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
optionsType: [
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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>
|
||||
.suspensionstyle {
|
||||
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;
|
||||
}
|
||||
.imgText {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.fir-sele.el-select {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,444 @@
|
||||
<template>
|
||||
<div class="investigatestyle">
|
||||
<!-- 标题 -->
|
||||
<h2>{{ datas.text }}</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="100px" :model="datas" size="small">
|
||||
<el-form-item class="lef" label="外边框">
|
||||
<el-checkbox v-model="datas.isShowBorder">显示</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="选中的颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.activeColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="未选中的颜色">
|
||||
<!-- 颜色选择器 -->
|
||||
<el-color-picker
|
||||
v-model="datas.inactiveColor"
|
||||
show-alpha
|
||||
class="picke"
|
||||
:predefine="predefineColors"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="高亮位置">
|
||||
<el-slider
|
||||
v-model="datas.Highlight"
|
||||
:max="4"
|
||||
:min="0"
|
||||
input-size="mini"
|
||||
show-input
|
||||
>
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="lef" label="导航"> </el-form-item>
|
||||
<vuedraggable v-model="datas.iconList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, index) in datas.iconList"
|
||||
:key="item + index"
|
||||
>
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index)" />
|
||||
<!-- 图片 -->
|
||||
<div class="imag">
|
||||
<img :src="item.iconPic" alt="" draggable="false" />
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<div class="imgText-top">
|
||||
<el-input
|
||||
v-model="item.iconText"
|
||||
placeholder="导航名称"
|
||||
size="mini"
|
||||
/>
|
||||
<div class="imgText-top-r">
|
||||
<span>小圆点</span>
|
||||
<el-checkbox v-model="item.isDot"></el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgTextChild">
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
v-model="item.linktype"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType(index)"
|
||||
>
|
||||
<el-option
|
||||
v-for="iteml in optionsType"
|
||||
:key="iteml.name"
|
||||
:label="iteml.name"
|
||||
:value="iteml.type"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
|
||||
<!-- 添加导航按钮 -->
|
||||
<el-button
|
||||
@click="$refs.upload.showUpload()"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
v-if="datas.iconList.length < 5"
|
||||
>
|
||||
<i class="el-icon-plus" />点击添加导航
|
||||
</el-button>
|
||||
<i class="icon-tip">*最多添加5个</i>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'investigatestyle',
|
||||
props: {
|
||||
datas: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
predefineColors: [
|
||||
// 颜色选择器预设
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], // 选择跳转类型
|
||||
emptyText: '',
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
created() {},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
this.datas.iconList.push({
|
||||
/** 图标名称文字 */
|
||||
iconText: '',
|
||||
/** 图标图片 */
|
||||
iconPic: res,
|
||||
/** 是否显示小圆点 */
|
||||
isDot: false,
|
||||
/** 跳转类型 */
|
||||
linktype: '1',
|
||||
/** 跳转参数 */
|
||||
http: {},
|
||||
})
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
deleteimg(index) {
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
components: {
|
||||
uploadimg,
|
||||
vuedraggable,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.investigatestyle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
/* 颜色选择器 */
|
||||
.picke {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 345px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 卡片列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
/* 图片字 */
|
||||
.imgTextChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.fir-sele.el-select {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
.imgText-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.imgText-top-r {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
/deep/.el-input,
|
||||
.el-input--mini {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-tip {
|
||||
font-size: 12px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="videostyle">
|
||||
<!-- 标题 -->
|
||||
<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>
|
||||
<!-- 是否自动播放 -->
|
||||
<el-form-item class="lef" label="是否自动播放" label-width="100px">
|
||||
{{ datas.autoplay ? '是' : '否' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.autoplay" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'videostyle',
|
||||
props: {
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.videostyle {
|
||||
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>
|
||||
@@ -0,0 +1,137 @@
|
||||
<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)
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="sliderassembly">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item
|
||||
:title="items.title"
|
||||
:name="index + 1"
|
||||
v-for="(items, index) in datas"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="componList"
|
||||
draggable="true"
|
||||
@dragstart="drag($event)"
|
||||
@dragend="dragends($event)"
|
||||
:data-name="item.name"
|
||||
v-for="(item, ind) in items.comList"
|
||||
:key="ind"
|
||||
>
|
||||
<i class="iconfont" :class="item.icon" />
|
||||
<p>{{ item.text }}</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sliderassembly',
|
||||
props: {
|
||||
pointer: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
|
||||
datas: [
|
||||
{
|
||||
title: '基础组件',
|
||||
comList: [
|
||||
{
|
||||
text: '标题文本',
|
||||
type: '1-1',
|
||||
icon: 'icon-Component-biaotiwenzi',
|
||||
name: 'captiontext',
|
||||
},
|
||||
{
|
||||
text: '商品',
|
||||
type: '1-2',
|
||||
icon: 'icon-goods',
|
||||
name: 'listswitching',
|
||||
},
|
||||
{
|
||||
text: '图片广告',
|
||||
type: '1-3',
|
||||
icon: 'icon-tupianguanggao',
|
||||
name: 'pictureads',
|
||||
},
|
||||
{
|
||||
text: '图文导航',
|
||||
type: '1-4',
|
||||
icon: 'icon-icon_tupiandaohang',
|
||||
name: 'graphicnavigation',
|
||||
},
|
||||
{
|
||||
text: '富文本',
|
||||
type: '1-5',
|
||||
icon: 'icon-fuwenben',
|
||||
name: 'richtext',
|
||||
},
|
||||
{
|
||||
text: '魔方',
|
||||
type: '1-6',
|
||||
icon: 'icon-mofang',
|
||||
name: 'magiccube',
|
||||
},
|
||||
{
|
||||
text: '辅助分割',
|
||||
type: '1-7',
|
||||
icon: 'icon-Component-fuzhufenge',
|
||||
name: 'auxiliarysegmentation',
|
||||
},
|
||||
{
|
||||
text: '商品搜索',
|
||||
type: '1-8',
|
||||
icon: 'icon-shangpinsousuo',
|
||||
name: 'commoditysearch',
|
||||
},
|
||||
{
|
||||
text: '店铺信息',
|
||||
type: '1-9',
|
||||
icon: 'icon-dianpuxinxi',
|
||||
name: 'storeinformation',
|
||||
},
|
||||
{
|
||||
text: '进入店铺',
|
||||
type: '1-10',
|
||||
icon: 'icon-jinrudianpu',
|
||||
name: 'entertheshop',
|
||||
},
|
||||
{
|
||||
text: '公告',
|
||||
type: '1-11',
|
||||
icon: 'icon-gonggao',
|
||||
name: 'notice',
|
||||
},
|
||||
{
|
||||
text: '视频',
|
||||
type: '1-12',
|
||||
icon: 'icon-shipin',
|
||||
name: 'videoss',
|
||||
},
|
||||
{
|
||||
text: '音频',
|
||||
type: '1-13',
|
||||
icon: 'icon-yuyin',
|
||||
name: 'voicer',
|
||||
},
|
||||
|
||||
{
|
||||
text: '社群涨粉',
|
||||
type: '1-15',
|
||||
icon: 'icon-kuaisuzhangfen',
|
||||
name: 'communitypowder',
|
||||
},
|
||||
{
|
||||
text: '店铺笔记卡片',
|
||||
type: '1-16',
|
||||
icon: 'icon-dianpubijikapian',
|
||||
name: 'storenotecard',
|
||||
},
|
||||
/* {
|
||||
text: '人群运营',
|
||||
type: '1-17',
|
||||
icon: 'icon-yunying',
|
||||
name: ''
|
||||
}, */
|
||||
/* {
|
||||
text: '在线客服',
|
||||
type: '1-19',
|
||||
icon: 'icon-weibiaoti-_huaban',
|
||||
name: ''
|
||||
}, */
|
||||
/* {
|
||||
text: '个性化推荐',
|
||||
type: '1-18',
|
||||
icon: 'icon-gexinghuatuijian',
|
||||
name: ''
|
||||
}, */
|
||||
{
|
||||
text: '调研',
|
||||
type: '1-20',
|
||||
icon: 'icon-dianpubijikapian',
|
||||
name: 'investigate',
|
||||
},
|
||||
{
|
||||
text: '导航',
|
||||
type: '1-21',
|
||||
icon: 'icon-daohang',
|
||||
name: 'tabBar',
|
||||
},
|
||||
{
|
||||
text: '关注公众号',
|
||||
type: '1-22',
|
||||
icon: 'icon-gongzhonghao',
|
||||
name: 'follow',
|
||||
},
|
||||
{
|
||||
text: '悬浮',
|
||||
type: '1-23',
|
||||
icon: 'icon-wangye',
|
||||
name: 'suspension',
|
||||
},
|
||||
{
|
||||
text: '自定义模块',
|
||||
type: '1-13',
|
||||
icon: 'icon-zidingyimokuai',
|
||||
name: 'custommodule'
|
||||
},
|
||||
],
|
||||
},
|
||||
/* {
|
||||
title: '营销组件',
|
||||
comList: [
|
||||
{
|
||||
text: '优惠券',
|
||||
type: '2-1',
|
||||
icon: 'icon-youhuiquan',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '限时折扣',
|
||||
type: '2-2',
|
||||
icon: 'icon-xianshizhekou',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '秒杀',
|
||||
type: '2-3',
|
||||
icon: 'icon-miaosha',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '拼团',
|
||||
type: '2-4',
|
||||
icon: 'icon-pintuan-copy',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '砍价',
|
||||
type: '2-5',
|
||||
icon: 'icon-kanjia',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '周期购',
|
||||
type: '2-6',
|
||||
icon: 'icon-zhouqi',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '积分商城',
|
||||
type: '2-7',
|
||||
icon: 'icon-jifenzhang',
|
||||
name: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '教育组件',
|
||||
comList: [
|
||||
{
|
||||
text: '课程',
|
||||
type: '3-1',
|
||||
icon: 'icon-kecheng',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '老师',
|
||||
type: '3-2',
|
||||
icon: 'icon-laoshi',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '知识专栏',
|
||||
type: '3-3',
|
||||
icon: 'icon-zhishizhuanlan1',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '知识内容',
|
||||
type: '3-4',
|
||||
icon: 'icon-zhishizhuanlan',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '知识直播',
|
||||
type: '3-5',
|
||||
icon: 'icon-zhibobofangshexiangjitianxianxianxing',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '知识付费会员',
|
||||
type: '3-6',
|
||||
icon: 'icon-zhishifufeihuiyuan',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '群打卡',
|
||||
type: '3-7',
|
||||
icon: 'icon-daka',
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '报名表单',
|
||||
type: '3-8',
|
||||
icon: 'icon-baomingbiaodan',
|
||||
name: ''
|
||||
}
|
||||
]
|
||||
} */
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 当用户开始拖动元素或选择文本时触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
drag(event) {
|
||||
/* 开启穿透 */
|
||||
this.pointer.show = true
|
||||
/* 传递参数 */
|
||||
event.dataTransfer.setData('componentName', event.target.dataset.name)
|
||||
},
|
||||
|
||||
/**
|
||||
* 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
dragends() {
|
||||
/* 关闭穿透 */
|
||||
this.pointer.show = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 组件 */
|
||||
.sliderassembly {
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
border-right: 1px solid #ebedf0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
/* 滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #155bd4;
|
||||
}
|
||||
/deep/.el-collapse-item__header,
|
||||
/deep/.el-collapse-item__wrap {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 组件列表 */
|
||||
.componList {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 88px;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
cursor: all-scroll;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
background: #155bd4;
|
||||
border-radius: 2px;
|
||||
font-weight: 700;
|
||||
i,
|
||||
p,
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
/* 图标 */
|
||||
i {
|
||||
font-size: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #b0a8a8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* 标题 */
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #323233;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* 数量 */
|
||||
span {
|
||||
color: #7d7e80;
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="uploadCommodity">
|
||||
<!-- 选择商品 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="选择商品"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
center
|
||||
width="500px"
|
||||
>
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
style="width: 60%"
|
||||
v-model="type"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
@change="selectType()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
style="width: 60%; margin-top: 15px"
|
||||
v-if="type !== '11'"
|
||||
v-model="dialogImageUrl.name"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId"
|
||||
:no-data-text="emptyText"
|
||||
@visible-change="
|
||||
(isVisible) => {
|
||||
return changeType(isVisible, type)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
:disabled="item.disabled"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 输入外部链接 -->
|
||||
<el-input
|
||||
style="width: 60%; margin-top: 15px"
|
||||
v-if="type === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="externalLink"
|
||||
></el-input>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消 上 传</el-button>
|
||||
<el-button type="primary" @click="uploadInformation" :disabled="disabl"
|
||||
>点 击 上 传</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'uploadCommodity',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
dialogImageUrl: {}, // 选择的数据
|
||||
type: '1',
|
||||
uploadShow: false, //是否显示上传图片
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '7',
|
||||
name: '实物商品',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '5',
|
||||
name: '其他',
|
||||
},
|
||||
// {
|
||||
// type: '10',
|
||||
// name: '跳转至历史页面'
|
||||
// },
|
||||
// {
|
||||
// type: '11',
|
||||
// name: '外部链接'
|
||||
// }
|
||||
], // 选择跳转类型
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
externalLink: null,
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
selectType() {
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
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
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
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) => {
|
||||
if (res.code !== 0) return this.$message.error(res.msg)
|
||||
this.options = res.data.shopTemplateList
|
||||
|
||||
// 校验数据
|
||||
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))
|
||||
this.dialogImageUrl = this.$utils.getCoursewareData(this.type, res.id)
|
||||
},
|
||||
/* 显示上传文件组件 */
|
||||
showUpload() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
/* 传递图片地址 */
|
||||
uploadInformation() {
|
||||
this.dialogImageUrl.httpType = this.type
|
||||
this.$emit('uploadListInformation', this.dialogImageUrl)
|
||||
|
||||
// 隐藏上传弹框
|
||||
this.dialogVisible = false
|
||||
this.uploadShow = false
|
||||
this.dialogImageUrl = {}
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||
.then(() => {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = {}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 提交按钮是否可以点击
|
||||
disabl() {
|
||||
if (!this.dialogImageUrl) return true
|
||||
else return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.uploadCommodity {
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="uploadImg">
|
||||
<!-- 上传图片 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="上传图片"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
center
|
||||
width="500px"
|
||||
>
|
||||
<!-- 上传图片 -->
|
||||
<el-upload
|
||||
v-if="dialogVisible"
|
||||
name="file"
|
||||
:action="baseupload"
|
||||
list-type="picture-card"
|
||||
:limit="1"
|
||||
:on-preview="preview"
|
||||
:on-success="onSuccess"
|
||||
:with-credentials="true"
|
||||
:on-error="uploadError"
|
||||
:before-upload="uploads"
|
||||
:before-remove="handleRemove"
|
||||
:class="uploadShow ? 'disable' : ''"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消 上 传</el-button>
|
||||
<el-button type="primary" @click="uploadInformation" :disabled="disabl"
|
||||
>点 击 上 传</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 图片放大 -->
|
||||
<el-dialog :visible.sync="dialogVisibles" class="xianshi">
|
||||
<img
|
||||
draggable="false"
|
||||
style="width: 640px; height: 400px; margin: 20px 0px"
|
||||
:src="dialogImageUrl"
|
||||
alt=""
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'uploadImg',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
dialogVisibles: false, // 放大的图片
|
||||
dialogImageUrl: '', // 上传的图片
|
||||
uploadShow: false, //是否显示上传图片
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 显示上传文件组件 */
|
||||
showUpload() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
/* 传递图片地址 */
|
||||
uploadInformation() {
|
||||
this.$emit('uploadInformation', this.dialogImageUrl)
|
||||
// 隐藏上传弹框
|
||||
this.dialogVisible = false
|
||||
this.uploadShow = false
|
||||
this.dialogImageUrl = ''
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||
.then(() => {
|
||||
this.handleRemove()
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = ''
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
handleRemove() {
|
||||
this.uploadShow = false
|
||||
this.dialogImageUrl = ''
|
||||
return true
|
||||
},
|
||||
|
||||
// 预览
|
||||
preview() {
|
||||
this.dialogVisibles = true
|
||||
},
|
||||
|
||||
// 上传成功
|
||||
onSuccess(response) {
|
||||
// 返回错误
|
||||
if (response.success != true)
|
||||
return this.$message.error('上传图片失败，请删除后重新上传')
|
||||
|
||||
this.dialogImageUrl = response.data.src
|
||||
},
|
||||
|
||||
// 上传前
|
||||
uploads(file) {
|
||||
if (!file.type.includes('image')) {
|
||||
this.$message.error('请上传图片！')
|
||||
return false
|
||||
}
|
||||
this.uploadShow = true
|
||||
},
|
||||
|
||||
// 上传失败
|
||||
uploadError() {
|
||||
this.$message.error('请重新上传')
|
||||
this.uploadShow = false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// baseurl
|
||||
baseupload() {
|
||||
return `${window.global_config.BASE_URL}upload/miniShop`
|
||||
},
|
||||
|
||||
// 提交按钮是否可以点击
|
||||
disabl() {
|
||||
if (!this.dialogImageUrl) return true
|
||||
else return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.uploadImg {
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user