web-store-retail-h5/pages/mine/branchAddress/branchAddress.vue

<template>
	<view class="content">
		<view class="tab">
			<view v-for="(item, index) in countryList" :key="index" @click="navTab(item.region)" class="tab_i"
				:class="[isTab===item.region?'heng':'heng1']">
				{{ item.regionName }}
			</view>
		</view>
		<view class="main_item" v-for="(aitem,aindex) in belowList" :key="aindex">
			<view class="item_title">
				{{ aitem.shortName }}·{{ aitem.provinceName }}{{ aitem.cityName }}
			</view>
			<view class="item_content">
				<span> {{'联系人'}}：</span>{{ aitem.contacts }}
			</view>
			<view class="item_content">
				<span>
					{{'电话'}}：</span>{{ aitem.phone }}
			</view>
			<view class="item_content">
				<span> {{'地址'}}：</span>
				{{ aitem.shortName }}{{ aitem.provinceName }}{{ aitem.cityName
					          }}{{ aitem.countyName || "" }}{{ aitem.address }}
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/config/address.js'
	export default {
		data() {
			return {
				isTab: "",
				countryList: [],
				belowList: []
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			navTab(index) {
				this.isTab = index;
				this.countryList.forEach(ele => {
					if (index == ele.region) {
						this.belowList = ele.belowList;
					}
				});
			},
			getDataList() {
				api.getGloableCompany().then(res => {
					if (res.code == 200) {
						this.countryList = res.rows
						this.isTab = res.rows[0].region
						this.belowList = res.rows[0].belowList;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 12rpx;
		padding-bottom: 60rpx;

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #F9F9F9;
			margin-bottom: 20rpx;
			flex-wrap: nowrap;
			overflow-x: auto;

			// width: 100%;
			.tab_i {
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				margin-right: 20rpx;
				padding-bottom: 15rpx;
				font-size: 28rpx;

			}

			.heng {
				border-bottom: 6rpx solid #FB3024;
				color: #FB3024;
				color: #333333;

			}

		}

		.main_item {
			margin: 12rpx auto;
			padding: 36rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			.item_title{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-bottom: 60rpx;
			}
			.item_content{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				line-height: 54rpx;
			}
		}
	}
</style>