112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
||
<!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
|
||
<view class="country-bar" id="countryBar">
|
||
<view class="country-inner">
|
||
<view
|
||
class="country-item"
|
||
:class="{ active: selectedId === item.id }"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
@tap="selectItem(item)"
|
||
>
|
||
<!-- 国家图标(18x18 圆形,来自后端 countryIcon 拼接 BASE_URL) -->
|
||
<image class="country-icon" :src="item.icon" mode="aspectFill"></image>
|
||
<text class="country-name">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CountryBar',
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
selectedId: {
|
||
type: [String, Number],
|
||
default: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
// 首次测量
|
||
this.$nextTick(() => this.emitHeight())
|
||
},
|
||
watch: {
|
||
// 国家列表变化 → 换行行数可能变化 → 重新测量
|
||
'list.length'() {
|
||
this.$nextTick(() => this.emitHeight())
|
||
}
|
||
},
|
||
methods: {
|
||
emitHeight() {
|
||
const query = uni.createSelectorQuery().in(this)
|
||
query.select('#countryBar').boundingClientRect()
|
||
query.exec((res) => {
|
||
if (res && res[0]) {
|
||
this.$emit('height-change', res[0].height)
|
||
}
|
||
})
|
||
},
|
||
selectItem(item) {
|
||
this.$emit('select', item.id)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框
|
||
Figma: Country Filter Bar 1511:195, y=6 起始, 行高约 31px(padding 6+6) */
|
||
.country-bar {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
padding: 12rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 换行布局 - UI-0011: 标签上下间距 +2px → row-gap 20rpx */
|
||
.country-inner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
row-gap: 20rpx;
|
||
column-gap: 20rpx;
|
||
}
|
||
/* 单个标签 - padding 4px 10px 圆角 60px Figma；UI-0011: 国旗与名称间距 4px → 8rpx */
|
||
.country-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 8rpx 20rpx; /* 4px 10px */
|
||
background: #f7f7f7;
|
||
border-radius: 60rpx;
|
||
line-height: 1.2;
|
||
border: 1rpx solid transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 边框宽度 0.5px Figma */
|
||
.country-item.active {
|
||
background: #fff3eb;
|
||
border-color: #ff6800;
|
||
}
|
||
.country-item.active .country-name {
|
||
color: #ff6800;
|
||
}
|
||
/* 国家图标 - Figma 18x13 / 18x14 矩形, 圆角 2px,不是圆形 */
|
||
.country-icon {
|
||
width: 36rpx;
|
||
height: 26rpx;
|
||
border-radius: 4rpx; /* 2px */
|
||
flex-shrink: 0;
|
||
display: block;
|
||
}
|
||
/* 文字 12px Medium */
|
||
.country-name {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
</style>
|