busroute/src/components/changeLine.vue

<template>
  <Drag :dom-class-name="'changeLine'">
    <div class="changeLine">
      <div class="title">
        切换线路
      </div>
      <div
        v-show="show"
        class="content"
      >
        <n-input
          v-model:value="seastr"
          :bordered="false"
          round
          type="text"
          placeholder="搜索"
        />

        <div class="list">
          <div
            v-for="item in lineList"
            :key="item.lineId"
            class="item"
            :class="{'active': curLine.lineId === item.lineId}"
            @click="changeLine(item)"
          >
            {{ item.lineName }}
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="cur">
          当前:
        </div>
        <div> {{ curLine.lineName }}</div>
      </div>
      <div
        class="check"
        @click="show = !show"
      >
        {{ show ? '收起': '展开' }}
      </div>
    </div>
  </Drag>
</template>

<script lang="ts" setup>
import NetService from '@/services/net.service'
import Drag from './Drag.vue'
import { computed, ref } from 'vue'
import useStore from '@/pages/store'
const store = useStore()

const show = ref(false)
const seastr = ref('')
const netService = new NetService()
const originLineList = ref([] as any[])

const lineList = computed(() => originLineList.value.filter((item: any) => item.lineName.includes(seastr.value)))

const curLine = ref({} as any)

function changeLine(item: any) {
  curLine.value = item
  store.setCurrentLineId(item.lineId)
  store.setCurrentLinecode(item.lineCode)
}
async function getLine() {
  const res = await netService.get('/busLine/getList?hasModel=0')
  if (res.success) {
    originLineList.value = res.data
    // eslint-disable-next-line prefer-destructuring
    curLine.value = res.data[0]
    store.setCurrentLineId(res.data[0].lineId)
    store.setCurrentLinecode(res.data[0].lineCode)
  }
}
getLine()
</script>

<style lang="scss" scoped>
.changeLine {
  position: absolute;
  color: #fff;
  width: 400px;

  border-radius: 5px;
  border: 1px solid #1891FF;
  background: #0F1A31;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3137), inset 0px 1px 22px 0px #00BEFF;

  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(33, 133, 232, 0.298);
  }

  .content {
    height: 260px;

    .n-input {
      margin: 10px 15px;
      width: 370px;
      background: none !important;
      border: solid 1.5px #2185E8;

      .n-input__input-el {
        color: #fff;
      }
    }

    .list {
      height: 200px;
      overflow-y: scroll;
    }

    .item {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 4px;
      box-sizing: border-box;

      &:hover {
        box-shadow: inset 0px 1px 12px 0px #80FFFF, inset 0px 1px 12px 0px #80FFFF;
      }
      &.active {
        background-color: #346274;
        border: 1px solid #80FFFF;
      }
    }
  }

  .footer {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    .cur {
      color: #80FFFF;
    }
  }

  .check {
    position: absolute;
    top: 0;
    right: -54px;
    width: 54px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #1891FF;
    background: rgba(33, 133, 232, 0.298);
    cursor: pointer;

  }
}
</style>