git_show_wechat/src/components/good-list.vue

<!--
 * @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>