tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 陪练页面样式

Browse Source
This commit is contained in:
杨航
2025-10-30 17:31:24 +08:00
parent 1f7cd049f9
commit 38b429e52b
7 changed files with 115 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/sparring.js
+28
View File
@@ -0,0 +1,28 @@
import request from '@/api/request'
const course_base_url = '/trapractice'
// 获取课程分类树接口
export const getCourseTypeListApi = (data) => {
return request({
url: course_base_url + '/traPartnerCatelog/queryTraPartnerCatelog',
method: 'post',
data
});
};
// 获取标签分类树 接口
export const getTraTagListApi = (data) => {
return request({
url: course_base_url + '/traPartnerTag/queryTraTagCatalogInfoList',
method: 'post',
data
});
};
// 全部模块
export const queryCrsInfoByCatalogApi = (data) => {
return request({
url: course_course_base_url + '/traPartnerInfo/queryTraPartnerInfoPaging',
method: 'post',
data
});
};
src/pages/sparring/components/sparring-item.vue
+40
View File
@@ -1,6 +1,24 @@
<template>
<view class="sparring-info" @click="clickItem">
<view class="cont-box">
<view class="item-type">
<image
class="type-icon"
src="@/static/images/sparring/video-icon.png"
v-if="Number(itemInfo.accmStdyCnt)%3 === 0"
></image>
<image
class="type-icon"
src="@/static/images/sparring/phone-icon.png"
v-if="Number(itemInfo.accmStdyCnt)%3 === 1"
></image>
<image
class="type-icon"
src="@/static/images/sparring/talk-icon.png"
v-if="Number(itemInfo.accmStdyCnt)%3 === 2"
></image>
{{'视频对话'}}
</view>
<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill">
</ImagePreview>
<view class="item-title">{{itemInfo.crsName}}</view>
@@ -91,6 +109,28 @@
overflow: hidden;
background-color: #fff;
border: 2rpx solid #f1f1f1;
position: relative;
.item-type{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 48rpx;
padding: 12rpx 0 0 60rpx;
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-size: 24rpx;
line-height: 24rpx;
z-index: 10;
.type-icon{
position: absolute;
width: 32rpx;
height: 32rpx;
top:50%;
left: 14rpx;
transform: translateY(-50%);
}
}
.img-box {
width: 100%;
height: 180rpx;
src/pages/sparring/index.vue
+46 -109
View File
@@ -15,15 +15,12 @@
</view>
<view class="tabs-view">
<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: '500' }"
:activeStyle="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
></uv-tabs>
class="font_pf my_tabs" :inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '500' }"
:activeStyle="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"></uv-tabs>
<uv-tabs :list="tabList" @click="changeTabSec" :scrollable="true" active-style="font-weight:bold; color:#000;"
class="font_pf my_tabs2"
:inactive-style="{ color: '#333333', fontSize: '24rpx', fontWeight: '500' }"
:activeStyle="{ color: '#0066FF', fontSize: '24rpx', fontWeight: '500' }"
:lineColor="`url(${LineBg}) 2% 2%`"></uv-tabs>
class="font_pf my_tabs2" :inactive-style="{ color: '#333333', fontSize: '24rpx', fontWeight: '500' }"
:activeStyle="{ color: '#0066FF', fontSize: '24rpx', fontWeight: '500' }"
:lineColor="`url(${LineBg}) 2% 2%`"></uv-tabs>
</view>
<view class="list-view">
<view class="filter-btn" @click="
@@ -34,11 +31,8 @@
">
<!-- 筛选 -->
<!-- <uv-icon class="filter-icon" name="list" /> -->
<image
class="filter-icon"
src="@/static/images/course/filter.png"
></image>
<image class="filter-icon" src="@/static/images/course/filter.png"></image>
</view>
<view :class="['filter-list', showFilterList ? 'show' : '']">
<scroll-view :scroll-y="true" class="scroll-box-tags">
@@ -74,8 +68,7 @@
<scroll-view :class="['right-sparring-list', getActiveItemClass()]" :scroll-y="true"
@scrolltolower="getMoreList()">
<view class="sparring-item-box" v-for="item in sparringList">
<SparringItem :itemInfo="item" :activeTag="activeTag"
@clickItem="toCourseDetail(item)" />
<SparringItem :itemInfo="item" :activeTag="activeTag" @clickItem="toCourseDetail(item)" />
</view>
<view class="loading-box" v-show="loading">
<CommonLoading color="#06f" class="loading-val" />
@@ -91,17 +84,14 @@
<script setup>
import SparringItem from './components/sparring-item.vue'
import common from '@/common/common'
import { LineBg } from '@/enum.js';
import {
getPrdLineTypeListApi,
LineBg
} from '@/enum.js';
import {
getTraTagListApi,
getCourseTypeListApi,
queryCrsInfoByCatalogApi,
queryCrsInfoByPrdLineApi,
queryCrsInfoByLastnewApi,
queryCrsInfoByPopularApi,
queryCrsInfoByRecmdApi
} from '@/api/course.js'
queryCrsInfoByCatalogApi
} from '@/api/sparring.js'
import {
onMounted,
onActivated,
@@ -243,7 +233,7 @@
total: 0
})
const getMoreList = flag => {
console.log(activeTab.value)
if(loading.value) return
if (!flag) {
if (pageObj.value.total <= pageObj.value.page * pageObj.value.limit) return
pageObj.value.page += 1
@@ -253,73 +243,19 @@
}
pageObj.value.total = 0
loading.value = true
switch (activeTab.value) {
case '全部':
queryCrsInfoByCatalogApi({
...pageObj.value,
tagId: activeTag.value.join(','),
catalogId: activeCourseType.value
})
.then(res => {
sparringListBase.value = sparringListBase.value.concat(res.body || [])
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
break
case '热门':
queryCrsInfoByPopularApi({
...pageObj.value,
tagId: activeTag.value.join(',')
})
.then(res => {
sparringListBase.value = res.body || []
})
.finally(() => {
loading.value = false
})
break
case '最新':
queryCrsInfoByLastnewApi({
...pageObj.value,
tagId: activeTag.value.join(',')
})
.then(res => {
sparringListBase.value = res.body || []
})
.finally(() => {
loading.value = false
})
break
case '推荐':
queryCrsInfoByRecmdApi({
...pageObj.value,
tagId: activeTag.value.join(',')
})
.then(res => {
sparringListBase.value = sparringListBase.value.concat(res.body || [])
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
break
case '生产线':
queryCrsInfoByPrdLineApi({
...pageObj.value,
tagId: activeTag.value.join(','),
prdLineId: activePrdlineType.value
})
.then(res => {
sparringListBase.value = sparringListBase.value.concat(res.body || [])
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
break
}
queryCrsInfoByCatalogApi({
...pageObj.value,
tagId: activeTag.value.join(','),
catalogId: activeCourseType.value
})
.then(res => {
sparringListBase.value = sparringListBase.value.concat(res.body || [])
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
}
const loading = ref(false)
const changeTab = item => {
@@ -334,18 +270,18 @@
activeCourseType.value = ''
activePrdlineType.value = ''
loading.value = true
queryCrsInfoByCatalogApi(pageObj.value)
.then(res => {
sparringListBase.value = res.body || []
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
queryCrsInfoByCatalogApi(pageObj.value)
.then(res => {
sparringListBase.value = res.body || []
pageObj.value.total = res.total
})
.finally(() => {
loading.value = false
})
}
const changeTabSec = () => {
}
// 跳转搜索页
const toSearchPage = () => {
@@ -360,16 +296,12 @@
getCourseTypeListApi().then(res => {
sparringTypeList.value = res.body || []
})
getPrdLineTypeListApi().then(res => {
sparringPrdlineList.value = res.body || []
})
getTraTagListApi().then(res => {
tagsTree.value = res.body || []
})
changeTab({
name: '全部'
})
uni.$on('refresh_sparring_list', () => {
changeTab({
name: activeTab.value || '全部'
@@ -398,6 +330,7 @@
<style lang="scss" scoped>
.my_tabs2 {
// 解决这个圆角的图片，开穿透
:deep(.uv-tabs__wrapper__nav__line) {
height: 30rpx !important;
@@ -405,10 +338,12 @@
background-size: 24rpx !important;
background-repeat: no-repeat !important;
}
:deep(.uv-tabs__wrapper__nav__item){
:deep(.uv-tabs__wrapper__nav__item) {
padding: 0 30rpx !important;
}
}
.sparring-center {
position: relative;
display: flex;
@@ -469,7 +404,7 @@
.tabs-view {
background: #ffffff;
border-radius: 23rpx 23rpx 0 0;
border-radius: 23rpx 23rpx 0 0;
padding: 6rpx 10rpx 12rpx;
margin: 20rpx 15rpx 0;
}
@@ -713,12 +648,14 @@
&.no-radius {
border-radius: 0rpx 0 0 0;
}
.sparring-item-box{
.sparring-item-box {
width: 50%;
float: left;
// background-color: #f1f1f1;
// margin-bottom: 16rpx;
&:nth-child(2n-1){
&:nth-child(2n-1) {
// margin-right: 16rpx;
}
}
src/static/images/sparring/phone-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 603 B

src/static/images/sparring/talk-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 B

src/static/images/sparring/video-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B