<template>
|
<view @click.self="close" :class="[filterPopVisible?'popup':'hide_popup']">
|
<view class="popup_item" :class="[filterPopVisible ? 'active_popup' : 'hide_popup']">
|
<view class="content">
|
<view class="order" v-for="(item,index) in list" :key="item.label">
|
<view class="title">
|
<text>{{item.label}}</text>
|
</view>
|
<view class="radio">
|
<u-radio-group shape="circle" v-model="option[item.filId]" placement="column">
|
<u-radio :customStyle="{marginBottom: '16rpx'}" v-for="(cl, clIndex) in item.children"
|
:key="clIndex" :label="cl.name" :name="cl.value" @change="radioChange(cl,item)">
|
</u-radio>
|
</u-radio-group>
|
</view>
|
<view class="line" v-if="list.length-1!=index"></view>
|
</view>
|
<view class="btn">
|
<view class="btn_bas reset" @click="reset"><text class="reset_text">重置</text> </view>
|
<view class="btn_bas confirm" @click="confirm"> <text class="confitm_text">确定</text></view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
filterPopVisible: {
|
type: Boolean,
|
},
|
list: {
|
/*
|
list的格式
|
list:[
|
{label:"标题名字",children:[{name:"单选框名字",value:"单选框值"}],value:"后端需要的字段名字"}
|
]
|
*/
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
query: {
|
videoTypeLabel: "全部",
|
videoType: "1",
|
statusLabel: "全部",
|
status: "1",
|
cameraLabel: "全部",
|
camera: "1"
|
},
|
option: {},
|
orderBy: "",
|
}
|
},
|
methods: {
|
close() {
|
this.$emit('filterPopClose')
|
},
|
radioChange(data, item) {
|
this.option[item.filId] = data.value
|
},
|
reset() {
|
this.option = {}
|
},
|
confirm() {
|
this.$emit("confirm", {
|
data: this.option
|
})
|
this.close()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup {
|
position: fixed;
|
width: 100%;
|
top: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, .3);
|
transition-property: width;
|
// transition-duration: 150ms;
|
transition-timing-function: linear;
|
z-index: 99;
|
}
|
|
|
.popup_item {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
right: 0;
|
background: #fff;
|
|
.content {
|
.order:first-child {
|
padding-top: 54rpx;
|
}
|
|
.order {
|
padding: 0 13PX;
|
|
.title {
|
padding-bottom: 40rpx;
|
font-size: 34rpx;
|
font-weight: 700;
|
}
|
|
.line {
|
margin: 30rpx 0;
|
width: 336rpx;
|
height: 2rpx;
|
background: #F5F5F5;
|
border: 2rpx solid #F5F5F5;
|
}
|
}
|
|
.btn {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 40rpx 20rpx;
|
|
.btn_bas {
|
width: 166rpx;
|
height: 60rpx;
|
border-radius: 6rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
}
|
|
.reset {
|
background: #FE9C48;
|
|
.reset_text {
|
width: 52rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 22rpx;
|
}
|
}
|
|
.confirm {
|
|
background: #4593F2;
|
|
.confitm_text {
|
width: 52rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 22rpx;
|
}
|
}
|
}
|
}
|
}
|
|
.active_popup {
|
width: 50%;
|
transition-property: width;
|
transition-duration: 100ms;
|
transition-timing-function: linear;
|
}
|
|
.hide_popup {
|
width: 0%;
|
// transition-property: width;
|
// transition-duration: 150ms;
|
// transition-timing-function: linear;
|
}
|
</style>
|
