157 lines
3.1 KiB
Vue
157 lines
3.1 KiB
Vue
<template>
|
||
<view>
|
||
<button @click="open">打开弹窗</button>
|
||
<uni-popup ref="popup" type="bottom">
|
||
<view class="uni-list">
|
||
<scroll-view scroll-y="true">
|
||
<checkbox-group @change="checkboxChange" class="checkbox-group">
|
||
<label class="uni-list-cell" v-for="item in items" :key="item.value">
|
||
<view class="item">
|
||
<checkbox :value="item.value" :checked="item.checked" />
|
||
</view>
|
||
<view>{{item.name}}</view>
|
||
</label>
|
||
</checkbox-group>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
items: [{
|
||
value: 'USA',
|
||
name: '美国'
|
||
},
|
||
{
|
||
value: 'CHN',
|
||
name: '中国',
|
||
checked: 'true'
|
||
},
|
||
{
|
||
value: 'BRA',
|
||
name: '巴西'
|
||
},
|
||
{
|
||
value: 'JPN',
|
||
name: '日本'
|
||
},
|
||
{
|
||
value: 'ENG',
|
||
name: '英国'
|
||
},
|
||
{
|
||
value: 'FRA',
|
||
name: '法国'
|
||
},
|
||
{
|
||
value: 'JPN',
|
||
name: '日本'
|
||
},
|
||
{
|
||
value: 'ENG',
|
||
name: '英国'
|
||
},
|
||
{
|
||
value: 'FRA',
|
||
name: '法国'
|
||
},
|
||
{
|
||
value: 'JPN',
|
||
name: '日本'
|
||
},
|
||
{
|
||
value: 'ENG',
|
||
name: '英国'
|
||
},
|
||
{
|
||
value: 'FRA',
|
||
name: '法国'
|
||
},
|
||
{
|
||
value: 'JPN',
|
||
name: '日本'
|
||
},
|
||
{
|
||
value: 'ENG',
|
||
name: '英国'
|
||
},
|
||
{
|
||
value: 'FRA',
|
||
name: '法国'
|
||
}
|
||
],
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
checkboxChange(e){
|
||
console.log(e);
|
||
var items = this.items,
|
||
values = e.detail.value;
|
||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||
const item = items[i]
|
||
if(values.includes(item.value)){
|
||
this.$set(item,'checked',true)
|
||
}else{
|
||
this.$set(item,'checked',false)
|
||
}
|
||
}
|
||
},
|
||
open(){
|
||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||
this.$refs.popup.open('top')
|
||
|
||
this.sendRequest({
|
||
url: 'xmgl/systemUser/getProjectChilderSystemUserList',
|
||
method: "post",
|
||
data: { },
|
||
success: res => {
|
||
console.log(res, '操');
|
||
if (res.code == 200) {
|
||
console.log('res', res)
|
||
|
||
if (this.pageNo == 1) {
|
||
this.listData = []
|
||
}
|
||
// console.log('--------')
|
||
// this.listData = res.result.records
|
||
this.listData = [...this.listData, ...res.result.records]
|
||
uni.hideLoading() //关闭加载中
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-popup{
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 667px;
|
||
}
|
||
.uni-list{
|
||
position: absolute;
|
||
bottom: -667px;
|
||
padding-top: 20px;
|
||
width: 100%;
|
||
height: 300px;
|
||
background-color: #fff;
|
||
.checkbox-group{
|
||
height: 300px;
|
||
// overflow: auto;
|
||
}
|
||
}
|
||
.uni-list-cell {
|
||
margin-bottom: 10px;
|
||
padding-left: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |