chore[litemall-wx]: 使用vant-weapp 1.0

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

+import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
+VantComponent({
+    relation: {
+        name: 'grid-item',
+        type: 'descendant',
+        linked(child) {
+            this.children.push(child);
+        },
+        unlinked(child) {
+            this.children = this.children.filter((item) => item !== child);
+        }
+    },
+    props: {
+        square: {
+            type: Boolean,
+            observer: 'updateChildren'
+        },
+        gutter: {
+            type: [Number, String],
+            value: 0,
+            observer: 'updateChildren'
+        },
+        clickable: {
+            type: Boolean,
+            observer: 'updateChildren'
+        },
+        columnNum: {
+            type: Number,
+            value: 4,
+            observer: 'updateChildren'
+        },
+        center: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren'
+        },
+        border: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren'
+        }
+    },
+    beforeCreate() {
+        this.children = [];
+    },
+    created() {
+        const { gutter } = this.data;
+        if (gutter) {
+            this.setData({
+                style: `padding-left: ${addUnit(gutter)}`
+            });
+        }
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach((child) => {
+                child.updateStyle();
+            });
+        }
+    }
+});

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

+{
+  "component": true
+}

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

+<view class="van-grid {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ style }}">
+  <slot />
+</view>

litemall-wx/lib/vant-weapp/grid/index.wxss

+@import '../common/index.wxss';.van-grid{position:relative;box-sizing:border-box;overflow:hidden}
\ No newline at end of file

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

+export {};

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

+import { addUnit, isDef } from '../common/utils';
+import { VantComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { openType } from '../mixins/open-type';
+const FIT_MODE_MAP = {
+    none: 'center',
+    fill: 'scaleToFill',
+    cover: 'aspectFill',
+    contain: 'aspectFit'
+};
+VantComponent({
+    mixins: [button, openType],
+    classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
+    props: {
+        src: String,
+        round: Boolean,
+        width: {
+            type: null,
+            observer: 'setStyle'
+        },
+        height: {
+            type: null,
+            observer: 'setStyle'
+        },
+        radius: null,
+        lazyLoad: Boolean,
+        useErrorSlot: Boolean,
+        useLoadingSlot: Boolean,
+        showMenuByLongpress: Boolean,
+        fit: {
+            type: String,
+            value: 'fill',
+            observer: 'setMode'
+        },
+        showError: {
+            type: Boolean,
+            value: true
+        },
+        showLoading: {
+            type: Boolean,
+            value: true
+        }
+    },
+    data: {
+        error: false,
+        loading: true
+    },
+    watch: {
+        src() {
+            this.setData({
+                error: false,
+                loading: true
+            });
+        }
+    },
+    mounted() {
+        this.setMode();
+        this.setStyle();
+    },
+    methods: {
+        setMode() {
+            this.setData({
+                mode: FIT_MODE_MAP[this.data.fit],
+            });
+        },
+        setStyle() {
+            const { width, height, radius } = this.data;
+            let style = '';
+            if (isDef(width)) {
+                style += `width: ${addUnit(width)};`;
+            }
+            if (isDef(height)) {
+                style += `height: ${addUnit(height)};`;
+            }
+            if (isDef(radius)) {
+                style += 'overflow: hidden;';
+                style += `border-radius: ${addUnit(radius)};`;
+            }
+            this.setData({ style });
+        },
+        onLoad(event) {
+            this.setData({
+                loading: false
+            });
+            this.$emit('load', event.detail);
+        },
+        onError(event) {
+            this.setData({
+                loading: false,
+                error: true
+            });
+            this.$emit('error', event.detail);
+        },
+        onClick(event) {
+            this.$emit('click', event.detail);
+        }
+    }
+});

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

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

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

+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  style="{{ style }}"
+  class="custom-class {{ utils.bem('image', { round })}}"
+  bind:tap="onClick"
+>
+  <image
+    wx:if="{{ !error }}"
+    src="{{ src }}"
+    mode="{{ mode }}"
+    lazy-load="{{ lazyLoad }}"
+    class="image-class van-image__img"
+    show-menu-by-longpress="{{ showMenuByLongpress }}"
+    bind:load="onLoad"
+    bind:error="onError"
+  />
+
+  <view
+    wx:if="{{ loading && showLoading }}"
+    class="loading-class van-image__loading"
+  >
+    <slot wx:if="{{ useLoadingSlot }}" name="loading" />
+    <van-icon wx:else name="photo-o" size="22" />
+  </view>
+  <view
+    wx:if="{{ error && showError }}"
+    class="error-class van-image__error"
+  >
+    <slot wx:if="{{ useErrorSlot }}" name="error" />
+    <van-icon wx:else name="warning-o" size="22" />
+  </view>
+</view>

litemall-wx/lib/vant-weapp/image/index.wxss

+@import '../common/index.wxss';.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:50%}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#969799;color:var(--image-placeholder-text-color,#969799);font-size:14px;font-size:var(--image-placeholder-font-size,14px);background-color:#f7f8fa;background-color:var(--image-placeholder-background-color,#f7f8fa)}
\ No newline at end of file

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

+export {};

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

+import { VantComponent } from '../common/component';
+VantComponent({
+    relation: {
+        name: 'index-bar',
+        type: 'ancestor',
+        linked(target) {
+            this.parent = target;
+        },
+        unlinked() {
+            this.parent = null;
+        }
+    },
+    props: {
+        useSlot: Boolean,
+        index: null
+    },
+    data: {
+        active: false,
+        wrapperStyle: '',
+        anchorStyle: ''
+    }
+});

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

+{
+  "component": true
+}

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

+<view
+  class="van-index-anchor-wrapper"
+  style="{{ wrapperStyle }}"
+>
+  <view
+    class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
+    style="{{ anchorStyle }}"
+  >
+    <slot wx:if="{{ useSlot }}"/>
+    <block wx:else>
+      <text>{{ index }}</text>
+    </block>
+  </view>
+</view>

litemall-wx/lib/vant-weapp/index-anchor/index.wxss

+@import '../common/index.wxss';.van-index-anchor{padding:0 16px;padding:var(--index-anchor-padding,0 16px);color:#323233;color:var(--index-anchor-text-color,#323233);font-weight:500;font-weight:var(--index-anchor-font-weight,500);font-size:14px;font-size:var(--index-anchor-font-size,14px);line-height:32px;line-height:var(--index-anchor-line-height,32px);background-color:initial;background-color:var(--index-anchor-background-color,transparent)}.van-index-anchor--active{right:0;left:0;color:#07c160;color:var(--index-anchor-active-text-color,#07c160);background-color:#fff;background-color:var(--index-anchor-active-background-color,#fff)}
\ No newline at end of file

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

+export {};

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

+import { VantComponent } from '../common/component';
+import { GREEN } from '../common/color';
+const indexList = () => {
+    const indexList = [];
+    const charCodeOfA = 'A'.charCodeAt(0);
+    for (let i = 0; i < 26; i++) {
+        indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+    return indexList;
+};
+VantComponent({
+    relation: {
+        name: 'index-anchor',
+        type: 'descendant',
+        linked() {
+            this.updateData();
+        },
+        linkChanged() {
+            this.updateData();
+        },
+        unlinked() {
+            this.updateData();
+        }
+    },
+    props: {
+        sticky: {
+            type: Boolean,
+            value: true
+        },
+        zIndex: {
+            type: Number,
+            value: 1
+        },
+        highlightColor: {
+            type: String,
+            value: GREEN
+        },
+        scrollTop: {
+            type: Number,
+            value: 0,
+            observer: 'onScroll'
+        },
+        stickyOffsetTop: {
+            type: Number,
+            value: 0
+        },
+        indexList: {
+            type: Array,
+            value: indexList()
+        }
+    },
+    data: {
+        activeAnchorIndex: null,
+        showSidebar: false
+    },
+    methods: {
+        updateData() {
+            this.timer && clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.children = this.getRelationNodes('../index-anchor/index');
+                this.setData({
+                    showSidebar: !!this.children.length
+                });
+                this.setRect().then(() => {
+                    this.onScroll();
+                });
+            }, 0);
+        },
+        setRect() {
+            return Promise.all([
+                this.setAnchorsRect(),
+                this.setListRect(),
+                this.setSiderbarRect()
+            ]);
+        },
+        setAnchorsRect() {
+            return Promise.all(this.children.map(anchor => (anchor.getRect('.van-index-anchor-wrapper').then((rect) => {
+                Object.assign(anchor, {
+                    height: rect.height,
+                    top: rect.top + this.data.scrollTop
+                });
+            }))));
+        },
+        setListRect() {
+            return this.getRect('.van-index-bar').then((rect) => {
+                Object.assign(this, {
+                    height: rect.height,
+                    top: rect.top + this.data.scrollTop
+                });
+            });
+        },
+        setSiderbarRect() {
+            return this.getRect('.van-index-bar__sidebar').then(res => {
+                this.sidebar = {
+                    height: res.height,
+                    top: res.top
+                };
+            });
+        },
+        setDiffData({ target, data }) {
+            const diffData = {};
+            Object.keys(data).forEach(key => {
+                if (target.data[key] !== data[key]) {
+                    diffData[key] = data[key];
+                }
+            });
+            if (Object.keys(diffData).length) {
+                target.setData(diffData);
+            }
+        },
+        getAnchorRect(anchor) {
+            return anchor.getRect('.van-index-anchor-wrapper').then((rect) => ({
+                height: rect.height,
+                top: rect.top
+            }));
+        },
+        getActiveAnchorIndex() {
+            const { children } = this;
+            const { sticky, scrollTop, stickyOffsetTop } = this.data;
+            for (let i = this.children.length - 1; i >= 0; i--) {
+                const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+                const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
+                if (reachTop + scrollTop >= children[i].top) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        onScroll() {
+            const { children = [] } = this;
+            if (!children.length) {
+                return;
+            }
+            const { sticky, stickyOffsetTop, zIndex, highlightColor, scrollTop } = this.data;
+            const active = this.getActiveAnchorIndex();
+            this.setDiffData({
+                target: this,
+                data: {
+                    activeAnchorIndex: active
+                }
+            });
+            if (sticky) {
+                let isActiveAnchorSticky = false;
+                if (active !== -1) {
+                    isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
+                }
+                children.forEach((item, index) => {
+                    if (index === active) {
+                        let wrapperStyle = '';
+                        let anchorStyle = `
+              color: ${highlightColor};
+            `;
+                        if (isActiveAnchorSticky) {
+                            wrapperStyle = `
+                height: ${children[index].height}px;
+              `;
+                            anchorStyle = `
+                position: fixed;
+                top: ${stickyOffsetTop}px;
+                z-index: ${zIndex};
+                color: ${highlightColor};
+              `;
+                        }
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle,
+                                wrapperStyle
+                            }
+                        });
+                    }
+                    else if (index === active - 1) {
+                        const currentAnchor = children[index];
+                        const currentOffsetTop = currentAnchor.top;
+                        const targetOffsetTop = index === children.length - 1
+                            ? this.top
+                            : children[index + 1].top;
+                        const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+                        const translateY = parentOffsetHeight - currentAnchor.height;
+                        const anchorStyle = `
+              position: relative;
+              transform: translate3d(0, ${translateY}px, 0);
+              z-index: ${zIndex};
+              color: ${highlightColor};
+            `;
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle
+                            }
+                        });
+                    }
+                    else {
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: false,
+                                anchorStyle: '',
+                                wrapperStyle: '',
+                            }
+                        });
+                    }
+                });
+            }
+        },
+        onClick(event) {
+            this.scrollToAnchor(event.target.dataset.index);
+        },
+        onTouchMove(event) {
+            const sidebarLength = this.children.length;
+            const touch = event.touches[0];
+            const itemHeight = this.sidebar.height / sidebarLength;
+            let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
+            if (index < 0) {
+                index = 0;
+            }
+            else if (index > sidebarLength - 1) {
+                index = sidebarLength - 1;
+            }
+            this.scrollToAnchor(index);
+        },
+        onTouchStop() {
+            this.scrollToAnchorIndex = null;
+        },
+        scrollToAnchor(index) {
+            if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
+                return;
+            }
+            this.scrollToAnchorIndex = index;
+            const anchor = this.children.filter(item => item.data.index === this.data.indexList[index])[0];
+            this.$emit('select', anchor.data.index);
+            anchor && wx.pageScrollTo({
+                duration: 0,
+                scrollTop: anchor.top
+            });
+        }
+    }
+});

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

+{
+  "component": true
+}

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

+<view class="van-index-bar">
+  <slot />
+
+  <view
+    wx:if="{{ showSidebar }}"
+    class="van-index-bar__sidebar"
+    catch:tap="onClick"
+    catch:touchmove="onTouchMove"
+    catch:touchend="onTouchStop"
+    catch:touchcancel="onTouchStop"
+  >
+    <view
+      wx:for="{{ indexList }}"
+      wx:key="index"
+      class="van-index-bar__index"
+      style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
+      data-index="{{ index }}"
+    >
+      {{ item }}
+    </view>
+  </view>
+</view>

litemall-wx/lib/vant-weapp/index-bar/index.wxss

+@import '../common/index.wxss';.van-index-bar{position:relative}.van-index-bar__sidebar{position:fixed;top:50%;right:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-weight:500;padding:0 4px 0 16px;padding:0 var(--padding-base,4px) 0 var(--padding-md,16px);font-size:10px;font-size:var(--index-bar-index-font-size,10px);line-height:14px;line-height:var(--index-bar-index-line-height,14px)}
\ No newline at end of file

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

+export {};