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;
|
|
}
|
|
/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
|
|
.country-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
row-gap: 16rpx;
|
|
column-gap: 20rpx;
|
|
}
|
|
/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
|
|
.country-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx; /* 10px gap */
|
|
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>
|