uniapp 微信小程序开发需要一个可以多选的弹窗，记录一下实现的效果，作为模板，以便于后期可能的复用。
组件使用
<materialPropertieswl :materialId='data.Id' @getdata="getType"></materialPropertieswl>
// 获取类型
getType(e) {
console.log(e)
this.data.Attributes = []
if (e) {
e.forEach((type) => {
var data = {
Id: '',
KeyCode: type.KeyCode,
KeyName: type.KeyName,
}
this.data.Attributes.push(data)
});
}
},
组件代码
<template>
<view>
<div @click="getshow">
<div class="userInfo1">
<div class="userInfoName">
<text>物料属性</text><text class="red">*</text>
</div>
<div class="bodys">
<input :value="name" disabled="" type="text" placeholder="请选择"
placeholder-style="font-size:32rpx;color: #D5D5E0;" />
<image src="http://39.99.155.125:8082/buildingMaterialsCloud/static/icon_right.png" mode="widthFix">
</image>
</div>
</div>
</div>
<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="list">
<div @click="getselected" :class="{active:selectedAll}" class="listitem">
<text>全部</text>
<div v-if="selectedAll" class="icon">
<image
src="http://39.99.155.125:8082/buildingMaterialsCloud/home/icon_selectedcheck.png"
mode="widthFix">
</image>
</div>
</div>
<div @click="selected(index)" :class="{active:item.selected}" class="listitem"
v-for="(item,index) in list" :key="index">
<text>{{item.KeyName}}</text>
<div v-if="item.selected" class="icon">
<image
src="http://39.99.155.125:8082/buildingMaterialsCloud/home/icon_selectedcheck.png"
mode="widthFix">
</image>
</div>
</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 {
GetDicListByType,
GetMaterialAttributes
} from '@/config/api.js'
export default {
data() {
return {
show: false,
active: 0,
list: [],
selectedAll: true,
BelongId: '',
AttributesList: []
}
},
props: {
materialId: {
type: String,
default () {
return ''
}
}
},
watch: {
materialId() {
this.GetMaterialAttributes()
// this.list = this.list2
},
},
computed: {
name: function() {
var name = []
this.list.forEach((type) => {
if (type.selected) {
name.push(type.KeyName)
}
});
return name.join(",")
}
},
mounted() {
var that = this;
that.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
this.getdata()
},
methods: {
GetMaterialAttributes() {
var that = this;
if (!that.materialId) {
return
}
console.log(that.materialId)
GetMaterialAttributes({
params: {
MaterialId: that.materialId
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
that.AttributesList = res.Data
that.list.forEach((type, index) => {
that.AttributesList.forEach((type2) => {
console.log(type2)
console.log(type)
console.log(index)
if (type.KeyCode == type2.KeyCode) {
that.list[index].selected = true
}
});
});
that.getUpdate()
}
}).catch(err => {
})
},
getUpdate() {
var data = []
console.log(this.list)
this.list.forEach((type) => {
console.log(type)
if (type.selected) {
data.push(type)
}
});
this.$emit('getdata', data)
},
getdata() {
var that = this;
that.list[0] = [];
that.datalist = []
GetDicListByType({
params: {
BelongId: that.BelongId,
DType: 'CommodityType',
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
res.Data.forEach((type) => {
type.selected = false
});
that.list = res.Data
if (that.materialId) {
that.GetMaterialAttributes()
}
that.getIsSeletedAll()
}
}).catch(err => {
})
},
getshow() {
this.show = true
},
// 全选
getselected() {
this.selectedAll = !this.selectedAll
this.getselectedCheck()
},
getselectedCheck() {
var that = this
var data = that.list
for (var i = 0; i < data.length; i++) {
data[i].selected = this.selectedAll
}
that.list = data
},
reset() {
var that = this;
that.getselected()
that.getHide()
},
confirm() {
var that = this;
that.getUpdate()
that.getHide()
},
getHide() {
this.show = false
},
getIsSeletedAll() {
var data = this.list
this.selectedAll = false
var num = 0
for (var i = 0; i < data.length; i++) {
if (data[i].selected) {
num = num + 1
}
}
if (num === this.list.length && this.list.length > 0) {
this.selectedAll = true
}
},
// 选择
selected(e) {
this.list[e].selected = !this.list[e].selected
// 更新列表
this.$forceUpdate()
this.getIsSeletedAll()
},
}
}
</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;
}
.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 {
height: 72rpx;
padding: 0 45rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
background: #FFFFFF;
border-radius: 12rpx;
border: 2rpx solid rgba(21, 24, 82, 0.1);
margin-right: 20rpx;
margin-bottom: 20rpx;
position: relative;
text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #737497;
}
}
.listitem.active {
border: 2rpx solid #3F87FF;
text {
color: #4087FF;
}
}
}
.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;
}
.typedown {
width: 171rpx;
height: 60rpx;
background: #F5F6FC;
border-radius: 8rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.kuai {
width: 24rpx;
height: 23rpx;
}
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
margin-left: 9rpx;
margin-right: 23rpx;
}
.down {
width: 21rpx;
height: 13rpx;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
width: 36rpx;
position: absolute;
right: 0;
bottom: 0;
image {
width: 36rpx;
}
}
.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;
}
}
.userInfo1 {
width: 630rpx;
min-height: 157rpx;
background: rgba(216, 216, 216, 0);
box-shadow: 0px 1rpx 0px 0px #F2F2F2;
margin: 0 auto;
.bodys {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
image {
width: 32rpx;
}
}
.userInfoName {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-top: 32rpx;
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
}
.red {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF5252;
margin-top: -15rpx;
}
}
.userInfoName2 {
text {
color: #BABBCB;
}
.red {
color: #FFD0CF;
}
}
input {
margin-top: 8rpx;
color: #474A77;
font-size: 32rpx;
z-index: 1;
position: relative;
}
.disabled {
color: #C8C8D6;
}
}
</style>
