szugift-fe/sourcecode/h5app/vue/src/components/IndexPresent.vue

<template>
    <div v-on:click="toDetail">
        <van-card
                :thumb="presentImg"
        >
            <div slot="title" style="position: absolute; text-align: left; top: 0;">
                <p style="margin: 10px 0 0"><strong>{{presentName}}</strong></p>
                <p style="margin-top: 5px">{{presentDesc}}</p>
            </div>
            <div slot="tags" style="position: absolute; bottom: 0; text-align: left">
                <p>{{publishTime}}</p>
            </div>
            <div slot="footer" style="width: 100%">
                    <van-tag class="present_tag" :color="statusColor[status]">{{statusString[status]}}</van-tag>
            </div>
        </van-card>
    </div>
</template>

<script>
    import { Card, Tag } from 'vant';
    export default {
        name: "IndexPresent",
        components: {
            [Card.name]: Card, [Tag.name]: Tag,
        },
        data() {
            return {
                statusString: ['审核中', '匹配中', '匹配成功', '交换成功', '审核失败'],
                statusColor: ['#f43736', '#00ff00', '#00bfff', '#00fa9a', 'ff0000']
            }
        },
        props: {
            presentImg: {
                type: String,
                default: require('../assets/image_load_fail.jpg')
            },
            presentName: {
                type: String,
                default: '礼物名称'
            },
            presentDesc: {
                type: String,
                default: '礼物描述'
            },
            publishTime: {
                type: String,
                default: '1970-01-01'
            },
            status: {
                type: Number,
                default: 0
            }
        },
        methods: {
            toDetail() {
                this.$emit('to-detail')
            }
        }
    }

</script>

<style scoped>
    div {
        background-color: #fff6e3;
    }
</style>