examination_f.html 8.1 KB
<!doctype html>
<html lang="en">
<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">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <style>
        body {
            background-color: #efefef;
        }

        .examination_swiper {
            background-color: #fff;
        }

        .examination_swiper .swiper-slide {
            width: auto;
            /*min-width: 23%;*/
            font-size: 15px;
            color: #424242;
            text-align: center;
            margin: 0 0.25rem;
        }

        .examination_swiper .swiper-slide span {
            padding: 0.16rem 0;
            color: #424242;
        }

        .examination_active {
            color: #D8B25F;
            border-bottom: 0.04rem solid #D8B25F;
        }

        .examination_box {
            margin: 0.1rem 0;
            background-color: #fff;
            box-shadow: 0.01rem 0.02rem 0.05rem #C8C6C6;
        }

        .old_price {
            color: #979797;
            font-size: 11px;
            text-decoration: line-through;
            margin: 0 0 0 0.28rem;
        }

        .swiper_item {
            /*padding: 0.28rem 0.25rem;*/
        }
        .warp{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" class="warp" >
    {{JSON.stringify(banner)}}
    <!--<div class="nurse_banner" :style="{backgroundImage:'url(' + banner + ')'}">-->
        <!--&lt;!&ndash;<div class="nurse_text">{{name}}</div>&ndash;&gt;-->
    <!--</div>-->
    <!--<div class="examination_box">-->
        <!--<div class="examination_swiper">-->
            <!--<div class="swiper-container">-->
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide" v-for="(item,index) in navs">-->
                        <!--<span v-text="item" :class="{'examination_active':index==ind}"-->
                              <!--@click="changeSwiper(index)"></span>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="examination_content_swiper">-->
            <!--<div class="swiper-container ">-->
                <!--<div class="swiper-wrapper">-->
                    <!--<div class="swiper-slide" v-for="(item,index) in goods">-->
                        <!--<div class="swiper_list">-->
                            <!--<div class="swiper_item nodata" v-if="item.goods.length==0">暂无信息</div>-->
                            <!--<div class="swiper_item" v-else @click="openDoc(i.good_id)"-->
                                 <!--v-for="(i,iindex) in item.goods">-->
                                <!--<div class="swiper_item_img"><img :src="i.img" alt=""></div>-->
                                <!--<div class="swiper_item_right">-->
                                    <!--<div class="swiper_item_title">{{i.post_title}}</div>-->
                                    <!--<div class="swiper_item_content">{{i.other_title}}</div>-->
                                    <!--<div class="swiper_item_type">-->
                                        <!--<div class="swiper_item_type1" v-for="(j,item2_index) in i.tag">-->
                                            <!--<div class="icon_img"><img :src="j.url" alt=""></div>-->
                                            <!--<span>{{j.text}}</span>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div class="swiper_item_money"><span>¥{{i.real_price?i.real_price:0}}</span><span-->
                                            <!--class="old_price">¥{{i.price?i.price:0}}</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
    alert(1);
    var app = new Vue({
        el: '#app',
        data: {
            banner: '',
            name: '',
            navs: [
                // {nav_item: '特惠产品'},
                // {nav_item: '肿瘤检测'},
                // {nav_item: '基因检测'},
                // {nav_item: '健康体检'},
                // {nav_item: '好孕妇儿'}
            ],
            ind: 0,
            Swiper1: {},
            mySwiper: {},
            cid: '',
            goods: []
        },
        created: function () {
            apiready = function () {
                app.cid = api.pageParam.cid;
                // alert(app.id)
                app.getCatInfo3();
                // //导航轮播
                 app.mySwiper = new Swiper('.examination_swiper .swiper-container', {
                     slidesPerView: 'auto',
                     slideToClickedSlide: true,
                     observer: true,
                     observeParents: true,
                     freeMode: true
                 });
                 //内容轮播
                 app.Swiper1 = new Swiper('.examination_content_swiper .swiper-container', {
                     observer: true,
                     observeParents: true,
                     autoHeight: true,
                     onTransitionEnd: function (swiper) {
                         app.ind = swiper.activeIndex;
                         app.mySwiper.slideTo(swiper.activeIndex, 500)
                         // alert(swiper.activeIndex);
                     }
                 });
            }
        },
        methods: {
            changeSwiper: function (index) {
                app.Swiper1.slideTo(index, 500);
                app.ind = index
            },
            openDoc: function (id) {
                api.openWin({
                    name: 'care_w',
                    url: './care_w.html',
                    pageParam: {
                        id: id,
                        cid: app.cid
                    }
                })
            },
            getCatInfo3: function () {
                var post = {
                    cid: app.cid
                };
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'portal/Goods/getCatInfo3', post, header).then(function (res) {

                    if (res.data.code == 1) {
                        app.banner = res.data.data.img;
                        app.name = res.data.data.name;
                        app.goods = res.data.data.goods;
                        var nav = [];
                        for(var i=0;i<app.goods.length;i++){
                            nav.push(app.goods[i].name)
                        }

                        app.navs = nav;

                        loadEnd()
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            }

        }
    })
</script>