53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<template>
|
|
<div class="box-border w-[320px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[23px] py-[25px]">
|
|
<div class="text-[16px] text-[#333333] font-normal">频道列表</div>
|
|
<div class="mt-[30px]">
|
|
<el-row>
|
|
<el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-[10px]">
|
|
<span
|
|
class="cursor-pointer text-[14px] text-[#999999] font-normal"
|
|
:class="{ active: channelId === item.channelId }"
|
|
@click="handleClick(item.channelId)"
|
|
>{{ item.channelTitle }}</span
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
// import { ref } from 'vue'
|
|
// import { list } from '~/api/channel/index'
|
|
|
|
const channelId = defineModel('modelValue', {
|
|
required: true,
|
|
})
|
|
|
|
const channelIdList = defineModel<any[]>('channelIdList', {
|
|
required: true,
|
|
})
|
|
/** 获取频道列表 */
|
|
// const channelIdList = ref<any>([])
|
|
// const getChannelIdList = () => {
|
|
// list().then((res) => {
|
|
// channelIdList.value = res.data
|
|
// if (channelIdList.value.length > 0) {
|
|
// channelId.value = channelIdList.value[0].channelId
|
|
// }
|
|
// })
|
|
// }
|
|
// getChannelIdList()
|
|
|
|
const handleClick = (id: number) => {
|
|
console.log(id)
|
|
channelId.value = id
|
|
navigateTo(`/channel/${id}/1`)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.active {
|
|
color: #1a65ff !important;
|
|
}
|
|
</style>
|