nanjing_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="164px" :src="getImg(info.pic[0].url)" fit="cover" />
        <!-- <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="current_recommendation_price" :style="{ 'padding-left': info.salable ? '18px' : '9px' }">
            <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="current_recommendation_bottom">
            <div class="current_recommendation_bottom_left">
                <!-- <img :src="info.minterAvatar" alt="" class="current_recommendation_name_img"> -->
                <van-image width="18px" height="18px" :radius="18" :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" alt="" />
                <div class="give_number">{{ info.likes }}</div>
            </div>
        </div>
    </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/icon-dianzan.png'),
            likes: require('@assets/icon-dianzan@2x.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: #29293f;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    .current_recommendation_title {
        margin-top: 6px;
        padding: 0 10px;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .current_recommendation_price {
        width: 100%;
        margin-top: 5px;
        // padding-left: 22px;
        box-sizing: border-box;
        display: flex;
        position: relative;
        margin-bottom: 8px;
        .showOnly {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
        }
        .current_recommendation_price_one {
            font-size: 10px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28b6ff;
            position: absolute;
            bottom: 1px;
            left: 8px;
        }
        .current_recommendation_price_two {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28b6ff;
        }
    }
    .current_recommendation_bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0px 10px;
        box-sizing: border-box;
        .current_recommendation_bottom_left {
            display: flex;
        }
        .current_recommendation_bottom_right {
            display: flex;
            height: 18px;
        }
        .current_recommendation_name {
            margin-left: 4px;
            width: 80px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .give_img {
            width: 18px;
            height: 18px;
            margin-right: 2px;
        }
        .give_number {
            margin-left: 2px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
        }
    }
}
</style>