mashangyoujiu/Application/Blessing/View/Tourist/index.html

<!--[1.8.20]-->
<!doctype html>
<html>

<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">
    <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/js/common.js"></script>

    <title>送祝福</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            overflow: hidden;
        }

        #blessing-tourist {
            width: 100%;
            max-width: 720px;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .index {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .index input {
            width: 50%;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #dcdfe6;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .index input:focus {
            outline: 0;
            border-color: #409eff;
        }

        button {
            border-radius: 5px;
            margin-top: 25px;
            width: 50%;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            border: 1px solid #409eff;
            color: #fff;
            background-color: #409eff;
        }

        button:hover {
            background: #66b1ff;
            border-color: #66b1ff;
        }

        button:focus {
            outline: 0;
        }

        audio,
        video {
            outline: 0;
        }

        .view {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .view p {
            width: 100%;
            font-size: 14px;
            color: #333;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="blessing-tourist">
        <div class="index" v-if="!url">
            <input type="text" v-model="code" placeholder="请输入祝福码">
            <button @click="getData">进入</button>
        </div>
        <div class="view" v-else>
            <video :src="url" width="80%" controls="controls" v-if="type == 1"></video>
            <audio :src="url" controls="controls" v-if="type == 2"></audio>
            <p v-if="validityTime">有效期至：{{validityTime}}（过期后将不能查看）</p>
            <!-- <a :href="url" download>保存{{type == 1 ? '视频' : '音频'}}</a> -->
        </div>
    </div>
</body>
<script src="/Public/js/moment.min.js"></script>
<script src="/Public/js/moment-locales.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#blessing-tourist',
        data() {
            return {
                code: '',       //祝福码
                type: '',       //音视频类型
                url: '',        //音视频地址
                validityTime: '' //有效期
            }
        },
        methods: {
            /**
             * @description 获取祝福详情
             */
            getData() {
                this.sendRequest('Blessing/Tourist/blessingList', {
                    data: {
                        storeId: this.getUrlParam('storeId'),
                        extractionCode: this.code
                    },
                    success: (response) => {
                        if (response.status == 1) {
                            const data = response.data
                            this.type = data.type
                            this.url = data.address
                            moment.locale('zh-cn')
                            this.validityTime = data.validity_time > 1 ? moment(data.validity_time * 1000).format('lll') : ''
                        } else {
                            alert(response.message)
                        }
                    }
                })
            },
            getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
                var r = window.location.search.substr(1).match(reg)
                if (r != null) return unescape(r[2]); return null
            }
        }
    })
</script>

</html>