121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<template>
|
|
<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#fff'}">
|
|
<u-status-bar></u-status-bar>
|
|
<u-navbar title="视频监控" :autoBack="true" :titleStyle="{
|
|
fontSize:'18px'
|
|
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
|
</u-navbar>
|
|
<!-- 搜索区域 -->
|
|
<view class="search">
|
|
<view class="search_sear">
|
|
<input
|
|
class="searchInput"
|
|
confirm-type="search"
|
|
placeholder-style="color:#bbb"
|
|
v-model="saerchValue"
|
|
@input="search"
|
|
placeholder="搜索视频名称"
|
|
border="surround"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 列表区域 -->
|
|
<view class="contentItem">
|
|
<view class="itemC" v-for="item in videoList" :key="item.indexCode" @click="jumpVideo(item)">
|
|
<view class="name">
|
|
<image
|
|
style="width: 15px; height: 10px;"
|
|
src="../../static/images/video.svg"
|
|
></image>
|
|
<text style="margin-left:10px">{{item.name}}</text>
|
|
</view>
|
|
<image
|
|
style="width: 15px; height: 15px;"
|
|
src="../../static/images/play.svg"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
saerchValue: '',
|
|
videoList:[]
|
|
}
|
|
},
|
|
methods: {
|
|
search(e){
|
|
const value = e.detail.value;
|
|
if(value){
|
|
const filterData = this.videoList.filter(item => item.name.includes(value));
|
|
this.videoList = filterData;
|
|
}else{
|
|
this.getVideoList()
|
|
}
|
|
},
|
|
async getVideoList(){
|
|
try {
|
|
const {data} = await uni.$http.post("/gunshiApp/tsg/attCctvBase/list")
|
|
if(data.code == 200){
|
|
this.videoList = data.data
|
|
}
|
|
} catch (error) {
|
|
uni.$showMsg();
|
|
}
|
|
},
|
|
jumpVideo(r){
|
|
uni.navigateTo({
|
|
url: `/pages/spjk/spbf/index?info=${encodeURIComponent(JSON.stringify(r))}`
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getVideoList()
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
background-color: #fff;
|
|
margin-top:50px;
|
|
padding:0 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 50px;
|
|
background-color: #eee;
|
|
// padding-right: 20px;
|
|
}
|
|
.searchInput {
|
|
width:100%;
|
|
background-color: #fff;
|
|
height: 60rpx;
|
|
border-radius: 26rpx;
|
|
color: #bbb;
|
|
padding-left: 60rpx;
|
|
}
|
|
.search_sear{
|
|
width:76%;
|
|
}
|
|
.contentItem{
|
|
.itemC{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
color: #666666;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.name{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.itemNo{
|
|
color: #666666;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
</style> |