haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: move community category selector to top

Browse Source
This commit is contained in:
hajimi
2026-08-03 17:33:43 +08:00
parent e6f3130929
commit eb8ab4af75
2 changed files with 66 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/pages/publish.vue
+65 -52
View File
@@ -13,6 +13,19 @@
<scroll-view scroll-y class="publish-scroll" :style="{ height: scrollHeight + 'px' }">
<view class="publish-body">
<view class="publish-category-select">
<view class="publish-category-select__label">
<text>分类</text>
<text class="publish-category-select__required">必选</text>
</view>
<picker class="publish-category-select__picker" mode="selector" :range="categoryList" range-key="name"
:value="selectedCategoryIndex" @change="handleCategoryChange">
<view class="publish-category-select__value" :class="{ 'publish-category-select__value--placeholder': !selectedCategory }">
<text>{{ selectedCategoryName || '请选择帖子分类' }}</text>
<u-icon name="arrow-down" size="24" :color="selectedCategory ? '#185dff' : '#9aa3b2'" />
</view>
</picker>
</view>
<textarea v-model="form.content" class="publish-textarea" placeholder="分享你的体育见解..." :maxlength="2000"
auto-height />
@@ -48,24 +61,6 @@
</view>
</view>
<view class="publish-category">
<view class="publish-section__head">
<view class="publish-section__title-wrap">
<text class="publish-section__title">选择分类</text>
<text class="publish-section__required">必选</text>
</view>
<text class="publish-section__hint">{{ selectedCategory ? '已选择 1 个分类' : '请选择帖子所属分类' }}</text>
</view>
<view v-if="categoryList.length" class="publish-category__list">
<view v-for="category in categoryList" :key="category.id" class="publish-category__item"
:class="{ 'publish-category__item--active': selectedCategory === category.id }"
@tap="selectCategory(category.id)">
<text class="publish-category__name">{{ category.name }}</text>
</view>
</view>
<text v-else class="publish-section__empty">暂无可选分类</text>
</view>
<view class="publish-tags">
<view class="publish-section__head">
<view class="publish-section__title-wrap">
@@ -99,6 +94,8 @@ const tagList = ref<any[]>([])
const selectedTags = ref<number[]>([])
const categoryList = ref<any[]>([])
const selectedCategory = ref(0)
const selectedCategoryIndex = computed(() => Math.max(categoryList.value.findIndex((item) => Number(item.id) === selectedCategory.value), 0))
const selectedCategoryName = computed(() => categoryList.value.find((item) => Number(item.id) === selectedCategory.value)?.name || '')
const isPaid = ref(false)
const pricePoints = ref('')
@@ -216,8 +213,9 @@ const removeImage = (idx: number) => {
form.images.splice(idx, 1)
}
const selectCategory = (id: number) => {
selectedCategory.value = id
const handleCategoryChange = (event: any) => {
const category = categoryList.value[Number(event.detail.value)]
selectedCategory.value = Number(category?.id) || 0
}
const toggleTag = (id: number) => {
@@ -453,46 +451,61 @@ const toggleTag = (id: number) => {
font-size: 22rpx;
}
.publish-category {
padding: 24rpx 30rpx;
border-top: 16rpx solid #f5f5f5;
.publish-category-select {
display: flex;
align-items: center;
height: 76rpx;
margin-bottom: 20rpx;
padding: 0 20rpx;
border: 2rpx solid #e5eaf2;
border-radius: 14rpx;
background: #fafcff;
&__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16rpx;
}
&__item {
&__label {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 76rpx;
box-sizing: border-box;
padding: 0 8rpx;
border: 2rpx solid #edf0f5;
border-radius: 14rpx;
background: #fafbfc;
&--active {
border-color: #185dff;
background: #eef4ff;
.publish-category__name {
color: #185dff;
font-weight: 600;
}
}
gap: 8rpx;
color: #303846;
font-size: 27rpx;
font-weight: 600;
white-space: nowrap;
}
&__name {
&__required {
padding: 3rpx 8rpx;
border-radius: 8rpx;
background: #fff1f2;
color: #ef4444;
font-size: 19rpx;
font-weight: 400;
}
&__picker {
flex: 1;
min-width: 0;
margin-left: 24rpx;
}
&__value {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10rpx;
overflow: hidden;
color: #4b5563;
font-size: 25rpx;
color: #185dff;
font-size: 26rpx;
text-overflow: ellipsis;
white-space: nowrap;
text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&--placeholder {
color: #9aa3b2;
}
}
}