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>
        <!-- btn按钮筛选 -->
        <div class="tab_btn_list">
        <van-tabs @change="onStatusFiltering" v-model="btnActive" swipeable>
            <van-tab  v-for="(item,index) in (active==0?receivingGiftsTab:giveGifTab)" :title="item.name" :key="'tab'+index">

            </van-tab>
        </van-tabs>
        </div>
        <!--内容-->
        <div class="item_box">
            <div
                infinite-scroll-immediate-check="true"
                v-infinite-scroll="onInfiniteScroll"
                infinite-scroll-disabled="loading"
                :infinite-scroll-distance="50"
                infinite-scroll-throttle-delay="600"
            >
                <!-- 收礼列表 -->
                <receiving-gifts-item
                    v-show="active != 1 && active == 0"
                    @onUserInfo="onUserInfo"
                    @giftInReturn="giftInReturn"
                    @onReceivingGifts="onReceivingGifts"
                    :receivingGiftsInfo="receivingGiftsInfo"
                    :isData=this.receivingGifts.isData
                ></receiving-gifts-item>
                <!-- 送礼列表 -->
                <giftGivingItem
                    @onGiftGiving="onGiftGiving"
                    @onCancelPayment="onCancelPayment"
                    @jumpToPay="jumpToPay"
                    v-show="active != 0 && active == 1"
                    :giftGivingItem="giftGivingItem"
                    :isData= this.giftGiving.isData
                >
                </giftGivingItem>
                <!-- 没有更多了 -->
                <div v-if="active==0" class="tip_text">{{this.receivingGifts.tipText }}</div>
                <div v-else class="tip_text">{{this.giftGiving.tipText }}</div>
            </div>
        </div>
        <!-- 弹出框 -->
        <van-popup position="bottom" v-model="actionSheetShow">
            <van-picker
                show-toolbar
                :columns="orderOperation.causes"
                :default-index="2"
                @cancel="onCancel"
                @confirm="confirm"
            />
        </van-popup>
    </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 {
            receivingGiftsTab:[ // 收礼tab筛选
                {name:'全部',status:0},
                {name:'未填写地址',status:1},
                {name:'待发货',status:2},
                {name:'已完成',status:3},
                {name:'已发货',status:4}
            ],
            receivingGiftStatue:null, // 收礼订单状态筛选
            giveGifTab:[ // 送礼tab筛选
                {name:'全部',status:0},
                {name:'可分享',status:1},
                {name:'未填写地址',status:2},
                {name:'待发货',status:3},
                {name:'未领退款',status:4}
            ],
            giveGifStatue:null, // 送礼订单状态筛选
            btnActive:0, // 按钮tab状态
            active: 0,
            receivingGiftsInfo: null, // 收礼列表页数据
            loading: false, // 判断是否加载
            receivingGifts: {
                // 收礼
                loading: false, // 加载
                pages: 1, // 分页
                tipText:null, // 数据加载完提示
                isData:null // 是否有赠礼 1 有 0 无
            },
            giftGivingItem: null, // 送礼列表页数据
            giftsRuleUrl: null, // 礼物规则URL
            giftGiving: {
                // 送礼
                loading: false, // 加载
                pages: 1, // 分页
                tipText:null, // 数据加载完提示
                isData:null // 是否有赠礼 1 有 0 无
            },
            // tipText: null, // 是否已加载完
            actionSheetShow: false,
            orderOperation: {
                // 存取取消订单的信息
                causes: [], // 取消原因
                item: null //订单id
            }
        };
    },
    components: {
        receivingGiftsItem,
        giftGivingItem
    },
    created() {
        // 收礼订单列表
        this.getorderGiftList();
        // 送礼订单列表
        this.getorderGiveGiftList();
        // 赠礼规则
        this.orderGiftContent();
        // 取消订单原因获取
        this.cancelPayment();
        // 是否禁用滑动webview(none隐藏，block显示)
        this.CNDSWebScrollEnabled();
    },
    mounted() {
        // 配合原生回调
        if (this.isCNLive.value) {
            // 暴露方法，由APP调用，接受参数
            if (this.isiPhone.value) {
                window.appPaymentCallback = item => {
                    this.appPaymentCallback();
                };
            } else if (this.isAndroid.value) {
                window.payFinish = item => {
                    this.payFinish();
                };
            }
        }
    },
    methods: {
        /**
         * tab切换
         */
        onTap(active) {
            this.active = active;
            // 初始化加载状态
            this.loading = false;
            this.btnActive = 0; // 切换送礼和收礼时；初始化tab默认都为全部
            if (active == 0) {
                // 收礼订单列表
                this.getorderGiftList();
                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                this.setGiftBottomVisibleBySwitchTab(0);
            } else {
                // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                this.setGiftBottomVisibleBySwitchTab(1);
                // 送礼订单列表
                this.getorderGiveGiftList();
            }
        },
        // tab订单状态筛选
        onStatusFiltering(name, title){
            if(this.active==0){
                // 收礼订单列表
                this.receivingGiftStatue = name;
                this.receivingGifts.tipText = null;
                this.receivingGifts.pages = 1
                this.getorderGiftList(1);
            }else{
                // 送礼订单列表
                this.giveGifStatue = name;
                this.giftGiving.tipText = null;
                this.giftGiving.pages = 1;
                this.getorderGiveGiftList();
            }
        },
        /**
         * 下啦滑动加载更多
         */
        onInfiniteScroll() {
            if (this.active === 0) {
                // 收礼订单列表
                this.loading = this.receivingGifts.loading;
                this.receivingGifts.pages++;
                this.getorderGiftList();
            } else {
                // 送礼订单列表
                this.loading = this.giftGiving.loading;
                this.giftGiving.pages++;
                this.getorderGiveGiftList();
            }
            // if (!this.loading) {
            //     this.tipText = "已经全部加载完毕";
            // }
        },
        /**
         * 显示和隐藏聊天
         */
        setGiftBottomVisibleBySwitchTab(itme) {
            // 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: itme } }
                    );
                } else if (
                    window.obj &&
                    window.obj.setGiftBottomVisibleBySwitchTab
                ) {
                    // App内，Android销毁WebView
                    window.obj.setGiftBottomVisibleBySwitchTab(itme);
                }
            }
        },
        /**
         * 是否禁用滑动webview(none隐藏，block显示)
         */
        CNDSWebScrollEnabled(itme) {
            // App内
            if (this.isCNLive.value) {
                // 调用App，返回按键
                if (
                    window.webkit &&
                    window.webkit.messageHandlers &&
                    window.webkit.messageHandlers.CNDSWebScrollEnabled
                ) {
                    // App内，iOS销毁WebView
                    window.webkit.messageHandlers.CNDSWebScrollEnabled.postMessage(
                        { body: { display: "none" } }
                    );
                } else if (
                    window.obj &&
                    window.obj.setGiftBottomVisibleBySwitchTab
                ) {
                    // App内，Android销毁WebView
                    window.obj.CNDSWebScrollEnabled("none");
                }
            }
        },
        /**
         * 获取收礼礼物列表
         */
        getorderGiftList(initPage) {
            console.log(this.receivingGifts.pages)
            this.receivingGifts.loading = true;
            // 加载中提示
            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:this.receivingGiftStatue// 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
                },
                this.getorderGiftListCallback,
                {
                    method: "post",
                    initPage
                }
            );
        },

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

            // 返回处理
            if (res.code == 200) {
                // 解构数据
                let { data: datas } = res;
                 // is_data是否有赠礼 1 有 0 无
                 this.receivingGifts.isData = datas.is_data
                // 页脚等于1的时候会出现数据获取为空
                    // if(this.receivingGifts.pages==1){
                    //      this.receivingGiftsInfo = datas.list;
                    // }
                // 设置shopFnsDynamic达人动态数据
                if (datas.list && datas.list.length) {
                     // 隐藏加载圈
                    this.receivingGifts.loading = false;
                    if (this.receivingGifts.pages > 1) {
                        this.$set(this, "receivingGiftsInfo", [
                            ...this.receivingGiftsInfo,
                            ...datas.list
                        ]);
                    } else {
                        this.$set(this, "receivingGiftsInfo", datas.list);
                    }
                     // 判断是否显示没有更多
                     if(datas.list.length<20){
                         this.receivingGifts.tipText = "已经全部加载完毕";
                     }else{
                         this.receivingGifts.tipText = "";
                     }
                }else{
                    // this.receivingGifts.pages = 1; // 数据为空时页脚从1开始计算
                    if(this.receivingGifts.pages==1){
                        //页脚等于1的时候会出现数据获取为空
                        this.receivingGiftsInfo = datas.list;
                    }
                    console.log(this.receivingGifts.tipText);
                }
                /* 获取达人动态数据 结束 */
            } 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;
            // 加载中提示
            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: this.giveGifStatue // 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;
                // is_data是否有赠礼 1 有 0 无
                 this.giftGiving.isData = datas.is_data
                    // 页脚等于1的时候会出现数据获取为空
                    // if(this.receivingGifts.pages==1){
                    //      this.giftGivingItem = datas.list;
                    // }
                    // 设置giftGivingItem数据
                if (datas.list && datas.list.length) {
                    // 隐藏加载圈
                    this.giftGiving.loading = false;
                    if (this.giftGiving.pages > 1) {
                        this.$set(this, "giftGivingItem", [
                            ...this.giftGivingItem,
                            ...datas.list
                        ]);
                    } else {
                        this.$set(this, "giftGivingItem", datas.list);
                    }
                    // 判断是否显示没有更多
                     if(datas.list.length<20){
                         this.giftGiving.tipText = "已经全部加载完毕";
                     }else{
                         this.giftGiving.tipText = "";
                     }
                }else{
                    // this.giftGiving.pages = 1;// 数据为空时设置分页数为1
                    if(this.giftGiving.pages==1){
                        //页脚等于1的时候会出现数据获取为空
                        this.giftGivingItem = datas.list;
                    }
                    // this.tipText = "已经全部加载完毕"; //提示全部加载为空
                }
                /* 获取送礼订单列表 结束 */
            } 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") {
                // 临时，设置跳转商品详情参数
                let item = {
                    type: "44",
                    to: this.giftsRuleUrl,
                    shop_type: ""
                };
                console.log(item);
                this.$parent.gotoDetail(item);
            }
        },
        // 取消支付
        cancelPayment() {
            // 加载中提示
            Indicator.open("加载中...");
            // 获取送礼礼物列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/cancel_order_group",
                {},
                this.cancelPaymentCallback,
                {
                    method: "get"
                }
            );
        },
        /**
         * 取消订单回调获取取消原因数据
         * @param {object} res [服务器返回数据]
         * @param {object} ext [扩展参数]
         */
        cancelPaymentCallback(res, ext) {
            // 加载完成
            Indicator.close();

            // 返回处理
            if (res.code == 200) {
                // 解构数据
                let { data: datas } = res;
                // 获取到的数组存到this.causes中去
                if (datas.group && datas.group.length > 0) {
                    this.orderOperation.causes = datas.group;
                }
            }
        },
        // 取消支付子组件事件传递
        onCancelPayment(item) {
            // 隐藏底部聊天弹框
            this.setGiftBottomVisibleBySwitchTab(0);
            this.actionSheetShow = true; // 显示底部取消订单原因弹框
            this.orderOperation.item = item; // 获取当前操作订单ID
        },
        // 确认，取消订单
        confirm(picker, value, index) {
            this.actionSheetShow = false;
            // Toast(`当前值：${value}, 当前索引：${index}`);
            // 调用取消订单原因填写
            this.cancelorder(this.orderOperation.item, value);
        },
        // 取消，取消订单
        onCancel() {
            this.actionSheetShow = false;
        },
        // 取消支付填写原因
        cancelorder(item, content) {
            // 加载中提示
            Indicator.open("加载中...");

            // 获取送礼礼物列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/cancel_order",
                {
                    id: item.id, // 订单ID
                    content: content // 取消订单ID
                },
                this.cancelorderCallback,
                {
                    method: "post",
                    item
                }
            );
        },
        /**
         * 取消订单回调获取取消原因数据
         * @param {object} res [服务器返回数据]
         * @param {object} ext [扩展参数]
         */
        cancelorderCallback(res, ext) {
            // 加载完成
            Indicator.close();
            // 返回处理
            if (res.code == 200) {
                // 取消订单
                if (ext.item.status == "0") {
                    // status=3(订单已经关闭)
                    this.$set(ext.item, "status", "3");
                }
                // 解构数据
                let { data: datas } = res;
                // 获取到的数组存到this.causes中去
                if (datas.group && datas.group.length > 0) {
                    this.causes = datas.group;
                }
            }
        },
        // 跳转原声支付
        jumpToPay(item) {
            // 隐藏底部聊天弹框
            this.setGiftBottomVisibleBySwitchTab(0);
            // 获取当前操作的支付订单
            this.orderOperation.item = item;
            // App内
            if (this.isCNLive.value) {
                // 调用App，返回按键
                if (
                    window.webkit &&
                    window.webkit.messageHandlers &&
                    window.webkit.messageHandlers.openAppPayment
                ) {
                    // App内，iOS销毁WebView
                    window.webkit.messageHandlers.openAppPayment.postMessage({
                        body: { orderNumber: item.orderid }
                    });
                } else if (window.obj && window.obj.jumpToPay) {
                    // App内，Android销毁WebView
                    window.obj.jumpToPay(item.orderid);
                }
            }
        },
        // ios支付成功回调
        appPaymentCallback(item) {
            // 取消订单
            if (this.orderOperation.item.status == "0") {
                // status=1(已支付可分享状态)
                this.$set(this.orderOperation.item, "status", "1");
            }
        },
        // 安卓支付成功回调
        payFinish() {
            // 检测是否已支付
            this.cancelorder(this.orderOperation.item);
        },
        // 安卓调用支付后检测是否已支付
        cancelorder(item) {
            // 加载中提示
            Indicator.open("加载中...");

            // 获取送礼礼物列表接口
            this.http(
                "/Api/" + this.getApiVersion().index + "/isOrderPay",
                {
                    orderId: item.orderid // 订单编号
                },
                this.cancelorderCallback,
                {
                    method: "post",
                    item
                }
            );
        },
        /**
         * 取消订单回调获取取消原因数据
         * @param {object} res [服务器返回数据]
         * @param {object} ext [扩展参数]
         */
        cancelorderCallback(res, ext) {
            // 加载完成
            Indicator.close();
            // 返回处理
            if (res.code == 200) {
                // 订单支付成功
                if (ext.item.status == "0") {
                    // status=3(订单已经关闭)
                    this.$set(ext.item, "status", "1");
                }
            }
        }
    }
};
</script>

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