吉鹏 / gulu-vue

Download as
Browse Code »

Commit 289f85d9e9fc921a9742aee91883d046633c6feb

Authored by Adam
1 parent c41ff77d35
Exists in master

提交

Showing 202 changed files with 5636 additions and 13545 deletions   Show diff stats

Too many changes.
Reload with full diff Plain diff Email patch

To preserve performance only 100 of 202 files displayed.

... ... @@ -1,17 +0,0 @@
1   -<script>
2   - export default {
3   - onLaunch: function() {
4   - console.log('App Launch')
5   - },
6   - onShow: function() {
7   - console.log('App Show')
8   - },
9   - onHide: function() {
10   - console.log('App Hide')
11   - }
12   - }
13   -</script>
14   -
15   -<style>
16   - /*每个页面公共css */
17   -</style>
common/data.js
View file @c41ff77
... ... @@ -1,132 +0,0 @@
1   -// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
2   -// 组件的返回结果是有菜单数组下标形式返回,
3   -// 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
4   -/*
5   -[
6   - {
7   - "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
8   - "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
9   - "submenu":[ //对象数组类型 必填项 子菜单数据
10   - {
11   - "name":"", //字符串类型 必填项 菜单名称
12   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
13   - "submenu":[ //对象数组类型 必填项 子菜单数据
14   - {
15   - "name":"", //字符串类型 必填项 菜单名称
16   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
17   - "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
18   - {
19   - "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
20   - "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
21   - }
22   - ]
23   - }
24   - ]
25   - }
26   - ]
27   - }
28   -]
29   -*/
30   -
31   -//0.0.4版本起 返回结果将有两部分组成:
32   -/*
33   -{
34   - index:[], //旧版本的下标数组形式
35   - value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
36   -}
37   -*/
38   -// 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
39   -// 数据较长，请仔细查看。
40   -export default [
41   - {
42   - "name":'综合',
43   - "type": 'filter',
44   - "submenu": [{
45   - "submenu": [
46   -
47   - ]
48   - },
49   - ],
50   - },
51   - {
52   - name:'品牌',
53   - "type": 'filter',
54   - "submenu": [{
55   - "name": '品牌',
56   - "value": "品牌",
57   - "submenu": [{
58   - "name": "帕森",
59   - "value": "帕森",
60   - },
61   - {
62   - "name": "海伦凯勒",
63   - "value": "海伦凯勒",
64   - },
65   - ]
66   - },
67   - ]
68   - },
69   - {
70   - "name":'功能',
71   - "type": 'filter',
72   - "submenu": [{
73   - "name": "智能排序",
74   - "value": "智能排序"
75   - },
76   - {
77   - "name": "离我最近",
78   - "value": "离我最近"
79   - },
80   - {
81   - "name": "人均从高到低",
82   - "value": "人均从高到低"
83   - },
84   - {
85   - "name": "人均从低到高",
86   - "value": "人均从低到高"
87   - }
88   - ]
89   - },
90   - {
91   - "name":'材质',
92   - "type": 'filter',
93   - "submenu": [{
94   - "submenu": [{
95   - "name": "满减活动",
96   - "value": "满减活动"
97   - },
98   - {
99   - "name": "打折优惠",
100   - "value": "打折优惠"
101   - },
102   - {
103   - "name": "会员专享",
104   - "value": "会员专享"
105   - }
106   - ]
107   - }
108   - ]
109   - },
110   - {
111   - "name":'折扣',
112   - "type": 'filter',
113   - "submenu": [{
114   - "name": "折扣(多选)",
115   - "submenu": [{
116   - "name": "满减活动",
117   - "value": "满减活动"
118   - },
119   - {
120   - "name": "打折优惠",
121   - "value": "打折优惠"
122   - },
123   - {
124   - "name": "会员专享",
125   - "value": "会员专享"
126   - }
127   - ]
128   - }
129   - ]
130   - }
131   -]
132   -
components/HM-filterDropdown/HM-filterDropdown.vue
View file @c41ff77
... ... @@ -1,785 +0,0 @@
1   -<template>
2   - <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
3   - <view class="nav">
4   - <block v-for="(item,index) in menu" :key="index">
5   - <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
6   - <text class="name">{{item.name}}</text>
7   - <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
8   - </view>
9   - </block>
10   - </view>
11   - <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
12   - <block v-for="(page,page_index) in subData" :key="page_index">
13   - <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
14   - <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
15   - <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
16   - :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
17   - <block v-for="(sub,index) in page.submenu" :key="index">
18   - <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
19   - <view class="menu-name">
20   - <text>{{sub.name}}</text>
21   - <text class="iconfont selected"></text>
22   - </view>
23   - </view>
24   - </block>
25   - </scroll-view>
26   - <block v-for="(sub,index) in page.submenu" :key="index">
27   - <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
28   - :scroll-into-view="'second_id'+secondScrollInto">
29   - <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
30   - <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
31   - <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
32   - <text>{{sub_second.name}}</text>
33   - <text class="iconfont selected"></text>
34   - </view>
35   - <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
36   - <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
37   - <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
38   - @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
39   - <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
40   - class="iconfont triangle"></text></text>
41   - </block>
42   - </view>
43   - </view>
44   - </block>
45   - </scroll-view>
46   - </block>
47   - </block>
48   - <block v-if="page.type=='filter'">
49   - <view class="filter">
50   - <scroll-view class="menu-box" :scroll-y="true">
51   - <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
52   - <view class="title">{{box.name}}</view>
53   - <view class="labels">
54   - <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
55   - :class="{'on':label.selected}">{{label.name}}</view>
56   - </view>
57   - </view>
58   - </scroll-view>
59   - <view class="btn-box">
60   - <view class="reset" @tap="resetFilterData(page_index)">重置</view>
61   - <view class="submit" @tap="setFilterData(page_index)">确定</view>
62   - </view>
63   - </view>
64   - </block>
65   - <block v-if="page.type=='radio'">
66   - <view class="filter">
67   - <scroll-view class="menu-box" :scroll-y="true">
68   - <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
69   - <view class="title">{{box.name}}</view>
70   - <view class="labels">
71   - <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
72   - :class="{'on':label.selected}">{{label.name}}</view>
73   - </view>
74   - </view>
75   - </scroll-view>
76   - <view class="btn-box">
77   - <view class="reset" @tap="resetFilterData(page_index)">重置</view>
78   - <view class="submit" @tap="setFilterData(page_index)">确定</view>
79   - </view>
80   - </view>
81   - </block>
82   - </view>
83   - </block>
84   - </view>
85   -</template>
86   -<script>
87   - export default {
88   - data() {
89   - return {
90   - subData: [], //菜单数据
91   - menu: [], //顶部横条数据
92   - showPage: -1, //菜单页面显示/隐藏动画控制
93   - pageState: [], //页面的状态
94   - activeMenuArr: [], //UI状态
95   - shadowActiveMenuArr: [], //记录选中
96   - defaultActive:[],
97   - triangleDeg: [], //小三角形的翻转动画控制
98   - isShowMask: false, //遮罩层显示/隐藏动画控制
99   - maskVisibility: false, //遮罩层显示/隐藏状态
100   - //滚动区域定位
101   - firstScrollInto: 0,
102   - secondScrollInto: 0,
103   - componentTop:0 ,//组件top
104   - isReadNewSelect:false
105   - }
106   - },
107   - props: {
108   - filterData: {
109   - value: Array,
110   - default: []
111   - },
112   - defaultSelected:{
113   - value: Array,
114   - default: []
115   - },
116   - updateMenuName:{
117   - value: Boolean,
118   - default: true
119   - },
120   - dataFormat:{
121   - value: String,
122   - default: 'Array'
123   - }
124   - },
125   - watch: {
126   - filterData: {
127   - handler() {
128   - this.initMenu(); //filterData重新赋值初始化菜单
129   - },
130   - immediate: true
131   - },
132   - defaultSelected(newVal) {
133   - if(newVal.length==0){
134   - return;
135   - }
136   - this.defaultActive = JSON.parse(JSON.stringify(newVal));
137   - this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
138   - this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
139   - if(this.updateMenuName){
140   - this.setMenuName();
141   - }
142   - }
143   - },
144   - methods: {
145   - initMenu() {
146   - let tmpMenuActiveArr=[];
147   - let tmpMenu=[];
148   - for (let i = 0; i < this.filterData.length; i++) {
149   - let tmpitem = this.filterData[i];
150   - tmpMenu.push({
151   - //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
152   - name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
153   - type: tmpitem.type
154   - });
155   - //初始化选中项数组-ui状态
156   - tmpMenuActiveArr.push(this.processActive(tmpitem));
157   - //初始化角度数组
158   - this.triangleDeg.push(0);
159   - //初始化控制显示状态数组
160   - this.pageState.push(false);
161   - //递归处理子菜单数据
162   - tmpitem = this.processSubMenu(tmpitem);
163   - this.filterData[i] = tmpitem;
164   - }
165   - this.menu = tmpMenu;
166   - //初始化选中项数组
167   - tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
168   - this.defaultActive = [];
169   - this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
170   - this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
171   - //加载菜单数据
172   - this.subData = this.filterData;
173   - //设定顶部菜单名字
174   - if(this.updateMenuName){
175   - this.setMenuName();
176   - }
177   - },
178   - setMenuName(){
179   - for(var i=0;i<this.activeMenuArr.length;i++){
180   - let row = this.activeMenuArr[i];
181   - if (typeof(row[0]) != 'object'){
182   - var tmpsub = false;
183   - if(row.length>0 && row[0]!=null){
184   - tmpsub = this.subData[i].submenu[row[0]];
185   - if(row.length>1 && row[1]!=null){
186   - tmpsub = tmpsub.submenu[row[1]];
187   - if(row.length>2 && row[2]!=null){
188   - tmpsub = tmpsub.submenu[row[2]];
189   - }
190   - }
191   - }else{
192   - tmpsub = false;
193   - }
194   - if(tmpsub){
195   - this.menu[i].name = tmpsub.name;
196   - }
197   - }
198   - }
199   - },
200   - //展开更多
201   - showMoreSub(index) {
202   - this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
203   - this.$forceUpdate();
204   - },
205   - //选中
206   - selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
207   - //读取记录
208   - if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
209   - level1_index) {
210   - this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
211   - } else {
212   - this.activeMenuArr[page_index].splice(0, 1, level1_index);
213   - (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
214   - (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
215   - }
216   - //写入结果
217   - if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
218   - ) {
219   - let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
220   - if(this.updateMenuName){
221   - this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
222   - }
223   - this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
224   - this.togglePage(this.showPage);
225   - }
226   - },
227   - //写入结果，筛选
228   - setFilterData(page_index) {
229   - this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
230   - this.togglePage(this.showPage);
231   - },
232   - //重置结果和ui，筛选
233   - resetFilterData(page_index) {
234   - let tmpArr = [];
235   - let level = this.shadowActiveMenuArr[page_index].length;
236   - while (level > 0) {
237   - tmpArr.push([]);
238   - let box = this.subData[page_index].submenu[level - 1].submenu;
239   - for (let i = 0; i < box.length; i++) {
240   - this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
241   - }
242   - level--;
243   - }
244   - this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
245   - this.$forceUpdate();
246   - },
247   - //选中筛选类label-UI状态
248   - selectFilterLabel(page_index, box_index, label_index) {
249   - let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
250   - if (find_index > -1) {
251   - this.activeMenuArr[page_index][box_index].splice(find_index, 1);
252   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
253   - } else {
254   - this.activeMenuArr[page_index][box_index].push(label_index);
255   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
256   - }
257   - this.$forceUpdate();
258   - },
259   - //选中单选类label-UI状态
260   - selectRadioLabel(page_index, box_index, label_index) {
261   -
262   - let activeIndex = this.activeMenuArr[page_index][box_index][0];
263   - if(activeIndex == label_index){
264   - this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
265   - this.activeMenuArr[page_index][box_index][0] = null;
266   - }else{
267   - if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
268   - this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
269   - }
270   -
271   - this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
272   - this.activeMenuArr[page_index][box_index][0] = label_index;
273   - }
274   - this.$forceUpdate();
275   - },
276   - //菜单开关
277   - togglePage(index) {
278   - if (index == this.showPage) {
279   - this.hidePageLayer(true);
280   - this.hideMask();
281   - this.showPage = -1;
282   - } else {
283   - if (this.showPage > -1) {
284   - this.hidePageLayer(false);
285   - }
286   - this.showPageLayer(index);
287   - this.showMask();
288   - }
289   - },
290   - //hide遮罩层
291   - hideMask() {
292   - this.isShowMask = false;
293   - setTimeout(() => {
294   - this.maskVisibility = false;
295   - }, 200);
296   - },
297   - //show遮罩层
298   - showMask() {
299   - this.maskVisibility = true;
300   - this.$nextTick(() => {
301   - setTimeout(() => {
302   - this.isShowMask = true;
303   - }, 0);
304   - })
305   - },
306   - //hide菜单页
307   - hidePageLayer(isAnimation) {
308   - this.triangleDeg[this.showPage] = 0;
309   - let tmpIndex = this.showPage;
310   - if (isAnimation) {
311   - setTimeout(() => {
312   - this.pageState.splice(tmpIndex, 1, false);
313   - }, 200);
314   - this.confirm();
315   - } else {
316   - this.pageState.splice(tmpIndex, 1, false)
317   - }
318   - this.firstScrollInto = null;
319   - this.secondScrollInto = null;
320   - },
321   - confirm() {
322   - let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
323   - let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
324   -
325   - //对结果做一下处理
326   - index.forEach((item, i) => {
327   - if (typeof(item[0]) == 'object') {
328   - //针对筛选结果过一个排序
329   - item.forEach((s, j) => {
330   - if(s!=null){
331   - s.sort((val1, val2) => {
332   - return val1 - val2;
333   - });
334   - item[j] = s;
335   - s.forEach((v, k) => {
336   - value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
337   - if(this.subData[i].type == 'radio' && value[i][j][k] == null){
338   - value[i][j] = [];
339   - index[i][j] = [];
340   - }
341   - });
342   - }
343   - });
344   - }else{
345   - let submenu = this.subData[i].submenu[item[0]];
346   - value[i][0] = submenu.value;
347   - if(value[i].length>=2 && item[1]!=null){
348   - if(submenu.submenu.length>0){
349   - submenu = submenu.submenu[item[1]];
350   - value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
351   - }else{
352   - value[i][1] = null
353   - }
354   - if(value[i].length>=3 && item[2]!=null){
355   - if(submenu.submenu.length>0){
356   - submenu = submenu.submenu[item[2]];
357   - value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
358   - }else{
359   - value[i][2] = null;
360   - }
361   - }
362   - }
363   - }
364   - index[i] = item;
365   -
366   - });
367   - // 输出
368   - this.$emit('confirm', {
369   - index: index,
370   - value: value
371   - });
372   - },
373   - //show菜单页
374   - showPageLayer(index) {
375   - this.processPage(index);
376   - this.pageState.splice(index, 1, true);
377   - this.$nextTick(() => {
378   - setTimeout(() => {
379   - this.showPage = index;
380   - }, 0);
381   - })
382   - this.triangleDeg[index] = 180;
383   - },
384   - reloadActiveMenuArr(){
385   - for (let i = 0; i < this.filterData.length; i++) {
386   - let tmpitem = this.filterData[i];
387   - let tmpArr = this.processActive(tmpitem);
388   - tmpitem = this.processSubMenu(tmpitem);
389   - if(this.activeMenuArr[i].length!=tmpArr.length){
390   - this.filterData[i] = tmpitem;
391   - this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
392   - this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
393   - }
394   - }
395   - this.subData = this.filterData;
396   - this.$forceUpdate();
397   - },
398   - processPage(index) {
399   - //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
400   - this.reloadActiveMenuArr();
401   - //重置UI控制数组
402   - this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
403   - if (this.menu[index].type == 'filter') {
404   - //重载筛选页选中状态
405   - let level = this.shadowActiveMenuArr[index].length;
406   - for (let i = 0; i < level; i++) {
407   - let box = this.subData[index].submenu[i].submenu;
408   - for (let j = 0; j < box.length; j++) {
409   - if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
410   - this.subData[index].submenu[i].submenu[j].selected = true;
411   - } else {
412   - this.subData[index].submenu[i].submenu[j].selected = false;
413   - }
414   - }
415   - }
416   - } else if (this.menu[index].type == 'hierarchy') {
417   - this.$nextTick(() => {
418   - setTimeout(() => {
419   - //滚动到选中项
420   - this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
421   - this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
422   - }, 0);
423   - })
424   - } else if (this.menu[index].type == 'radio') {
425   - //重载筛选页选中状态
426   - let level = this.shadowActiveMenuArr[index].length;
427   - for (let i = 0; i < level; i++) {
428   - let box = this.subData[index].submenu[i].submenu;
429   - for (let j = 0; j < box.length; j++) {
430   - if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
431   - this.subData[index].submenu[i].submenu[j].selected = true;
432   - } else {
433   - this.subData[index].submenu[i].submenu[j].selected = false;
434   - }
435   - }
436   - }
437   - }
438   - },
439   - processActive(tmpitem) {
440   - let tmpArr = []
441   - if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
442   - let level = this.getMaxFloor(tmpitem.submenu);
443   - while (level > 0) {
444   - tmpArr.push(0);
445   - level--;
446   - }
447   - } else if (tmpitem.type == 'filter') {
448   - let level = tmpitem.submenu.length;
449   - while (level > 0) {
450   - tmpArr.push([]);
451   - level--;
452   - }
453   - } else if (tmpitem.type == 'radio') {
454   - let level = tmpitem.submenu.length;
455   - while (level > 0) {
456   - tmpArr.push([]);
457   - level--;
458   - }
459   - }
460   - return tmpArr;
461   - },
462   - processSubMenu(menu) {
463   - if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
464   - for (let i = 0; i < menu.submenu.length; i++) {
465   - menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
466   - }
467   - } else {
468   - menu.submenu = [];
469   - }
470   - return menu;
471   - },
472   - //计算菜单层级
473   - getMaxFloor(treeData) {
474   - let floor = 0
475   - let max = 0
476   - function each(data, floor) {
477   - data.forEach(e => {
478   - max = floor > max ? floor : max;
479   - if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
480   - each(e.submenu, floor + 1)
481   - }
482   - })
483   - }
484   - each(treeData, 1)
485   - return max;
486   - },
487   - discard() {
488   -
489   - }
490   - }
491   - }
492   -</script>
493   -<style lang="scss">
494   - .HMfilterDropdown {
495   - flex-shrink: 0;
496   - width: 100%;
497   - height: 44px;
498   - position: fixed;
499   - z-index: 997;
500   - flex-wrap: nowrap;
501   - display: flex;
502   - flex-direction: row;
503   - top: var(--window-top);
504   - left:0;
505   - view {
506   - display: flex;
507   - flex-wrap: nowrap;
508   - }
509   - }
510   - .region {
511   - flex: 1;
512   - height: 44px;
513   - }
514   - .nav {
515   - width: 100%;
516   - height: 44px;
517   - border-bottom: solid 1rpx #eee;
518   - z-index: 12;
519   - background-color: #ffffff;
520   - flex-direction: row;
521   - .first-menu {
522   - width: 100%;
523   - font-size: 13px;
524   - color: #757575;
525   - flex-direction: row;
526   - align-items: center;
527   - justify-content: center;
528   - transition: color .2s linear;
529   -
530   - &.on {
531   - color: #ec652b;
532   -
533   - .iconfont {
534   - color: #ec652b;
535   - }
536   - }
537   - .name {
538   - height: 20px;
539   - text-align: center;
540   - text-overflow: clip;
541   - overflow: hidden;
542   - }
543   - .iconfont {
544   - width: 13px;
545   - height: 13px;
546   - align-items: center;
547   - justify-content: center;
548   - transition: transform .2s linear, color .2s linear;
549   - }
550   - }
551   - }
552   - .sub-menu-class {
553   - width: 100%;
554   - position: absolute;
555   - left: 0;
556   - transform: translate3d(0, - 100%, 0);
557   - max-height: 345px;
558   - background-color: #ffffff;
559   - z-index: 11;
560   - box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
561   - overflow: hidden;
562   - flex-direction: row;
563   - transition: transform .15s linear;
564   - &.hide {
565   - display: none;
566   - }
567   -
568   - &.show {
569   - transform: translate3d(0, calc(44px + 1rpx), 0);
570   - }
571   - }
572   - .sub-menu-list {
573   - width: 100%;
574   - height: 345px;
575   - flex-direction: column;
576   - .sub-menu {
577   - min-height: 44px;
578   - font-size: 13px;
579   - flex-direction: column;
580   - padding-right: 15px;
581   - >.menu-name {
582   - height: 44px;
583   - flex-direction: row;
584   - align-items: center;
585   - justify-content: space-between;
586   - >.iconfont {
587   - display: none;
588   - font-size: 18px;
589   - color: #ec652b;
590   - }
591   - }
592   - }
593   - &.first {
594   - flex-shrink: 0;
595   - width: 236rpx;
596   - background-color: #f0f0f0;
597   - .sub-menu {
598   - padding-left: 15px;
599   -
600   - &.on {
601   - background-color: #fff;
602   - }
603   - }
604   - }
605   - &.alone {
606   - max-height: 345px;
607   - min-height: 170px;
608   - height: auto;
609   - .sub-menu {
610   - min-height: calc(44px - 1rpx);
611   - margin-left: 15px;
612   - border-bottom: solid 1rpx #e5e5e5;
613   -
614   - &.on {
615   - color: #ec652b;
616   -
617   - >.menu-name {
618   - >.iconfont {
619   - display: block;
620   - }
621   - }
622   - }
623   - }
624   - }
625   - &.not-first {
626   - .sub-menu {
627   - min-height: calc(44px - 1rpx);
628   - margin-left: 15px;
629   - border-bottom: solid 1rpx #e5e5e5;
630   - >.menu-name {
631   - height: calc(44px - 1rpx);
632   - >.iconfont {
633   - display: none;
634   - font-size: 18px;
635   - color: #ec652b;
636   - }
637   - }
638   - &.on {
639   - color: #ec652b;
640   - >.menu-name {
641   - >.iconfont {
642   - display: block;
643   - }
644   - }
645   - }
646   - .more-sub-menu {
647   - flex-direction: row;
648   - flex-wrap: wrap;
649   - padding-bottom: 9px;
650   - >text {
651   - height: 30px;
652   - border-radius: 3px;
653   - background-color: #f5f5f5;
654   - color: #9b9b9b;
655   - margin-bottom: 6px;
656   - margin-right: 6px;
657   - text-align: center;
658   - line-height: 30px;
659   - border: solid #f5f5f5 1rpx;
660   - flex: 0 0 calc(33.33% - 6px);
661   - overflow: hidden;
662   - font-size: 12px;
663   - &:nth-child(3n) {
664   - margin-right: 0;
665   - }
666   - &.on {
667   - border-color: #f6c8ac;
668   - color: #ec652b;
669   - }
670   - .iconfont {
671   - color: #9b9b9b;
672   - }
673   - }
674   - }
675   - }
676   - }
677   - }
678   - .filter {
679   - width: 100%;
680   - height: 345px;
681   - display: flex;
682   - flex-direction: column;
683   - justify-content: space-between;
684   - align-items: center;
685   - .menu-box {
686   - width: 698rpx;
687   - height: calc(345px - 75px);
688   - flex-shrink: 1;
689   - .box {
690   - width: 100%;
691   - margin-top: 16px;
692   - flex-direction: column;
693   - .title {
694   - width: 100%;
695   - font-size: 13px;
696   - color: #888;
697   - }
698   - .labels {
699   - flex-direction: row;
700   - flex-wrap: wrap;
701   - .on {
702   - border-color: #ec652b;
703   - background-color: #ec652b;
704   - color: #fff;
705   - }
706   - >view {
707   - width: 148rpx;
708   - height: 30px;
709   - border: solid 1rpx #adadad;
710   - border-radius: 2px;
711   - margin-right: 15px;
712   - margin-top: 8px;
713   - font-size: 12px;
714   - flex-direction: row;
715   - justify-content: center;
716   - align-items: center;
717   - &:nth-child(4n) {
718   - margin-right: 0;
719   - }
720   - }
721   - }
722   - }
723   - }
724   - .btn-box {
725   - flex-shrink: 0;
726   - width: 698rpx;
727   - height: 75px;
728   - flex-direction: row !important;
729   - align-items: center;
730   - justify-content: space-between;
731   - >view {
732   - width: 320rpx;
733   - height: 40px;
734   - border-radius: 40px;
735   - border: solid 1rpx #ec652b;
736   - align-items: center;
737   - justify-content: center;
738   - }
739   - .reset {
740   - color: #ec652b;
741   - }
742   - .submit {
743   - color: #fff;
744   - background-color: #ec652b;
745   - }
746   - }
747   - }
748   - .mask {
749   - z-index: 10;
750   - position: fixed;
751   - top: 0;
752   - left: 0;
753   - right: 0;
754   - bottom: 0;
755   - background-color: rgba(0, 0, 0, 0);
756   - transition: background-color .15s linear;
757   - &.show {
758   - background-color: rgba(0, 0, 0, 0.5);
759   - }
760   - &.hide {
761   - display: none;
762   - }
763   - }
764   - /* 字体图标 */
765   - @font-face {
766   - font-family: "HM-FD-font";
767   - src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
768   - }
769   - .iconfont {
770   - font-family: "HM-FD-font" !important;
771   - font-size: 13px;
772   - font-style: normal;
773   - color: #757575;
774   - &.triangle {
775   - &:before {
776   - content: "\e65a";
777   - }
778   - }
779   - &.selected {
780   - &:before {
781   - content: "\e607";
782   - }
783   - }
784   - }
785   -</style>
components/card.vue
View file @c41ff77
... ... @@ -1,19 +0,0 @@
1   -<template>
2   - <view>
3   -
4   - </view>
5   -</template>
6   -
7   -<script>
8   - export default {
9   - data() {
10   - return {
11   -
12   - };
13   - }
14   - }
15   -</script>
16   -
17   -<style lang="scss">
18   -
19   -</style>
components/uni-drawer/uni-drawer.vue
View file @c41ff77
... ... @@ -1,170 +0,0 @@
1   -<template>
2   - <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
3   - <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
4   - <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
5   - <slot />
6   - </view>
7   - </view>
8   -</template>
9   -
10   -<script>
11   - /**
12   - * Drawer 抽屉
13   - * @description 抽屉侧滑菜单
14   - * @tutorial https://ext.dcloud.net.cn/plugin?id=26
15   - * @property {Boolean} mask = [true | false] 是否显示遮罩
16   - * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
17   - * @property {Boolean} mode = [left | right] Drawer 滑出位置
18   - * @value left 从左侧滑出
19   - * @value right 从右侧侧滑出
20   - * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
21   - * @event {Function} close 组件关闭时触发事件
22   - */
23   - export default {
24   - name: 'UniDrawer',
25   - props: {
26   - /**
27   - * 显示模式（左、右），只在初始化生效
28   - */
29   - mode: {
30   - type: String,
31   - default: ''
32   - },
33   - /**
34   - * 蒙层显示状态
35   - */
36   - mask: {
37   - type: Boolean,
38   - default: true
39   - },
40   - /**
41   - * 遮罩是否可点击关闭
42   - */
43   - maskClick:{
44   - type: Boolean,
45   - default: true
46   - },
47   - /**
48   - * 抽屉宽度
49   - */
50   - width: {
51   - type: Number,
52   - default: 220
53   - }
54   - },
55   - data() {
56   - return {
57   - visibleSync: false,
58   - showDrawer: false,
59   - rightMode: false,
60   - watchTimer: null,
61   - drawerWidth: 220
62   - }
63   - },
64   - created() {
65   - // #ifndef APP-NVUE
66   - this.drawerWidth = this.width
67   - // #endif
68   - this.rightMode = this.mode === 'right'
69   - },
70   - methods: {
71   - clear(){},
72   - close(type) {
73   - // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
74   - if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
75   - this._change('showDrawer', 'visibleSync', false)
76   - },
77   - open() {
78   - // fixed by mehaotian 处理重复点击打开的事件
79   - if(this.visibleSync) return
80   - this._change('visibleSync', 'showDrawer', true)
81   - },
82   - _change(param1, param2, status) {
83   - this[param1] = status
84   - if (this.watchTimer) {
85   - clearTimeout(this.watchTimer)
86   - }
87   - this.watchTimer = setTimeout(() => {
88   - this[param2] = status
89   - this.$emit('change',status)
90   - }, status ? 50 : 300)
91   - }
92   - }
93   - }
94   -</script>
95   -
96   -<style lang="scss" scoped>
97   - // 抽屉宽度
98   - $drawer-width: 220px;
99   -
100   - .uni-drawer {
101   - /* #ifndef APP-NVUE */
102   - display: block;
103   - /* #endif */
104   - position: fixed;
105   - top: 0;
106   - left: 0;
107   - right: 0;
108   - bottom: 0;
109   - overflow: hidden;
110   - z-index: 999;
111   - }
112   -
113   - .uni-drawer__content {
114   - /* #ifndef APP-NVUE */
115   - display: block;
116   - /* #endif */
117   - position: absolute;
118   - top: 0;
119   - width: $drawer-width;
120   - bottom: 0;
121   - background-color: $uni-bg-color;
122   - transition: transform 0.3s ease;
123   - }
124   -
125   - .uni-drawer--left {
126   - left: 0;
127   - /* #ifdef APP-NVUE */
128   - transform: translateX(-$drawer-width);
129   - /* #endif */
130   - /* #ifndef APP-NVUE */
131   - transform: translateX(-100%);
132   - /* #endif */
133   - }
134   -
135   - .uni-drawer--right {
136   - right: 0;
137   - /* #ifdef APP-NVUE */
138   - transform: translateX($drawer-width);
139   - /* #endif */
140   - /* #ifndef APP-NVUE */
141   - transform: translateX(100%);
142   - /* #endif */
143   - }
144   -
145   - .uni-drawer__content--visible {
146   - transform: translateX(0px);
147   - }
148   -
149   -
150   - .uni-drawer__mask {
151   - /* #ifndef APP-NVUE */
152   - display: block;
153   - /* #endif */
154   - opacity: 0;
155   - position: absolute;
156   - top: 0;
157   - left: 0;
158   - bottom: 0;
159   - right: 0;
160   - background-color: $uni-bg-color-mask;
161   - transition: opacity 0.3s;
162   - }
163   -
164   - .uni-drawer__mask--visible {
165   - /* #ifndef APP-NVUE */
166   - display: block;
167   - /* #endif */
168   - opacity: 1;
169   - }
170   -</style>
... ... @@ -1,11 +0,0 @@
1   -import Vue from 'vue'
2   -import App from './App'
3   -
4   -Vue.config.productionTip = false
5   -
6   -App.mpType = 'app'
7   -
8   -const app = new Vue({
9   - ...App
10   -})
11   -app.$mount()
manifest.json
View file @c41ff77
... ... @@ -1,75 +0,0 @@
1   -{
2   - "name" : "gulu-vue",
3   - "appid" : "",
4   - "description" : "",
5   - "versionName" : "1.0.0",
6   - "versionCode" : "100",
7   - "transformPx" : false,
8   - /* 5+App特有相关 */
9   - "app-plus" : {
10   - "usingComponents" : true,
11   - "nvueCompiler" : "uni-app",
12   - "compilerVersion" : 3,
13   - "splashscreen" : {
14   - "alwaysShowBeforeRender" : true,
15   - "waiting" : true,
16   - "autoclose" : true,
17   - "delay" : 0
18   - },
19   - /* 模块配置 */
20   - "modules" : {},
21   - /* 应用发布信息 */
22   - "distribute" : {
23   - /* android打包配置 */
24   - "android" : {
25   - "permissions" : [
26   - "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
27   - "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
28   - "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
29   - "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
30   - "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
31   - "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
32   - "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
33   - "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
34   - "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
35   - "<uses-permission android:name=\"android.permission.CAMERA\"/>",
36   - "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
37   - "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
38   - "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
39   - "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
40   - "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
41   - "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
42   - "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
43   - "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
44   - "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
45   - "<uses-feature android:name=\"android.hardware.camera\"/>",
46   - "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
47   - "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
48   - ]
49   - },
50   - /* ios打包配置 */
51   - "ios" : {},
52   - /* SDK配置 */
53   - "sdkConfigs" : {}
54   - }
55   - },
56   - /* 快应用特有相关 */
57   - "quickapp" : {},
58   - /* 小程序特有相关 */
59   - "mp-weixin" : {
60   - "appid" : "",
61   - "setting" : {
62   - "urlCheck" : false
63   - },
64   - "usingComponents" : true
65   - },
66   - "mp-alipay" : {
67   - "usingComponents" : true
68   - },
69   - "mp-baidu" : {
70   - "usingComponents" : true
71   - },
72   - "mp-toutiao" : {
73   - "usingComponents" : true
74   - }
75   -}
... ... @@ -0,0 +1,78 @@
  1 +{
  2 + "name": "gulu-vue",
  3 + "version": "0.1.0",
  4 + "private": true,
  5 + "scripts": {
  6 + "serve": "npm run dev:h5",
  7 + "build": "npm run build:h5",
  8 + "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
  9 + "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
  10 + "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
  11 + "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
  12 + "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
  13 + "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
  14 + "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
  15 + "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
  16 + "build:quickapp-light": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-light vue-cli-service uni-build",
  17 + "build:quickapp-vue": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-vue vue-cli-service uni-build",
  18 + "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
  19 + "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
  20 + "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
  21 + "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
  22 + "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
  23 + "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
  24 + "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
  25 + "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
  26 + "dev:quickapp-light": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-light vue-cli-service uni-build --watch",
  27 + "dev:quickapp-vue": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-vue vue-cli-service uni-build --watch",
  28 + "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
  29 + "serve:quickapp-vue": "node node_modules/@dcloudio/uni-quickapp-vue/bin/serve.js"
  30 + },
  31 + "dependencies": {
  32 + "@dcloudio/uni-app-plus": "^2.0.0-26920200424005",
  33 + "@dcloudio/uni-h5": "^2.0.0-26920200424005",
  34 + "@dcloudio/uni-helper-json": "^1.0.5",
  35 + "@dcloudio/uni-mp-alipay": "^2.0.0-26920200424005",
  36 + "@dcloudio/uni-mp-baidu": "^2.0.0-26920200424005",
  37 + "@dcloudio/uni-mp-qq": "^2.0.0-26920200424005",
  38 + "@dcloudio/uni-mp-toutiao": "^2.0.0-26920200424005",
  39 + "@dcloudio/uni-mp-weixin": "^2.0.0-26920200424005",
  40 + "@dcloudio/uni-quickapp-light": "^2.0.0-26920200424005",
  41 + "@dcloudio/uni-quickapp-vue": "^2.0.0-26920200424005",
  42 + "@dcloudio/uni-stat": "^2.0.0-26920200424005",
  43 + "core-js": "^3.6.5",
  44 + "flyio": "^0.6.2",
  45 + "node-sass": "^4.14.0",
  46 + "regenerator-runtime": "^0.12.1",
  47 + "sass-loader": "^8.0.2",
  48 + "vue": "^2.6.11",
  49 + "vuex": "^3.0.1"
  50 + },
  51 + "devDependencies": {
  52 + "@dcloudio/uni-cli-shared": "^2.0.0-26920200424005",
  53 + "@dcloudio/uni-migration": "^2.0.0-26920200424005",
  54 + "@dcloudio/uni-template-compiler": "^2.0.0-26920200424005",
  55 + "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-26920200424005",
  56 + "@dcloudio/vue-cli-plugin-uni": "^2.0.0-26920200424005",
  57 + "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-26920200424005",
  58 + "@dcloudio/webpack-uni-mp-loader": "^2.0.0-26920200424005",
  59 + "@dcloudio/webpack-uni-pages-loader": "^2.0.0-26920200424005",
  60 + "@types/html5plus": "*",
  61 + "@types/uni-app": "*",
  62 + "@vue/cli-plugin-babel": "~4.3.0",
  63 + "@vue/cli-service": "~4.3.0",
  64 + "babel-plugin-import": "^1.11.0",
  65 + "cross-env": "^7.0.2",
  66 + "mini-types": "*",
  67 + "miniprogram-api-typings": "^2.8.0-2",
  68 + "postcss-comment": "^2.0.0",
  69 + "vue-template-compiler": "^2.6.11"
  70 + },
  71 + "browserslist": [
  72 + "Android >= 4",
  73 + "ios >= 8"
  74 + ],
  75 + "uni-app": {
  76 + "scripts": {}
  77 + }
  78 +}
... ...
pages.json
View file @c41ff77
... ... @@ -1,53 +0,0 @@
1   -{
2   - "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3   - {
4   - "path": "pages/index/index",
5   - "style": {
6   - "navigationBarTitleText": "商城一览"
7   - }
8   - },
9   - {
10   - "path": "pages/cart/cart",
11   - "style": {
12   - "navigationBarTitleText": "购物车"
13   - }
14   - },
15   - {
16   - "path": "pages/user/user",
17   - "style": {
18   - "navigationBarTitleText": "我的"
19   - }
20   - }
21   - ],
22   - "globalStyle": {
23   - "navigationBarTextStyle": "black",
24   - "navigationBarTitleText": "uni-app",
25   - "navigationBarBackgroundColor": "#F8F8F8",
26   - "backgroundColor": "#F8F8F8"
27   - },
28   - "tabBar": {
29   - "color": "#C0C4CC",
30   - "selectedColor": "#fa436a",
31   - "borderStyle": "black",
32   - "backgroundColor": "#ffffff",
33   - "list": [{
34   - "pagePath": "pages/index/index",
35   - "iconPath": "static/tab-home.png",
36   - "selectedIconPath": "static/tab-home-current.png",
37   - "text": "首页"
38   - },
39   - {
40   - "pagePath": "pages/cart/cart",
41   - "iconPath": "static/tab-cart.png",
42   - "selectedIconPath": "static/tab-cart-current.png",
43   - "text": "购物车"
44   - },
45   - {
46   - "pagePath": "pages/user/user",
47   - "iconPath": "static/tab-my.png",
48   - "selectedIconPath": "static/tab-my-current.png",
49   - "text": "我的"
50   - }
51   - ]
52   - }
53   -}
pages/cart/cart.vue
View file @c41ff77
... ... @@ -1,52 +0,0 @@
1   -<template>
2   - <view class="content">
3   - <image class="logo" src="/static/logo.png"></image>
4   - <view class="text-area">
5   - <text class="title">{{title}}</text>
6   - </view>
7   - </view>
8   -</template>
9   -
10   -<script>
11   - export default {
12   - data() {
13   - return {
14   - title: 'Hello'
15   - }
16   - },
17   - onLoad() {
18   -
19   - },
20   - methods: {
21   -
22   - }
23   - }
24   -</script>
25   -
26   -<style>
27   - .content {
28   - display: flex;
29   - flex-direction: column;
30   - align-items: center;
31   - justify-content: center;
32   - }
33   -
34   - .logo {
35   - height: 200rpx;
36   - width: 200rpx;
37   - margin-top: 200rpx;
38   - margin-left: auto;
39   - margin-right: auto;
40   - margin-bottom: 50rpx;
41   - }
42   -
43   - .text-area {
44   - display: flex;
45   - justify-content: center;
46   - }
47   -
48   - .title {
49   - font-size: 36rpx;
50   - color: #8f8f94;
51   - }
52   -</style>
pages/index/index.vue
View file @c41ff77
... ... @@ -1,308 +0,0 @@
1   -<template>
2   - <view class="content">
3   - <view class="header">
4   - <!-- 搜索-->
5   - <view class="searchBar">
6   - <icon class="searchIcon" type="search" size="14"></icon>
7   - <input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
8   - </view>
9   -
10   - <!-- 筛选栏-->
11   - <view class="screenBar">
12   - <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13   - <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14   - {{ item.text }}<icon type="info" size="14"></icon>
15   - </view>
16   - <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17   - {{ item.text }}<icon type="info" size="14"></icon>
18   - </view>
19   - <view v-if="item.current !== 2&&item.current!==4">
20   - <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21   - </view>
22   - </view>
23   - </view>
24   - </view>
25   - <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26   - <view class="close">
27   - <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28   - </view>
29   - </uni-drawer>
30   -
31   -
32   -
33   - <!-- 筛选菜单-->
34   - <view class="content-wrap">
35   - <view>
36   - <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37   - <!-- 占位 -->
38   - <view class="place"></view>
39   - <!-- 商品列表 -->
40   - <view class="goods-list">
41   - <view class="product-list">
42   - <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
43   - <image mode="widthFix" :src="goods.img"></image>
44   - <view class="name">{{goods.name}}</view>
45   - <view class="info">
46   - <view class="price">{{goods.price}}</view>
47   - <view class="slogan">{{goods.slogan}}</view>
48   - </view>
49   - </view>
50   - </view>
51   - <view class="loading-text">{{loadingText}}</view>
52   - </view>
53   -
54   - </view>
55   - </view>
56   - </view>
57   -</template>
58   -
59   -<script>
60   - import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
61   - import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
62   - import data from '@/common/data.js';//筛选菜单数据
63   - export default {
64   - components: {
65   - uniDrawer,
66   - 'HMfilterDropdown':HMfilterDropdown
67   - },
68   - data() {
69   - return {
70   - screenItems: [
71   - {current:0,text:'全部',hasIcon:false},
72   - {current:1,text:'销量',hasIcon:false},
73   - {current:2,text:'价格',hasIcon:true},
74   - {current:3,text:'折扣',hasIcon:false},
75   - {current:4,text:'筛选',hasIcon:true},
76   - ],
77   - current: 0,
78   - showRight: false,
79   - indexArr:'',
80   - valueArr:'',
81   - //商品数据
82   - goodsList:[
83   - { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
84   - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
85   - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
86   - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
87   - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
88   - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
89   - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
90   - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
91   - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
92   - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }
93   - ],
94   - loadingText:"正在加载...",
95   - filterDropdownValue:[],
96   - filterData:[]
97   - }
98   - },
99   - filters: {
100   - 　　outData(value) {
101   - 　　　　return JSON.stringify(value);
102   - 　　}
103   - },
104   - onLoad: function () {
105   - //定时器模拟ajax异步请求数据
106   - setTimeout(()=>{
107   - //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
108   - this.filterDropdownValue = [
109   - [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
110   - [null,null], //第1个菜单选中 都不选中
111   - [1], //第2个菜单选中 一级菜单的第1项
112   - [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
113   - [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
114   - ];
115   - this.filterData = data;
116   - },100);
117   - //模拟ajax请求子菜单数据。
118   - // setTimeout(()=>{
119   - //this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
120   - // },5000)
121   - },
122   - methods: {
123   - showDrawer(e) {
124   - this.$refs[e].open()
125   - },
126   - closeDrawer(e) {
127   - this.$refs[e].close()
128   - },
129   - change(e, type) {
130   - this[type] = e
131   - },
132   - onClickItem(e) {
133   - if (this.current !== e) {
134   - this.current = e;
135   - }
136   - },
137   - dropDown(){
138   - console.log('下拉')
139   - },
140   - //接收菜单结果
141   - confirm(e){
142   - this.indexArr = e.index;
143   - this.valueArr = e.value;
144   - return;
145   - console.log('修改菜单');
146   - this.filterData[4].submenu[1] = {
147   - "name": "项目2",
148   - "submenu": [
149   -
150   - ]
151   - }
152   - }
153   - },
154   - onNavigationBarButtonTap(e) {
155   - this.showRight = !this.showRight
156   - },
157   - //上拉加载，
158   - onReachBottom(){
159   - console.log('到底加载')
160   - let len = this.goodsList.length;
161   - if(len>=30){
162   - this.loadingText="~~到底了~~";
163   - return false;
164   - }else{
165   - this.loadingText="正在加载...";
166   - }
167   - let end_goods_id = this.goodsList[len-1].goods_id;
168   - for(let i=1;i<=10;i++){
169   - let goods_id = end_goods_id+i;
170   - let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' };
171   - this.goodsList.push(p);
172   - }
173   - },
174   - }
175   -</script>
176   -
177   -<style lang="scss">
178   - .content {
179   - display: flex;
180   - flex-direction: column;
181   - align-items: center;
182   - justify-content: center;
183   - background-color: #F7F6F6;
184   - }
185   - .header{
186   - display: flex;
187   - flex-direction: column;
188   - align-items: center;
189   - justify-content: center;
190   - background-color: #F7F6F6;
191   - height:178rpx ;
192   - width: 100%;
193   - z-index: 999;
194   - position: fixed;
195   - top: 0;
196   - }
197   - .searchBar {
198   - width: 670rpx;
199   - display: flex;
200   - position: fixed;
201   - top: 0;
202   - justify-content: center;
203   - align-items: center;
204   - box-sizing: border-box;
205   - padding: 0rpx 16rpx;
206   - border: 1px solid #FF6B4A;
207   - border-radius: 8rpx;
208   - background-color: #ffffff;
209   - }
210   -
211   - .searchIpt {
212   - height: 68rpx;
213   - width: 670rpx;
214   - padding: 16rpx;
215   - font-size: 28rpx;
216   - box-sizing: border-box;
217   - }
218   - .screenBar{
219   - position: fixed;
220   - top: 68rpx;
221   - width: 670rpx;
222   - height: 110rpx;
223   - display: flex;
224   - flex-direction: row;
225   - justify-content: space-between;
226   - align-items: center;
227   - color: #333333;
228   - font-size: 32rpx;
229   - }
230   - .active{
231   - color: #FF6B4A;
232   - }
233   - .screenItem{
234   - display: flex;
235   - justify-content: center;
236   - align-items: center;
237   - }
238   - .content-wrap{
239   - width: 100%;
240   - background-color: #FFFFFF;
241   - }
242   -
243   - .HMfilterDropdown{
244   - position: fixed;
245   - top: 178rpx !important;
246   - }
247   - .place{
248   - background-color: #ffffff;
249   - height: 266rpx;
250   - }
251   - .goods-list{
252   - padding-top: 10px;
253   - .loading-text{
254   - width: 100%;
255   - display: flex;
256   - justify-content: center;
257   - align-items: center;
258   - height: 30px;
259   - color: #979797;
260   - font-size: 12px;
261   - }
262   - .product-list{
263   - width: 92%;
264   - padding: 0 4% 3vw 4%;
265   - display: flex;
266   - justify-content: space-between;
267   - flex-wrap: wrap;
268   - .product{
269   - width: 48%;
270   - border-radius: 10px;
271   - background-color: #fff;
272   - margin: 0 0 7px 0;
273   - box-shadow: 0 3px 12px rgba(0,0,0,0.1);
274   - image{
275   - width: 100%;
276   - border-radius: 10px 10px 0 0;
277   - }
278   - .name{
279   - width: 92%;
280   - padding: 5px 4%;
281   - display: -webkit-box;
282   - -webkit-box-orient: vertical;
283   - -webkit-line-clamp: 2;
284   - text-align: justify;
285   - overflow: hidden;
286   - font-size: 15px;
287   - }
288   - .info{
289   - display: flex;
290   - justify-content: space-between;
291   - align-items: flex-end;
292   - width: 92%;
293   - padding: 5px 4% 5px 4%;
294   - .price{
295   - color: #e65339;
296   - font-size: 15px;
297   - font-weight: 600;
298   - }
299   - .slogan{
300   - color: #807c87;
301   - font-size: 12px;
302   - }
303   - }
304   - }
305   - }
306   - }
307   -
308   -</style>
pages/user/user.vue
View file @c41ff77
... ... @@ -1,52 +0,0 @@
1   -<template>
2   - <view class="content">
3   - <image class="logo" src="/static/logo.png"></image>
4   - <view class="text-area">
5   - <text class="title">{{title}}</text>
6   - </view>
7   - </view>
8   -</template>
9   -
10   -<script>
11   - export default {
12   - data() {
13   - return {
14   - title: 'Hello'
15   - }
16   - },
17   - onLoad() {
18   -
19   - },
20   - methods: {
21   -
22   - }
23   - }
24   -</script>
25   -
26   -<style>
27   - .content {
28   - display: flex;
29   - flex-direction: column;
30   - align-items: center;
31   - justify-content: center;
32   - }
33   -
34   - .logo {
35   - height: 200rpx;
36   - width: 200rpx;
37   - margin-top: 200rpx;
38   - margin-left: auto;
39   - margin-right: auto;
40   - margin-bottom: 50rpx;
41   - }
42   -
43   - .text-area {
44   - display: flex;
45   - justify-content: center;
46   - }
47   -
48   - .title {
49   - font-size: 36rpx;
50   - color: #8f8f94;
51   - }
52   -</style>
... ... @@ -0,0 +1,17 @@
  1 +<script>
  2 + export default {
  3 + onLaunch: function() {
  4 + console.log('App Launch')
  5 + },
  6 + onShow: function() {
  7 + console.log('App Show')
  8 + },
  9 + onHide: function() {
  10 + console.log('App Hide')
  11 + }
  12 + }
  13 +</script>
  14 +
  15 +<style>
  16 + /*每个页面公共css */
  17 +</style>
... ...
... ... @@ -0,0 +1,21 @@
  1 +MIT License
  2 +
  3 +Copyright (c) 2018 DCloud
  4 +
  5 +Permission is hereby granted, free of charge, to any person obtaining a copy
  6 +of this software and associated documentation files (the "Software"), to deal
  7 +in the Software without restriction, including without limitation the rights
  8 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9 +copies of the Software, and to permit persons to whom the Software is
  10 +furnished to do so, subject to the following conditions:
  11 +
  12 +The above copyright notice and this permission notice shall be included in all
  13 +copies or substantial portions of the Software.
  14 +
  15 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  21 +SOFTWARE.
... ...
... ... @@ -0,0 +1 @@
  1 +thie is a new gulu project base on vue
... ...
... ... @@ -0,0 +1,14 @@
  1 +# hello-uniapp
  2 +
  3 +`uni-app`框架示例，一套代码，同时发行到iOS、Android、H5、小程序等多个平台，请使用手机扫码快速体验`uni-app`的强大功能。
  4 +
  5 +<p align="center">
  6 + <a href="https://m3w.cn/uniapp" target="blank">
  7 + <img src="https://img-cdn-qiniu.dcloud.net.cn/uni-app-qr-all.jpg"/>
  8 + </a>
  9 +</p>
  10 +
  11 +`uni-app`官网文档详见[https://uniapp.dcloud.io](https://uniapp.dcloud.io)
  12 +
  13 +更多uni-app的模板、示例详见[插件市场](https://ext.dcloud.net.cn/)
  14 +
... ...
src/common/data.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,132 @@
  1 +// 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
  2 +// 组件的返回结果是有菜单数组下标形式返回,
  3 +// 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
  4 +/*
  5 +[
  6 + {
  7 + "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
  8 + "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
  9 + "submenu":[ //对象数组类型 必填项 子菜单数据
  10 + {
  11 + "name":"", //字符串类型 必填项 菜单名称
  12 + "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
  13 + "submenu":[ //对象数组类型 必填项 子菜单数据
  14 + {
  15 + "name":"", //字符串类型 必填项 菜单名称
  16 + "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
  17 + "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
  18 + {
  19 + "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
  20 + "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
  21 + }
  22 + ]
  23 + }
  24 + ]
  25 + }
  26 + ]
  27 + }
  28 +]
  29 +*/
  30 +
  31 +//0.0.4版本起 返回结果将有两部分组成:
  32 +/*
  33 +{
  34 + index:[], //旧版本的下标数组形式
  35 + value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
  36 +}
  37 +*/
  38 +// 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
  39 +// 数据较长，请仔细查看。
  40 +export default [
  41 + {
  42 + "name":'综合',
  43 + "type": 'filter',
  44 + "submenu": [{
  45 + "submenu": [
  46 +
  47 + ]
  48 + },
  49 + ],
  50 + },
  51 + {
  52 + name:'品牌',
  53 + "type": 'filter',
  54 + "submenu": [{
  55 + "name": '品牌',
  56 + "value": "品牌",
  57 + "submenu": [{
  58 + "name": "帕森",
  59 + "value": "帕森",
  60 + },
  61 + {
  62 + "name": "海伦凯勒",
  63 + "value": "海伦凯勒",
  64 + },
  65 + ]
  66 + },
  67 + ]
  68 + },
  69 + {
  70 + "name":'功能',
  71 + "type": 'filter',
  72 + "submenu": [{
  73 + "name": "智能排序",
  74 + "value": "智能排序"
  75 + },
  76 + {
  77 + "name": "离我最近",
  78 + "value": "离我最近"
  79 + },
  80 + {
  81 + "name": "人均从高到低",
  82 + "value": "人均从高到低"
  83 + },
  84 + {
  85 + "name": "人均从低到高",
  86 + "value": "人均从低到高"
  87 + }
  88 + ]
  89 + },
  90 + {
  91 + "name":'材质',
  92 + "type": 'filter',
  93 + "submenu": [{
  94 + "submenu": [{
  95 + "name": "满减活动",
  96 + "value": "满减活动"
  97 + },
  98 + {
  99 + "name": "打折优惠",
  100 + "value": "打折优惠"
  101 + },
  102 + {
  103 + "name": "会员专享",
  104 + "value": "会员专享"
  105 + }
  106 + ]
  107 + }
  108 + ]
  109 + },
  110 + {
  111 + "name":'折扣',
  112 + "type": 'filter',
  113 + "submenu": [{
  114 + "name": "折扣(多选)",
  115 + "submenu": [{
  116 + "name": "满减活动",
  117 + "value": "满减活动"
  118 + },
  119 + {
  120 + "name": "打折优惠",
  121 + "value": "打折优惠"
  122 + },
  123 + {
  124 + "name": "会员专享",
  125 + "value": "会员专享"
  126 + }
  127 + ]
  128 + }
  129 + ]
  130 + }
  131 +]
  132 +
... ...
src/components/HM-filterDropdown/HM-filterDropdown.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,785 @@
  1 +<template>
  2 + <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
  3 + <view class="nav">
  4 + <block v-for="(item,index) in menu" :key="index">
  5 + <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
  6 + <text class="name">{{item.name}}</text>
  7 + <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
  8 + </view>
  9 + </block>
  10 + </view>
  11 + <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
  12 + <block v-for="(page,page_index) in subData" :key="page_index">
  13 + <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
  14 + <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
  15 + <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
  16 + :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
  17 + <block v-for="(sub,index) in page.submenu" :key="index">
  18 + <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
  19 + <view class="menu-name">
  20 + <text>{{sub.name}}</text>
  21 + <text class="iconfont selected"></text>
  22 + </view>
  23 + </view>
  24 + </block>
  25 + </scroll-view>
  26 + <block v-for="(sub,index) in page.submenu" :key="index">
  27 + <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
  28 + :scroll-into-view="'second_id'+secondScrollInto">
  29 + <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
  30 + <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
  31 + <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
  32 + <text>{{sub_second.name}}</text>
  33 + <text class="iconfont selected"></text>
  34 + </view>
  35 + <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
  36 + <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
  37 + <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
  38 + @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
  39 + <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
  40 + class="iconfont triangle"></text></text>
  41 + </block>
  42 + </view>
  43 + </view>
  44 + </block>
  45 + </scroll-view>
  46 + </block>
  47 + </block>
  48 + <block v-if="page.type=='filter'">
  49 + <view class="filter">
  50 + <scroll-view class="menu-box" :scroll-y="true">
  51 + <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
  52 + <view class="title">{{box.name}}</view>
  53 + <view class="labels">
  54 + <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
  55 + :class="{'on':label.selected}">{{label.name}}</view>
  56 + </view>
  57 + </view>
  58 + </scroll-view>
  59 + <view class="btn-box">
  60 + <view class="reset" @tap="resetFilterData(page_index)">重置</view>
  61 + <view class="submit" @tap="setFilterData(page_index)">确定</view>
  62 + </view>
  63 + </view>
  64 + </block>
  65 + <block v-if="page.type=='radio'">
  66 + <view class="filter">
  67 + <scroll-view class="menu-box" :scroll-y="true">
  68 + <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
  69 + <view class="title">{{box.name}}</view>
  70 + <view class="labels">
  71 + <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
  72 + :class="{'on':label.selected}">{{label.name}}</view>
  73 + </view>
  74 + </view>
  75 + </scroll-view>
  76 + <view class="btn-box">
  77 + <view class="reset" @tap="resetFilterData(page_index)">重置</view>
  78 + <view class="submit" @tap="setFilterData(page_index)">确定</view>
  79 + </view>
  80 + </view>
  81 + </block>
  82 + </view>
  83 + </block>
  84 + </view>
  85 +</template>
  86 +<script>
  87 + export default {
  88 + data() {
  89 + return {
  90 + subData: [], //菜单数据
  91 + menu: [], //顶部横条数据
  92 + showPage: -1, //菜单页面显示/隐藏动画控制
  93 + pageState: [], //页面的状态
  94 + activeMenuArr: [], //UI状态
  95 + shadowActiveMenuArr: [], //记录选中
  96 + defaultActive:[],
  97 + triangleDeg: [], //小三角形的翻转动画控制
  98 + isShowMask: false, //遮罩层显示/隐藏动画控制
  99 + maskVisibility: false, //遮罩层显示/隐藏状态
  100 + //滚动区域定位
  101 + firstScrollInto: 0,
  102 + secondScrollInto: 0,
  103 + componentTop:0 ,//组件top
  104 + isReadNewSelect:false
  105 + }
  106 + },
  107 + props: {
  108 + filterData: {
  109 + value: Array,
  110 + default: []
  111 + },
  112 + defaultSelected:{
  113 + value: Array,
  114 + default: []
  115 + },
  116 + updateMenuName:{
  117 + value: Boolean,
  118 + default: true
  119 + },
  120 + dataFormat:{
  121 + value: String,
  122 + default: 'Array'
  123 + }
  124 + },
  125 + watch: {
  126 + filterData: {
  127 + handler() {
  128 + this.initMenu(); //filterData重新赋值初始化菜单
  129 + },
  130 + immediate: true
  131 + },
  132 + defaultSelected(newVal) {
  133 + if(newVal.length==0){
  134 + return;
  135 + }
  136 + this.defaultActive = JSON.parse(JSON.stringify(newVal));
  137 + this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
  138 + this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
  139 + if(this.updateMenuName){
  140 + this.setMenuName();
  141 + }
  142 + }
  143 + },
  144 + methods: {
  145 + initMenu() {
  146 + let tmpMenuActiveArr=[];
  147 + let tmpMenu=[];
  148 + for (let i = 0; i < this.filterData.length; i++) {
  149 + let tmpitem = this.filterData[i];
  150 + tmpMenu.push({
  151 + //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
  152 + name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
  153 + type: tmpitem.type
  154 + });
  155 + //初始化选中项数组-ui状态
  156 + tmpMenuActiveArr.push(this.processActive(tmpitem));
  157 + //初始化角度数组
  158 + this.triangleDeg.push(0);
  159 + //初始化控制显示状态数组
  160 + this.pageState.push(false);
  161 + //递归处理子菜单数据
  162 + tmpitem = this.processSubMenu(tmpitem);
  163 + this.filterData[i] = tmpitem;
  164 + }
  165 + this.menu = tmpMenu;
  166 + //初始化选中项数组
  167 + tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
  168 + this.defaultActive = [];
  169 + this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
  170 + this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
  171 + //加载菜单数据
  172 + this.subData = this.filterData;
  173 + //设定顶部菜单名字
  174 + if(this.updateMenuName){
  175 + this.setMenuName();
  176 + }
  177 + },
  178 + setMenuName(){
  179 + for(var i=0;i<this.activeMenuArr.length;i++){
  180 + let row = this.activeMenuArr[i];
  181 + if (typeof(row[0]) != 'object'){
  182 + var tmpsub = false;
  183 + if(row.length>0 && row[0]!=null){
  184 + tmpsub = this.subData[i].submenu[row[0]];
  185 + if(row.length>1 && row[1]!=null){
  186 + tmpsub = tmpsub.submenu[row[1]];
  187 + if(row.length>2 && row[2]!=null){
  188 + tmpsub = tmpsub.submenu[row[2]];
  189 + }
  190 + }
  191 + }else{
  192 + tmpsub = false;
  193 + }
  194 + if(tmpsub){
  195 + this.menu[i].name = tmpsub.name;
  196 + }
  197 + }
  198 + }
  199 + },
  200 + //展开更多
  201 + showMoreSub(index) {
  202 + this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
  203 + this.$forceUpdate();
  204 + },
  205 + //选中
  206 + selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
  207 + //读取记录
  208 + if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
  209 + level1_index) {
  210 + this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
  211 + } else {
  212 + this.activeMenuArr[page_index].splice(0, 1, level1_index);
  213 + (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
  214 + (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
  215 + }
  216 + //写入结果
  217 + if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
  218 + ) {
  219 + let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
  220 + if(this.updateMenuName){
  221 + this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
  222 + }
  223 + this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
  224 + this.togglePage(this.showPage);
  225 + }
  226 + },
  227 + //写入结果，筛选
  228 + setFilterData(page_index) {
  229 + this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
  230 + this.togglePage(this.showPage);
  231 + },
  232 + //重置结果和ui，筛选
  233 + resetFilterData(page_index) {
  234 + let tmpArr = [];
  235 + let level = this.shadowActiveMenuArr[page_index].length;
  236 + while (level > 0) {
  237 + tmpArr.push([]);
  238 + let box = this.subData[page_index].submenu[level - 1].submenu;
  239 + for (let i = 0; i < box.length; i++) {
  240 + this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
  241 + }
  242 + level--;
  243 + }
  244 + this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
  245 + this.$forceUpdate();
  246 + },
  247 + //选中筛选类label-UI状态
  248 + selectFilterLabel(page_index, box_index, label_index) {
  249 + let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
  250 + if (find_index > -1) {
  251 + this.activeMenuArr[page_index][box_index].splice(find_index, 1);
  252 + this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
  253 + } else {
  254 + this.activeMenuArr[page_index][box_index].push(label_index);
  255 + this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
  256 + }
  257 + this.$forceUpdate();
  258 + },
  259 + //选中单选类label-UI状态
  260 + selectRadioLabel(page_index, box_index, label_index) {
  261 +
  262 + let activeIndex = this.activeMenuArr[page_index][box_index][0];
  263 + if(activeIndex == label_index){
  264 + this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
  265 + this.activeMenuArr[page_index][box_index][0] = null;
  266 + }else{
  267 + if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
  268 + this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
  269 + }
  270 +
  271 + this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
  272 + this.activeMenuArr[page_index][box_index][0] = label_index;
  273 + }
  274 + this.$forceUpdate();
  275 + },
  276 + //菜单开关
  277 + togglePage(index) {
  278 + if (index == this.showPage) {
  279 + this.hidePageLayer(true);
  280 + this.hideMask();
  281 + this.showPage = -1;
  282 + } else {
  283 + if (this.showPage > -1) {
  284 + this.hidePageLayer(false);
  285 + }
  286 + this.showPageLayer(index);
  287 + this.showMask();
  288 + }
  289 + },
  290 + //hide遮罩层
  291 + hideMask() {
  292 + this.isShowMask = false;
  293 + setTimeout(() => {
  294 + this.maskVisibility = false;
  295 + }, 200);
  296 + },
  297 + //show遮罩层
  298 + showMask() {
  299 + this.maskVisibility = true;
  300 + this.$nextTick(() => {
  301 + setTimeout(() => {
  302 + this.isShowMask = true;
  303 + }, 0);
  304 + })
  305 + },
  306 + //hide菜单页
  307 + hidePageLayer(isAnimation) {
  308 + this.triangleDeg[this.showPage] = 0;
  309 + let tmpIndex = this.showPage;
  310 + if (isAnimation) {
  311 + setTimeout(() => {
  312 + this.pageState.splice(tmpIndex, 1, false);
  313 + }, 200);
  314 + this.confirm();
  315 + } else {
  316 + this.pageState.splice(tmpIndex, 1, false)
  317 + }
  318 + this.firstScrollInto = null;
  319 + this.secondScrollInto = null;
  320 + },
  321 + confirm() {
  322 + let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
  323 + let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
  324 +
  325 + //对结果做一下处理
  326 + index.forEach((item, i) => {
  327 + if (typeof(item[0]) == 'object') {
  328 + //针对筛选结果过一个排序
  329 + item.forEach((s, j) => {
  330 + if(s!=null){
  331 + s.sort((val1, val2) => {
  332 + return val1 - val2;
  333 + });
  334 + item[j] = s;
  335 + s.forEach((v, k) => {
  336 + value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
  337 + if(this.subData[i].type == 'radio' && value[i][j][k] == null){
  338 + value[i][j] = [];
  339 + index[i][j] = [];
  340 + }
  341 + });
  342 + }
  343 + });
  344 + }else{
  345 + let submenu = this.subData[i].submenu[item[0]];
  346 + value[i][0] = submenu.value;
  347 + if(value[i].length>=2 && item[1]!=null){
  348 + if(submenu.submenu.length>0){
  349 + submenu = submenu.submenu[item[1]];
  350 + value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
  351 + }else{
  352 + value[i][1] = null
  353 + }
  354 + if(value[i].length>=3 && item[2]!=null){
  355 + if(submenu.submenu.length>0){
  356 + submenu = submenu.submenu[item[2]];
  357 + value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
  358 + }else{
  359 + value[i][2] = null;
  360 + }
  361 + }
  362 + }
  363 + }
  364 + index[i] = item;
  365 +
  366 + });
  367 + // 输出
  368 + this.$emit('confirm', {
  369 + index: index,
  370 + value: value
  371 + });
  372 + },
  373 + //show菜单页
  374 + showPageLayer(index) {
  375 + this.processPage(index);
  376 + this.pageState.splice(index, 1, true);
  377 + this.$nextTick(() => {
  378 + setTimeout(() => {
  379 + this.showPage = index;
  380 + }, 0);
  381 + })
  382 + this.triangleDeg[index] = 180;
  383 + },
  384 + reloadActiveMenuArr(){
  385 + for (let i = 0; i < this.filterData.length; i++) {
  386 + let tmpitem = this.filterData[i];
  387 + let tmpArr = this.processActive(tmpitem);
  388 + tmpitem = this.processSubMenu(tmpitem);
  389 + if(this.activeMenuArr[i].length!=tmpArr.length){
  390 + this.filterData[i] = tmpitem;
  391 + this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
  392 + this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
  393 + }
  394 + }
  395 + this.subData = this.filterData;
  396 + this.$forceUpdate();
  397 + },
  398 + processPage(index) {
  399 + //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
  400 + this.reloadActiveMenuArr();
  401 + //重置UI控制数组
  402 + this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
  403 + if (this.menu[index].type == 'filter') {
  404 + //重载筛选页选中状态
  405 + let level = this.shadowActiveMenuArr[index].length;
  406 + for (let i = 0; i < level; i++) {
  407 + let box = this.subData[index].submenu[i].submenu;
  408 + for (let j = 0; j < box.length; j++) {
  409 + if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
  410 + this.subData[index].submenu[i].submenu[j].selected = true;
  411 + } else {
  412 + this.subData[index].submenu[i].submenu[j].selected = false;
  413 + }
  414 + }
  415 + }
  416 + } else if (this.menu[index].type == 'hierarchy') {
  417 + this.$nextTick(() => {
  418 + setTimeout(() => {
  419 + //滚动到选中项
  420 + this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
  421 + this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
  422 + }, 0);
  423 + })
  424 + } else if (this.menu[index].type == 'radio') {
  425 + //重载筛选页选中状态
  426 + let level = this.shadowActiveMenuArr[index].length;
  427 + for (let i = 0; i < level; i++) {
  428 + let box = this.subData[index].submenu[i].submenu;
  429 + for (let j = 0; j < box.length; j++) {
  430 + if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
  431 + this.subData[index].submenu[i].submenu[j].selected = true;
  432 + } else {
  433 + this.subData[index].submenu[i].submenu[j].selected = false;
  434 + }
  435 + }
  436 + }
  437 + }
  438 + },
  439 + processActive(tmpitem) {
  440 + let tmpArr = []
  441 + if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
  442 + let level = this.getMaxFloor(tmpitem.submenu);
  443 + while (level > 0) {
  444 + tmpArr.push(0);
  445 + level--;
  446 + }
  447 + } else if (tmpitem.type == 'filter') {
  448 + let level = tmpitem.submenu.length;
  449 + while (level > 0) {
  450 + tmpArr.push([]);
  451 + level--;
  452 + }
  453 + } else if (tmpitem.type == 'radio') {
  454 + let level = tmpitem.submenu.length;
  455 + while (level > 0) {
  456 + tmpArr.push([]);
  457 + level--;
  458 + }
  459 + }
  460 + return tmpArr;
  461 + },
  462 + processSubMenu(menu) {
  463 + if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
  464 + for (let i = 0; i < menu.submenu.length; i++) {
  465 + menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
  466 + }
  467 + } else {
  468 + menu.submenu = [];
  469 + }
  470 + return menu;
  471 + },
  472 + //计算菜单层级
  473 + getMaxFloor(treeData) {
  474 + let floor = 0
  475 + let max = 0
  476 + function each(data, floor) {
  477 + data.forEach(e => {
  478 + max = floor > max ? floor : max;
  479 + if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
  480 + each(e.submenu, floor + 1)
  481 + }
  482 + })
  483 + }
  484 + each(treeData, 1)
  485 + return max;
  486 + },
  487 + discard() {
  488 +
  489 + }
  490 + }
  491 + }
  492 +</script>
  493 +<style lang="scss">
  494 + .HMfilterDropdown {
  495 + flex-shrink: 0;
  496 + width: 100%;
  497 + height: 44px;
  498 + position: fixed;
  499 + z-index: 997;
  500 + flex-wrap: nowrap;
  501 + display: flex;
  502 + flex-direction: row;
  503 + top: var(--window-top);
  504 + left:0;
  505 + view {
  506 + display: flex;
  507 + flex-wrap: nowrap;
  508 + }
  509 + }
  510 + .region {
  511 + flex: 1;
  512 + height: 44px;
  513 + }
  514 + .nav {
  515 + width: 100%;
  516 + height: 44px;
  517 + border-bottom: solid 1rpx #eee;
  518 + z-index: 12;
  519 + background-color: #ffffff;
  520 + flex-direction: row;
  521 + .first-menu {
  522 + width: 100%;
  523 + font-size: 13px;
  524 + color: #757575;
  525 + flex-direction: row;
  526 + align-items: center;
  527 + justify-content: center;
  528 + transition: color .2s linear;
  529 +
  530 + &.on {
  531 + color: #ec652b;
  532 +
  533 + .iconfont {
  534 + color: #ec652b;
  535 + }
  536 + }
  537 + .name {
  538 + height: 20px;
  539 + text-align: center;
  540 + text-overflow: clip;
  541 + overflow: hidden;
  542 + }
  543 + .iconfont {
  544 + width: 13px;
  545 + height: 13px;
  546 + align-items: center;
  547 + justify-content: center;
  548 + transition: transform .2s linear, color .2s linear;
  549 + }
  550 + }
  551 + }
  552 + .sub-menu-class {
  553 + width: 100%;
  554 + position: absolute;
  555 + left: 0;
  556 + transform: translate3d(0, - 100%, 0);
  557 + max-height: 345px;
  558 + background-color: #ffffff;
  559 + z-index: 11;
  560 + box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
  561 + overflow: hidden;
  562 + flex-direction: row;
  563 + transition: transform .15s linear;
  564 + &.hide {
  565 + display: none;
  566 + }
  567 +
  568 + &.show {
  569 + transform: translate3d(0, calc(44px + 1rpx), 0);
  570 + }
  571 + }
  572 + .sub-menu-list {
  573 + width: 100%;
  574 + height: 345px;
  575 + flex-direction: column;
  576 + .sub-menu {
  577 + min-height: 44px;
  578 + font-size: 13px;
  579 + flex-direction: column;
  580 + padding-right: 15px;
  581 + >.menu-name {
  582 + height: 44px;
  583 + flex-direction: row;
  584 + align-items: center;
  585 + justify-content: space-between;
  586 + >.iconfont {
  587 + display: none;
  588 + font-size: 18px;
  589 + color: #ec652b;
  590 + }
  591 + }
  592 + }
  593 + &.first {
  594 + flex-shrink: 0;
  595 + width: 236rpx;
  596 + background-color: #f0f0f0;
  597 + .sub-menu {
  598 + padding-left: 15px;
  599 +
  600 + &.on {
  601 + background-color: #fff;
  602 + }
  603 + }
  604 + }
  605 + &.alone {
  606 + max-height: 345px;
  607 + min-height: 170px;
  608 + height: auto;
  609 + .sub-menu {
  610 + min-height: calc(44px - 1rpx);
  611 + margin-left: 15px;
  612 + border-bottom: solid 1rpx #e5e5e5;
  613 +
  614 + &.on {
  615 + color: #ec652b;
  616 +
  617 + >.menu-name {
  618 + >.iconfont {
  619 + display: block;
  620 + }
  621 + }
  622 + }
  623 + }
  624 + }
  625 + &.not-first {
  626 + .sub-menu {
  627 + min-height: calc(44px - 1rpx);
  628 + margin-left: 15px;
  629 + border-bottom: solid 1rpx #e5e5e5;
  630 + >.menu-name {
  631 + height: calc(44px - 1rpx);
  632 + >.iconfont {
  633 + display: none;
  634 + font-size: 18px;
  635 + color: #ec652b;
  636 + }
  637 + }
  638 + &.on {
  639 + color: #ec652b;
  640 + >.menu-name {
  641 + >.iconfont {
  642 + display: block;
  643 + }
  644 + }
  645 + }
  646 + .more-sub-menu {
  647 + flex-direction: row;
  648 + flex-wrap: wrap;
  649 + padding-bottom: 9px;
  650 + >text {
  651 + height: 30px;
  652 + border-radius: 3px;
  653 + background-color: #f5f5f5;
  654 + color: #9b9b9b;
  655 + margin-bottom: 6px;
  656 + margin-right: 6px;
  657 + text-align: center;
  658 + line-height: 30px;
  659 + border: solid #f5f5f5 1rpx;
  660 + flex: 0 0 calc(33.33% - 6px);
  661 + overflow: hidden;
  662 + font-size: 12px;
  663 + &:nth-child(3n) {
  664 + margin-right: 0;
  665 + }
  666 + &.on {
  667 + border-color: #f6c8ac;
  668 + color: #ec652b;
  669 + }
  670 + .iconfont {
  671 + color: #9b9b9b;
  672 + }
  673 + }
  674 + }
  675 + }
  676 + }
  677 + }
  678 + .filter {
  679 + width: 100%;
  680 + height: 345px;
  681 + display: flex;
  682 + flex-direction: column;
  683 + justify-content: space-between;
  684 + align-items: center;
  685 + .menu-box {
  686 + width: 698rpx;
  687 + height: calc(345px - 75px);
  688 + flex-shrink: 1;
  689 + .box {
  690 + width: 100%;
  691 + margin-top: 16px;
  692 + flex-direction: column;
  693 + .title {
  694 + width: 100%;
  695 + font-size: 13px;
  696 + color: #888;
  697 + }
  698 + .labels {
  699 + flex-direction: row;
  700 + flex-wrap: wrap;
  701 + .on {
  702 + border-color: #ec652b;
  703 + background-color: #ec652b;
  704 + color: #fff;
  705 + }
  706 + >view {
  707 + width: 148rpx;
  708 + height: 30px;
  709 + border: solid 1rpx #adadad;
  710 + border-radius: 2px;
  711 + margin-right: 15px;
  712 + margin-top: 8px;
  713 + font-size: 12px;
  714 + flex-direction: row;
  715 + justify-content: center;
  716 + align-items: center;
  717 + &:nth-child(4n) {
  718 + margin-right: 0;
  719 + }
  720 + }
  721 + }
  722 + }
  723 + }
  724 + .btn-box {
  725 + flex-shrink: 0;
  726 + width: 698rpx;
  727 + height: 75px;
  728 + flex-direction: row !important;
  729 + align-items: center;
  730 + justify-content: space-between;
  731 + >view {
  732 + width: 320rpx;
  733 + height: 40px;
  734 + border-radius: 40px;
  735 + border: solid 1rpx #ec652b;
  736 + align-items: center;
  737 + justify-content: center;
  738 + }
  739 + .reset {
  740 + color: #ec652b;
  741 + }
  742 + .submit {
  743 + color: #fff;
  744 + background-color: #ec652b;
  745 + }
  746 + }
  747 + }
  748 + .mask {
  749 + z-index: 10;
  750 + position: fixed;
  751 + top: 0;
  752 + left: 0;
  753 + right: 0;
  754 + bottom: 0;
  755 + background-color: rgba(0, 0, 0, 0);
  756 + transition: background-color .15s linear;
  757 + &.show {
  758 + background-color: rgba(0, 0, 0, 0.5);
  759 + }
  760 + &.hide {
  761 + display: none;
  762 + }
  763 + }
  764 + /* 字体图标 */
  765 + @font-face {
  766 + font-family: "HM-FD-font";
  767 + src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
  768 + }
  769 + .iconfont {
  770 + font-family: "HM-FD-font" !important;
  771 + font-size: 13px;
  772 + font-style: normal;
  773 + color: #757575;
  774 + &.triangle {
  775 + &:before {
  776 + content: "\e65a";
  777 + }
  778 + }
  779 + &.selected {
  780 + &:before {
  781 + content: "\e607";
  782 + }
  783 + }
  784 + }
  785 +</style>
... ...
src/components/card.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,19 @@
  1 +<template>
  2 + <view>
  3 +
  4 + </view>
  5 +</template>
  6 +
  7 +<script>
  8 + export default {
  9 + data() {
  10 + return {
  11 +
  12 + };
  13 + }
  14 + }
  15 +</script>
  16 +
  17 +<style lang="scss">
  18 +
  19 +</style>
... ...
src/components/uni-drawer/uni-drawer.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,170 @@
  1 +<template>
  2 + <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
  3 + <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
  4 + <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
  5 + <slot />
  6 + </view>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 + /**
  12 + * Drawer 抽屉
  13 + * @description 抽屉侧滑菜单
  14 + * @tutorial https://ext.dcloud.net.cn/plugin?id=26
  15 + * @property {Boolean} mask = [true | false] 是否显示遮罩
  16 + * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
  17 + * @property {Boolean} mode = [left | right] Drawer 滑出位置
  18 + * @value left 从左侧滑出
  19 + * @value right 从右侧侧滑出
  20 + * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
  21 + * @event {Function} close 组件关闭时触发事件
  22 + */
  23 + export default {
  24 + name: 'UniDrawer',
  25 + props: {
  26 + /**
  27 + * 显示模式（左、右），只在初始化生效
  28 + */
  29 + mode: {
  30 + type: String,
  31 + default: ''
  32 + },
  33 + /**
  34 + * 蒙层显示状态
  35 + */
  36 + mask: {
  37 + type: Boolean,
  38 + default: true
  39 + },
  40 + /**
  41 + * 遮罩是否可点击关闭
  42 + */
  43 + maskClick:{
  44 + type: Boolean,
  45 + default: true
  46 + },
  47 + /**
  48 + * 抽屉宽度
  49 + */
  50 + width: {
  51 + type: Number,
  52 + default: 220
  53 + }
  54 + },
  55 + data() {
  56 + return {
  57 + visibleSync: false,
  58 + showDrawer: false,
  59 + rightMode: false,
  60 + watchTimer: null,
  61 + drawerWidth: 220
  62 + }
  63 + },
  64 + created() {
  65 + // #ifndef APP-NVUE
  66 + this.drawerWidth = this.width
  67 + // #endif
  68 + this.rightMode = this.mode === 'right'
  69 + },
  70 + methods: {
  71 + clear(){},
  72 + close(type) {
  73 + // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
  74 + if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
  75 + this._change('showDrawer', 'visibleSync', false)
  76 + },
  77 + open() {
  78 + // fixed by mehaotian 处理重复点击打开的事件
  79 + if(this.visibleSync) return
  80 + this._change('visibleSync', 'showDrawer', true)
  81 + },
  82 + _change(param1, param2, status) {
  83 + this[param1] = status
  84 + if (this.watchTimer) {
  85 + clearTimeout(this.watchTimer)
  86 + }
  87 + this.watchTimer = setTimeout(() => {
  88 + this[param2] = status
  89 + this.$emit('change',status)
  90 + }, status ? 50 : 300)
  91 + }
  92 + }
  93 + }
  94 +</script>
  95 +
  96 +<style lang="scss" scoped>
  97 + // 抽屉宽度
  98 + $drawer-width: 220px;
  99 +
  100 + .uni-drawer {
  101 + /* #ifndef APP-NVUE */
  102 + display: block;
  103 + /* #endif */
  104 + position: fixed;
  105 + top: 0;
  106 + left: 0;
  107 + right: 0;
  108 + bottom: 0;
  109 + overflow: hidden;
  110 + z-index: 999;
  111 + }
  112 +
  113 + .uni-drawer__content {
  114 + /* #ifndef APP-NVUE */
  115 + display: block;
  116 + /* #endif */
  117 + position: absolute;
  118 + top: 0;
  119 + width: $drawer-width;
  120 + bottom: 0;
  121 + background-color: $uni-bg-color;
  122 + transition: transform 0.3s ease;
  123 + }
  124 +
  125 + .uni-drawer--left {
  126 + left: 0;
  127 + /* #ifdef APP-NVUE */
  128 + transform: translateX(-$drawer-width);
  129 + /* #endif */
  130 + /* #ifndef APP-NVUE */
  131 + transform: translateX(-100%);
  132 + /* #endif */
  133 + }
  134 +
  135 + .uni-drawer--right {
  136 + right: 0;
  137 + /* #ifdef APP-NVUE */
  138 + transform: translateX($drawer-width);
  139 + /* #endif */
  140 + /* #ifndef APP-NVUE */
  141 + transform: translateX(100%);
  142 + /* #endif */
  143 + }
  144 +
  145 + .uni-drawer__content--visible {
  146 + transform: translateX(0px);
  147 + }
  148 +
  149 +
  150 + .uni-drawer__mask {
  151 + /* #ifndef APP-NVUE */
  152 + display: block;
  153 + /* #endif */
  154 + opacity: 0;
  155 + position: absolute;
  156 + top: 0;
  157 + left: 0;
  158 + bottom: 0;
  159 + right: 0;
  160 + background-color: $uni-bg-color-mask;
  161 + transition: opacity 0.3s;
  162 + }
  163 +
  164 + .uni-drawer__mask--visible {
  165 + /* #ifndef APP-NVUE */
  166 + display: block;
  167 + /* #endif */
  168 + opacity: 1;
  169 + }
  170 +</style>
... ...
src/hybrid/html/local.html
Diff comments   View file @289f85d
... ... @@ -0,0 +1,88 @@
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8" />
  5 + <meta name="viewport" content="width=device-width, initial-scale=1">
  6 + <title>本地网页</title>
  7 + <style type="text/css">
  8 + .btn {
  9 + display: block;
  10 + margin: 20px auto;
  11 + padding: 5px;
  12 + background-color: #007aff;
  13 + border: 0;
  14 + color: #ffffff;
  15 + height: 40px;
  16 + width: 200px;
  17 + }
  18 +
  19 + .btn-red {
  20 + background-color: #dd524d;
  21 + }
  22 +
  23 + .btn-yellow {
  24 + background-color: #f0ad4e;
  25 + }
  26 +
  27 + .desc {
  28 + padding: 10px;
  29 + color: #999999;
  30 + }
  31 + </style>
  32 + </head>
  33 + <body>
  34 + <p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
  35 + <div class="btn-list">
  36 + <button class="btn" type="button" data-action="navigateTo">navigateTo</button>
  37 + <button class="btn" type="button" data-action="redirectTo">redirectTo</button>
  38 + <button class="btn" type="button" data-action="navigateBack">navigateBack</button>
  39 + <button class="btn" type="button" data-action="reLaunch">reLaunch</button>
  40 + <button class="btn" type="button" data-action="switchTab">switchTab</button>
  41 + </div>
  42 + <p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
  43 + <div class="btn-list">
  44 + <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
  45 + </div>
  46 + <!-- uni 的 SDK -->
  47 + <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  48 + <script type="text/javascript">
  49 + document.addEventListener('UniAppJSBridgeReady', function() {
  50 + document.querySelector('.btn-list').addEventListener('click', function(evt) {
  51 + var target = evt.target;
  52 + if (target.tagName === 'BUTTON') {
  53 + var action = target.getAttribute('data-action');
  54 + switch (action) {
  55 + case 'switchTab':
  56 + uni.switchTab({
  57 + url: '/pages/tabBar/API/API'
  58 + });
  59 + break;
  60 + case 'reLaunch':
  61 + uni.reLaunch({
  62 + url: '/pages/tabBar/API/API'
  63 + });
  64 + break;
  65 + case 'navigateBack':
  66 + uni.navigateBack({
  67 + delta: 1
  68 + });
  69 + break;
  70 + default:
  71 + uni[action]({
  72 + url: '/pages/component/button/button'
  73 + });
  74 + break;
  75 + }
  76 + }
  77 + });
  78 + document.querySelector("#postMessage").addEventListener('click', function() {
  79 + uni.postMessage({
  80 + data: {
  81 + action: 'message'
  82 + }
  83 + });
  84 + })
  85 + });
  86 + </script>
  87 + </body>
  88 +</html>
... ...
... ... @@ -0,0 +1,11 @@
  1 +import Vue from 'vue'
  2 +import App from './App'
  3 +
  4 +Vue.config.productionTip = false
  5 +
  6 +App.mpType = 'app'
  7 +
  8 +const app = new Vue({
  9 + ...App
  10 +})
  11 +app.$mount()
... ...
src/manifest.json
Diff comments   View file @289f85d
... ... @@ -0,0 +1,75 @@
  1 +{
  2 + "name" : "gulu-vue",
  3 + "appid" : "",
  4 + "description" : "",
  5 + "versionName" : "1.0.0",
  6 + "versionCode" : "100",
  7 + "transformPx" : false,
  8 + /* 5+App特有相关 */
  9 + "app-plus" : {
  10 + "usingComponents" : true,
  11 + "nvueCompiler" : "uni-app",
  12 + "compilerVersion" : 3,
  13 + "splashscreen" : {
  14 + "alwaysShowBeforeRender" : true,
  15 + "waiting" : true,
  16 + "autoclose" : true,
  17 + "delay" : 0
  18 + },
  19 + /* 模块配置 */
  20 + "modules" : {},
  21 + /* 应用发布信息 */
  22 + "distribute" : {
  23 + /* android打包配置 */
  24 + "android" : {
  25 + "permissions" : [
  26 + "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
  27 + "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
  28 + "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
  29 + "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
  30 + "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
  31 + "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
  32 + "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
  33 + "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
  34 + "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
  35 + "<uses-permission android:name=\"android.permission.CAMERA\"/>",
  36 + "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
  37 + "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
  38 + "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
  39 + "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
  40 + "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
  41 + "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
  42 + "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
  43 + "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
  44 + "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
  45 + "<uses-feature android:name=\"android.hardware.camera\"/>",
  46 + "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
  47 + "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
  48 + ]
  49 + },
  50 + /* ios打包配置 */
  51 + "ios" : {},
  52 + /* SDK配置 */
  53 + "sdkConfigs" : {}
  54 + }
  55 + },
  56 + /* 快应用特有相关 */
  57 + "quickapp" : {},
  58 + /* 小程序特有相关 */
  59 + "mp-weixin" : {
  60 + "appid" : "",
  61 + "setting" : {
  62 + "urlCheck" : false
  63 + },
  64 + "usingComponents" : true
  65 + },
  66 + "mp-alipay" : {
  67 + "usingComponents" : true
  68 + },
  69 + "mp-baidu" : {
  70 + "usingComponents" : true
  71 + },
  72 + "mp-toutiao" : {
  73 + "usingComponents" : true
  74 + }
  75 +}
... ...
... ... @@ -0,0 +1,53 @@
  1 +{
  2 + "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3 + {
  4 + "path": "pages/index/index",
  5 + "style": {
  6 + "navigationBarTitleText": "商城一览"
  7 + }
  8 + },
  9 + {
  10 + "path": "pages/cart/cart",
  11 + "style": {
  12 + "navigationBarTitleText": "购物车"
  13 + }
  14 + },
  15 + {
  16 + "path": "pages/user/user",
  17 + "style": {
  18 + "navigationBarTitleText": "我的"
  19 + }
  20 + }
  21 + ],
  22 + "globalStyle": {
  23 + "navigationBarTextStyle": "black",
  24 + "navigationBarTitleText": "uni-app",
  25 + "navigationBarBackgroundColor": "#F8F8F8",
  26 + "backgroundColor": "#F8F8F8"
  27 + },
  28 + "tabBar": {
  29 + "color": "#C0C4CC",
  30 + "selectedColor": "#fa436a",
  31 + "borderStyle": "black",
  32 + "backgroundColor": "#ffffff",
  33 + "list": [{
  34 + "pagePath": "pages/index/index",
  35 + "iconPath": "static/tab-home.png",
  36 + "selectedIconPath": "static/tab-home-current.png",
  37 + "text": "首页"
  38 + },
  39 + {
  40 + "pagePath": "pages/cart/cart",
  41 + "iconPath": "static/tab-cart.png",
  42 + "selectedIconPath": "static/tab-cart-current.png",
  43 + "text": "购物车"
  44 + },
  45 + {
  46 + "pagePath": "pages/user/user",
  47 + "iconPath": "static/tab-my.png",
  48 + "selectedIconPath": "static/tab-my-current.png",
  49 + "text": "我的"
  50 + }
  51 + ]
  52 + }
  53 +}
... ...
src/pages/cart/cart.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,52 @@
  1 +<template>
  2 + <view class="content">
  3 + <image class="logo" src="/static/logo.png"></image>
  4 + <view class="text-area">
  5 + <text class="title">{{title}}</text>
  6 + </view>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 + export default {
  12 + data() {
  13 + return {
  14 + title: 'Hello'
  15 + }
  16 + },
  17 + onLoad() {
  18 +
  19 + },
  20 + methods: {
  21 +
  22 + }
  23 + }
  24 +</script>
  25 +
  26 +<style>
  27 + .content {
  28 + display: flex;
  29 + flex-direction: column;
  30 + align-items: center;
  31 + justify-content: center;
  32 + }
  33 +
  34 + .logo {
  35 + height: 200rpx;
  36 + width: 200rpx;
  37 + margin-top: 200rpx;
  38 + margin-left: auto;
  39 + margin-right: auto;
  40 + margin-bottom: 50rpx;
  41 + }
  42 +
  43 + .text-area {
  44 + display: flex;
  45 + justify-content: center;
  46 + }
  47 +
  48 + .title {
  49 + font-size: 36rpx;
  50 + color: #8f8f94;
  51 + }
  52 +</style>
... ...
src/pages/index/index.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,308 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="header">
  4 + <!-- 搜索-->
  5 + <view class="searchBar">
  6 + <icon class="searchIcon" type="search" size="14"></icon>
  7 + <input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
  8 + </view>
  9 +
  10 + <!-- 筛选栏-->
  11 + <view class="screenBar">
  12 + <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
  13 + <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
  14 + {{ item.text }}<icon type="info" size="14"></icon>
  15 + </view>
  16 + <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
  17 + {{ item.text }}<icon type="info" size="14"></icon>
  18 + </view>
  19 + <view v-if="item.current !== 2&&item.current!==4">
  20 + <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + </view>
  25 + <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
  26 + <view class="close">
  27 + <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
  28 + </view>
  29 + </uni-drawer>
  30 +
  31 +
  32 +
  33 + <!-- 筛选菜单-->
  34 + <view class="content-wrap">
  35 + <view>
  36 + <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
  37 + <!-- 占位 -->
  38 + <view class="place"></view>
  39 + <!-- 商品列表 -->
  40 + <view class="goods-list">
  41 + <view class="product-list">
  42 + <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
  43 + <image mode="widthFix" :src="goods.img"></image>
  44 + <view class="name">{{goods.name}}</view>
  45 + <view class="info">
  46 + <view class="price">{{goods.price}}</view>
  47 + <view class="slogan">{{goods.slogan}}</view>
  48 + </view>
  49 + </view>
  50 + </view>
  51 + <view class="loading-text">{{loadingText}}</view>
  52 + </view>
  53 +
  54 + </view>
  55 + </view>
  56 + </view>
  57 +</template>
  58 +
  59 +<script>
  60 + import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
  61 + import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
  62 + import data from '@/common/data.js';//筛选菜单数据
  63 + export default {
  64 + components: {
  65 + uniDrawer,
  66 + 'HMfilterDropdown':HMfilterDropdown
  67 + },
  68 + data() {
  69 + return {
  70 + screenItems: [
  71 + {current:0,text:'全部',hasIcon:false},
  72 + {current:1,text:'销量',hasIcon:false},
  73 + {current:2,text:'价格',hasIcon:true},
  74 + {current:3,text:'折扣',hasIcon:false},
  75 + {current:4,text:'筛选',hasIcon:true},
  76 + ],
  77 + current: 0,
  78 + showRight: false,
  79 + indexArr:'',
  80 + valueArr:'',
  81 + //商品数据
  82 + goodsList:[
  83 + { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  84 + { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  85 + { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  86 + { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  87 + { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  88 + { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  89 + { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  90 + { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  91 + { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  92 + { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' }
  93 + ],
  94 + loadingText:"正在加载...",
  95 + filterDropdownValue:[],
  96 + filterData:[]
  97 + }
  98 + },
  99 + filters: {
  100 + 　　outData(value) {
  101 + 　　　　return JSON.stringify(value);
  102 + 　　}
  103 + },
  104 + onLoad: function () {
  105 + //定时器模拟ajax异步请求数据
  106 + setTimeout(()=>{
  107 + //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
  108 + this.filterDropdownValue = [
  109 + [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
  110 + [null,null], //第1个菜单选中 都不选中
  111 + [1], //第2个菜单选中 一级菜单的第1项
  112 + [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
  113 + [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
  114 + ];
  115 + this.filterData = data;
  116 + },100);
  117 + //模拟ajax请求子菜单数据。
  118 + // setTimeout(()=>{
  119 + //this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
  120 + // },5000)
  121 + },
  122 + methods: {
  123 + showDrawer(e) {
  124 + this.$refs[e].open()
  125 + },
  126 + closeDrawer(e) {
  127 + this.$refs[e].close()
  128 + },
  129 + change(e, type) {
  130 + this[type] = e
  131 + },
  132 + onClickItem(e) {
  133 + if (this.current !== e) {
  134 + this.current = e;
  135 + }
  136 + },
  137 + dropDown(){
  138 + console.log('下拉')
  139 + },
  140 + //接收菜单结果
  141 + confirm(e){
  142 + this.indexArr = e.index;
  143 + this.valueArr = e.value;
  144 + return;
  145 + console.log('修改菜单');
  146 + this.filterData[4].submenu[1] = {
  147 + "name": "项目2",
  148 + "submenu": [
  149 +
  150 + ]
  151 + }
  152 + }
  153 + },
  154 + onNavigationBarButtonTap(e) {
  155 + this.showRight = !this.showRight
  156 + },
  157 + //上拉加载，
  158 + onReachBottom(){
  159 + console.log('到底加载')
  160 + let len = this.goodsList.length;
  161 + if(len>=30){
  162 + this.loadingText="~~到底了~~";
  163 + return false;
  164 + }else{
  165 + this.loadingText="正在加载...";
  166 + }
  167 + let end_goods_id = this.goodsList[len-1].goods_id;
  168 + for(let i=1;i<=10;i++){
  169 + let goods_id = end_goods_id+i;
  170 + let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称', price: '￥168', slogan:'1235人付款' };
  171 + this.goodsList.push(p);
  172 + }
  173 + },
  174 + }
  175 +</script>
  176 +
  177 +<style lang="scss">
  178 + .content {
  179 + display: flex;
  180 + flex-direction: column;
  181 + align-items: center;
  182 + justify-content: center;
  183 + background-color: #F7F6F6;
  184 + }
  185 + .header{
  186 + display: flex;
  187 + flex-direction: column;
  188 + align-items: center;
  189 + justify-content: center;
  190 + background-color: #F7F6F6;
  191 + height:178rpx ;
  192 + width: 100%;
  193 + z-index: 999;
  194 + position: fixed;
  195 + top: 0;
  196 + }
  197 + .searchBar {
  198 + width: 670rpx;
  199 + display: flex;
  200 + position: fixed;
  201 + top: 0;
  202 + justify-content: center;
  203 + align-items: center;
  204 + box-sizing: border-box;
  205 + padding: 0rpx 16rpx;
  206 + border: 1px solid #FF6B4A;
  207 + border-radius: 8rpx;
  208 + background-color: #ffffff;
  209 + }
  210 +
  211 + .searchIpt {
  212 + height: 68rpx;
  213 + width: 670rpx;
  214 + padding: 16rpx;
  215 + font-size: 28rpx;
  216 + box-sizing: border-box;
  217 + }
  218 + .screenBar{
  219 + position: fixed;
  220 + top: 68rpx;
  221 + width: 670rpx;
  222 + height: 110rpx;
  223 + display: flex;
  224 + flex-direction: row;
  225 + justify-content: space-between;
  226 + align-items: center;
  227 + color: #333333;
  228 + font-size: 32rpx;
  229 + }
  230 + .active{
  231 + color: #FF6B4A;
  232 + }
  233 + .screenItem{
  234 + display: flex;
  235 + justify-content: center;
  236 + align-items: center;
  237 + }
  238 + .content-wrap{
  239 + width: 100%;
  240 + background-color: #FFFFFF;
  241 + }
  242 +
  243 + .HMfilterDropdown{
  244 + position: fixed;
  245 + top: 178rpx !important;
  246 + }
  247 + .place{
  248 + background-color: #ffffff;
  249 + height: 266rpx;
  250 + }
  251 + .goods-list{
  252 + padding-top: 10px;
  253 + .loading-text{
  254 + width: 100%;
  255 + display: flex;
  256 + justify-content: center;
  257 + align-items: center;
  258 + height: 30px;
  259 + color: #979797;
  260 + font-size: 12px;
  261 + }
  262 + .product-list{
  263 + width: 92%;
  264 + padding: 0 4% 3vw 4%;
  265 + display: flex;
  266 + justify-content: space-between;
  267 + flex-wrap: wrap;
  268 + .product{
  269 + width: 48%;
  270 + border-radius: 10px;
  271 + background-color: #fff;
  272 + margin: 0 0 7px 0;
  273 + box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  274 + image{
  275 + width: 100%;
  276 + border-radius: 10px 10px 0 0;
  277 + }
  278 + .name{
  279 + width: 92%;
  280 + padding: 5px 4%;
  281 + display: -webkit-box;
  282 + -webkit-box-orient: vertical;
  283 + -webkit-line-clamp: 2;
  284 + text-align: justify;
  285 + overflow: hidden;
  286 + font-size: 15px;
  287 + }
  288 + .info{
  289 + display: flex;
  290 + justify-content: space-between;
  291 + align-items: flex-end;
  292 + width: 92%;
  293 + padding: 5px 4% 5px 4%;
  294 + .price{
  295 + color: #e65339;
  296 + font-size: 15px;
  297 + font-weight: 600;
  298 + }
  299 + .slogan{
  300 + color: #807c87;
  301 + font-size: 12px;
  302 + }
  303 + }
  304 + }
  305 + }
  306 + }
  307 +
  308 +</style>
... ...
src/pages/user/user.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,52 @@
  1 +<template>
  2 + <view class="content">
  3 + <image class="logo" src="/static/logo.png"></image>
  4 + <view class="text-area">
  5 + <text class="title">{{title}}</text>
  6 + </view>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 + export default {
  12 + data() {
  13 + return {
  14 + title: 'Hello'
  15 + }
  16 + },
  17 + onLoad() {
  18 +
  19 + },
  20 + methods: {
  21 +
  22 + }
  23 + }
  24 +</script>
  25 +
  26 +<style>
  27 + .content {
  28 + display: flex;
  29 + flex-direction: column;
  30 + align-items: center;
  31 + justify-content: center;
  32 + }
  33 +
  34 + .logo {
  35 + height: 200rpx;
  36 + width: 200rpx;
  37 + margin-top: 200rpx;
  38 + margin-left: auto;
  39 + margin-right: auto;
  40 + margin-bottom: 50rpx;
  41 + }
  42 +
  43 + .text-area {
  44 + display: flex;
  45 + justify-content: center;
  46 + }
  47 +
  48 + .title {
  49 + font-size: 36rpx;
  50 + color: #8f8f94;
  51 + }
  52 +</style>
... ...
src/platforms/app-plus/feedback/feedback.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,202 @@
  1 +<template>
  2 + <view class="page">
  3 + <view class='feedback-title'>
  4 + <text>问题和意见</text>
  5 + <text class="feedback-quick" @tap="chooseMsg">快速键入</text>
  6 + </view>
  7 + <view class="feedback-body">
  8 + <textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare"></textarea>
  9 + </view>
  10 + <view class='feedback-title'>
  11 + <text>图片(选填,提供问题截图,总大小10M以下)</text>
  12 + </view>
  13 + <view class="feedback-body feedback-uploader">
  14 + <view class="uni-uploader">
  15 + <view class="uni-uploader-head">
  16 + <view class="uni-uploader-title">点击预览图片</view>
  17 + <view class="uni-uploader-info">{{imageList.length}}/8</view>
  18 + </view>
  19 + <view class="uni-uploader-body">
  20 + <view class="uni-uploader__files">
  21 + <block v-for="(image,index) in imageList" :key="index">
  22 + <view class="uni-uploader__file" style="position: relative;">
  23 + <image class="uni-uploader__img" :src="image" @tap="previewImage(index)"></image>
  24 + <view class="close-view" @click="close(index)">x</view>
  25 + </view>
  26 + </block>
  27 + <view class="uni-uploader__input-box" v-show="imageList.length < 8">
  28 + <view class="uni-uploader__input" @tap="chooseImg"></view>
  29 + </view>
  30 + </view>
  31 + </view>
  32 + </view>
  33 + </view>
  34 + <view class='feedback-title'>
  35 + <text>QQ/邮箱</text>
  36 + </view>
  37 + <view class="feedback-body">
  38 + <input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" />
  39 + </view>
  40 + <view class='feedback-title feedback-star-view'>
  41 + <text>应用评分</text>
  42 + <view class="feedback-star-view">
  43 + <text class="feedback-star" v-for="(value,key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''"
  44 + @tap="chooseStar(value)"></text>
  45 + </view>
  46 + </view>
  47 + <button type="default" class="feedback-submit" @tap="send">提交</button>
  48 + <view class='feedback-title'>
  49 + <text>用户反馈的结果可在app打包后于DCloud开发者中心查看</text>
  50 + </view>
  51 + </view>
  52 +</template>
  53 +
  54 +<script>
  55 + export default {
  56 + data() {
  57 + return {
  58 + msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
  59 + stars: [1, 2, 3, 4, 5],
  60 + imageList: [],
  61 + sendDate: {
  62 + score: 0,
  63 + content: "",
  64 + contact: ""
  65 + }
  66 + }
  67 + },
  68 + onLoad() {
  69 + let deviceInfo = {
  70 + appid: plus.runtime.appid,
  71 + imei: plus.device.imei, //设备标识
  72 + p: plus.os.name === "Android" ? "a" : "i", //平台类型，i表示iOS平台，a表示Android平台。
  73 + md: plus.device.model, //设备型号
  74 + app_version: plus.runtime.version,
  75 + plus_version: plus.runtime.innerVersion, //基座版本号
  76 + os: plus.os.version,
  77 + net: "" + plus.networkinfo.getCurrentType()
  78 + }
  79 + this.sendDate = Object.assign(deviceInfo, this.sendDate);
  80 + },
  81 + methods: {
  82 + close(e) {
  83 + this.imageList.splice(e, 1);
  84 + },
  85 + chooseMsg() { //快速输入
  86 + uni.showActionSheet({
  87 + itemList: this.msgContents,
  88 + success: (res) => {
  89 + this.sendDate.content = this.msgContents[res.tapIndex];
  90 + }
  91 + })
  92 + },
  93 + chooseImg() { //选择图片
  94 + uni.chooseImage({
  95 + sourceType: ["camera", "album"],
  96 + sizeType: "compressed",
  97 + count: 8 - this.imageList.length,
  98 + success: (res) => {
  99 + this.imageList = this.imageList.concat(res.tempFilePaths);
  100 + }
  101 + })
  102 + },
  103 + chooseStar(e) { //点击评星
  104 + this.sendDate.score = e;
  105 + },
  106 + previewImage(index) { //预览图片
  107 + uni.previewImage({
  108 + urls: this.imageList,
  109 + current: this.imageList[index]
  110 + });
  111 + },
  112 + send() { //发送反馈
  113 + console.log(JSON.stringify(this.sendDate));
  114 + if (this.imageList.length === 0) {
  115 + uni.showModal({
  116 + content: '至少选择一张图片',
  117 + showCancel: false
  118 + })
  119 + return
  120 + }
  121 + if (this.sendDate.content.length === 0) {
  122 + uni.showModal({
  123 + content: '请输入问题和意见',
  124 + showCancel: false
  125 + })
  126 + return
  127 + }
  128 + uni.showLoading({
  129 + title: '上传中...'
  130 + })
  131 + let imgs = this.imageList.map((value, index) => {
  132 + return {
  133 + name: "image" + index,
  134 + uri: value
  135 + }
  136 + })
  137 + uni.uploadFile({
  138 + url: "https://service.dcloud.net.cn/feedback",
  139 + files: imgs,
  140 + formData: this.sendDate,
  141 + success: (res) => {
  142 + if (typeof res.data === 'string') {
  143 + res.data = JSON.parse(res.data)
  144 + }
  145 + if (res.statusCode === 200 && res.data && res.data.ret === 0) {
  146 + uni.showModal({
  147 + content: '反馈成功',
  148 + showCancel: false
  149 + })
  150 + this.imageList = [];
  151 + this.sendDate = {
  152 + score: 0,
  153 + content: "",
  154 + contact: ""
  155 + }
  156 + } else if (res.statusCode !== 200){
  157 + uni.showModal({
  158 + content: '反馈失败，错误码为：' + res.statusCode,
  159 + showCancel: false
  160 + })
  161 + } else {
  162 + uni.showModal({
  163 + content: '反馈失败',
  164 + showCancel: false
  165 + })
  166 + }
  167 + },
  168 + fail: (res) => {
  169 + console.log(JSON.stringify(res))
  170 + },
  171 + complete() {
  172 + uni.hideLoading()
  173 + }
  174 + });
  175 + }
  176 + }
  177 + }
  178 +</script>
  179 +
  180 +<style>
  181 + page {
  182 + background-color: #EFEFF4;
  183 + }
  184 +
  185 + .input-view {
  186 + font-size: 28rpx;
  187 + }
  188 +
  189 + .close-view {
  190 + text-align: center;
  191 + line-height: 14px;
  192 + height: 16px;
  193 + width: 16px;
  194 + border-radius: 50%;
  195 + background: #FF5053;
  196 + color: #FFFFFF;
  197 + position: absolute;
  198 + top: -6px;
  199 + right: -4px;
  200 + font-size: 12px;
  201 + }
  202 +</style>
... ...
src/platforms/app-plus/orientation/orientation.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,61 @@
  1 +<template>
  2 + <view>
  3 + <page-head :title="title"></page-head>
  4 + <view class="uni-padding-wrap uni-common-mt">
  5 + <view class="uni-btn-v">
  6 + <button type="primary" @tap="getOrient">获取设备的方向信息</button>
  7 + <button type="primary" @tap="watchOrient">监听设备的方向变化</button>
  8 + <button type="primary" @tap="watchStop">停止监听</button>
  9 + </view>
  10 + <view class="uni-textarea">
  11 + <textarea :value="value" />
  12 + </view>
  13 + </view>
  14 + </view>
  15 +</template>
  16 +<script>
  17 + var id = null
  18 + export default {
  19 + data() {
  20 + return {
  21 + title: 'orientation',
  22 + value: ''
  23 + }
  24 + },
  25 + methods: {
  26 + getOrient: function () {
  27 + var that = this;
  28 + plus.orientation.getCurrentOrientation(function (o) {
  29 + that.value = "alpha：" + o.alpha + "\nbeta：" + o.beta + "\ngamma：" + o.gamma;
  30 + }, function (e) {
  31 + console.log("获取失败:" + e.message);
  32 + });
  33 + },
  34 + watchOrient: function () {
  35 + var that = this;
  36 + if (id) {
  37 + return;
  38 + }
  39 + id = plus.orientation.watchOrientation(function (o) {
  40 + that.value = "监听设备方向变化信息\n" + "alpha：" + o.alpha + "\nbeta：" + o.beta + "\ngamma：" + o.gamma;
  41 + }, function (e) {
  42 + plus.orientation.clearWatch(id);
  43 + id = null;
  44 + console.log("监听失败:" + e.message);
  45 + });
  46 + },
  47 + watchStop: function () {
  48 + if (id) {
  49 + plus.orientation.clearWatch(id);
  50 + id = null;
  51 + } else {
  52 + console.log("没有监听设备方向变化");
  53 + }
  54 + }
  55 + }
  56 + }
  57 +</script>
  58 +
  59 +<style>
  60 +
  61 +</style>
0 62 \ No newline at end of file
... ...
src/platforms/app-plus/proximity/proximity.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,69 @@
  1 +<template>
  2 + <view>
  3 + <page-head :title="title"></page-head>
  4 + <view class="uni-padding-wrap uni-common-mt">
  5 + <view class="uni-hello-text">
  6 + 手机顶部听筒处有传感器监听距离手机屏幕的障碍物，覆盖该传感器会触发本事件变化
  7 + </view>
  8 + <view class="uni-btn-v uni-common-mt">
  9 + <button type="primary" @tap="getProximity">获取距离传感器信息</button>
  10 + <button type="primary" @tap="watchProximity">监听距离传感器变化</button>
  11 + <button type="primary" @tap="watchStop">停止监听</button>
  12 + </view>
  13 + <view class="uni-textarea uni-common-mt">
  14 + <textarea :value="value" />
  15 + </view>
  16 + </view>
  17 + </view>
  18 +</template>
  19 +<script>
  20 + var id = null
  21 + var bright = null
  22 + export default {
  23 + data() {
  24 + return {
  25 + title: 'proximity',
  26 + value: ''
  27 + }
  28 + },
  29 + methods: {
  30 + getProximity: function () {
  31 + var that = this;
  32 + plus.proximity.getCurrentProximity(function (d) {
  33 + that.value = "距离为：" + d;
  34 + }, function (e) {
  35 + that.value = "获取失败:" + e.message;
  36 + });
  37 + },
  38 + watchProximity: function () {
  39 + var that = this;
  40 + if (id) {
  41 + return;
  42 + }
  43 + bright = plus.screen.getBrightness();
  44 + id = plus.proximity.watchProximity(function (d) {
  45 + that.value = "距离变化：" + d;
  46 + plus.screen.setBrightness((d < 1) ? 0.01 : bright);
  47 + }, function (e) {
  48 + plus.proximity.clearWatch(id);
  49 + id = null;
  50 + that.value = "监听失败:" + e.message;
  51 + });
  52 + },
  53 + watchStop: function () {
  54 + var that = this;
  55 + if (id) {
  56 + that.value = "停止监听设备距离传感器信息";
  57 + plus.proximity.clearWatch(id);
  58 + id = null;
  59 + } else {
  60 + that.value = "没有监听设备距离传感器";
  61 + }
  62 + }
  63 + }
  64 + }
  65 +</script>
  66 +
  67 +<style>
  68 +
  69 +</style>
... ...
src/platforms/app-plus/push/push.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,120 @@
  1 +<template>
  2 + <view>
  3 + <page-head :title="title"></page-head>
  4 + <view class="uni-padding-wrap" v-if="provider[0]">
  5 + <view class="uni-btn-v uni-common-mt">
  6 + <button type="primary" @tap="openPush">开启push</button>
  7 + <button type="primary" @tap="closePush">关闭push</button>
  8 + <button type="primary" @tap="listenTranMsg">监听透传数据</button>
  9 + <button type="primary" @tap="removeTranMsg">移除监听透传数据</button>
  10 + </view>
  11 + <view class="uni-btn-v uni-common-mt">
  12 + <button type="primary" @tap="requireTranMsg">发送"透传数据"消息</button>
  13 + </view>
  14 + <view class="uni-title uni-common-mt">透传内容：</view>
  15 + <view class="uni-textarea">
  16 + <textarea v-model="tranMsg" />
  17 + </view>
  18 + </view>
  19 + </view>
  20 +</template>
  21 +<script>
  22 + export default {
  23 + data() {
  24 + return {
  25 + title: 'push',
  26 + provider: [],
  27 + pushServer: 'http://demo.dcloud.net.cn/push/?',
  28 + tranMsg:''
  29 + }
  30 + },
  31 + onLoad: function () {
  32 + uni.getProvider({
  33 + service: "push",
  34 + success: (e) => {
  35 + console.log("success", e);
  36 + this.provider = e.provider;
  37 + },
  38 + fail: (e) => {
  39 + console.log("获取推送通道失败", e);
  40 + }
  41 + });
  42 + },
  43 + onUnload:function(){
  44 + this.tranMsg = ''
  45 + },
  46 + methods: {
  47 + openPush() {
  48 + uni.subscribePush({
  49 + provider: this.provider[0],
  50 + success: (e) => {
  51 + uni.showToast({
  52 + title: "已开启push接收"
  53 + })
  54 + }
  55 + })
  56 + },
  57 + closePush() {
  58 + uni.unsubscribePush({
  59 + provider: this.provider[0],
  60 + success: (e) => {
  61 + uni.showToast({
  62 + title: "已关闭push接收"
  63 + })
  64 + }
  65 + })
  66 + },
  67 + listenTranMsg() {
  68 + uni.onPush({
  69 + provider: this.provider[0],
  70 + success: (e) => {
  71 + uni.showToast({
  72 + title: "开始监听透传数据"
  73 + })
  74 + },
  75 + callback: (e) => {
  76 + uni.showToast({
  77 + title: "接收到透传数据"
  78 + });
  79 +
  80 + this.tranMsg = JSON.stringify(e.data);
  81 + }
  82 + })
  83 + },
  84 + removeTranMsg() {
  85 + uni.offPush({
  86 + provider: this.provider[0],
  87 + success: (e) => {
  88 + console.log("移除监听透传数据");
  89 + uni.showToast({
  90 + title: "移除监听透传数据"
  91 + })
  92 + }
  93 + })
  94 + },
  95 + requireTranMsg() { //请求‘透传数据’推送消息
  96 + var inf = plus.push.getClientInfo();
  97 + var url = this.pushServer + 'type=tran&appid=' + encodeURIComponent(plus.runtime.appid);
  98 + inf.id && (url += '&id=' + inf.id);
  99 + url += ('&cid=' + encodeURIComponent(inf.clientid));
  100 + if (plus.os.name == 'iOS') {
  101 + url += ('&token=' + encodeURIComponent(inf.token));
  102 + }
  103 + url += ('&title=' + encodeURIComponent('Hello uniapp'));
  104 + url += ('&content=' + encodeURIComponent('带透传数据推送通知！'));
  105 + if(plus.os.name === 'iOS'){
  106 + url += ('&payload=' + encodeURIComponent('{"title":"Hello uniapp Test","content":"test content"}'));
  107 + }else{
  108 + url += ('&payload=' + encodeURIComponent('\'{"title":"Hello uniapp Test","content":"test content"}\''));
  109 + }
  110 + url += ('&version=' + encodeURIComponent(plus.runtime.version));
  111 + plus.runtime.openURL(url);
  112 + }
  113 + }
  114 + }
  115 +</script>
  116 +
  117 +<style>
  118 +
  119 +</style>
  120 +
... ...
src/platforms/app-plus/shake/shake.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,91 @@
  1 +<template>
  2 + <view class="root" :style="{backgroundImage:'url('+img+')'}">
  3 + <view :class="[show ? 'up' : '','shake-up']">
  4 + <image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakeup.png"></image>
  5 + </view>
  6 + <view :class="[show ? 'down' : '','shake-down']">
  7 + <image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakedown.png"></image>
  8 + </view>
  9 + </view>
  10 +</template>
  11 +<script>
  12 + export default {
  13 + data() {
  14 + return {
  15 + img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/1.jpg',
  16 + show: false,
  17 + isOpened: false
  18 + }
  19 + },
  20 + onLoad: function () {
  21 + this.music = uni.createInnerAudioContext();
  22 + this.music.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shake.wav';
  23 +
  24 + let index = 1,
  25 + t = null;
  26 + uni.onAccelerometerChange((res) => {
  27 + if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show && this.isOpened) {
  28 + this.music.play();
  29 + setTimeout(() => {
  30 + index++;
  31 + if (index > 4) {
  32 + index = 1
  33 + }
  34 + this.img = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/' + index + '.jpg';
  35 + }, 2000);
  36 + this.show = true;
  37 + if (t) {
  38 + clearTimeout(t);
  39 + }
  40 + t = setTimeout(() => {
  41 + t = null;
  42 + this.show = false;
  43 + }, 600)
  44 + }
  45 + })
  46 + },
  47 + onShow() {
  48 + this.isOpened = true;
  49 + },
  50 + onUnload() {
  51 + this.show = false;
  52 + this.isOpened = false;
  53 + uni.stopAccelerometer();
  54 + this.music.destroy();
  55 + }
  56 + }
  57 +</script>
  58 +
  59 +<style>
  60 + .root {
  61 + height: 100%;
  62 + display: flex;
  63 + flex-direction: column;
  64 + background-position: center center;
  65 + background-repeat: no-repeat;
  66 + }
  67 +
  68 + .shake-up,
  69 + .shake-down {
  70 + height: 50%;
  71 + overflow: hidden;
  72 + transition: all .5s ease-in-out;
  73 + -webkit-transition: all .5s ease-in-out;
  74 + background: #333;
  75 + }
  76 +
  77 + .up {
  78 + transform: translateY(-50%);
  79 + -webkit-transform: translateY(-50%);
  80 + }
  81 +
  82 + .down {
  83 + transform: translateY(50%);
  84 + -webkit-transform: translateY(50%);
  85 + }
  86 +
  87 + image {
  88 + height: 100%;
  89 + width: 100%;
  90 + }
  91 +</style>
... ...
src/platforms/app-plus/speech/speech.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,105 @@
  1 +<template>
  2 + <view>
  3 + <page-head :title="title"></page-head>
  4 + <view class="uni-padding-wrap uni-common-mt">
  5 + <view class="uni-textarea">
  6 + <textarea :value="value" placeholder="语音识别内容展示区域" disabled />
  7 + </view>
  8 + <view class="uni-common-mt uni-btn-v">
  9 + <button type="primary" @tap="startRecognize">开始语音识别</button>
  10 + <button type="primary" @tap="startRecognizeEnglish">开始语音识别（英语）</button>
  11 + </view>
  12 + </view>
  13 + </view>
  14 +</template>
  15 +<script>
  16 + import permision from "@/common/permission.js"
  17 + export default {
  18 + data() {
  19 + return {
  20 + title: 'speech',
  21 + value: ''
  22 + }
  23 + },
  24 + onUnload(){
  25 + this.value = ""
  26 + },
  27 + methods: {
  28 + async startRecognize () {
  29 + // #ifdef APP-PLUS
  30 + let status = await this.checkPermission();
  31 + if (status !== 1) {
  32 + return;
  33 + }
  34 + // #endif
  35 +
  36 + // TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用语音，会弹出正在识别的toast
  37 + var options = {};
  38 + var that = this;
  39 + options.engine = 'baidu';
  40 + that.value = "";
  41 + plus.speech.startRecognize(options, function (s) {
  42 + console.log(s);
  43 + that.value += s;
  44 + }, function (e) {
  45 + console.log("语音识别失败：" + e.message);
  46 + });
  47 + },
  48 + async startRecognizeEnglish () {
  49 + // #ifdef APP-PLUS
  50 + let status = await this.checkPermission();
  51 + if (status !== 1) {
  52 + return;
  53 + }
  54 + // #endif
  55 +
  56 + // TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用语音，会弹出正在识别的toast
  57 + var options = {};
  58 + var that = this;
  59 + options.engine = 'baidu';
  60 + options.lang = 'en-us';
  61 + that.value = "";
  62 + plus.speech.startRecognize(options, function (s) {
  63 + console.log(s);
  64 + that.value += s;
  65 + }, function (e) {
  66 + console.log("语音识别失败：" + e.message);
  67 + });
  68 + }
  69 + // #ifdef APP-PLUS
  70 + ,
  71 + async checkPermission() {
  72 + let status = permision.isIOS ? await permision.requestIOS('record') :
  73 + await permision.requestAndroid('android.permission.RECORD_AUDIO');
  74 +
  75 + if (status === null || status === 1) {
  76 + status = 1;
  77 + } else if (status === 2) {
  78 + uni.showModal({
  79 + content: "系统麦克风已关闭",
  80 + confirmText: "确定",
  81 + showCancel: false,
  82 + success: function(res) {
  83 + }
  84 + })
  85 + } else {
  86 + uni.showModal({
  87 + content: "需要麦克风权限",
  88 + confirmText: "设置",
  89 + success: function(res) {
  90 + if (res.confirm) {
  91 + permision.gotoAppSetting();
  92 + }
  93 + }
  94 + })
  95 + }
  96 + return status;
  97 + }
  98 + // #endif
  99 + }
  100 + }
  101 +</script>
  102 +
  103 +<style>
  104 +
  105 +</style>
... ...
src/static/img/goods/p1.jpg
Diff comments   View file @289f85d

11.3 KB
src/static/img/goods/p10.jpg
Diff comments   View file @289f85d

22.6 KB
src/static/img/goods/p2.jpg
Diff comments   View file @289f85d

16.3 KB
src/static/img/goods/p3.jpg
Diff comments   View file @289f85d

15 KB
src/static/img/goods/p4.jpg
Diff comments   View file @289f85d

6.55 KB
src/static/img/goods/p5.jpg
Diff comments   View file @289f85d

29.6 KB
src/static/img/goods/p6.jpg
Diff comments   View file @289f85d

6.25 KB
src/static/img/goods/p7.jpg
Diff comments   View file @289f85d

20.1 KB
src/static/img/goods/p8.jpg
Diff comments   View file @289f85d

20.4 KB
src/static/img/goods/p9.jpg
Diff comments   View file @289f85d

24.1 KB
src/static/logo.png
Diff comments   View file @289f85d

3.93 KB
src/static/tab-cart-current.png
Diff comments   View file @289f85d

2.89 KB
src/static/tab-cart.png
Diff comments   View file @289f85d

2.85 KB
src/static/tab-home-current.png
Diff comments   View file @289f85d

3.97 KB
src/static/tab-home.png
Diff comments   View file @289f85d

3.87 KB
src/static/tab-my-current.png
Diff comments   View file @289f85d

1.31 KB
src/static/tab-my.png
Diff comments   View file @289f85d

2.89 KB
src/store/index.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,73 @@
  1 +import Vue from 'vue'
  2 +import Vuex from 'vuex'
  3 +
  4 +Vue.use(Vuex)
  5 +
  6 +const store = new Vuex.Store({
  7 + state: {
  8 + hasLogin: false,
  9 + loginProvider: "",
  10 + openid: null,
  11 + testvuex:false,
  12 + colorIndex: 0,
  13 + colorList: ['#FF0000','#00FF00','#0000FF']
  14 + },
  15 + mutations: {
  16 + login(state, provider) {
  17 + state.hasLogin = true;
  18 + state.loginProvider = provider;
  19 + },
  20 + logout(state) {
  21 + state.hasLogin = false
  22 + state.openid = null
  23 + },
  24 + setOpenid(state, openid) {
  25 + state.openid = openid
  26 + },
  27 + setTestTrue(state){
  28 + state.testvuex = true
  29 + },
  30 + setTestFalse(state){
  31 + state.testvuex = false
  32 + },
  33 + setColorIndex(state,index){
  34 + state.colorIndex = index
  35 + }
  36 + },
  37 + getters:{
  38 + currentColor(state){
  39 + return state.colorList[state.colorIndex]
  40 + }
  41 + },
  42 + actions: {
  43 + // lazy loading openid
  44 + getUserOpenId: async function ({
  45 + commit,
  46 + state
  47 + }) {
  48 + return await new Promise((resolve, reject) => {
  49 + if (state.openid) {
  50 + resolve(state.openid)
  51 + } else {
  52 + uni.login({
  53 + success: (data) => {
  54 + commit('login')
  55 + setTimeout(function () { //模拟异步请求服务器获取 openid
  56 + const openid = '123456789'
  57 + console.log('uni.request mock openid[' + openid + ']');
  58 + commit('setOpenid', openid)
  59 + resolve(openid)
  60 + }, 1000)
  61 + },
  62 + fail: (err) => {
  63 + console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err)
  64 + reject(err)
  65 + }
  66 + })
  67 + }
  68 + })
  69 + }
  70 + }
  71 +})
  72 +
  73 +export default store
... ...
src/template.h5.html
Diff comments   View file @289f85d
... ... @@ -0,0 +1,53 @@
  1 +<!DOCTYPE html>
  2 +<html lang="zh-CN">
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 + <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7 + <title>
  8 + <%= htmlWebpackPlugin.options.title %>
  9 + </title>
  10 + <!-- 正式发布的时候使用，开发期间不启用。↓ -->
  11 + <!-- <script src="/h5/touch-emulator.js"></script>
  12 + <script>
  13 + TouchEmulator();
  14 + if (document.documentElement.clientWidth > 1024) {
  15 + window.location.href = '/h5/pcguide.html#'+location.pathname+location.search;
  16 + }
  17 + </script>
  18 + <style>
  19 + ::-webkit-scrollbar{
  20 + display: none;
  21 + }
  22 + </style>
  23 + <script>
  24 + var _hmt = _hmt || [];
  25 + (function() {
  26 + var hm = document.createElement("script");
  27 + hm.src = "https://hm.baidu.com/hm.js?";// 百度统计key
  28 + var s = document.getElementsByTagName("script")[0];
  29 + s.parentNode.insertBefore(hm, s);
  30 + })();
  31 + </script> -->
  32 + <!-- 正式发布的时候使用，开发期间不启用。↑ -->
  33 + <script>
  34 + document.addEventListener('DOMContentLoaded', function() {
  35 + document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
  36 + })
  37 + </script>
  38 + <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
  39 + </head>
  40 + <body>
  41 + <!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
  42 + <!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
  43 + <!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
  44 + <noscript>
  45 + <strong>Please enable JavaScript to continue.</strong>
  46 + </noscript>
  47 + <div id="app"></div>
  48 + <!-- built files will be auto injected -->
  49 + <script>
  50 + /*BAIDU_STAT*/
  51 + </script>
  52 + </body>
  53 +</html>
... ...
... ... @@ -0,0 +1,76 @@
  1 +/**
  2 + * 这里是uni-app内置的常用样式变量
  3 + *
  4 + * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
  5 + * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
  6 + *
  7 + */
  8 +
  9 +/**
  10 + * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
  11 + *
  12 + * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  13 + */
  14 +
  15 +/* 颜色变量 */
  16 +
  17 +/* 行为相关颜色 */
  18 +$uni-color-primary: #007aff;
  19 +$uni-color-success: #4cd964;
  20 +$uni-color-warning: #f0ad4e;
  21 +$uni-color-error: #dd524d;
  22 +
  23 +/* 文字基本颜色 */
  24 +$uni-text-color:#333;//基本色
  25 +$uni-text-color-inverse:#fff;//反色
  26 +$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
  27 +$uni-text-color-placeholder: #808080;
  28 +$uni-text-color-disable:#c0c0c0;
  29 +
  30 +/* 背景颜色 */
  31 +$uni-bg-color:#ffffff;
  32 +$uni-bg-color-grey:#f8f8f8;
  33 +$uni-bg-color-hover:#f1f1f1;//点击状态颜色
  34 +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
  35 +
  36 +/* 边框颜色 */
  37 +$uni-border-color:#c8c7cc;
  38 +
  39 +/* 尺寸变量 */
  40 +
  41 +/* 文字尺寸 */
  42 +$uni-font-size-sm:24rpx;
  43 +$uni-font-size-base:28rpx;
  44 +$uni-font-size-lg:32rpx;
  45 +
  46 +/* 图片尺寸 */
  47 +$uni-img-size-sm:40rpx;
  48 +$uni-img-size-base:52rpx;
  49 +$uni-img-size-lg:80rpx;
  50 +
  51 +/* Border Radius */
  52 +$uni-border-radius-sm: 4rpx;
  53 +$uni-border-radius-base: 6rpx;
  54 +$uni-border-radius-lg: 12rpx;
  55 +$uni-border-radius-circle: 50%;
  56 +
  57 +/* 水平间距 */
  58 +$uni-spacing-row-sm: 10px;
  59 +$uni-spacing-row-base: 20rpx;
  60 +$uni-spacing-row-lg: 30rpx;
  61 +
  62 +/* 垂直间距 */
  63 +$uni-spacing-col-sm: 8rpx;
  64 +$uni-spacing-col-base: 16rpx;
  65 +$uni-spacing-col-lg: 24rpx;
  66 +
  67 +/* 透明度 */
  68 +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
  69 +
  70 +/* 文章场景相关 */
  71 +$uni-color-title: #2C405A; // 文章标题颜色
  72 +$uni-font-size-title:40rpx;
  73 +$uni-color-subtitle: #555555; // 二级标题颜色
  74 +$uni-font-size-subtitle:36rpx;
  75 +$uni-color-paragraph: #3F536E; // 文章段落颜色
  76 +$uni-font-size-paragraph:30rpx;
0 77 \ No newline at end of file
... ...
src/wxcomponents/vant/button/index.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +export {};
... ...
src/wxcomponents/vant/button/index.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,68 @@
  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 + data: {
  8 + style: ''
  9 + },
  10 + props: {
  11 + icon: String,
  12 + plain: Boolean,
  13 + block: Boolean,
  14 + round: Boolean,
  15 + square: Boolean,
  16 + loading: Boolean,
  17 + hairline: Boolean,
  18 + disabled: Boolean,
  19 + loadingText: String,
  20 + customStyle: String,
  21 + loadingType: {
  22 + type: String,
  23 + value: 'circular'
  24 + },
  25 + type: {
  26 + type: String,
  27 + value: 'default'
  28 + },
  29 + size: {
  30 + type: String,
  31 + value: 'normal'
  32 + },
  33 + loadingSize: {
  34 + type: String,
  35 + value: '20px'
  36 + },
  37 + color: {
  38 + type: String,
  39 + observer(color) {
  40 + let style = '';
  41 + if (color) {
  42 + style += `color: ${this.data.plain ? color : 'white'};`;
  43 + if (!this.data.plain) {
  44 + // Use background instead of backgroundColor to make linear-gradient work
  45 + style += `background: ${color};`;
  46 + }
  47 + // hide border when color is linear-gradient
  48 + if (color.indexOf('gradient') !== -1) {
  49 + style += 'border: 0;';
  50 + }
  51 + else {
  52 + style += `border-color: ${color};`;
  53 + }
  54 + }
  55 + if (style !== this.data.style) {
  56 + this.setData({ style });
  57 + }
  58 + }
  59 + }
  60 + },
  61 + methods: {
  62 + onClick() {
  63 + if (!this.data.disabled && !this.data.loading) {
  64 + this.$emit('click');
  65 + }
  66 + }
  67 + }
  68 +});
... ...
src/wxcomponents/vant/button/index.json
Diff comments   View file @289f85d
... ... @@ -0,0 +1,7 @@
  1 +{
  2 + "component": true,
  3 + "usingComponents": {
  4 + "van-icon": "../icon/index",
  5 + "van-loading": "../loading/index"
  6 + }
  7 +}
... ...
src/wxcomponents/vant/button/index.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,96 @@
  1 +<template>
  2 +<uni-shadow-root class="vant-button-index"><button :id="id" :class="'custom-class '+(utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]))+' '+(hairline ? 'van-hairline--surround' : '')" hover-class="van-button--active hover-class" :lang="lang" :style="(style)+' '+(customStyle)" :open-type="openType" :business-id="businessId" :session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg" :show-message-card="showMessageCard" :app-parameter="appParameter" :aria-label="ariaLabel" @click="onClick" @getuserinfo="bindGetUserInfo" @contact="bindContact" @getphonenumber="bindGetPhoneNumber" @error="bindError" @launchapp="bindLaunchApp" @opensetting="bindOpenSetting">
  3 + <block v-if="loading">
  4 + <van-loading custom-class="loading-class" :size="loadingSize" :type="loadingType" :color="type === 'default' ? '#c9c9c9' : 'white'"></van-loading>
  5 + <view v-if="loadingText" class="van-button__loading-text">
  6 + {{ loadingText }}
  7 + </view>
  8 + </block>
  9 + <block v-else>
  10 + <van-icon v-if="icon" size="1.2em" :name="icon" class="van-button__icon" custom-style="line-height: inherit;"></van-icon>
  11 + <view class="van-button__text">
  12 + <slot></slot>
  13 + </view>
  14 + </block>
  15 +</button></uni-shadow-root>
  16 +</template>
  17 +<wxs src="../wxs/utils.wxs" module="utils"></wxs>
  18 +<script>
  19 +import VanIcon from '../icon/index.vue'
  20 +import VanLoading from '../loading/index.vue'
  21 +global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-loading': VanLoading}}
  22 +
  23 +global['__wxRoute'] = 'vant/button/index'
  24 +import { VantComponent } from '../common/component';
  25 +import { button } from '../mixins/button';
  26 +import { openType } from '../mixins/open-type';
  27 +VantComponent({
  28 + mixins: [button, openType],
  29 + classes: ['hover-class', 'loading-class'],
  30 + data: {
  31 + style: ''
  32 + },
  33 + props: {
  34 + icon: String,
  35 + plain: Boolean,
  36 + block: Boolean,
  37 + round: Boolean,
  38 + square: Boolean,
  39 + loading: Boolean,
  40 + hairline: Boolean,
  41 + disabled: Boolean,
  42 + loadingText: String,
  43 + customStyle: String,
  44 + loadingType: {
  45 + type: String,
  46 + value: 'circular'
  47 + },
  48 + type: {
  49 + type: String,
  50 + value: 'default'
  51 + },
  52 + size: {
  53 + type: String,
  54 + value: 'normal'
  55 + },
  56 + loadingSize: {
  57 + type: String,
  58 + value: '20px'
  59 + },
  60 + color: {
  61 + type: String,
  62 + observer(color) {
  63 + let style = '';
  64 + if (color) {
  65 + style += `color: ${this.data.plain ? color : 'white'};`;
  66 + if (!this.data.plain) {
  67 + // Use background instead of backgroundColor to make linear-gradient work
  68 + style += `background: ${color};`;
  69 + }
  70 + // hide border when color is linear-gradient
  71 + if (color.indexOf('gradient') !== -1) {
  72 + style += 'border: 0;';
  73 + }
  74 + else {
  75 + style += `border-color: ${color};`;
  76 + }
  77 + }
  78 + if (style !== this.data.style) {
  79 + this.setData({ style });
  80 + }
  81 + }
  82 + }
  83 + },
  84 + methods: {
  85 + onClick() {
  86 + if (!this.data.disabled && !this.data.loading) {
  87 + this.$emit('click');
  88 + }
  89 + }
  90 + }
  91 +});
  92 +export default global['__wxComponents']['vant/button/index']
  93 +</script>
  94 +<style platform="mp-weixin">
  95 +@import '../common/index.css';.van-button{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0;line-height:20px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%;height:44px;height:var(--button-default-height,44px);font-size:16px;font-size:var(--button-default-font-size,16px);transition:opacity .2s;transition:opacity var(--animation-duration-fast,.2s);border-radius:2px;border-radius:var(--button-border-radius,2px)}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#323233;color:var(--button-default-color,#323233);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #ebedf0;border:1px solid var(--button-default-border-color,#ebedf0)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;height:var(--button-large-height,50px)}.van-button--normal{padding:0 15px;font-size:14px;font-size:var(--button-normal-font-size,14px)}.van-button--small{min-width:60px;min-width:var(--button-small-min-width,60px);height:30px;height:var(--button-small-height,30px);padding:0 8px;padding:0 var(--padding-xs,8px);font-size:12px;font-size:var(--button-small-font-size,12px)}.van-button--mini{display:inline-block;min-width:50px;min-width:var(--button-mini-min-width,50px);height:22px;height:var(--button-mini-height,22px);font-size:10px;font-size:var(--button-mini-font-size,10px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:-webkit-flex;display:flex;width:100%}.van-button--round{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5;opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
  96 +</style>
0 97 \ No newline at end of file
... ...
src/wxcomponents/vant/button/index.wxml
Diff comments   View file @289f85d
... ... @@ -0,0 +1,52 @@
  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 + hover-class="van-button--active hover-class"
  7 + lang="{{ lang }}"
  8 + style="{{ style }} {{ customStyle }}"
  9 + open-type="{{ openType }}"
  10 + business-id="{{ businessId }}"
  11 + session-from="{{ sessionFrom }}"
  12 + send-message-title="{{ sendMessageTitle }}"
  13 + send-message-path="{{ sendMessagePath }}"
  14 + send-message-img="{{ sendMessageImg }}"
  15 + show-message-card="{{ showMessageCard }}"
  16 + app-parameter="{{ appParameter }}"
  17 + aria-label="{{ ariaLabel }}"
  18 + bindtap="onClick"
  19 + bindgetuserinfo="bindGetUserInfo"
  20 + bindcontact="bindContact"
  21 + bindgetphonenumber="bindGetPhoneNumber"
  22 + binderror="bindError"
  23 + bindlaunchapp="bindLaunchApp"
  24 + bindopensetting="bindOpenSetting"
  25 +>
  26 + <block wx:if="{{ loading }}">
  27 + <van-loading
  28 + custom-class="loading-class"
  29 + size="{{ loadingSize }}"
  30 + type="{{ loadingType }}"
  31 + color="{{ type === 'default' ? '#c9c9c9' : 'white' }}"
  32 + />
  33 + <view
  34 + wx:if="{{ loadingText }}"
  35 + class="van-button__loading-text"
  36 + >
  37 + {{ loadingText }}
  38 + </view>
  39 + </block>
  40 + <block wx:else>
  41 + <van-icon
  42 + wx:if="{{ icon }}"
  43 + size="1.2em"
  44 + name="{{ icon }}"
  45 + class="van-button__icon"
  46 + custom-style="line-height: inherit;"
  47 + />
  48 + <view class="van-button__text">
  49 + <slot />
  50 + </view>
  51 + </block>
  52 +</button>
... ...
src/wxcomponents/vant/button/index.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +@import '../common/index.wxss';.van-button{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0;line-height:20px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%;height:44px;height:var(--button-default-height,44px);font-size:16px;font-size:var(--button-default-font-size,16px);transition:opacity .2s;transition:opacity var(--animation-duration-fast,.2s);border-radius:2px;border-radius:var(--button-border-radius,2px)}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#323233;color:var(--button-default-color,#323233);background-color:#fff;background-color:var(--button-default-background-color,#fff);border:1px solid #ebedf0;border:1px solid var(--button-default-border-color,#ebedf0)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background-color:#07c160;background-color:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:1px solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background-color:#1989fa;background-color:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:1px solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background-color:#ee0a24;background-color:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:1px solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background-color:#ff976a;background-color:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:1px solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background-color:#fff;background-color:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;height:var(--button-large-height,50px)}.van-button--normal{padding:0 15px;font-size:14px;font-size:var(--button-normal-font-size,14px)}.van-button--small{min-width:60px;min-width:var(--button-small-min-width,60px);height:30px;height:var(--button-small-height,30px);padding:0 8px;padding:0 var(--padding-xs,8px);font-size:12px;font-size:var(--button-small-font-size,12px)}.van-button--mini{display:inline-block;min-width:50px;min-width:var(--button-mini-min-width,50px);height:22px;height:var(--button-mini-height,22px);font-size:10px;font-size:var(--button-mini-font-size,10px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:-webkit-flex;display:flex;width:100%}.van-button--round{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5;opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/color.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1,7 @@
  1 +export declare const RED = "#ee0a24";
  2 +export declare const BLUE = "#1989fa";
  3 +export declare const WHITE = "#fff";
  4 +export declare const GREEN = "#07c160";
  5 +export declare const ORANGE = "#ff976a";
  6 +export declare const GRAY = "#323233";
  7 +export declare const GRAY_DARK = "#969799";
... ...
src/wxcomponents/vant/common/color.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,7 @@
  1 +export const RED = '#ee0a24';
  2 +export const BLUE = '#1989fa';
  3 +export const WHITE = '#fff';
  4 +export const GREEN = '#07c160';
  5 +export const ORANGE = '#ff976a';
  6 +export const GRAY = '#323233';
  7 +export const GRAY_DARK = '#969799';
... ...
src/wxcomponents/vant/common/component.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1,3 @@
  1 +import { VantComponentOptions, CombinedComponentInstance } from '../definitions/index';
  2 +declare function VantComponent<Data, Props, Methods>(vantOptions?: VantComponentOptions<Data, Props, Methods, CombinedComponentInstance<Data, Props, Methods>>): void;
  3 +export { VantComponent };
... ...
src/wxcomponents/vant/common/component.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,48 @@
  1 +import { basic } from '../mixins/basic';
  2 +import { observe } from '../mixins/observer/index';
  3 +function mapKeys(source, target, map) {
  4 + Object.keys(map).forEach(key => {
  5 + if (source[key]) {
  6 + target[map[key]] = source[key];
  7 + }
  8 + });
  9 +}
  10 +function VantComponent(vantOptions = {}) {
  11 + const options = {};
  12 + mapKeys(vantOptions, options, {
  13 + data: 'data',
  14 + props: 'properties',
  15 + mixins: 'behaviors',
  16 + methods: 'methods',
  17 + beforeCreate: 'created',
  18 + created: 'attached',
  19 + mounted: 'ready',
  20 + relations: 'relations',
  21 + destroyed: 'detached',
  22 + classes: 'externalClasses'
  23 + });
  24 + const { relation } = vantOptions;
  25 + if (relation) {
  26 + options.relations = Object.assign(options.relations || {}, {
  27 + [`../${relation.name}/index`]: relation
  28 + });
  29 + }
  30 + // add default externalClasses
  31 + options.externalClasses = options.externalClasses || [];
  32 + options.externalClasses.push('custom-class');
  33 + // add default behaviors
  34 + options.behaviors = options.behaviors || [];
  35 + options.behaviors.push(basic);
  36 + // map field to form-field behavior
  37 + if (vantOptions.field) {
  38 + options.behaviors.push('wx://form-field');
  39 + }
  40 + // add default options
  41 + options.options = {
  42 + multipleSlots: true,
  43 + addGlobalClass: true
  44 + };
  45 + observe(vantOptions, options);
  46 + Component(options);
  47 +}
  48 +export { VantComponent };
... ...
src/wxcomponents/vant/common/index.css
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/index.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/clearfix.css
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-clearfix:after{display:table;clear:both;content:""}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/clearfix.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-clearfix:after{display:table;clear:both;content:""}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/ellipsis.css
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/ellipsis.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/hairline.css
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/hairline.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/common/style/mixins/clearfix.css
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/mixins/clearfix.wxss
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/mixins/ellipsis.css
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/mixins/ellipsis.wxss
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/mixins/hairline.css
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/mixins/hairline.wxss
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/theme.css
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/theme.wxss
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/var.css
Diff comments   View file @289f85d
src/wxcomponents/vant/common/style/var.wxss
Diff comments   View file @289f85d
src/wxcomponents/vant/common/utils.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1,8 @@
  1 +/// <reference types="miniprogram-api-typings" />
  2 +export declare function isDef(value: any): boolean;
  3 +export declare function isObj(x: any): boolean;
  4 +export declare function isNumber(value: any): boolean;
  5 +export declare function range(num: number, min: number, max: number): number;
  6 +export declare function nextTick(fn: Function): void;
  7 +export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSuccessCallbackResult;
  8 +export declare function addUnit(value?: string | number): string | undefined;
... ...
src/wxcomponents/vant/common/utils.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,32 @@
  1 +export function isDef(value) {
  2 + return value !== undefined && value !== null;
  3 +}
  4 +export function isObj(x) {
  5 + const type = typeof x;
  6 + return x !== null && (type === 'object' || type === 'function');
  7 +}
  8 +export function isNumber(value) {
  9 + return /^\d+(\.\d+)?$/.test(value);
  10 +}
  11 +export function range(num, min, max) {
  12 + return Math.min(Math.max(num, min), max);
  13 +}
  14 +export function nextTick(fn) {
  15 + setTimeout(() => {
  16 + fn();
  17 + }, 1000 / 30);
  18 +}
  19 +let systemInfo = null;
  20 +export function getSystemInfoSync() {
  21 + if (systemInfo == null) {
  22 + systemInfo = wx.getSystemInfoSync();
  23 + }
  24 + return systemInfo;
  25 +}
  26 +export function addUnit(value) {
  27 + if (!isDef(value)) {
  28 + return undefined;
  29 + }
  30 + value = String(value);
  31 + return isNumber(value) ? `${value}px` : value;
  32 +}
... ...
src/wxcomponents/vant/icon/index.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +export {};
... ...
src/wxcomponents/vant/icon/index.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,39 @@
  1 +import { VantComponent } from '../common/component';
  2 +import { addUnit } from '../common/utils';
  3 +VantComponent({
  4 + props: {
  5 + dot: Boolean,
  6 + info: null,
  7 + size: {
  8 + type: null,
  9 + observer: 'setSizeWithUnit'
  10 + },
  11 + color: String,
  12 + customStyle: String,
  13 + classPrefix: {
  14 + type: String,
  15 + value: 'van-icon'
  16 + },
  17 + name: {
  18 + type: String,
  19 + observer(val) {
  20 + this.setData({
  21 + isImageName: val.indexOf('/') !== -1
  22 + });
  23 + }
  24 + }
  25 + },
  26 + data: {
  27 + sizeWithUnit: null,
  28 + },
  29 + methods: {
  30 + onClick() {
  31 + this.$emit('click');
  32 + },
  33 + setSizeWithUnit(size) {
  34 + this.setData({
  35 + sizeWithUnit: addUnit(size)
  36 + });
  37 + }
  38 + }
  39 +});
... ...
src/wxcomponents/vant/icon/index.json
Diff comments   View file @289f85d
... ... @@ -0,0 +1,6 @@
  1 +{
  2 + "component": true,
  3 + "usingComponents": {
  4 + "van-info": "../info/index"
  5 + }
  6 +}
... ...
src/wxcomponents/vant/icon/index.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,1012 @@
  1 +<template>
  2 +<uni-shadow-root class="vant-icon-index"><view :class="'custom-class '+(classPrefix)+' '+(isImageName ? 'van-icon--image' : classPrefix + '-' + name)" :style="(color ? 'color: ' + color + ';' : '')+(size ? 'font-size: ' + sizeWithUnit + ';' : '')+(customStyle)" @click="onClick">
  3 + <van-info v-if="info !== null || dot" :dot="dot" :info="info" custom-class="van-icon__info"></van-info>
  4 + <image v-if="isImageName" :src="name" mode="aspectFit" class="van-icon__image"></image>
  5 +</view></uni-shadow-root>
  6 +</template>
  7 +
  8 +<script>
  9 +import VanInfo from '../info/index.vue'
  10 +global['__wxVueOptions'] = {components:{'van-info': VanInfo}}
  11 +
  12 +global['__wxRoute'] = 'vant/icon/index'
  13 +import { VantComponent } from '../common/component';
  14 +import { addUnit } from '../common/utils';
  15 +VantComponent({
  16 + props: {
  17 + dot: Boolean,
  18 + info: null,
  19 + size: {
  20 + type: null,
  21 + observer: 'setSizeWithUnit'
  22 + },
  23 + color: String,
  24 + customStyle: String,
  25 + classPrefix: {
  26 + type: String,
  27 + value: 'van-icon'
  28 + },
  29 + name: {
  30 + type: String,
  31 + observer(val) {
  32 + this.setData({
  33 + isImageName: val.indexOf('/') !== -1
  34 + });
  35 + }
  36 + }
  37 + },
  38 + data: {
  39 + sizeWithUnit: null,
  40 + },
  41 + methods: {
  42 + onClick() {
  43 + this.$emit('click');
  44 + },
  45 + setSizeWithUnit(size) {
  46 + this.setData({
  47 + sizeWithUnit: addUnit(size)
  48 + });
  49 + }
  50 + }
  51 +});
  52 +export default global['__wxComponents']['vant/icon/index']
  53 +</script>
  54 +<style platform="mp-weixin">
  55 +@import '../common/index.css';
  56 +
  57 +@font-face {
  58 + font-weight: 400;
  59 + font-family: vant-icon;
  60 + font-style: normal;
  61 + font-display: auto;
  62 + src: url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2) format("woff2"), url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff) format("woff"), url(https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf) format("truetype")
  63 +}
  64 +
  65 +.van-icon {
  66 + position: relative;
  67 + font: normal normal normal 14px/1 vant-icon;
  68 + font-size: inherit;
  69 + text-rendering: auto;
  70 + -webkit-font-smoothing: antialiased
  71 +}
  72 +
  73 +.van-icon,
  74 +.van-icon:before {
  75 + display: inline-block
  76 +}
  77 +
  78 +.van-icon-add-o:before {
  79 + content: "\F000"
  80 +}
  81 +
  82 +.van-icon-add-square:before {
  83 + content: "\F001"
  84 +}
  85 +
  86 +.van-icon-add:before {
  87 + content: "\F002"
  88 +}
  89 +
  90 +.van-icon-after-sale:before {
  91 + content: "\F003"
  92 +}
  93 +
  94 +.van-icon-aim:before {
  95 + content: "\F004"
  96 +}
  97 +
  98 +.van-icon-alipay:before {
  99 + content: "\F005"
  100 +}
  101 +
  102 +.van-icon-apps-o:before {
  103 + content: "\F006"
  104 +}
  105 +
  106 +.van-icon-arrow-down:before {
  107 + content: "\F007"
  108 +}
  109 +
  110 +.van-icon-arrow-left:before {
  111 + content: "\F008"
  112 +}
  113 +
  114 +.van-icon-arrow-up:before {
  115 + content: "\F009"
  116 +}
  117 +
  118 +.van-icon-arrow:before {
  119 + content: "\F00A"
  120 +}
  121 +
  122 +.van-icon-ascending:before {
  123 + content: "\F00B"
  124 +}
  125 +
  126 +.van-icon-audio:before {
  127 + content: "\F00C"
  128 +}
  129 +
  130 +.van-icon-award-o:before {
  131 + content: "\F00D"
  132 +}
  133 +
  134 +.van-icon-award:before {
  135 + content: "\F00E"
  136 +}
  137 +
  138 +.van-icon-bag-o:before {
  139 + content: "\F00F"
  140 +}
  141 +
  142 +.van-icon-bag:before {
  143 + content: "\F010"
  144 +}
  145 +
  146 +.van-icon-balance-list-o:before {
  147 + content: "\F011"
  148 +}
  149 +
  150 +.van-icon-balance-list:before {
  151 + content: "\F012"
  152 +}
  153 +
  154 +.van-icon-balance-o:before {
  155 + content: "\F013"
  156 +}
  157 +
  158 +.van-icon-balance-pay:before {
  159 + content: "\F014"
  160 +}
  161 +
  162 +.van-icon-bar-chart-o:before {
  163 + content: "\F015"
  164 +}
  165 +
  166 +.van-icon-bars:before {
  167 + content: "\F016"
  168 +}
  169 +
  170 +.van-icon-bell:before {
  171 + content: "\F017"
  172 +}
  173 +
  174 +.van-icon-bill-o:before {
  175 + content: "\F018"
  176 +}
  177 +
  178 +.van-icon-bill:before {
  179 + content: "\F019"
  180 +}
  181 +
  182 +.van-icon-birthday-cake-o:before {
  183 + content: "\F01A"
  184 +}
  185 +
  186 +.van-icon-bookmark-o:before {
  187 + content: "\F01B"
  188 +}
  189 +
  190 +.van-icon-bookmark:before {
  191 + content: "\F01C"
  192 +}
  193 +
  194 +.van-icon-browsing-history-o:before {
  195 + content: "\F01D"
  196 +}
  197 +
  198 +.van-icon-browsing-history:before {
  199 + content: "\F01E"
  200 +}
  201 +
  202 +.van-icon-brush-o:before {
  203 + content: "\F01F"
  204 +}
  205 +
  206 +.van-icon-bulb-o:before {
  207 + content: "\F020"
  208 +}
  209 +
  210 +.van-icon-bullhorn-o:before {
  211 + content: "\F021"
  212 +}
  213 +
  214 +.van-icon-calender-o:before {
  215 + content: "\F022"
  216 +}
  217 +
  218 +.van-icon-card:before {
  219 + content: "\F023"
  220 +}
  221 +
  222 +.van-icon-cart-circle-o:before {
  223 + content: "\F024"
  224 +}
  225 +
  226 +.van-icon-cart-circle:before {
  227 + content: "\F025"
  228 +}
  229 +
  230 +.van-icon-cart-o:before {
  231 + content: "\F026"
  232 +}
  233 +
  234 +.van-icon-cart:before {
  235 + content: "\F027"
  236 +}
  237 +
  238 +.van-icon-cash-back-record:before {
  239 + content: "\F028"
  240 +}
  241 +
  242 +.van-icon-cash-on-deliver:before {
  243 + content: "\F029"
  244 +}
  245 +
  246 +.van-icon-cashier-o:before {
  247 + content: "\F02A"
  248 +}
  249 +
  250 +.van-icon-certificate:before {
  251 + content: "\F02B"
  252 +}
  253 +
  254 +.van-icon-chart-trending-o:before {
  255 + content: "\F02C"
  256 +}
  257 +
  258 +.van-icon-chat-o:before {
  259 + content: "\F02D"
  260 +}
  261 +
  262 +.van-icon-chat:before {
  263 + content: "\F02E"
  264 +}
  265 +
  266 +.van-icon-checked:before {
  267 + content: "\F02F"
  268 +}
  269 +
  270 +.van-icon-circle:before {
  271 + content: "\F030"
  272 +}
  273 +
  274 +.van-icon-clear:before {
  275 + content: "\F031"
  276 +}
  277 +
  278 +.van-icon-clock-o:before {
  279 + content: "\F032"
  280 +}
  281 +
  282 +.van-icon-clock:before {
  283 + content: "\F033"
  284 +}
  285 +
  286 +.van-icon-close:before {
  287 + content: "\F034"
  288 +}
  289 +
  290 +.van-icon-closed-eye:before {
  291 + content: "\F035"
  292 +}
  293 +
  294 +.van-icon-cluster-o:before {
  295 + content: "\F036"
  296 +}
  297 +
  298 +.van-icon-cluster:before {
  299 + content: "\F037"
  300 +}
  301 +
  302 +.van-icon-column:before {
  303 + content: "\F038"
  304 +}
  305 +
  306 +.van-icon-comment-circle-o:before {
  307 + content: "\F039"
  308 +}
  309 +
  310 +.van-icon-comment-circle:before {
  311 + content: "\F03A"
  312 +}
  313 +
  314 +.van-icon-comment-o:before {
  315 + content: "\F03B"
  316 +}
  317 +
  318 +.van-icon-comment:before {
  319 + content: "\F03C"
  320 +}
  321 +
  322 +.van-icon-completed:before {
  323 + content: "\F03D"
  324 +}
  325 +
  326 +.van-icon-contact:before {
  327 + content: "\F03E"
  328 +}
  329 +
  330 +.van-icon-coupon-o:before {
  331 + content: "\F03F"
  332 +}
  333 +
  334 +.van-icon-coupon:before {
  335 + content: "\F040"
  336 +}
  337 +
  338 +.van-icon-credit-pay:before {
  339 + content: "\F041"
  340 +}
  341 +
  342 +.van-icon-cross:before {
  343 + content: "\F042"
  344 +}
  345 +
  346 +.van-icon-debit-pay:before {
  347 + content: "\F043"
  348 +}
  349 +
  350 +.van-icon-delete:before {
  351 + content: "\F044"
  352 +}
  353 +
  354 +.van-icon-descending:before {
  355 + content: "\F045"
  356 +}
  357 +
  358 +.van-icon-description:before {
  359 + content: "\F046"
  360 +}
  361 +
  362 +.van-icon-desktop-o:before {
  363 + content: "\F047"
  364 +}
  365 +
  366 +.van-icon-diamond-o:before {
  367 + content: "\F048"
  368 +}
  369 +
  370 +.van-icon-diamond:before {
  371 + content: "\F049"
  372 +}
  373 +
  374 +.van-icon-discount:before {
  375 + content: "\F04A"
  376 +}
  377 +
  378 +.van-icon-down:before {
  379 + content: "\F04B"
  380 +}
  381 +
  382 +.van-icon-ecard-pay:before {
  383 + content: "\F04C"
  384 +}
  385 +
  386 +.van-icon-edit:before {
  387 + content: "\F04D"
  388 +}
  389 +
  390 +.van-icon-ellipsis:before {
  391 + content: "\F04E"
  392 +}
  393 +
  394 +.van-icon-empty:before {
  395 + content: "\F04F"
  396 +}
  397 +
  398 +.van-icon-envelop-o:before {
  399 + content: "\F050"
  400 +}
  401 +
  402 +.van-icon-exchange:before {
  403 + content: "\F051"
  404 +}
  405 +
  406 +.van-icon-expand-o:before {
  407 + content: "\F052"
  408 +}
  409 +
  410 +.van-icon-expand:before {
  411 + content: "\F053"
  412 +}
  413 +
  414 +.van-icon-eye-o:before {
  415 + content: "\F054"
  416 +}
  417 +
  418 +.van-icon-eye:before {
  419 + content: "\F055"
  420 +}
  421 +
  422 +.van-icon-fail:before {
  423 + content: "\F056"
  424 +}
  425 +
  426 +.van-icon-failure:before {
  427 + content: "\F057"
  428 +}
  429 +
  430 +.van-icon-filter-o:before {
  431 + content: "\F058"
  432 +}
  433 +
  434 +.van-icon-fire-o:before {
  435 + content: "\F059"
  436 +}
  437 +
  438 +.van-icon-fire:before {
  439 + content: "\F05A"
  440 +}
  441 +
  442 +.van-icon-flag-o:before {
  443 + content: "\F05B"
  444 +}
  445 +
  446 +.van-icon-flower-o:before {
  447 + content: "\F05C"
  448 +}
  449 +
  450 +.van-icon-free-postage:before {
  451 + content: "\F05D"
  452 +}
  453 +
  454 +.van-icon-friends-o:before {
  455 + content: "\F05E"
  456 +}
  457 +
  458 +.van-icon-friends:before {
  459 + content: "\F05F"
  460 +}
  461 +
  462 +.van-icon-gem-o:before {
  463 + content: "\F060"
  464 +}
  465 +
  466 +.van-icon-gem:before {
  467 + content: "\F061"
  468 +}
  469 +
  470 +.van-icon-gift-card-o:before {
  471 + content: "\F062"
  472 +}
  473 +
  474 +.van-icon-gift-card:before {
  475 + content: "\F063"
  476 +}
  477 +
  478 +.van-icon-gift-o:before {
  479 + content: "\F064"
  480 +}
  481 +
  482 +.van-icon-gift:before {
  483 + content: "\F065"
  484 +}
  485 +
  486 +.van-icon-gold-coin-o:before {
  487 + content: "\F066"
  488 +}
  489 +
  490 +.van-icon-gold-coin:before {
  491 + content: "\F067"
  492 +}
  493 +
  494 +.van-icon-good-job-o:before {
  495 + content: "\F068"
  496 +}
  497 +
  498 +.van-icon-good-job:before {
  499 + content: "\F069"
  500 +}
  501 +
  502 +.van-icon-goods-collect-o:before {
  503 + content: "\F06A"
  504 +}
  505 +
  506 +.van-icon-goods-collect:before {
  507 + content: "\F06B"
  508 +}
  509 +
  510 +.van-icon-graphic:before {
  511 + content: "\F06C"
  512 +}
  513 +
  514 +.van-icon-home-o:before {
  515 + content: "\F06D"
  516 +}
  517 +
  518 +.van-icon-hot-o:before {
  519 + content: "\F06E"
  520 +}
  521 +
  522 +.van-icon-hot-sale-o:before {
  523 + content: "\F06F"
  524 +}
  525 +
  526 +.van-icon-hot-sale:before {
  527 + content: "\F070"
  528 +}
  529 +
  530 +.van-icon-hot:before {
  531 + content: "\F071"
  532 +}
  533 +
  534 +.van-icon-hotel-o:before {
  535 + content: "\F072"
  536 +}
  537 +
  538 +.van-icon-idcard:before {
  539 + content: "\F073"
  540 +}
  541 +
  542 +.van-icon-info-o:before {
  543 + content: "\F074"
  544 +}
  545 +
  546 +.van-icon-info:before {
  547 + content: "\F075"
  548 +}
  549 +
  550 +.van-icon-invition:before {
  551 + content: "\F076"
  552 +}
  553 +
  554 +.van-icon-label-o:before {
  555 + content: "\F077"
  556 +}
  557 +
  558 +.van-icon-label:before {
  559 + content: "\F078"
  560 +}
  561 +
  562 +.van-icon-like-o:before {
  563 + content: "\F079"
  564 +}
  565 +
  566 +.van-icon-like:before {
  567 + content: "\F07A"
  568 +}
  569 +
  570 +.van-icon-live:before {
  571 + content: "\F07B"
  572 +}
  573 +
  574 +.van-icon-location-o:before {
  575 + content: "\F07C"
  576 +}
  577 +
  578 +.van-icon-location:before {
  579 + content: "\F07D"
  580 +}
  581 +
  582 +.van-icon-lock:before {
  583 + content: "\F07E"
  584 +}
  585 +
  586 +.van-icon-logistics:before {
  587 + content: "\F07F"
  588 +}
  589 +
  590 +.van-icon-manager-o:before {
  591 + content: "\F080"
  592 +}
  593 +
  594 +.van-icon-manager:before {
  595 + content: "\F081"
  596 +}
  597 +
  598 +.van-icon-map-marked:before {
  599 + content: "\F082"
  600 +}
  601 +
  602 +.van-icon-medal-o:before {
  603 + content: "\F083"
  604 +}
  605 +
  606 +.van-icon-medal:before {
  607 + content: "\F084"
  608 +}
  609 +
  610 +.van-icon-more-o:before {
  611 + content: "\F085"
  612 +}
  613 +
  614 +.van-icon-more:before {
  615 + content: "\F086"
  616 +}
  617 +
  618 +.van-icon-music-o:before {
  619 + content: "\F087"
  620 +}
  621 +
  622 +.van-icon-music:before {
  623 + content: "\F088"
  624 +}
  625 +
  626 +.van-icon-new-arrival-o:before {
  627 + content: "\F089"
  628 +}
  629 +
  630 +.van-icon-new-arrival:before {
  631 + content: "\F08A"
  632 +}
  633 +
  634 +.van-icon-new-o:before {
  635 + content: "\F08B"
  636 +}
  637 +
  638 +.van-icon-new:before {
  639 + content: "\F08C"
  640 +}
  641 +
  642 +.van-icon-newspaper-o:before {
  643 + content: "\F08D"
  644 +}
  645 +
  646 +.van-icon-notes-o:before {
  647 + content: "\F08E"
  648 +}
  649 +
  650 +.van-icon-orders-o:before {
  651 + content: "\F08F"
  652 +}
  653 +
  654 +.van-icon-other-pay:before {
  655 + content: "\F090"
  656 +}
  657 +
  658 +.van-icon-paid:before {
  659 + content: "\F091"
  660 +}
  661 +
  662 +.van-icon-passed:before {
  663 + content: "\F092"
  664 +}
  665 +
  666 +.van-icon-pause-circle-o:before {
  667 + content: "\F093"
  668 +}
  669 +
  670 +.van-icon-pause-circle:before {
  671 + content: "\F094"
  672 +}
  673 +
  674 +.van-icon-pause:before {
  675 + content: "\F095"
  676 +}
  677 +
  678 +.van-icon-peer-pay:before {
  679 + content: "\F096"
  680 +}
  681 +
  682 +.van-icon-pending-payment:before {
  683 + content: "\F097"
  684 +}
  685 +
  686 +.van-icon-phone-circle-o:before {
  687 + content: "\F098"
  688 +}
  689 +
  690 +.van-icon-phone-circle:before {
  691 + content: "\F099"
  692 +}
  693 +
  694 +.van-icon-phone-o:before {
  695 + content: "\F09A"
  696 +}
  697 +
  698 +.van-icon-phone:before {
  699 + content: "\F09B"
  700 +}
  701 +
  702 +.van-icon-photo-o:before {
  703 + content: "\F09C"
  704 +}
  705 +
  706 +.van-icon-photo:before {
  707 + content: "\F09D"
  708 +}
  709 +
  710 +.van-icon-photograph:before {
  711 + content: "\F09E"
  712 +}
  713 +
  714 +.van-icon-play-circle-o:before {
  715 + content: "\F09F"
  716 +}
  717 +
  718 +.van-icon-play-circle:before {
  719 + content: "\F0A0"
  720 +}
  721 +
  722 +.van-icon-play:before {
  723 + content: "\F0A1"
  724 +}
  725 +
  726 +.van-icon-plus:before {
  727 + content: "\F0A2"
  728 +}
  729 +
  730 +.van-icon-point-gift-o:before {
  731 + content: "\F0A3"
  732 +}
  733 +
  734 +.van-icon-point-gift:before {
  735 + content: "\F0A4"
  736 +}
  737 +
  738 +.van-icon-points:before {
  739 + content: "\F0A5"
  740 +}
  741 +
  742 +.van-icon-printer:before {
  743 + content: "\F0A6"
  744 +}
  745 +
  746 +.van-icon-qr-invalid:before {
  747 + content: "\F0A7"
  748 +}
  749 +
  750 +.van-icon-qr:before {
  751 + content: "\F0A8"
  752 +}
  753 +
  754 +.van-icon-question-o:before {
  755 + content: "\F0A9"
  756 +}
  757 +
  758 +.van-icon-question:before {
  759 + content: "\F0AA"
  760 +}
  761 +
  762 +.van-icon-records:before {
  763 + content: "\F0AB"
  764 +}
  765 +
  766 +.van-icon-refund-o:before {
  767 + content: "\F0AC"
  768 +}
  769 +
  770 +.van-icon-replay:before {
  771 + content: "\F0AD"
  772 +}
  773 +
  774 +.van-icon-scan:before {
  775 + content: "\F0AE"
  776 +}
  777 +
  778 +.van-icon-search:before {
  779 + content: "\F0AF"
  780 +}
  781 +
  782 +.van-icon-send-gift-o:before {
  783 + content: "\F0B0"
  784 +}
  785 +
  786 +.van-icon-send-gift:before {
  787 + content: "\F0B1"
  788 +}
  789 +
  790 +.van-icon-service-o:before {
  791 + content: "\F0B2"
  792 +}
  793 +
  794 +.van-icon-service:before {
  795 + content: "\F0B3"
  796 +}
  797 +
  798 +.van-icon-setting-o:before {
  799 + content: "\F0B4"
  800 +}
  801 +
  802 +.van-icon-setting:before {
  803 + content: "\F0B5"
  804 +}
  805 +
  806 +.van-icon-share:before {
  807 + content: "\F0B6"
  808 +}
  809 +
  810 +.van-icon-shop-collect-o:before {
  811 + content: "\F0B7"
  812 +}
  813 +
  814 +.van-icon-shop-collect:before {
  815 + content: "\F0B8"
  816 +}
  817 +
  818 +.van-icon-shop-o:before {
  819 + content: "\F0B9"
  820 +}
  821 +
  822 +.van-icon-shop:before {
  823 + content: "\F0BA"
  824 +}
  825 +
  826 +.van-icon-shopping-cart-o:before {
  827 + content: "\F0BB"
  828 +}
  829 +
  830 +.van-icon-shopping-cart:before {
  831 + content: "\F0BC"
  832 +}
  833 +
  834 +.van-icon-shrink:before {
  835 + content: "\F0BD"
  836 +}
  837 +
  838 +.van-icon-sign:before {
  839 + content: "\F0BE"
  840 +}
  841 +
  842 +.van-icon-smile-comment-o:before {
  843 + content: "\F0BF"
  844 +}
  845 +
  846 +.van-icon-smile-comment:before {
  847 + content: "\F0C0"
  848 +}
  849 +
  850 +.van-icon-smile-o:before {
  851 + content: "\F0C1"
  852 +}
  853 +
  854 +.van-icon-smile:before {
  855 + content: "\F0C2"
  856 +}
  857 +
  858 +.van-icon-star-o:before {
  859 + content: "\F0C3"
  860 +}
  861 +
  862 +.van-icon-star:before {
  863 + content: "\F0C4"
  864 +}
  865 +
  866 +.van-icon-stop-circle-o:before {
  867 + content: "\F0C5"
  868 +}
  869 +
  870 +.van-icon-stop-circle:before {
  871 + content: "\F0C6"
  872 +}
  873 +
  874 +.van-icon-stop:before {
  875 + content: "\F0C7"
  876 +}
  877 +
  878 +.van-icon-success:before {
  879 + content: "\F0C8"
  880 +}
  881 +
  882 +.van-icon-thumb-circle-o:before {
  883 + content: "\F0C9"
  884 +}
  885 +
  886 +.van-icon-thumb-circle:before {
  887 + content: "\F0CA"
  888 +}
  889 +
  890 +.van-icon-todo-list-o:before {
  891 + content: "\F0CB"
  892 +}
  893 +
  894 +.van-icon-todo-list:before {
  895 + content: "\F0CC"
  896 +}
  897 +
  898 +.van-icon-tosend:before {
  899 + content: "\F0CD"
  900 +}
  901 +
  902 +.van-icon-tv-o:before {
  903 + content: "\F0CE"
  904 +}
  905 +
  906 +.van-icon-umbrella-circle:before {
  907 + content: "\F0CF"
  908 +}
  909 +
  910 +.van-icon-underway-o:before {
  911 + content: "\F0D0"
  912 +}
  913 +
  914 +.van-icon-underway:before {
  915 + content: "\F0D1"
  916 +}
  917 +
  918 +.van-icon-upgrade:before {
  919 + content: "\F0D2"
  920 +}
  921 +
  922 +.van-icon-user-circle-o:before {
  923 + content: "\F0D3"
  924 +}
  925 +
  926 +.van-icon-user-o:before {
  927 + content: "\F0D4"
  928 +}
  929 +
  930 +.van-icon-video-o:before {
  931 + content: "\F0D5"
  932 +}
  933 +
  934 +.van-icon-video:before {
  935 + content: "\F0D6"
  936 +}
  937 +
  938 +.van-icon-vip-card-o:before {
  939 + content: "\F0D7"
  940 +}
  941 +
  942 +.van-icon-vip-card:before {
  943 + content: "\F0D8"
  944 +}
  945 +
  946 +.van-icon-volume-o:before {
  947 + content: "\F0D9"
  948 +}
  949 +
  950 +.van-icon-volume:before {
  951 + content: "\F0DA"
  952 +}
  953 +
  954 +.van-icon-wap-home-o:before {
  955 + content: "\F0DB"
  956 +}
  957 +
  958 +.van-icon-wap-home:before {
  959 + content: "\F0DC"
  960 +}
  961 +
  962 +.van-icon-wap-nav:before {
  963 + content: "\F0DD"
  964 +}
  965 +
  966 +.van-icon-warn-o:before {
  967 + content: "\F0DE"
  968 +}
  969 +
  970 +.van-icon-warning-o:before {
  971 + content: "\F0DF"
  972 +}
  973 +
  974 +.van-icon-warning:before {
  975 + content: "\F0E0"
  976 +}
  977 +
  978 +.van-icon-weapp-nav:before {
  979 + content: "\F0E1"
  980 +}
  981 +
  982 +.van-icon-wechat:before {
  983 + content: "\F0E2"
  984 +}
  985 +
  986 +.van-icon-youzan-shield:before {
  987 + content: "\F0E3"
  988 +}
  989 +
  990 +.vant-icon-index {
  991 + display: -webkit-inline-flex;
  992 + display: inline-flex;
  993 + -webkit-align-items: center;
  994 + align-items: center;
  995 + -webkit-justify-content: center;
  996 + justify-content: center
  997 +}
  998 +
  999 +.van-icon--image {
  1000 + width: 1em;
  1001 + height: 1em
  1002 +}
  1003 +
  1004 +.van-icon__image {
  1005 + width: 100%;
  1006 + height: 100%
  1007 +}
  1008 +
  1009 +.van-icon__info {
  1010 + z-index: 1
  1011 +}
  1012 +</style>
0 1013 \ No newline at end of file
... ...
src/wxcomponents/vant/icon/index.wxml
Diff comments   View file @289f85d
... ... @@ -0,0 +1,18 @@
  1 +<view
  2 + class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}"
  3 + style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + sizeWithUnit + ';' : '' }}{{ customStyle }}"
  4 + bind:tap="onClick"
  5 +>
  6 + <van-info
  7 + wx:if="{{ info !== null || dot }}"
  8 + dot="{{ dot }}"
  9 + info="{{ info }}"
  10 + custom-class="van-icon__info"
  11 + />
  12 + <image
  13 + wx:if="{{ isImageName }}"
  14 + src="{{ name }}"
  15 + mode="aspectFit"
  16 + class="van-icon__image"
  17 + />
  18 +</view>
... ...
src/wxcomponents/vant/icon/index.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1,957 @@
  1 +@import '../common/index.wxss';
  2 +
  3 +@font-face {
  4 + font-weight: 400;
  5 + font-family: vant-icon;
  6 + font-style: normal;
  7 + font-display: auto;
  8 + src: url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2) format("woff2"), url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff) format("woff"), url(https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf) format("truetype")
  9 +}
  10 +
  11 +.van-icon {
  12 + position: relative;
  13 + font: normal normal normal 14px/1 vant-icon;
  14 + font-size: inherit;
  15 + text-rendering: auto;
  16 + -webkit-font-smoothing: antialiased
  17 +}
  18 +
  19 +.van-icon,
  20 +.van-icon:before {
  21 + display: inline-block
  22 +}
  23 +
  24 +.van-icon-add-o:before {
  25 + content: "\F000"
  26 +}
  27 +
  28 +.van-icon-add-square:before {
  29 + content: "\F001"
  30 +}
  31 +
  32 +.van-icon-add:before {
  33 + content: "\F002"
  34 +}
  35 +
  36 +.van-icon-after-sale:before {
  37 + content: "\F003"
  38 +}
  39 +
  40 +.van-icon-aim:before {
  41 + content: "\F004"
  42 +}
  43 +
  44 +.van-icon-alipay:before {
  45 + content: "\F005"
  46 +}
  47 +
  48 +.van-icon-apps-o:before {
  49 + content: "\F006"
  50 +}
  51 +
  52 +.van-icon-arrow-down:before {
  53 + content: "\F007"
  54 +}
  55 +
  56 +.van-icon-arrow-left:before {
  57 + content: "\F008"
  58 +}
  59 +
  60 +.van-icon-arrow-up:before {
  61 + content: "\F009"
  62 +}
  63 +
  64 +.van-icon-arrow:before {
  65 + content: "\F00A"
  66 +}
  67 +
  68 +.van-icon-ascending:before {
  69 + content: "\F00B"
  70 +}
  71 +
  72 +.van-icon-audio:before {
  73 + content: "\F00C"
  74 +}
  75 +
  76 +.van-icon-award-o:before {
  77 + content: "\F00D"
  78 +}
  79 +
  80 +.van-icon-award:before {
  81 + content: "\F00E"
  82 +}
  83 +
  84 +.van-icon-bag-o:before {
  85 + content: "\F00F"
  86 +}
  87 +
  88 +.van-icon-bag:before {
  89 + content: "\F010"
  90 +}
  91 +
  92 +.van-icon-balance-list-o:before {
  93 + content: "\F011"
  94 +}
  95 +
  96 +.van-icon-balance-list:before {
  97 + content: "\F012"
  98 +}
  99 +
  100 +.van-icon-balance-o:before {
  101 + content: "\F013"
  102 +}
  103 +
  104 +.van-icon-balance-pay:before {
  105 + content: "\F014"
  106 +}
  107 +
  108 +.van-icon-bar-chart-o:before {
  109 + content: "\F015"
  110 +}
  111 +
  112 +.van-icon-bars:before {
  113 + content: "\F016"
  114 +}
  115 +
  116 +.van-icon-bell:before {
  117 + content: "\F017"
  118 +}
  119 +
  120 +.van-icon-bill-o:before {
  121 + content: "\F018"
  122 +}
  123 +
  124 +.van-icon-bill:before {
  125 + content: "\F019"
  126 +}
  127 +
  128 +.van-icon-birthday-cake-o:before {
  129 + content: "\F01A"
  130 +}
  131 +
  132 +.van-icon-bookmark-o:before {
  133 + content: "\F01B"
  134 +}
  135 +
  136 +.van-icon-bookmark:before {
  137 + content: "\F01C"
  138 +}
  139 +
  140 +.van-icon-browsing-history-o:before {
  141 + content: "\F01D"
  142 +}
  143 +
  144 +.van-icon-browsing-history:before {
  145 + content: "\F01E"
  146 +}
  147 +
  148 +.van-icon-brush-o:before {
  149 + content: "\F01F"
  150 +}
  151 +
  152 +.van-icon-bulb-o:before {
  153 + content: "\F020"
  154 +}
  155 +
  156 +.van-icon-bullhorn-o:before {
  157 + content: "\F021"
  158 +}
  159 +
  160 +.van-icon-calender-o:before {
  161 + content: "\F022"
  162 +}
  163 +
  164 +.van-icon-card:before {
  165 + content: "\F023"
  166 +}
  167 +
  168 +.van-icon-cart-circle-o:before {
  169 + content: "\F024"
  170 +}
  171 +
  172 +.van-icon-cart-circle:before {
  173 + content: "\F025"
  174 +}
  175 +
  176 +.van-icon-cart-o:before {
  177 + content: "\F026"
  178 +}
  179 +
  180 +.van-icon-cart:before {
  181 + content: "\F027"
  182 +}
  183 +
  184 +.van-icon-cash-back-record:before {
  185 + content: "\F028"
  186 +}
  187 +
  188 +.van-icon-cash-on-deliver:before {
  189 + content: "\F029"
  190 +}
  191 +
  192 +.van-icon-cashier-o:before {
  193 + content: "\F02A"
  194 +}
  195 +
  196 +.van-icon-certificate:before {
  197 + content: "\F02B"
  198 +}
  199 +
  200 +.van-icon-chart-trending-o:before {
  201 + content: "\F02C"
  202 +}
  203 +
  204 +.van-icon-chat-o:before {
  205 + content: "\F02D"
  206 +}
  207 +
  208 +.van-icon-chat:before {
  209 + content: "\F02E"
  210 +}
  211 +
  212 +.van-icon-checked:before {
  213 + content: "\F02F"
  214 +}
  215 +
  216 +.van-icon-circle:before {
  217 + content: "\F030"
  218 +}
  219 +
  220 +.van-icon-clear:before {
  221 + content: "\F031"
  222 +}
  223 +
  224 +.van-icon-clock-o:before {
  225 + content: "\F032"
  226 +}
  227 +
  228 +.van-icon-clock:before {
  229 + content: "\F033"
  230 +}
  231 +
  232 +.van-icon-close:before {
  233 + content: "\F034"
  234 +}
  235 +
  236 +.van-icon-closed-eye:before {
  237 + content: "\F035"
  238 +}
  239 +
  240 +.van-icon-cluster-o:before {
  241 + content: "\F036"
  242 +}
  243 +
  244 +.van-icon-cluster:before {
  245 + content: "\F037"
  246 +}
  247 +
  248 +.van-icon-column:before {
  249 + content: "\F038"
  250 +}
  251 +
  252 +.van-icon-comment-circle-o:before {
  253 + content: "\F039"
  254 +}
  255 +
  256 +.van-icon-comment-circle:before {
  257 + content: "\F03A"
  258 +}
  259 +
  260 +.van-icon-comment-o:before {
  261 + content: "\F03B"
  262 +}
  263 +
  264 +.van-icon-comment:before {
  265 + content: "\F03C"
  266 +}
  267 +
  268 +.van-icon-completed:before {
  269 + content: "\F03D"
  270 +}
  271 +
  272 +.van-icon-contact:before {
  273 + content: "\F03E"
  274 +}
  275 +
  276 +.van-icon-coupon-o:before {
  277 + content: "\F03F"
  278 +}
  279 +
  280 +.van-icon-coupon:before {
  281 + content: "\F040"
  282 +}
  283 +
  284 +.van-icon-credit-pay:before {
  285 + content: "\F041"
  286 +}
  287 +
  288 +.van-icon-cross:before {
  289 + content: "\F042"
  290 +}
  291 +
  292 +.van-icon-debit-pay:before {
  293 + content: "\F043"
  294 +}
  295 +
  296 +.van-icon-delete:before {
  297 + content: "\F044"
  298 +}
  299 +
  300 +.van-icon-descending:before {
  301 + content: "\F045"
  302 +}
  303 +
  304 +.van-icon-description:before {
  305 + content: "\F046"
  306 +}
  307 +
  308 +.van-icon-desktop-o:before {
  309 + content: "\F047"
  310 +}
  311 +
  312 +.van-icon-diamond-o:before {
  313 + content: "\F048"
  314 +}
  315 +
  316 +.van-icon-diamond:before {
  317 + content: "\F049"
  318 +}
  319 +
  320 +.van-icon-discount:before {
  321 + content: "\F04A"
  322 +}
  323 +
  324 +.van-icon-down:before {
  325 + content: "\F04B"
  326 +}
  327 +
  328 +.van-icon-ecard-pay:before {
  329 + content: "\F04C"
  330 +}
  331 +
  332 +.van-icon-edit:before {
  333 + content: "\F04D"
  334 +}
  335 +
  336 +.van-icon-ellipsis:before {
  337 + content: "\F04E"
  338 +}
  339 +
  340 +.van-icon-empty:before {
  341 + content: "\F04F"
  342 +}
  343 +
  344 +.van-icon-envelop-o:before {
  345 + content: "\F050"
  346 +}
  347 +
  348 +.van-icon-exchange:before {
  349 + content: "\F051"
  350 +}
  351 +
  352 +.van-icon-expand-o:before {
  353 + content: "\F052"
  354 +}
  355 +
  356 +.van-icon-expand:before {
  357 + content: "\F053"
  358 +}
  359 +
  360 +.van-icon-eye-o:before {
  361 + content: "\F054"
  362 +}
  363 +
  364 +.van-icon-eye:before {
  365 + content: "\F055"
  366 +}
  367 +
  368 +.van-icon-fail:before {
  369 + content: "\F056"
  370 +}
  371 +
  372 +.van-icon-failure:before {
  373 + content: "\F057"
  374 +}
  375 +
  376 +.van-icon-filter-o:before {
  377 + content: "\F058"
  378 +}
  379 +
  380 +.van-icon-fire-o:before {
  381 + content: "\F059"
  382 +}
  383 +
  384 +.van-icon-fire:before {
  385 + content: "\F05A"
  386 +}
  387 +
  388 +.van-icon-flag-o:before {
  389 + content: "\F05B"
  390 +}
  391 +
  392 +.van-icon-flower-o:before {
  393 + content: "\F05C"
  394 +}
  395 +
  396 +.van-icon-free-postage:before {
  397 + content: "\F05D"
  398 +}
  399 +
  400 +.van-icon-friends-o:before {
  401 + content: "\F05E"
  402 +}
  403 +
  404 +.van-icon-friends:before {
  405 + content: "\F05F"
  406 +}
  407 +
  408 +.van-icon-gem-o:before {
  409 + content: "\F060"
  410 +}
  411 +
  412 +.van-icon-gem:before {
  413 + content: "\F061"
  414 +}
  415 +
  416 +.van-icon-gift-card-o:before {
  417 + content: "\F062"
  418 +}
  419 +
  420 +.van-icon-gift-card:before {
  421 + content: "\F063"
  422 +}
  423 +
  424 +.van-icon-gift-o:before {
  425 + content: "\F064"
  426 +}
  427 +
  428 +.van-icon-gift:before {
  429 + content: "\F065"
  430 +}
  431 +
  432 +.van-icon-gold-coin-o:before {
  433 + content: "\F066"
  434 +}
  435 +
  436 +.van-icon-gold-coin:before {
  437 + content: "\F067"
  438 +}
  439 +
  440 +.van-icon-good-job-o:before {
  441 + content: "\F068"
  442 +}
  443 +
  444 +.van-icon-good-job:before {
  445 + content: "\F069"
  446 +}
  447 +
  448 +.van-icon-goods-collect-o:before {
  449 + content: "\F06A"
  450 +}
  451 +
  452 +.van-icon-goods-collect:before {
  453 + content: "\F06B"
  454 +}
  455 +
  456 +.van-icon-graphic:before {
  457 + content: "\F06C"
  458 +}
  459 +
  460 +.van-icon-home-o:before {
  461 + content: "\F06D"
  462 +}
  463 +
  464 +.van-icon-hot-o:before {
  465 + content: "\F06E"
  466 +}
  467 +
  468 +.van-icon-hot-sale-o:before {
  469 + content: "\F06F"
  470 +}
  471 +
  472 +.van-icon-hot-sale:before {
  473 + content: "\F070"
  474 +}
  475 +
  476 +.van-icon-hot:before {
  477 + content: "\F071"
  478 +}
  479 +
  480 +.van-icon-hotel-o:before {
  481 + content: "\F072"
  482 +}
  483 +
  484 +.van-icon-idcard:before {
  485 + content: "\F073"
  486 +}
  487 +
  488 +.van-icon-info-o:before {
  489 + content: "\F074"
  490 +}
  491 +
  492 +.van-icon-info:before {
  493 + content: "\F075"
  494 +}
  495 +
  496 +.van-icon-invition:before {
  497 + content: "\F076"
  498 +}
  499 +
  500 +.van-icon-label-o:before {
  501 + content: "\F077"
  502 +}
  503 +
  504 +.van-icon-label:before {
  505 + content: "\F078"
  506 +}
  507 +
  508 +.van-icon-like-o:before {
  509 + content: "\F079"
  510 +}
  511 +
  512 +.van-icon-like:before {
  513 + content: "\F07A"
  514 +}
  515 +
  516 +.van-icon-live:before {
  517 + content: "\F07B"
  518 +}
  519 +
  520 +.van-icon-location-o:before {
  521 + content: "\F07C"
  522 +}
  523 +
  524 +.van-icon-location:before {
  525 + content: "\F07D"
  526 +}
  527 +
  528 +.van-icon-lock:before {
  529 + content: "\F07E"
  530 +}
  531 +
  532 +.van-icon-logistics:before {
  533 + content: "\F07F"
  534 +}
  535 +
  536 +.van-icon-manager-o:before {
  537 + content: "\F080"
  538 +}
  539 +
  540 +.van-icon-manager:before {
  541 + content: "\F081"
  542 +}
  543 +
  544 +.van-icon-map-marked:before {
  545 + content: "\F082"
  546 +}
  547 +
  548 +.van-icon-medal-o:before {
  549 + content: "\F083"
  550 +}
  551 +
  552 +.van-icon-medal:before {
  553 + content: "\F084"
  554 +}
  555 +
  556 +.van-icon-more-o:before {
  557 + content: "\F085"
  558 +}
  559 +
  560 +.van-icon-more:before {
  561 + content: "\F086"
  562 +}
  563 +
  564 +.van-icon-music-o:before {
  565 + content: "\F087"
  566 +}
  567 +
  568 +.van-icon-music:before {
  569 + content: "\F088"
  570 +}
  571 +
  572 +.van-icon-new-arrival-o:before {
  573 + content: "\F089"
  574 +}
  575 +
  576 +.van-icon-new-arrival:before {
  577 + content: "\F08A"
  578 +}
  579 +
  580 +.van-icon-new-o:before {
  581 + content: "\F08B"
  582 +}
  583 +
  584 +.van-icon-new:before {
  585 + content: "\F08C"
  586 +}
  587 +
  588 +.van-icon-newspaper-o:before {
  589 + content: "\F08D"
  590 +}
  591 +
  592 +.van-icon-notes-o:before {
  593 + content: "\F08E"
  594 +}
  595 +
  596 +.van-icon-orders-o:before {
  597 + content: "\F08F"
  598 +}
  599 +
  600 +.van-icon-other-pay:before {
  601 + content: "\F090"
  602 +}
  603 +
  604 +.van-icon-paid:before {
  605 + content: "\F091"
  606 +}
  607 +
  608 +.van-icon-passed:before {
  609 + content: "\F092"
  610 +}
  611 +
  612 +.van-icon-pause-circle-o:before {
  613 + content: "\F093"
  614 +}
  615 +
  616 +.van-icon-pause-circle:before {
  617 + content: "\F094"
  618 +}
  619 +
  620 +.van-icon-pause:before {
  621 + content: "\F095"
  622 +}
  623 +
  624 +.van-icon-peer-pay:before {
  625 + content: "\F096"
  626 +}
  627 +
  628 +.van-icon-pending-payment:before {
  629 + content: "\F097"
  630 +}
  631 +
  632 +.van-icon-phone-circle-o:before {
  633 + content: "\F098"
  634 +}
  635 +
  636 +.van-icon-phone-circle:before {
  637 + content: "\F099"
  638 +}
  639 +
  640 +.van-icon-phone-o:before {
  641 + content: "\F09A"
  642 +}
  643 +
  644 +.van-icon-phone:before {
  645 + content: "\F09B"
  646 +}
  647 +
  648 +.van-icon-photo-o:before {
  649 + content: "\F09C"
  650 +}
  651 +
  652 +.van-icon-photo:before {
  653 + content: "\F09D"
  654 +}
  655 +
  656 +.van-icon-photograph:before {
  657 + content: "\F09E"
  658 +}
  659 +
  660 +.van-icon-play-circle-o:before {
  661 + content: "\F09F"
  662 +}
  663 +
  664 +.van-icon-play-circle:before {
  665 + content: "\F0A0"
  666 +}
  667 +
  668 +.van-icon-play:before {
  669 + content: "\F0A1"
  670 +}
  671 +
  672 +.van-icon-plus:before {
  673 + content: "\F0A2"
  674 +}
  675 +
  676 +.van-icon-point-gift-o:before {
  677 + content: "\F0A3"
  678 +}
  679 +
  680 +.van-icon-point-gift:before {
  681 + content: "\F0A4"
  682 +}
  683 +
  684 +.van-icon-points:before {
  685 + content: "\F0A5"
  686 +}
  687 +
  688 +.van-icon-printer:before {
  689 + content: "\F0A6"
  690 +}
  691 +
  692 +.van-icon-qr-invalid:before {
  693 + content: "\F0A7"
  694 +}
  695 +
  696 +.van-icon-qr:before {
  697 + content: "\F0A8"
  698 +}
  699 +
  700 +.van-icon-question-o:before {
  701 + content: "\F0A9"
  702 +}
  703 +
  704 +.van-icon-question:before {
  705 + content: "\F0AA"
  706 +}
  707 +
  708 +.van-icon-records:before {
  709 + content: "\F0AB"
  710 +}
  711 +
  712 +.van-icon-refund-o:before {
  713 + content: "\F0AC"
  714 +}
  715 +
  716 +.van-icon-replay:before {
  717 + content: "\F0AD"
  718 +}
  719 +
  720 +.van-icon-scan:before {
  721 + content: "\F0AE"
  722 +}
  723 +
  724 +.van-icon-search:before {
  725 + content: "\F0AF"
  726 +}
  727 +
  728 +.van-icon-send-gift-o:before {
  729 + content: "\F0B0"
  730 +}
  731 +
  732 +.van-icon-send-gift:before {
  733 + content: "\F0B1"
  734 +}
  735 +
  736 +.van-icon-service-o:before {
  737 + content: "\F0B2"
  738 +}
  739 +
  740 +.van-icon-service:before {
  741 + content: "\F0B3"
  742 +}
  743 +
  744 +.van-icon-setting-o:before {
  745 + content: "\F0B4"
  746 +}
  747 +
  748 +.van-icon-setting:before {
  749 + content: "\F0B5"
  750 +}
  751 +
  752 +.van-icon-share:before {
  753 + content: "\F0B6"
  754 +}
  755 +
  756 +.van-icon-shop-collect-o:before {
  757 + content: "\F0B7"
  758 +}
  759 +
  760 +.van-icon-shop-collect:before {
  761 + content: "\F0B8"
  762 +}
  763 +
  764 +.van-icon-shop-o:before {
  765 + content: "\F0B9"
  766 +}
  767 +
  768 +.van-icon-shop:before {
  769 + content: "\F0BA"
  770 +}
  771 +
  772 +.van-icon-shopping-cart-o:before {
  773 + content: "\F0BB"
  774 +}
  775 +
  776 +.van-icon-shopping-cart:before {
  777 + content: "\F0BC"
  778 +}
  779 +
  780 +.van-icon-shrink:before {
  781 + content: "\F0BD"
  782 +}
  783 +
  784 +.van-icon-sign:before {
  785 + content: "\F0BE"
  786 +}
  787 +
  788 +.van-icon-smile-comment-o:before {
  789 + content: "\F0BF"
  790 +}
  791 +
  792 +.van-icon-smile-comment:before {
  793 + content: "\F0C0"
  794 +}
  795 +
  796 +.van-icon-smile-o:before {
  797 + content: "\F0C1"
  798 +}
  799 +
  800 +.van-icon-smile:before {
  801 + content: "\F0C2"
  802 +}
  803 +
  804 +.van-icon-star-o:before {
  805 + content: "\F0C3"
  806 +}
  807 +
  808 +.van-icon-star:before {
  809 + content: "\F0C4"
  810 +}
  811 +
  812 +.van-icon-stop-circle-o:before {
  813 + content: "\F0C5"
  814 +}
  815 +
  816 +.van-icon-stop-circle:before {
  817 + content: "\F0C6"
  818 +}
  819 +
  820 +.van-icon-stop:before {
  821 + content: "\F0C7"
  822 +}
  823 +
  824 +.van-icon-success:before {
  825 + content: "\F0C8"
  826 +}
  827 +
  828 +.van-icon-thumb-circle-o:before {
  829 + content: "\F0C9"
  830 +}
  831 +
  832 +.van-icon-thumb-circle:before {
  833 + content: "\F0CA"
  834 +}
  835 +
  836 +.van-icon-todo-list-o:before {
  837 + content: "\F0CB"
  838 +}
  839 +
  840 +.van-icon-todo-list:before {
  841 + content: "\F0CC"
  842 +}
  843 +
  844 +.van-icon-tosend:before {
  845 + content: "\F0CD"
  846 +}
  847 +
  848 +.van-icon-tv-o:before {
  849 + content: "\F0CE"
  850 +}
  851 +
  852 +.van-icon-umbrella-circle:before {
  853 + content: "\F0CF"
  854 +}
  855 +
  856 +.van-icon-underway-o:before {
  857 + content: "\F0D0"
  858 +}
  859 +
  860 +.van-icon-underway:before {
  861 + content: "\F0D1"
  862 +}
  863 +
  864 +.van-icon-upgrade:before {
  865 + content: "\F0D2"
  866 +}
  867 +
  868 +.van-icon-user-circle-o:before {
  869 + content: "\F0D3"
  870 +}
  871 +
  872 +.van-icon-user-o:before {
  873 + content: "\F0D4"
  874 +}
  875 +
  876 +.van-icon-video-o:before {
  877 + content: "\F0D5"
  878 +}
  879 +
  880 +.van-icon-video:before {
  881 + content: "\F0D6"
  882 +}
  883 +
  884 +.van-icon-vip-card-o:before {
  885 + content: "\F0D7"
  886 +}
  887 +
  888 +.van-icon-vip-card:before {
  889 + content: "\F0D8"
  890 +}
  891 +
  892 +.van-icon-volume-o:before {
  893 + content: "\F0D9"
  894 +}
  895 +
  896 +.van-icon-volume:before {
  897 + content: "\F0DA"
  898 +}
  899 +
  900 +.van-icon-wap-home-o:before {
  901 + content: "\F0DB"
  902 +}
  903 +
  904 +.van-icon-wap-home:before {
  905 + content: "\F0DC"
  906 +}
  907 +
  908 +.van-icon-wap-nav:before {
  909 + content: "\F0DD"
  910 +}
  911 +
  912 +.van-icon-warn-o:before {
  913 + content: "\F0DE"
  914 +}
  915 +
  916 +.van-icon-warning-o:before {
  917 + content: "\F0DF"
  918 +}
  919 +
  920 +.van-icon-warning:before {
  921 + content: "\F0E0"
  922 +}
  923 +
  924 +.van-icon-weapp-nav:before {
  925 + content: "\F0E1"
  926 +}
  927 +
  928 +.van-icon-wechat:before {
  929 + content: "\F0E2"
  930 +}
  931 +
  932 +.van-icon-youzan-shield:before {
  933 + content: "\F0E3"
  934 +}
  935 +
  936 +:host {
  937 + display: -webkit-inline-flex;
  938 + display: inline-flex;
  939 + -webkit-align-items: center;
  940 + align-items: center;
  941 + -webkit-justify-content: center;
  942 + justify-content: center
  943 +}
  944 +
  945 +.van-icon--image {
  946 + width: 1em;
  947 + height: 1em
  948 +}
  949 +
  950 +.van-icon__image {
  951 + width: 100%;
  952 + height: 100%
  953 +}
  954 +
  955 +.van-icon__info {
  956 + z-index: 1
  957 +}
... ...
src/wxcomponents/vant/info/index.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +export {};
... ...
src/wxcomponents/vant/info/index.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,8 @@
  1 +import { VantComponent } from '../common/component';
  2 +VantComponent({
  3 + props: {
  4 + dot: Boolean,
  5 + info: null,
  6 + customStyle: String
  7 + }
  8 +});
... ...
src/wxcomponents/vant/info/index.json
Diff comments   View file @289f85d
... ... @@ -0,0 +1,3 @@
  1 +{
  2 + "component": true
  3 +}
... ...
src/wxcomponents/vant/info/index.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,20 @@
  1 +<template>
  2 +<uni-shadow-root class="vant-info-index"><view v-if="info !== null && info !== '' || dot" :class="'custom-class van-info '+(utils.bem('info', { dot }))" :style="customStyle">{{ dot ? '' : info }}</view></uni-shadow-root>
  3 +</template>
  4 +<wxs src="../wxs/utils.wxs" module="utils"></wxs>
  5 +<script>
  6 +
  7 +global['__wxRoute'] = 'vant/info/index'
  8 +import { VantComponent } from '../common/component';
  9 +VantComponent({
  10 + props: {
  11 + dot: Boolean,
  12 + info: null,
  13 + customStyle: String
  14 + }
  15 +});
  16 +export default global['__wxComponents']['vant/info/index']
  17 +</script>
  18 +<style platform="mp-weixin">
  19 +@import '../common/index.css';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,PingFang SC,Helvetica Neue,Arial,sans-serif);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}
  20 +</style>
0 21 \ No newline at end of file
... ...
src/wxcomponents/vant/info/index.wxml
Diff comments   View file @289f85d
... ... @@ -0,0 +1,7 @@
  1 +<wxs src="../wxs/utils.wxs" module="utils" />
  2 +
  3 +<view
  4 + wx:if="{{ info !== null && info !== '' || dot }}"
  5 + class="custom-class van-info {{ utils.bem('info', { dot }) }}"
  6 + style="{{ customStyle }}"
  7 +>{{ dot ? '' : info }}</view>
... ...
src/wxcomponents/vant/info/index.wxss
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,PingFang SC,Helvetica Neue,Arial,sans-serif);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}
0 2 \ No newline at end of file
... ...
src/wxcomponents/vant/loading/index.d.ts
Diff comments   View file @289f85d
... ... @@ -0,0 +1 @@
  1 +export {};
... ...
src/wxcomponents/vant/loading/index.js
Diff comments   View file @289f85d
... ... @@ -0,0 +1,32 @@
  1 +import { VantComponent } from '../common/component';
  2 +import { addUnit } from '../common/utils';
  3 +VantComponent({
  4 + props: {
  5 + color: String,
  6 + vertical: Boolean,
  7 + type: {
  8 + type: String,
  9 + value: 'circular'
  10 + },
  11 + size: {
  12 + type: String,
  13 + observer: 'setSizeWithUnit'
  14 + },
  15 + textSize: {
  16 + type: String,
  17 + observer: 'setTextSizeWithUnit'
  18 + }
  19 + },
  20 + methods: {
  21 + setSizeWithUnit(size) {
  22 + this.setData({
  23 + sizeWithUnit: addUnit(size)
  24 + });
  25 + },
  26 + setTextSizeWithUnit(size) {
  27 + this.set({
  28 + textSizeWithUnit: addUnit(size)
  29 + });
  30 + }
  31 + }
  32 +});
... ...
src/wxcomponents/vant/loading/index.json
Diff comments   View file @289f85d
... ... @@ -0,0 +1,3 @@
  1 +{
  2 + "component": true
  3 +}
0 4 \ No newline at end of file
... ...
src/wxcomponents/vant/loading/index.vue
Diff comments   View file @289f85d
... ... @@ -0,0 +1,51 @@
  1 +<template>
  2 +<uni-shadow-root class="vant-loading-index"><view :class="'custom-class van-loading '+(vertical ? 'van-loading--vertical' : '')">
  3 + <view :class="'van-loading__spinner van-loading__spinner--'+(type)" :style="'color: '+(color)+'; width: '+(sizeWithUnit)+'; height: '+(sizeWithUnit)">
  4 + <view v-for="(item,index) in ('item in 12')" :key="item.index" v-if="type === 'spinner'" class="van-loading__dot"></view>
  5 + </view>
  6 + <view class="van-loading__text" :style="'font-size: '+(textSizeWithUnit)+';'">
  7 + <slot></slot>
  8 + </view>
  9 +</view></uni-shadow-root>
  10 +</template>
  11 +
  12 +<script>
  13 +
  14 +global['__wxRoute'] = 'vant/loading/index'
  15 +import { VantComponent } from '../common/component';
  16 +import { addUnit } from '../common/utils';
  17 +VantComponent({
  18 + props: {
  19 + color: String,
  20 + vertical: Boolean,
  21 + type: {
  22 + type: String,
  23 + value: 'circular'
  24 + },
  25 + size: {
  26 + type: String,
  27 + observer: 'setSizeWithUnit'
  28 + },
  29 + textSize: {
  30 + type: String,
  31 + observer: 'setTextSizeWithUnit'
  32 + }
  33 + },
  34 + methods: {
  35 + setSizeWithUnit(size) {
  36 + this.setData({
  37 + sizeWithUnit: addUnit(size)
  38 + });
  39 + },
  40 + setTextSizeWithUnit(size) {
  41 + this.set({
  42 + textSizeWithUnit: addUnit(size)
  43 + });
  44 + }
  45 + }
  46 +});
  47 +export default global['__wxComponents']['vant/loading/index']
  48 +</script>
  49 +<style platform="mp-weixin">
  50 +@import '../common/index.css';.vant-loading-index{font-size:0;line-height:1}.van-loading{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#c8c9cc;color:var(--loading-spinner-color,#c8c9cc)}.van-loading__spinner{position:relative;box-sizing:border-box;width:30px;width:var(--loading-spinner-size,30px);max-width:100%;max-height:100%;height:30px;height:var(--loading-spinner-size,30px);-webkit-animation:van-rotate .8s linear infinite;animation:van-rotate .8s linear infinite;-webkit-animation:van-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;animation:van-rotate var(--loading-spinner-animation-duration,.8s) linear infinite}.van-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.van-loading__spinner--circular{border:1px solid transparent;border-top-color:initial;border-radius:100%}.van-loading__text{margin-left:8px;margin-left:var(--padding-xs,8px);color:#969799;color:var(--loading-text-color,#969799);font-size:14px;font-size:var(--loading-text-font-size,14px);line-height:20px;line-height:var(--loading-text-line-height,20px)}.van-loading__text:empty{display:none}.van-loading--vertical{-webkit-flex-direction:column;flex-direction:column}.van-loading--vertical .van-loading__text{margin:8px 0 0;margin:var(--padding-xs,8px) 0 0}.van-loading__dot{position:absolute;top:0;left:0;width:100%;height:100%}.van-loading__dot:before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:" "}.van-loading__dot:first-of-type{-webkit-transform:rotate(30deg);transform:rotate(30deg);opacity:1}.van-loading__dot:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg);opacity:.9375}.van-loading__dot:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:.875}.van-loading__dot:nth-of-type(4){-webkit-transform:rotate(120deg);transform:rotate(120deg);opacity:.8125}.van-loading__dot:nth-of-type(5){-webkit-transform:rotate(150deg);transform:rotate(150deg);opacity:.75}.van-loading__dot:nth-of-type(6){-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.6875}.van-loading__dot:nth-of-type(7){-webkit-transform:rotate(210deg);transform:rotate(210deg);opacity:.625}.van-loading__dot:nth-of-type(8){-webkit-transform:rotate(240deg);transform:rotate(240deg);opacity:.5625}.van-loading__dot:nth-of-type(9){-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:.5}.van-loading__dot:nth-of-type(10){-webkit-transform:rotate(300deg);transform:rotate(300deg);opacity:.4375}.van-loading__dot:nth-of-type(11){-webkit-transform:rotate(330deg);transform:rotate(330deg);opacity:.375}.van-loading__dot:nth-of-type(12){-webkit-transform:rotate(1turn);transform:rotate(1turn);opacity:.3125}@-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)}}
  51 +</style>
0 52 \ No newline at end of file
... ...
src/wxcomponents/vant/loading/index.wxml
Diff comments   View file @289f85d
... ... @@ -0,0 +1,16 @@
  1 +<view class="custom-class van-loading {{ vertical ? 'van-loading--vertical' : '' }}">
  2 + <view
  3 + class="van-loading__spinner van-loading__spinner--{{ type }}"
  4 + style="color: {{ color }}; width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
  5 + >
  6 + <view
  7 + wx:if="{{ type === 'spinner' }}"
  8 + wx:for="item in 12"
  9 + wx:key="index"
  10 + class="van-loading__dot"
  11 + />
  12 + </view>
  13 + <view class="van-loading__text" style="font-size: {{ textSizeWithUnit }};">
  14 + <slot />
  15 + </view>
  16 +</view>
... ...