You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.8 KiB
107 lines
2.8 KiB
<template>
|
|
<view class="flex sort" :style="style">
|
|
<view :class="['flex', 'sort-item', sort == 'comprehensive' ? 'is-active' : '']" @click="onClickSort('comprehensive')">综合</view>
|
|
<view :class="['flex', 'sort-item', ['sale-asc', 'sale-desc'].includes(sort) ? 'is-active' : '']" @click="onClickSort('sale')">
|
|
<view>销量</view>
|
|
<view class="sort-item-icon">
|
|
<uv-icon v-if="sort == 'sale-asc'" name="arrow-up-fill" color="#00A9FF" size="16rpx" :bold="true"></uv-icon>
|
|
<uv-icon v-else-if="sort == 'sale-desc'" name="arrow-down-fill" color="#00A9FF" size="16rpx" :bold="true"></uv-icon>
|
|
<image v-else style="width: 8rpx; height: auto;" src="/static/image/icon-sort.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view :class="['flex', 'sort-item', ['price-asc', 'price-desc'].includes(sort) ? 'is-active' : '']" @click="onClickSort('price')">
|
|
<view>价格</view>
|
|
<view class="sort-item-icon">
|
|
<uv-icon v-if="sort == 'price-asc'" name="arrow-up-fill" color="#00A9FF" size="16rpx" :bold="true"></uv-icon>
|
|
<uv-icon v-else-if="sort == 'price-desc'" name="arrow-down-fill" color="#00A9FF" size="16rpx" :bold="true"></uv-icon>
|
|
<image v-else style="width: 8rpx; height: auto;" src="/static/image/icon-sort.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: 'comprehensive'
|
|
},
|
|
style: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
sort: {
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
get() {
|
|
return this.value
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onClickSort(key) {
|
|
|
|
let sort = 'comprehensive'
|
|
|
|
switch(key) {
|
|
case 'comprehensive':
|
|
sort = 'comprehensive'
|
|
break;
|
|
case 'sale':
|
|
if (this.sort == 'sale-desc') {
|
|
sort = 'sale-asc'
|
|
} else {
|
|
sort = 'sale-desc'
|
|
}
|
|
break;
|
|
case 'price':
|
|
if (this.sort == 'price-desc') {
|
|
sort = 'price-asc'
|
|
} else {
|
|
sort = 'price-desc'
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
this.sort = sort
|
|
|
|
this.$emit('change', sort)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.sort {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
&-item {
|
|
padding: 12rpx 32rpx;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #191919;
|
|
column-gap: 4rpx;
|
|
|
|
&.is-active {
|
|
font-weight: 600;
|
|
color: #00A9FF;
|
|
}
|
|
|
|
&-icon {
|
|
width: 32rpx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|