154 lines
3.3 KiB
Vue
154 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<VNavigationBar background-color="#fff" title="选择人员" title-color="#333"></VNavigationBar>
|
||
|
|
<view class="body">
|
||
|
|
<div class="searchBox">
|
||
|
|
<div class="inputBox">
|
||
|
|
<input placeholder="请输入人员姓名" type="text">
|
||
|
|
</div>
|
||
|
|
<text>搜索</text>
|
||
|
|
</div>
|
||
|
|
<div class="userList">
|
||
|
|
<u-checkbox-group
|
||
|
|
placement="column"
|
||
|
|
v-model="checked">
|
||
|
|
<view v-for="item in list" :key="item.id" class="userItem">
|
||
|
|
<view class="info">
|
||
|
|
<text class="name">{{item.name}}</text>
|
||
|
|
<text class="trade">{{item.gz}}{{item.checked}}</text>
|
||
|
|
</view>
|
||
|
|
<u-checkbox v-model="item.checked" :name="item.id" iconSize="24" shape="circle" activeColor="#1890ff"></u-checkbox>
|
||
|
|
</view>
|
||
|
|
</u-checkbox-group>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="foot">
|
||
|
|
<view class="submit" @click="submit">确定选择</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||
|
|
import {bus} from "@/utils/eventBus";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
VNavigationBar,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{name: '杨其华', id: 1, gz: '机修'},
|
||
|
|
{name: '钣金', id: 2, gz: '机修'},
|
||
|
|
{name: '周正', id: 3, gz: '喷漆'},
|
||
|
|
],
|
||
|
|
checked: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(data) {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submit() {
|
||
|
|
console.log('this.checked', this.checked)
|
||
|
|
const selected = this.list.filter(f => this.checked.includes(f.id))
|
||
|
|
bus.$emit('choosePeople', selected)
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.container {
|
||
|
|
height: 100%;
|
||
|
|
background-color: #F3F5F7;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.body {
|
||
|
|
flex: 1;
|
||
|
|
height: 0;
|
||
|
|
overflow: auto;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
|
||
|
|
.searchBox {
|
||
|
|
margin: 0 32rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
column-gap: 20rpx;
|
||
|
|
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #0174F6;
|
||
|
|
|
||
|
|
.inputBox {
|
||
|
|
flex: 1;
|
||
|
|
width: 0;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.userList {
|
||
|
|
margin: 20rpx 32rpx 0;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
|
||
|
|
.userItem {
|
||
|
|
padding: 30rpx 0;
|
||
|
|
border-bottom: 1rpx solid #DDDDDD;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
row-gap: 20rpx;
|
||
|
|
.name {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.trade {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.userItem:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.foot {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
.submit {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 510rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
background: #0174F6;
|
||
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|