studytour-front/components/product/sortBar.vue

<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>