liuyongli
3 years ago
parent
84fbed8197
commit
e3062c1c36
@ -0,0 +1,74 @@
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
roomType:{
|
||||
type: String,
|
||||
value:"会议室类型"
|
||||
},
|
||||
selectBox:{
|
||||
type: Array,
|
||||
value:[]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
levelInd:0,
|
||||
showItems:false,
|
||||
array:[],
|
||||
roomType:'',
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
bindLevelChange(e){
|
||||
let index = e.currentTarget.dataset.ind
|
||||
let showItems = true
|
||||
let array = this.data.selectBox[index].array
|
||||
this.setData({
|
||||
showItems: showItems,
|
||||
array,
|
||||
levelInd:index,
|
||||
roomType:''
|
||||
})
|
||||
},
|
||||
selectItem(e){
|
||||
// console.log(e.currentTarget.dataset.type)
|
||||
let val = e.currentTarget.dataset.type
|
||||
this.data.selectBox[this.data.levelInd].roomType = val
|
||||
let selectBox = this.data.selectBox
|
||||
let data = {
|
||||
type: this.data.levelInd,
|
||||
val: val
|
||||
}
|
||||
this.triggerEvent("bindValue",data)
|
||||
|
||||
|
||||
this.setData({
|
||||
roomType: val,
|
||||
showItems: false,
|
||||
selectBox
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
tapPages(){
|
||||
this.setData({
|
||||
showItems: false,
|
||||
})
|
||||
},
|
||||
showPicker(){
|
||||
this.setData({
|
||||
showItems: true,
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<view class="page">
|
||||
<view class="allPage" bindtap="tapPages">
|
||||
<view class="selectBox" catchtap='showPicker'>
|
||||
<view class="selectTypeHead" style="justify-content:{{selectBox.length%2==0 ? 'space-around':'space-between' }}">
|
||||
<view class="roomType " wx:for="{{selectBox}}" wx:key="index" data-ind="{{index}}" catchtap="bindLevelChange">
|
||||
<text>{{item.roomType}}</text>
|
||||
<i class="down-arrow"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="selectItems" wx:if="{{showItems}}">
|
||||
<view class="items" wx:for='{{array}}' data-type="{{item}}" catchtap="selectItem">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -0,0 +1,58 @@
|
||||
.down-arrow{
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-right: 2rpx solid #999;
|
||||
border-bottom: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.roomType{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
|
||||
}
|
||||
.selectBox{
|
||||
display: flex;
|
||||
}
|
||||
.selectTypeHead{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
}
|
||||
.selectItems{
|
||||
background-color: #fff;
|
||||
animation:transp 0.5s ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100vw;
|
||||
height: 80rpx;
|
||||
}
|
||||
.items{
|
||||
height: 100rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #D9D9D9;
|
||||
}
|
||||
@keyframes transp {
|
||||
from{opacity: 0;}
|
||||
to{opacity: 1;}
|
||||
}
|
||||
.allPage{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
z-index: 100;
|
||||
}
|
||||
.page{
|
||||
height: 88rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"c-echars": "/components/c-echars/index"
|
||||
"c-echars": "/components/c-echars/index",
|
||||
"select":"/components/select/index"
|
||||
},
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
// pages/index/home/home.js
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
selectBox:[
|
||||
{
|
||||
roomType:"会议室类型",
|
||||
array:['小型会议室', '中型会议室', '大型会议室']
|
||||
},
|
||||
{
|
||||
roomType:"楼栋选择",
|
||||
array:['一号楼','二号楼','三号楼'],
|
||||
}
|
||||
],
|
||||
roomLevel:"", //当前选择的类型
|
||||
builds:"", //当前选择的楼栋
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
bindValue(e){
|
||||
let type = e.detail.type
|
||||
if(type == 0){
|
||||
this.data.roomLevel = e.detail.val
|
||||
}else{
|
||||
this.data.builds = e.detail.val
|
||||
}
|
||||
console.log(this.data.roomLevel)
|
||||
console.log(this.data.builds)
|
||||
},
|
||||
})
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"select":"/components/select/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<!--pages/index/home/home.wxml-->
|
||||
<view class="page">
|
||||
<view class="selectBox">
|
||||
<view class="selectTypeHead">
|
||||
<select selectBox="{{selectBox}}" bind:bindValue="bindValue"></select>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/* pages/index/home/home.wxss */
|
||||
/* .allPage{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
.page{
|
||||
height: 88rpx;
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
.selectTypeHead{
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
}
|
||||
Loading…
Reference in new issue