feat: 搜索结果页联调
This commit is contained in:
杨航
+679
-571
File diff suppressed because it is too large
Load Diff
@@ -2,30 +2,22 @@
|
||||
<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="itemInfo.traInterTyp === '03'"
|
||||
></image>
|
||||
<image
|
||||
class="type-icon"
|
||||
src="@/static/images/sparring/phone-icon.png"
|
||||
v-if="itemInfo.traInterTyp === '02'"
|
||||
></image>
|
||||
<image
|
||||
class="type-icon"
|
||||
src="@/static/images/sparring/talk-icon.png"
|
||||
v-if="itemInfo.traInterTyp === '01'"
|
||||
></image>
|
||||
<image class="type-icon" src="@/static/images/sparring/video-icon.png" v-if="itemInfo.traInterTyp === '03'">
|
||||
</image>
|
||||
<image class="type-icon" src="@/static/images/sparring/phone-icon.png" v-if="itemInfo.traInterTyp === '02'">
|
||||
</image>
|
||||
<image class="type-icon" src="@/static/images/sparring/talk-icon.png" v-if="itemInfo.traInterTyp === '01'">
|
||||
</image>
|
||||
{{itemInfo.traInterName}}
|
||||
</view>
|
||||
<ImagePreview class="img-box" :src="itemInfo.ossAddr" :isCache="true" width="225" height="170" mode="scaleToFill">
|
||||
<ImagePreview class="img-box" :src="itemInfo.ossAddr" :isCache="true" width="225" height="170" mode="widthFix">
|
||||
</ImagePreview>
|
||||
<view class="item-title">{{itemInfo.traName}}</view>
|
||||
<scroll-view class="item-tags" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item-tag-view">
|
||||
<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">
|
||||
{{item.tagName}}</view>
|
||||
{{item.tagName}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="item-publish">截至时间：{{itemInfo.endTm}}</view>
|
||||
@@ -34,7 +26,7 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
<script>
|
||||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||||
export default {
|
||||
name: "sparring-item",
|
||||
@@ -58,7 +50,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -85,106 +77,111 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sparring-info {
|
||||
padding:0rpx 15rpx 24rpx;
|
||||
.sparring-info {
|
||||
padding: 0rpx 15rpx 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.item-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
.item-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 44rpx;
|
||||
font-size: 29rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 20rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cont-box {
|
||||
text-overflow: ellipsis;
|
||||
line-height: 44rpx;
|
||||
font-size: 29rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 20rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cont-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 20rpx;
|
||||
float: left;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #f1f1f1;
|
||||
position: relative;
|
||||
|
||||
.item-type {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 20rpx;
|
||||
float: left;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #f1f1f1;
|
||||
position: relative;
|
||||
.item-type{
|
||||
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;
|
||||
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%);
|
||||
}
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
top: 50%;
|
||||
left: 14rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.img-box {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
}
|
||||
.item-tags {
|
||||
margin-bottom: 14rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-tag-view {
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 100%;
|
||||
// height: 180rpx;
|
||||
}
|
||||
|
||||
.item-tags {
|
||||
margin-bottom: 14rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-tag-view {
|
||||
white-space: nowrap;
|
||||
height: 44rpx;
|
||||
|
||||
.item-tag {
|
||||
height: 38rpx;
|
||||
line-height: 34rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 20rpx;
|
||||
background-color: #fff;
|
||||
color: #06f;
|
||||
border: 2rpx solid #06f;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
height: 44rpx;
|
||||
|
||||
.item-tag {
|
||||
height: 38rpx;
|
||||
line-height: 34rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 20rpx;
|
||||
background-color: #fff;
|
||||
color: #06f;
|
||||
border: 2rpx solid #06f;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.active-tag {
|
||||
// background-color: #ffa150;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.active-tag {
|
||||
// background-color: #ffa150;
|
||||
color: #ffa150;
|
||||
border: 2rpx solid #ffa150;
|
||||
}
|
||||
border: 2rpx solid #ffa150;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-publish,
|
||||
.item-num {
|
||||
padding: 0 20rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(102, 102, 102);
|
||||
margin-top: 6rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-publish {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-publish,
|
||||
.item-num {
|
||||
padding: 0 20rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 19rpx;
|
||||
color: rgb(102, 102, 102);
|
||||
margin-top: 6rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-publish {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -17,11 +17,11 @@
|
||||
<uv-tabs :list="tabList" @click="changeTab" :scrollable="true" 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>
|
||||
<uv-tabs :list="tabSecList" @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="`#06f`"
|
||||
></uv-tabs>
|
||||
<!-- :lineColor="`url(${LineBg}) 2% 2%`" -->
|
||||
<uv-tabs :list="tabSecList" @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="`#06f`"></uv-tabs>
|
||||
<!-- :lineColor="`url(${LineBg}) 2% 2%`" -->
|
||||
</view>
|
||||
<view class="list-view">
|
||||
<view class="filter-btn" @click="
|
||||
@@ -68,9 +68,20 @@
|
||||
<view class="sparring-list-body">
|
||||
<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="toSparringDetail(item)" />
|
||||
<!-- <view class="all-item"> -->
|
||||
<view class="left-items">
|
||||
|
||||
<view class="sparring-item-box" v-for="item in leftsparringList">
|
||||
<SparringItem :itemInfo="item" :activeTag="activeTag" @clickItem="toSparringDetail(item)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-items">
|
||||
|
||||
<view class="sparring-item-box" v-for="item in rightsparringList">
|
||||
<SparringItem :itemInfo="item" :activeTag="activeTag" @clickItem="toSparringDetail(item)" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<view class="loading-box" v-show="loading">
|
||||
<CommonLoading color="#06f" class="loading-val" />
|
||||
</view>
|
||||
@@ -125,34 +136,34 @@
|
||||
borderRadius: '23rpx'
|
||||
}
|
||||
const catelogList = ref([])
|
||||
const tabList = computed(()=>{
|
||||
const tabList = computed(() => {
|
||||
return [{
|
||||
name: '全 部',
|
||||
name: '全 部',
|
||||
value: ''
|
||||
}, ...catelogList.value.map(t=>{
|
||||
return {
|
||||
name: t.label,
|
||||
value: t.value
|
||||
}
|
||||
})]
|
||||
}, ...catelogList.value.map(t => {
|
||||
return {
|
||||
name: t.label,
|
||||
value: t.value
|
||||
}
|
||||
})]
|
||||
})
|
||||
const tabSecList = computed(()=> {
|
||||
let _arr = []
|
||||
if(!activeTabId.value){
|
||||
catelogList.value.forEach(t=>{
|
||||
let _children = (t.children||[])
|
||||
_arr = _arr.concat(_children.map(k=>{
|
||||
const tabSecList = computed(() => {
|
||||
let _arr = []
|
||||
if (!activeTabId.value) {
|
||||
catelogList.value.forEach(t => {
|
||||
let _children = (t.children || [])
|
||||
_arr = _arr.concat(_children.map(k => {
|
||||
return {
|
||||
name: k.label,
|
||||
value: k.value
|
||||
}
|
||||
}))
|
||||
})
|
||||
}else{
|
||||
let _obj = catelogList.value.find(t=>t.value === activeTabId.value)
|
||||
if(_obj){
|
||||
let _children = (_obj.children||[])
|
||||
_arr = _children.map(k=>{
|
||||
} else {
|
||||
let _obj = catelogList.value.find(t => t.value === activeTabId.value)
|
||||
if (_obj) {
|
||||
let _children = (_obj.children || [])
|
||||
_arr = _children.map(k => {
|
||||
return {
|
||||
name: k.label,
|
||||
value: k.value
|
||||
@@ -166,10 +177,10 @@
|
||||
}, ..._arr]
|
||||
})
|
||||
const activeTab = ref('全部')
|
||||
const activeTabId= ref('')
|
||||
const activeTabId = ref('')
|
||||
const activeTabSec = ref('全部')
|
||||
const activeTabSecId= ref('')
|
||||
const activeCourseType = computed(()=> (activeTabSecId.value || activeTabId.value || ''))
|
||||
const activeTabSecId = ref('')
|
||||
const activeCourseType = computed(() => (activeTabSecId.value || activeTabId.value || ''))
|
||||
const activePrdlineType = ref('')
|
||||
const activeTag = ref([])
|
||||
const sparringTypeList = ref([])
|
||||
@@ -252,13 +263,19 @@
|
||||
const sparringList = computed(() => {
|
||||
return sparringListBase.value
|
||||
})
|
||||
const leftsparringList = computed(() => {
|
||||
return sparringList.value.filter((t, index) => index % 2 === 0)
|
||||
})
|
||||
const rightsparringList = computed(() => {
|
||||
return sparringList.value.filter((t, index) => index % 2 === 1)
|
||||
})
|
||||
const pageObj = ref({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0
|
||||
})
|
||||
const getMoreList = flag => {
|
||||
if(loading.value) return
|
||||
if (loading.value) return
|
||||
if (!flag) {
|
||||
if (pageObj.value.total <= pageObj.value.page * pageObj.value.limit) return
|
||||
pageObj.value.page += 1
|
||||
@@ -268,19 +285,19 @@
|
||||
}
|
||||
pageObj.value.total = 0
|
||||
loading.value = true
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
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 => {
|
||||
@@ -297,9 +314,9 @@
|
||||
loading.value = true
|
||||
|
||||
queryCrsInfoByCatalogApi({
|
||||
...pageObj.value,
|
||||
catalogId: activeCourseType.value
|
||||
})
|
||||
...pageObj.value,
|
||||
catalogId: activeCourseType.value
|
||||
})
|
||||
.then(res => {
|
||||
sparringListBase.value = res.body || []
|
||||
pageObj.value.total = res.total
|
||||
@@ -321,9 +338,9 @@
|
||||
loading.value = true
|
||||
|
||||
queryCrsInfoByCatalogApi({
|
||||
...pageObj.value,
|
||||
catalogId: activeCourseType.value
|
||||
})
|
||||
...pageObj.value,
|
||||
catalogId: activeCourseType.value
|
||||
})
|
||||
.then(res => {
|
||||
sparringListBase.value = res.body || []
|
||||
pageObj.value.total = res.total
|
||||
@@ -338,8 +355,8 @@
|
||||
}
|
||||
// 跳转 课程详情
|
||||
const toSparringDetail = item => {
|
||||
if(item.traId){
|
||||
common.navigateTo('/pages/sparring/detail?traId=' + item.traId)
|
||||
if (item.traId) {
|
||||
common.navigateTo('/pages/sparring/detail?traId=' + item.traId)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
@@ -380,20 +397,23 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my_tabs {
|
||||
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
// height: 30rpx !important;
|
||||
// left: 60rpx;
|
||||
// background-size: 24rpx !important;
|
||||
// background-repeat: no-repeat !important;
|
||||
background: linear-gradient(90deg, #06f 0%, rgb(0,159,255) 50%, rgb(255,255,255) 100%) !important;
|
||||
background: linear-gradient(90deg, #06f 0%, rgb(0, 159, 255) 50%, rgb(255, 255, 255) 100%) !important;
|
||||
}
|
||||
|
||||
:deep(.uv-tabs__wrapper__nav__item) {
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.my_tabs2 {
|
||||
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
// display: none;
|
||||
@@ -707,21 +727,29 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
// margin: 0 10rpx;
|
||||
|
||||
// margin: 0 10rpx;
|
||||
&.no-radius {
|
||||
border-radius: 0rpx 0 0 0;
|
||||
}
|
||||
|
||||
.sparring-item-box {
|
||||
.left-items {
|
||||
width: 50%;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-items {
|
||||
width: 50%;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sparring-item-box {
|
||||
// width: 50%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
||||
// background-color: #f1f1f1;
|
||||
// margin-bottom: 16rpx;
|
||||
&:nth-child(2n-1) {
|
||||
// margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -83,6 +83,8 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<badge ref="badgeRef"></badge>
|
||||
<points ref="pointsRef" @confirm="pointsConfirm"></points>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -119,6 +121,8 @@
|
||||
storeToRefs
|
||||
} from 'pinia';
|
||||
import TalkingItem from './components/talking-item.vue'
|
||||
import badge from '@/components/points-and-badge/badge';
|
||||
import points from '@/components/points-and-badge/points';
|
||||
|
||||
|
||||
const socketStore = useSocketStore();
|
||||
@@ -129,6 +133,8 @@
|
||||
const traId = ref('')
|
||||
const chaId = ref('')
|
||||
const talkingType = ref('')
|
||||
const badgeRef = ref(null);
|
||||
const pointsRef = ref(null);
|
||||
const isPreview = ref(false)
|
||||
const detailInfo = ref({})
|
||||
const currentIndex = ref(0)
|
||||
@@ -413,6 +419,25 @@
|
||||
common.navigateTo('/pages/sparring/result?traId=' + traId.value + '&execId=' + execId.value + '&type=' + talkingType.value + '&isPreview=' + (isPreview.value ?'1':''))
|
||||
})
|
||||
}
|
||||
const getPointsList = (pointsList = [], badgesList = []) => {
|
||||
pointsRef.value.open(pointsList, badgesList);
|
||||
|
||||
}
|
||||
const badgeConfirm = (status, pointsList = [], badgesList = []) => {
|
||||
badgeRef.value.close();
|
||||
overTalking()
|
||||
};
|
||||
// 积分确认
|
||||
const pointsConfirm = (status, pointsList = [], badgesList = []) => {
|
||||
pointsRef.value.close();
|
||||
if (badgesList.length > 0) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
badgeRef.value.open(pointsList, badgesList);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
};
|
||||
const sendMessage = (data) => {
|
||||
unref(SocketObj).send(data);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user