|
@@ -3,101 +3,103 @@
|
|
|
style="display: flex;
|
|
|
flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
|
|
|
<PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'
|
|
|
- :showSelectedPic="showSelectedPicOrUnSelectedPic">
|
|
|
+ :showSelectedPic="showSelectedPicOrUnSelectedPic">
|
|
|
</PicPicker>
|
|
|
<template v-if="ismultiple">
|
|
|
<div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
|
|
|
- @click="selectedImg(element)" v-for="element in picList1"></div>
|
|
|
+ @click="selectedImg(element)" v-for="element in picList1"></div>
|
|
|
</template>
|
|
|
<template v-else-if="isButton">
|
|
|
- <div class="ele" :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')' }" @click="selectedImg(element)"
|
|
|
- v-for="element in picList3"></div>
|
|
|
+ <div class="ele" :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')' }"
|
|
|
+ @click="selectedImg(element)"
|
|
|
+ v-for="element in picList3"></div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
|
|
|
- v-for="element in picList2"></div>
|
|
|
+ v-for="element in picList2"></div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import appConst from '../util/appConst'
|
|
|
- import PicPicker from './PicturePicker'
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- selectedImg: {
|
|
|
- type: Function
|
|
|
- },
|
|
|
- themeId: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- isButton: Boolean,
|
|
|
- ismultiple: Boolean,
|
|
|
- showSelectedPicOrUnSelectedPic: {
|
|
|
- type: Function
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- http: appConst.BACKEND_DOMAIN
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- picList() {
|
|
|
- return this.$store.state.editor.picList
|
|
|
- },
|
|
|
- picList1() {
|
|
|
- var arr = [];
|
|
|
- this.picList.forEach(function (item) {
|
|
|
- if (item.morePic) {
|
|
|
- arr.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- return arr
|
|
|
- },
|
|
|
- picList2() {
|
|
|
- var arr = [];
|
|
|
- this.picList.forEach(function (item) {
|
|
|
- if (!item.morePic && !item.isButton) {
|
|
|
- arr.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- return arr
|
|
|
- },
|
|
|
+ import appConst from '../util/appConst'
|
|
|
+ import PicPicker from './PicturePicker'
|
|
|
|
|
|
- picList3() {
|
|
|
- var arr = [];
|
|
|
- this.picList.forEach(function (item) {
|
|
|
- if (!item.morePic && item.isButton) {
|
|
|
- arr.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- return arr
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- uploadImage(data) {
|
|
|
- this.$store.dispatch('savePic', {
|
|
|
- 'filePath': data['filePath'],
|
|
|
- 'themeId': this.themeId,
|
|
|
- 'width': data['width'],
|
|
|
- 'height': data['height'],
|
|
|
- 'morePic': data.morePic,
|
|
|
- 'isButton': data.isButton,
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- PicPicker
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ selectedImg: {
|
|
|
+ type: Function
|
|
|
+ },
|
|
|
+ themeId: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ isButton: Boolean,
|
|
|
+ ismultiple: Boolean,
|
|
|
+ showSelectedPicOrUnSelectedPic: {
|
|
|
+ type: Function
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ http: appConst.BACKEND_DOMAIN
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ picList() {
|
|
|
+ return this.$store.state.editor.picList
|
|
|
+ },
|
|
|
+ picList1() {
|
|
|
+ var arr = [];
|
|
|
+ this.picList.forEach(function (item) {
|
|
|
+ if (item.morePic) {
|
|
|
+ arr.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ picList2() {
|
|
|
+ var arr = [];
|
|
|
+ this.picList.forEach(function (item) {
|
|
|
+ if (!item.morePic && !item.isButton) {
|
|
|
+ arr.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+
|
|
|
+ picList3() {
|
|
|
+ var arr = [];
|
|
|
+ this.picList.forEach(function (item) {
|
|
|
+ if (!item.morePic && item.isButton) {
|
|
|
+ arr.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uploadImage(data) {
|
|
|
+ this.$store.dispatch('savePic', {
|
|
|
+ 'filePath': data['filePath'],
|
|
|
+ 'themeId': this.themeId,
|
|
|
+ 'width': data['width'],
|
|
|
+ 'height': data['height'],
|
|
|
+ 'morePic': data.morePic,
|
|
|
+ 'isButton': data.isButton,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ PicPicker
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.ele-add {
|
|
|
float: left;
|
|
|
width: 45%;
|
|
|
- height: calc(324px *0.45 * 0.73);
|
|
|
+ height: calc(324px * 0.45 * 0.73);
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
background-size: contain;
|
|
@@ -111,7 +113,7 @@
|
|
|
.ele {
|
|
|
float: left;
|
|
|
width: 45%;
|
|
|
- height: calc(324px *0.45 * 0.73);
|
|
|
+ height: calc(324px * 0.45 * 0.73);
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
background-size: contain;
|
|
@@ -122,4 +124,4 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|