1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
| /**
| * 选择器逻辑事件
| * @param {String} keyword 关键词
| * @param {Array} optionList 所有选项
| * @param {Function} valueToLabel 选项值转文本方法
| */
| function behaviorOptions(keyword, optionListFunc, valueToLabel) {
| return {
| properties: {
| // 显示模式，0：弹出框选择；1：宫格平铺
| [`${keyword}Mode`]: {
| type: Number,
| value: 0,
| },
| [`${keyword}`]: {
| type: String,
| observer(value) {
| this._setType(keyword, value);
| },
| },
| // 2023.4.6：由于选项的值是Array类型，无法使用双向绑定
| // [`${keyword}Value`]: {
| // type: Array,
| // },
| },
| data: {
| [`${keyword}ValueToLabel`]: valueToLabel,
| [`${keyword}Index`]: 0,
| [`${keyword}Text`]: '',
| [`${keyword}Value`]: [],
| [`${keyword}Types`]: [],
| },
| lifetimes: {
| attached: function () {
| // 在组件实例进入页面节点树时执行
| let optionList = optionListFunc;
| if (typeof optionListFunc === 'function') {
| optionList = optionListFunc();
| }
| this.setSelectOptions(keyword, optionList);
| this.onInitialValue(keyword);
| },
| },
| methods: {
| // 设置选项范围
| setSelectOptions(key, optionList, i = 0) {
| if (optionList && optionList.length > 0) {
| const s = optionList;
| let first = s[i];
| this.setData({
| [`${key}Text`]: first.label,
| [`${key}Value`]: [first.value],
| [`${key}Types`]: s,
| });
| }
| },
| // 初始值
| onInitialValue(key) {
| let { [`${key}Text`]: text, [`${key}Value`]: value } = this.data;
| this.triggerEvent(`${key}InitValue`, {
| [`${key}Text`]: text,
| [`${key}Value`]: value,
| });
| },
| // 弹出框
| onPicker(e) {
| const { key } = e.currentTarget.dataset;
| this.setData({ [`${key}Visible`]: true });
| },
| onPickerChange(e) {
| const { key } = e.currentTarget.dataset;
| const { label, value } = e.detail;
|
| this.setData({
| [`${key}Visible`]: false,
| [`${key}Value`]: value,
| [`${key}Text`]: label.join(' '),
| });
| this._confirm(key);
| },
| onPickerCancel(e) {
| const { key } = e.currentTarget.dataset;
| this.setData({
| [`${key}Visible`]: false,
| });
| },
|
| // 平铺宫格选择
| onGridChange(e) {
| const { index, key } = e.currentTarget.dataset;
| const { [`${key}Types`]: types } = this.data;
| const { label, value } = types[index];
| this.setData({
| [`${key}Index`]: index,
| [`${key}Text`]: label,
| [`${key}Value`]: [value],
| });
| this._confirm(key);
| },
|
| // 确认事件
| _confirm(key) {
| let { [`${key}Text`]: text, [`${key}Value`]: value } = this.data;
| console.log(`${key}PickerChange`, text, value);
| this.triggerEvent(`${key}PickerChange`, {
| [`${key}Text`]: text,
| [`${key}Value`]: value,
| });
| },
|
| // 设置当前值
| _setType(key, value) {
| let { [`${key}ValueToLabel`]: toLabel, [`${key}Types`]: types } = this.data;
| let index = 0;
| if (toLabel) {
| for (let i = 0; i < types.length; i++) {
| const t = types[i];
| if (t.value == value) {
| index = i;
| break;
| }
| }
| const label = toLabel(value);
| this.setData({
| [`${key}Text`]: label,
| [`${key}Value`]: [value],
| [`${key}Index`]: index,
| });
| } else {
| const r = types.find((item, i) => {
| if (item.value == value) {
| index = i;
| return true;
| }
| });
| if (r) {
| this.setData({
| [`${key}Text`]: r.label,
| [`${key}Value`]: [r.value],
| [`${key}Index`]: index,
| });
| }
| }
| },
| },
| };
| }
| function newBehavior(keyword, optionList, valueToLabel) {
| return Behavior(behaviorOptions(keyword, optionList, valueToLabel));
| }
|
| export { behaviorOptions, newBehavior };
|
|
