examination_f.html 7.8 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;
        }
    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
    <div class="nurse_banner" :style="{backgroundImage:'url(' + banner + ')'}">
        <!--<div class="nurse_text">{{name}}</div>-->
    </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>
    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()
                // };
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': 1
                };
                getRequest('post', 'portal/Goods/getCatInfo3', post, header).then(function (res) {
                    // alert(JSON.stringify(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 in app.goods) {
                            nav.push(app.goods[i].name)
                        }
                        app.navs = nav;
                        loadEnd()
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            }

        }
    })
</script>