share_h5/pages/phone.vue

<template>
	<view class="phone-box">
		<block v-for="(item ,index) in telList">
			<view class="phone-item-box">
				<view class="pnone-headline">
					{{item.name}}
				</view>
				<block v-for="(subItem ,subIndex ) in item.list">
					<view class="sub-item">
						<view class="sub-item-label">{{subItem.label}}</view>
						<view class="sub-item-phone">
							<block v-for="(telItem ,telIndex ) in subItem.tel_list">
								<view class="phone-item" @click.stop="makingCall(telItem.tel)">
									<view class="phone-info">
										<text class="phone-num">{{telItem.tel}}</text>
										<text class="phone-hint" v-if="telItem.hint">{{telItem.hint}}</text>
									</view>
									<image v-if="telItem.tel" class="phone-icon" src="../static/phone.png"
										mode="aspectFit" />
								</view>
							</block>
						</view>

					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	import phoneList from "./../json/phone.json"
	export default {
		data() {
			return {
				telList: []
			}
		},
		onLoad() {
			this.telList = phoneList.pnone || []
			console.log('phoneList = ', this.telList)
		},
		methods: {
			makingCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$h_num: 50rpx;

	.phone-box {
		padding: 30rpx;

		.phone-item-box {
			border-bottom: 1rpx solid #f9f7f7;
			padding: 30rpx 0;
		}

		.pnone-headline {
			line-height: 1.2;
			padding: 20rpx 0 20rpx 20rpx;
			// border-left: 10rpx solid skyblue;
			position: relative;
			display: flex;
			align-items: center;

			font-size: 36rpx;
			font-weight: 600;
			color: #1a1a1a;

			&::before {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				content: '';
				width: 10rpx;
				height: 60%;
				background-color: #3CBACF;
			}
		}

		.sub-item {
			width: 100%;
			font-size: 28rpx;
			padding: 10rpx 0;
			display: flex;

			.sub-item-label {
				flex-shrink: 0;
				width: 150rpx;
				height: $h_num;
				line-height: $h_num;
				color: #999999;
			}

			.sub-item-phone {
				width: calc(100% - 150rpx);
				color: #3CBACF;

				.phone-item {
					flex-shrink: 0;
					min-width: 51%;
					max-width: 100%;
					line-height: $h_num;
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;

					.phone-info {
						max-width: calc(100% - 40rpx);

						text {
							margin-right: 20rpx;
						}
					}

					.phone-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}





				// <view class="phone-item">
				// 	<text class="phone-num">{{telItem.tel}}</text>
				// 	<text class="phone-hint"></text>
				// </view>
				// 	<image class="phone-icon" src="../static/phone.png" mode="aspectFit"></image>
			}
		}
	}
</style>