123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <!--
- * @Author: PoJun
- * @Date: 2023-06-01 14:21:03
- * @LastEditors: PoJun
- * @LastEditTime: 2023-06-17 17:06:48
- * @Message: Nothing
- -->
- <template>
- <view class="good-list u-flex">
- <view v-for="(good, index) in list" :key="good.id" class="good-item u-flex-col u-col-center">
- <view class="u-flex-col u-col-center" style="position: relative">
- <u-image
- @click="editItem(good)"
- :radius="10"
- :showLoading="true"
- :src="getImage(good.topicImage)"
- width="250rpx"
- height="250rpx"
- ></u-image>
- <view class="u-text-center">
- <view class="u-font-24 u-m-t-10">{{ good.name ? good.name : "/" }}</view>
- <view class="u-font-24 u-m-t-5 u-line-2">{{ good.des ? good.des : "/" }}</view>
- </view>
- <view class="deleteBtn" v-if="mode != 'show'">
- <u-avatar size="22" icon="close" font-size="14" @click.stop="deleteItem(good)"></u-avatar>
- </view>
- </view>
- </view>
- <view class="good-item u-flex" style="align-self: flex-start" v-if="mode != 'show'">
- <u-image
- :radius="10"
- :showLoading="true"
- width="250rpx"
- height="250rpx"
- errorIcon="plus"
- loadingIcon="plus"
- @click="addItem"
- ></u-image>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- list: {
- type: Array,
- default() {
- return [];
- },
- },
- // 模式选择. 默认展示
- mode: {
- type: String,
- default: "show",
- },
- },
- methods: {
- editItem(item) {
- this.$emit("itemClick", item);
- },
- addItem() {
- this.$emit("addItem");
- },
- deleteItem(item) {
- this.$emit("deleteItem", item);
- },
- getImage(id) {
- return id ? process.env.VUE_APP_BASE_API + `/files/${id}/show` : "";
- },
- },
- };
- </script>
- <style lang="scss">
- .good-list {
- flex-wrap: wrap;
- .good-item {
- width: 50%;
- margin: 30rpx 0;
- justify-content: center;
- position: relative;
- .deleteBtn {
- position: absolute;
- top: -5px;
- right: -5px;
- }
- }
- }
- </style>
|