ImgPanel.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div
  3. style="display: flex;
  4. flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
  5. <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'
  6. :showSelectedPic="showSelectedPicOrUnSelectedPic">
  7. </PicPicker>
  8. <template v-if="ismultiple">
  9. <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
  10. @click="selectedImg(element)" v-for="element in picList1"></div>
  11. </template>
  12. <template v-else-if="isButton">
  13. <div class="ele" :style="{ backgroundImage: 'url(' + element.backgroundUnselectedImg + ')' }"
  14. @click="selectedImg(element)"
  15. v-for="element in picList3"></div>
  16. </template>
  17. <template v-else>
  18. <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
  19. v-for="element in picList2"></div>
  20. </template>
  21. </div>
  22. </template>
  23. <script>
  24. import appConst from '../util/appConst'
  25. import PicPicker from './PicturePicker'
  26. export default {
  27. props: {
  28. selectedImg: {
  29. type: Function
  30. },
  31. themeId: {
  32. type: String
  33. },
  34. isButton: Boolean,
  35. ismultiple: Boolean,
  36. showSelectedPicOrUnSelectedPic: {
  37. type: Function
  38. }
  39. },
  40. data() {
  41. return {
  42. http: appConst.BACKEND_DOMAIN
  43. }
  44. },
  45. computed: {
  46. picList() {
  47. return this.$store.state.editor.picList
  48. },
  49. picList1() {
  50. var arr = [];
  51. this.picList.forEach(function (item) {
  52. if (item.morePic) {
  53. arr.push(item)
  54. }
  55. })
  56. return arr
  57. },
  58. picList2() {
  59. var arr = [];
  60. this.picList.forEach(function (item) {
  61. if (!item.morePic && !item.isButton) {
  62. arr.push(item)
  63. }
  64. })
  65. return arr
  66. },
  67. picList3() {
  68. var arr = [];
  69. this.picList.forEach(function (item) {
  70. if (!item.morePic && item.isButton) {
  71. arr.push(item)
  72. }
  73. })
  74. return arr
  75. }
  76. },
  77. methods: {
  78. uploadImage(data) {
  79. this.$store.dispatch('savePic', {
  80. 'filePath': data['filePath'],
  81. 'themeId': this.themeId,
  82. 'width': data['width'],
  83. 'height': data['height'],
  84. 'morePic': data.morePic,
  85. 'isButton': data.isButton,
  86. })
  87. }
  88. },
  89. components: {
  90. PicPicker
  91. }
  92. }
  93. </script>
  94. <style lang="less" scoped>
  95. .ele-add {
  96. float: left;
  97. width: 45%;
  98. height: calc(324px * 0.45 * 0.73);
  99. background-repeat: no-repeat;
  100. background-position: center;
  101. background-size: contain;
  102. margin-bottom: 16px;
  103. &:hover {
  104. cursor: pointer;
  105. }
  106. }
  107. .ele {
  108. float: left;
  109. width: 45%;
  110. height: calc(324px * 0.45 * 0.73);
  111. background-repeat: no-repeat;
  112. background-position: center;
  113. background-size: contain;
  114. margin-bottom: 16px;
  115. &:hover {
  116. border: 2px solid #4E5DFF;
  117. cursor: pointer;
  118. }
  119. }
  120. </style>