feat[litemall-wx]: 引入vant-weapp

litemall-wx/lib/vant-weapp/button/index.d.ts

@@ -0,0 +1 @@
+export {};

litemall-wx/lib/vant-weapp/button/index.js

@@ -0,0 +1,68 @@
+import { VantComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { openType } from '../mixins/open-type';
+VantComponent({
+    mixins: [button, openType],
+    classes: ['hover-class', 'loading-class'],
+    data: {
+        style: ''
+    },
+    props: {
+        icon: String,
+        plain: Boolean,
+        block: Boolean,
+        round: Boolean,
+        square: Boolean,
+        loading: Boolean,
+        hairline: Boolean,
+        disabled: Boolean,
+        loadingText: String,
+        customStyle: String,
+        loadingType: {
+            type: String,
+            value: 'circular'
+        },
+        type: {
+            type: String,
+            value: 'default'
+        },
+        size: {
+            type: String,
+            value: 'normal'
+        },
+        loadingSize: {
+            type: String,
+            value: '20px'
+        },
+        color: {
+            type: String,
+            observer(color) {
+                let style = '';
+                if (color) {
+                    style += `color: ${this.data.plain ? color : 'white'};`;
+                    if (!this.data.plain) {
+                        // Use background instead of backgroundColor to make linear-gradient work
+                        style += `background: ${color};`;
+                    }
+                    // hide border when color is linear-gradient
+                    if (color.indexOf('gradient') !== -1) {
+                        style += 'border: 0;';
+                    }
+                    else {
+                        style += `border-color: ${color};`;
+                    }
+                }
+                if (style !== this.data.style) {
+                    this.setData({ style });
+                }
+            }
+        }
+    },
+    methods: {
+        onClick() {
+            if (!this.data.disabled && !this.data.loading) {
+                this.$emit('click');
+            }
+        }
+    }
+});

litemall-wx/lib/vant-weapp/button/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index"
+  }
+}

litemall-wx/lib/vant-weapp/button/index.wxml

@@ -0,0 +1,52 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<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 }}"
+  bindtap="onClick"
+  bindgetuserinfo="bindGetUserInfo"
+  bindcontact="bindContact"
+  bindgetphonenumber="bindGetPhoneNumber"
+  binderror="bindError"
+  bindlaunchapp="bindLaunchApp"
+  bindopensetting="bindOpenSetting"
+>
+  <block wx:if="{{ loading }}">
+    <van-loading
+      custom-class="loading-class"
+      size="{{ loadingSize }}"
+      type="{{ loadingType }}"
+      color="{{ type === 'default' ? '#c9c9c9' : 'white' }}"
+    />
+    <view
+      wx:if="{{ loadingText }}"
+      class="van-button__loading-text"
+    >
+      {{ loadingText }}
+    </view>
+  </block>
+  <block wx:else>
+    <van-icon
+      wx:if="{{ icon }}"
+      size="1.2em"
+      name="{{ icon }}"
+      class="van-button__icon"
+      custom-style="line-height: inherit;"
+    />
+    <view class="van-button__text">
+      <slot />
+    </view>
+  </block>
+</button>

litemall-wx/lib/vant-weapp/icon/index.d.ts

@@ -0,0 +1 @@
+export {};

litemall-wx/lib/vant-weapp/icon/index.js

@@ -0,0 +1,39 @@
+import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
+VantComponent({
+    props: {
+        dot: Boolean,
+        info: null,
+        size: {
+            type: null,
+            observer: 'setSizeWithUnit'
+        },
+        color: String,
+        customStyle: String,
+        classPrefix: {
+            type: String,
+            value: 'van-icon'
+        },
+        name: {
+            type: String,
+            observer(val) {
+                this.setData({
+                    isImageName: val.indexOf('/') !== -1
+                });
+            }
+        }
+    },
+    data: {
+        sizeWithUnit: null,
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+        setSizeWithUnit(size) {
+            this.setData({
+                sizeWithUnit: addUnit(size)
+            });
+        }
+    }
+});

litemall-wx/lib/vant-weapp/icon/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
+}

litemall-wx/lib/vant-weapp/icon/index.wxml

@@ -0,0 +1,18 @@
+<view
+  class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}"
+  style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + sizeWithUnit + ';' : '' }}{{ customStyle }}"
+  bind:tap="onClick"
+>
+  <van-info
+    wx:if="{{ info !== null || dot }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    custom-class="van-icon__info"
+  />
+  <image
+    wx:if="{{ isImageName }}"
+    src="{{ name }}"
+    mode="aspectFit"
+    class="van-icon__image"
+  />
+</view>

litemall-wx/lib/vant-weapp/info/index.d.ts

@@ -0,0 +1 @@
+export {};

litemall-wx/lib/vant-weapp/info/index.js

@@ -0,0 +1,8 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+    props: {
+        dot: Boolean,
+        info: null,
+        customStyle: String
+    }
+});

litemall-wx/lib/vant-weapp/info/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

litemall-wx/lib/vant-weapp/info/index.wxml

@@ -0,0 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ info !== null && info !== '' || dot }}"
+  class="custom-class van-info {{ utils.bem('info', { dot }) }}"
+  style="{{ customStyle }}"
+>{{ dot ? '' : info }}</view>

litemall-wx/lib/vant-weapp/steps/index.d.ts

@@ -0,0 +1 @@
+export {};

litemall-wx/lib/vant-weapp/steps/index.js

@@ -0,0 +1,22 @@
+import { VantComponent } from '../common/component';
+import { GREEN } from '../common/color';
+VantComponent({
+    props: {
+        icon: String,
+        steps: Array,
+        active: Number,
+        direction: {
+            type: String,
+            value: 'horizontal'
+        },
+        activeColor: {
+            type: String,
+            value: GREEN
+        },
+        activeIcon: {
+            type: String,
+            value: 'checked'
+        },
+        inactiveIcon: String
+    }
+});

litemall-wx/lib/vant-weapp/steps/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

litemall-wx/lib/vant-weapp/steps/index.wxml

@@ -0,0 +1,51 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('steps', [direction]) }}">
+  <view class="van-step__wrapper">
+    <view
+      wx:for="{{ steps }}"
+      wx:key="index"
+      class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
+    >
+      <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
+        <view>{{ item.text }}</view>
+        <view>{{ item.desc }}</view>
+      </view>
+      <view class="van-step__circle-container">
+        <block wx:if="{{ index !== active }}">
+          <van-icon
+            wx:if="{{ inactiveIcon }}"
+            color="#969799"
+            name="{{ inactiveIcon }}"
+            custom-class="van-step__icon"
+          />
+          <view
+            wx:else
+            class="van-step__circle"
+            style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
+          />
+        </block>
+
+        <van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
+      </view>
+      <view
+        wx:if="{{ index !== steps.length - 1 }}"
+        class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
+      />
+    </view>
+  </view>
+</view>
+
+<wxs module="status">
+function get(index, active) {
+  if (index < active) {
+    return 'finish';
+  } else if (index === active) {
+    return 'process';
+  }
+
+  return '';
+}
+
+module.exports = get;
+</wxs>