myGiftBox.vue 4.23 KB
<template>
    <div class="my_gift_box">
        <!--tab切换-->
        <div class="top_box">
            <img src="static/img/icon_back.png" />
            <div class="tabs">
                <van-tabs v-model="active">
                    <van-tab title="收礼"></van-tab>
                    <van-tab title="送礼"></van-tab>
                </van-tabs>
            </div>
            <div class="desc">规则说明</div>
        </div>
        <!--内容-->
        <div
            infinite-scroll-immediate-check="true"
            v-infinite-scroll="getorderGiftList"
            infinite-scroll-disabled="loading"
            :infinite-scroll-distance="50"
        >
            <receiving-gifts-item
                @giftInReturn="giftInReturn"
                :receivingGiftsInfo="receivingGiftsInfo"
            ></receiving-gifts-item>
        </div>
    </div>
</template>

<script>
// 引入组件
import { Toast, Indicator } from "mint-ui";
import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem";
export default {
    name: "myGiftBox",
    data() {
        return {
            active: 0,
            receivingGiftsInfo: null, // 礼物数据
            loading: false, // 加载
            pages: 0 // 分页
        };
    },
    components: {
        receivingGiftsItem
    },
    created() {
        // 收礼订单列表
        this.getorderGiftList();
    },
    methods: {
        onTap(active) {
            this.active = active;
        },
        /**
         * 获取收礼礼物列表
         */
        getorderGiftList() {
            this.loading = true;
            this.pages++;
            // 加载中提示
            Indicator.open("加载中...");

            // 获取收礼礼物列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/orderGiftList",
                {
                    uid: this.$route.query.uid, // 用户id
                    page: this.pages, // 分页 默认为1 一页20条
                    type: 1, // 1 收礼列表 2 送礼列表(送礼已废弃)
                    status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
                },
                this.getorderGiftListCallback,
                {
                    method: "post"
                }
            );
        },

        /**
         * 获取收礼礼物列表回调
         * @param {object} res [服务器返回数据]
         * @param {object} ext [扩展参数]
         */
        getorderGiftListCallback(res, ext) {
            // 加载完成
            Indicator.close();

            // 返回处理
            if (res.code == 200) {
                // 解构数据
                let { data: datas } = res;
                // 设置shopFnsDynamic达人动态数据

                if (datas.list && datas.list.length) {
                    // 隐藏加载圈
                    this.loading = false;
                    if (this.pages > 1) {
                        this.$set(this, "receivingGiftsInfo", [
                            ...this.receivingGiftsInfo,
                            ...datas.list
                        ]);
                    } else {
                        this.$set(this, "receivingGiftsInfo", datas.list);
                    }
                }
                /* 获取达人动态数据 结束 */
            } else if (res.code == 400) {
                // 获取达人动态失败
                Toast(res.message);
            } else {
                // 获取优选库精选活动失败
                Toast("获取收礼订单列表失败");
            }
        },
        // 跳转回赠礼物
        giftInReturn(item){
            // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 临时,设置跳转商品详情参数
                    Object.assign(item, {
                        type: "14",
                        to: "",
                        shop_type: ""
                    });


                    this.$parent.gotoDetail(item);
                }
        },
    }
};
</script>

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