审查视图

html/index/examination_f.html 9.7 KB
dl authored
1 2 3 4 5 6 7 8 9 10 11 12
<!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">
朱振飞 authored
13
    <link rel="stylesheet" href="../../assets/css/common_header.css">
dl authored
14 15 16 17 18 19 20 21 22 23
    <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;
        }
朱振飞 authored
24 25 26 27 28 29
        .swiper-slide{
            /*display: none;*/
        }
        .swiper-slide.swiper-slide-active{
            display: block;
        }
dl authored
30 31 32 33 34 35 36 37 38 39 40 41 42
        .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;
        }
朱振飞 authored
43 44 45
        .warp{
            overflow-y: scroll;
        }
dl authored
46 47 48 49 50 51
        .examination_active {
            color: #D8B25F;
            border-bottom: 0.04rem solid #D8B25F;
        }

        .examination_box {
朱振飞 authored
52
            flex:1;
dl authored
53 54 55
            margin: 0.1rem 0;
            background-color: #fff;
            box-shadow: 0.01rem 0.02rem 0.05rem #C8C6C6;
朱振飞 authored
56 57 58 59 60 61
            display: flex;
            display: -webkit-flex;
            display: -webkit-box;
            flex-flow: column;
            -webkit-flex-flow: column;
            -webkit-box-orient: vertical;
朱振飞 authored
62 63 64
            -webkit-margin-start: auto;
            width: 100%;
            box-sizing: border-box;
dl authored
65 66 67 68 69 70 71 72 73 74
        }

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

        .swiper_item {
dl authored
75
            /*padding: 0.28rem 0.25rem;*/
dl authored
76
        }
sgj authored
77
        .warp{
朱振飞 authored
78 79 80 81 82 83
            display: flex;
            display: -webkit-flex;
            display: -webkit-box;
            flex-flow: column;
            -webkit-flex-flow: column;
            overflow-x: hidden;
sgj authored
84
        }
朱振飞 authored
85 86 87 88 89 90
        .swiper-container{
            height: 100%;
        }
        .swiper-wrapper{
            height: 100%;
        }
朱振飞 authored
91 92
    
dl authored
93 94 95
    </style>
</head>
<body>
朱振飞 authored
96
    <!-- 背景充满 -->
dl authored
97
<div id="loadStart"></div>
朱振飞 authored
98
<div id="app">
朱振飞 authored
99 100 101 102 103 104 105 106 107
    <!--<header id="header">-->
        <!--<div class="index_header white_bg">-->
            <!--<div class="close_left" onclick="closeWindow()">-->
                <!--<span class="iconfont icon-fanhui"></span>-->
            <!--</div>-->
            <!--<div class="win_mid">{{winTitle}}</div>-->
            <!--<div></div>-->
        <!--</div>-->
    <!--</header>-->
朱振飞 authored
108 109 110
    <div class="nurse_banner" :style="{backgroundImage:'url(' + banner + ')'}">
        <div class="nurse_text">{{name}}</div>
    </div>
朱振飞 authored
111 112 113 114 115 116 117 118 119
    <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>
朱振飞 authored
120 121
    <div  class="warp">
        <!-- {{JSON.stringify(banner)}} -->
朱振飞 authored
122
朱振飞 authored
123
        <div class="examination_box">
朱振飞 authored
124 125

            <div class="examination_content_swiper ">
朱振飞 authored
126
                <div class="swiper-container">
朱振飞 authored
127 128 129 130 131 132 133
                    <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="">
朱振飞 authored
134
                                    </div>
朱振飞 authored
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
                                    <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>
朱振飞 authored
150 151 152 153 154 155 156 157 158
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
dl authored
159
</div>
朱振飞 authored
160
dl authored
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
</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 () {
朱振飞 authored
193
            var app = this;
朱振飞 authored
194 195 196
            this.cid = localStorage.getItem('cid');
            this.winTitle = localStorage.getItem('winTitle');
            document.getElementsByTagName("title")[0].innerText = this.winTitle;
朱振飞 authored
197
            this.getCatInfo3();
朱振飞 authored
198
朱振飞 authored
199
           
dl authored
200 201 202
        },
        methods: {
            changeSwiper: function (index) {
朱振飞 authored
203
                var app = this;
dl authored
204 205 206 207
                app.Swiper1.slideTo(index, 500);
                app.ind = index
            },
            openDoc: function (id) {
朱振飞 authored
208 209 210 211 212 213 214 215 216
                var app = this;
                // api.openWin({
                //     name: 'care_w',
                //     url: './care_w.html',
                //     pageParam: {
                //         id: id,
                //         cid: app.cid
                //     }
                // })
dl authored
217 218
            },
            getCatInfo3: function () {
朱振飞 authored
219
                var app = this;
dl authored
220
                var post = {
朱振飞 authored
221
                    cid: this.cid
dl authored
222 223 224
                };
                var header = {
                    "XX-Device-Type": getDevice(),
sgj authored
225
                    'XX-Token': getToken()
dl authored
226 227
                };
                getRequest('post', 'portal/Goods/getCatInfo3', post, header).then(function (res) {
sgj authored
228
dl authored
229 230 231 232 233
                    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 = [];
sgj authored
234
                        for(var i=0;i<app.goods.length;i++){
dl authored
235 236 237 238 239 240 241 242 243 244
                            nav.push(app.goods[i].name)
                        }
                        app.navs = nav;
                        loadEnd()
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            }
朱振飞 authored
245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275
        },
        mounted(){
            var app = this;
            app.mySwiper = new Swiper('.examination_swiper .swiper-container', {
                slidesPerView: 'auto',
                slideToClickedSlide: true,
                observer: true,
                observeParents: true,
                freeMode: true,
                onTransitionEnd: function (swiper) {

                }
            });
            this.$nextTick(function(){
                app.Swiper1 = new Swiper('.examination_content_swiper .swiper-container', {
                    observer: true,
                    observeParents: true,
                    autoHeight: true,
                    onTouchStart: function(swiper){
                        console.log(swiper)
                    },
                    onTransitionEnd: function (swiper) {
                        console.log(this.activeIndex);
                        app.ind = swiper.activeIndex;
                        app.mySwiper.slideTo(swiper.activeIndex, 500)
                        // alert(swiper.activeIndex);
                    }
                });
            })
            //内容轮播
dl authored
276 277
        }
    })
278
</script>