lasuo_nft_front/src/components/CollectionList.vue

<template>
    <div class="current_recommendation_con" :key="index" @click="goDetail">
        <!-- <img :src="info.pic[0].url" alt="" class="current_recommendation_img"> -->
        <van-image width="100%" height="calc(100vw/2 - 22.2px)" :radius="18" :src="getImg(info.pic[0].url)" fit="cover">
            <template v-slot:loading>
                <van-loading type="spinner" size="20" />
            </template>
        </van-image>
        <!-- <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" class="current_recommendation_img"/> -->
        <div class="current_recommendation_title">{{ info.name }}</div>
        <div class="information_display">
            <div class="current_recommendation_price" :style="{ 'padding-left': info.salable ? '14px' : '0px' }">
                <div v-if="info.salable">
                    <div class="current_recommendation_price_one">¥</div>
                    <div class="current_recommendation_price_two">{{ info.price }}</div>
                </div>
                <div v-else class="showOnly">仅展示</div>
            </div>
            <div class="information_display_con" v-if="!isSolded">
                <span>{{ Math.max(Math.min(info.sale, info.total), 0) }}</span
                >&nbsp;/&nbsp;<span>{{ info.total }}</span>
            </div>
        </div>
        <div class="current_recommendation_bottom">
            <div class="current_recommendation_bottom_left">
                <!-- <img :src="info.minterAvatar" alt="" class="current_recommendation_name_img"> -->
                <van-image width="20px" height="20px" :radius="20" :src="getImg(info.minterAvatar)" fit="cover" />
                <div class="current_recommendation_name">{{ info.owner }}</div>
            </div>
            <div class="current_recommendation_bottom_right">
                <img
                    :src="info.liked ? likes : noLikes"
                    @click.stop="likeProduct"
                    alt=""
                    class="current_recommendation_bottom_right_img"
                />
                <div class="give_number">{{ info.likes }}</div>
            </div>
        </div>
        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
    </div>
    <!-- <div class="sold xianliang" v-if="time && info.salable">
                <img src="@assets/shizhong.png" alt="" />
                <span>{{ startTime || time }}</span>
            </div>
            <div class="sold" v-if="isSolded">已售罄</div>
            <div class="sold" v-else-if="isSold" style="color: #ff4f50">即将售罄</div>
    </div> -->
</template>

<script>
import product from '../mixins/product';
export default {
    mixins: [product],
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            noLikes: require('@assets/collection@3x.png'),
            likes: require('@assets/collection_success@3x.png')
        };
    },
    computed: {
        time() {
            if (this.info.startTime) {
                if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
                    return this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss').format('MM月DD日');
                }
            }

            return '';
        }
    },
    mounted() {
        // if (this.info.startTime) {
        //     var x = this.dayjs(this.info.startTime);
        //     var y = this.dayjs();
        //     let d = this.dayjs.duration(x.diff(y));
        //     let day = parseInt(d.asDays());
        //     if (day <= 0) {
        //         this.getTime(this.info.startTime);
        //     }
        // }
    },
    methods: {
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.$emit('update:info', {
                        ...this.info,
                        liked: true,
                        likes: this.info.likes + 1
                    });
                    this.$toast.success('收藏成功');
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.$emit('update:info', {
                        ...this.info,
                        liked: false,
                        likes: this.info.likes - 1
                    });
                    this.$toast.success('取消收藏');
                });
            }
        },
        goDetail() {
            this.$router.push({ path: '/productDetail', query: { collectionId: this.info.id } });
            // if (!this.usedBuy && this.info.source === 'TRANSFER') {
            //     this.$toast('该通道暂且关闭');
            // } else {
            //     this.$router.push({
            //         path: '/productDetail/' + this.info.id
            //     });
            // }
        }
    }
};
</script>

<style lang="less" scoped>
.current_recommendation_con {
    width: 48%;
    // height: 254px;
    background: #1e222c;
    border-radius: 18px;
    margin-bottom: 17px;
    overflow: hidden;
    position: relative;
    .bottom_texture {
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .current_recommendation_title {
        margin-top: 8px;
        padding: 0 10px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 18px;
    }
    .information_display {
        display: flex;
        justify-content: space-between;
        padding: 0px 10px;
        box-sizing: border-box;
        margin-top: 8px;
        margin-bottom: 8px;
        height: 24px;
        align-items: center;
        .current_recommendation_price {
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            position: relative;
            .current_recommendation_price_one {
                font-size: 12px;
                line-height: 20px;
                position: absolute;
                bottom: 1px;
                left: 0px;
            }
            .current_recommendation_price_two {
                font-size: 16px;
                line-height: 24px;
            }
            .showOnly {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
            }
        }
        .information_display_con {
            height: 18px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            opacity: 0.5;
            line-height: 18px;
        }
    }
    .current_recommendation_bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0px 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .current_recommendation_bottom_left {
            display: flex;
        }
        .current_recommendation_bottom_right {
            display: flex;
            height: 18px;
            position: absolute;
            z-index: 1;
            right: 10px;
            .current_recommendation_bottom_right_img {
                width: 20px;
                height: 20px;
            }
        }
        .current_recommendation_name {
            margin-left: 4px;
            width: calc(50vw - 125px);
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            opacity: 0.5;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .give_img {
            width: 18px;
            height: 18px;
            margin-right: 2px;
        }
        .give_number {
            margin-top: 1px;
            margin-left: 2px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
        }
    }
}
</style>