mashangyoujiu/Application/Vip/View/Turntable/activitys.html

<!DOCTYPE html>
<html>
<!--[1.4.13]-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
    <title>我的活动</title>
    <style>
        body {
            background-color: #F6F6F6;
        }

        /* body{height: 100vh;overflow: scroll;margin: 0;padding: 0;} */
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .contentsq {
            height: 92.5vh;
            overflow: scroll;
            margin: 0;
            padding: 0;
        }

        .contentsw {
            height: 92.5vh;
            overflow: scroll;
            margin: 0;
            padding: 0;
        }

        .main {
            font-size: 32px;
        }

        .navs {
            display: flex;
            background-color: #FFFFFF;
        }

        .navs > div {
            width: 50vw;
            text-align: center;
            line-height: 100px;
        }

        .navs > div > div:nth-child(2) {
            border-bottom: 4px solid #FF5C6D;
            width: 3vw;
            position: relative;
            left: 23vw;
            top: -1.5vh;
        }

        /* 内容 */
        .contents1 {
            margin: 25vh 0 0 35vw;
        }

        .contents1_img {
            padding-left: 2vw;
        }

        .contents1_content {
            color: #999999;
        }

        .contents2 {
            display: flex;
            margin: 2vh 3vw;
        }

        .contents2_2 {
            display: flex;
        }

        .contents2_1 {
            width: 13vw;
            border-radius: 15px;
            background-color: #FFFFFF;
            border-right: 4px dashed #E5E5E5;
            padding: 2vh 4vw 2vw 6vw;
        }

        .contents2_2 {
            width: 70vw;
            border-radius: 15px;
            background-color: #FFFFFF;
            padding: 2vh 4vw 2vw 6vw;
        }

        .contents2_21 {
            color: #999999;
        }

        .contents2_22 {
            width: 20vw;
            height: 80px;
            background-color: #EEEEEE;
            line-height: 80px;
            text-align: center;
            border-radius: 100px;
            color: #FFFFFF;
            margin-left: 12vw;
        }

        .contents2_22s {
            width: 20vw;
            height: 80px;
            background-color: #FF5C6D;
            line-height: 80px;
            text-align: center;
            border-radius: 100px;
            color: #FFFFFF;
            margin-left: 12vw;
        }

        /* 红包 */
        .contents2_1ss {
            width: 13vw;
            border-radius: 15px;
            background-color: #666666;
            border-right: 4px dashed #E5E5E5;
            padding: 3vh 4vw 2vw 6vw;
            color: #FFFFFF;
        }

        .contents2_2ss {
            width: 70vw;
            border-radius: 15px;
            background-color: #666666;
            padding: 2vh 4vw 2vw 6vw;
        }

        .contents2_21ss:nth-child(1) {
            color: #E5E5E5;
        }

        .contents2_21ss:nth-child(2) {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="main">
        <!-- 导航 -->
        <div class="navs">
            <div @click="Choices1">
                <div>大转盘</div>
                <div v-if="Choices==0"></div>
            </div>
            <div @click="Choices2">
                <div>红包</div>
                <div v-if="Choices==1"></div>
            </div>
        </div>
        <!-- 内容 大转盘-->
        <div class="contentsq" v-show="Choices==0">
            <div class="contents1" v-if="list==''">
                <div class="contents1_img"><img src="/Public/Turntable/img/noorder.png"></div>
                <div class="contents1_content">还没有获得奖品哦~</div>
            </div>
            <div v-if="list!=''" v-for="(item,index) in list" :key="index">
                <div class="contents2">
                    <div class="contents2_1"><img src="/Public/activity/lis.png"></div>
                    <div class="contents2_2">
                        <div class="contents2_21">
                            <div>{{item.prize_name}}</div>
                            <div>{{item.add_time}}</div>
                        </div>
                        <!-- 已发放 -->
                        <div class="contents2_22" v-if="types1 == 1">{{item.typea1}}</div>
                        <!-- 领取 -->
                        <div class="contents2_22s" v-if="types1 == 2" @click="hrefs(item,index)">{{item.typea2}}</div>
                    </div>
                </div>
            </div>
            <div style="font-size: 36px;color: #999999;line-height: 28px;height: 60px;
			margin-left: 33vw;" v-if="list.length%10!=0">没有更多数据
            </div>
            <div style="font-size: 36px;color: #999999;line-height: 28px;height: 60px;
			margin-left: 39vw;" v-if="list.length%10==0">加载中
            </div>
        </div>
        <!-- 内容 红包-->
        <div class="contentsw" v-show="Choices==1">
            <div class="contents1" v-if="lists1==''">
                <div class="contents1_img"><img src="/Public/Turntable/img/noorder.png"></div>
                <div class="contents1_content">还没有获得奖品哦~</div>
            </div>
            <div v-if="list!=''" v-for="(item,index) in lists1" :key="index" style="overflow: scroll;">
                <div class="contents2">
                    <div class="contents2_1ss">${{item.money}}</div>
                    <div class="contents2_2ss">
                        <div class="contents2_21ss">
                            <div>{{item.remark}}</div>
                            <div>{{item.addtimes}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="font-size: 36px;color: #999999;line-height: 28px;height: 60px;
			margin:-1vh 0 0 34vw;" v-if="lists1.length%10!=0">没有更多数据
            </div>
            <div style="font-size: 36px;color: #999999;line-height: 28px;height: 60px;
			margin:-1vh 0 0 39vw;" v-if="lists1.length%10==0">加载中
            </div>
        </div>
    </div>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                Choices: 0,//大转盘红包区分
                list: [],//奖品
                types1: 0,//判断领取状态
                lists1: [],//红包数据
                limit: 1,//红包每页数
                page_size: 1,//大转盘每页数
            }
        },
        methods: {
            pulls() {
                let els = document.querySelector('.contentsq')
                if (this.Choices == 0) {
                    els.onscroll = () => {
                        console.log("1");
                        let scrollTops = els.scrollTop;
                        let offsetHeights = els.offsetHeight;
                        let scrollHeights = els.scrollHeight;
                        if (scrollTops + offsetHeights >= scrollHeights && this.list.length % 5 == 0) {
                            setTimeout(() => {
                                this.page_size = parseInt(this.page_size + 1)
                                this.getTurntable()
                            }, 1000)
                        }
                    }
                }
                let el = document.querySelector('.contentsw')
                if (this.Choices == 1) {
                    el.onscroll = () => {
                        console.log("2");
                        let scrollTops = el.scrollTop;
                        let offsetHeights = el.offsetHeight;
                        let scrollHeights = el.scrollHeight;
                        if (scrollTops + offsetHeights >= scrollHeights && this.lists1.length % 5 == 0) {
                            setTimeout(() => {
                                this.limit = parseInt(this.limit + 1)
                                this.getReward()
                            }, 1000)
                        }
                    }
                }
            },
            // 我的活动中奖记录大转盘
            getTurntable() {
                this.pulls()
                $.ajax({
                    url: '{:U("Turntable/TurntableWinList")}',
                    type: 'post',
                    data: {
                        page: this.page_size,
                        page_size: 10
                    },
                    dataType: 'json',
                    success: res => {
                        if (res.code != 44001) {
                            this.list = this.list.concat(res.data.data)
                            // 已发放领取查看详情
                            if (this.list != null) {
                                this.list.forEach(res => {
                                    if (res.type == 3 || res.type == 4) {
                                        this.types1 = 1
                                        res.typea1 = "已发放"
                                    }
                                    if (res.type == 1 || res.type == 2) {
                                        this.types1 = 2
                                        if (res.status == 1) {
                                            res.typea2 = "领取"
                                        } else if (res.status == 2) {
                                            res.typea2 = "查看详情"
                                        }
                                    }
                                })
                            }
                        }
                    }
                })
            },
            // 我的活动中奖记录红包
            getReward() {
                $.ajax({
                    url: '{:U("Reward/rewardList")}',
                    type: 'post',
                    data: {
                        page: this.limit,
                        limit: 10
                    },
                    dataType: 'json',
                    success: res => {
                        this.lists1 = this.lists1.concat(res)
                    }
                })
            },
            Choices1() {
                this.Choices = 0
            },
            Choices2() {
                this.Choices = 1
                this.pulls()
            },
            // 领取
            hrefs(item, index) {
                if (item.status == 1) {
                    let win_id = item.id;//中奖记录ID
                    let prize_id = item.prize_id;//奖品ID
                    let prize_type = item.type;//奖品类型
                    window.location.href = `{:U('choose_send_type')}?win_id=${win_id}&prize_id=${prize_id}&prize_type=${prize_type}`;
                } else {
                    window.location.href = "{:U('prizeDetails')}"
                }
            }
        },
        mounted: function () {
            this.pulls()
            this.getReward()
            this.getTurntable()
        }
    })
</script>
</html>