fix: ai学习页面调整
This commit is contained in:
杨航
@@ -3,3 +3,11 @@ ENV = 'development'
|
||||
# 'development'
|
||||
|
||||
VITE_APP_BASE_API_Url = ''
|
||||
|
||||
VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
|
||||
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
|
||||
# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://192.168.247.200'
|
||||
# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
|
||||
VITE_APP_BASE_H5_API_Url_TRAEXAM = ''http://25.64.32.154:9604'
|
||||
# VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.32.154:9605'
|
||||
@@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<view class="course-item-box" @click="clickItem">
|
||||
<view class="item-title">{{itemInfo.crsName}}</view>
|
||||
<view class="img-box-view">
|
||||
<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill"></ImagePreview>
|
||||
<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill">
|
||||
</ImagePreview>
|
||||
<view class="item-grade">{{itemInfo.evalGrade}}</view>
|
||||
<!-- <image class="item-grade" mode="aspectFill"></view> -->
|
||||
</view>
|
||||
<view class="cont-box">
|
||||
<view class="item-title">{{itemInfo.crsName}}</view>
|
||||
<scroll-view class="item-tags" :scroll-x="true">
|
||||
<view class="item-tag-view">
|
||||
<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">{{item.tagName}}</view>
|
||||
<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">
|
||||
{{item.tagName}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="item-publish">更新：{{itemInfo.mtTime}}</view>
|
||||
@@ -18,24 +20,24 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
<script>
|
||||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||||
export default {
|
||||
name:"course-item",
|
||||
components:{
|
||||
name: "course-item",
|
||||
components: {
|
||||
ImagePreview
|
||||
},
|
||||
props:{
|
||||
itemInfo:{
|
||||
props: {
|
||||
itemInfo: {
|
||||
type: Object,
|
||||
default:()=>({
|
||||
default: () => ({
|
||||
crsName: '',
|
||||
tagCataList:[],
|
||||
publicTime:"",
|
||||
learnedNum:''
|
||||
tagCataList: [],
|
||||
publicTime: "",
|
||||
learnedNum: ''
|
||||
})
|
||||
},
|
||||
activeTag:{
|
||||
activeTag: {
|
||||
default: () => [],
|
||||
type: Array
|
||||
}
|
||||
@@ -45,23 +47,23 @@
|
||||
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
activeTag:{
|
||||
handler(){},
|
||||
watch: {
|
||||
activeTag: {
|
||||
handler() {},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
tagsShowList(){
|
||||
if(!this.activeTag) return this.itemInfo.tagCataList||[]
|
||||
let _arr = (this.itemInfo.tagCataList||[]).filter(t=> this.activeTag.includes(t.tagId))
|
||||
let _arr1 = (this.itemInfo.tagCataList||[]).filter(t=> !this.activeTag.includes(t.tagId))
|
||||
computed: {
|
||||
tagsShowList() {
|
||||
if (!this.activeTag) return this.itemInfo.tagCataList || []
|
||||
let _arr = (this.itemInfo.tagCataList || []).filter(t => this.activeTag.includes(t.tagId))
|
||||
let _arr1 = (this.itemInfo.tagCataList || []).filter(t => !this.activeTag.includes(t.tagId))
|
||||
return _arr.concat(_arr1)
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
clickItem(){
|
||||
methods: {
|
||||
clickItem() {
|
||||
this.$emit('clickItem', this.itemInfo)
|
||||
}
|
||||
}
|
||||
@@ -69,43 +71,42 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.course-item-box{
|
||||
padding: 15rpx;
|
||||
.course-item-box {
|
||||
padding: 8rpx 15rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
.img-box-view{
|
||||
|
||||
.img-box-view {
|
||||
width: 225rpx;
|
||||
height: 170rpx;
|
||||
height: 127rpx;
|
||||
float: left;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10rpx #c3c3c3;
|
||||
.img-box{
|
||||
|
||||
.img-box {
|
||||
width: 225rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
.item-grade{
|
||||
|
||||
.item-grade {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 60rpx;
|
||||
height: 46rpx;
|
||||
background-color: #ff581c;
|
||||
top:20rpx;
|
||||
top: 20rpx;
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
// padding-right: 10rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
.cont-box{
|
||||
width: calc(100% - 225rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 10rpx 0 20rpx;
|
||||
float: left;
|
||||
.item-title{
|
||||
|
||||
.item-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -114,11 +115,21 @@
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.item-tags{
|
||||
.item-tag-view{
|
||||
|
||||
.cont-box {
|
||||
width: calc(100% - 225rpx);
|
||||
box-sizing: border-box;
|
||||
padding: 0 10rpx 0 20rpx;
|
||||
float: left;
|
||||
|
||||
.item-tags {
|
||||
margin-bottom: 14rpx;
|
||||
|
||||
.item-tag-view {
|
||||
white-space: nowrap;
|
||||
height: 44rpx;
|
||||
.item-tag{
|
||||
|
||||
.item-tag {
|
||||
height: 38rpx;
|
||||
line-height: 34rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -135,7 +146,8 @@
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
&.active-tag{
|
||||
|
||||
&.active-tag {
|
||||
background-color: #ffa150;
|
||||
color: #fff;
|
||||
border: 2rpx solid #ffa150;
|
||||
@@ -143,18 +155,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-publish,
|
||||
.item-num{
|
||||
.item-num {
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(102,102,102);
|
||||
color: rgb(102, 102, 102);
|
||||
margin-top: 6rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.item-publish{
|
||||
|
||||
.item-publish {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+263
-125
@@ -9,21 +9,24 @@
|
||||
AI学习
|
||||
</view>
|
||||
<view class="input-view" @click="toSearchPage">
|
||||
<uv-input shape="circle" placeholderStyle="color:#999999;font-size:28rpx" placeholder="请输入课程名" suffixIcon="search" :customStyle="customStyle" :suffixIconStyle="suffixIconStyle" :readonly="true"> </uv-input>
|
||||
<uv-input shape="square" placeholderStyle="color:#999999;font-size:28rpx;" placeholder="请输入课程名"
|
||||
suffixIcon="search" :customStyle="customStyle" :suffixIconStyle="suffixIconStyle" :readonly="true">
|
||||
</uv-input>
|
||||
</view>
|
||||
<view class="tabs-view">
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" active-style="font-weight:bold; color:#000;" line-color="#06f"></uv-tabs>
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" active-style="font-weight:bold; color:#000;"
|
||||
class="font_pf my_tabs"
|
||||
:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
|
||||
</view>
|
||||
<view class="list-view">
|
||||
<view
|
||||
class="filter-btn"
|
||||
@click="
|
||||
<view class="filter-btn" @click="
|
||||
() => {
|
||||
showFilterList = !showFilterList
|
||||
activeTagPop = activeTag
|
||||
}
|
||||
"
|
||||
>筛选
|
||||
">筛选
|
||||
<uv-icon class="filter-icon" name="list" />
|
||||
</view>
|
||||
<view :class="['filter-list', showFilterList ? 'show' : '']">
|
||||
@@ -32,7 +35,8 @@
|
||||
<!-- .filter(t=>(t.children||[]).length>0) -->
|
||||
<view class="filter-type-title">{{ item.label }}</view>
|
||||
<scroll-view :scroll-x="true" class="filter-type-list">
|
||||
<view :class="['filter-type-item', activeTagPop.includes(itemT.value) ? 'is-active' : '']" v-for="itemT in item.children || []" @click="chooseTagPop(itemT)">
|
||||
<view :class="['filter-type-item', activeTagPop.includes(itemT.value) ? 'is-active' : '']"
|
||||
v-for="itemT in item.children || []" @click="chooseTagPop(itemT)">
|
||||
{{ itemT.label }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -45,51 +49,49 @@
|
||||
</view>
|
||||
<view :class="['model-filter-list', showFilterList ? 'show' : '']" @click="showFilterList = false"></view>
|
||||
<uv-scroll-list class="tags-view" :indicator="false">
|
||||
<uv-tags
|
||||
text="全部"
|
||||
bgColor="#f6f8fa"
|
||||
:borderColor="activeTag.length === 0 ? '#06f' : '#f6f8fa'"
|
||||
<uv-tags text="全部" bgColor="#f6f8fa" :borderColor="activeTag.length === 0 ? '#06f' : '#f6f8fa'"
|
||||
:color="activeTag.length === 0 ? '#06f' : '#333'"
|
||||
:class="activeTag.length === 0 ? 'tags-item active-tags-item' : 'tags-item'"
|
||||
size="medium"
|
||||
:type="activeTag.length === 0 ? 'primary' : 'info'"
|
||||
@click="chooseTag({ value: '' })"></uv-tags>
|
||||
<uv-tags
|
||||
:text="item.label"
|
||||
v-for="item in tagsList"
|
||||
:key="item.value"
|
||||
size="medium"
|
||||
:bgColor="'#f6f8fa'"
|
||||
:class="activeTag.length === 0 ? 'tags-item active-tags-item' : 'tags-item'" size="medium"
|
||||
:type="activeTag.length === 0 ? 'primary' : 'info'" @click="chooseTag({ value: '' })"></uv-tags>
|
||||
<uv-tags :text="item.label" v-for="item in tagsList" :key="item.value" size="medium" :bgColor="'#f6f8fa'"
|
||||
:borderColor="activeTag.includes(item.value) ? '#06f' : '#f6f8fa'"
|
||||
:color="activeTag.includes(item.value) ? '#06f' : '#333'"
|
||||
@click="chooseTag(item)"
|
||||
:color="activeTag.includes(item.value) ? '#06f' : '#333'" @click="chooseTag(item)"
|
||||
:class="activeTag.includes(item.value) ? 'tags-item active-tags-item' : 'tags-item'"></uv-tags>
|
||||
</uv-scroll-list>
|
||||
<view class="course-list">
|
||||
<view class="course-list-body">
|
||||
<view class="left-type-list" v-if="'全部' === activeTab">
|
||||
<view v-for="item in courseTypeList" :key="item.value" :class="['type-item', activeCourseType == item.value ? 'is-active' : '']" @click="changeCourseType(item)">
|
||||
<view v-for="(item, index) in courseTypeList" :key="item.value"
|
||||
:class="['type-item', activeCourseType == item.value ? 'is-active' : '']"
|
||||
@click="changeCourseType(item,index)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="left-type-list" v-if="'生产线' === activeTab">
|
||||
<view v-for="item in coursePrdlineList" :key="item.value" :class="['type-item', activePrdlineType == item.value ? 'is-active' : '']" @click="changePrdLine(item)">
|
||||
<view v-for="(item, index) in coursePrdlineList" :key="item.value"
|
||||
:class="['type-item', activePrdlineType == item.value ? 'is-active' : '']"
|
||||
@click="changePrdLine(item,index)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="right-course-list" :scroll-y="true" @scrolltolower="getMoreList()">
|
||||
<scroll-view :class="['right-course-list', getActiveItemClass()]" :scroll-y="true"
|
||||
@scrolltolower="getMoreList()">
|
||||
<view class="type-list" v-for="item in courseListTreeShow">
|
||||
<view class="type-title" v-if="item.courseList.length > 0 && showTypeName">
|
||||
<!-- v-if="itemT.courseList.length>0 && " -->
|
||||
<view class="left-color"></view>
|
||||
<view class="left-tips"></view>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
<CourseItem v-for="itemC in item.courseList" :itemInfo="itemC" :activeTag="activeTag" @clickItem="toCourseDetail(itemC)" />
|
||||
<CourseItem v-for="itemC in item.courseList" :itemInfo="itemC" :activeTag="activeTag"
|
||||
@clickItem="toCourseDetail(itemC)" />
|
||||
<view class="type-list" v-for="itemT in item.children">
|
||||
<view class="type-title" v-if="itemT.courseList.length > 0">
|
||||
<view class="left-color"></view>
|
||||
<!-- <view class="left-color"></view> -->
|
||||
<view class="left-tips"></view>
|
||||
{{ itemT.label }}
|
||||
</view>
|
||||
<CourseItem v-for="itemTC in itemT.courseList" :activeTag="activeTag" :itemInfo="itemTC" @clickItem="toCourseDetail(itemTC)" />
|
||||
<CourseItem v-for="itemTC in itemT.courseList" :activeTag="activeTag" :itemInfo="itemTC"
|
||||
@clickItem="toCourseDetail(itemTC)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-box" v-show="loading">
|
||||
@@ -100,50 +102,83 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CourseItem from '@/components/course-item/course-item.vue'
|
||||
import common from '@/common/common'
|
||||
import { getPrdLineTypeListApi, getTraTagListApi, getCourseTypeListApi, queryCrsInfoByCatalogApi, queryCrsInfoByPrdLineApi, queryCrsInfoByLastnewApi, queryCrsInfoByPopularApi, queryCrsInfoByRecmdApi } from '@/api/course.js'
|
||||
import { onMounted, onActivated, ref, computed, onUnmounted } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { useSocketStore } from '@/store/socket.js'
|
||||
import CourseItem from '@/components/course-item/course-item.vue'
|
||||
import common from '@/common/common'
|
||||
import { LineBg } from '@/enum.js';
|
||||
import {
|
||||
getPrdLineTypeListApi,
|
||||
getTraTagListApi,
|
||||
getCourseTypeListApi,
|
||||
queryCrsInfoByCatalogApi,
|
||||
queryCrsInfoByPrdLineApi,
|
||||
queryCrsInfoByLastnewApi,
|
||||
queryCrsInfoByPopularApi,
|
||||
queryCrsInfoByRecmdApi
|
||||
} from '@/api/course.js'
|
||||
import {
|
||||
onMounted,
|
||||
onActivated,
|
||||
ref,
|
||||
computed,
|
||||
onUnmounted
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
useSocketStore
|
||||
} from '@/store/socket.js'
|
||||
|
||||
const socketStore = useSocketStore()
|
||||
const customStyle = {
|
||||
backgroundColor: '#ffffff',
|
||||
const socketStore = useSocketStore()
|
||||
const customStyle = {
|
||||
backgroundColor: '#f6f8fa',
|
||||
paddingLeft: '40rpx',
|
||||
height: '60rpx',
|
||||
paddingTop: '5px',
|
||||
paddingBottom: '5px',
|
||||
border: 'none'
|
||||
}
|
||||
const suffixIconStyle = {
|
||||
}
|
||||
const suffixIconStyle = {
|
||||
color: '#2c8ef2',
|
||||
fontSize: '40rpx'
|
||||
}
|
||||
const tabsCustomStyle = {
|
||||
}
|
||||
const tabsCustomStyle = {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '23rpx'
|
||||
}
|
||||
const tabList = [{ name: '全部' }, { name: '热门' }, { name: '最新' }, { name: '推荐' }, { name: '生产线' }]
|
||||
const activeTab = ref('全部')
|
||||
const activeCourseType = ref('')
|
||||
const activePrdlineType = ref('')
|
||||
const activeTag = ref([])
|
||||
const courseTypeList = ref([])
|
||||
const coursePrdlineList = ref([])
|
||||
const tagsTree = ref([])
|
||||
}
|
||||
const tabList = [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '热门'
|
||||
}, {
|
||||
name: '最新'
|
||||
}, {
|
||||
name: '推荐'
|
||||
}, {
|
||||
name: '生产线'
|
||||
}]
|
||||
const activeTab = ref('全部')
|
||||
const activeCourseType = ref('')
|
||||
const activePrdlineType = ref('')
|
||||
const activeTag = ref([])
|
||||
const courseTypeList = ref([])
|
||||
const coursePrdlineList = ref([])
|
||||
const tagsTree = ref([])
|
||||
|
||||
const showFilterList = ref(false)
|
||||
const { statusBarHeight } = uni.getWindowInfo()
|
||||
const showFilterList = ref(false)
|
||||
const {
|
||||
statusBarHeight
|
||||
} = uni.getWindowInfo()
|
||||
|
||||
const pageTopPadding = computed(() => statusBarHeight + 'px')
|
||||
const pageTopPadding = computed(() => statusBarHeight + 'px')
|
||||
|
||||
const activeTagPop = ref([])
|
||||
const activeTagPop = ref([])
|
||||
|
||||
const chooseTagPop = item => {
|
||||
const chooseTagPop = item => {
|
||||
if (!item.value) {
|
||||
activeTagPop.value = []
|
||||
return
|
||||
@@ -154,9 +189,9 @@ const chooseTagPop = item => {
|
||||
} else {
|
||||
activeTagPop.value.push(item.value)
|
||||
}
|
||||
}
|
||||
// 点击标签
|
||||
const chooseTag = item => {
|
||||
}
|
||||
// 点击标签
|
||||
const chooseTag = item => {
|
||||
if (!item.value) {
|
||||
activeTag.value = []
|
||||
} else {
|
||||
@@ -171,21 +206,34 @@ const chooseTag = item => {
|
||||
pageObj.value.total = 0
|
||||
getMoreList(1)
|
||||
// showFilterList.value = false
|
||||
}
|
||||
// 点击生产线分类
|
||||
const changePrdLine = item => {
|
||||
}
|
||||
const activeLeftIndex = ref(-1)
|
||||
const getActiveItemClass = () => {
|
||||
let _class = ''
|
||||
if ('生产线' === activeTab.value) {
|
||||
_class = activeLeftIndex.value === 0 ? 'no-radius' : ''
|
||||
} else if ('全部' === activeTab.value) {
|
||||
_class = activeLeftIndex.value === 0 ? 'no-radius' : ''
|
||||
}
|
||||
return _class
|
||||
}
|
||||
// 点击生产线分类
|
||||
const changePrdLine = (item, index) => {
|
||||
activePrdlineType.value = item.value === activePrdlineType.value ? '' : item.value
|
||||
activeLeftIndex.value = index
|
||||
getMoreList(1)
|
||||
}
|
||||
// 点击课程分类
|
||||
const changeCourseType = item => {
|
||||
}
|
||||
// 点击课程分类
|
||||
const changeCourseType = (item, index) => {
|
||||
activeCourseType.value = item.value === activeCourseType.value ? '' : item.value
|
||||
activeLeftIndex.value = index
|
||||
getMoreList(1)
|
||||
}
|
||||
const showTypeName = computed(() => {
|
||||
return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' && activePrdlineType.value === '')
|
||||
})
|
||||
const tagsList = computed(() => {
|
||||
}
|
||||
const showTypeName = computed(() => {
|
||||
return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' &&
|
||||
activePrdlineType.value === '')
|
||||
})
|
||||
const tagsList = computed(() => {
|
||||
let _arr = []
|
||||
tagsTree.value.forEach(t => {
|
||||
let _tarr = t.children || []
|
||||
@@ -194,16 +242,16 @@ const tagsList = computed(() => {
|
||||
let _reqList = _arr.filter(t => t.required === 'Y')
|
||||
let _reqListN = _arr.filter(t => t.required === 'N')
|
||||
return _reqList.concat(_reqListN)
|
||||
})
|
||||
const changeChooseTagsList = () => {
|
||||
})
|
||||
const changeChooseTagsList = () => {
|
||||
showFilterList.value = false
|
||||
activeTag.value = activeTagPop.value
|
||||
pageObj.value.page = 1
|
||||
pageObj.value.total = 0
|
||||
getMoreList(1)
|
||||
}
|
||||
const courseListBase = ref([])
|
||||
const courseList = computed(() => {
|
||||
}
|
||||
const courseListBase = ref([])
|
||||
const courseList = computed(() => {
|
||||
return courseListBase.value
|
||||
// if(activeTag.value.length > 0 && !!activeTag.value[0]){
|
||||
// return courseListBase.value
|
||||
@@ -220,10 +268,11 @@ const courseList = computed(() => {
|
||||
// }else{
|
||||
// return courseListBase.value
|
||||
// }
|
||||
})
|
||||
// 整理树形
|
||||
const courseListTree = computed(() => {
|
||||
let _arr = activeTab.value === '全部' ? courseTypeList.value : activeTab.value === '生产线' ? coursePrdlineList.value : []
|
||||
})
|
||||
// 整理树形
|
||||
const courseListTree = computed(() => {
|
||||
let _arr = activeTab.value === '全部' ? courseTypeList.value : activeTab.value === '生产线' ? coursePrdlineList
|
||||
.value : []
|
||||
let _idKey = activeTab.value === '全部' ? 'tagId' : 'prdLineId'
|
||||
|
||||
let _tree = _arr.map(t => {
|
||||
@@ -242,9 +291,9 @@ const courseListTree = computed(() => {
|
||||
}
|
||||
})
|
||||
return _tree
|
||||
})
|
||||
// 过滤树形
|
||||
const courseListTreeShow = computed(() => {
|
||||
})
|
||||
// 过滤树形
|
||||
const courseListTreeShow = computed(() => {
|
||||
let _type = activeTab.value === '全部' ? activeCourseType.value : activePrdlineType.value
|
||||
if (activeTab.value === '全部' || activeTab.value === '生产线') {
|
||||
if (_type) {
|
||||
@@ -253,22 +302,20 @@ const courseListTreeShow = computed(() => {
|
||||
return courseListTree.value
|
||||
}
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
return [{
|
||||
children: [],
|
||||
courseList: courseList.value,
|
||||
label: '',
|
||||
value: '333'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const pageObj = ref({
|
||||
})
|
||||
const pageObj = ref({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0
|
||||
})
|
||||
const getMoreList = flag => {
|
||||
})
|
||||
const getMoreList = flag => {
|
||||
console.log(activeTab.value)
|
||||
if (!flag) {
|
||||
if (pageObj.value.total <= pageObj.value.page * pageObj.value.limit) return
|
||||
@@ -346,12 +393,13 @@ const getMoreList = flag => {
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
const loading = ref(false)
|
||||
const changeTab = item => {
|
||||
}
|
||||
const loading = ref(false)
|
||||
const changeTab = item => {
|
||||
if (!item) return
|
||||
courseListBase.value = []
|
||||
activeTab.value = item.name
|
||||
activeLeftIndex.value = -1
|
||||
activeTag.value = []
|
||||
pageObj.value.page = 1
|
||||
pageObj.value.total = 0
|
||||
@@ -409,17 +457,17 @@ const changeTab = item => {
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
// 跳转搜索页
|
||||
const toSearchPage = () => {
|
||||
}
|
||||
// 跳转搜索页
|
||||
const toSearchPage = () => {
|
||||
common.navigateTo('/pages/search/search?from=course')
|
||||
}
|
||||
// 跳转 课程详情
|
||||
const toCourseDetail = item => {
|
||||
}
|
||||
// 跳转 课程详情
|
||||
const toCourseDetail = item => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
|
||||
// common.navigateTo('/pages/course/study?crsNum=' + item.crsNum)
|
||||
}
|
||||
onMounted(() => {
|
||||
}
|
||||
onMounted(() => {
|
||||
getCourseTypeListApi().then(res => {
|
||||
courseTypeList.value = res.body || []
|
||||
})
|
||||
@@ -429,44 +477,65 @@ onMounted(() => {
|
||||
getTraTagListApi().then(res => {
|
||||
tagsTree.value = res.body || []
|
||||
})
|
||||
changeTab({ name: '全部' })
|
||||
changeTab({
|
||||
name: '全部'
|
||||
})
|
||||
|
||||
uni.$on('refresh_course_list', () => {
|
||||
changeTab({ name: activeTab.value || '全部' })
|
||||
changeTab({
|
||||
name: activeTab.value || '全部'
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
uni.$off('refresh_course_list')
|
||||
})
|
||||
onActivated(() => {
|
||||
})
|
||||
onActivated(() => {
|
||||
// 重新获取标签信息
|
||||
getTraTagListApi().then(res => {
|
||||
tagsTree.value = res.body || []
|
||||
})
|
||||
changeTab({ name: activeTab.value || '全部' })
|
||||
})
|
||||
onShow(() => {
|
||||
changeTab({ name: activeTab.value || '全部' })
|
||||
changeTab({
|
||||
name: activeTab.value || '全部'
|
||||
})
|
||||
})
|
||||
onShow(() => {
|
||||
changeTab({
|
||||
name: activeTab.value || '全部'
|
||||
})
|
||||
socketStore.closeSocket()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-center {
|
||||
.my_tabs {
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
height: 30rpx !important;
|
||||
left: 50rpx;
|
||||
background-size: 24rpx !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
}
|
||||
.course-center {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.top-bg {
|
||||
background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
|
||||
background-color: #fff;
|
||||
// background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
|
||||
height: 480rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bot-bg {
|
||||
// background-color: #F6F8FF;
|
||||
background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
|
||||
background-color: #fff;
|
||||
// background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.course-center-body {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
@@ -474,11 +543,12 @@ onShow(() => {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 15rpx;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: v-bind(pageTopPadding);
|
||||
|
||||
// padding-top: var(--status-bar-height);
|
||||
.body-title {
|
||||
height: 90rpx;
|
||||
@@ -491,6 +561,7 @@ onShow(() => {
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
position: relative;
|
||||
|
||||
// margin-bottom: 23rpx;
|
||||
.arrow-icon {
|
||||
position: absolute;
|
||||
@@ -499,8 +570,11 @@ onShow(() => {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.input-view {
|
||||
padding: 0 38rpx;
|
||||
}
|
||||
|
||||
.tabs-view {
|
||||
background: #ffffff;
|
||||
margin-top: 23rpx;
|
||||
@@ -508,15 +582,17 @@ onShow(() => {
|
||||
padding: 6rpx 10rpx 12rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.list-view {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-bottom: 15rpx;
|
||||
// margin-bottom: 15rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 23rpx;
|
||||
// border-radius: 23rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.filter-list {
|
||||
position: absolute;
|
||||
top: 84rpx;
|
||||
@@ -531,22 +607,27 @@ onShow(() => {
|
||||
border-radius: 0 0 0rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.scroll-box-tags {
|
||||
height: 508rpx;
|
||||
padding: 0rpx 25rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-type {
|
||||
padding: 10rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.filter-type-title {
|
||||
font-size: 29rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 15rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.filter-type-list {
|
||||
overflow: hidden;
|
||||
|
||||
.filter-type-item {
|
||||
// width: calc(25% - 18rpx);
|
||||
display: inline-block;
|
||||
@@ -564,18 +645,22 @@ onShow(() => {
|
||||
background-color: #f1f3f8;
|
||||
border-radius: 6rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #06f;
|
||||
}
|
||||
}
|
||||
}
|
||||
& + .filter-type {
|
||||
|
||||
&+.filter-type {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-box {
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
@@ -585,6 +670,7 @@ onShow(() => {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 10rpx;
|
||||
|
||||
.btn-sub {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@@ -595,6 +681,7 @@ onShow(() => {
|
||||
padding: 0 40rpx;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.cencle-btn {
|
||||
background-color: #fff;
|
||||
color: #06f;
|
||||
@@ -603,6 +690,7 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-filter-list {
|
||||
position: fixed;
|
||||
width: calc(100vw - 33rpx);
|
||||
@@ -613,13 +701,16 @@ onShow(() => {
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.filter-list,
|
||||
.model-filter-list {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -635,6 +726,7 @@ onShow(() => {
|
||||
white-space: nowrap;
|
||||
padding-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.filter-icon {
|
||||
// display: inline-block;
|
||||
font-size: 26rpx;
|
||||
@@ -644,6 +736,7 @@ onShow(() => {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view {
|
||||
height: 84rpx;
|
||||
display: block;
|
||||
@@ -651,14 +744,17 @@ onShow(() => {
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
|
||||
.tags-item {
|
||||
margin-right: 30rpx;
|
||||
display: inline-block;
|
||||
|
||||
&.active-tags-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4rpx;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -672,6 +768,7 @@ onShow(() => {
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -686,8 +783,10 @@ onShow(() => {
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uv-tags {
|
||||
padding: 0 20rpx;
|
||||
|
||||
.uv-tags__text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -697,14 +796,26 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-list {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #f1f5fa;
|
||||
padding-top: 12rpx;
|
||||
|
||||
.course-list-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.left-type-list {
|
||||
margin-top: -10rpx;
|
||||
width: 152rpx;
|
||||
border-right: 2rpx solid #eee;
|
||||
// border-right: 2rpx solid #eee;
|
||||
overflow-y: auto;
|
||||
|
||||
.type-item {
|
||||
min-height: 90rpx;
|
||||
line-height: 40rpx;
|
||||
@@ -716,15 +827,27 @@ onShow(() => {
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba(44, 142, 242, 0.1);
|
||||
// background-color: rgba(44, 142, 242, 0.1);
|
||||
background: url(@/static/images/course/active-left.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// margin-top: -10rpx;
|
||||
color: #06f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-course-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 23rpx 0 0 0;
|
||||
|
||||
&.no-radius {
|
||||
border-radius: 0rpx 0 0 0;
|
||||
}
|
||||
|
||||
.type-list {
|
||||
.type-title {
|
||||
font-size: 33rpx;
|
||||
@@ -736,6 +859,17 @@ onShow(() => {
|
||||
// white-space: nowrap;
|
||||
word-break: break-all;
|
||||
font-weight: 600;
|
||||
|
||||
.left-tips {
|
||||
width: 33rpx;
|
||||
height: 42rpx;
|
||||
margin-right: 16rpx;
|
||||
float: left;
|
||||
background: url(@/static/images/course/tag-item.png) no-repeat;
|
||||
background-size: 33rpx 33rpx;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.left-color {
|
||||
width: 8rpx;
|
||||
height: 33rpx;
|
||||
@@ -748,12 +882,16 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
|
||||
.loading-val {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -762,5 +900,5 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user