Commit b4c15d2b authored by 张九刚's avatar 张九刚

feat: 在搜索页面添加视频播放功能,优化卡片点击事件,更新图片路径

parent 7393e457
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
</view> </view>
<view v-if="step !== 1 && tabIndex === 'content'" class="bgbox"> <view v-if="step !== 1 && tabIndex === 'content'" class="bgbox">
<view class="cardbox"> <view class="cardbox">
<view @tap="jumpLink(item.link)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index"> <view @tap="jumpLink(item.link,item.videoUrl)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index">
<image mode="aspectFill" class="pic" :src="$baseUrl + item.img"></image> <image mode="aspectFill" class="pic" :src="$baseUrl + item.bgUrl"></image>
<view class="desc"> <view class="desc">
{{ item.desc }} {{ item.desc }}
</view> </view>
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</view> </view>
<view v-if="step !== 1 && tabIndex === 'tool'" class="bgbox"> <view v-if="step !== 1 && tabIndex === 'tool'" class="bgbox">
<view class="cardboxtool"> <view class="cardboxtool">
<view @tap="jumpLink(item.link)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index"> <view @tap="jumpLink(item.link,item.videoUrl)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index">
<image class="pic" :src="$baseUrl + item.bgUrl"></image> <image class="pic" :src="$baseUrl + item.bgUrl"></image>
<!-- <view class="desc"> <!-- <view class="desc">
{{ item.desc }} {{ item.desc }}
...@@ -60,11 +60,13 @@ ...@@ -60,11 +60,13 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay style="width: 100vw; height: 56vw;"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
</view> </view>
</template> </template>
...@@ -85,7 +87,9 @@ export default { ...@@ -85,7 +87,9 @@ export default {
step: 1, step: 1,
resultList: { 'tool': [], 'content': [], 'product': [] }, resultList: { 'tool': [], 'content': [], 'product': [] },
tabIndex: 'content', tabIndex: 'content',
searchValue: '' searchValue: '',
currentVideoUrl:'',
showVideo:false
} }
}, },
mounted() { mounted() {
...@@ -135,7 +139,13 @@ export default { ...@@ -135,7 +139,13 @@ export default {
}); });
}, },
jumpLink(link){ jumpLink(link,videoUrl){
if(videoUrl){
this.currentVideoUrl = videoUrl;
this.showVideo = true;
return;
}
if(!link || link === ''){ if(!link || link === ''){
return; return;
} }
...@@ -144,7 +154,12 @@ export default { ...@@ -144,7 +154,12 @@ export default {
}else{ }else{
jump(link); jump(link);
} }
},
closeVideo(){
this.showVideo = false;
this.currentVideoUrl = '';
} }
} }
} }
</script> </script>
...@@ -162,7 +177,35 @@ export default { ...@@ -162,7 +177,35 @@ export default {
.container { .container {
background-color: @color-gray-light; background-color: @color-gray-light;
min-height: 100vh; min-height: 100vh;
.video-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.close-btn-bottom {
margin: 32rpx auto 0 auto;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 44rpx;
line-height: 64rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.tabbox { .tabbox {
width: 600rpx; width: 600rpx;
margin: 0 auto; margin: 0 auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment