uniapp开发微信小程序,需要一个日期筛选弹窗,可能后期会用到记录下来。
<template>
<view>
<view @click="show=true">
<slot></slot>
</view>
<u-popup :show="show" mode="bottom" bgColor="transparent">
<view class="popupwin">
<div class="popTitle">
筛选
</div>
<div class="close" @click="getHide">
<u-icon name="close"></u-icon>
</div>
<div class="popTitle2">
按时间
</div>
<scroll-view class="searchbody" scroll-y>
<div class="list">
<div @click="getactive(index)" :class="{active:active==index}" class="listitem"
v-for="(item,index) in list" :key="index">
<text>{{item.name}}</text>
</div>
</div>
</scroll-view>
<div class="operation">
<div class="reset" @click="reset">重置</div>
<div class="confirm" @click="confirm">确认</div>
</div>
</view>
</u-popup>
</view>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
show: false,
active: 0,
list: [{
name: '1周内',
start: moment().week(moment().week() - 0).startOf('week').format('YYYY-MM-DD'),
end: moment().format("YYYY-MM-DD")
}, {
name: '1月内',
start: new moment().add('month', 0).format('YYYY-MM-') + '01',
end: moment().format("YYYY-MM-DD")
}, {
name: '半年内',
start: moment().subtract('days', 180).format('YYYY-MM-DD'),
end: moment().format("YYYY-MM-DD")
}, {
name: '今年',
start: moment('2021').startOf('year').format('YYYY-MM-DD'),
end: moment().format("YYYY-MM-DD")
}, {
name: '2020年',
start: moment('2020').startOf('year').format('YYYY-MM-DD'),
end: moment('2020').endOf('year').format('YYYY-MM-DD')
}],
}
},
computed: {
name: function() {
var that = this;
return this.list[that.active].name
}
},
props: {
datastr: {
type: String,
default () {
return '';
}
}
},
mounted() {},
methods: {
getHide() {
this.show = false
},
getShow() {
this.show = true
},
reset() {
var that=this;
that.active = 0
that.$emit('getdata', that.list[that.active])
that.getHide()
},
confirm() {
var that=this;
that.$emit('getdata', that.list[that.active])
that.getHide()
},
getactive(index) {
var that = this;
that.active = index
console.log(that.list[that.active])
// that.returnlist()
},
getactiveremove(item) {
var that = this;
that.list.forEach((type) => {
if (item.name == type.name) {
type.active = false
}
});
// that.returnlist()
},
}
}
</script>
<style scoped lang="scss">
.popupwin {
width: 750rpx;
// height: 750rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0px 0px;
opacity: 1;
position: relative;
z-index: 1000;
}
.line {
width: 100rpx;
height: 4rpx;
opacity: 1;
background: #7D7D7D;
margin: 25rpx auto;
}
.list {
width: 694rpx;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
.listitem {
width: 158rpx;
box-sizing: border-box;
height: 72rpx;
background: #FFFFFF;
border-radius: 12rpx;
margin-bottom: 20rpx;
border: 2rpx solid rgba(21, 24, 82, 0.1);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #8384A2;
margin-right: 20rpx;
}
.listitem:nth-child(4n) {
margin-right: 0;
}
.listitem.active {
border: 2rpx solid #4087FF;
text {
color: #4087FF;
}
}
}
.nodata {
font-size: 34rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #7D7D7D;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: 64rpx auto;
}
.searchbody {
height: 550rpx;
}
.close {
position: absolute;
right: 30rpx;
top: 30rpx;
z-index: 10;
}
.popTitle {
height: 100rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 32rpx;
color: #000;
margin-left: 28rpx;
}
.operation {
width: 694rpx;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin: 0 auto;
padding-bottom: 64rpx;
.reset {
width: 333rpx;
height: 88rpx;
background: rgba(#4087FF, 0.1);
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4087FF;
}
.confirm {
width: 333rpx;
height: 88rpx;
background: #4087FF;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
}
}
.popTitle2 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3F4271;
margin-left: 28rpx;
margin-bottom: 20rpx;
}
</style>