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>
|