w-front-end / select_good · Files

<template>
    <div class="my_gift_box">
        <!--tab切换-->
        <div
            class="top_box"
            :style="'padding-top: ' + $parent.top.value + 'px'"
        >
            <img @click="$parent.back" src="static/img/icon_back.png" />
            <div class="tabs">
                <van-tabs @change="onTap" v-model="active">
                    <van-tab title="收礼"></van-tab>
                    <van-tab title="送礼"></van-tab>
                </van-tabs>
            </div>
            <div class="desc" @click="giftRules">规则说明</div>
        </div>
        <!--内容-->
        <div class="item_box">
            <div
                infinite-scroll-immediate-check="true"
                v-infinite-scroll="getorderGiftList"
                infinite-scroll-disabled="loading"
                :infinite-scroll-distance="50"
            >
                <!-- 收礼列表 -->
                <receiving-gifts-item
                    v-show="active != 1 && active == 0"
                    @onUserInfo="onUserInfo"
                    @giftInReturn="giftInReturn"
                    @onReceivingGifts="onReceivingGifts"
                    :receivingGiftsInfo="receivingGiftsInfo"
                ></receiving-gifts-item>
                <!-- 送礼列表 -->
                <giftGivingItem
                    @onGiftGiving="onGiftGiving"
                    v-show="active != 0 && active == 1"
                    :giftGivingItem="giftGivingItem"
                >
                </giftGivingItem>
            </div>
        </div>
    </div>
</template>

<script>
// 引入组件
import { Toast, Indicator } from "mint-ui";
import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem"; // 收礼列表
import giftGivingItem from "@/components/giftGivingItem/giftGivingItem"; // 送礼列表
export default {
    name: "myGiftBox",
    data() {
        return {
            active: 0,
            receivingGiftsInfo: null, // 收礼列表页数据
            receivingGifts: {
                loading: false, // 加载
                pages: 0 // 分页
            },
            giftGivingItem: null, // 送礼列表页数据
            giftsRuleUrl:null, // 礼物规则URL
            giftGiving: {
                loading: false, // 加载
                pages: 0 // 分页
            }
        };
    },
    components: {
        receivingGiftsItem,
        giftGivingItem
    },
    created() {
        // 收礼订单列表
        this.getorderGiftList();
        // 送礼订单列表
        this.getorderGiveGiftList();
        // 赠礼规则
        this.orderGiftContent()
    },
    methods: {
        onTap(active) {
            this.active = active;
            if (active === 1) {
                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                this.setGiftBottomVisibleBySwitchTab(1);
            } else {
                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                this.setGiftBottomVisibleBySwitchTab(1);
            }
        },
        /**
         * 显示和隐藏聊天
         */
        setGiftBottomVisibleBySwitchTab() {
            // App内
            if (this.isCNLive.value) {
                // 调用App，返回按键
                if (
                    window.webkit &&
                    window.webkit.messageHandlers &&
                    window.webkit.messageHandlers
                        .setGiftBottomVisibleBySwitchTab
                ) {
                    // App内，iOS销毁WebView
                    window.webkit.messageHandlers.setGiftBottomVisibleBySwitchTab.postMessage(
                        { body: { visible: 1 } }
                    );
                } else if (
                    window.obj &&
                    window.obj.setGiftBottomVisibleBySwitchTab
                ) {
                    // App内，Android销毁WebView
                    window.obj.setGiftBottomVisibleBySwitchTab(1);
                }
            }
        },
        /**
         * 获取收礼礼物列表
         */
        getorderGiftList() {
            this.receivingGifts.loading = true;
            this.receivingGifts.pages++;
            // 加载中提示
            Indicator.open("加载中...");

            // 获取收礼礼物列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/orderGiftList",
                {
                    uid: this.$route.query.uid, // 用户id
                    page: this.receivingGifts.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.receivingGifts.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("获取收礼订单列表失败");
            }
        },
        // 跳转到用户详情页
        onUserInfo(item) {
            // 判断并调用通用跳转
            if (typeof this.$parent.gotoDetail === "function") {
                // 临时，设置跳转商品详情参数
                Object.assign(item, {
                    type: "43",
                    to: JSON.stringify({
                        uid: item.user.uid,
                        username: item.user.username,
                        img: item.user.img
                    }),
                    shop_type: ""
                });
                this.$parent.gotoDetail(item);
            }
        },
        // 跳转回赠礼物
        giftInReturn(item) {
            // 判断并调用通用跳转
            if (typeof this.$parent.gotoDetail === "function") {
                // 临时，设置跳转商品详情参数
                Object.assign(item, {
                    type: "14",
                    to: "",
                    shop_type: ""
                });

                this.$parent.gotoDetail(item);
            }
        },
        // 收礼商品跳转到详情页
        onReceivingGifts(item) {
            // 判断并调用通用跳转
            if (typeof this.$parent.gotoDetail === "function") {
                // 临时，设置跳转商品详情参数
                Object.assign(item, {
                    type: "26",
                    to: item.id,
                    shop_type: ""
                });

                this.$parent.gotoDetail(item);
            }
        },
        // 送礼商品跳转到详情页
        onGiftGiving(item) {
            // 判断并调用通用跳转
            if (typeof this.$parent.gotoDetail === "function") {
                // 临时，设置跳转商品详情参数
                Object.assign(item, {
                    type: "36",
                    to: item.id,
                    shop_type: ""
                });

                this.$parent.gotoDetail(item);
            }
        },
        /**
         * 获取送礼礼物列表
         */
        getorderGiveGiftList() {
            this.giftGiving.loading = true;
            this.giftGiving.pages++;
            // 加载中提示
            Indicator.open("加载中...");

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

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

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

                if (datas.list && datas.list.length) {
                    // 隐藏加载圈
                    this.giftGiving.loading = false;
                    if (this.pages > 1) {
                        this.$set(this, "giftGivingItem", [
                            ...this.giftGivingItem,
                            ...datas.list
                        ]);
                    } else {
                        this.$set(this, "giftGivingItem", datas.list);
                    }
                    console.log(this.giftGivingItem);
                }
                /* 获取送礼订单列表 结束 */
            } else if (res.code == 400) {
                // 获取送礼订单列表失败
                Toast(res.message);
            } else {
                // 获取送礼订单列表失败
                Toast("获取送礼订单列表失败");
            }
        },
        /**
         * 赠礼规则url
         */
        orderGiftContent() {
            // 加载中提示
            Indicator.open("加载中...");

            // 赠礼规则url列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/orderGiftContent",
                {},
                this.orderGiftContentCallback,
                {
                    method: "post"
                }
            );
        },
        /**
         * 赠礼规则url列表接口回调
         * @param {object} res [服务器返回数据]
         * @param {object} ext [扩展参数]
         */
        orderGiftContentCallback(res, ext){
             // 加载完成
            Indicator.close();

            // 返回处理
            if (res.code == 200) {
                 // 解构数据
                let { data: datas } = res;
                this.giftsRuleUrl = datas.content
            }
        },
        // 送礼规则说明
        giftRules(){
            // 判断并调用通用跳转
            if (typeof this.$parent.gotoDetail === "function") {
                // 临时，设置跳转商品详情参数
                Object.assign(item, {
                    type: "44",
                    to: this.giftsRuleUrl,
                    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>