szugift-fe/sourcecode/h5app/vue/src/views/index.vue

<template>
    <div>
        <div style="position: relative;">
            <img :src="indexTop" style="max-width: 100%; position: relative;"/>
        </div>
        <van-row type="flex" justify="space-between" align="center">
            <van-col>
                <p><strong>我的礼物</strong></p>
            </van-col>
            <van-col>
                <van-button round type="primary" size="small" @click="toShare">邀请好友</van-button>
            </van-col>
        </van-row>

        <ul style="background-color: #fff6e3">
            <li
                    is="index-present"
                    v-for="(present, index) in presents"
                    :key="present.id"
                    :present-desc="present.desc"
                    :publish-time="present.time"
                    :status="present.status"
                    @to-detail="toDetail(index)"
            ></li>
        </ul>
        <add-present-button :can_add="button_active"/>
    </div>
</template>

<script>
    import IndexPresent from "../components/IndexPresent";
    import { Button, Row, Col} from "vant"
    import AddPresentButton from "../components/addPresentButton";

    export default {
        name: "index",
        components: {
            AddPresentButton,
            IndexPresent,
            [Button.name]: Button,
            [Row.name]: Row, [Col.name]: Col
        },
        data() {
            return {
                active: 0,
                indexTop: require('../assets/banner.png'),
                button_active: false,
            }
        },
        computed: {
            presents: function() {
                // return get_present_data()
                return [
                    {
                        id: 0,
                        desc: '描述1blabla',
                        time: '2018-01-02',
                        status: 1
                    },
                    {
                        id: 1,
                        desc: '描述2blabla',
                        time: '2018-11-02',
                        status: 2
                    }
                ]
            }
        },
        methods: {
            toShare() {
                this.$router.push('share')
            },
            toDetail(id) {
                this.$router.push({ path: 'giftDetail', query: { presentId: id } })
            }
        }
    }
</script>

<style scoped>

</style>