<template>
	<view class="centent">
		<back :info="info"></back>
		<view :style="{top:statusBarHeight+'px'}" class="cityicon" ></view>
		<view class="topbg">
			<view class="bgjb">
				<image :src="$getimg('lx-jq.png')"></image>
			</view>
			<view class="bgjb-jb">
				<image :src="$getimg('djcp-bg-jb.png')"></image>
			</view>
		</view>
		<view class="tbb">
			<view class="tbboxs" v-for="(el,ind) in allData" :key="el.id" @click="go(el.tel)">
			<view class="tboxbot">
				<view class="tbtitle">
					<view class="tbtitle-il">
						<image :src="$getimg('img-iphone.png')" mode="" class="il-img"></image>
					</view>
					<view class="tbname">
						<view class="tbname-l">{{el.name}}</view>
						<view class="tbname-k">{{el.tel}}</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		
		<!-- <view class="szra1">
			<view class="list" v-for="(el,ind) in alldata[xwwfind].list" :style="{'margin-right':ind%2==0?'0':'20rpx'}"
				v-if="ind>0" @click="$getpage('/pagesys/index/foodCard?uid='+el.uid)">
				<view class="liimg">
					<image class="szra_img" :src="$geturl(el.logo)" lazy-load="true" mode="aspectFill"></image>
				</view>
				<view class="sztitle text_overflow">{{el.name}}</view>
				<view class="sztitle text_overflow dsadk">{{el.address}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	var web = require('@/components/utils/request.js');
	export default {
		components: {
			back
		},
		data() {
			return {
				// city:'720虚拟游',
				statusBarHeight: 0,
				info: {
					color: true,
					num: false
				},
				id: 97,
				first: 0,
				count: 50,
				lmdata: [],
				xwwfind: 0,
				allData:[]
			}
		},
		onLoad(options) {
			this.getTitles();
		},
		onReady() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		
		onPageScroll(e) {
			if (e.scrollTop > 50 && !this.info.num) {
				this.info.num = true;
			}
			if (e.scrollTop < 50 && this.info.num) {
				this.info.num = false;
			}
		},
		// onShow(object) { //获取页面返回传递参数
		// 	this.getdata2();
		// },
		methods: {
			geturl(url) {
				return 'http://cscmp.tour-ma.com' + url;
			},
			ckxwwfind(ind, id) {
				this.xwwfind = ind;
			},
			getTitles() {
				var url = '/addressBook.jspx';
				var para = {
					unityTypeId:5
				};
				var that = this;
				web.httpGet(that, url, para, function(res) {
					let json = res.data.data[0].link;
					that.allData = json;
					console.log(that.allData)
					// that.checkTitleData(0)
					// that.nowInfo = [];
					// for (var i = 0; i < json.length; i++) {
					// 	if(json[i].addressBookLists.length!=0){
					// 		for(var k=0;k<json[i].addressBookLists.length;k++){
					// 			that.nowInfo.push(json[i].addressBookLists[k]);
					// 		}
					// 	}
					// }
				});
			},
			go(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
			
				});
			}

		}
	}
</script>

<style lang="scss">
	$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
	.cityicon{
		width: calc(100% - 167rpx);
		font-size: 48upx;
		color: #FFFFFF;
		left: 80upx;
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 9999;
		height: 80rpx;
		justify-content: center;
	}
	.centent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		overflow-y: scroll;

		.topbg {
			width: 100%;
			position: relative;

			.bgjb {
				width: 100%;
				height: 500rpx;
				position: absolute;
				z-index: -2;

				image {
					width: 100%;
					height: 500rpx;
				}
			}

			.bgjb-jb {
				position: absolute;
				top: 300rpx;
				z-index: -1;
				width: 100%;

				image {
					width: 100%;
					height: 400rpx;
				}
			}
		}
		.tbb{
			width: 100%;
			height: 100%;
			.tbboxs:nth-child(1)   {
			margin-top: 400rpx;
			}
		}
		.tbboxs {
			max-width: 690upx;
			height: 160upx;
			margin: auto;
			margin: 20upx auto 5%;
			width: 90%;
			position: relative;
			background-color: #fff;
			border-radius: 14rpx;
			.tboxbot {
				width: 100%;
				height: 100%;
				position: relative;
				background-size: 100% 100% !important;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 104, 77, 0.2);
				/* position: absolute; */
				/* top: 72rpx; */
				/* left: 50%; */
				/* margin-left: -47%; */
				border-radius: 20rpx;
				overflow: hidden;
				
				.bot-img{
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
				.tbtitle {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0upx;
					bottom: 0upx;
					display: flex;
					align-items: center;

				.tbtitle-il{
					background: rgba(98, 212, 166, 1);
					border-radius: 50%;
					width: 50rpx;
					height: 50rpx;
					padding: 30rpx;
					margin: 0 30rpx 0 50rpx;
					.il-img{
						width: 100%;
						height: 100%;
					}
				}

					.tbname {
						// font-size: 36upx;
						// font-weight: bold;
						.tbname-l{
							font-size: 36upx;
							font-weight: 400;
							color: #444;
							margin-bottom: 10rpx;
						}
						.tbname-k{
							font-size: 36upx;
							font-weight: bold;
							// color: #CCCCCC;
						}
					}

					.tbinfo {
						width: 90%;
						font-size: 24upx;
						font-weight: 500;
						line-height: 1.4;
						position: absolute;
						top: 120rpx;
						left: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: flex;

						// align-items: center;
						&::before {
							content: '';
							display: inline-block;
							width: 24rpx;
							height: 28rpx;
							margin-right: 10rpx;
							background: url($url+'icon-add-da.png') no-repeat;
							background-size: 100% 100% !important;
						}
					}
				}
			}
			
		}
		
		// .szra1 {
		// 	width: 90%;
		// 	margin: 40upx auto;
		// 	display: flex;
		// 	flex-direction: row;
		// 	flex-wrap: wrap;

		// 	.list {
		// 		width: 48%;
		// 		margin-bottom: 40upx;
		// 		margin-right: 15rpx;

		// 		.liimg {
		// 			margin-bottom: 20upx;

		// 			.szra_img {
		// 				max-width: 360upx;
		// 				width: 100%;
		// 				height: 210upx;
		// 				border-radius: 8upx;
		// 			}
		// 		}

		// 		.sztitle {
		// 			font-size: 32upx;
		// 			font-weight: 600;
		// 			color: #333333;
		// 			margin-bottom: 20upx;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;
		// 			white-space: nowrap;
		// 		}

		// 		.dsadk {
		// 			font-size: 24rpx;
		// 			font-weight: 500 !important;
		// 			line-height: 1.6;

		// 			&::before {
		// 				content: '';
		// 				display: inline-block;
		// 				width: 24rpx;
		// 				height: 26rpx;
		// 				margin-right: 10rpx;
		// 				background: url($url+'icon-add-xiao.png') no-repeat;
		// 				background-size: 100% 100% !important;
		// 			}
		// 		}
		// 	}

		// }

	}
 
	
</style>
