hi-ucs/front/src/views/home/components/integrationServiceOrder.vue

<template>
  <ul class="integrationServiceOrder">
    <li v-for="(item, i) in integrationOrderList" :key="i" @click="
      changeOrder(i, item.value, item.orderType == 'DESC' ? 'ASC' : 'DESC')
    ">
      {{ item.name }}
      <span class="arrow" :class="
        integrationOrder.orderType == 'ASC' &&
        integrationOrder.orderField == item.value
          ? 'down'
          : ''
      "></span>
    </li>
  </ul>
</template>
<script setup>
import { ref, reactive, nextTick, defineExpose } from 'vue'
import mybus from '@/myplugins/mybus'

const orderList = [
  {
    value: 'apply_count',
    name: '申请量',
    orderType: 'DESC',
  },
  {
    value: 'collectCount',
    name: '收藏量',
    orderType: 'DESC',
  },
  {
    value: 'create_date',
    name: '发布时间',
    orderType: 'DESC',
  },
  {
    value: 'update_date',
    name: '更新时间',
    orderType: 'DESC',
  },
]
const integrationOrderList = ref(JSON.parse(JSON.stringify(orderList)))
const integrationOrder = reactive({
  orderField: '',
  orderType: '',
})

// 融合服务--排序
const changeOrder = (i, val, type) => {
  console.log('i, val, type------------>', i, val, type);
  integrationOrder.orderField = val
  integrationOrder.orderType = type;
  // 0 apply_count ASC
  let _index = integrationOrderList.value.findIndex(x => x.value = val)
  if (_index > -1) {
    integrationOrderList.value[_index].orderType = type
  }
  mybus.emit('changeCondition', {
    orderField: val,
    orderType: type,
  })
}

const reset = () => {
  integrationOrderList.value = JSON.parse(JSON.stringify(orderList))
  integrationOrder.orderField = ''
  integrationOrder.orderType = ''
}
defineExpose({
  reset,
})
</script>
<style lang="less" scoped>
.integrationServiceOrder {
  display: flex;

  li {
    width: 90px;
    height: 12px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .arrow {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: url('~@/assets/newHome/arrow.png');
      margin-left: 10px;
    }

    .down {
      background: url('~@/assets/newHome/down.png');
      margin-top: 6px;
    }
  }
}
</style>