默认提交
Showing
227 changed files
with
4489 additions
and
17 deletions
... | @@ -11,7 +11,7 @@ | ... | @@ -11,7 +11,7 @@ |
11 | </view> | 11 | </view> |
12 | <view class="bid"> | 12 | <view class="bid"> |
13 | 我要报价 | 13 | 我要报价 |
14 | <input value="{{bidPrice}}" class="val" bindinput="bindBidPriceInput" class="ipt" placeholder="{{maxPrice + productInfo.minScope}}" /> | 14 | <input value="{{bidPrice}}" class="val" bindinput="bindBidPriceInput" class="ipt" placeholder="{{filter.Fen2Yuan(maxPrice + productInfo.minScope)}}" /> |
15 | 元 | 15 | 元 |
16 | </view> | 16 | </view> |
17 | </view> | 17 | </view> | ... | ... |
... | @@ -28,6 +28,7 @@ Page({ | ... | @@ -28,6 +28,7 @@ Page({ |
28 | wxTimerList: {}, | 28 | wxTimerList: {}, |
29 | lastTime: "", | 29 | lastTime: "", |
30 | bidPrice: 0, // 我的出价 单位元 | 30 | bidPrice: 0, // 我的出价 单位元 |
31 | isTimeEnd: false, //倒计时结束 | ||
31 | }, | 32 | }, |
32 | onShareAppMessage() {}, | 33 | onShareAppMessage() {}, |
33 | showAuth() { | 34 | showAuth() { |
... | @@ -53,14 +54,22 @@ Page({ | ... | @@ -53,14 +54,22 @@ Page({ |
53 | 54 | ||
54 | initData() { | 55 | initData() { |
55 | this.queryMember().then((result) => { | 56 | this.queryMember().then((result) => { |
56 | this.queryAuctionDetail().then((result) => { | 57 | this.refreshView(); |
57 | this.startTimer(); | ||
58 | }) | ||
59 | this.queryAuctionRecordLast(); | ||
60 | this.openSocket(); | 58 | this.openSocket(); |
61 | }); | 59 | }); |
62 | }, | 60 | }, |
63 | 61 | ||
62 | /** | ||
63 | * 刷新页面 | ||
64 | */ | ||
65 | refreshView() { | ||
66 | this.queryAuctionDetail().then((result) => { | ||
67 | this.removeTimer(); | ||
68 | this.startTimer(); | ||
69 | }) | ||
70 | this.queryAuctionRecordLast(); | ||
71 | }, | ||
72 | |||
64 | // 开始倒计时 | 73 | // 开始倒计时 |
65 | startTimer() { | 74 | startTimer() { |
66 | let _this = this; | 75 | let _this = this; |
... | @@ -73,6 +82,9 @@ Page({ | ... | @@ -73,6 +82,9 @@ Page({ |
73 | wxTimer = new timer({ | 82 | wxTimer = new timer({ |
74 | beginTime: beginTime, | 83 | beginTime: beginTime, |
75 | complete() { | 84 | complete() { |
85 | _this.setData({ | ||
86 | isTimeEnd: true | ||
87 | }) | ||
76 | _this.removeTimer(); | 88 | _this.removeTimer(); |
77 | _this.queryAuctionDetail(); | 89 | _this.queryAuctionDetail(); |
78 | }, | 90 | }, |
... | @@ -288,6 +300,7 @@ Page({ | ... | @@ -288,6 +300,7 @@ Page({ |
288 | socketStatus: 'connected', | 300 | socketStatus: 'connected', |
289 | waitingResponse: false | 301 | waitingResponse: false |
290 | }) | 302 | }) |
303 | this.refreshView(); | ||
291 | }) | 304 | }) |
292 | 305 | ||
293 | wx.onSocketClose(() => { | 306 | wx.onSocketClose(() => { |
... | @@ -307,10 +320,11 @@ Page({ | ... | @@ -307,10 +320,11 @@ Page({ |
307 | 320 | ||
308 | // 监听服务器推送消息 | 321 | // 监听服务器推送消息 |
309 | wx.onSocketMessage(message => { | 322 | wx.onSocketMessage(message => { |
310 | console.log('socket message:', message) | 323 | console.log('socket message:', message); |
311 | this.setData({ | 324 | this.setData({ |
312 | loading: false | 325 | loading: false |
313 | }) | 326 | }); |
327 | this.refreshView(); | ||
314 | }) | 328 | }) |
315 | 329 | ||
316 | // 打开信道 | 330 | // 打开信道 | ... | ... |
... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
23 | <text class="price">¥{{filter.Fen2Yuan(maxPrice)}}</text> | 23 | <text class="price">¥{{filter.Fen2Yuan(maxPrice)}}</text> |
24 | <text class="t1">当前价格</text> | 24 | <text class="t1">当前价格</text> |
25 | </view> | 25 | </view> |
26 | <view class="func-ele func-right {{productInfo.status != 1 ? 'disable' : ''}}"> | 26 | <view class="func-ele func-right {{productInfo.status != 1 || isTimeEnd ? 'disable' : ''}}"> |
27 | <text wx:if="{{productInfo.status == 0}}" class="t1 t2">拍卖未开始</text> | 27 | <text wx:if="{{productInfo.status == 0}}" class="t1 t2">拍卖未开始</text> |
28 | <text wx:if="{{productInfo.status == 1}}" class="t1">拍卖进行中</text> | 28 | <text wx:if="{{productInfo.status == 1}}" class="t1">拍卖进行中</text> |
29 | <text wx:if="{{productInfo.status == 2}}" class="t1 t2">拍卖已结束</text> | 29 | <text wx:if="{{productInfo.status == 2}}" class="t1 t2">拍卖已结束</text> |
... | @@ -78,7 +78,7 @@ | ... | @@ -78,7 +78,7 @@ |
78 | </view> | 78 | </view> |
79 | </view> | 79 | </view> |
80 | <!-- 按钮 --> | 80 | <!-- 按钮 --> |
81 | <view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 ? 'disable' : ''}}"> | 81 | <view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 || isTimeEnd ? 'disable' : ''}}"> |
82 | 我要出价 | 82 | 我要出价 |
83 | </view> | 83 | </view> |
84 | </view> | 84 | </view> | ... | ... |
... | @@ -20,12 +20,10 @@ Page({ | ... | @@ -20,12 +20,10 @@ Page({ |
20 | }) | 20 | }) |
21 | }, | 21 | }, |
22 | onShow() { | 22 | onShow() { |
23 | |||
24 | }, | ||
25 | onLoad(options) { | ||
26 | this.resetPage(); | 23 | this.resetPage(); |
27 | this.initData(); | 24 | this.initData(); |
28 | }, | 25 | }, |
26 | onLoad(options) {}, | ||
29 | initData() { | 27 | initData() { |
30 | this.queryAuctionList(); | 28 | this.queryAuctionList(); |
31 | }, | 29 | }, |
... | @@ -79,6 +77,12 @@ Page({ | ... | @@ -79,6 +77,12 @@ Page({ |
79 | success(res) {} | 77 | success(res) {} |
80 | }) | 78 | }) |
81 | } | 79 | } |
80 | } else { | ||
81 | wx.showModal({ | ||
82 | content: "活动已结束", | ||
83 | showCancel: false, | ||
84 | success(res) {} | ||
85 | }) | ||
82 | } | 86 | } |
83 | }, | 87 | }, |
84 | 88 | ... | ... |
... | @@ -20,6 +20,7 @@ Page({ | ... | @@ -20,6 +20,7 @@ Page({ |
20 | lastTime: "", | 20 | lastTime: "", |
21 | isSellOut: false, | 21 | isSellOut: false, |
22 | orderStatus: 0, // 0.未下单 1.下单成功 | 22 | orderStatus: 0, // 0.未下单 1.下单成功 |
23 | isTimeEnd: false, //倒计时结束 | ||
23 | }, | 24 | }, |
24 | onShareAppMessage() {}, | 25 | onShareAppMessage() {}, |
25 | showAuth() { | 26 | showAuth() { |
... | @@ -62,6 +63,9 @@ Page({ | ... | @@ -62,6 +63,9 @@ Page({ |
62 | wxTimer = new timer({ | 63 | wxTimer = new timer({ |
63 | beginTime: beginTime, | 64 | beginTime: beginTime, |
64 | complete() { | 65 | complete() { |
66 | _this.setData({ | ||
67 | isTimeEnd: true | ||
68 | }) | ||
65 | _this.removeTimer(); | 69 | _this.removeTimer(); |
66 | _this.querySeckillDetail(); | 70 | _this.querySeckillDetail(); |
67 | }, | 71 | }, | ... | ... |
... | @@ -24,7 +24,7 @@ | ... | @@ -24,7 +24,7 @@ |
24 | <text class="t1 line-th">¥{{filter.Fen2Yuan(productInfo.specialPrice)}}</text> | 24 | <text class="t1 line-th">¥{{filter.Fen2Yuan(productInfo.specialPrice)}}</text> |
25 | <text class="t1">仅剩{{productInfo.stock}}个</text> | 25 | <text class="t1">仅剩{{productInfo.stock}}个</text> |
26 | </view> | 26 | </view> |
27 | <view class="func-ele func-right {{productInfo.status != 1 ? 'disable' : ''}}"> | 27 | <view class="func-ele func-right {{productInfo.status != 1 || isTimeEnd ? 'disable' : ''}}"> |
28 | <text wx:if="{{productInfo.status == 0}}" class="t1 t2">秒杀未开始</text> | 28 | <text wx:if="{{productInfo.status == 0}}" class="t1 t2">秒杀未开始</text> |
29 | <text wx:if="{{productInfo.status == 1}}" class="t1">秒杀进行中</text> | 29 | <text wx:if="{{productInfo.status == 1}}" class="t1">秒杀进行中</text> |
30 | <text wx:if="{{productInfo.status == 2}}" class="t1 t2">秒杀已结束</text> | 30 | <text wx:if="{{productInfo.status == 2}}" class="t1 t2">秒杀已结束</text> |
... | @@ -42,7 +42,7 @@ | ... | @@ -42,7 +42,7 @@ |
42 | </view> | 42 | </view> |
43 | </view> | 43 | </view> |
44 | <!-- 按钮 --> | 44 | <!-- 按钮 --> |
45 | <view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 ? 'disable' : ''}}"> | 45 | <view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 || isTimeEnd ? 'disable' : ''}}"> |
46 | 立即秒杀 | 46 | 立即秒杀 |
47 | </view> | 47 | </view> |
48 | </view> | 48 | </view> | ... | ... |
... | @@ -20,12 +20,12 @@ Page({ | ... | @@ -20,12 +20,12 @@ Page({ |
20 | }) | 20 | }) |
21 | }, | 21 | }, |
22 | onShow() { | 22 | onShow() { |
23 | |||
24 | }, | ||
25 | onLoad(options) { | ||
26 | this.resetPage(); | 23 | this.resetPage(); |
27 | this.initData(); | 24 | this.initData(); |
28 | }, | 25 | }, |
26 | onLoad(options) { | ||
27 | |||
28 | }, | ||
29 | initData() { | 29 | initData() { |
30 | this.querySeckillList(); | 30 | this.querySeckillList(); |
31 | }, | 31 | }, | ... | ... |
src/ui/vant-weapp/action-sheet/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/action-sheet/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { safeArea } from '../mixins/safe-area'; | ||
3 | VantComponent({ | ||
4 | mixins: [safeArea()], | ||
5 | props: { | ||
6 | show: Boolean, | ||
7 | title: String, | ||
8 | cancelText: String, | ||
9 | zIndex: { | ||
10 | type: Number, | ||
11 | value: 100 | ||
12 | }, | ||
13 | actions: { | ||
14 | type: Array, | ||
15 | value: [] | ||
16 | }, | ||
17 | overlay: { | ||
18 | type: Boolean, | ||
19 | value: true | ||
20 | }, | ||
21 | closeOnClickOverlay: { | ||
22 | type: Boolean, | ||
23 | value: true | ||
24 | } | ||
25 | }, | ||
26 | methods: { | ||
27 | onSelect(event) { | ||
28 | const { index } = event.currentTarget.dataset; | ||
29 | const item = this.data.actions[index]; | ||
30 | if (item && !item.disabled && !item.loading) { | ||
31 | this.$emit('select', item); | ||
32 | } | ||
33 | }, | ||
34 | onCancel() { | ||
35 | this.$emit('cancel'); | ||
36 | }, | ||
37 | onClose() { | ||
38 | this.$emit('close'); | ||
39 | } | ||
40 | } | ||
41 | }); |
src/ui/vant-weapp/action-sheet/index.json
0 → 100755
src/ui/vant-weapp/action-sheet/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <van-popup | ||
4 | show="{{ show }}" | ||
5 | position="bottom" | ||
6 | z-index="{{ zIndex }}" | ||
7 | overlay="{{ overlay }}" | ||
8 | custom-class="van-action-sheet" | ||
9 | safe-area-inset-bottom="{{ safeAreaInsetBottom }}" | ||
10 | close-on-click-overlay="{{ closeOnClickOverlay }}" | ||
11 | bind:close="onClose" | ||
12 | > | ||
13 | <view wx:if="{{ title }}" class="van-hairline--bottom van-action-sheet__header"> | ||
14 | {{ title }} | ||
15 | <van-icon | ||
16 | name="close" | ||
17 | custom-class="van-action-sheet__close" | ||
18 | bind:click="onClose" | ||
19 | /> | ||
20 | </view> | ||
21 | <view wx:if="{{ actions && actions.length }}"> | ||
22 | <!-- button外包一层view,防止actions动态变化,导致渲染时button被打散 --> | ||
23 | <button | ||
24 | wx:for="{{ actions }}" | ||
25 | wx:key="index" | ||
26 | open-type="{{ item.openType }}" | ||
27 | class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} van-hairline--top {{ item.className || '' }}" | ||
28 | hover-class="van-action-sheet__item--hover" | ||
29 | data-index="{{ index }}" | ||
30 | bind:tap="onSelect" | ||
31 | > | ||
32 | <block wx:if="{{ !item.loading }}"> | ||
33 | {{ item.name }} | ||
34 | <text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text> | ||
35 | </block> | ||
36 | <van-loading wx:else size="20px" /> | ||
37 | </button> | ||
38 | </view> | ||
39 | <slot /> | ||
40 | <view | ||
41 | wx:if="{{ cancelText }}" | ||
42 | class="van-action-sheet__cancel" | ||
43 | hover-class="van-action-sheet__cancel--hover" | ||
44 | hover-stay-time="70" | ||
45 | bind:tap="onCancel" | ||
46 | > | ||
47 | {{ cancelText }} | ||
48 | </view> | ||
49 | </van-popup> |
src/ui/vant-weapp/action-sheet/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-action-sheet{max-height:90%!important;color:#333}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;font-size:16px;line-height:50px;text-align:center;background-color:#fff}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5}.van-action-sheet__cancel{height:60px}.van-action-sheet__cancel:before{display:block;height:10px;background-color:#f8f8f8;content:" "}.van-action-sheet__item--disabled{color:#c9c9c9}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff}.van-action-sheet__subname{margin-left:5px;font-size:12px;color:#7d7e80}.van-action-sheet__header{font-size:16px;font-weight:500;line-height:44px;text-align:center}.van-action-sheet__close{position:absolute!important;top:0;right:0;padding:0 15px;font-size:18px!important;line-height:inherit!important;color:#999} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/area/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/area/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | classes: ['active-class', 'toolbar-class', 'column-class'], | ||
4 | props: { | ||
5 | title: String, | ||
6 | value: String, | ||
7 | loading: Boolean, | ||
8 | cancelButtonText: String, | ||
9 | confirmButtonText: String, | ||
10 | itemHeight: { | ||
11 | type: Number, | ||
12 | value: 44 | ||
13 | }, | ||
14 | visibleItemCount: { | ||
15 | type: Number, | ||
16 | value: 5 | ||
17 | }, | ||
18 | columnsNum: { | ||
19 | type: [String, Number], | ||
20 | value: 3 | ||
21 | }, | ||
22 | areaList: { | ||
23 | type: Object, | ||
24 | value: {} | ||
25 | } | ||
26 | }, | ||
27 | data: { | ||
28 | columns: [{ values: [] }, { values: [] }, { values: [] }], | ||
29 | displayColumns: [{ values: [] }, { values: [] }, { values: [] }] | ||
30 | }, | ||
31 | watch: { | ||
32 | value(value) { | ||
33 | this.code = value; | ||
34 | this.setValues(); | ||
35 | }, | ||
36 | areaList: 'setValues', | ||
37 | columnsNum(value) { | ||
38 | this.set({ | ||
39 | displayColumns: this.data.columns.slice(0, +value) | ||
40 | }); | ||
41 | } | ||
42 | }, | ||
43 | methods: { | ||
44 | getPicker() { | ||
45 | if (this.picker == null) { | ||
46 | this.picker = this.selectComponent('.van-area__picker'); | ||
47 | } | ||
48 | return this.picker; | ||
49 | }, | ||
50 | onCancel(event) { | ||
51 | this.emit('cancel', event.detail); | ||
52 | }, | ||
53 | onConfirm(event) { | ||
54 | this.emit('confirm', event.detail); | ||
55 | }, | ||
56 | emit(type, detail) { | ||
57 | detail.values = detail.value; | ||
58 | delete detail.value; | ||
59 | this.$emit(type, detail); | ||
60 | }, | ||
61 | onChange(event) { | ||
62 | const { index, picker, value } = event.detail; | ||
63 | this.code = value[index].code; | ||
64 | this.setValues().then(() => { | ||
65 | this.$emit('change', { | ||
66 | picker, | ||
67 | values: picker.getValues(), | ||
68 | index | ||
69 | }); | ||
70 | }); | ||
71 | }, | ||
72 | getConfig(type) { | ||
73 | const { areaList } = this.data; | ||
74 | return (areaList && areaList[`${type}_list`]) || {}; | ||
75 | }, | ||
76 | getList(type, code) { | ||
77 | let result = []; | ||
78 | if (type !== 'province' && !code) { | ||
79 | return result; | ||
80 | } | ||
81 | const list = this.getConfig(type); | ||
82 | result = Object.keys(list).map(code => ({ | ||
83 | code, | ||
84 | name: list[code] | ||
85 | })); | ||
86 | if (code) { | ||
87 | // oversea code | ||
88 | if (code[0] === '9' && type === 'city') { | ||
89 | code = '9'; | ||
90 | } | ||
91 | result = result.filter(item => item.code.indexOf(code) === 0); | ||
92 | } | ||
93 | return result; | ||
94 | }, | ||
95 | getIndex(type, code) { | ||
96 | let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6; | ||
97 | const list = this.getList(type, code.slice(0, compareNum - 2)); | ||
98 | // oversea code | ||
99 | if (code[0] === '9' && type === 'province') { | ||
100 | compareNum = 1; | ||
101 | } | ||
102 | code = code.slice(0, compareNum); | ||
103 | for (let i = 0; i < list.length; i++) { | ||
104 | if (list[i].code.slice(0, compareNum) === code) { | ||
105 | return i; | ||
106 | } | ||
107 | } | ||
108 | return 0; | ||
109 | }, | ||
110 | setValues() { | ||
111 | const county = this.getConfig('county'); | ||
112 | let code = this.code || Object.keys(county)[0] || ''; | ||
113 | const province = this.getList('province'); | ||
114 | const city = this.getList('city', code.slice(0, 2)); | ||
115 | const picker = this.getPicker(); | ||
116 | if (!picker) { | ||
117 | return; | ||
118 | } | ||
119 | const stack = []; | ||
120 | stack.push(picker.setColumnValues(0, province, false)); | ||
121 | stack.push(picker.setColumnValues(1, city, false)); | ||
122 | if (city.length && code.slice(2, 4) === '00') { | ||
123 | ; | ||
124 | [{ code }] = city; | ||
125 | } | ||
126 | stack.push(picker.setColumnValues(2, this.getList('county', code.slice(0, 4)), false)); | ||
127 | return Promise.all(stack) | ||
128 | .catch(() => { }) | ||
129 | .then(() => picker.setIndexes([ | ||
130 | this.getIndex('province', code), | ||
131 | this.getIndex('city', code), | ||
132 | this.getIndex('county', code) | ||
133 | ])) | ||
134 | .catch(() => { }); | ||
135 | }, | ||
136 | getValues() { | ||
137 | const picker = this.getPicker(); | ||
138 | return picker ? picker.getValues().filter(value => !!value) : []; | ||
139 | }, | ||
140 | getDetail() { | ||
141 | const values = this.getValues(); | ||
142 | const area = { | ||
143 | code: '', | ||
144 | country: '', | ||
145 | province: '', | ||
146 | city: '', | ||
147 | county: '' | ||
148 | }; | ||
149 | if (!values.length) { | ||
150 | return area; | ||
151 | } | ||
152 | const names = values.map((item) => item.name); | ||
153 | area.code = values[values.length - 1].code; | ||
154 | if (area.code[0] === '9') { | ||
155 | area.country = names[1] || ''; | ||
156 | area.province = names[2] || ''; | ||
157 | } | ||
158 | else { | ||
159 | area.province = names[0] || ''; | ||
160 | area.city = names[1] || ''; | ||
161 | area.county = names[2] || ''; | ||
162 | } | ||
163 | return area; | ||
164 | }, | ||
165 | reset() { | ||
166 | this.code = ''; | ||
167 | return this.setValues(); | ||
168 | } | ||
169 | } | ||
170 | }); |
src/ui/vant-weapp/area/index.json
0 → 100755
src/ui/vant-weapp/area/index.wxml
0 → 100755
1 | <van-picker | ||
2 | class="van-area__picker" | ||
3 | active-class="active-class" | ||
4 | toolbar-class="toolbar-class" | ||
5 | column-class="column-class" | ||
6 | show-toolbar | ||
7 | value-key="name" | ||
8 | title="{{ title }}" | ||
9 | loading="{{ loading }}" | ||
10 | columns="{{ displayColumns }}" | ||
11 | item-height="{{ itemHeight }}" | ||
12 | visible-item-count="{{ visibleItemCount }}" | ||
13 | cancel-button-text="{{ cancelButtonText }}" | ||
14 | confirm-button-text="{{ confirmButtonText }}" | ||
15 | bind:change="onChange" | ||
16 | bind:confirm="onConfirm" | ||
17 | bind:cancel="onCancel" | ||
18 | /> |
src/ui/vant-weapp/area/index.wxss
0 → 100755
1 | @import '../common/index.wxss'; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/badge-group/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/badge-group/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { isNumber } from '../common/utils'; | ||
3 | VantComponent({ | ||
4 | relation: { | ||
5 | name: 'badge', | ||
6 | type: 'descendant', | ||
7 | linked(target) { | ||
8 | this.badges.push(target); | ||
9 | this.setActive(); | ||
10 | }, | ||
11 | unlinked(target) { | ||
12 | this.badges = this.badges.filter(item => item !== target); | ||
13 | this.setActive(); | ||
14 | } | ||
15 | }, | ||
16 | props: { | ||
17 | active: { | ||
18 | type: Number, | ||
19 | value: 0 | ||
20 | } | ||
21 | }, | ||
22 | watch: { | ||
23 | active: 'setActive' | ||
24 | }, | ||
25 | beforeCreate() { | ||
26 | this.badges = []; | ||
27 | this.currentActive = -1; | ||
28 | }, | ||
29 | methods: { | ||
30 | setActive(badge) { | ||
31 | let { active } = this.data; | ||
32 | const { badges } = this; | ||
33 | if (badge && !isNumber(badge)) { | ||
34 | active = badges.indexOf(badge); | ||
35 | } | ||
36 | if (active === this.currentActive) { | ||
37 | return; | ||
38 | } | ||
39 | if (this.currentActive !== -1 && badges[this.currentActive]) { | ||
40 | this.$emit('change', active); | ||
41 | badges[this.currentActive].setActive(false); | ||
42 | } | ||
43 | if (badges[active]) { | ||
44 | badges[active].setActive(true); | ||
45 | this.currentActive = active; | ||
46 | } | ||
47 | } | ||
48 | } | ||
49 | }); |
src/ui/vant-weapp/badge-group/index.json
0 → 100755
src/ui/vant-weapp/badge-group/index.wxml
0 → 100755
src/ui/vant-weapp/badge-group/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-badge-group{width:85px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/badge/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/badge/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | type: 'ancestor', | ||
5 | name: 'badge-group' | ||
6 | }, | ||
7 | props: { | ||
8 | info: null, | ||
9 | title: String | ||
10 | }, | ||
11 | methods: { | ||
12 | onClick() { | ||
13 | const group = this.getRelationNodes('../badge-group/index')[0]; | ||
14 | if (group) { | ||
15 | group.setActive(this); | ||
16 | } | ||
17 | }, | ||
18 | setActive(active) { | ||
19 | this.set({ active }); | ||
20 | } | ||
21 | } | ||
22 | }); |
src/ui/vant-weapp/badge/index.json
0 → 100755
src/ui/vant-weapp/badge/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="{{ utils.bem('badge', { active }) }} van-hairline custom-class" | ||
5 | hover-class="van-badge--hover" | ||
6 | hover-stay-time="70" | ||
7 | bind:tap="onClick" | ||
8 | > | ||
9 | <view class="van-badge__text"> | ||
10 | <van-info | ||
11 | wx:if="{{ info !== null }}" | ||
12 | info="{{ info }}" | ||
13 | custom-style="right: 4px" | ||
14 | /> | ||
15 | {{ title }} | ||
16 | </view> | ||
17 | </view> |
src/ui/vant-weapp/badge/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-badge{display:block;padding:20px 12px 20px 9px;overflow:hidden;font-size:14px;line-height:1.4;color:#7d7e80;word-break:break-all;background-color:#f8f8f8;border-left:3px solid transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none}.van-badge--hover{background-color:#f2f3f5}.van-badge:after{border-bottom-width:1px}.van-badge--active{font-weight:700;color:#333;border-color:#f44}.van-badge--active:after{border-right-width:1px}.van-badge--active,.van-badge--active.van-badge--hover{background-color:#fff}.van-badge__text{position:relative} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/button/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/button/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { button } from '../mixins/button'; | ||
3 | import { openType } from '../mixins/open-type'; | ||
4 | VantComponent({ | ||
5 | mixins: [button, openType], | ||
6 | classes: ['hover-class', 'loading-class'], | ||
7 | props: { | ||
8 | plain: Boolean, | ||
9 | block: Boolean, | ||
10 | round: Boolean, | ||
11 | square: Boolean, | ||
12 | loading: Boolean, | ||
13 | hairline: Boolean, | ||
14 | disabled: Boolean, | ||
15 | loadingText: String, | ||
16 | type: { | ||
17 | type: String, | ||
18 | value: 'default' | ||
19 | }, | ||
20 | size: { | ||
21 | type: String, | ||
22 | value: 'normal' | ||
23 | }, | ||
24 | loadingSize: { | ||
25 | type: String, | ||
26 | value: '20px' | ||
27 | } | ||
28 | }, | ||
29 | methods: { | ||
30 | onClick() { | ||
31 | if (!this.data.disabled && !this.data.loading) { | ||
32 | this.$emit('click'); | ||
33 | } | ||
34 | } | ||
35 | } | ||
36 | }); |
src/ui/vant-weapp/button/index.json
0 → 100755
src/ui/vant-weapp/button/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <button | ||
4 | id="{{ id }}" | ||
5 | class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}" | ||
6 | open-type="{{ openType }}" | ||
7 | hover-class="van-button--active hover-class" | ||
8 | lang="{{ lang }}" | ||
9 | business-id="{{ businessId }}" | ||
10 | session-from="{{ sessionFrom }}" | ||
11 | send-message-title="{{ sendMessageTitle }}" | ||
12 | send-message-path="{{ sendMessagePath }}" | ||
13 | send-message-img="{{ sendMessageImg }}" | ||
14 | show-message-card="{{ showMessageCard }}" | ||
15 | app-parameter="{{ appParameter }}" | ||
16 | aria-label="{{ ariaLabel }}" | ||
17 | bindtap="onClick" | ||
18 | bindgetuserinfo="bindGetUserInfo" | ||
19 | bindcontact="bindContact" | ||
20 | bindgetphonenumber="bindGetPhoneNumber" | ||
21 | binderror="bindError" | ||
22 | bindlaunchapp="bindLaunchApp" | ||
23 | bindopensetting="bindOpenSetting" | ||
24 | > | ||
25 | <block wx:if="{{ loading }}"> | ||
26 | <van-loading | ||
27 | custom-class="loading-class" | ||
28 | size="{{ loadingSize }}" | ||
29 | color="{{ type === 'default' ? '#c9c9c9' : '' }}" | ||
30 | /> | ||
31 | <view | ||
32 | wx:if="{{ loadingText }}" | ||
33 | class="van-button__loading-text" | ||
34 | > | ||
35 | {{ loadingText }} | ||
36 | </view> | ||
37 | </block> | ||
38 | <slot wx:else /> | ||
39 | </button> |
src/ui/vant-weapp/button/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-button{position:relative;display:inline-block;height:44px;padding:0;font-size:16px;line-height:42px;text-align:center;vertical-align:middle;box-sizing:border-box;border-radius:2px;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";opacity:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #eee}.van-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.van-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--info{color:#1989fa}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;min-width:60px;padding:0 8px;font-size:12px;line-height:28px}.van-button--mini{display:inline-block;width:50px;height:22px;font-size:10px;line-height:20px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:block;width:100%}.van-button--round{border-radius:10em}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5}.van-button__loading-text{margin-left:5px;display:inline-block;vertical-align:middle}.van-button--hairline{border-width:0;padding-top:1px}.van-button--hairline:after{border-width:1px;border-color:inherit;border-radius:4px}.van-button--hairline.van-button--round:after{border-radius:10em}.van-button--hairline.van-button--square:after{border-radius:0} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/card/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/card/index.js
0 → 100755
1 | import { link } from '../mixins/link'; | ||
2 | import { VantComponent } from '../common/component'; | ||
3 | VantComponent({ | ||
4 | classes: [ | ||
5 | 'num-class', | ||
6 | 'desc-class', | ||
7 | 'thumb-class', | ||
8 | 'title-class', | ||
9 | 'price-class', | ||
10 | 'origin-price-class', | ||
11 | ], | ||
12 | mixins: [link], | ||
13 | props: { | ||
14 | tag: String, | ||
15 | num: String, | ||
16 | desc: String, | ||
17 | thumb: String, | ||
18 | title: String, | ||
19 | price: String, | ||
20 | centered: Boolean, | ||
21 | lazyLoad: Boolean, | ||
22 | thumbLink: String, | ||
23 | originPrice: String, | ||
24 | thumbMode: { | ||
25 | type: String, | ||
26 | value: 'aspectFit' | ||
27 | }, | ||
28 | currency: { | ||
29 | type: String, | ||
30 | value: '¥' | ||
31 | } | ||
32 | }, | ||
33 | methods: { | ||
34 | onClickThumb() { | ||
35 | this.jumpLink('thumbLink'); | ||
36 | } | ||
37 | } | ||
38 | }); |
src/ui/vant-weapp/card/index.json
0 → 100755
src/ui/vant-weapp/card/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="custom-class van-card"> | ||
4 | <view class="{{ utils.bem('card__header', { center: centered }) }}"> | ||
5 | <view class="van-card__thumb" bind:tap="onClickThumb"> | ||
6 | <image | ||
7 | wx:if="{{ thumb }}" | ||
8 | src="{{ thumb }}" | ||
9 | mode="{{ thumbMode }}" | ||
10 | lazy-load="{{ lazyLoad }}" | ||
11 | class="van-card__img thumb-class" | ||
12 | /> | ||
13 | <slot name="thumb" /> | ||
14 | <van-tag | ||
15 | wx:if="{{ tag }}" | ||
16 | mark | ||
17 | type="danger" | ||
18 | custom-class="van-card__tag" | ||
19 | > | ||
20 | {{ tag }} | ||
21 | </van-tag> | ||
22 | </view> | ||
23 | |||
24 | <view class="van-card__content"> | ||
25 | <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view> | ||
26 | <slot wx:else name="title" /> | ||
27 | |||
28 | <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view> | ||
29 | <slot wx:else name="desc" /> | ||
30 | |||
31 | <slot name="tags" /> | ||
32 | |||
33 | <view class="van-card__bottom"> | ||
34 | <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view> | ||
35 | <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view> | ||
36 | <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view> | ||
37 | </view> | ||
38 | </view> | ||
39 | </view> | ||
40 | |||
41 | <view class="van-card__footer"> | ||
42 | <slot name="footer" /> | ||
43 | </view> | ||
44 | </view> |
src/ui/vant-weapp/card/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-card{position:relative;padding:5px 15px;font-size:12px;color:#333;background-color:#fafafa;box-sizing:border-box}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;width:90px;height:90px;margin-right:10px;-webkit-flex:none;flex:none}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;min-width:0;-webkit-flex:1;flex:1}.van-card__desc,.van-card__title{word-break:break-all}.van-card__title{font-weight:700;line-height:16px}.van-card__desc{color:#7d7e80}.van-card__bottom,.van-card__desc{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#f44}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;color:#7d7e80;text-decoration:line-through}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{width:100%;text-align:right;-webkit-flex:none;flex:none} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/cell-group/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/cell-group/index.js
0 → 100755
src/ui/vant-weapp/cell-group/index.json
0 → 100755
src/ui/vant-weapp/cell-group/index.wxml
0 → 100755
src/ui/vant-weapp/cell-group/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-cell-group__title{font-size:14px;padding:15px 15px 5px;color:#999;line-height:16px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/cell/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/cell/index.js
0 → 100755
1 | import { link } from '../mixins/link'; | ||
2 | import { VantComponent } from '../common/component'; | ||
3 | VantComponent({ | ||
4 | classes: [ | ||
5 | 'title-class', | ||
6 | 'label-class', | ||
7 | 'value-class', | ||
8 | 'right-icon-class', | ||
9 | 'hover-class' | ||
10 | ], | ||
11 | mixins: [link], | ||
12 | props: { | ||
13 | title: null, | ||
14 | value: null, | ||
15 | icon: String, | ||
16 | size: String, | ||
17 | label: String, | ||
18 | center: Boolean, | ||
19 | isLink: Boolean, | ||
20 | required: Boolean, | ||
21 | clickable: Boolean, | ||
22 | titleWidth: String, | ||
23 | customStyle: String, | ||
24 | arrowDirection: String, | ||
25 | border: { | ||
26 | type: Boolean, | ||
27 | value: true | ||
28 | } | ||
29 | }, | ||
30 | methods: { | ||
31 | onClick(event) { | ||
32 | this.$emit('click', event.detail); | ||
33 | this.jumpLink(); | ||
34 | } | ||
35 | } | ||
36 | }); |
src/ui/vant-weapp/cell/index.json
0 → 100755
src/ui/vant-weapp/cell/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}" | ||
5 | hover-class="van-cell--hover hover-class" | ||
6 | hover-stay-time="70" | ||
7 | style="{{ customStyle }}" | ||
8 | bind:tap="onClick" | ||
9 | > | ||
10 | <van-icon | ||
11 | wx:if="{{ icon }}" | ||
12 | name="{{ icon }}" | ||
13 | class="van-cell__left-icon-wrap" | ||
14 | custom-class="van-cell__left-icon" | ||
15 | /> | ||
16 | <slot wx:else name="icon" /> | ||
17 | |||
18 | <view | ||
19 | style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}" | ||
20 | class="van-cell__title title-class" | ||
21 | > | ||
22 | <block wx:if="{{ title }}"> | ||
23 | {{ title }} | ||
24 | <view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view> | ||
25 | </block> | ||
26 | <slot wx:else name="title" /> | ||
27 | </view> | ||
28 | |||
29 | <view class="van-cell__value value-class"> | ||
30 | <block wx:if="{{ value || value === 0 }}">{{ value }}</block> | ||
31 | <slot wx:else /> | ||
32 | </view> | ||
33 | |||
34 | <van-icon | ||
35 | wx:if="{{ isLink }}" | ||
36 | name="{{ arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow' }}" | ||
37 | class="van-cell__right-icon-wrap right-icon-class" | ||
38 | custom-class="van-cell__right-icon" | ||
39 | /> | ||
40 | <slot wx:else name="right-icon" /> | ||
41 | |||
42 | <slot name="extra" /> | ||
43 | </view> |
src/ui/vant-weapp/cell/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;width:100%;padding:10px 15px;font-size:14px;line-height:24px;color:#333;background-color:#fff;box-sizing:border-box}.van-cell:after{content:" ";position:absolute;pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;top:auto;left:15px;right:0;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);border-bottom:1px solid #eee}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff}.van-cell__label{margin-top:3px;font-size:12px;line-height:18px;color:#999}.van-cell__value{overflow:hidden;color:#999;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;height:24px;font-size:16px;-webkit-align-items:center;align-items:center}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#999}.van-cell__left-icon{line-height:24px;vertical-align:middle}.van-cell__right-icon{line-height:24px}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;left:7px;font-size:14px;color:#f44;content:"*"}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-bottom:12px}.van-cell--large .van-cell__title{font-size:16px}.van-cell--large .van-cell__label{font-size:14px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/col/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/col/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | name: 'row', | ||
5 | type: 'ancestor' | ||
6 | }, | ||
7 | props: { | ||
8 | span: Number, | ||
9 | offset: Number | ||
10 | }, | ||
11 | data: { | ||
12 | style: '' | ||
13 | }, | ||
14 | methods: { | ||
15 | setGutter(gutter) { | ||
16 | const padding = `${gutter / 2}px`; | ||
17 | const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : ''; | ||
18 | if (style !== this.data.style) { | ||
19 | this.set({ style }); | ||
20 | } | ||
21 | } | ||
22 | } | ||
23 | }); |
src/ui/vant-weapp/col/index.json
0 → 100755
src/ui/vant-weapp/col/index.wxml
0 → 100755
src/ui/vant-weapp/col/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/collapse-item/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/collapse-item/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | const nextTick = () => new Promise(resolve => setTimeout(resolve, 20)); | ||
3 | VantComponent({ | ||
4 | classes: ['title-class', 'content-class'], | ||
5 | relation: { | ||
6 | name: 'collapse', | ||
7 | type: 'ancestor', | ||
8 | linked(parent) { | ||
9 | this.parent = parent; | ||
10 | } | ||
11 | }, | ||
12 | props: { | ||
13 | name: null, | ||
14 | title: null, | ||
15 | value: null, | ||
16 | icon: String, | ||
17 | label: String, | ||
18 | disabled: Boolean, | ||
19 | border: { | ||
20 | type: Boolean, | ||
21 | value: true | ||
22 | }, | ||
23 | isLink: { | ||
24 | type: Boolean, | ||
25 | value: true | ||
26 | } | ||
27 | }, | ||
28 | data: { | ||
29 | contentHeight: 0, | ||
30 | expanded: false, | ||
31 | transition: false | ||
32 | }, | ||
33 | mounted() { | ||
34 | this.updateExpanded() | ||
35 | .then(nextTick) | ||
36 | .then(() => { | ||
37 | this.set({ transition: true }); | ||
38 | }); | ||
39 | }, | ||
40 | methods: { | ||
41 | updateExpanded() { | ||
42 | if (!this.parent) { | ||
43 | return Promise.resolve(); | ||
44 | } | ||
45 | const { value, accordion } = this.parent.data; | ||
46 | const { children = [] } = this.parent; | ||
47 | const { name } = this.data; | ||
48 | const index = children.indexOf(this); | ||
49 | const currentName = name == null ? index : name; | ||
50 | const expanded = accordion | ||
51 | ? value === currentName | ||
52 | : (value || []).some((name) => name === currentName); | ||
53 | const stack = []; | ||
54 | if (expanded !== this.data.expanded) { | ||
55 | stack.push(this.updateStyle(expanded)); | ||
56 | } | ||
57 | stack.push(this.set({ index, expanded })); | ||
58 | return Promise.all(stack); | ||
59 | }, | ||
60 | updateStyle(expanded) { | ||
61 | return this.getRect('.van-collapse-item__content') | ||
62 | .then((rect) => rect.height) | ||
63 | .then((height) => { | ||
64 | if (expanded) { | ||
65 | return this.set({ | ||
66 | contentHeight: height ? `${height}px` : 'auto' | ||
67 | }); | ||
68 | } | ||
69 | else { | ||
70 | return this.set({ contentHeight: `${height}px` }) | ||
71 | .then(nextTick) | ||
72 | .then(() => this.set({ contentHeight: 0 })); | ||
73 | } | ||
74 | }); | ||
75 | }, | ||
76 | onClick() { | ||
77 | if (this.data.disabled) { | ||
78 | return; | ||
79 | } | ||
80 | const { name, expanded } = this.data; | ||
81 | const index = this.parent.children.indexOf(this); | ||
82 | const currentName = name == null ? index : name; | ||
83 | this.parent.switch(currentName, !expanded); | ||
84 | }, | ||
85 | onTransitionEnd() { | ||
86 | if (this.data.expanded) { | ||
87 | this.set({ | ||
88 | contentHeight: 'auto' | ||
89 | }); | ||
90 | } | ||
91 | } | ||
92 | } | ||
93 | }); |
src/ui/vant-weapp/collapse-item/index.json
0 → 100755
src/ui/vant-weapp/collapse-item/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}"> | ||
4 | <van-cell | ||
5 | title="{{ title }}" | ||
6 | title-class="title-class" | ||
7 | icon="{{ icon }}" | ||
8 | is-link="{{ isLink }}" | ||
9 | value="{{ value }}" | ||
10 | label="{{ label }}" | ||
11 | border="{{ border && expanded }}" | ||
12 | class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}" | ||
13 | right-icon-class="van-cell__right-icon" | ||
14 | custom-class="van-cell" | ||
15 | hover-class="van-cell--hover" | ||
16 | bind:click="onClick" | ||
17 | > | ||
18 | <slot | ||
19 | name="title" | ||
20 | slot="title" | ||
21 | /> | ||
22 | <slot | ||
23 | name="icon" | ||
24 | slot="icon" | ||
25 | /> | ||
26 | <slot name="value" /> | ||
27 | <slot | ||
28 | name="right-icon" | ||
29 | slot="right-icon" | ||
30 | /> | ||
31 | </van-cell> | ||
32 | <view | ||
33 | class="{{ utils.bem('collapse-item__wrapper', { transition }) }}" | ||
34 | style="height: {{ contentHeight }};" | ||
35 | bind:transitionend="onTransitionEnd" | ||
36 | > | ||
37 | <view | ||
38 | class="van-collapse-item__content content-class" | ||
39 | > | ||
40 | <slot /> | ||
41 | </view> | ||
42 | </view> | ||
43 | </view> |
src/ui/vant-weapp/collapse-item/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__wrapper--transition{transition:height .3s ease-in-out}.van-collapse-item__content{padding:15px;font-size:13px;line-height:1.5;color:#999;background-color:#fff} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/collapse/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/collapse/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | name: 'collapse-item', | ||
5 | type: 'descendant', | ||
6 | linked(child) { | ||
7 | this.children.push(child); | ||
8 | } | ||
9 | }, | ||
10 | props: { | ||
11 | value: { | ||
12 | type: null, | ||
13 | observer: 'updateExpanded' | ||
14 | }, | ||
15 | accordion: { | ||
16 | type: Boolean, | ||
17 | observer: 'updateExpanded' | ||
18 | }, | ||
19 | border: { | ||
20 | type: Boolean, | ||
21 | value: true | ||
22 | } | ||
23 | }, | ||
24 | beforeCreate() { | ||
25 | this.children = []; | ||
26 | }, | ||
27 | methods: { | ||
28 | updateExpanded() { | ||
29 | this.children.forEach((child) => { | ||
30 | child.updateExpanded(); | ||
31 | }); | ||
32 | }, | ||
33 | switch(name, expanded) { | ||
34 | const { accordion, value } = this.data; | ||
35 | if (!accordion) { | ||
36 | name = expanded | ||
37 | ? (value || []).concat(name) | ||
38 | : (value || []).filter((activeName) => activeName !== name); | ||
39 | } | ||
40 | else { | ||
41 | name = expanded ? name : ''; | ||
42 | } | ||
43 | this.$emit('change', name); | ||
44 | this.$emit('input', name); | ||
45 | } | ||
46 | } | ||
47 | }); |
src/ui/vant-weapp/collapse/index.json
0 → 100755
src/ui/vant-weapp/collapse/index.wxml
0 → 100755
src/ui/vant-weapp/collapse/index.wxss
0 → 100755
1 | @import '../common/index.wxss'; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/datetime-picker/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/datetime-picker/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { isDef } from '../common/utils'; | ||
3 | const currentYear = new Date().getFullYear(); | ||
4 | function isValidDate(date) { | ||
5 | return isDef(date) && !isNaN(new Date(date).getTime()); | ||
6 | } | ||
7 | function range(num, min, max) { | ||
8 | return Math.min(Math.max(num, min), max); | ||
9 | } | ||
10 | function padZero(val) { | ||
11 | return `00${val}`.slice(-2); | ||
12 | } | ||
13 | function times(n, iteratee) { | ||
14 | let index = -1; | ||
15 | const result = Array(n); | ||
16 | while (++index < n) { | ||
17 | result[index] = iteratee(index); | ||
18 | } | ||
19 | return result; | ||
20 | } | ||
21 | function getTrueValue(formattedValue) { | ||
22 | if (!formattedValue) | ||
23 | return; | ||
24 | while (isNaN(parseInt(formattedValue, 10))) { | ||
25 | formattedValue = formattedValue.slice(1); | ||
26 | } | ||
27 | return parseInt(formattedValue, 10); | ||
28 | } | ||
29 | function getMonthEndDay(year, month) { | ||
30 | return 32 - new Date(year, month - 1, 32).getDate(); | ||
31 | } | ||
32 | VantComponent({ | ||
33 | props: { | ||
34 | value: null, | ||
35 | title: String, | ||
36 | loading: Boolean, | ||
37 | itemHeight: { | ||
38 | type: Number, | ||
39 | value: 44 | ||
40 | }, | ||
41 | visibleItemCount: { | ||
42 | type: Number, | ||
43 | value: 5 | ||
44 | }, | ||
45 | confirmButtonText: { | ||
46 | type: String, | ||
47 | value: '确认' | ||
48 | }, | ||
49 | cancelButtonText: { | ||
50 | type: String, | ||
51 | value: '取消' | ||
52 | }, | ||
53 | type: { | ||
54 | type: String, | ||
55 | value: 'datetime' | ||
56 | }, | ||
57 | showToolbar: { | ||
58 | type: Boolean, | ||
59 | value: true | ||
60 | }, | ||
61 | minDate: { | ||
62 | type: Number, | ||
63 | value: new Date(currentYear - 10, 0, 1).getTime() | ||
64 | }, | ||
65 | maxDate: { | ||
66 | type: Number, | ||
67 | value: new Date(currentYear + 10, 11, 31).getTime() | ||
68 | }, | ||
69 | minHour: { | ||
70 | type: Number, | ||
71 | value: 0 | ||
72 | }, | ||
73 | maxHour: { | ||
74 | type: Number, | ||
75 | value: 23 | ||
76 | }, | ||
77 | minMinute: { | ||
78 | type: Number, | ||
79 | value: 0 | ||
80 | }, | ||
81 | maxMinute: { | ||
82 | type: Number, | ||
83 | value: 59 | ||
84 | } | ||
85 | }, | ||
86 | data: { | ||
87 | innerValue: Date.now(), | ||
88 | columns: [] | ||
89 | }, | ||
90 | watch: { | ||
91 | value(val) { | ||
92 | const { data } = this; | ||
93 | val = this.correctValue(val); | ||
94 | const isEqual = val === data.innerValue; | ||
95 | if (!isEqual) { | ||
96 | this.updateColumnValue(val).then(() => { | ||
97 | this.$emit('input', val); | ||
98 | }); | ||
99 | } | ||
100 | }, | ||
101 | type: 'updateColumns', | ||
102 | minHour: 'updateColumns', | ||
103 | maxHour: 'updateColumns', | ||
104 | minMinute: 'updateColumns', | ||
105 | maxMinute: 'updateColumns' | ||
106 | }, | ||
107 | methods: { | ||
108 | getPicker() { | ||
109 | if (this.picker == null) { | ||
110 | const picker = this.picker = this.selectComponent('.van-datetime-picker'); | ||
111 | const { setColumnValues } = picker; | ||
112 | picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]); | ||
113 | } | ||
114 | return this.picker; | ||
115 | }, | ||
116 | updateColumns() { | ||
117 | const results = this.getRanges().map(({ type, range }, index) => { | ||
118 | const values = times(range[1] - range[0] + 1, index => { | ||
119 | let value = range[0] + index; | ||
120 | value = type === 'year' ? `${value}` : padZero(value); | ||
121 | return value; | ||
122 | }); | ||
123 | return { values }; | ||
124 | }); | ||
125 | return this.set({ columns: results }); | ||
126 | }, | ||
127 | getRanges() { | ||
128 | const { data } = this; | ||
129 | if (data.type === 'time') { | ||
130 | return [ | ||
131 | { | ||
132 | type: 'hour', | ||
133 | range: [data.minHour, data.maxHour] | ||
134 | }, | ||
135 | { | ||
136 | type: 'minute', | ||
137 | range: [data.minMinute, data.maxMinute] | ||
138 | } | ||
139 | ]; | ||
140 | } | ||
141 | const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', data.innerValue); | ||
142 | const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', data.innerValue); | ||
143 | const result = [ | ||
144 | { | ||
145 | type: 'year', | ||
146 | range: [minYear, maxYear] | ||
147 | }, | ||
148 | { | ||
149 | type: 'month', | ||
150 | range: [minMonth, maxMonth] | ||
151 | }, | ||
152 | { | ||
153 | type: 'day', | ||
154 | range: [minDate, maxDate] | ||
155 | }, | ||
156 | { | ||
157 | type: 'hour', | ||
158 | range: [minHour, maxHour] | ||
159 | }, | ||
160 | { | ||
161 | type: 'minute', | ||
162 | range: [minMinute, maxMinute] | ||
163 | } | ||
164 | ]; | ||
165 | if (data.type === 'date') | ||
166 | result.splice(3, 2); | ||
167 | if (data.type === 'year-month') | ||
168 | result.splice(2, 3); | ||
169 | return result; | ||
170 | }, | ||
171 | correctValue(value) { | ||
172 | const { data } = this; | ||
173 | // validate value | ||
174 | const isDateType = data.type !== 'time'; | ||
175 | if (isDateType && !isValidDate(value)) { | ||
176 | value = data.minDate; | ||
177 | } | ||
178 | else if (!isDateType && !value) { | ||
179 | const { minHour } = data; | ||
180 | value = `${padZero(minHour)}:00`; | ||
181 | } | ||
182 | // time type | ||
183 | if (!isDateType) { | ||
184 | let [hour, minute] = value.split(':'); | ||
185 | hour = padZero(range(hour, data.minHour, data.maxHour)); | ||
186 | minute = padZero(range(minute, data.minMinute, data.maxMinute)); | ||
187 | return `${hour}:${minute}`; | ||
188 | } | ||
189 | // date type | ||
190 | value = Math.max(value, data.minDate); | ||
191 | value = Math.min(value, data.maxDate); | ||
192 | return value; | ||
193 | }, | ||
194 | getBoundary(type, innerValue) { | ||
195 | const value = new Date(innerValue); | ||
196 | const boundary = new Date(this.data[`${type}Date`]); | ||
197 | const year = boundary.getFullYear(); | ||
198 | let month = 1; | ||
199 | let date = 1; | ||
200 | let hour = 0; | ||
201 | let minute = 0; | ||
202 | if (type === 'max') { | ||
203 | month = 12; | ||
204 | date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1); | ||
205 | hour = 23; | ||
206 | minute = 59; | ||
207 | } | ||
208 | if (value.getFullYear() === year) { | ||
209 | month = boundary.getMonth() + 1; | ||
210 | if (value.getMonth() + 1 === month) { | ||
211 | date = boundary.getDate(); | ||
212 | if (value.getDate() === date) { | ||
213 | hour = boundary.getHours(); | ||
214 | if (value.getHours() === hour) { | ||
215 | minute = boundary.getMinutes(); | ||
216 | } | ||
217 | } | ||
218 | } | ||
219 | } | ||
220 | return { | ||
221 | [`${type}Year`]: year, | ||
222 | [`${type}Month`]: month, | ||
223 | [`${type}Date`]: date, | ||
224 | [`${type}Hour`]: hour, | ||
225 | [`${type}Minute`]: minute | ||
226 | }; | ||
227 | }, | ||
228 | onCancel() { | ||
229 | this.$emit('cancel'); | ||
230 | }, | ||
231 | onConfirm() { | ||
232 | this.$emit('confirm', this.data.innerValue); | ||
233 | }, | ||
234 | onChange() { | ||
235 | const { data } = this; | ||
236 | let value; | ||
237 | const picker = this.getPicker(); | ||
238 | if (data.type === 'time') { | ||
239 | const indexes = picker.getIndexes(); | ||
240 | value = `${indexes[0] + data.minHour}:${indexes[1] + data.minMinute}`; | ||
241 | } | ||
242 | else { | ||
243 | const values = picker.getValues(); | ||
244 | const year = getTrueValue(values[0]); | ||
245 | const month = getTrueValue(values[1]); | ||
246 | const maxDate = getMonthEndDay(year, month); | ||
247 | let date = getTrueValue(values[2]); | ||
248 | if (data.type === 'year-month') { | ||
249 | date = 1; | ||
250 | } | ||
251 | date = date > maxDate ? maxDate : date; | ||
252 | let hour = 0; | ||
253 | let minute = 0; | ||
254 | if (data.type === 'datetime') { | ||
255 | hour = getTrueValue(values[3]); | ||
256 | minute = getTrueValue(values[4]); | ||
257 | } | ||
258 | value = new Date(year, month - 1, date, hour, minute); | ||
259 | } | ||
260 | value = this.correctValue(value); | ||
261 | this.updateColumnValue(value).then(() => { | ||
262 | this.$emit('input', value); | ||
263 | this.$emit('change', picker); | ||
264 | }); | ||
265 | }, | ||
266 | updateColumnValue(value) { | ||
267 | let values = []; | ||
268 | const { data } = this; | ||
269 | const picker = this.getPicker(); | ||
270 | if (data.type === 'time') { | ||
271 | const pair = value.split(':'); | ||
272 | values = [pair[0], pair[1]]; | ||
273 | } | ||
274 | else { | ||
275 | const date = new Date(value); | ||
276 | values = [`${date.getFullYear()}`, padZero(date.getMonth() + 1)]; | ||
277 | if (data.type === 'date') { | ||
278 | values.push(padZero(date.getDate())); | ||
279 | } | ||
280 | if (data.type === 'datetime') { | ||
281 | values.push(padZero(date.getDate()), padZero(date.getHours()), padZero(date.getMinutes())); | ||
282 | } | ||
283 | } | ||
284 | return this.set({ innerValue: value }) | ||
285 | .then(() => this.updateColumns()) | ||
286 | .then(() => picker.setValues(values)); | ||
287 | } | ||
288 | }, | ||
289 | created() { | ||
290 | const innerValue = this.correctValue(this.data.value); | ||
291 | this.updateColumnValue(innerValue).then(() => { | ||
292 | this.$emit('input', innerValue); | ||
293 | }); | ||
294 | } | ||
295 | }); |
src/ui/vant-weapp/datetime-picker/index.json
0 → 100755
src/ui/vant-weapp/datetime-picker/index.wxml
0 → 100755
1 | <van-picker | ||
2 | class="van-datetime-picker" | ||
3 | title="{{ title }}" | ||
4 | columns="{{ columns }}" | ||
5 | item-height="{{ itemHeight }}" | ||
6 | show-toolbar="{{ showToolbar }}" | ||
7 | visible-item-count="{{ visibleItemCount }}" | ||
8 | confirm-button-text="{{ confirmButtonText }}" | ||
9 | cancel-button-text="{{ cancelButtonText }}" | ||
10 | bind:change="onChange" | ||
11 | bind:confirm="onConfirm" | ||
12 | bind:cancel="onCancel" | ||
13 | /> |
src/ui/vant-weapp/datetime-picker/index.wxss
0 → 100755
1 | @import '../common/index.wxss'; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/dialog/dialog.d.ts
0 → 100755
1 | declare type DialogAction = 'confirm' | 'cancel'; | ||
2 | declare type DialogOptions = { | ||
3 | lang?: string; | ||
4 | show?: boolean; | ||
5 | title?: string; | ||
6 | zIndex?: number; | ||
7 | context?: any; | ||
8 | message?: string; | ||
9 | overlay?: boolean; | ||
10 | selector?: string; | ||
11 | ariaLabel?: string; | ||
12 | transition?: string; | ||
13 | asyncClose?: boolean; | ||
14 | businessId?: number; | ||
15 | sessionFrom?: string; | ||
16 | appParameter?: string; | ||
17 | messageAlign?: string; | ||
18 | sendMessageImg?: string; | ||
19 | showMessageCard?: boolean; | ||
20 | sendMessagePath?: string; | ||
21 | sendMessageTitle?: string; | ||
22 | confirmButtonText?: string; | ||
23 | cancelButtonText?: string; | ||
24 | showConfirmButton?: boolean; | ||
25 | showCancelButton?: boolean; | ||
26 | closeOnClickOverlay?: boolean; | ||
27 | confirmButtonOpenType?: string; | ||
28 | }; | ||
29 | interface Dialog { | ||
30 | (options: DialogOptions): Promise<DialogAction>; | ||
31 | alert?: (options: DialogOptions) => Promise<DialogAction>; | ||
32 | confirm?: (options: DialogOptions) => Promise<DialogAction>; | ||
33 | close?: () => void; | ||
34 | stopLoading?: () => void; | ||
35 | install?: () => void; | ||
36 | setDefaultOptions?: (options: DialogOptions) => void; | ||
37 | resetDefaultOptions?: () => void; | ||
38 | defaultOptions?: DialogOptions; | ||
39 | currentOptions?: DialogOptions; | ||
40 | } | ||
41 | declare const Dialog: Dialog; | ||
42 | export default Dialog; |
src/ui/vant-weapp/dialog/dialog.js
0 → 100755
1 | let queue = []; | ||
2 | function getContext() { | ||
3 | const pages = getCurrentPages(); | ||
4 | return pages[pages.length - 1]; | ||
5 | } | ||
6 | const Dialog = options => { | ||
7 | options = Object.assign({}, Dialog.currentOptions, options); | ||
8 | return new Promise((resolve, reject) => { | ||
9 | const context = options.context || getContext(); | ||
10 | const dialog = context.selectComponent(options.selector); | ||
11 | delete options.selector; | ||
12 | if (dialog) { | ||
13 | dialog.set(Object.assign({ onCancel: reject, onConfirm: resolve }, options)); | ||
14 | queue.push(dialog); | ||
15 | } | ||
16 | else { | ||
17 | console.warn('未找到 van-dialog 节点,请确认 selector 及 context 是否正确'); | ||
18 | } | ||
19 | }); | ||
20 | }; | ||
21 | Dialog.defaultOptions = { | ||
22 | show: true, | ||
23 | title: '', | ||
24 | message: '', | ||
25 | zIndex: 100, | ||
26 | overlay: true, | ||
27 | asyncClose: false, | ||
28 | messageAlign: '', | ||
29 | transition: 'scale', | ||
30 | selector: '#van-dialog', | ||
31 | confirmButtonText: '确认', | ||
32 | cancelButtonText: '取消', | ||
33 | showConfirmButton: true, | ||
34 | showCancelButton: false, | ||
35 | closeOnClickOverlay: false, | ||
36 | confirmButtonOpenType: '' | ||
37 | }; | ||
38 | Dialog.alert = Dialog; | ||
39 | Dialog.confirm = options => Dialog(Object.assign({ showCancelButton: true }, options)); | ||
40 | Dialog.close = () => { | ||
41 | queue.forEach(dialog => { | ||
42 | dialog.close(); | ||
43 | }); | ||
44 | queue = []; | ||
45 | }; | ||
46 | Dialog.stopLoading = () => { | ||
47 | queue.forEach(dialog => { | ||
48 | dialog.stopLoading(); | ||
49 | }); | ||
50 | }; | ||
51 | Dialog.setDefaultOptions = options => { | ||
52 | Object.assign(Dialog.currentOptions, options); | ||
53 | }; | ||
54 | Dialog.resetDefaultOptions = () => { | ||
55 | Dialog.currentOptions = Object.assign({}, Dialog.defaultOptions); | ||
56 | }; | ||
57 | Dialog.resetDefaultOptions(); | ||
58 | export default Dialog; |
src/ui/vant-weapp/dialog/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/dialog/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { button } from '../mixins/button'; | ||
3 | import { openType } from '../mixins/open-type'; | ||
4 | VantComponent({ | ||
5 | mixins: [button, openType], | ||
6 | props: { | ||
7 | show: Boolean, | ||
8 | title: String, | ||
9 | message: String, | ||
10 | useSlot: Boolean, | ||
11 | asyncClose: Boolean, | ||
12 | messageAlign: String, | ||
13 | showCancelButton: Boolean, | ||
14 | closeOnClickOverlay: Boolean, | ||
15 | confirmButtonOpenType: String, | ||
16 | zIndex: { | ||
17 | type: Number, | ||
18 | value: 2000 | ||
19 | }, | ||
20 | confirmButtonText: { | ||
21 | type: String, | ||
22 | value: '确认' | ||
23 | }, | ||
24 | cancelButtonText: { | ||
25 | type: String, | ||
26 | value: '取消' | ||
27 | }, | ||
28 | showConfirmButton: { | ||
29 | type: Boolean, | ||
30 | value: true | ||
31 | }, | ||
32 | overlay: { | ||
33 | type: Boolean, | ||
34 | value: true | ||
35 | }, | ||
36 | transition: { | ||
37 | type: String, | ||
38 | value: 'scale' | ||
39 | } | ||
40 | }, | ||
41 | data: { | ||
42 | loading: { | ||
43 | confirm: false, | ||
44 | cancel: false | ||
45 | } | ||
46 | }, | ||
47 | watch: { | ||
48 | show(show) { | ||
49 | !show && this.stopLoading(); | ||
50 | } | ||
51 | }, | ||
52 | methods: { | ||
53 | onConfirm() { | ||
54 | this.handleAction('confirm'); | ||
55 | }, | ||
56 | onCancel() { | ||
57 | this.handleAction('cancel'); | ||
58 | }, | ||
59 | onClickOverlay() { | ||
60 | this.onClose('overlay'); | ||
61 | }, | ||
62 | handleAction(action) { | ||
63 | if (this.data.asyncClose) { | ||
64 | this.set({ | ||
65 | [`loading.${action}`]: true | ||
66 | }); | ||
67 | } | ||
68 | this.onClose(action); | ||
69 | }, | ||
70 | close() { | ||
71 | this.set({ | ||
72 | show: false | ||
73 | }); | ||
74 | }, | ||
75 | stopLoading() { | ||
76 | this.set({ | ||
77 | loading: { | ||
78 | confirm: false, | ||
79 | cancel: false | ||
80 | } | ||
81 | }); | ||
82 | }, | ||
83 | onClose(action) { | ||
84 | if (!this.data.asyncClose) { | ||
85 | this.close(); | ||
86 | } | ||
87 | this.$emit('close', action); | ||
88 | //把 dialog 实例传递出去,可以通过 stopLoading() 在外部关闭按钮的 loading | ||
89 | this.$emit(action, { dialog: this }); | ||
90 | const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel']; | ||
91 | if (callback) { | ||
92 | callback(this); | ||
93 | } | ||
94 | } | ||
95 | } | ||
96 | }); |
src/ui/vant-weapp/dialog/index.json
0 → 100755
src/ui/vant-weapp/dialog/index.wxml
0 → 100755
1 | <van-popup | ||
2 | show="{{ show }}" | ||
3 | z-index="{{ zIndex }}" | ||
4 | overlay="{{ overlay }}" | ||
5 | custom-class="van-dialog" | ||
6 | transition="{{ transition }}" | ||
7 | close-on-click-overlay="{{ closeOnClickOverlay }}" | ||
8 | bind:close="onClickOverlay" | ||
9 | > | ||
10 | <view | ||
11 | wx:if="{{ title }}" | ||
12 | class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}" | ||
13 | > | ||
14 | {{ title }} | ||
15 | </view> | ||
16 | |||
17 | <slot wx:if="{{ useSlot }}" /> | ||
18 | <view | ||
19 | wx:elif="{{ message }}" | ||
20 | class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}" | ||
21 | > | ||
22 | <text>{{ message }}</text> | ||
23 | </view> | ||
24 | |||
25 | <view class="van-hairline--top van-dialog__footer"> | ||
26 | <van-button | ||
27 | wx:if="{{ showCancelButton }}" | ||
28 | size="large" | ||
29 | loading="{{ loading.cancel }}" | ||
30 | class="van-dialog__button van-hairline--right" | ||
31 | custom-class="van-dialog__cancel" | ||
32 | bind:click="onCancel" | ||
33 | > | ||
34 | {{ cancelButtonText }} | ||
35 | </van-button> | ||
36 | <van-button | ||
37 | wx:if="{{ showConfirmButton }}" | ||
38 | size="large" | ||
39 | class="van-dialog__button" | ||
40 | loading="{{ loading.confirm }}" | ||
41 | custom-class="van-dialog__confirm" | ||
42 | |||
43 | open-type="{{ confirmButtonOpenType }}" | ||
44 | lang="{{ lang }}" | ||
45 | business-id="{{ businessId }}" | ||
46 | session-from="{{ sessionFrom }}" | ||
47 | send-message-title="{{ sendMessageTitle }}" | ||
48 | send-message-path="{{ sendMessagePath }}" | ||
49 | send-message-img="{{ sendMessageImg }}" | ||
50 | show-message-card="{{ showMessageCard }}" | ||
51 | app-parameter="{{ appParameter }}" | ||
52 | |||
53 | bind:click="onConfirm" | ||
54 | bindgetuserinfo="bindGetUserInfo" | ||
55 | bindcontact="bindContact" | ||
56 | bindgetphonenumber="bindGetPhoneNumber" | ||
57 | binderror="bindError" | ||
58 | bindlaunchapp="bindLaunchApp" | ||
59 | bindopensetting="bindOpenSetting" | ||
60 | > | ||
61 | {{ confirmButtonText }} | ||
62 | </van-button> | ||
63 | </view> | ||
64 | </van-popup> |
src/ui/vant-weapp/dialog/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-dialog{width:85%;overflow:hidden;font-size:16px;background-color:#fff;border-radius:4px}.van-dialog__header{padding-top:25px;font-weight:500;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{max-height:60vh;padding:25px;overflow-y:auto;font-size:14px;line-height:1.5;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog__confirm{color:#1989fa!important}.van-dialog-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/field/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/field/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | classes: ['input-class'], | ||
5 | props: { | ||
6 | size: String, | ||
7 | icon: String, | ||
8 | label: String, | ||
9 | error: Boolean, | ||
10 | fixed: Boolean, | ||
11 | focus: Boolean, | ||
12 | center: Boolean, | ||
13 | isLink: Boolean, | ||
14 | leftIcon: String, | ||
15 | disabled: Boolean, | ||
16 | autosize: Boolean, | ||
17 | readonly: Boolean, | ||
18 | required: Boolean, | ||
19 | iconClass: String, | ||
20 | clearable: Boolean, | ||
21 | inputAlign: String, | ||
22 | errorMessageAlign: String, | ||
23 | customClass: String, | ||
24 | confirmType: String, | ||
25 | confirmHold: Boolean, | ||
26 | errorMessage: String, | ||
27 | placeholder: String, | ||
28 | customStyle: String, | ||
29 | useIconSlot: Boolean, | ||
30 | useButtonSlot: Boolean, | ||
31 | showConfirmBar: { | ||
32 | type: Boolean, | ||
33 | value: true | ||
34 | }, | ||
35 | placeholderStyle: String, | ||
36 | adjustPosition: { | ||
37 | type: Boolean, | ||
38 | value: true | ||
39 | }, | ||
40 | cursorSpacing: { | ||
41 | type: Number, | ||
42 | value: 50 | ||
43 | }, | ||
44 | maxlength: { | ||
45 | type: Number, | ||
46 | value: -1 | ||
47 | }, | ||
48 | type: { | ||
49 | type: String, | ||
50 | value: 'text' | ||
51 | }, | ||
52 | border: { | ||
53 | type: Boolean, | ||
54 | value: true | ||
55 | }, | ||
56 | titleWidth: { | ||
57 | type: String, | ||
58 | value: '90px' | ||
59 | } | ||
60 | }, | ||
61 | data: { | ||
62 | showClear: false | ||
63 | }, | ||
64 | beforeCreate() { | ||
65 | this.focused = false; | ||
66 | }, | ||
67 | methods: { | ||
68 | onInput(event) { | ||
69 | const { value = '' } = event.detail || {}; | ||
70 | this.set({ | ||
71 | value, | ||
72 | showClear: this.getShowClear(value) | ||
73 | }, () => { | ||
74 | this.emitChange(value); | ||
75 | }); | ||
76 | }, | ||
77 | onFocus(event) { | ||
78 | const { value = '', height = 0 } = event.detail || {}; | ||
79 | this.$emit('focus', { value, height }); | ||
80 | this.focused = true; | ||
81 | this.blurFromClear = false; | ||
82 | this.set({ | ||
83 | showClear: this.getShowClear() | ||
84 | }); | ||
85 | }, | ||
86 | onBlur(event) { | ||
87 | const { value = '', cursor = 0 } = event.detail || {}; | ||
88 | this.$emit('blur', { value, cursor }); | ||
89 | this.focused = false; | ||
90 | const showClear = this.getShowClear(); | ||
91 | if (this.data.value === value) { | ||
92 | this.set({ | ||
93 | showClear | ||
94 | }); | ||
95 | } | ||
96 | else if (!this.blurFromClear) { | ||
97 | // fix: the handwritten keyboard does not trigger input change | ||
98 | this.set({ | ||
99 | value, | ||
100 | showClear | ||
101 | }, () => { | ||
102 | this.emitChange(value); | ||
103 | }); | ||
104 | } | ||
105 | }, | ||
106 | onClickIcon() { | ||
107 | this.$emit('click-icon'); | ||
108 | }, | ||
109 | getShowClear(value) { | ||
110 | value = value === undefined ? this.data.value : value; | ||
111 | return (this.data.clearable && this.focused && value && !this.data.readonly); | ||
112 | }, | ||
113 | onClear() { | ||
114 | this.blurFromClear = true; | ||
115 | this.set({ | ||
116 | value: '', | ||
117 | showClear: this.getShowClear('') | ||
118 | }, () => { | ||
119 | this.emitChange(''); | ||
120 | this.$emit('clear', ''); | ||
121 | }); | ||
122 | }, | ||
123 | onConfirm() { | ||
124 | this.$emit('confirm', this.data.value); | ||
125 | }, | ||
126 | emitChange(value) { | ||
127 | this.$emit('input', value); | ||
128 | this.$emit('change', value); | ||
129 | } | ||
130 | } | ||
131 | }); |
src/ui/vant-weapp/field/index.json
0 → 100755
src/ui/vant-weapp/field/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <van-cell | ||
4 | icon="{{ leftIcon }}" | ||
5 | title="{{ label }}" | ||
6 | center="{{ center }}" | ||
7 | border="{{ border }}" | ||
8 | is-link="{{ isLink }}" | ||
9 | required="{{ required }}" | ||
10 | custom-style="{{ customStyle }}" | ||
11 | title-width="{{ titleWidth }}" | ||
12 | custom-class="van-field" | ||
13 | size="{{ size }}" | ||
14 | > | ||
15 | <slot name="left-icon" slot="icon" /> | ||
16 | <slot name="label" slot="title" /> | ||
17 | <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}"> | ||
18 | <textarea | ||
19 | wx:if="{{ type === 'textarea' }}" | ||
20 | class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}" | ||
21 | fixed="{{ fixed }}" | ||
22 | focus="{{ focus }}" | ||
23 | value="{{ value }}" | ||
24 | disabled="{{ disabled || readonly }}" | ||
25 | maxlength="{{ maxlength }}" | ||
26 | auto-height="{{ autosize }}" | ||
27 | placeholder="{{ placeholder }}" | ||
28 | placeholder-style="{{ placeholderStyle }}" | ||
29 | placeholder-class="{{ error ? 'van-field__input--error' : 'van-field__placeholder' }}" | ||
30 | cursor-spacing="{{ cursorSpacing }}" | ||
31 | adjust-position="{{ adjustPosition }}" | ||
32 | show-confirm-bar="{{ showConfirmBar }}" | ||
33 | bindinput="onInput" | ||
34 | bind:blur="onBlur" | ||
35 | bind:focus="onFocus" | ||
36 | bind:confirm="onConfirm" | ||
37 | /> | ||
38 | <input | ||
39 | wx:else | ||
40 | class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}" | ||
41 | type="{{ type }}" | ||
42 | focus="{{ focus }}" | ||
43 | value="{{ value }}" | ||
44 | disabled="{{ disabled || readonly }}" | ||
45 | maxlength="{{ maxlength }}" | ||
46 | placeholder="{{ placeholder }}" | ||
47 | placeholder-style="{{ placeholderStyle }}" | ||
48 | placeholder-class="{{ error ? 'van-field__input--error' : 'van-field__placeholder' }}" | ||
49 | confirm-type="{{ confirmType }}" | ||
50 | confirm-hold="{{ confirmHold }}" | ||
51 | cursor-spacing="{{ cursorSpacing }}" | ||
52 | adjust-position="{{ adjustPosition }}" | ||
53 | bindinput="onInput" | ||
54 | bind:blur="onBlur" | ||
55 | bind:focus="onFocus" | ||
56 | bind:confirm="onConfirm" | ||
57 | /> | ||
58 | <van-icon | ||
59 | wx:if="{{ showClear }}" | ||
60 | size="16px" | ||
61 | name="clear" | ||
62 | class="van-field__clear-root" | ||
63 | custom-class="van-field__clear" | ||
64 | bind:touchstart="onClear" | ||
65 | /> | ||
66 | <view class="van-field__icon-container" wx:if="{{ icon || useIconSlot }}" bind:tap="onClickIcon"> | ||
67 | <van-icon | ||
68 | wx:if="{{ icon }}" | ||
69 | size="16px" | ||
70 | name="{{ icon }}" | ||
71 | custom-class="van-field__icon {{ iconClass }}" | ||
72 | /> | ||
73 | <slot wx:else name="icon" /> | ||
74 | </view> | ||
75 | <view wx:if="{{ useButtonSlot }}" class="van-field__button"> | ||
76 | <slot name="button" /> | ||
77 | </view> | ||
78 | </view> | ||
79 | <view wx:if="{{ errorMessage }}" class="van-field__error-message {{ utils.bem('field__error', [errorMessageAlign, { disabled, error }]) }}"> | ||
80 | {{ errorMessage }} | ||
81 | </view> | ||
82 | </van-cell> |
src/ui/vant-weapp/field/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__input{display:block;width:100%;height:24px;min-height:24px;padding:0;margin:0;line-height:inherit;color:#333;text-align:left;background-color:initial;border:0;box-sizing:border-box;resize:none}.van-field__input--disabled{color:#999;background-color:initial;opacity:1}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__input--error{color:#f44}.van-field__placeholder{color:#999}.van-field__clear-root{display:-webkit-flex;display:flex;height:24px;-webkit-align-items:center;align-items:center}.van-field__button,.van-field__clear,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;margin-right:-10px;line-height:inherit;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.van-field__icon{display:block!important}.van-field__button{padding-left:10px}.van-field__error-message{font-size:12px;color:#f44;text-align:left}.van-field__error--center{text-align:center}.van-field__error--right{text-align:right} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | export {}; |
1 | import { VantComponent } from '../common/component'; | ||
2 | import { link } from '../mixins/link'; | ||
3 | import { button } from '../mixins/button'; | ||
4 | import { openType } from '../mixins/open-type'; | ||
5 | VantComponent({ | ||
6 | mixins: [link, button, openType], | ||
7 | props: { | ||
8 | text: String, | ||
9 | loading: Boolean, | ||
10 | disabled: Boolean, | ||
11 | type: { | ||
12 | type: String, | ||
13 | value: 'danger' | ||
14 | } | ||
15 | }, | ||
16 | methods: { | ||
17 | onClick(event) { | ||
18 | this.$emit('click', event.detail); | ||
19 | this.jumpLink(); | ||
20 | } | ||
21 | } | ||
22 | }); |
1 | <van-button | ||
2 | square | ||
3 | id="{{ id }}" | ||
4 | size="large" | ||
5 | lang="{{ lang }}" | ||
6 | type="{{ type }}" | ||
7 | loading="{{ loading }}" | ||
8 | disabled="{{ disabled }}" | ||
9 | open-type="{{ openType }}" | ||
10 | custom-class="custom-class" | ||
11 | business-id="{{ businessId }}" | ||
12 | session-from="{{ sessionFrom }}" | ||
13 | app-parameter="{{ appParameter }}" | ||
14 | send-message-img="{{ sendMessageImg }}" | ||
15 | send-message-path="{{ sendMessagePath }}" | ||
16 | show-message-card="{{ showMessageCard }}" | ||
17 | send-message-title="{{ sendMessageTitle }}" | ||
18 | bind:click="onClick" | ||
19 | binderror="bindError" | ||
20 | bindcontact="bindContact" | ||
21 | bindopensetting="bindOpenSetting" | ||
22 | bindgetuserinfo="bindGetUserInfo" | ||
23 | bindgetphonenumber="bindGetPhoneNumber" | ||
24 | bindlaunchapp="bindLaunchApp" | ||
25 | > | ||
26 | {{ text }} | ||
27 | </van-button> |
1 | @import '../common/index.wxss';:host{-webkit-flex:1;flex:1} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
1 | export {}; |
src/ui/vant-weapp/goods-action-icon/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { link } from '../mixins/link'; | ||
3 | import { button } from '../mixins/button'; | ||
4 | import { openType } from '../mixins/open-type'; | ||
5 | VantComponent({ | ||
6 | classes: ['icon-class', 'text-class'], | ||
7 | mixins: [link, button, openType], | ||
8 | props: { | ||
9 | text: String, | ||
10 | info: String, | ||
11 | icon: String, | ||
12 | disabled: Boolean, | ||
13 | loading: Boolean | ||
14 | }, | ||
15 | methods: { | ||
16 | onClick(event) { | ||
17 | this.$emit('click', event.detail); | ||
18 | this.jumpLink(); | ||
19 | } | ||
20 | } | ||
21 | }); |
1 | <van-button | ||
2 | square | ||
3 | id="{{ id }}" | ||
4 | size="large" | ||
5 | lang="{{ lang }}" | ||
6 | loading="{{ loading }}" | ||
7 | disabled="{{ disabled }}" | ||
8 | open-type="{{ openType }}" | ||
9 | business-id="{{ businessId }}" | ||
10 | custom-class="van-goods-action-icon" | ||
11 | session-from="{{ sessionFrom }}" | ||
12 | app-parameter="{{ appParameter }}" | ||
13 | send-message-img="{{ sendMessageImg }}" | ||
14 | send-message-path="{{ sendMessagePath }}" | ||
15 | show-message-card="{{ showMessageCard }}" | ||
16 | send-message-title="{{ sendMessageTitle }}" | ||
17 | bind:click="onClick" | ||
18 | binderror="bindError" | ||
19 | bindcontact="bindContact" | ||
20 | bindopensetting="bindOpenSetting" | ||
21 | bindgetuserinfo="bindGetUserInfo" | ||
22 | bindgetphonenumber="bindGetPhoneNumber" | ||
23 | bindlaunchapp="bindLaunchApp" | ||
24 | > | ||
25 | <view class="van-goods-action-icon__content van-hairline--right"> | ||
26 | <van-icon | ||
27 | size="20px" | ||
28 | name="{{ icon }}" | ||
29 | info="{{ info }}" | ||
30 | class="van-goods-action-icon__icon" | ||
31 | custom-class="icon-class" | ||
32 | /> | ||
33 | <text class="text-class">{{ text }}</text> | ||
34 | </view> | ||
35 | </van-button> |
1 | @import '../common/index.wxss';.van-goods-action-icon{width:50px!important;border:none!important}.van-goods-action-icon__content{display:-webkit-flex;display:flex;height:100%;font-size:10px;line-height:1;color:#7d7e80;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-goods-action-icon__icon{margin-bottom:4px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/goods-action/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/goods-action/index.js
0 → 100755
src/ui/vant-weapp/goods-action/index.json
0 → 100755
src/ui/vant-weapp/goods-action/index.wxml
0 → 100755
src/ui/vant-weapp/goods-action/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;background-color:#fff}.van-goods-action--safe{padding-bottom:34px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/info/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/info/index.js
0 → 100755
src/ui/vant-weapp/info/index.json
0 → 100755
src/ui/vant-weapp/info/index.wxml
0 → 100755
src/ui/vant-weapp/info/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-info{position:absolute;top:-8px;right:0;min-width:16px;padding:0 3px;font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;line-height:14px;color:#fff;text-align:center;white-space:nowrap;background-color:#f44;border:1px solid #fff;border-radius:16px;-webkit-transform:translateX(50%);transform:translateX(50%);box-sizing:border-box;-webkit-transform-origin:100%;transform-origin:100%} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/loading/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/loading/index.js
0 → 100755
src/ui/vant-weapp/loading/index.json
0 → 100755
src/ui/vant-weapp/loading/index.wxml
0 → 100755
1 | <view | ||
2 | class="van-loading custom-class" | ||
3 | style="width: {{ size }}; height: {{ size }}" | ||
4 | > | ||
5 | <view | ||
6 | class="van-loading__spinner van-loading__spinner--{{ type }}" | ||
7 | style="color: {{ color }};" | ||
8 | > | ||
9 | <view | ||
10 | wx:if="{{ type === 'spinner' }}" | ||
11 | wx:for="item in 12" | ||
12 | wx:key="index" | ||
13 | class="van-loading__dot" | ||
14 | /> | ||
15 | </view> | ||
16 | </view> |
src/ui/vant-weapp/loading/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-loading{z-index:0;line-height:0;vertical-align:middle}.van-loading,.van-loading__spinner{position:relative;display:inline-block}.van-loading__spinner{z-index:-1;width:100%;height:100%;box-sizing:border-box;-webkit-animation:van-rotate .8s linear infinite;animation:van-rotate .8s linear infinite}.van-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.van-loading__spinner--circular{border-radius:100%;border:1px solid transparent;border-top-color:initial}.van-loading__dot{top:0;left:0;width:100%;height:100%;position:absolute}.van-loading__dot:before{width:2px;height:25%;content:" ";display:block;margin:0 auto;border-radius:40%;background-color:currentColor}.van-loading__dot:first-of-type{opacity:1;-webkit-transform:rotate(30deg);transform:rotate(30deg)}.van-loading__dot:nth-of-type(2){opacity:.9375;-webkit-transform:rotate(60deg);transform:rotate(60deg)}.van-loading__dot:nth-of-type(3){opacity:.875;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-loading__dot:nth-of-type(4){opacity:.8125;-webkit-transform:rotate(120deg);transform:rotate(120deg)}.van-loading__dot:nth-of-type(5){opacity:.75;-webkit-transform:rotate(150deg);transform:rotate(150deg)}.van-loading__dot:nth-of-type(6){opacity:.6875;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-loading__dot:nth-of-type(7){opacity:.625;-webkit-transform:rotate(210deg);transform:rotate(210deg)}.van-loading__dot:nth-of-type(8){opacity:.5625;-webkit-transform:rotate(240deg);transform:rotate(240deg)}.van-loading__dot:nth-of-type(9){opacity:.5;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.van-loading__dot:nth-of-type(10){opacity:.4375;-webkit-transform:rotate(300deg);transform:rotate(300deg)}.van-loading__dot:nth-of-type(11){opacity:.375;-webkit-transform:rotate(330deg);transform:rotate(330deg)}.van-loading__dot:nth-of-type(12){opacity:.3125;-webkit-transform:rotate(1turn);transform:rotate(1turn)}@-webkit-keyframes van-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes van-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/nav-bar/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/nav-bar/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { safeArea } from '../mixins/safe-area'; | ||
3 | VantComponent({ | ||
4 | mixins: [safeArea({ safeAreaInsetTop: true })], | ||
5 | classes: ['title-class'], | ||
6 | props: { | ||
7 | title: String, | ||
8 | fixed: Boolean, | ||
9 | leftText: String, | ||
10 | rightText: String, | ||
11 | leftArrow: Boolean, | ||
12 | border: { | ||
13 | type: Boolean, | ||
14 | value: true | ||
15 | }, | ||
16 | zIndex: { | ||
17 | type: Number, | ||
18 | value: 120 | ||
19 | } | ||
20 | }, | ||
21 | methods: { | ||
22 | onClickLeft() { | ||
23 | this.$emit('click-left'); | ||
24 | }, | ||
25 | onClickRight() { | ||
26 | this.$emit('click-right'); | ||
27 | } | ||
28 | } | ||
29 | }); |
src/ui/vant-weapp/nav-bar/index.json
0 → 100755
src/ui/vant-weapp/nav-bar/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}" | ||
5 | style="z-index: {{ zIndex }}; {{ safeAreaInsetTop ? 'padding-top: ' + statusBarHeight + 'px;' : '' }}" | ||
6 | > | ||
7 | <view class="van-nav-bar__left" bind:tap="onClickLeft"> | ||
8 | <block wx:if="{{ leftArrow || leftText }}"> | ||
9 | <van-icon | ||
10 | wx:if="{{ leftArrow }}" | ||
11 | size="16px" | ||
12 | name="arrow-left" | ||
13 | custom-class="van-nav-bar__arrow" | ||
14 | /> | ||
15 | <view | ||
16 | wx:if="{{ leftText }}" | ||
17 | class="van-nav-bar__text" | ||
18 | hover-class="van-nav-bar__text--hover" | ||
19 | hover-stay-time="70" | ||
20 | >{{ leftText }}</view> | ||
21 | </block> | ||
22 | <slot wx:else name="left" /> | ||
23 | </view> | ||
24 | <view class="van-nav-bar__title title-class van-ellipsis"> | ||
25 | <block wx:if="{{ title }}">{{ title }}</block> | ||
26 | <slot wx:else name="title" /> | ||
27 | </view> | ||
28 | <view class="van-nav-bar__right" bind:tap="onClickRight"> | ||
29 | <view | ||
30 | wx:if="{{ rightText }}" | ||
31 | class="van-nav-bar__text" | ||
32 | hover-class="van-nav-bar__text--hover" | ||
33 | hover-stay-time="70" | ||
34 | >{{ rightText }}</view> | ||
35 | <slot wx:else name="right" /> | ||
36 | </view> | ||
37 | </view> |
src/ui/vant-weapp/nav-bar/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-nav-bar{position:relative;height:44px;line-height:44px;text-align:center;background-color:#fff;-webkit-user-select:none;user-select:none}.van-nav-bar__text{display:inline-block;padding:0 15px;margin:0 -15px;color:#1989fa;vertical-align:middle}.van-nav-bar__text--hover{background-color:#f2f3f5}.van-nav-bar__arrow{color:#1989fa;vertical-align:middle}.van-nav-bar__arrow+.van-nav-bar__text{padding-left:25px;margin-left:-20px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;font-size:16px;font-weight:500}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px}.van-nav-bar__left{left:15px}.van-nav-bar__right{right:15px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/notice-bar/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/notice-bar/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | const FONT_COLOR = '#ed6a0c'; | ||
3 | const BG_COLOR = '#fffbe8'; | ||
4 | VantComponent({ | ||
5 | props: { | ||
6 | text: { | ||
7 | type: String, | ||
8 | value: '' | ||
9 | }, | ||
10 | mode: { | ||
11 | type: String, | ||
12 | value: '' | ||
13 | }, | ||
14 | url: { | ||
15 | type: String, | ||
16 | value: '' | ||
17 | }, | ||
18 | openType: { | ||
19 | type: String, | ||
20 | value: 'navigate' | ||
21 | }, | ||
22 | delay: { | ||
23 | type: Number, | ||
24 | value: 0 | ||
25 | }, | ||
26 | speed: { | ||
27 | type: Number, | ||
28 | value: 50 | ||
29 | }, | ||
30 | scrollable: { | ||
31 | type: Boolean, | ||
32 | value: true | ||
33 | }, | ||
34 | leftIcon: { | ||
35 | type: String, | ||
36 | value: '' | ||
37 | }, | ||
38 | color: { | ||
39 | type: String, | ||
40 | value: FONT_COLOR | ||
41 | }, | ||
42 | backgroundColor: { | ||
43 | type: String, | ||
44 | value: BG_COLOR | ||
45 | } | ||
46 | }, | ||
47 | data: { | ||
48 | show: true, | ||
49 | hasRightIcon: false | ||
50 | }, | ||
51 | watch: { | ||
52 | text() { | ||
53 | this.set({}, this.init); | ||
54 | } | ||
55 | }, | ||
56 | created() { | ||
57 | if (this.data.mode) { | ||
58 | this.set({ | ||
59 | hasRightIcon: true | ||
60 | }); | ||
61 | } | ||
62 | this.resetAnimation = wx.createAnimation({ | ||
63 | duration: 0, | ||
64 | timingFunction: 'linear' | ||
65 | }); | ||
66 | }, | ||
67 | destroyed() { | ||
68 | this.timer && clearTimeout(this.timer); | ||
69 | }, | ||
70 | methods: { | ||
71 | init() { | ||
72 | Promise.all([ | ||
73 | this.getRect('.van-notice-bar__content'), | ||
74 | this.getRect('.van-notice-bar__content-wrap') | ||
75 | ]).then((rects) => { | ||
76 | const [contentRect, wrapRect] = rects; | ||
77 | if (contentRect == null || | ||
78 | wrapRect == null || | ||
79 | !contentRect.width || | ||
80 | !wrapRect.width) { | ||
81 | return; | ||
82 | } | ||
83 | const { speed, scrollable, delay } = this.data; | ||
84 | if (scrollable && wrapRect.width < contentRect.width) { | ||
85 | const duration = (contentRect.width / speed) * 1000; | ||
86 | this.wrapWidth = wrapRect.width; | ||
87 | this.contentWidth = contentRect.width; | ||
88 | this.duration = duration; | ||
89 | this.animation = wx.createAnimation({ | ||
90 | duration, | ||
91 | timingFunction: 'linear', | ||
92 | delay | ||
93 | }); | ||
94 | this.scroll(); | ||
95 | } | ||
96 | }); | ||
97 | }, | ||
98 | scroll() { | ||
99 | this.timer && clearTimeout(this.timer); | ||
100 | this.timer = null; | ||
101 | this.set({ | ||
102 | animationData: this.resetAnimation | ||
103 | .translateX(this.wrapWidth) | ||
104 | .step() | ||
105 | .export() | ||
106 | }); | ||
107 | setTimeout(() => { | ||
108 | this.set({ | ||
109 | animationData: this.animation | ||
110 | .translateX(-this.contentWidth) | ||
111 | .step() | ||
112 | .export() | ||
113 | }); | ||
114 | }, 20); | ||
115 | this.timer = setTimeout(() => { | ||
116 | this.scroll(); | ||
117 | }, this.duration); | ||
118 | }, | ||
119 | onClickIcon() { | ||
120 | this.timer && clearTimeout(this.timer); | ||
121 | this.timer = null; | ||
122 | this.set({ show: false }); | ||
123 | }, | ||
124 | onClick(event) { | ||
125 | this.$emit('click', event); | ||
126 | } | ||
127 | } | ||
128 | }); |
src/ui/vant-weapp/notice-bar/index.json
0 → 100755
src/ui/vant-weapp/notice-bar/index.wxml
0 → 100755
1 | <view | ||
2 | wx:if="{{ show }}" | ||
3 | class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}" | ||
4 | style="color: {{ color }}; background-color: {{ backgroundColor }};" | ||
5 | bind:tap="onClick" | ||
6 | > | ||
7 | <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon"> | ||
8 | <image src="{{ leftIcon }}" /> | ||
9 | </view> | ||
10 | <view class="van-notice-bar__content-wrap"> | ||
11 | <view class="van-notice-bar__content {{ scrollable ? '' : 'van-ellipsis' }}" animation="{{ animationData }}"> | ||
12 | {{ text }} | ||
13 | </view> | ||
14 | </view> | ||
15 | |||
16 | <van-icon | ||
17 | wx:if="{{ mode === 'closeable' }}" | ||
18 | class="van-notice-bar__right-icon" | ||
19 | name="cross" | ||
20 | bind:tap="onClickIcon" | ||
21 | /> | ||
22 | <navigator | ||
23 | wx:if="{{ mode === 'link' }}" | ||
24 | url="{{ url }}" | ||
25 | open-type="{{ openType }}" | ||
26 | > | ||
27 | <van-icon class="van-notice-bar__right-icon" name="arrow" /> | ||
28 | </navigator> | ||
29 | </view> |
src/ui/vant-weapp/notice-bar/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-notice-bar{display:-webkit-flex;display:flex;height:40px;padding:0 15px;font-size:14px;line-height:24px;-webkit-align-items:center;align-items:center}.van-notice-bar--within-icon{position:relative;padding-right:40px}.van-notice-bar__left-icon{height:18px;min-width:20px;box-sizing:border-box}.van-notice-bar__left-icon>image{width:16px;height:16px}.van-notice-bar__right-icon{position:absolute;top:10px;right:15px;font-size:16px}.van-notice-bar__content-wrap{position:relative;height:24px;overflow:hidden;-webkit-flex:1;flex:1}.van-notice-bar__content{position:absolute;white-space:nowrap}.van-notice-bar__content.van-ellipsis{max-width:100%} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/panel/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/panel/index.js
0 → 100755
src/ui/vant-weapp/panel/index.json
0 → 100755
src/ui/vant-weapp/panel/index.wxml
0 → 100755
1 | <view class="van-panel van-hairline--top-bottom custom-class"> | ||
2 | <van-cell | ||
3 | wx:if="{{ title || desc || status }}" | ||
4 | title="{{ title }}" | ||
5 | label="{{ desc }}" | ||
6 | value="{{ status }}" | ||
7 | custom-class="header-class" | ||
8 | value-class="van-panel__header-value" | ||
9 | /> | ||
10 | <slot wx:else name="header" /> | ||
11 | |||
12 | <view class="van-panel__content"> | ||
13 | <slot /> | ||
14 | </view> | ||
15 | |||
16 | <view wx:if="{{ useFooterSlot }}" class="van-panel__footer van-hairline--top footer-class"> | ||
17 | <slot name="footer" /> | ||
18 | </view> | ||
19 | </view> |
src/ui/vant-weapp/panel/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-panel{background:#fff}.van-panel__header-value{color:#f44}.van-panel__footer{padding:10px 15px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/picker-column/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/picker-column/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { isObj, range } from '../common/utils'; | ||
3 | const DEFAULT_DURATION = 200; | ||
4 | VantComponent({ | ||
5 | classes: ['active-class'], | ||
6 | props: { | ||
7 | valueKey: String, | ||
8 | className: String, | ||
9 | itemHeight: Number, | ||
10 | visibleItemCount: Number, | ||
11 | initialOptions: { | ||
12 | type: Array, | ||
13 | value: [] | ||
14 | }, | ||
15 | defaultIndex: { | ||
16 | type: Number, | ||
17 | value: 0 | ||
18 | } | ||
19 | }, | ||
20 | data: { | ||
21 | startY: 0, | ||
22 | offset: 0, | ||
23 | duration: 0, | ||
24 | startOffset: 0, | ||
25 | options: [], | ||
26 | currentIndex: 0 | ||
27 | }, | ||
28 | created() { | ||
29 | const { defaultIndex, initialOptions } = this.data; | ||
30 | this.set({ | ||
31 | currentIndex: defaultIndex, | ||
32 | options: initialOptions | ||
33 | }).then(() => { | ||
34 | this.setIndex(defaultIndex); | ||
35 | }); | ||
36 | }, | ||
37 | computed: { | ||
38 | count() { | ||
39 | return this.data.options.length; | ||
40 | }, | ||
41 | baseOffset() { | ||
42 | const { data } = this; | ||
43 | return (data.itemHeight * (data.visibleItemCount - 1)) / 2; | ||
44 | }, | ||
45 | wrapperStyle() { | ||
46 | const { data } = this; | ||
47 | return [ | ||
48 | `transition: ${data.duration}ms`, | ||
49 | `transform: translate3d(0, ${data.offset + data.baseOffset}px, 0)`, | ||
50 | `line-height: ${data.itemHeight}px` | ||
51 | ].join('; '); | ||
52 | } | ||
53 | }, | ||
54 | watch: { | ||
55 | defaultIndex(value) { | ||
56 | this.setIndex(value); | ||
57 | } | ||
58 | }, | ||
59 | methods: { | ||
60 | onTouchStart(event) { | ||
61 | this.set({ | ||
62 | startY: event.touches[0].clientY, | ||
63 | startOffset: this.data.offset, | ||
64 | duration: 0 | ||
65 | }); | ||
66 | }, | ||
67 | onTouchMove(event) { | ||
68 | const { data } = this; | ||
69 | const deltaY = event.touches[0].clientY - data.startY; | ||
70 | this.set({ | ||
71 | offset: range(data.startOffset + deltaY, -(data.count * data.itemHeight), data.itemHeight) | ||
72 | }); | ||
73 | }, | ||
74 | onTouchEnd() { | ||
75 | const { data } = this; | ||
76 | if (data.offset !== data.startOffset) { | ||
77 | this.set({ | ||
78 | duration: DEFAULT_DURATION | ||
79 | }); | ||
80 | const index = range(Math.round(-data.offset / data.itemHeight), 0, data.count - 1); | ||
81 | this.setIndex(index, true); | ||
82 | } | ||
83 | }, | ||
84 | onClickItem(event) { | ||
85 | const { index } = event.currentTarget.dataset; | ||
86 | this.setIndex(index, true); | ||
87 | }, | ||
88 | adjustIndex(index) { | ||
89 | const { data } = this; | ||
90 | index = range(index, 0, data.count); | ||
91 | for (let i = index; i < data.count; i++) { | ||
92 | if (!this.isDisabled(data.options[i])) | ||
93 | return i; | ||
94 | } | ||
95 | for (let i = index - 1; i >= 0; i--) { | ||
96 | if (!this.isDisabled(data.options[i])) | ||
97 | return i; | ||
98 | } | ||
99 | }, | ||
100 | isDisabled(option) { | ||
101 | return isObj(option) && option.disabled; | ||
102 | }, | ||
103 | getOptionText(option) { | ||
104 | const { data } = this; | ||
105 | return isObj(option) && data.valueKey in option | ||
106 | ? option[data.valueKey] | ||
107 | : option; | ||
108 | }, | ||
109 | setIndex(index, userAction) { | ||
110 | const { data } = this; | ||
111 | index = this.adjustIndex(index) || 0; | ||
112 | const offset = -index * data.itemHeight; | ||
113 | if (index !== data.currentIndex) { | ||
114 | return this.set({ offset, currentIndex: index }).then(() => { | ||
115 | userAction && this.$emit('change', index); | ||
116 | }); | ||
117 | } | ||
118 | else { | ||
119 | return this.set({ offset }); | ||
120 | } | ||
121 | }, | ||
122 | setValue(value) { | ||
123 | const { options } = this.data; | ||
124 | for (let i = 0; i < options.length; i++) { | ||
125 | if (this.getOptionText(options[i]) === value) { | ||
126 | return this.setIndex(i); | ||
127 | } | ||
128 | } | ||
129 | return Promise.resolve(); | ||
130 | }, | ||
131 | getValue() { | ||
132 | const { data } = this; | ||
133 | return data.options[data.currentIndex]; | ||
134 | } | ||
135 | } | ||
136 | }); |
src/ui/vant-weapp/picker-column/index.json
0 → 100755
src/ui/vant-weapp/picker-column/index.wxml
0 → 100755
1 | <view | ||
2 | class="van-picker-column custom-class" | ||
3 | style="height: {{ itemHeight * visibleItemCount }}px" | ||
4 | bind:touchstart="onTouchStart" | ||
5 | catch:touchmove="onTouchMove" | ||
6 | bind:touchend="onTouchEnd" | ||
7 | bind:touchcancel="onTouchEnd" | ||
8 | > | ||
9 | <view style="{{ wrapperStyle }}"> | ||
10 | <view | ||
11 | wx:for="{{ options }}" | ||
12 | wx:for-item="option" | ||
13 | wx:key="index" | ||
14 | data-index="{{ index }}" | ||
15 | style="height: {{ itemHeight }}px" | ||
16 | class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}" | ||
17 | bindtap="onClickItem" | ||
18 | >{{ getOptionText(option, valueKey) }}</view> | ||
19 | </view> | ||
20 | </view> | ||
21 | |||
22 | <wxs module="getOptionText"> | ||
23 | function isObj(x) { | ||
24 | var type = typeof x; | ||
25 | return x !== null && (type === 'object' || type === 'function'); | ||
26 | } | ||
27 | |||
28 | module.exports = function (option, valueKey) { | ||
29 | return isObj(option) && option[valueKey] ? option[valueKey] : option; | ||
30 | } | ||
31 | </wxs> |
src/ui/vant-weapp/picker-column/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-picker-column{overflow:hidden;font-size:16px;text-align:center}.van-picker-column__item{padding:0 5px;color:#999}.van-picker-column__item--selected{font-weight:500;color:#333}.van-picker-column__item--disabled{opacity:.3} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/picker/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/picker/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | function isSimple(columns) { | ||
3 | return columns.length && !columns[0].values; | ||
4 | } | ||
5 | VantComponent({ | ||
6 | classes: ['active-class', 'toolbar-class', 'column-class'], | ||
7 | props: { | ||
8 | title: String, | ||
9 | loading: Boolean, | ||
10 | showToolbar: Boolean, | ||
11 | confirmButtonText: String, | ||
12 | cancelButtonText: String, | ||
13 | visibleItemCount: { | ||
14 | type: Number, | ||
15 | value: 5 | ||
16 | }, | ||
17 | valueKey: { | ||
18 | type: String, | ||
19 | value: 'text' | ||
20 | }, | ||
21 | itemHeight: { | ||
22 | type: Number, | ||
23 | value: 44 | ||
24 | }, | ||
25 | columns: { | ||
26 | type: Array, | ||
27 | value: [], | ||
28 | observer(columns = []) { | ||
29 | this.simple = isSimple(columns); | ||
30 | this.children = this.selectAllComponents('.van-picker__column'); | ||
31 | if (Array.isArray(this.children) && this.children.length) { | ||
32 | this.setColumns().catch(() => { }); | ||
33 | } | ||
34 | } | ||
35 | } | ||
36 | }, | ||
37 | beforeCreate() { | ||
38 | this.children = []; | ||
39 | }, | ||
40 | methods: { | ||
41 | noop() { }, | ||
42 | setColumns() { | ||
43 | const { data } = this; | ||
44 | const columns = this.simple ? [{ values: data.columns }] : data.columns; | ||
45 | const stack = columns.map((column, index) => this.setColumnValues(index, column.values)); | ||
46 | return Promise.all(stack); | ||
47 | }, | ||
48 | emit(event) { | ||
49 | const { type } = event.currentTarget.dataset; | ||
50 | if (this.simple) { | ||
51 | this.$emit(type, { | ||
52 | value: this.getColumnValue(0), | ||
53 | index: this.getColumnIndex(0) | ||
54 | }); | ||
55 | } | ||
56 | else { | ||
57 | this.$emit(type, { | ||
58 | value: this.getValues(), | ||
59 | index: this.getIndexes() | ||
60 | }); | ||
61 | } | ||
62 | }, | ||
63 | onChange(event) { | ||
64 | if (this.simple) { | ||
65 | this.$emit('change', { | ||
66 | picker: this, | ||
67 | value: this.getColumnValue(0), | ||
68 | index: this.getColumnIndex(0) | ||
69 | }); | ||
70 | } | ||
71 | else { | ||
72 | this.$emit('change', { | ||
73 | picker: this, | ||
74 | value: this.getValues(), | ||
75 | index: event.currentTarget.dataset.index | ||
76 | }); | ||
77 | } | ||
78 | }, | ||
79 | // get column instance by index | ||
80 | getColumn(index) { | ||
81 | return this.children[index]; | ||
82 | }, | ||
83 | // get column value by index | ||
84 | getColumnValue(index) { | ||
85 | const column = this.getColumn(index); | ||
86 | return column && column.getValue(); | ||
87 | }, | ||
88 | // set column value by index | ||
89 | setColumnValue(index, value) { | ||
90 | const column = this.getColumn(index); | ||
91 | if (column == null) { | ||
92 | return Promise.reject('setColumnValue: 对应列不存在'); | ||
93 | } | ||
94 | return column.setValue(value); | ||
95 | }, | ||
96 | // get column option index by column index | ||
97 | getColumnIndex(columnIndex) { | ||
98 | return (this.getColumn(columnIndex) || {}).data.currentIndex; | ||
99 | }, | ||
100 | // set column option index by column index | ||
101 | setColumnIndex(columnIndex, optionIndex) { | ||
102 | const column = this.getColumn(columnIndex); | ||
103 | if (column == null) { | ||
104 | return Promise.reject('setColumnIndex: 对应列不存在'); | ||
105 | } | ||
106 | return column.setIndex(optionIndex); | ||
107 | }, | ||
108 | // get options of column by index | ||
109 | getColumnValues(index) { | ||
110 | return (this.children[index] || {}).data.options; | ||
111 | }, | ||
112 | // set options of column by index | ||
113 | setColumnValues(index, options, needReset = true) { | ||
114 | const column = this.children[index]; | ||
115 | if (column == null) { | ||
116 | return Promise.reject('setColumnValues: 对应列不存在'); | ||
117 | } | ||
118 | const isSame = JSON.stringify(column.data.options) === JSON.stringify(options); | ||
119 | if (isSame) { | ||
120 | return Promise.resolve(); | ||
121 | } | ||
122 | return column.set({ options }).then(() => { | ||
123 | if (needReset) { | ||
124 | column.setIndex(0); | ||
125 | } | ||
126 | }); | ||
127 | }, | ||
128 | // get values of all columns | ||
129 | getValues() { | ||
130 | return this.children.map((child) => child.getValue()); | ||
131 | }, | ||
132 | // set values of all columns | ||
133 | setValues(values) { | ||
134 | const stack = values.map((value, index) => this.setColumnValue(index, value)); | ||
135 | return Promise.all(stack); | ||
136 | }, | ||
137 | // get indexes of all columns | ||
138 | getIndexes() { | ||
139 | return this.children.map((child) => child.data.currentIndex); | ||
140 | }, | ||
141 | // set indexes of all columns | ||
142 | setIndexes(indexes) { | ||
143 | const stack = indexes.map((optionIndex, columnIndex) => this.setColumnIndex(columnIndex, optionIndex)); | ||
144 | return Promise.all(stack); | ||
145 | } | ||
146 | } | ||
147 | }); |
src/ui/vant-weapp/picker/index.json
0 → 100755
src/ui/vant-weapp/picker/index.wxml
0 → 100755
1 | <view class="van-picker custom-class"> | ||
2 | <view | ||
3 | wx:if="{{ showToolbar }}" | ||
4 | class="van-picker__toolbar van-hairline--top-bottom toolbar-class" | ||
5 | > | ||
6 | <view | ||
7 | class="van-picker__cancel" | ||
8 | hover-class="van-picker__cancel--hover" | ||
9 | hover-stay-time="70" | ||
10 | data-type="cancel" | ||
11 | bindtap="emit" | ||
12 | > | ||
13 | {{ cancelButtonText || '取消' }} | ||
14 | </view> | ||
15 | <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view> | ||
16 | <view | ||
17 | class="van-picker__confirm" | ||
18 | hover-class="van-picker__confirm--hover" | ||
19 | hover-stay-time="70" | ||
20 | data-type="confirm" | ||
21 | bindtap="emit" | ||
22 | > | ||
23 | {{ confirmButtonText || '确认' }} | ||
24 | </view> | ||
25 | </view> | ||
26 | <view wx:if="{{ loading }}" class="van-picker__loading"> | ||
27 | <loading color="#1989fa"/> | ||
28 | </view> | ||
29 | <view | ||
30 | class="van-picker__columns" | ||
31 | style="height: {{ itemHeight * visibleItemCount }}px" | ||
32 | catch:touchmove="noop" | ||
33 | > | ||
34 | <picker-column | ||
35 | class="van-picker__column" | ||
36 | wx:for="{{ isSimple(columns) ? [columns] : columns }}" | ||
37 | wx:key="{{ index }}" | ||
38 | data-index="{{ index }}" | ||
39 | custom-class="column-class" | ||
40 | value-key="{{ valueKey }}" | ||
41 | initial-options="{{ isSimple(columns) ? item : item.values }}" | ||
42 | default-index="{{ item.defaultIndex }}" | ||
43 | item-height="{{ itemHeight }}" | ||
44 | visible-item-count="{{ visibleItemCount }}" | ||
45 | active-class="active-class" | ||
46 | bind:change="onChange" | ||
47 | /> | ||
48 | <view | ||
49 | class="van-picker__frame van-hairline--top-bottom" | ||
50 | style="height: {{ itemHeight }}px" | ||
51 | /> | ||
52 | </view> | ||
53 | </view> | ||
54 | |||
55 | <wxs module="isSimple"> | ||
56 | function isSimple(columns) { | ||
57 | return columns.length && !columns[0].values; | ||
58 | } | ||
59 | module.exports = isSimple; | ||
60 | </wxs> |
src/ui/vant-weapp/picker/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;background-color:#fff;-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:-webkit-flex;display:flex;height:44px;line-height:44px;-webkit-justify-content:space-between;justify-content:space-between}.van-picker__cancel,.van-picker__confirm{padding:0 15px;font-size:14px;color:#1989fa}.van-picker__cancel--hover,.van-picker__confirm--hover{background-color:#f2f3f5}.van-picker__title{max-width:50%;font-size:16px;font-weight:500;text-align:center}.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;background-color:hsla(0,0%,100%,.9);-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-picker__frame,.van-picker__loading .van-loading{position:absolute;top:50%;left:0;z-index:1;width:100%;pointer-events:none;-webkit-transform:translateY(-50%);transform:translateY(-50%)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/progress/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/progress/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { BLUE } from '../common/color'; | ||
3 | VantComponent({ | ||
4 | props: { | ||
5 | inactive: Boolean, | ||
6 | percentage: Number, | ||
7 | pivotText: String, | ||
8 | pivotColor: String, | ||
9 | showPivot: { | ||
10 | type: Boolean, | ||
11 | value: true | ||
12 | }, | ||
13 | color: { | ||
14 | type: String, | ||
15 | value: BLUE | ||
16 | }, | ||
17 | textColor: { | ||
18 | type: String, | ||
19 | value: '#fff' | ||
20 | } | ||
21 | }, | ||
22 | data: { | ||
23 | pivotWidth: 0, | ||
24 | progressWidth: 0 | ||
25 | }, | ||
26 | watch: { | ||
27 | pivotText: 'getWidth', | ||
28 | showPivot: 'getWidth' | ||
29 | }, | ||
30 | computed: { | ||
31 | portionStyle() { | ||
32 | const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px'; | ||
33 | const background = this.getCurrentColor(); | ||
34 | return `width: ${width}; background: ${background}; `; | ||
35 | }, | ||
36 | pivotStyle() { | ||
37 | const color = this.data.textColor; | ||
38 | const background = this.data.pivotColor || this.getCurrentColor(); | ||
39 | return `color: ${color}; background: ${background}`; | ||
40 | }, | ||
41 | text() { | ||
42 | return this.data.pivotText || this.data.percentage + '%'; | ||
43 | } | ||
44 | }, | ||
45 | mounted() { | ||
46 | this.getWidth(); | ||
47 | }, | ||
48 | methods: { | ||
49 | getCurrentColor() { | ||
50 | return this.data.inactive ? '#cacaca' : this.data.color; | ||
51 | }, | ||
52 | getWidth() { | ||
53 | this.getRect('.van-progress').then(rect => { | ||
54 | this.set({ | ||
55 | progressWidth: rect.width | ||
56 | }); | ||
57 | }); | ||
58 | this.getRect('.van-progress__pivot').then(rect => { | ||
59 | this.set({ | ||
60 | pivotWidth: rect.width || 0 | ||
61 | }); | ||
62 | }); | ||
63 | } | ||
64 | } | ||
65 | }); |
src/ui/vant-weapp/progress/index.json
0 → 100755
src/ui/vant-weapp/progress/index.wxml
0 → 100755
1 | <view class="van-progress custom-class"> | ||
2 | <view | ||
3 | class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}" | ||
4 | style="{{ portionStyle }}" | ||
5 | > | ||
6 | <view | ||
7 | wx:if="{{ showPivot && text }}" | ||
8 | style="{{ pivotStyle }}" | ||
9 | class="van-progress__pivot" | ||
10 | > | ||
11 | {{ text }} | ||
12 | </view> | ||
13 | </view> | ||
14 | </view> |
src/ui/vant-weapp/progress/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-progress{height:4px;position:relative;border-radius:4px;background:#e5e5e5}.van-progress__portion{left:0;height:100%;position:absolute;border-radius:inherit}.van-progress__portion--with-pivot{border-top-right-radius:0;border-bottom-right-radius:0}.van-progress__pivot{top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;position:absolute;line-height:1.6;text-align:center;border-radius:1em;word-break:keep-all;box-sizing:border-box;background-color:#e5e5e5;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/radio-group/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/radio-group/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | relation: { | ||
5 | name: 'radio', | ||
6 | type: 'descendant', | ||
7 | linked(target) { | ||
8 | const { value, disabled } = this.data; | ||
9 | target.set({ | ||
10 | value: value, | ||
11 | disabled: disabled || target.data.disabled | ||
12 | }); | ||
13 | } | ||
14 | }, | ||
15 | props: { | ||
16 | value: null, | ||
17 | disabled: Boolean | ||
18 | }, | ||
19 | watch: { | ||
20 | value(value) { | ||
21 | const children = this.getRelationNodes('../radio/index'); | ||
22 | children.forEach(child => { | ||
23 | child.set({ value }); | ||
24 | }); | ||
25 | }, | ||
26 | disabled(disabled) { | ||
27 | const children = this.getRelationNodes('../radio/index'); | ||
28 | children.forEach(child => { | ||
29 | child.set({ disabled: disabled || child.data.disabled }); | ||
30 | }); | ||
31 | } | ||
32 | } | ||
33 | }); |
src/ui/vant-weapp/radio-group/index.json
0 → 100755
src/ui/vant-weapp/radio-group/index.wxml
0 → 100755
1 | <slot /> |
src/ui/vant-weapp/radio-group/index.wxss
0 → 100755
1 | @import '../common/index.wxss'; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/radio/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/radio/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | relation: { | ||
5 | name: 'radio-group', | ||
6 | type: 'ancestor' | ||
7 | }, | ||
8 | classes: ['icon-class', 'label-class'], | ||
9 | props: { | ||
10 | name: null, | ||
11 | value: null, | ||
12 | disabled: Boolean, | ||
13 | labelDisabled: Boolean, | ||
14 | labelPosition: String, | ||
15 | checkedColor: String | ||
16 | }, | ||
17 | methods: { | ||
18 | emitChange(value) { | ||
19 | const instance = this.getRelationNodes('../radio-group/index')[0] || this; | ||
20 | instance.$emit('input', value); | ||
21 | instance.$emit('change', value); | ||
22 | }, | ||
23 | onChange(event) { | ||
24 | this.emitChange(event.detail.value); | ||
25 | }, | ||
26 | onClickLabel() { | ||
27 | if (!this.data.disabled && !this.data.labelDisabled) { | ||
28 | this.emitChange(this.data.name); | ||
29 | } | ||
30 | } | ||
31 | } | ||
32 | }); |
src/ui/vant-weapp/radio/index.json
0 → 100755
src/ui/vant-weapp/radio/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="van-radio custom-class"> | ||
4 | <view class="van-radio__input"> | ||
5 | <radio-group bindchange="onChange"> | ||
6 | <radio | ||
7 | value="{{ name }}" | ||
8 | checked="{{ value === name }}" | ||
9 | disabled="{{ disabled }}" | ||
10 | class="van-radio__control" | ||
11 | /> | ||
12 | </radio-group> | ||
13 | <van-icon | ||
14 | class="{{ utils.bem('radio__icon', { disabled, checked: !disabled && name === value, check: !disabled && name !== value }) }}" | ||
15 | custom-class="icon-class" | ||
16 | color="{{ value === name ? checkedColor : '' }}" | ||
17 | name="{{ value === name ? 'checked' : 'circle' }}" | ||
18 | /> | ||
19 | </view> | ||
20 | <view class="van-radio__label van-radio__label--{{ labelPosition }} label-class" bindtap="onClickLabel"> | ||
21 | <slot /> | ||
22 | </view> | ||
23 | </view> |
src/ui/vant-weapp/radio/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-radio{overflow:hidden;line-height:1;-webkit-user-select:none;user-select:none}.van-radio__input,.van-radio__label{display:inline-block;vertical-align:middle}.van-radio__input{position:relative;font-size:20px}.van-radio__control{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0}.van-radio__label{margin-left:10px;color:#333;font-size:16px;line-height:20px}.van-radio__label--left{margin:0 10px 0 0;float:left}.van-radio__label:empty{margin:0}.van-radio__icon{pointer-events:none;display:block;line-height:0}.van-radio__icon--disabled{color:#e5e5e5}.van-radio__icon--checked{color:#1989fa}.van-radio__icon--check{color:#c9c9c9} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/rate/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/rate/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | classes: ['icon-class'], | ||
5 | props: { | ||
6 | readonly: Boolean, | ||
7 | disabled: Boolean, | ||
8 | size: { | ||
9 | type: Number, | ||
10 | value: 20 | ||
11 | }, | ||
12 | icon: { | ||
13 | type: String, | ||
14 | value: 'star' | ||
15 | }, | ||
16 | voidIcon: { | ||
17 | type: String, | ||
18 | value: 'star-o' | ||
19 | }, | ||
20 | color: { | ||
21 | type: String, | ||
22 | value: '#ffd21e' | ||
23 | }, | ||
24 | voidColor: { | ||
25 | type: String, | ||
26 | value: '#c7c7c7' | ||
27 | }, | ||
28 | disabledColor: { | ||
29 | type: String, | ||
30 | value: '#bdbdbd' | ||
31 | }, | ||
32 | count: { | ||
33 | type: Number, | ||
34 | value: 5 | ||
35 | }, | ||
36 | value: { | ||
37 | type: Number, | ||
38 | value: 0 | ||
39 | } | ||
40 | }, | ||
41 | data: { | ||
42 | innerValue: 0 | ||
43 | }, | ||
44 | watch: { | ||
45 | value(value) { | ||
46 | if (value !== this.data.innerValue) { | ||
47 | this.set({ innerValue: value }); | ||
48 | } | ||
49 | } | ||
50 | }, | ||
51 | computed: { | ||
52 | list() { | ||
53 | const { count, innerValue } = this.data; | ||
54 | return Array.from({ length: count }, (_, index) => index < innerValue); | ||
55 | } | ||
56 | }, | ||
57 | methods: { | ||
58 | onSelect(event) { | ||
59 | const { data } = this; | ||
60 | const { index } = event.currentTarget.dataset; | ||
61 | if (!data.disabled && !data.readonly) { | ||
62 | this.set({ innerValue: index + 1 }); | ||
63 | this.$emit('input', index + 1); | ||
64 | this.$emit('change', index + 1); | ||
65 | } | ||
66 | }, | ||
67 | onTouchMove(event) { | ||
68 | const { clientX, clientY } = event.touches[0]; | ||
69 | this.getRect('.van-rate__item', true).then(list => { | ||
70 | const target = list.find(item => clientX >= item.left && | ||
71 | clientX <= item.right && | ||
72 | clientY >= item.top && | ||
73 | clientY <= item.bottom); | ||
74 | if (target != null) { | ||
75 | this.onSelect(Object.assign({}, event, { currentTarget: target })); | ||
76 | } | ||
77 | }); | ||
78 | } | ||
79 | } | ||
80 | }); |
src/ui/vant-weapp/rate/index.json
0 → 100755
src/ui/vant-weapp/rate/index.wxml
0 → 100755
1 | <view | ||
2 | class="van-rate custom-class" | ||
3 | bind:touchmove="onTouchMove" | ||
4 | > | ||
5 | <van-icon | ||
6 | wx:for="{{ list }}" | ||
7 | wx:key="index" | ||
8 | class="van-rate__item" | ||
9 | custom-class="icon-class" | ||
10 | size="{{ size }}px" | ||
11 | data-index="{{ index }}" | ||
12 | name="{{ item ? icon : voidIcon }}" | ||
13 | color="{{ disabled ? disabledColor : item ? color : voidColor }}" | ||
14 | bind:click="onSelect" | ||
15 | /> | ||
16 | </view> |
src/ui/vant-weapp/rate/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-rate{-webkit-user-select:none;user-select:none}.van-rate__item{width:1em;padding:0 2px;box-sizing:initial} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/row/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/row/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | name: 'col', | ||
5 | type: 'descendant', | ||
6 | linked(target) { | ||
7 | if (this.data.gutter) { | ||
8 | target.setGutter(this.data.gutter); | ||
9 | } | ||
10 | } | ||
11 | }, | ||
12 | props: { | ||
13 | gutter: Number | ||
14 | }, | ||
15 | watch: { | ||
16 | gutter: 'setGutter' | ||
17 | }, | ||
18 | mounted() { | ||
19 | if (this.data.gutter) { | ||
20 | this.setGutter(); | ||
21 | } | ||
22 | }, | ||
23 | methods: { | ||
24 | setGutter() { | ||
25 | const { gutter } = this.data; | ||
26 | const margin = `-${Number(gutter) / 2}px`; | ||
27 | const style = gutter | ||
28 | ? `margin-right: ${margin}; margin-left: ${margin};` | ||
29 | : ''; | ||
30 | this.set({ style }); | ||
31 | this.getRelationNodes('../col/index').forEach(col => { | ||
32 | col.setGutter(this.data.gutter); | ||
33 | }); | ||
34 | } | ||
35 | } | ||
36 | }); |
src/ui/vant-weapp/row/index.json
0 → 100755
src/ui/vant-weapp/row/index.wxml
0 → 100755
src/ui/vant-weapp/row/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-row:after{content:"";display:table;clear:both} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/search/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/search/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | classes: ['field-class', 'input-class', 'cancel-class'], | ||
5 | props: { | ||
6 | focus: Boolean, | ||
7 | error: Boolean, | ||
8 | disabled: Boolean, | ||
9 | readonly: Boolean, | ||
10 | inputAlign: String, | ||
11 | showAction: Boolean, | ||
12 | useActionSlot: Boolean, | ||
13 | placeholder: String, | ||
14 | placeholderStyle: String, | ||
15 | background: { | ||
16 | type: String, | ||
17 | value: '#ffffff' | ||
18 | }, | ||
19 | maxlength: { | ||
20 | type: Number, | ||
21 | value: -1 | ||
22 | }, | ||
23 | shape: { | ||
24 | type: String, | ||
25 | value: 'square' | ||
26 | }, | ||
27 | label: String | ||
28 | }, | ||
29 | methods: { | ||
30 | onChange(event) { | ||
31 | this.set({ value: event.detail }); | ||
32 | this.$emit('change', event.detail); | ||
33 | }, | ||
34 | onCancel() { | ||
35 | this.set({ value: '' }); | ||
36 | this.$emit('cancel'); | ||
37 | this.$emit('change', ''); | ||
38 | }, | ||
39 | onSearch() { | ||
40 | this.$emit('search', this.data.value); | ||
41 | }, | ||
42 | onFocus() { | ||
43 | this.$emit('focus'); | ||
44 | }, | ||
45 | onBlur() { | ||
46 | this.$emit('blur'); | ||
47 | }, | ||
48 | onClear() { | ||
49 | this.$emit('clear'); | ||
50 | }, | ||
51 | } | ||
52 | }); |
src/ui/vant-weapp/search/index.json
0 → 100755
src/ui/vant-weapp/search/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class" | ||
5 | style="background: {{ background }}" | ||
6 | > | ||
7 | <view class="{{ utils.bem('search__content', [shape]) }}"> | ||
8 | <view class="van-search__label" wx:if="{{ label }}">{{ label }}</view> | ||
9 | <slot wx:else name="label" /> | ||
10 | |||
11 | <van-field | ||
12 | clearable | ||
13 | type="search" | ||
14 | left-icon="search" | ||
15 | focus="{{ focus }}" | ||
16 | error="{{ error }}" | ||
17 | border="{{ false }}" | ||
18 | confirm-type="search" | ||
19 | class="van-search__field field-class" | ||
20 | value="{{ value }}" | ||
21 | disabled="{{ disabled }}" | ||
22 | readonly="{{ readonly }}" | ||
23 | maxlength="{{ maxlength }}" | ||
24 | input-align="{{ inputAlign }}" | ||
25 | input-class="input-class" | ||
26 | placeholder="{{ placeholder }}" | ||
27 | placeholder-style="{{ placeholderStyle }}" | ||
28 | custom-style="padding: 5px 10px 5px 0; background-color: transparent;" | ||
29 | bind:blur="onBlur" | ||
30 | bind:focus="onFocus" | ||
31 | bind:change="onChange" | ||
32 | bind:confirm="onSearch" | ||
33 | bind:clear="onClear" | ||
34 | /> | ||
35 | </view> | ||
36 | |||
37 | <view | ||
38 | wx:if="{{ showAction || useActionSlot }}" | ||
39 | class="van-search__action" | ||
40 | hover-class="van-search__action--hover" | ||
41 | hover-stay-time="70" | ||
42 | > | ||
43 | <slot wx:if="{{ useActionSlot }}" name="action" /> | ||
44 | <view wx:else bind:tap="onCancel" class="cancel-class">取消</view> | ||
45 | </view> | ||
46 | </view> |
src/ui/vant-weapp/search/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-search{padding:10px 16px;-webkit-align-items:center;align-items:center;box-sizing:border-box}.van-search,.van-search__content{display:-webkit-flex;display:flex}.van-search__content{padding-left:10px;background-color:#f7f8fa;border-radius:2px;-webkit-flex:1;flex:1}.van-search__content--round{border-radius:17px}.van-search__label{padding:0 5px;font-size:14px;line-height:34px;color:#333}.van-search__field{-webkit-flex:1;flex:1}.van-search__field__left-icon{color:#999}.van-search--withaction{padding-right:0}.van-search input::-webkit-search-cancel-button,.van-search input::-webkit-search-decoration,.van-search input::-webkit-search-results-button,.van-search input::-webkit-search-results-decoration{display:none}.van-search__action{padding:0 10px;font-size:14px;line-height:34px;color:#333}.van-search__action--hover{background-color:#f2f3f5} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/slider/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/slider/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { touch } from '../mixins/touch'; | ||
3 | VantComponent({ | ||
4 | mixins: [touch], | ||
5 | props: { | ||
6 | disabled: Boolean, | ||
7 | useButtonSlot: Boolean, | ||
8 | activeColor: String, | ||
9 | inactiveColor: String, | ||
10 | max: { | ||
11 | type: Number, | ||
12 | value: 100 | ||
13 | }, | ||
14 | min: { | ||
15 | type: Number, | ||
16 | value: 0 | ||
17 | }, | ||
18 | step: { | ||
19 | type: Number, | ||
20 | value: 1 | ||
21 | }, | ||
22 | value: { | ||
23 | type: Number, | ||
24 | value: 0 | ||
25 | }, | ||
26 | barHeight: { | ||
27 | type: String, | ||
28 | value: '2px' | ||
29 | } | ||
30 | }, | ||
31 | watch: { | ||
32 | value(value) { | ||
33 | this.updateValue(value, false); | ||
34 | } | ||
35 | }, | ||
36 | created() { | ||
37 | this.updateValue(this.data.value); | ||
38 | }, | ||
39 | methods: { | ||
40 | onTouchStart(event) { | ||
41 | if (this.data.disabled) | ||
42 | return; | ||
43 | this.touchStart(event); | ||
44 | this.startValue = this.format(this.data.value); | ||
45 | }, | ||
46 | onTouchMove(event) { | ||
47 | if (this.data.disabled) | ||
48 | return; | ||
49 | this.touchMove(event); | ||
50 | this.getRect('.van-slider').then((rect) => { | ||
51 | const diff = this.deltaX / rect.width * 100; | ||
52 | this.updateValue(this.startValue + diff, false, true); | ||
53 | }); | ||
54 | }, | ||
55 | onTouchEnd() { | ||
56 | if (this.data.disabled) | ||
57 | return; | ||
58 | this.updateValue(this.data.value, true); | ||
59 | }, | ||
60 | onClick(event) { | ||
61 | if (this.data.disabled) | ||
62 | return; | ||
63 | this.getRect('.van-slider').then((rect) => { | ||
64 | const value = (event.detail.x - rect.left) / rect.width * 100; | ||
65 | this.updateValue(value, true); | ||
66 | }); | ||
67 | }, | ||
68 | updateValue(value, end, drag) { | ||
69 | value = this.format(value); | ||
70 | this.set({ | ||
71 | value, | ||
72 | barStyle: `width: ${value}%; height: ${this.data.barHeight};` | ||
73 | }); | ||
74 | if (drag) { | ||
75 | this.$emit('drag', { value }); | ||
76 | } | ||
77 | if (end) { | ||
78 | this.$emit('change', value); | ||
79 | } | ||
80 | }, | ||
81 | format(value) { | ||
82 | const { max, min, step } = this.data; | ||
83 | return Math.round(Math.max(min, Math.min(value, max)) / step) * step; | ||
84 | } | ||
85 | } | ||
86 | }); |
src/ui/vant-weapp/slider/index.json
0 → 100755
src/ui/vant-weapp/slider/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="custom-class {{ utils.bem('slider', { disabled }) }}" | ||
5 | style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}" | ||
6 | bind:tap="onClick" | ||
7 | > | ||
8 | <view | ||
9 | class="van-slider__bar" | ||
10 | style="{{ barStyle }}; {{ activeColor ? 'background:' + activeColor : '' }}" | ||
11 | > | ||
12 | <view | ||
13 | class="van-slider__button-wrapper" | ||
14 | bind:touchstart="onTouchStart" | ||
15 | catch:touchmove="onTouchMove" | ||
16 | bind:touchend="onTouchEnd" | ||
17 | bind:touchcancel="onTouchEnd" | ||
18 | > | ||
19 | <slot | ||
20 | wx:if="{{ useButtonSlot }}" | ||
21 | name="button" | ||
22 | /> | ||
23 | <view | ||
24 | wx:else | ||
25 | class="van-slider__button" | ||
26 | /> | ||
27 | </view> | ||
28 | </view> | ||
29 | </view> |
src/ui/vant-weapp/slider/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-slider{position:relative;border-radius:999px;background-color:#e5e5e5}.van-slider__bar{position:relative;border-radius:inherit;background-color:#1989fa}.van-slider__button{width:20px;height:20px;border-radius:50%;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.5)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider__button-wrapper:after{content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%}.van-slider--disabled{opacity:.3} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/steps/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/steps/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { GREEN } from '../common/color'; | ||
3 | VantComponent({ | ||
4 | props: { | ||
5 | icon: String, | ||
6 | steps: Array, | ||
7 | active: Number, | ||
8 | direction: { | ||
9 | type: String, | ||
10 | value: 'horizontal' | ||
11 | }, | ||
12 | activeColor: { | ||
13 | type: String, | ||
14 | value: GREEN | ||
15 | } | ||
16 | } | ||
17 | }); |
src/ui/vant-weapp/steps/index.json
0 → 100755
src/ui/vant-weapp/steps/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="custom-class {{ utils.bem('steps', [direction]) }}"> | ||
4 | <view class="van-step__wrapper"> | ||
5 | <view | ||
6 | wx:for="{{ steps }}" | ||
7 | wx:key="index" | ||
8 | class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline" | ||
9 | > | ||
10 | <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}"> | ||
11 | <view>{{ item.text }}</view> | ||
12 | <view>{{ item.desc }}</view> | ||
13 | </view> | ||
14 | <view class="van-step__circle-container"> | ||
15 | <view class="van-step__circle" wx:if="{{ index !== active }}" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" /> | ||
16 | <van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" /> | ||
17 | </view> | ||
18 | <view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" /> | ||
19 | </view> | ||
20 | </view> | ||
21 | </view> | ||
22 | |||
23 | <wxs module="status"> | ||
24 | function get(index, active) { | ||
25 | if (index < active) { | ||
26 | return 'finish'; | ||
27 | } else if (index === active) { | ||
28 | return 'process'; | ||
29 | } | ||
30 | |||
31 | return ''; | ||
32 | } | ||
33 | |||
34 | module.exports = get; | ||
35 | </wxs> |
src/ui/vant-weapp/steps/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;color:#999}.van-step--finish{color:#333}.van-step__circle{width:5px;height:5px;background-color:#999;border-radius:50%}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;padding:0 8px;background-color:#fff;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}.van-step--horizontal .van-step__title{display:inline-block;font-size:12px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;background-color:#eee;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal.van-step--process{color:#333}.van-step--horizontal.van-step--process .van-step__active{display:block;font-size:12px;line-height:1}.van-step--vertical{padding:10px 10px 10px 0;font-size:14px;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;background-color:#fff;content:""}.van-step--vertical .van-step__active,.van-step--vertical .van-step__circle,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__active{font-size:12px;line-height:1}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;background-color:#eee;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/submit-bar/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/submit-bar/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { safeArea } from '../mixins/safe-area'; | ||
3 | VantComponent({ | ||
4 | mixins: [safeArea()], | ||
5 | classes: [ | ||
6 | 'bar-class', | ||
7 | 'price-class', | ||
8 | 'button-class' | ||
9 | ], | ||
10 | props: { | ||
11 | tip: null, | ||
12 | type: Number, | ||
13 | price: null, | ||
14 | label: String, | ||
15 | loading: Boolean, | ||
16 | disabled: Boolean, | ||
17 | buttonText: String, | ||
18 | currency: { | ||
19 | type: String, | ||
20 | value: '¥' | ||
21 | }, | ||
22 | buttonType: { | ||
23 | type: String, | ||
24 | value: 'danger' | ||
25 | } | ||
26 | }, | ||
27 | computed: { | ||
28 | hasPrice() { | ||
29 | return typeof this.data.price === 'number'; | ||
30 | }, | ||
31 | priceStr() { | ||
32 | return (this.data.price / 100).toFixed(2); | ||
33 | }, | ||
34 | tipStr() { | ||
35 | const { tip } = this.data; | ||
36 | return typeof tip === 'string' ? tip : ''; | ||
37 | } | ||
38 | }, | ||
39 | methods: { | ||
40 | onSubmit(event) { | ||
41 | this.$emit('submit', event.detail); | ||
42 | } | ||
43 | } | ||
44 | }); |
src/ui/vant-weapp/submit-bar/index.json
0 → 100755
src/ui/vant-weapp/submit-bar/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="van-submit-bar custom-class"> | ||
4 | <slot name="top" /> | ||
5 | |||
6 | <view wx:if="{{ tip }}" class="van-submit-bar__tip"> | ||
7 | {{ tipStr }}<slot name="tip" /> | ||
8 | </view> | ||
9 | |||
10 | <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}"> | ||
11 | <slot /> | ||
12 | <view class="van-submit-bar__text"> | ||
13 | <block wx:if="{{ hasPrice }}"> | ||
14 | <text>{{ label || '合计:' }}</text> | ||
15 | <text class="van-submit-bar__price price-class"> | ||
16 | <text class="van-submit-bar__currency">{{ currency }}</text> {{ priceStr }} | ||
17 | </text> | ||
18 | </block> | ||
19 | </view> | ||
20 | <van-button | ||
21 | square | ||
22 | size="large" | ||
23 | type="{{ buttonType }}" | ||
24 | loading="{{ loading }}" | ||
25 | disabled="{{ disabled }}" | ||
26 | class="van-submit-bar__button" | ||
27 | custom-class="button-class" | ||
28 | bind:click="onSubmit" | ||
29 | > | ||
30 | {{ loading ? '' : buttonText }} | ||
31 | </van-button> | ||
32 | </view> | ||
33 | </view> |
src/ui/vant-weapp/submit-bar/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-submit-bar{z-index:100;position:fixed;bottom:0;left:0;width:100%;-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:10px;color:#f56723;font-size:12px;line-height:18px;background-color:#fff7cc}.van-submit-bar__bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:50px;background-color:#fff;font-size:14px}.van-submit-bar__bar--safe{padding-bottom:34px}.van-submit-bar__text{-webkit-flex:1;flex:1;color:#333;font-weight:500;text-align:right}.van-submit-bar__price{color:#f44;font-size:18px;padding-right:12px}.van-submit-bar__currency{font-size:14px}.van-submit-bar__button button{width:110px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/swipe-cell/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/swipe-cell/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { touch } from '../mixins/touch'; | ||
3 | const THRESHOLD = 0.3; | ||
4 | VantComponent({ | ||
5 | props: { | ||
6 | disabled: Boolean, | ||
7 | leftWidth: { | ||
8 | type: Number, | ||
9 | value: 0 | ||
10 | }, | ||
11 | rightWidth: { | ||
12 | type: Number, | ||
13 | value: 0 | ||
14 | }, | ||
15 | asyncClose: Boolean | ||
16 | }, | ||
17 | mixins: [touch], | ||
18 | data: { | ||
19 | catchMove: true | ||
20 | }, | ||
21 | created() { | ||
22 | this.offset = 0; | ||
23 | }, | ||
24 | methods: { | ||
25 | open(position) { | ||
26 | const { leftWidth, rightWidth } = this.data; | ||
27 | const offset = position === 'left' ? leftWidth : -rightWidth; | ||
28 | this.swipeMove(offset); | ||
29 | }, | ||
30 | close() { | ||
31 | this.swipeMove(0); | ||
32 | }, | ||
33 | swipeMove(offset = 0) { | ||
34 | this.offset = offset; | ||
35 | const transform = `translate3d(${offset}px, 0, 0)`; | ||
36 | const transition = this.draging | ||
37 | ? 'none' | ||
38 | : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'; | ||
39 | this.set({ | ||
40 | wrapperStyle: ` | ||
41 | -webkit-transform: ${transform}; | ||
42 | -webkit-transition: ${transition}; | ||
43 | transform: ${transform}; | ||
44 | transition: ${transition}; | ||
45 | ` | ||
46 | }); | ||
47 | }, | ||
48 | swipeLeaveTransition() { | ||
49 | const { leftWidth, rightWidth } = this.data; | ||
50 | const { offset } = this; | ||
51 | if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) { | ||
52 | this.open('right'); | ||
53 | } | ||
54 | else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) { | ||
55 | this.open('left'); | ||
56 | } | ||
57 | else { | ||
58 | this.swipeMove(0); | ||
59 | } | ||
60 | }, | ||
61 | startDrag(event) { | ||
62 | if (this.data.disabled) { | ||
63 | return; | ||
64 | } | ||
65 | this.draging = true; | ||
66 | this.startOffset = this.offset; | ||
67 | this.firstDirection = ''; | ||
68 | this.touchStart(event); | ||
69 | }, | ||
70 | noop() { }, | ||
71 | onDrag(event) { | ||
72 | if (this.data.disabled) { | ||
73 | return; | ||
74 | } | ||
75 | this.touchMove(event); | ||
76 | if (!this.firstDirection) { | ||
77 | this.firstDirection = this.direction; | ||
78 | this.set({ catchMove: this.firstDirection === 'horizontal' }); | ||
79 | } | ||
80 | if (this.firstDirection === 'vertical') { | ||
81 | return; | ||
82 | } | ||
83 | const { leftWidth, rightWidth } = this.data; | ||
84 | const offset = this.startOffset + this.deltaX; | ||
85 | if ((rightWidth > 0 && -offset > rightWidth) || | ||
86 | (leftWidth > 0 && offset > leftWidth)) { | ||
87 | return; | ||
88 | } | ||
89 | this.swipeMove(offset); | ||
90 | }, | ||
91 | endDrag() { | ||
92 | if (this.data.disabled) { | ||
93 | return; | ||
94 | } | ||
95 | this.draging = false; | ||
96 | this.swipeLeaveTransition(); | ||
97 | }, | ||
98 | onClick(event) { | ||
99 | const { key: position = 'outside' } = event.currentTarget.dataset; | ||
100 | this.$emit('click', position); | ||
101 | if (!this.offset) { | ||
102 | return; | ||
103 | } | ||
104 | if (this.data.asyncClose) { | ||
105 | this.$emit('close', { position, instance: this }); | ||
106 | } | ||
107 | else { | ||
108 | this.swipeMove(0); | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | }); |
src/ui/vant-weapp/swipe-cell/index.json
0 → 100755
src/ui/vant-weapp/swipe-cell/index.wxml
0 → 100755
1 | <view | ||
2 | class="van-swipe-cell" | ||
3 | data-key="cell" | ||
4 | catchtap="onClick" | ||
5 | bindtouchstart="startDrag" | ||
6 | catchtouchmove="{{ catchMove ? 'noop' : '' }}" | ||
7 | capture-bind:touchmove="onDrag" | ||
8 | catchtouchend="endDrag" | ||
9 | catchtouchcancel="endDrag" | ||
10 | > | ||
11 | <view style="{{ wrapperStyle }}"> | ||
12 | <view wx:if="{{ leftWidth }}" class="van-swipe-cell__left" data-key="left" catch:tap="onClick"> | ||
13 | <slot name="left" /> | ||
14 | </view> | ||
15 | <slot /> | ||
16 | <view wx:if="{{ rightWidth }}" class="van-swipe-cell__right" data-key="right" catch:tap="onClick"> | ||
17 | <slot name="right" /> | ||
18 | </view> | ||
19 | </view> | ||
20 | </view> |
src/ui/vant-weapp/swipe-cell/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-swipe-cell{position:relative;overflow:hidden}.van-swipe-cell__left,.van-swipe-cell__right{position:absolute;top:0;height:100%}.van-swipe-cell__left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/switch-cell/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/switch-cell/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | props: { | ||
5 | value: null, | ||
6 | title: String, | ||
7 | border: Boolean, | ||
8 | checked: Boolean, | ||
9 | loading: Boolean, | ||
10 | disabled: Boolean, | ||
11 | activeColor: String, | ||
12 | inactiveColor: String, | ||
13 | size: { | ||
14 | type: String, | ||
15 | value: '24px' | ||
16 | }, | ||
17 | activeValue: { | ||
18 | type: null, | ||
19 | value: true | ||
20 | }, | ||
21 | inactiveValue: { | ||
22 | type: null, | ||
23 | value: false | ||
24 | } | ||
25 | }, | ||
26 | watch: { | ||
27 | checked(value) { | ||
28 | this.set({ value }); | ||
29 | } | ||
30 | }, | ||
31 | created() { | ||
32 | this.set({ value: this.data.checked }); | ||
33 | }, | ||
34 | methods: { | ||
35 | onChange(event) { | ||
36 | this.$emit('change', event.detail); | ||
37 | } | ||
38 | } | ||
39 | }); |
src/ui/vant-weapp/switch-cell/index.json
0 → 100755
src/ui/vant-weapp/switch-cell/index.wxml
0 → 100755
1 | <van-cell | ||
2 | center | ||
3 | title="{{ title }}" | ||
4 | border="{{ border }}" | ||
5 | custom-class="van-switch-cell" | ||
6 | > | ||
7 | <van-switch | ||
8 | size="{{ size }}" | ||
9 | checked="{{ checked }}" | ||
10 | loading="{{ loading }}" | ||
11 | disabled="{{ disabled }}" | ||
12 | active-color="{{ activeColor }}" | ||
13 | inactive-color="{{ inactiveColor }}" | ||
14 | active-value="{{ activeValue }}" | ||
15 | inactive-value="{{ inactiveValue }}" | ||
16 | custom-class="van-switch-cell__switch" | ||
17 | bind:change="onChange" | ||
18 | /> | ||
19 | </van-cell> |
src/ui/vant-weapp/switch-cell/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-switch-cell{padding-top:9px;padding-bottom:9px}.van-switch-cell__switch{vertical-align:middle} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/switch/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/switch/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | field: true, | ||
4 | classes: ['node-class'], | ||
5 | props: { | ||
6 | checked: null, | ||
7 | loading: Boolean, | ||
8 | disabled: Boolean, | ||
9 | activeColor: String, | ||
10 | inactiveColor: String, | ||
11 | size: { | ||
12 | type: String, | ||
13 | value: '30px' | ||
14 | }, | ||
15 | activeValue: { | ||
16 | type: null, | ||
17 | value: true | ||
18 | }, | ||
19 | inactiveValue: { | ||
20 | type: null, | ||
21 | value: false | ||
22 | } | ||
23 | }, | ||
24 | watch: { | ||
25 | checked(value) { | ||
26 | this.set({ value }); | ||
27 | } | ||
28 | }, | ||
29 | created() { | ||
30 | this.set({ value: this.data.checked }); | ||
31 | }, | ||
32 | methods: { | ||
33 | onClick() { | ||
34 | const { activeValue, inactiveValue } = this.data; | ||
35 | if (!this.data.disabled && !this.data.loading) { | ||
36 | const checked = this.data.checked === activeValue; | ||
37 | const value = checked ? inactiveValue : activeValue; | ||
38 | this.$emit('input', value); | ||
39 | this.$emit('change', value); | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | }); |
src/ui/vant-weapp/switch/index.json
0 → 100755
src/ui/vant-weapp/switch/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="custom-class {{ utils.bem('switch', { on: value === activeValue, disabled }) }}" | ||
5 | style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}" | ||
6 | bind:tap="onClick" | ||
7 | > | ||
8 | <view class="van-switch__node node-class"> | ||
9 | <van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" /> | ||
10 | </view> | ||
11 | </view> |
src/ui/vant-weapp/switch/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-switch{display:inline-block;position:relative;width:2em;border:1px solid rgba(0,0,0,.1);border-radius:1em;box-sizing:initial;transition:background-color .3s}.van-switch,.van-switch__node{height:1em;background-color:#fff}.van-switch__node{top:0;left:0;position:absolute;border-radius:100%;width:1em;z-index:1;transition:.3s;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05)}.van-switch__loading{top:25%;left:25%;position:absolute!important}.van-switch--on{background-color:#1989fa}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em)}.van-switch--disabled{opacity:.4} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/tab/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tab/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | relation: { | ||
4 | name: 'tabs', | ||
5 | type: 'ancestor' | ||
6 | }, | ||
7 | props: { | ||
8 | dot: Boolean, | ||
9 | info: null, | ||
10 | title: String, | ||
11 | disabled: Boolean, | ||
12 | titleStyle: String | ||
13 | }, | ||
14 | data: { | ||
15 | width: null, | ||
16 | inited: false, | ||
17 | active: false, | ||
18 | animated: false | ||
19 | }, | ||
20 | watch: { | ||
21 | title: 'update', | ||
22 | disabled: 'update', | ||
23 | dot: 'update', | ||
24 | info: 'update', | ||
25 | titleStyle: 'update' | ||
26 | }, | ||
27 | methods: { | ||
28 | update() { | ||
29 | const parent = this.getRelationNodes('../tabs/index')[0]; | ||
30 | if (parent) { | ||
31 | parent.updateTabs(); | ||
32 | } | ||
33 | } | ||
34 | } | ||
35 | }); |
src/ui/vant-weapp/tab/index.json
0 → 100755
src/ui/vant-weapp/tab/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | wx:if="{{ animated || inited }}" | ||
5 | class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}" | ||
6 | style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}" | ||
7 | > | ||
8 | <slot /> | ||
9 | </view> |
src/ui/vant-weapp/tab/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-tab__pane{box-sizing:border-box;overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/tabbar-item/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tabbar-item/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | props: { | ||
4 | info: null, | ||
5 | icon: String, | ||
6 | dot: Boolean | ||
7 | }, | ||
8 | relation: { | ||
9 | name: 'tabbar', | ||
10 | type: 'ancestor', | ||
11 | linked(target) { | ||
12 | this.parent = target; | ||
13 | } | ||
14 | }, | ||
15 | data: { | ||
16 | active: false | ||
17 | }, | ||
18 | methods: { | ||
19 | onClick() { | ||
20 | if (this.parent) { | ||
21 | this.parent.onChange(this); | ||
22 | } | ||
23 | this.$emit('click'); | ||
24 | }, | ||
25 | setActive({ active, color }) { | ||
26 | if (this.data.active !== active) { | ||
27 | return this.set({ active, color }); | ||
28 | } | ||
29 | return Promise.resolve(); | ||
30 | } | ||
31 | } | ||
32 | }); |
src/ui/vant-weapp/tabbar-item/index.json
0 → 100755
src/ui/vant-weapp/tabbar-item/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="{{ utils.bem('tabbar-item', { active }) }} custom-class" | ||
5 | style="{{ active && color ? 'color: ' + color : '' }}" | ||
6 | bind:tap="onClick" | ||
7 | > | ||
8 | <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}"> | ||
9 | <van-icon | ||
10 | wx:if="{{ icon }}" | ||
11 | name="{{ icon }}" | ||
12 | customStyle="display: block" | ||
13 | /> | ||
14 | <block wx:else> | ||
15 | <slot | ||
16 | wx:if="{{ active }}" | ||
17 | name="icon-active" | ||
18 | /> | ||
19 | <slot wx:else name="icon" /> | ||
20 | </block> | ||
21 | <van-info | ||
22 | wx:if="{{ info !== null }}" | ||
23 | info="{{ info }}" | ||
24 | custom-style="margin-top: 2px" | ||
25 | /> | ||
26 | </view> | ||
27 | <view class="van-tabbar-item__text"> | ||
28 | <slot /> | ||
29 | </view> | ||
30 | </view> |
src/ui/vant-weapp/tabbar-item/index.wxss
0 → 100755
1 | @import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{color:#7d7e80;height:100%;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon--dot:after{top:0;right:-8px;width:8px;height:8px;content:" ";position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:30px;height:18px;display:block}.van-tabbar-item--active{color:#1989fa} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/tabbar/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tabbar/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { safeArea } from '../mixins/safe-area'; | ||
3 | VantComponent({ | ||
4 | mixins: [safeArea()], | ||
5 | relation: { | ||
6 | name: 'tabbar-item', | ||
7 | type: 'descendant', | ||
8 | linked(target) { | ||
9 | this.children = this.children || []; | ||
10 | this.children.push(target); | ||
11 | this.setActiveItem(); | ||
12 | }, | ||
13 | unlinked(target) { | ||
14 | this.children = this.children || []; | ||
15 | this.children = this.children.filter(item => item !== target); | ||
16 | this.setActiveItem(); | ||
17 | } | ||
18 | }, | ||
19 | props: { | ||
20 | active: Number, | ||
21 | activeColor: String, | ||
22 | fixed: { | ||
23 | type: Boolean, | ||
24 | value: true | ||
25 | }, | ||
26 | zIndex: { | ||
27 | type: Number, | ||
28 | value: 1 | ||
29 | } | ||
30 | }, | ||
31 | watch: { | ||
32 | active(active) { | ||
33 | this.currentActive = active; | ||
34 | this.setActiveItem(); | ||
35 | } | ||
36 | }, | ||
37 | created() { | ||
38 | this.currentActive = this.data.active; | ||
39 | }, | ||
40 | methods: { | ||
41 | setActiveItem() { | ||
42 | if (!Array.isArray(this.children) || !this.children.length) { | ||
43 | return Promise.resolve(); | ||
44 | } | ||
45 | return Promise.all(this.children.map((item, index) => item.setActive({ | ||
46 | active: index === this.currentActive, | ||
47 | color: this.data.activeColor | ||
48 | }))); | ||
49 | }, | ||
50 | onChange(child) { | ||
51 | const active = (this.children || []).indexOf(child); | ||
52 | if (active !== this.currentActive && active !== -1) { | ||
53 | this.currentActive = active; | ||
54 | this.setActiveItem().then(() => { | ||
55 | this.$emit('change', active); | ||
56 | }); | ||
57 | } | ||
58 | } | ||
59 | } | ||
60 | }); |
src/ui/vant-weapp/tabbar/index.json
0 → 100755
src/ui/vant-weapp/tabbar/index.wxml
0 → 100755
src/ui/vant-weapp/tabbar/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-tabbar{display:-webkit-flex;display:flex;width:100%;height:50px;background-color:#fff}.van-tabbar--fixed{position:fixed;bottom:0;left:0}.van-tabbar--safe{padding-bottom:34px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/tabs/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tabs/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { touch } from '../mixins/touch'; | ||
3 | VantComponent({ | ||
4 | mixins: [touch], | ||
5 | classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'], | ||
6 | relation: { | ||
7 | name: 'tab', | ||
8 | type: 'descendant', | ||
9 | linked(child) { | ||
10 | this.child.push(child); | ||
11 | this.updateTabs(this.data.tabs.concat(child.data)); | ||
12 | }, | ||
13 | unlinked(child) { | ||
14 | const index = this.child.indexOf(child); | ||
15 | const { tabs } = this.data; | ||
16 | tabs.splice(index, 1); | ||
17 | this.child.splice(index, 1); | ||
18 | this.updateTabs(tabs); | ||
19 | } | ||
20 | }, | ||
21 | props: { | ||
22 | color: String, | ||
23 | sticky: Boolean, | ||
24 | animated: Boolean, | ||
25 | swipeable: Boolean, | ||
26 | lineWidth: { | ||
27 | type: Number, | ||
28 | value: -1 | ||
29 | }, | ||
30 | lineHeight: { | ||
31 | type: Number, | ||
32 | value: -1 | ||
33 | }, | ||
34 | active: { | ||
35 | type: Number, | ||
36 | value: 0 | ||
37 | }, | ||
38 | type: { | ||
39 | type: String, | ||
40 | value: 'line' | ||
41 | }, | ||
42 | border: { | ||
43 | type: Boolean, | ||
44 | value: true | ||
45 | }, | ||
46 | duration: { | ||
47 | type: Number, | ||
48 | value: 0.3 | ||
49 | }, | ||
50 | zIndex: { | ||
51 | type: Number, | ||
52 | value: 1 | ||
53 | }, | ||
54 | swipeThreshold: { | ||
55 | type: Number, | ||
56 | value: 4 | ||
57 | }, | ||
58 | offsetTop: { | ||
59 | type: Number, | ||
60 | value: 0 | ||
61 | } | ||
62 | }, | ||
63 | data: { | ||
64 | tabs: [], | ||
65 | lineStyle: '', | ||
66 | scrollLeft: 0, | ||
67 | scrollable: false, | ||
68 | trackStyle: '', | ||
69 | wrapStyle: '', | ||
70 | position: '' | ||
71 | }, | ||
72 | watch: { | ||
73 | swipeThreshold() { | ||
74 | this.set({ | ||
75 | scrollable: this.child.length > this.data.swipeThreshold | ||
76 | }); | ||
77 | }, | ||
78 | color: 'setLine', | ||
79 | lineWidth: 'setLine', | ||
80 | lineHeight: 'setLine', | ||
81 | active: 'setActiveTab', | ||
82 | animated: 'setTrack', | ||
83 | offsetTop: 'setWrapStyle' | ||
84 | }, | ||
85 | beforeCreate() { | ||
86 | this.child = []; | ||
87 | }, | ||
88 | mounted() { | ||
89 | this.setLine(true); | ||
90 | this.setTrack(); | ||
91 | this.scrollIntoView(); | ||
92 | this.getRect('.van-tabs__wrap').then((rect) => { | ||
93 | this.navHeight = rect.height; | ||
94 | this.observerContentScroll(); | ||
95 | }); | ||
96 | }, | ||
97 | destroyed() { | ||
98 | this.createIntersectionObserver().disconnect(); | ||
99 | }, | ||
100 | methods: { | ||
101 | updateTabs(tabs) { | ||
102 | tabs = tabs || this.data.tabs; | ||
103 | this.set({ | ||
104 | tabs, | ||
105 | scrollable: tabs.length > this.data.swipeThreshold | ||
106 | }); | ||
107 | this.setActiveTab(); | ||
108 | }, | ||
109 | trigger(eventName, index) { | ||
110 | this.$emit(eventName, { | ||
111 | index, | ||
112 | title: this.data.tabs[index].title | ||
113 | }); | ||
114 | }, | ||
115 | onTap(event) { | ||
116 | const { index } = event.currentTarget.dataset; | ||
117 | if (this.data.tabs[index].disabled) { | ||
118 | this.trigger('disabled', index); | ||
119 | } | ||
120 | else { | ||
121 | this.trigger('click', index); | ||
122 | this.setActive(index); | ||
123 | } | ||
124 | }, | ||
125 | setActive(active) { | ||
126 | if (active !== this.data.active) { | ||
127 | this.trigger('change', active); | ||
128 | this.set({ active }); | ||
129 | this.setActiveTab(); | ||
130 | } | ||
131 | }, | ||
132 | setLine(skipTransition) { | ||
133 | if (this.data.type !== 'line') { | ||
134 | return; | ||
135 | } | ||
136 | const { color, active, duration, lineWidth, lineHeight } = this.data; | ||
137 | this.getRect('.van-tab', true).then((rects) => { | ||
138 | const rect = rects[active]; | ||
139 | const width = lineWidth !== -1 ? lineWidth : rect.width / 2; | ||
140 | const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : ''; | ||
141 | let left = rects | ||
142 | .slice(0, active) | ||
143 | .reduce((prev, curr) => prev + curr.width, 0); | ||
144 | left += (rect.width - width) / 2; | ||
145 | const transition = skipTransition | ||
146 | ? '' | ||
147 | : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`; | ||
148 | this.set({ | ||
149 | lineStyle: ` | ||
150 | ${height} | ||
151 | width: ${width}px; | ||
152 | background-color: ${color}; | ||
153 | -webkit-transform: translateX(${left}px); | ||
154 | transform: translateX(${left}px); | ||
155 | ${transition} | ||
156 | ` | ||
157 | }); | ||
158 | }); | ||
159 | }, | ||
160 | setTrack() { | ||
161 | const { animated, active, duration } = this.data; | ||
162 | if (!animated) | ||
163 | return ''; | ||
164 | this.getRect('.van-tabs__content').then((rect) => { | ||
165 | const { width } = rect; | ||
166 | this.set({ | ||
167 | trackStyle: ` | ||
168 | width: ${width * this.child.length}px; | ||
169 | left: ${-1 * active * width}px; | ||
170 | transition: left ${duration}s; | ||
171 | display: -webkit-box; | ||
172 | display: flex; | ||
173 | ` | ||
174 | }); | ||
175 | const props = { width, animated }; | ||
176 | this.child.forEach((item) => { | ||
177 | item.set(props); | ||
178 | }); | ||
179 | }); | ||
180 | }, | ||
181 | setActiveTab() { | ||
182 | this.child.forEach((item, index) => { | ||
183 | const data = { | ||
184 | active: index === this.data.active | ||
185 | }; | ||
186 | if (data.active) { | ||
187 | data.inited = true; | ||
188 | } | ||
189 | if (data.active !== item.data.active) { | ||
190 | item.set(data); | ||
191 | } | ||
192 | }); | ||
193 | this.set({}, () => { | ||
194 | this.setLine(); | ||
195 | this.setTrack(); | ||
196 | this.scrollIntoView(); | ||
197 | }); | ||
198 | }, | ||
199 | // scroll active tab into view | ||
200 | scrollIntoView() { | ||
201 | const { active, scrollable } = this.data; | ||
202 | if (!scrollable) { | ||
203 | return; | ||
204 | } | ||
205 | Promise.all([ | ||
206 | this.getRect('.van-tab', true), | ||
207 | this.getRect('.van-tabs__nav') | ||
208 | ]).then(([tabRects, navRect]) => { | ||
209 | const tabRect = tabRects[active]; | ||
210 | const offsetLeft = tabRects | ||
211 | .slice(0, active) | ||
212 | .reduce((prev, curr) => prev + curr.width, 0); | ||
213 | this.set({ | ||
214 | scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2 | ||
215 | }); | ||
216 | }); | ||
217 | }, | ||
218 | onTouchStart(event) { | ||
219 | if (!this.data.swipeable) | ||
220 | return; | ||
221 | this.touchStart(event); | ||
222 | }, | ||
223 | onTouchMove(event) { | ||
224 | if (!this.data.swipeable) | ||
225 | return; | ||
226 | this.touchMove(event); | ||
227 | }, | ||
228 | // watch swipe touch end | ||
229 | onTouchEnd() { | ||
230 | if (!this.data.swipeable) | ||
231 | return; | ||
232 | const { active, tabs } = this.data; | ||
233 | const { direction, deltaX, offsetX } = this; | ||
234 | const minSwipeDistance = 50; | ||
235 | if (direction === 'horizontal' && offsetX >= minSwipeDistance) { | ||
236 | if (deltaX > 0 && active !== 0) { | ||
237 | this.setActive(active - 1); | ||
238 | } | ||
239 | else if (deltaX < 0 && active !== tabs.length - 1) { | ||
240 | this.setActive(active + 1); | ||
241 | } | ||
242 | } | ||
243 | }, | ||
244 | setWrapStyle() { | ||
245 | const { offsetTop, position } = this.data; | ||
246 | let wrapStyle; | ||
247 | switch (position) { | ||
248 | case 'top': | ||
249 | wrapStyle = ` | ||
250 | top: ${offsetTop}px; | ||
251 | position: fixed; | ||
252 | `; | ||
253 | break; | ||
254 | case 'bottom': | ||
255 | wrapStyle = ` | ||
256 | top: auto; | ||
257 | bottom: 0; | ||
258 | `; | ||
259 | break; | ||
260 | default: | ||
261 | wrapStyle = ''; | ||
262 | } | ||
263 | // cut down `set` | ||
264 | if (wrapStyle === this.data.wrapStyle) | ||
265 | return; | ||
266 | this.set({ wrapStyle }); | ||
267 | }, | ||
268 | observerContentScroll() { | ||
269 | if (!this.data.sticky) { | ||
270 | return; | ||
271 | } | ||
272 | const { offsetTop } = this.data; | ||
273 | const { windowHeight } = wx.getSystemInfoSync(); | ||
274 | this.createIntersectionObserver().disconnect(); | ||
275 | this.createIntersectionObserver() | ||
276 | .relativeToViewport({ top: -(this.navHeight + offsetTop) }) | ||
277 | .observe('.van-tabs', (res) => { | ||
278 | const { top } = res.boundingClientRect; | ||
279 | if (top > offsetTop) { | ||
280 | return; | ||
281 | } | ||
282 | const position = res.intersectionRatio > 0 ? 'top' : 'bottom'; | ||
283 | this.$emit('scroll', { | ||
284 | scrollTop: top + offsetTop, | ||
285 | isFixed: position === 'top' | ||
286 | }); | ||
287 | this.setPosition(position); | ||
288 | }); | ||
289 | this.createIntersectionObserver() | ||
290 | .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) }) | ||
291 | .observe('.van-tabs', (res) => { | ||
292 | const { top, bottom } = res.boundingClientRect; | ||
293 | if (bottom < this.navHeight) { | ||
294 | return; | ||
295 | } | ||
296 | const position = res.intersectionRatio > 0 ? 'top' : ''; | ||
297 | this.$emit('scroll', { | ||
298 | scrollTop: top + offsetTop, | ||
299 | isFixed: position === 'top' | ||
300 | }); | ||
301 | this.setPosition(position); | ||
302 | }); | ||
303 | }, | ||
304 | setPosition(position) { | ||
305 | if (position !== this.data.position) { | ||
306 | this.set({ position }).then(() => { | ||
307 | this.setWrapStyle(); | ||
308 | }); | ||
309 | } | ||
310 | } | ||
311 | } | ||
312 | }); |
src/ui/vant-weapp/tabs/index.json
0 → 100755
src/ui/vant-weapp/tabs/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view class="custom-class {{ utils.bem('tabs', [type]) }}"> | ||
4 | <view style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}"> | ||
5 | <slot name="nav-left" /> | ||
6 | |||
7 | <scroll-view | ||
8 | scroll-x="{{ scrollable }}" | ||
9 | scroll-with-animation | ||
10 | scroll-left="{{ scrollLeft }}" | ||
11 | class="van-tabs__scroll--{{ type }}" | ||
12 | style="{{ color ? 'border-color: ' + color : '' }}" | ||
13 | > | ||
14 | <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class"> | ||
15 | <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" /> | ||
16 | <view | ||
17 | wx:for="{{ tabs }}" | ||
18 | wx:key="index" | ||
19 | data-index="{{ index }}" | ||
20 | class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}" | ||
21 | style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}" | ||
22 | bind:tap="onTap" | ||
23 | > | ||
24 | <view class="van-ellipsis {{ utils.bem('tab__title', { dot: item.dot }) }}" style="{{ item.titleStyle }}"> | ||
25 | {{ item.title }} | ||
26 | <van-info | ||
27 | wx:if="{{ item.info !== null }}" | ||
28 | info="{{ item.info }}" | ||
29 | custom-class="van-tab__title__info" | ||
30 | /> | ||
31 | </view> | ||
32 | </view> | ||
33 | </view> | ||
34 | </scroll-view> | ||
35 | |||
36 | <slot name="nav-right" /> | ||
37 | </view> | ||
38 | <view | ||
39 | class="van-tabs__content" | ||
40 | bind:touchstart="onTouchStart" | ||
41 | bind:touchmove="onTouchMove" | ||
42 | bind:touchend="onTouchEnd" | ||
43 | bind:touchcancel="onTouchEnd" | ||
44 | > | ||
45 | <view class="van-tabs__track" style="{{ trackStyle }}"> | ||
46 | <slot /> | ||
47 | </view> | ||
48 | </view> | ||
49 | </view> |
src/ui/vant-weapp/tabs/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{position:absolute;top:0;right:0;left:0;display:-webkit-flex;display:flex;background-color:#fff}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll--card{border:1px solid #f44;border-radius:2px}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--line{height:100%}.van-tabs__nav--card{height:30px}.van-tabs__nav--card .van-tab{line-height:30px;color:#f44;border-right:1px solid #f44}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;background-color:#f44}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;background-color:#f44;border-radius:3px}.van-tabs--line{padding-top:44px}.van-tabs--line .van-tabs__wrap{height:44px}.van-tabs--card{padding-top:30px;margin:0 15px}.van-tabs--card .van-tabs__wrap{height:30px}.van-tabs__content{overflow:hidden}.van-tab,.van-tabs__track{position:relative}.van-tab{min-width:0;padding:0 5px;font-size:14px;line-height:44px;color:#7d7e80;text-align:center;cursor:pointer;box-sizing:border-box;-webkit-flex:1;flex:1}.van-tab--active{font-weight:500;color:#333}.van-tab--disabled{color:#c9c9c9}.van-tab__title--dot:after{display:inline-block;width:8px;height:8px;vertical-align:middle;background-color:#f44;border-radius:100%;content:""}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/tag/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tag/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | import { RED, BLUE, GREEN } from '../common/color'; | ||
3 | const DEFAULT_COLOR = '#999'; | ||
4 | const COLOR_MAP = { | ||
5 | danger: RED, | ||
6 | primary: BLUE, | ||
7 | success: GREEN | ||
8 | }; | ||
9 | VantComponent({ | ||
10 | props: { | ||
11 | size: String, | ||
12 | type: String, | ||
13 | mark: Boolean, | ||
14 | color: String, | ||
15 | plain: Boolean, | ||
16 | round: Boolean, | ||
17 | textColor: String | ||
18 | }, | ||
19 | computed: { | ||
20 | style() { | ||
21 | const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR; | ||
22 | const key = this.data.plain ? 'color' : 'background-color'; | ||
23 | const style = { [key]: color }; | ||
24 | if (this.data.textColor) { | ||
25 | style.color = this.data.textColor; | ||
26 | } | ||
27 | return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';'); | ||
28 | } | ||
29 | } | ||
30 | }); |
src/ui/vant-weapp/tag/index.json
0 → 100755
src/ui/vant-weapp/tag/index.wxml
0 → 100755
src/ui/vant-weapp/tag/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-tag{color:#fff;font-size:10px;padding:.2em .5em;line-height:normal;border-radius:.2em;display:inline-block}.van-tag:after{border-color:currentColor;border-radius:.4em}.van-tag--mark{padding-right:.6em;border-radius:0 .8em .8em 0}.van-tag--mark:after{border-radius:0 1.6em 1.6em 0}.van-tag--round{border-radius:.8em}.van-tag--round:after{border-radius:1.6em}.van-tag--medium{font-size:12px}.van-tag--large{font-size:14px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/toast/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/toast/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | VantComponent({ | ||
3 | props: { | ||
4 | show: Boolean, | ||
5 | mask: Boolean, | ||
6 | message: String, | ||
7 | forbidClick: Boolean, | ||
8 | zIndex: { | ||
9 | type: Number, | ||
10 | value: 1000 | ||
11 | }, | ||
12 | type: { | ||
13 | type: String, | ||
14 | value: 'text' | ||
15 | }, | ||
16 | loadingType: { | ||
17 | type: String, | ||
18 | value: 'circular' | ||
19 | }, | ||
20 | position: { | ||
21 | type: String, | ||
22 | value: 'middle' | ||
23 | } | ||
24 | }, | ||
25 | methods: { | ||
26 | clear() { | ||
27 | this.set({ | ||
28 | show: false | ||
29 | }); | ||
30 | }, | ||
31 | // for prevent touchmove | ||
32 | noop() { } | ||
33 | } | ||
34 | }); |
src/ui/vant-weapp/toast/index.json
0 → 100755
src/ui/vant-weapp/toast/index.wxml
0 → 100755
1 | <van-overlay | ||
2 | wx:if="{{ mask || forbidClick }}" | ||
3 | show="{{ show }}" | ||
4 | mask="{{ mask }}" | ||
5 | z-index="{{ zIndex }}" | ||
6 | /> | ||
7 | <van-transition | ||
8 | show="{{ show }}" | ||
9 | custom-style="z-index: {{ zIndex }}" | ||
10 | custom-class="van-toast__container" | ||
11 | > | ||
12 | <view | ||
13 | class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}" | ||
14 | catch:touchmove="noop" | ||
15 | > | ||
16 | <!-- text only --> | ||
17 | <text wx:if="{{ type === 'text' }}">{{ message }}</text> | ||
18 | |||
19 | <!-- with icon --> | ||
20 | <block wx:else> | ||
21 | <van-loading | ||
22 | wx:if="{{ type === 'loading' }}" | ||
23 | color="white" | ||
24 | type="{{ loadingType }}" | ||
25 | custom-class="van-toast__loading" | ||
26 | /> | ||
27 | <van-icon wx:else class="van-toast__icon" name="{{ type }}" /> | ||
28 | <text wx:if="{{ message }}" class="van-toast__text">{{ message }}</text> | ||
29 | </block> | ||
30 | </view> | ||
31 | </van-transition> |
src/ui/vant-weapp/toast/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-toast{display:-webkit-flex;display:flex;color:#fff;font-size:14px;line-height:20px;border-radius:4px;word-break:break-all;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;box-sizing:initial;background-color:rgba(51,51,51,.88);white-space:pre-wrap}.van-toast__container{position:fixed;top:50%;left:50%;max-width:70%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:8px 12px;min-width:96px}.van-toast--icon{width:90px;padding:15px;min-height:90px}.van-toast--icon .van-toast__icon{font-size:48px}.van-toast--icon .van-toast__text{padding-top:5px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translateY(-30vh);transform:translateY(-30vh)}.van-toast--bottom{-webkit-transform:translateY(30vh);transform:translateY(30vh)} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/ui/vant-weapp/toast/toast.d.ts
0 → 100755
1 | declare type ToastMessage = string | number; | ||
2 | export declare type ToastOptions = { | ||
3 | show?: boolean; | ||
4 | type?: string; | ||
5 | mask?: boolean; | ||
6 | zIndex?: number; | ||
7 | context?: any; | ||
8 | position?: string; | ||
9 | duration?: number; | ||
10 | selector?: string; | ||
11 | forbidClick?: boolean; | ||
12 | loadingType?: string; | ||
13 | message?: ToastMessage; | ||
14 | }; | ||
15 | export interface Toast { | ||
16 | (message: ToastOptions | ToastMessage, options?: ToastOptions): Weapp.Component; | ||
17 | loading?(options?: ToastOptions | ToastMessage): Weapp.Component; | ||
18 | success?(options?: ToastOptions | ToastMessage): Weapp.Component; | ||
19 | fail?(options?: ToastOptions | ToastMessage): Weapp.Component; | ||
20 | clear?(): void; | ||
21 | setDefaultOptions?(options: ToastOptions): void; | ||
22 | resetDefaultOptions?(): void; | ||
23 | } | ||
24 | declare const Toast: Toast; | ||
25 | export default Toast; |
src/ui/vant-weapp/toast/toast.js
0 → 100755
1 | import { isObj } from '../common/utils'; | ||
2 | const defaultOptions = { | ||
3 | type: 'text', | ||
4 | mask: false, | ||
5 | message: '', | ||
6 | show: true, | ||
7 | zIndex: 1000, | ||
8 | duration: 3000, | ||
9 | position: 'middle', | ||
10 | forbidClick: false, | ||
11 | loadingType: 'circular', | ||
12 | selector: '#van-toast' | ||
13 | }; | ||
14 | let queue = []; | ||
15 | let currentOptions = Object.assign({}, defaultOptions); | ||
16 | function parseOptions(message) { | ||
17 | return isObj(message) ? message : { message }; | ||
18 | } | ||
19 | function getContext() { | ||
20 | const pages = getCurrentPages(); | ||
21 | return pages[pages.length - 1]; | ||
22 | } | ||
23 | const Toast = (options = {}) => { | ||
24 | options = Object.assign({}, currentOptions, parseOptions(options)); | ||
25 | const context = options.context || getContext(); | ||
26 | const toast = context.selectComponent(options.selector); | ||
27 | if (!toast) { | ||
28 | console.warn('未找到 van-toast 节点,请确认 selector 及 context 是否正确'); | ||
29 | return; | ||
30 | } | ||
31 | delete options.context; | ||
32 | delete options.selector; | ||
33 | queue.push(toast); | ||
34 | toast.set(options); | ||
35 | clearTimeout(toast.timer); | ||
36 | if (options.duration > 0) { | ||
37 | toast.timer = setTimeout(() => { | ||
38 | toast.clear(); | ||
39 | queue = queue.filter(item => item !== toast); | ||
40 | }, options.duration); | ||
41 | } | ||
42 | return toast; | ||
43 | }; | ||
44 | const createMethod = type => options => Toast(Object.assign({ type }, parseOptions(options))); | ||
45 | ['loading', 'success', 'fail'].forEach(method => { | ||
46 | Toast[method] = createMethod(method); | ||
47 | }); | ||
48 | Toast.clear = () => { | ||
49 | queue.forEach(toast => { | ||
50 | toast.clear(); | ||
51 | }); | ||
52 | queue = []; | ||
53 | }; | ||
54 | Toast.setDefaultOptions = options => { | ||
55 | Object.assign(currentOptions, options); | ||
56 | }; | ||
57 | Toast.resetDefaultOptions = () => { | ||
58 | currentOptions = Object.assign({}, defaultOptions); | ||
59 | }; | ||
60 | export default Toast; |
src/ui/vant-weapp/tree-select/index.d.ts
0 → 100755
1 | export {}; |
src/ui/vant-weapp/tree-select/index.js
0 → 100755
1 | import { VantComponent } from '../common/component'; | ||
2 | const ITEM_HEIGHT = 44; | ||
3 | VantComponent({ | ||
4 | classes: [ | ||
5 | 'main-item-class', | ||
6 | 'content-item-class', | ||
7 | 'main-active-class', | ||
8 | 'content-active-class', | ||
9 | 'main-disabled-class', | ||
10 | 'content-disabled-class' | ||
11 | ], | ||
12 | props: { | ||
13 | items: Array, | ||
14 | mainActiveIndex: { | ||
15 | type: Number, | ||
16 | value: 0 | ||
17 | }, | ||
18 | activeId: { | ||
19 | type: [Number, String] | ||
20 | }, | ||
21 | maxHeight: { | ||
22 | type: Number, | ||
23 | value: 300 | ||
24 | } | ||
25 | }, | ||
26 | data: { | ||
27 | subItems: [], | ||
28 | mainHeight: 0, | ||
29 | itemHeight: 0 | ||
30 | }, | ||
31 | watch: { | ||
32 | items() { | ||
33 | this.updateSubItems().then(() => { | ||
34 | this.updateMainHeight(); | ||
35 | }); | ||
36 | }, | ||
37 | maxHeight() { | ||
38 | this.updateItemHeight(this.data.subItems); | ||
39 | this.updateMainHeight(); | ||
40 | }, | ||
41 | mainActiveIndex: 'updateSubItems' | ||
42 | }, | ||
43 | methods: { | ||
44 | // 当一个子项被选择时 | ||
45 | onSelectItem(event) { | ||
46 | const { item } = event.currentTarget.dataset; | ||
47 | if (!item.disabled) { | ||
48 | this.$emit('click-item', item); | ||
49 | } | ||
50 | }, | ||
51 | // 当一个导航被点击时 | ||
52 | onClickNav(event) { | ||
53 | const { index } = event.currentTarget.dataset; | ||
54 | const item = this.data.items[index]; | ||
55 | if (!item.disabled) { | ||
56 | this.$emit('click-nav', { index }); | ||
57 | } | ||
58 | }, | ||
59 | // 更新子项列表 | ||
60 | updateSubItems() { | ||
61 | const { items, mainActiveIndex } = this.data; | ||
62 | const { children = [] } = items[mainActiveIndex] || {}; | ||
63 | this.updateItemHeight(children); | ||
64 | return this.set({ subItems: children }); | ||
65 | }, | ||
66 | // 更新组件整体高度,根据最大高度和当前组件需要展示的高度来决定 | ||
67 | updateMainHeight() { | ||
68 | const { items = [], subItems = [] } = this.data; | ||
69 | const maxHeight = Math.max(items.length * ITEM_HEIGHT, subItems.length * ITEM_HEIGHT); | ||
70 | this.set({ mainHeight: Math.min(maxHeight, this.data.maxHeight) }); | ||
71 | }, | ||
72 | // 更新子项列表高度,根据可展示的最大高度和当前子项列表的高度决定 | ||
73 | updateItemHeight(subItems) { | ||
74 | const itemHeight = Math.min(subItems.length * ITEM_HEIGHT, this.data.maxHeight); | ||
75 | return this.set({ itemHeight }); | ||
76 | } | ||
77 | } | ||
78 | }); |
src/ui/vant-weapp/tree-select/index.json
0 → 100755
src/ui/vant-weapp/tree-select/index.wxml
0 → 100755
1 | <wxs src="../wxs/utils.wxs" module="utils" /> | ||
2 | |||
3 | <view | ||
4 | class="van-tree-select" | ||
5 | style="height: {{ mainHeight }}px" | ||
6 | > | ||
7 | <scroll-view scroll-y class="van-tree-select__nav"> | ||
8 | <view | ||
9 | wx:for="{{ items }}" | ||
10 | wx:key="index" | ||
11 | class="van-ellipsis main-item-class {{ utils.bem('tree-select__nitem', { active: mainActiveIndex === index, disabled: item.disabled }) }} {{ mainActiveIndex === index ? 'main-active-class' : '' }} {{ item.disabled ? 'main-disabled-class' : '' }}" | ||
12 | data-index="{{ index }}" | ||
13 | bind:tap="onClickNav" | ||
14 | > | ||
15 | {{ item.text }} | ||
16 | </view> | ||
17 | </scroll-view> | ||
18 | <scroll-view | ||
19 | scroll-y | ||
20 | class="van-tree-select__content" | ||
21 | style="height: {{ itemHeight }}px" | ||
22 | > | ||
23 | <view | ||
24 | wx:for="{{ subItems }}" | ||
25 | wx:key="id" | ||
26 | class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }) }} {{ activeId === item.id ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}" | ||
27 | data-item="{{ item }}" | ||
28 | bind:tap="onSelectItem" | ||
29 | > | ||
30 | {{ item.text }} | ||
31 | <van-icon | ||
32 | wx:if="{{ activeId === item.id }}" | ||
33 | name="checked" | ||
34 | size="16px" | ||
35 | class="van-tree-select__selected" | ||
36 | /> | ||
37 | </view> | ||
38 | </scroll-view> | ||
39 | </view> |
src/ui/vant-weapp/tree-select/index.wxss
0 → 100755
1 | @import '../common/index.wxss';.van-tree-select{position:relative;font-size:14px;-webkit-user-select:none;user-select:none}.van-tree-select__nav{position:absolute;top:0;bottom:0;left:0;width:35%;min-width:120px;background-color:#fafafa}.van-tree-select__nitem{position:relative;padding:0 9px 0 15px;line-height:44px}.van-tree-select__nitem--active:after{position:absolute;top:0;bottom:0;left:0;width:3.6px;background-color:#f44;content:""}.van-tree-select__nitem--active{font-weight:700;background-color:#fff}.van-tree-select__nitem--disabled{color:#999}.van-tree-select__content{width:65%;padding-left:15px;margin-left:35%;background-color:#fff;box-sizing:border-box}.van-tree-select__item{position:relative;font-weight:700;line-height:44px}.van-tree-select__item--active{color:#f44}.van-tree-select__item--disabled{color:#999}.van-tree-select__selected{position:absolute;top:0;right:15px;bottom:0;height:24px;margin:auto 0;line-height:24px} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment