初步完成视频社区

api/video.js

@@ -0,0 +1,15 @@
+// 视频模块
+
+import { httpGet, httpPost } from "@/utils/request.js";
+
+/**
+ * 视频列表
+ * @param page_index
+ * @param page_size
+ * @param keywords
+ * @param video_id
+ * @param chart_permission_id
+ */
+export const apiVideoList=params=>{
+    return httpGet('/community/video/list',params)
+}

pages/video/videoList.vue

@@ -15,21 +15,32 @@
                 </view>
             </view>
         </van-sticky>
+        <view class="empty-box" v-if="list.length==0&&finished">
+            <image
+                :src="globalImgUrls.activityNoAuth"
+                mode="widthFix"
+            />
+            <view>暂无数据</view>
+        </view>
         <view class="list-wrap">
-            <view class="item" v-for="item in 4" :key="item">
+            <view class="item" v-for="item in list" :key="item.community_video_id">
                 <view class="title-box">
-                    <text class="tag">宏观</text>
-                    <text class="title">标题</text>
+                    <text class="tag">{{item.chart_permission_name}}</text>
+                    <text class="title">{{item.title}}</text>
                 </view>
-                <button class="share-btn" open-type="share" :data-vid="item">
+                <button 
+                    class="share-btn" 
+                    open-type="share" 
+                    :data-item="item">
                     <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
                 </button>
                 <video
                     object-fit="cover"
                     show-mute-btn
-                    src="https://hzstatic.hzinsights.com/static/yb/video/3a593d4aa674e7caa9a830803a527722.mp4"
+                    :poster="item.cover_img_url"
+                    :src="item.video_url"
                 ></video>
-                <view class="time">发布时间：2022-06-30 15:52:28</view>
+                <view class="time">发布时间：{{item.publish_time}}</view>
             </view>
         </view>
 
@@ -42,14 +53,25 @@
                 </view>
                 <view class="list-box">
                     <van-collapse accordion @change="change" :value="active" :border="false">
-                        <van-collapse-item title="标题1" name='1' :border="false">
-                            代码是写出来给人看的，附带能在机器上运行
-                        </van-collapse-item>
-                        <van-collapse-item title="标题2" name='2' :border="false">
-                            代码是写出来给人看的，附带能在机器上运行
-                        </van-collapse-item>
-                        <van-collapse-item title="标题3" name='3' :border="false">
-                            代码是写出来给人看的，附带能在机器上运行
+                        <van-collapse-item 
+                            :title="item.ClassifyName" 
+                            :name='item.ClassifyName' 
+                            :border="false"
+                            v-for="item in options"
+                            :key="item.ClassifyName"
+                        >
+                            <van-row gutter="5">
+                                <van-col 
+                                    :span="_item.PermissionName.length>7?16:8" 
+                                    v-for="_item in item.Items" 
+                                    :key="_item.PermissionId"
+                                >
+                                    <text 
+                                        :class="['list-item',_item.PermissionId==selectPerId&&'list-item-active']" 
+                                        @click="handleSelectPerItem(_item)"
+                                    >{{_item.PermissionName}}</text>
+                                </van-col>
+                            </van-row>
                         </van-collapse-item>
                     </van-collapse>
                 </view>
@@ -59,22 +81,53 @@
     
 </template>
 <script>
+import {apiVideoList} from '@/api/video'
+import {apiOptionList} from '@/api/question'
 export default {
     data() {
         return {
             showFilter:false,
-            active:'1'
+            active:'',
+            options:[],
+            selectPerId:0,
+
+            videoId:0,
+            page:1,
+            pageSize:10,
+            finished:false,
+            list:[]
         }
     },
     onLoad(options){
-
+        this.videoId=options.videoId||0
+        this.getList()
+        this.getPermissionList()
     },
     onShareAppMessage({from,target}) {
         console.log(from,target);
+        let path='/pages/video/videoList?videoId=0'
+        let title='FICC视频社区'
+        let imageUrl=''
+        if(from=='button'){
+            title=target.dataset.item.title
+            path=`/pages/video/videoList?videoId=${target.dataset.item.community_video_id}`
+            imageUrl=target.dataset.item.cover_img_url
+        }
         return {
-            title:`FICC【】`
+            title:title,
+            path:path,
+            imageUrl:imageUrl
         }
     },
+    onPullDownRefresh(){
+        this.page=1
+        this.list=[]
+        this.finished=false
+        this.getList()
+        setTimeout(() => {
+            uni.stopPullDownRefresh()
+        }, 1500)
+    },
     methods: {
         goSearchPage(){
             uni.navigateTo({
@@ -83,6 +136,41 @@ export default {
         },
         change(e){
             this.active=e.detail
+        },
+
+        //点击分类某项
+        handleSelectPerItem(item){
+            this.selectPerId=item.PermissionId
+            this.videoId=0
+            this.page=1
+            this.list=[]
+            this.finished=false
+            this.getList()
+            this.showFilter=false
+        },
+
+        async getList(){
+            const res=await apiVideoList({
+                page_index:Number(this.page),
+                page_size:Number(this.pageSize),
+                video_id:Number(this.videoId),
+                chart_permission_id:Number(this.selectPerId)
+            })
+            if(res.code===200){
+                let arr=res.data||[]
+                this.list=[...this.list,...arr]
+                if(arr.length===0){
+                    this.finished=true
+                }
+            }
+        },
+
+        //获取筛选项
+        async getPermissionList(){
+            const res=await apiOptionList()
+            if(res.code===200){
+                this.options=res.data
+            }
         }
     },
 }
@@ -174,6 +262,17 @@ export default {
             }
         }
     }
+
+    .empty-box{
+        text-align: center;
+        font-size: 32rpx;
+        color: #999;
+        padding-top: 150rpx;
+        image{
+            width: 80vw;
+            margin-bottom: 57rpx;
+        }
+    }
 }
 
 .filter-wrap{
@@ -188,6 +287,19 @@ export default {
     .list-box{
         min-height: 30vh;
         max-height: 60vh;
+        .list-item{
+            display: block;
+            margin: 10rpx;
+            height: 76rpx;
+            line-height: 76rpx;
+            color: #000;
+            background: #F6F6F6;
+            border-radius: 4px 4px 4px 4px;
+            text-align: center;
+        }
+        .list-item-active{
+            background-color: #FAEEDE;
+        }
     }
 }
 </style>

pages/video/videoSearch.vue

@@ -10,11 +10,40 @@
             ></searchBox>
             </view>
         </van-sticky>
+        <view class="empty-box" v-if="list.length==0&&finished">
+            <image
+                :src="globalImgUrls.activityNoAuth"
+                mode="widthFix"
+            />
+            <view>暂无数据，试试别的搜索词吧~</view>
+        </view>
+        <view class="list-wrap">
+            <view class="item" v-for="item in list" :key="item.community_video_id">
+                <view class="title-box">
+                    <text class="tag">{{item.chart_permission_name}}</text>
+                    <text class="title">{{item.title}}</text>
+                </view>
+                <button 
+                    class="share-btn" 
+                    open-type="share" 
+                    :data-item="item">
+                    <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
+                </button>
+                <video
+                    object-fit="cover"
+                    show-mute-btn
+                    :poster="item.cover_img_url"
+                    :src="item.video_url"
+                ></video>
+                <view class="time">发布时间：{{item.publish_time}}</view>
+            </view>
+        </view>
     </view>
 </template>
 
 <script>
 import searchBox from '@/components/searchBox/searchBox.vue'
+import {apiVideoList} from '@/api/video'
 export default {
     components: {
         searchBox
@@ -26,8 +55,61 @@ export default {
             list:[],
             finished:false,
             page:1,
+            pageSize:10,
+        }
+    },
+    onReachBottom() {
+        if(this.finished) return
+        this.page++
+        this.getList()
+    },
+    onShareAppMessage({from,target}) {
+        console.log(from,target);
+        let path='/pages/video/videoList?videoId=0'
+        let title='FICC视频社区'
+        let imageUrl=''
+        if(from=='button'){
+            title=target.dataset.item.title
+            path=`/pages/video/videoList?videoId=${target.dataset.item.community_video_id}`
+            imageUrl=target.dataset.item.cover_img_url
+        }
+        return {
+            title:title,
+            path:path,
+            imageUrl:imageUrl
         }
     },
+    methods: {
+        onChange(e){
+            this.searchVal=e
+        },
+
+        async onSearch(){
+            this.finished=false
+            this.page=1
+            this.list=[]
+            if(!this.searchVal){
+                this.finished=true
+                return
+            }
+            this.getList()
+        },
+
+        async getList(){
+            const res=await apiVideoList({
+                page_index:Number(this.page),
+                page_size:Number(this.pageSize),
+                keywords:this.searchVal
+            })
+            if(res.code===200){
+                let arr=res.data||[]
+                this.list=[...this.list,...arr]
+                if(arr.length===0){
+                    this.finished=true
+                }
+            }
+        },
+    },
 }
 </script>
 
@@ -42,6 +124,78 @@ page{
 
 <style lang="scss" scoped>
 .video-search-page{
+    .search-wrap {
+        background-color: #fff;
+        padding: 30rpx 34rpx;
+        align-items: center;
+        .menu-icon{
+            width: 52rpx;
+            height: 40rpx;
+            display: block;
+            flex-shrink: 0;
+            margin-left: 30rpx;
+        }
+    } 
+    
+    .list-wrap{
+        .item{
+            border-top: 10rpx solid #f9f9f9;
+            padding: 30rpx 34rpx;
+            position: relative;
+            .title-box{
+                padding-right: 40rpx;
+            }
+            .share-btn{
+                position: absolute;
+                top: 34rpx;
+                right: 34rpx;
+                background-color: transparent;
+                width: 32rpx;
+                height: 32rpx;
+                line-height: 1;
+                padding: 0;
+                &::after{
+                    border: none;
+                }
+            }
+            .share-img{
+                width: 32rpx;
+                height: 32rpx;
+            }
+            .tag{
+                color: #E4B478;
+                background-color: #333;
+                padding: 5rpx 20rpx;
+                border-radius: 20rpx;
+                font-size: 24rpx;
+                margin-right: 26rpx;
+            }
+            .title{
+                font-size: 32rpx;
+                color: #000;
+            }
+            video{
+                width: 100%;
+                height: 400rpx;
+                margin: 30rpx 0 20rpx 0;
+                border-radius: 20rpx;
+            }
+            .time{
+                font-size: 28rpx;
+                color: #999;
+            }
+        }
+    }
 
+    .empty-box{
+        text-align: center;
+        font-size: 32rpx;
+        color: #999;
+        padding-top: 150rpx;
+        image{
+            width: 80vw;
+            margin-bottom: 57rpx;
+        }
+    }
 }
 </style>