forked from angelo/web-retail-h5
122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
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> {{$t('S_C_86')}}：</span>{{ aitem.contacts }}
|
||
</view>
|
||
<view class="item_content">
|
||
<span>
|
||
{{$t('S_C_87')}}：</span>{{ aitem.phone }}
|
||
</view>
|
||
<view class="item_content">
|
||
<span> {{$t('S_C_88')}}：</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> |