giftGivingItem.vue 5.26 KB
<template>
    <div>
        <div v-if="giftGivingItem && giftGivingItem.length > 0">
            <div
                class="giftItem_box"
                v-for="(item, index) in giftGivingItem"
                :key="index"
                @click="onGiftGiving(item)"
            >
                <!--用户信息-->
                <div class="user_info">
                    <div class="name" v-if="item && item.create_time">
                        {{
                            (item.create_time * 1000)
                                | datetime("yyyy-MM-dd hh:mm:ss")
                        }}
                    </div>
                    <div class="gift_active">
                        <span v-if="item && item.status == 0">待支付</span>
                        <span v-else-if="item && item.status == 1">分享</span>
                        <span v-else-if="item && item.status == 2">已领完</span>
                        <span v-else-if="item && item.status == 3">已关闭</span>
                        <span v-else-if="item && item.status == 4"
                            >部分退款中(可分享)</span
                        >
                        <span v-else-if="item && item.status == 5"
                            >部分退款中(不可分享</span
                        >
                        <span v-else-if="item && item.status == 6">退款中</span>
                    </div>
                </div>
                <!--商品信息-->
                <div class="item_info">
                    <img
                        v-if="item && item.goods && item.goods.simg"
                        v-lazy="item.goods.simg"
                    />
                    <div class="box">
                        <div
                            v-if="item && item.goods && item.goods.title"
                            class="name"
                        >
                            {{ item.goods.title }}
                        </div>
                        <div class="pirce">
                            <div
                                v-if="item && item.goods && item.goods.price"
                                class="title"
                            >
                                <span>¥</span>{{ item.goods.price }}
                            </div>
                            <div
                                v-if="item && item.goods && item.goods.num"
                                class="btn"
                            >
                                总数:{{ parseInt(item.goods.num) }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 显示文字 -->
                <div class="text_tip">
                    <span v-show="item && item.total_num"
                        >可分享<num>{{ item.total_num }}</num
                        >人,</span
                    >
                    <span v-show="item && item.give_num"
                        >已领 <num>{{ item.give_num }}</num> 人,</span
                    >
                    <span v-show="item && item.no_address_num"
                        ><num>{{ item.no_address_num }}</num>
                        人未填写地址,</span
                    >
                    <span v-show="item && item.refund_num"
                        ><num>{{ item.refund_num }}</num
                        >人退款中</span
                    >
                </div>
                <!-- 按钮 -->
                <div v-show="item.status == 0" class="btn_list">
                    <div class="box">
                        <div
                            v-on:click.stop="onCancelPayment(item)"
                            class="btn"
                        >
                            取消支付
                        </div>
                        <div v-on:click.stop="jumpToPay(item)" class="active">
                            立即支付
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 您还未送过礼物哦~-->
        <div v-else class="noGift">
            <div v-if="isData==0" class="box">
                <img src="static/img/noGifts.png" />
                <div class="tip">一份礼品 一份轻易</div>
                <div class="desc">您还未送出礼物</div>
                <div class="btn">去购买送礼</div>
            </div>
             <div v-else class="box2">
                <img src="static/img/noItem.png" />
                <div class="tip">您还没有相关订单</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {};
    },
    props: ["giftGivingItem","isData"],
    created() {},
    methods: {
        // 跳转到礼物详情页
        onGiftGiving(item) {
            this.$emit("onGiftGiving", item);
        },
        // 跳转到原声生支付
        jumpToPay(item) {
            this.$emit("jumpToPay", item);
        },
        // 取消订单
        onCancelPayment(item) {
            this.$emit("onCancelPayment", item);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
@import "giftGivingItem";
</style>