mashangyoujiu/Application/Vip/View/CardBag/cardCode.html

<!doctype html>
<html>
<!--[1.8.20]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条形码</title>
    <style>
        body {
            box-sizing: border-box;
            padding: 20px 4% 0;
            background: #fcfcfc;
        }
        .all {
            width: 100%;
            position: relative;
        }
        [v-cloak] {
            display: none;
        }
        .card-code-banner {
            width: 100%;
            height: 90px;
            position: relative;
        }
        .card-code-background {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .card-code-background > img {
            width: 100%;
        }
        .card-code-name {
            height: 80px;
            width: 100%;
            position: relative;
            font-size: 16px;
            color: white;
            padding-left: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 80px;
            white-space: nowrap;
            word-break: keep-all;
            box-sizing: border-box;
        }
        .card-details {
            position: absolute;
            top: 76px;
            background: white;
            width: 100%;
            height: 150px;
            padding: 50px 0;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .card-details-up {
            text-align: center;
        }
        .card-code-num {
            color: #999999;
            font-size: 14px;
            padding-top: 10px;
        }
        .card-code {
            width: 80%;
            height: 50px;
            border: 1px solid #FAFAFA;
            margin: 0 auto;
        }
        .card-details-down {
            display: flex;
            align-items: center;
            justify-content: center;
            color: orangered;
            font-size: 16px;
        }
        .card-details-down-img > img {
            width: 20px;
            height: 19px;
            padding-right: 6px;
        }
        .no-card{
            width: 100%;
            color: #666666;
            font-size: 18px;
            text-align: center;
        }
        .code-container{
            /*width: 244px;*/
            height: 70px;
            margin: auto;
            position: relative;
        }
        .gray-code{
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(47, 50, 56, 0.35);
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 70px;
        }
    </style>
</head>
<body>
<div class="all" id="all" v-cloak>
    <div class="card-code-banner">
        <div class="card-code-background">
            <img src="__PUBLIC__/paper/images/card_background.png" alt="">
        </div>
        <div class="card-code-name">{{card_name}}</div>
    </div>
    <div class="card-details">
        <div class="card-details-up" v-if="use_code">
            <div v-if="show_tips" class="code-container">
                <div class="gray-code">请重新刷新</div>
            </div>
            <div v-else class="code-container">
                <img v-barcode="{'value':use_code}"/>
            </div>
            <div class="card-code-num">{{use_code}}</div>
        </div>
        <div class="card-details-down">
            <div class="card-details-down-img">
                <img src="__PUBLIC__/paper/images/push.png" alt="">
            </div>
            <div class="card-details-prompt" @click="getUseCode">请点击条形码刷新</div>
        </div>
    </div>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/receipt/JsBarcode.js"></script>
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script>
    Vue.directive('barcode',
        function (el, binding) {
            var str = binding.value.value;
            var options = {
                format: "CODE128",
                displayValue: false,
                height: 50,
                background: '#fff',
                lineColor: '#111'
            };
            JsBarcode(el, str, options);
        })
    new Vue({
        el: '#all',
        data: function () {
            return {
                card_name: '',                   // 次卡名称
                use_code: '',                    // 使用码
                show_tips: true,                 // 显示提示
            }
        },
        methods: {
            // 获取使用码
            getUseCode() {
                var id = "{:I('get.id')}";
                var that = this;
                $.ajax({
                    url: "{:U('getUseCode')}",
                    type: "post",
                    data: {id: id},
                    success: function (res) {
                        if (res.status == 1) {
                            that.card_name = res.card_name;
                            that.use_code = res.use_code;
                            that.show_tips = false;
                            that.$forceUpdate();
                        } else {
                            that.show_tips = true;
                        }
                    }
                })
            },
        },
        mounted() {
            this.getUseCode();
        },
    })
</script>
</html>