cbsl-app/pages/videoPage/index.vue

<template>
    <view class="page">
        <view class="container">
            <u-status-bar ></u-status-bar>
            <view class="nav-bar">
                <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
                <view style="font-size:18px">视频监控</view>
                <view style="margin-right:10px;margin-top: 5px;">
                    <image @click="popupOpen = true" src="../../static/images/filter.png" style="width: 20px; height: 20px"></image>
                    <image src="../../static/images/star.svg" style="width: 19px; height: 19px;position: absolute;right: 37px;top: 11px;"></image>
                </view>
            </view>
            <view class="search-box">
                <view class="search-item">
                    <view style="display:flex; justify-content: space-between; width: 18%;">
                        <view @click="handleClick" class="search-item-text">{{ getSkTypeName }}</view>
                        <u-icon name="arrow-down-fill" color="#000" size="16" v-show="switchIcon"></u-icon>
                        <u-icon name="arrow-up-fill" color="#000" size="16" v-show="!switchIcon"></u-icon>
                    </view>
                    <view class="rain-input" style="width: 82%;">
                        <u-input
                            placeholder="请输入站点"
                            prefixIcon="search"
                            prefixIconStyle="font-size: 22px;color: #909399"
                            @change="changeForm"
                            :value="searchVal"
                        ></u-input>
                    </view>
                </view>
            </view>
            <div class="scrollBox">
                <div 
                    class="itemBox"
                    v-for="(item, index) in skData" 
                    :key="index"
                >
                    <itemBox :data="item"/>
                </div>
            </div>
        </view>
        <ToolBar :popupOpen="popupOpen" @form-submit="handleFormSubmit"/>
        <u-picker
            :show="show" 
            ref="uPicker" 
            :columns="columns" 
            keyName="label"
            @confirm="confirm" 
            @cancel="cancel"
        >
        </u-picker>
    </view>
</template>

<script>
import moment from "moment";
import ToolBar from "../toolBar"
import itemBox from "./itemBox.vue"
const skTypeOptions = [
    { label:'全部',value:0 },
    { label:'大(1)型',value:1 },
    { label:'大(2)型',value:2 },
    { label:'中型',value:3 },
    { label:'小(1)型',value:4 },
    { label:'小(2)型',value:5 },
]
const skTypeObj = {
    0:'全部',
    1:'大(1)型',
    2:'大(2)型',
    3:'中型',
    4:'小(1)型',
    5:'小(2)型',
}

export default {
    components: {
        ToolBar,
        itemBox
    },
    data() {
        return {
            skData:[],
            popupOpen:false, //抽屉打开
            show: false,
            switchIcon:true,
            skType:0,//水库类型
            searchVal:'',//搜索文字
            columns:[
                skTypeOptions
            ],
        };
    },
    computed: {
        getSkTypeName() {
            return skTypeObj[this.skType]
        },
    },
    methods: {
        async getSkData(){
            // const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
            this.skData = [
                {name:'AA水库',danger:true, isStar:false,videoList:[{name:'摄像头1'},{name:'摄像头2'}]},
                {name:'AB水库',danger:true, isStar:true,videoList:[{name:'摄像头1'},{name:'摄像头2'},{name:'摄像头3'},{name:'摄像头4'},{name:'摄像头7'},]},
                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
                {name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
            ];

            console.log("--1-", this.userList);
        },
        backTo(){
             uni.navigateBack({delta:1})
        },
        handleClick(e){
            //  if(this.selecetItem1.basName && this.selecetItem1.basName != "全部"){
            //    e.stopPropagation();
            //    return
            //  }
             this.show = true;
             this.switchIcon = !this.switchIcon
        },
        changeForm(e){
            this.searchVal = e
        },
        confirm(e) {
            console.log('confirm', e)
            this.show = false
            this.switchIcon=true;
            this.skType = e.value[0].value
        },
        cancel(e) {
            this.show = false
        },
        handleFormSubmit(data) {
            console.log('接收到子组件的 formData：', data);
            this.popupOpen = false;
        }
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
        this.getSkData()
    },
};
</script>

<style lang="scss" scoped>
.page{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #dfdfdf;
}
.search-box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70px;
    .search-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        padding: 5px;
        height: 30px;
        background-color: #ececec;
        border-radius: 5px;

        .search-item-text{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }
        .rain-input{
            .u-border{
                border-color: #ececec !important;
            }
        }
    }
}
.scrollBox{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    background: #eee;
    padding: 5px;

    .itemBox{
        background: #ffffff;
        border-radius: 3px;
        margin-bottom: 5px;
    }
}
</style>