good-list.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!--
  2. * @Author: PoJun
  3. * @Date: 2023-06-01 14:21:03
  4. * @LastEditors: PoJun
  5. * @LastEditTime: 2023-06-17 17:06:48
  6. * @Message: Nothing
  7. -->
  8. <template>
  9. <view class="good-list u-flex">
  10. <view v-for="(good, index) in list" :key="good.id" class="good-item u-flex-col u-col-center">
  11. <view class="u-flex-col u-col-center" style="position: relative">
  12. <u-image
  13. @click="editItem(good)"
  14. :radius="10"
  15. :showLoading="true"
  16. :src="getImage(good.topicImage)"
  17. width="250rpx"
  18. height="250rpx"
  19. ></u-image>
  20. <view class="u-text-center">
  21. <view class="u-font-24 u-m-t-10">{{ good.name ? good.name : "/" }}</view>
  22. <view class="u-font-24 u-m-t-5 u-line-2">{{ good.des ? good.des : "/" }}</view>
  23. </view>
  24. <view class="deleteBtn" v-if="mode != 'show'">
  25. <u-avatar size="22" icon="close" font-size="14" @click.stop="deleteItem(good)"></u-avatar>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="good-item u-flex" style="align-self: flex-start" v-if="mode != 'show'">
  30. <u-image
  31. :radius="10"
  32. :showLoading="true"
  33. width="250rpx"
  34. height="250rpx"
  35. errorIcon="plus"
  36. loadingIcon="plus"
  37. @click="addItem"
  38. ></u-image>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. export default {
  44. props: {
  45. list: {
  46. type: Array,
  47. default() {
  48. return [];
  49. },
  50. },
  51. // 模式选择. 默认展示
  52. mode: {
  53. type: String,
  54. default: "show",
  55. },
  56. },
  57. methods: {
  58. editItem(item) {
  59. this.$emit("itemClick", item);
  60. },
  61. addItem() {
  62. this.$emit("addItem");
  63. },
  64. deleteItem(item) {
  65. this.$emit("deleteItem", item);
  66. },
  67. getImage(id) {
  68. return id ? process.env.VUE_APP_BASE_API + `/files/${id}/show` : "";
  69. },
  70. },
  71. };
  72. </script>
  73. <style lang="scss">
  74. .good-list {
  75. flex-wrap: wrap;
  76. .good-item {
  77. width: 50%;
  78. margin: 30rpx 0;
  79. justify-content: center;
  80. position: relative;
  81. .deleteBtn {
  82. position: absolute;
  83. top: -5px;
  84. right: -5px;
  85. }
  86. }
  87. }
  88. </style>