98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<template>
|
|
<view class="sort-container df fdr jcsa aic">
|
|
<view class="sort-item" v-for="(item, index) in filteredList" :key="index" @click="emit('status', item)">
|
|
<uni-data-select v-if="item.list" :localdata="item.list" v-model="item.value" :clear="false">
|
|
<template #icon="{ showPicker }">
|
|
<image class="ud" :src="showPicker ? up : down"></image>
|
|
</template>
|
|
</uni-data-select>
|
|
<view class="df aic" v-else>
|
|
<view class="label">{{ item.label }}</view>
|
|
<view class="up-down df fdc jcsa aic">
|
|
<image v-if="item.isUp" class="ud mb5" :src="up"></image>
|
|
<image v-if="item.isDown" class="ud" :src="down"></image>
|
|
</view>
|
|
</view>
|
|
<view class="up-down" v-if="item.slot">
|
|
<slot :name="item.slot">
|
|
<uni-icons type="bars" size="16"></uni-icons>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { defineEmits } from 'vue'
|
|
import down from '@/static/down.png';
|
|
import up from '@/static/up.png';
|
|
|
|
const props = defineProps({
|
|
filteredList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
})
|
|
const emit = defineEmits(['status'])
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.sort-container {
|
|
padding: 20rpx 0;
|
|
// 上下圆角
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
background-color: #fff;
|
|
margin-top: 10rpx;
|
|
|
|
::v-deep .uni-select {
|
|
border: none !important;
|
|
|
|
.uni-select__selector {
|
|
width: fit-content;
|
|
|
|
}
|
|
|
|
.uni-select__selector-item {
|
|
width: fit-content;
|
|
}
|
|
|
|
.uni-select__input-text {
|
|
margin-right: 8rpx;
|
|
font-size: $uni-font-size-lg;
|
|
color: $uni-text-color;
|
|
line-height: 42rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.sort-item {
|
|
display: flex;
|
|
|
|
.label {
|
|
font-size: $uni-font-size-lg;
|
|
color: $uni-text-color;
|
|
line-height: 42rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.ud {
|
|
width: 20rpx;
|
|
height: 14rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.up-down {
|
|
|
|
|
|
.icon {
|
|
color: $uni-text-color-grey
|
|
}
|
|
|
|
.up,
|
|
.down {
|
|
color: $uni-bg-color-hover;
|
|
}
|
|
}
|
|
}
|
|
</style> |