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

<!DOCTYPE html>
<html>
<!--[1.4.13]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <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>
        * {
            padding: 0;
            margin: 0;
        }

        .flex-row-center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .main {
            background-color: #eee;
            width: 100vw;
            height: 100vh;
            background-size: 100% 100%;
            box-sizing: border-box;
        }

        .header {
            height: 61%;
            background-color: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .header > div:nth-child(1) {
            position: relative;
        }

        .header > div:nth-child(1) {
            width: 70%;
            height: 50vh;
        }

        .header > div:nth-child(1) > img {
            width: 100%;
            height: 100%;
        }

        .header > div:nth-child(2) {
            position: absolute;
            width: 100%;
            height: 7vh;
            bottom: 0;
            background-color: black;
            opacity: 0.5;
            z-index: 100;
            color: #fff;
            text-align: center;
            line-height: 7vh;
        }

        .bottom {
            width: 100%;
            height: 20%;
            margin-top: 3%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bottom > div:nth-child(1) {
            font-size: 0.7rem;
            color: #999999;
            margin-bottom: 5%;
        }

        .bottom > div:nth-child(2) > button {
            border: none;
            height: 6vh;
            width: 85vw;
            background: -webkit-linear-gradient(left, #ff948a, #ff5c6d);
            border-radius: 50px;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="main">
        <div class="header">
            <div class="flex-row-center">
                <img :src='shop_img' alt="">
            </div>
            <div>{{ prizeDetailed.prize_name }}</div>
        </div>
        <div class="bottom">
            <div v-if="prizeDetailed.grant_type==1">注：该商品由商户发放</div>
            <div v-else-if="prizeDetailed.grant_type==2">注：该商品由门店发放</div>
            <div v-else-if="prizeDetailed.grant_type==0">未知</div>
            <div>
                <button v-if="prizeDetailed.status==1" @click="go">立即领取</button>
                <button v-else-if="prizeDetailed.status==2">查看详细</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" 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 {
                win_id: '',
                prizeDetailed: [],
                shop_img: ''
            }
        },
        mounted: function () {
            this.getPrizeDetails()
            this.win_id = getQueryVariable('ids')
        },
        methods: {
            getPrizeDetails() {
                console.log(getQueryVariable('ids'))
                $.ajax({
                    type: 'post',
                    url: "{:U('Vip/Turntable/winTurntablePrizeDetail')}",
                    dataType: 'json',
                    data: {
                        win_id: this.win_id,
                    },
                    success: (data) => {
                        console.log(data)
                        if (data.code == 0) {
                            this.prizeDetailed = data.data
                            console.log(this.prizeDetailed)
                            this.shop_img = data.data.prize_img
                        }
                    },
                    error: function () {
                        alert("数据请求失败")
                    }
                })
            },
            go() {
                var win_id = this.win_id
                console.log(win_id)
                window.location.href = `{:U('Turntable/choose_send_type')}?win_id=${win_id}`
            }
        }
    })
</script>
</html>