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

<template>
    <div class="gift_card">
        <van-row
                style="border-bottom: solid 1px #e4e4e4; padding:5px"
        >
            <van-col span="8">
                <img :src="presentImg" style="max-width: 100%"/>
            </van-col>
            <van-col span="16">
                <van-row type="flex" justify="space-between">
                    <van-col class="c"><p><strong>{{owner ? '对方' : '我'}}的礼物</strong></p></van-col>
                    <van-col class="c"><p>{{place[placeId]}}</p></van-col>
                </van-row>
                <van-row type="flex" justify="space-between">
                    <van-col class="c"><p>匹配性别</p></van-col>
                    <van-col class="c"><p>{{gender ? '女' : '男'}}</p></van-col>
                </van-row>
                <van-row type="flex" justify="space-between">
                    <van-col class="c"><p>礼物状态</p></van-col>
                    <van-col class="c" ><p :style="{ color: statusColor[status] }">{{statusString[status]}}</p></van-col>
                </van-row>
                <van-row type="flex" justify="space-between">
                    <van-col class="c"><p>微信</p></van-col>
                    <van-col class="c">
                            <p style="float: left">{{wechat}}</p>
                            <van-button round size="mini"
                                        v-if="owner" style="margin-left: 5px"
                                        v-clipboard:copy="wechat"
                                        v-clipboard:success="onCopy"
                                        v-clipboard:error="onError"
                            >复制</van-button>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>
        <p style="text-align: left; font-size: 110%"><strong>{{presentName}}</strong></p>
        <p style="text-align: left">{{presentDesc}}</p>
    </div>
</template>

<script>
    import { Card, Row, Col, Button } from 'vant';
    export default {
        name: "giftCard",
        components: {
            [Card.name]: Card,
            [Row.name]: Row, [Col.name]: Col,
            [Button.name]: Button,
        },
        data() {
            return {
                place: ['南区', '斋区', '西南', '西丽'],
                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: '这是一本我很喜欢的书，我曾经把这本书反反复复看了三遍，真的非常推荐。如果你也是科幻迷，你肯定会喜欢哒。圣诞快乐，喜欢这本书可以和我一起讨论哦！'
            },
            owner: {
                type: Number,
                default: 0 // 0: 我的; 1: 对方的
            },
            placeId: {
                type: Number,
                default: 0
            },
            gender: {
                type: Number,
                default: 0
            },
            status: {
                type: Number,
                default: 0
            },
            wechat: {
                type: String,
                default: 'undefined id'
            }
        },
        methods: {
            onCopy: function (e) {
                alert('You just copied: ' + e.text)
            },
            onError: function (e) {
                alert('Failed to copy texts')
            }
        }
    }
</script>

<style scoped>
    .c {
        height: 25px;
        margin-left: 10px;
        margin-right: 5px;
    }
    p {
        margin: 0;
    }
    .gift_card {
        margin: 20px 20px;
        background-color: white;
        padding: 10px;
    }
</style>