card-wechat/src/components/ProductInfo.vue

<template>
    <div class="product-card" @click="detail">
        <van-image width="80" height="115" :src="info.image" fit="cover" radius="6" />

        <div class="product-content">
            <div class="text1">{{ info.caseName }}</div>
            <div class="text2">
                <span>距结束</span>
                <van-count-down class="val" :time="time" format="DD 天 HH:mm:ss" />
            </div>
            <div class="text2">
                <span>已拼箱</span>
                <span class="val">{{ info.preorder || 0 }}/{{ info.total || 0 }}</span>
            </div>

            <div class="flex1"></div>

            <div class="price">
                <van-icon size="10" :color="$colors.red" name="jiage" class-prefix="iconfont" />
                <span>{{ info.price }}</span>
            </div>

            <div class="button" v-if="showBtn">
                <van-button @click.stop="manage" type="primary" size="small" v-if="isMine">管理拼箱</van-button>
                <van-button @click.stop="cancelFollow" type="info" plain size="small" v-else-if="showType === 'collect'"
                    >取消关注</van-button
                >
                <van-button type="primary" size="small" v-else-if="info.caseStatus === 'PROGRESS'">立即拼箱</van-button>
            </div>
        </div>

        <div class="live" v-if="!isMine && info.liveNow">
            <img src="/native/svgs/icon_kapai_zhibo.svg" alt="" />
            <span>直播</span>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import collection from '../mixins/collection';
export default {
    name: 'ProductInfo',
    mixins: [collection],
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        showBtn: {
            type: Boolean,
            default: true
        },
        showType: {
            type: String,
            default: 'product'
        },
        isMine: {
            type: Boolean,
            default: false
        },
        startChoose: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            cartId: 0,
            isCollection: false
        };
    },
    mounted() {
        this.$nextTick(() => {
            if (this.showType === 'collect') {
                this.cartId = this.info.cartId;
                this.isCollection = true;
            }
        });
    },
    computed: {
        time() {
            if (this.info.endTime) {
                let date = dayjs(this.info.endTime, 'YYYY-MM-DD HH:mm:ss');

                return date.diff(dayjs());
            } else {
                return 0;
            }
        }
    },
    methods: {
        manage() {
            console.log(this.info.liveNow);
            this.navigateTo('/pages/store/productEdit?id=' + this.info.cardCaseId + '&name=' + this.info.caseName);
        },
        detail() {
            if (this.startChoose) {
                this.$emit('choose', this.info.cardCaseId);
            } else {
                this.navigateTo('/pages/details?id=' + this.info.cardCaseId, false);
            }
        },
        cancelFollow() {
            wx.showModal({
                content: '确定要取消关注吗？',
                confirmColor: this.$colors.prim,
                success: res => {
                    if (res.confirm) {
                        this.collect().then(() => {
                            setTimeout(() => {
                                this.$emit('getInfo');
                            }, 1000);
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.product-card {
    height: 115px;
    .flex();
    position: relative;
}

.product-content {
    flex-grow: 1;
    margin-left: 10px;
    align-self: stretch;
    .flex-col();
    position: relative;
    overflow: hidden;
    .text1 {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        .ellipsis();
        margin-bottom: 6px;
    }

    .text2 {
        padding: 2px 0;
        .flex();
        span {
            font-size: 14px;
            color: #c8c9cc;
            line-height: 24px;

            &.val {
                font-size: 14px;
                color: @prim;
            }
        }

        /deep/ .val {
            .van-count-down {
                --count-down-text-color: @prim;
            }
        }
    }

    .flex1 {
        flex-grow: 1;
    }

    .price {
        .flex();
        font-size: 24px;
        font-family: 'OSP';
        font-weight: normal;
        color: #f42202;
        line-height: 22px;
    }
}

.button {
    position: absolute;
    right: 0;
    bottom: 0;
}

.live {
    padding: 4px 3px;
    background-color: @prim;
    border-radius: 4px;
    position: absolute;
    top: 10px;
    left: -7px;

    .flex();
    img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
    span {
        font-size: 12px;
        color: #ffffff;
        line-height: 14px;
    }
}
</style>