新增速溶茶页面

zhiyangdu
1 parent 089148e9
Showing 3 changed files with 171 additions and 1 deletions
src/pages/instantTea/instantTea.less
src/pages/instantTea/instantTea.vue
src/router/index.js
+.instantTea_box{
+    .div1{
+
+    }
+    .div2{
+
+    }
+    .div3{
+
+    }
+    .div4{
+
+    }
+    .div5{
+
+    }
+    .div6{
+
+    }
+    .div7{
+
+    }
+    //返回和分享功能
+    .top_box{
+        width: calc(100% - 60px);
+        height: 100px;
+        position: fixed;
+        left: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        img{
+            width: 64px;
+            height: 64px;
+        }
+    }
+}
+<template>
+    <div>
+        <!-- H5唤起App组件 -->
+        <call-app-box v-if="!isCNLive.value"
+                      :callApps="$parent.callApps">
+        </call-app-box>
+        <div class="instantTea_box">
+            <div class="div1">
+
+            </div>
+            <div class="div2">
+
+            </div>
+            <div class="div3">
+
+            </div>
+            <div class="div4">
+
+            </div>
+            <div class="div5">
+
+            </div>
+            <div class="div6">
+
+            </div>
+            <div class="div6">
+
+            </div>
+            <!--头部返回和分享-->
+            <div v-show="isCNLive.value" :style= "'top:'+ $parent.top.value + 'px'" class="top_box">
+                <img @click="$parent.back()" src="../../../static/img/back.jpg" alt=""/>
+                <img @click="$parent.toShare('22','1')" src="../../../static/img/share.jpg" alt=""/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {videoPlayer} from 'vue-video-player';
+    import 'video.js/dist/video-js.css';
+    import '../../../static/css/video.css';
+    import callAppBox from "@/components/callAppBox/callAppBox";
+    export default {
+        name: 'instantTea',
+        data () {
+            return {
+                callApps: null, // 打开app参数
+                playsinline: true,
+                playerOptions: {
+                    events: [],
+                    playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
+                    autoplay: false, // 如果true,浏览器准备好时开始回放。
+                    controls: true, //  控制条
+                    preload: 'auto', // 视频预加载
+                    muted: false, //  默认情况下将会消除任何音频。
+                    loop: false, // 导致视频一结束就重新开始。
+                    language: 'zh-CN',
+                    controlBar: {
+                        timeDivider: true,
+                        durationDisplay: true
+                    },
+                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                    sources: [{
+                        type: "video/mp4",
+                        src: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4"
+                    }],
+                    hls: true, // 启用hls？
+                    poster: 'https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/04/5e1068d441b41.jpg', // 你的封面地址
+                    width: document.documentElement.clientWidth || document.body.clientWidth,
+                    notSupportedMessage: '此视频暂无法播放，请稍后再试' //  允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                }
+            }
+        },
+        components: {
+            videoPlayer,
+            callAppBox
+        },
+        created(){
+            document.title = '崇学向善 鼠年有礼';
+            // 获取并设置分享参数
+            this.$parent.getShareData({
+                type: 22,
+                id: this.$route.query.appid || 1,
+                url: ""
+            });
+        },
+        methods: {
+            link(){
+                if(this.isCNLive.value){
+                    let items;
+                        items={
+                            "title": "",
+                            "type": "2",
+                            "shop_type":"2",
+                            "to":"9620396",
+                        }
+                    this.$parent.gotoDetail(items)
+
+                }else {
+                        window.location.href = this.getParams(this.mode).shop.apiAddress + "/html/mall/1/#/pages/main/cultureDetail/cultureDetail?id=9620396"
+                }
+            },
+            /**
+             * 视频播放
+             * @param {object} $event [播放器对象]
+             */
+            onPlayerPlay(event) {
+//                if (event == 1) {
+//                    this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e09739a07d18.mp4"
+//                } else {
+//                    this.playerOptions.sources[0].src = "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/30/5e0973f0aa9be.mp4"
+//                }
+            },
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import "instantTea";
+</style>
@@ -17,7 +17,7 @@ const router = new Router({
             redirect: "/luckywheel",
             children: [
                 {
-                    // 积分兑换记录
+                    // 首页
                     path: "/index",
                     name: "index",
                     component: resolve => {
@@ -26,6 +26,17 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // 速溶茶
+                    path: "/instantTea",
+                    name: "instantTea",
+                    component: resolve => {
+                        require(["@/pages/instantTea/instantTea"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
             ]
         },