18 changed files with 333 additions and 215 deletions
Unified View
Diff Options
-
4api/user.js
-
58components/checker/index.js
-
7components/checker/index.json
-
22components/checker/index.wxml
-
12components/checker/index.wxs
-
1components/checker/index.wxss
-
21components/checker/shared.js
-
11components/checker/toolbar.wxml
-
15components/picker/index.js
-
41components/picker/index.wxml
-
27components/picker/toolbar.wxml
-
23components/radio/index.wxml
-
105pages/home/employee-info/index.js
-
5pages/home/employee-info/index.json
-
42pages/home/employee-info/index.wxml
-
151pages/home/employee/index.js
-
1pages/home/employee/index.json
-
2pages/home/employee/index.wxml
@ -0,0 +1,58 @@ |
|||||
|
import { VantComponent } from '../common/component'; |
||||
|
import { pickerProps } from './shared'; |
||||
|
|
||||
|
VantComponent({ |
||||
|
classes: ['active-class', 'toolbar-class', 'column-class'], |
||||
|
props: Object.assign(Object.assign({}, pickerProps), { |
||||
|
max: { |
||||
|
type: Number, |
||||
|
value: Infinity, |
||||
|
}, |
||||
|
activeId: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
|
}, |
||||
|
toolbarPosition: { |
||||
|
type: String, |
||||
|
value: 'top' |
||||
|
}, |
||||
|
defaultIndex: { |
||||
|
type: Number, |
||||
|
value: 0 |
||||
|
}, |
||||
|
columns: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
|
}, |
||||
|
selectedIcon: { |
||||
|
type: String, |
||||
|
value: 'success', |
||||
|
} |
||||
|
}), |
||||
|
methods: { |
||||
|
emit(event) { |
||||
|
const { type } = event.currentTarget.dataset; |
||||
|
if (this.data.columns.length) { |
||||
|
this.$emit(type, this.data.activeId ); |
||||
|
} else { |
||||
|
this.$emit(type, { }); |
||||
|
} |
||||
|
}, |
||||
|
onSelectItem(event) { |
||||
|
const { item } = event.currentTarget.dataset; |
||||
|
const isArray = Array.isArray(this.data.activeId); |
||||
|
// 判断有没有超出右侧选择的最大数
|
||||
|
const isOverMax = isArray && this.data.activeId.length >= this.data.max; |
||||
|
// 判断该项有没有被选中, 如果有被选中,则忽视是否超出的条件
|
||||
|
const index = this.data.activeId.indexOf(item.id) |
||||
|
if (!item.disabled && !isOverMax) { |
||||
|
if(index > -1){ |
||||
|
this.data.activeId.splice(index, 1) |
||||
|
} else { |
||||
|
this.data.activeId.push(item.id) |
||||
|
} |
||||
|
this.setData({ activeId: this.data.activeId }); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": { |
||||
|
"van-icon": "../icon/index", |
||||
|
"loading": "../loading/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
<import src="./toolbar.wxml" /> |
||||
|
<wxs src="../wxs/utils.wxs" module="utils" /> |
||||
|
<wxs src="./index.wxs" module="wxs" /> |
||||
|
|
||||
|
<view class="van-picker custom-class"> |
||||
|
<template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" |
||||
|
data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template> |
||||
|
<view wx:if="{{ loading }}" class="van-picker__loading"> |
||||
|
<loading color="#1989fa" /> |
||||
|
</view> |
||||
|
<scroll-view scroll-y class="van-tree-select__content" style="height: {{ itemHeight * visibleItemCount }}px; padding: 0rpx 32rpx"> |
||||
|
<slot name="content" /> |
||||
|
<view wx:for="{{ columns }}" wx:key="id" |
||||
|
class="van-ellipsis content-item-class {{ utils.bem('tree-select__item', { active: wxs.isActive(activeId, item.id), disabled: item.disabled }) }} {{ wxs.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}" |
||||
|
data-item="{{ item }}" style="height: {{ itemHeight }}px;border-bottom: 1rpx solid #f3f3f3" bind:tap="onSelectItem"> |
||||
|
{{ item.name }} |
||||
|
<van-icon wx:if="{{ wxs.isActive(activeId, item.id) }}" name="{{ selectedIcon }}" size="16px" class="van-tree-select__selected" /> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<template is="toolbar" wx:if="{{ toolbarPosition === 'bottom' }}" |
||||
|
data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template> |
||||
|
</view> |
||||
@ -0,0 +1,12 @@ |
|||||
|
/* eslint-disable */ |
||||
|
var array = require('../wxs/array.wxs'); |
||||
|
|
||||
|
function isActive (activeList, itemId) { |
||||
|
if (array.isArray(activeList)) { |
||||
|
return activeList.indexOf(itemId) > -1; |
||||
|
} |
||||
|
|
||||
|
return activeList === itemId; |
||||
|
} |
||||
|
|
||||
|
module.exports.isActive = isActive; |
||||
@ -0,0 +1 @@ |
|||||
|
@import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;background-color:#fff;background-color:var(--picker-background-color,#fff)}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;height:var(--picker-toolbar-height,44px);line-height:44px;line-height:var(--picker-toolbar-height,44px)}.van-picker__cancel{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px);color:#666666;color:var(--picker-action-text-color,#666666)}.van-picker__confirm{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px);color:#1989fa;color:var(--picker-action-text-color,#1989fa)}.van-picker__cancel--hover,.van-picker__confirm--hover{background-color:#f2f3f5;background-color:var(--picker-action-active-color,#f2f3f5)}.van-picker__title{max-width:50%;text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1 1;flex:1 1;width:0}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:hsla(0,0%,100%,.9);background-color:var(--picker-loading-mask-color,hsla(0,0%,100%,.9))}.van-picker__mask{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none}.van-picker__frame,.van-picker__loading .van-loading{position:absolute;top:50%;left:0;z-index:1;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.van-tree-select{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;font-size:14px;font-size:var(--tree-select-font-size,14px)}.van-tree-select__nav{-webkit-flex:1;flex:1;background-color:#f7f8fa;background-color:var(--tree-select-nav-background-color,#f7f8fa);--sidebar-padding:12px 8px 12px 12px}.van-tree-select__nav__inner{width:100%!important;height:100%}.van-tree-select__content{-webkit-flex:2;flex:2;background-color:#fff;background-color:var(--tree-select-content-background-color,#fff)}.van-tree-select__item{position:relative;font-weight:700;line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#1989fa;color:var(--tree-select-item-active-color,#1989fa)}.van-tree-select__item--disabled{color:#c8c9cc;color:var(--tree-select-item-disabled-color,#c8c9cc)}.van-tree-select__selected{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:0px;} |
||||
@ -0,0 +1,21 @@ |
|||||
|
export const pickerProps = { |
||||
|
title: String, |
||||
|
loading: Boolean, |
||||
|
showToolbar: Boolean, |
||||
|
cancelButtonText: { |
||||
|
type: String, |
||||
|
value: '取消' |
||||
|
}, |
||||
|
confirmButtonText: { |
||||
|
type: String, |
||||
|
value: '确认' |
||||
|
}, |
||||
|
visibleItemCount: { |
||||
|
type: Number, |
||||
|
value: 5 |
||||
|
}, |
||||
|
itemHeight: { |
||||
|
type: Number, |
||||
|
value: 45 |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,11 @@ |
|||||
|
<template name="toolbar"> |
||||
|
<view wx:if="{{ showToolbar }}" class="van-picker__toolbar van-hairline--top-bottom toolbar-class"> |
||||
|
<view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" bindtap="emit"> |
||||
|
{{ cancelButtonText }} |
||||
|
</view> |
||||
|
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{title}}</view> |
||||
|
<view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" bindtap="emit"> |
||||
|
{{ confirmButtonText }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
@ -1,28 +1,11 @@ |
|||||
<template name="toolbar"> |
<template name="toolbar"> |
||||
<view |
|
||||
wx:if="{{ showToolbar }}" |
|
||||
class="van-picker__toolbar van-hairline--top-bottom toolbar-class" |
|
||||
> |
|
||||
<view |
|
||||
class="van-picker__cancel" |
|
||||
hover-class="van-picker__cancel--hover" |
|
||||
hover-stay-time="70" |
|
||||
data-type="cancel" |
|
||||
bindtap="emit" |
|
||||
> |
|
||||
|
<view wx:if="{{ showToolbar }}" class="van-picker__toolbar van-hairline--top-bottom toolbar-class"> |
||||
|
<view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" bindtap="emit"> |
||||
{{ cancelButtonText }} |
{{ cancelButtonText }} |
||||
</view> |
</view> |
||||
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ |
|
||||
title |
|
||||
}}</view> |
|
||||
<view |
|
||||
class="van-picker__confirm" |
|
||||
hover-class="van-picker__confirm--hover" |
|
||||
hover-stay-time="70" |
|
||||
data-type="confirm" |
|
||||
bindtap="emit" |
|
||||
> |
|
||||
|
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{title}}</view> |
||||
|
<view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" bindtap="emit"> |
||||
{{ confirmButtonText }} |
{{ confirmButtonText }} |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
|
||||
|
</template> |
||||
@ -1,29 +1,20 @@ |
|||||
<wxs src="../wxs/utils.wxs" module="utils" /> |
<wxs src="../wxs/utils.wxs" module="utils" /> |
||||
|
|
||||
<view class="van-radio custom-class"> |
<view class="van-radio custom-class"> |
||||
<view |
|
||||
wx:if="{{ labelPosition === 'left' }}" |
|
||||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" |
|
||||
bindtap="onClickLabel" |
|
||||
> |
|
||||
|
<view wx:if="{{ labelPosition === 'left' }}" |
||||
|
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel"> |
||||
<slot /> |
<slot /> |
||||
</view> |
</view> |
||||
<view class="van-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }};" bindtap="onChange"> |
<view class="van-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }};" bindtap="onChange"> |
||||
<slot wx:if="{{ useIconSlot }}" name="icon" /> |
<slot wx:if="{{ useIconSlot }}" name="icon" /> |
||||
<van-icon |
|
||||
wx:else |
|
||||
name="success" |
|
||||
|
<van-icon wx:else name="success" |
||||
class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}" |
class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}" |
||||
style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}" |
style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}" |
||||
custom-class="icon-class" |
custom-class="icon-class" |
||||
custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;" |
|
||||
/> |
|
||||
|
custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;" /> |
||||
</view> |
</view> |
||||
<view |
|
||||
wx:if="{{ labelPosition === 'right' }}" |
|
||||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" |
|
||||
bindtap="onClickLabel" |
|
||||
> |
|
||||
|
<view wx:if="{{ labelPosition === 'right' }}" |
||||
|
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel"> |
||||
<slot /> |
<slot /> |
||||
</view> |
</view> |
||||
</view> |
|
||||
|
</view> |
||||
Write
Preview
Loading…
Cancel
Save