使用
<div class="searchscreening">
<div class="search">
<image
src="http://39.99.155.125:8082/buildingMaterialsCloud/home/addressBook/icon_search.png"
mode=""></image>
<input confirm-type="search" @confirm="getdata" type="text" v-model="data.KeyWord"
placeholder="请输入货物名称.." placeholder-style="color:#B8BACB" />
</div>
<div @click="getshow" class="screening">
<image src="http://39.99.155.125:8082/buildingMaterialsCloud/my/icon_shaixuan.png">
</image>
<text>筛选</text>
</div>
</div>
<getPopTypeByDateAndMaterial @getdata="getDates" ref="getPopTypeByDateAndMaterial">
</getPopTypeByDateAndMaterial>
getDates(e) {
console.log(e)
this.data.Btime = e.start
this.data.Etime = e.end
this.data.MaterialCode = e.MaterialCode
this.getdata()
},
getshow() {
this.$refs.getPopTypeByDateAndMaterial.getShow()
},
.searchscreening {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-left: 28rpx;
margin-right: 28rpx;
padding-top: 28rpx;
.search {
width: 524rpx;
height: 80rpx;
background: #F5F6FA;
border-radius: 20rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: 0 auto;
align-content: flex-start;
image {
width: 30rpx;
height: 30rpx;
margin-right: 8rpx;
margin-left: 28rpx;
margin-right: 16rpx;
}
text {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9D9EB7;
}
input {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4C4F7B;
width: 500rpx;
}
}
.screening {
margin-left: 24rpx;
width: 146rpx;
height: 80rpx;
background: #F5F6FA;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
flex-shrink: 1;
align-content: flex-start;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
image {
width: 32rpx;
height: 32rpx;
}
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
margin-left: 10rpx;
}
}
}
模板代码
<template>
<view>
<view @click="show=true">
<slot></slot>
</view>
<u-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
<view class="popupwin">
<div class="popTitle">
筛选
</div>
<div class="close" @click="getHide">
<u-icon name="close"></u-icon>
</div>
<scroll-view class="searchbody" scroll-y>
<div class="popTitle2">
按时间
</div>
<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>
<div class="popTitle2">
按物料
</div>
<div class="list">
<div @click="getactiveMulti(index)" :class="{active:item.selected}" class="listitemMulti"
v-for="(item,index) in MaterialsList" :key="index">
<text>{{item.MaterialName}}</text>
<image v-if="item.selected"
src="http://39.99.155.125:8082/buildingMaterialsCloud/reg/icon_xuanze.png"
mode=""></image>
</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 {
GetMaterialsList
} from '@/config/api.js'
import dayjs from 'dayjs'
export default {
data() {
return {
show: false,
active: 3,
arrstr: '',
active2: 0,
BelongId: '',
MaterialsList: [],
list: [{
name: '1周内',
start: dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'),
end: dayjs().add(1, 'days').format("YYYY-MM-DD")
}, {
name: '1月内',
start: dayjs().startOf('month').format('YYYY-MM-DD'),
end: dayjs().add(1, 'days').format("YYYY-MM-DD")
}, {
name: '半年内',
start: dayjs().subtract(180, 'days').format('YYYY-MM-DD'),
end: dayjs().add(1, 'days').format("YYYY-MM-DD")
}, {
name: '今年',
start: dayjs().startOf('year').format('YYYY-MM-DD'),
end: dayjs().add(1, 'days').format("YYYY-MM-DD")
}, {
name: dayjs().subtract(1, 'year').format('YYYY') + '年',
start: dayjs(dayjs().subtract(1, 'year')).startOf('year').format('YYYY-MM-DD'),
end: dayjs(dayjs().subtract(1, 'year')).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() {
this.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
this.reset()
this.GetMaterialsList()
},
methods: {
getHide() {
this.show = false
},
getShow() {
this.show = true
},
GetMaterialsList() {
var that = this;
that.pageIndex = 1
that.status = 'loading'
GetMaterialsList({
params: {
CompanyId: that.BelongId,
pageIndex: 1,
pageSize: 100,
},
custom: {
auth: true
}
}).then(res => {
that.loading = false
this.status = 'loadmore'
if (res.Code == 200) {
that.MaterialsList = res.Data
that.MaterialsList.forEach((type) => {
type.selected = false
});
that.$forceUpdate()
}
}).catch(err => {
})
},
reset() {
var that = this;
that.active = 3
that.MaterialsList.forEach((type) => {
type.selected = false
});
this.getMaterialCode()
var data = this.list[this.active]
this.$emit('getdata', {
...data,
MaterialCode: that.arrstr
})
that.$emit('getdata', that.list[that.active])
that.getHide()
},
confirm() {
var that = this;
var data = this.list[this.active]
this.getMaterialCode()
this.$emit('getdata', {
...data,
MaterialCode: that.arrstr
})
this.getHide()
},
getactive(index) {
var that = this;
that.active = index
},
getactiveMulti(index) {
var that = this;
that.MaterialsList[index].selected = !that.MaterialsList[index].selected
that.$forceUpdate()
},
getMaterialCode() {
var that = this;
var arr = []
if (that.MaterialsList) {
that.MaterialsList.forEach((type) => {
if (type.selected) {
arr.push(type.MaterialCode)
}
});
}
this.arrstr = arr.join(",");
},
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;
}
}
.listitemMulti {
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;
position: relative;
image {
width: 36rpx;
height: 36rpx;
position: absolute;
right: 0;
bottom: 0;
}
}
.listitemMulti:nth-child(4n) {
margin-right: 0;
}
.listitemMulti.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>
