index_f.html 15.9 KB
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <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/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <style>
        body, html {
            /*background-color: #efefef;*/
            height: 100%;
        }
        .banner_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.1rem;
        }

        .swiper-slide {
            width: 100% !important;
        }

        .swiper_list {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
    <div class="index_list" id="top">
        <div class="index_item" v-for="(item,index) in cat_data" @click="openItem(item.id,item.name)">
            <div class="index_img"><img :src="item.img?item.img:img_default" alt=""></div>
            <div>{{item.name}}</div>
        </div>
        <div class="menus" v-show="img_active">
            <div class="menus_item" @click="openOrder"><span class="iconfont icon-dingdan"></span><span>我的订单</span>
            </div>
            <div class="menus_item" @click="openHealth"><span class="iconfont icon-kongxin"></span><span>健康档案</span>
            </div>
            <div class="menus_item" @click="openSever"><span class="iconfont icon-kefu"></span><span>客服服务</span></div>
            <div class="menus_item" @click="openStrict"><span class="iconfont icon-icon"></span><span>认购权益</span></div>
            <!--<div class="menus_item" @click="openQrc"><span class="iconfont icon-saoyisao"></span><span>扫一扫</span></div>-->
        </div>
    </div>
    <div class="banner_box" @click="openStrict"><img src="../../assets/image/banner.png" alt=""></div>
    <div class="banner_nav_box">
        <div class="banner_item" @click="care(item.goods_id,item.title)" v-for="(item,index) in index_data">
            <div class="banner_item_left">
                <span class="banner_item_title">{{item.title}}</span>
                <span class="banner_item_content">{{item.describe}}</span>
            </div>
            <div class="banner_item_img">
                <img :src="item.img?item.img:img_default" alt="">
            </div>
        </div>
    </div>
    <div class="swiper_title fixed_top" v-show="top_show">
        <span></span>
        <span class="swiper_title_content"> <img src="../../assets/image/part4_03.jpg" alt=""><span>严选推介</span><img
                src="../../assets/image/part4_05.jpg" alt=""></span>
        <span class="change_slide">换一批<span class="iconfont icon-xunhuan101"></span></span>
    </div>
    <div class="swiper_box">
        <div class="swiper_title" :class="{fixed_top:top_show}" id="main" v-show="!top_show">
            <span></span>
            <span class="swiper_title_content"> <img src="../../assets/image/part4_03.jpg" alt=""><span>严选推介</span><img
                    src="../../assets/image/part4_05.jpg" alt=""></span>
            <span class="change_slide">换一批<span class="iconfont icon-xunhuan101"></span></span>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in show_data">
                    <div class="swiper_item" @click="care(i.goods_id,i.title)" v-for="(i,item_index) in item">
                        <div class="swiper_item_img"><img :src="i.img" alt=""></div>
                        <!--&lt;!&ndash;<img src="../../assets/image/logo200.png" alt="">&ndash;&gt;-->
                        <div class="swiper_item_right">
                            <div class="swiper_item_title">{{i.title}}</div>
                            <div class="swiper_item_content">{{i.describe}}</div>
                            <div class="swiper_item_type">
                                <div class="swiper_item_type1" v-for="(j,item2_index) in i.icon">
                                    <div class="icon_img"><img :src="j.url" alt=""></div>
                                    <span>{{j.text}}</span>
                                </div>
                            </div>
                            <div class="swiper_item_money">¥{{i.price}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mold_index" v-show="img_active" @touchstart="hideMenu"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.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/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            img_active: false,
            mySwiper: {},
            scroll_top: '',
            top_show: false,
            cat_data: [],
            index_data: [],
            show_data: [],
            img_default: '../../assets/image/logo200.png',
            cityname: '',
            rongYunToken: '',
            userId: '',
            user_info: []
        },
        created: function () {
            apiready = function () {
                app.cat();//首页导航
                app.index();//第三栏
                app.show();//严选推荐
                app.cityname = api.pageParam.cityname;
                // 获取个人信息
                if (getToken() && getToken() != 'undefined') {
                    app.getUserIndexInfo()
                }
                app.img_active = false;//进入
                api.setFrameAttr({
                    name: api.frameName,
                    bounces: true
                });
                app.scroll_top = $api.byId('top').scrollHeight;
                if (app.scroll_top == 0) {
                    app.top_show = true;
                } else {
                    app.top_show = false;
                }
                api.addEventListener({
                    name: 'show_menu'
                }, function (ret, err) {
                    app.img_active = ret.value.img_active;
                    api.setFrameAttr({
                        name: 'index_f',
                        bounces: false
                    });
                });
                // 底部轮播图
                app.mySwiper = new Swiper('.swiper-container', {
                    observer: true,
                    observeParents: true,
                    slidesPerView: 1,
                    // autoplayDisableOnInteraction: false,
                    loop: true,
                    navigation: {
                        nextEl: '.change_slide',
                    },
                    autoHeight: true,
                    speed: 1500,
                });
            };
        },
        mounted: function () {
            window.addEventListener('scroll', this.handleScroll)
        },
        methods: {
            // 隐藏菜单
            hideMenu: function () {
                app.img_active = !app.img_active;
                api.sendEvent({
                    name: 'hide_menu',
                    extra: {
                        img_active: app.img_active
                    }
                });
            },
            // 严选推荐定位
            handleScroll: function () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#main').offsetTop;
                if (scrollTop > offsetTop) {
                    app.top_show = true
                } else {
                    app.top_show = false
                }
            },
            // 严选推荐定位
            destroyed: function () {
                window.removeEventListener('scroll', this.handleScroll)
            },
            // 打开投资
            openStrict: function () {
                app.img_active = false;

                api.setFrameGroupIndex({
                    name: 'index_fm',
                    index: 1
                })
            },
            // 打开订单
            openOrder: function () {
                app.img_active = false;
                openView('my_orderlist', 'my/my_orderlist', '我的订单', 'my_orderlist', false, false, false);
                api.sendEvent({
                    name: 'hide_menu',
                    extra: {
                        img_active: false
                    }
                });
            },
            // 打开健康档案
            openHealth: function () {
                app.img_active = false;
                api.openWin({
                    name: 'my_health_w',
                    url: '../my/my_health_w.html',
                    pageParam: {
                        rid: 0
                    }
                });
                api.sendEvent({
                    name: 'hide_menu',
                    extra: {
                        img_active: false
                    }
                });
            },
            // 打开客服
            openSever: function () {
                app.img_active = false;
                app.getRongYunToken();

            },
            // 获取客服token
            getRongYunToken: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'portal/RongYun/index', null, header).then(function (res) {
                    if (res.data.code == 1) {
                        app.rongYunToken = res.data.data.token;
                        app.userId = res.data.data.userId;
                        // app.rongyunInit();
                    } else {
                    }
                })
            },
            // 轮播图跳转详情
            care: function (id, care_name) {
                api.openWin({
                    name: 'care_w',
                    url: './care_w.html',
                    pageParam: {
                        id: id,
                        care_name: care_name
                    }
                })
            },
            getUserIndexInfo: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getUserIndexInfo', null, header).then(function (res) {
                    // alert(JSON.stringify(res))
                    if (res.data.code == 1) {
                        app.user_info = res.data.data;
                    } else {
                    }
                })
            },
            // 获取分类图标
            cat: function () {
                getRequest('post', 'portal/index/cat', null, null).then(function (res) {
                    if (res.data.code == 1) {
                        app.cat_data = res.data.data;
                        // loadEnd();
                    } else {
                    }
                })
            },
            // 跳转分类列表
            openItem: function (id, name) {
                switch (id) {
                    case 1:
                        openView('nursing_f', 'index/nursing_f', name, 'nursing_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 2 :
                        openView('disease_f', 'index/disease_f', name, 'disease_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 3:
                        openView('disease_f', 'index/disease_f', name, 'disease_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 4:
                        openView('examination_f', 'index/examination_f', name, 'examination_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 5:
                        api.openWin({
                            name: 'doc_home_w',
                            url: './doc_home_w.html',
                            pageParam: {
                                cid: id,
                                cityname: app.cityname
                            }
                        });
                        break;
                    case 6:
                        openView('disease_f', 'index/disease_f', name, 'disease_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 7:
                        openView('examination_f', 'index/examination_f', name, 'examination_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 8:
                        openView('examination_f', 'index/examination_f', name, 'examination_f', false, {
                            cid: id,
                            cityname: app.cityname
                        });
                        break;
                    case 9:
                        api.openWin({
                            name: 'Insurance_w',
                            url: './Insurance_w.html',
                            pageParam: {
                                cid: id,
                                cityname: app.cityname
                            }
                        });
                        break;
                    case 10:
                        api.openWin({
                            name: 'tral_w',
                            url: './tral_w.html',
                            pageParam: {
                                cid: id,
                                cityname: app.cityname
                            }
                        });
                        break;
                    // default:
                    //     openView('nursing_f', 'index/nursing_f', name, 'nursing_f', false, {cid: id});
                    //     return;
                }
            },
            // 获取第三栏列表
            index: function () {
                getRequest('post', 'portal/index/index', null, null).then(function (res) {
                    if (res.data.code == 1) {
                        app.index_data = res.data.data;
                    } else {
                    }
                    setTimeout(function () {
                        api.hideProgress();
                    }, 2000)
                })
            },
            // 获取严选推荐列表
            show: function () {
                getRequest('POST', 'portal/index/show', null, null).then(function (res) {
                    // alert(JSON.stringify(res));
                    if (res.data.code == 1) {
                        app.show_data = res.data.data
                    } else {
                    }
                })
            }
        }
    })
</script>