<template>
<div class="record-con">
<div class="title clear">
<i class="iconfont icon-icon_arrow_left" />
<span>个人中心</span>
</div>
<div class="mform">
<h1>人数统计</h1>
<form style="border:1px solid red;">
<div class="team">
<van-field
readonly
clickable
label="城市"
:value="value1"
placeholder="选择城市"
@click="mqinAi1"
/>
<div v-if="myIf1">
<van-popup
v-model="showPicker"
position="bottom"
>
<van-picker
title="请选择城市"
show-toolbar
:columns="columns1"
@cancel="showPicker = false"
@confirm="onConfirm1"
/>
</van-popup>
</div>
</div>
<div class="group-leader flexbox">
<van-field
readonly
clickable
label="组长"
:value="value2"
placeholder="选择组长"
@click="mqinAi2"
/>
<div v-if="myIf2">
<van-popup v-model="showPicker" position="bottom">
<van-picker
title="请选择组长"
show-toolbar
:columns="columns2"
@cancel="showPicker = false"
@confirm="onConfirm2"
/>
</van-popup>
</div>
</div>
<div class="num flexbox">
<van-field
readonly
clickable
label="组总人数:"
:value="value3"
placeholder="选择组长"
@click="mqinAi3"
/>
<div v-if="myIf3">
<van-popup v-model="showPicker" position="bottom">
<van-picker
title="请选择组长"
show-toolbar
:columns="columns3"
@cancel="showPicker = false"
@confirm="onConfirm3"
/>
</van-popup>
</div>
</div>
<div class="num-real flexbox">
<van-field
readonly
clickable
label="实到人数:"
:value="value4"
placeholder="选择组长"
@click="mqinAi4"
/>
<div v-if="myIf4">
<van-popup v-model="showPicker" position="bottom">
<van-picker
title="请选择组长"
show-toolbar
:columns="columns4"
@cancel="showPicker = false"
@confirm="onConfirm4"
/>
</van-popup>
</div>
</div>
<div class="real-name flexbox">
<van-field
readonly
clickable
label="实到人员名单:"
:value="value5"
placeholder="选择组长"
@click="mqinAi5"
/>
<div v-if="myIf5">
<van-popup v-model="showPicker" position="bottom">
<van-picker
title="请选择组长"
show-toolbar
:columns="columns5"
@cancel="showPicker=false"
@confirm="onConfirm5"
/>
</van-popup>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { Picker } from 'vant';
import { Popup } from 'vant';
Vue.use(Popup);
Vue.use(Picker);
export default {
name: '',
components: {},
props: {},
data() {
return {
myIf1: false,
myIf2: false,
myIf3: false,
myIf4: false,
myIf5: false,
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
showPicker: false,
columns1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
columns2: ['组长1', '组长1', '组长1', '组长1', '组长1'],
columns3: ['组长2', '组长2'],
columns4: ['组长3', '组长3'],
columns5: ['组长5', '组长5']
}
},
computed: {},
created() {},
mounted() {},
methods: {
onConfirm1(e) {
this.value1 = e
this.showPicker = false
},
onConfirm2(e) {
this.value2 = e
this.showPicker = false
},
onConfirm3(e) {
this.value3 = e
this.showPicker = false
},
onConfirm4(e) {
this.value4 = e
this.showPicker = false
},
onConfirm5(e) {
this.value5 = e
this.showPicker = false
},
mqinAi1() {
this.myIf1 = true
this.myIf2 = false
this.myIf3 = false
this.myIf4 = false
this.myIf5 = false
this.showPicker = true
},
mqinAi2() {
this.myIf1 = false
this.myIf2 = true
this.myIf3 = false
this.myIf4 = false
this.myIf5 = false
this.showPicker = true
},
mqinAi3() {
this.myIf1 = false
this.myIf2 = false
this.myIf3 = true
this.myIf4 = false
this.myIf5 = false
this.showPicker = true
},
mqinAi4() {
this.myIf1 = false
this.myIf2 = false
this.myIf3 = false
this.myIf4 = true
this.myIf5 = false
this.showPicker = true
},
mqinAi5() {
this.myIf1 = false
this.myIf2 = false
this.myIf3 = false
this.myIf4 = false
this.myIf5 = true
this.showPicker = true
}
}
}
</script>