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>
|