<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <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/weui.min.css"> <link rel="stylesheet" href="../../assets/css/api.css" /> <link rel="stylesheet" href="../../assets/css/swiper-3.4.2.min.css"> <!--<link rel="stylesheet" href="http://at.alicdn.com/t/font_641470_jg64l6ijsg4lsor.css">--> <link rel="stylesheet" href="../../assets/css/my_f.css" /> <link rel="stylesheet" href="../../assets/css/index.css"> <link rel="stylesheet" href="../../assets/icon/iconfont.css"> <style> header { width: 100%; height: auto; font-size: 20px; /*background-color: #dbb25f;*/ } .headers { background-color: #dbb25f; } .app_name { padding-right: 0.8rem; font-family: "fzjt"; font-size: 20px; } .triangle_border_up span { display: block; width: 0; height: 0; border-width: 0 5px 5px; border-style: solid; border-color: transparent transparent #fff; /*透明 透明 黄*/ position: absolute; bottom: 0; right: 0.55rem; } .mold_index { position: absolute; } #container { width: 0; height: 0; } .index1 .icon-fenxiang-tianchong { color: #d8b25f; } .my_top { overflow: hidden; } .dot { position: absolute; height: 10px; width: 10px; background-color: #EE6449; border-radius: 50%; right: 0.44rem; top: 0.37rem; z-index: 100000; } .my_top_icon_box { background-color: #ddbb72; padding:0.2rem 0.5rem 0.2rem 0; } /*flex布局*/ [v-cloak]{ display: none; } </style> </head> <body> <!-- 背景充满 --> <div id="loadStart"></div> <div id="app" v-cloak> <div id="container"></div> <header :class="index===0?'headers':''"> <div class="index_header" v-if="index==0"> <div class="index_left"> <div class="index_left_img"> <div class="iconfont icon-dizhi"></div> </div> <span @click.stop="goToCity">{{cityname?cityname:'定位中...'}}</span> </div> <span class="app_name">慈界医养</span> <div class="index_right" @click="show_menu"> <img src="../../assets/image/plus.png" alt="" :class="[img_active?'img_transform':'img_transform1']"> </div> </div> <div class="index1" v-else-if="index==1"> <div class="index1_item index_on"> <!--<div class="index1_item index_on">--> <div></div> <div class="iconfont icon-fenxiang-tianchong"></div> </div> </div> <div class="my_top_icon_box" v-else> <span class="iconfont icon-xiaoxi" @click="my_news"></span> <span class="dot" v-show="newList.length!=0"></span> </div> <div class="triangle_border_up" v-show="img_active"> <span></span> </div> </header> <div class="warp"> <div class="index_list" id="top"> <div class="index_item" v-cloak 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="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 class="banner_box" @click="openStrict"><img src="../../assets/image/banner.png" alt=""></div> <div class="banner_nav_box"> <div class="banner_item" v-cloak @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> <!--<!–<img src="../../assets/image/logo200.png" alt="">–>--> <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> </div> <footer> <div class="footer_item" :class="{footer_item_active:index==0}" @click="changeTab(0)"> <i class="iconfont icon-yuanjiaojuxingkaobei"></i> <span>严选</span> </div> <div class="footer_item" :class="{footer_item_active:index==1}" @click="changeTab(1)"> <i class="iconfont icon-xingzhuang"></i> <span>投资</span> </div> <div class="footer_item" :class="{footer_item_active:index==2}" @click="changeTab(2)"> <i class="iconfont icon-wo"></i> <span>我的</span> </div> <div class="mold_index" v-show="img_active" @click="hideMenu"></div> </footer> </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/weui.min.js"></script> <script type="text/javascript" src="../../assets/js/public.js"></script> <script type="text/javascript" src="../../assets/js/fastclick.js"></script> <script type="text/javascript" src = 'https://webapi.amap.com/maps?v=1.4.4&test=true&key=ef53760bd959a4df08b7d4587280e642&&plugin=AMap.ToolBar,AMap.IndoorMap'></script> <script> new FastClick(document.body); </script> <script type="text/javascript" src="../../assets/js/vue.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script type="text/javascript" src="../../assets/js/axios.min.js"></script> <script> var app = new Vue({ el: "#app", data: { index: 0, headerH: '', footerH: '', getlng: '', getlat: '', cityindex: '', map: {}, newList: [], 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 () { var cityName = localStorage.getItem('cityName') if(cityName){ this.cityname = cityName }else{ this.get_city() } this.cat(); //首页导航 this.indexList(); //第三栏 this.show(); //严选推荐 // 底部轮播图 loadEnd() }, mounted: function () { window.addEventListener('scroll', this.handleScroll) // new Swiper('.swiper-container', { // autoplay: true, // observer: true, // observeParents: true, // slidesPerView: 1, // autoplayDisableOnInteraction: false, // loop: true, // autoHeight: false, // speed: 1500 // }); new Swiper('.swiper-container', { initialSlide :0, autoplay: 2000, observer: true, observeParents: true, slidesPerView: 1, autoplayDisableOnInteraction: false, loop: true, navigation: { nextEl: '.change_slide', }, autoHeight: false, speed: 1500 }); }, methods: { // 我的消息 my_news: function () { openView('my_news', '../my/my_news', '消息通知', 'my_news', false, { new_type: 0 }) }, // 有无消息判断 getNews: function () { var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'user/index/getUserMessageList', null, header).then(function (res) { if (res.data.code == 1) { app.newList = res.data.data.unread; } else { toastMsg(res.data.msg) } loadEnd(); }) }, // 定位当前城市 get_city: function() { var app = this ; map = new AMap.Map('container', {}); map.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位,默认:true enableHighAccuracy: true, // 设置定位超时时间,默认:无穷大 timeout: 10000 }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) function onComplete(data) { // app.cityname = data.addressComponent.province; console.log(app.cityname); app.lng = data.position.lng; app.lat = data.position.lat; app.street = data.addressComponent.street; // console.log(app.lng); // console.log(app.lat); // // // 获取附近地址 // app.map = new AMap.Map('container', {}); // AMap.service(["AMap.PlaceSearch"], function() { // var placeSearch = new AMap.PlaceSearch({ // pageSize: 10, // 每页10条 // pageIndex: 1, // 获取第一页 // city: app.cityname // 指定城市名(如果你获取不到城市名称,这个参数也可以不传,注释掉) // }); // // // 第一个参数是关键字,这里传入的空表示不需要根据关键字过滤 // // 第二个参数是经纬度,数组类型 // // 第三个参数是半径,周边的范围 // // 第四个参数为回调函数 // // placeSearch.searchNearBy(app.cityname, [app.lng, app.lat], 1000, function(status, result) { // // console.log(JSON.stringify(status)) // if(result.info === 'OK') { // var locationList = result.poiList.pois; // 周边地标建筑列表 // console.log(locationList) // app.nearList = locationList // 生成地址列表html // // createLocationHtml(locationList); // } else { // console.log('获取位置信息失败!'); // } // }); // }); } function onError(erro) { // 定位出错 toastMsg('请开启定位功能') } }) }, // 切换底部导航 changeTab: function (res) { //跳转页面 }, // 切换当前城市 goToCity: function () { var app = this; if (app.cityname == '') { toastMsg('定位中') } else { localStorage.setItem('cityName',app.cityname); window.location.href = '../index/city_f.html'; // api.openWin({ // name: 'city_win', // url: '', // pageParam: { // cityname: app.cityname // } // }); } }, // 显示快捷菜单 show_menu: function () { if (app.img_active == false) { app.img_active = true } else { app.img_active = false } }, // 隐藏快捷菜单 hideMenu: function () { app.img_active = !app.img_active; api.sendEvent({ name: 'show_menu', extra: { img_active: app.img_active } }); }, //首页的数据 // 隐藏菜单 hideMenu: function () { app.img_active = !app.img_active; }, // 严选推荐定位 handleScroll: function () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetTop = document.querySelector('#main').offsetTop; console.log(scrollTop, offsetTop) if (scrollTop > offsetTop) { app.top_show = true } else { app.top_show = false } }, // 严选推荐定位 destroyed: function () { window.removeEventListener('scroll', this.handleScroll) }, // 打开投资 openStrict: function () { window.location.href = '../strict/strict_f.html' }, // 打开订单 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; openWin({ name: 'my_health_w', url: '../my/my_health.html', pageParam: { rid: 0 } }); }, // 打开客服 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) { var app = this ; // api.openWin({ // name: 'care_w', // url: './care_w.html', // pageParam: { // id: id, // care_name: care_name // } // }) if(care_name.indexOf('旅游') == -1){ localStorage.removeItem('cid'); openWin({ name: 'care_w', url: './care_f.html', pageParam: { id: id, care_name: care_name } }) }else{ localStorage.setItem('cid',id); localStorage.setItem('cityName',app.cityname); window.location.href = 'tral_f.html'; } }, 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: url = 'nursing_f'; // openView('nursing_f', 'index/nursing_f', name, 'nursing_f', false, { // cid: id, // cityname: app.cityname // }); break; case 2: url = 'disease_f'; // openView('disease_f', 'index/disease_f', name, 'disease_f', false, { // cid: id, // cityname: app.cityname // }); break; case 3: url = 'disease_f'; // openView('disease_f', 'index/disease_f', name, 'disease_f', false, { // cid: id, // cityname: app.cityname // }); break; case 4: url = 'examination_f'; // openView('examination_f', 'index/examination_f', name, 'examination_f', false, { // cid: id, // cityname: app.cityname // }); break; case 5: url = 'doc_home_f'; break; case 6: url = 'disease_f'; // openView('disease_f', 'index/disease_f', name, 'disease_f', false, { // cid: id, // cityname: app.cityname // }); break; case 7: url = 'examination_f'; // openView('examination_f', 'index/examination_f', name, 'examination_f', false, { // cid: id, // cityname: app.cityname // }); break; case 8: url = 'examination_f'; // openView('examination_f', 'index/examination_f', name, 'examination_f', false, { // cid: id, // cityname: app.cityname // }); break; case 9: url = 'Insurance'; // api.openWin({ // name: 'Insurance_w', // url: './Insurance_w.html', // pageParam: { // cid: id, // cityname: app.cityname // } // }); break; case 10: url = 'tral_f'; // 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; } localStorage.setItem('cid', id); localStorage.setItem('cityName', app.cityname); localStorage.setItem('winTitle', name); window.location.href = url + '.html' }, // 获取第三栏列表 indexList: function () { getRequest('post', 'portal/index/index', null, null).then(function (res) { if (res.data.code == 1) { app.index_data = res.data.data; } else {} }) }, // 获取严选推荐列表 show: function () { var app = this; 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 {} }) }, //底部菜单跳转 changeTab(index) { var url = index == 0 ? 'index_f.html' : index == 1 ? '../strict/strict_f.html' : '../my/my_f.html' window.location.href = url }, // 初始化轮播 initSwiper() { new Swiper('.swiper-container', { autoplay: true, observer: true, observeParents: true, autoplayDisableOnInteraction: true, loop: true, nextButton: '.change_slide', autoHeight: true, speed: 1500, lazyLoading: true }); } } }) </script>