html/index/index_f.html

<!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="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 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>
									<!--&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>
		</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>
	new Swiper('.swiper-container', {
		observer: true,
		observeParents: true,
		slidesPerView: 1,
		// autoplayDisableOnInteraction: false,
		loop: true,
		navigation: {
			nextEl: '.change_slide',
		},
		autoHeight: false,
		speed: 1500,
	});
	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)
		},
		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) {
                        console.log(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) {
			    window.location.href = 'care_f.html';
                localStorage.setItem('id',id);
                localStorage.setItem('care_name',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:
						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 = 'examination_f'
						// 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 () {
				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
			}

		}
	})
</script>