✨ 发布记录反馈

app.json

@@ -4,7 +4,8 @@
     "pages/index/index",
     "pages/logs/logs",
     "pages/member/member",
-    "pages/orderDetail/orderDetail"
+    "pages/orderDetail/orderDetail",
+    "pages/feedback/feedback"
   ],
   "tabBar": {
     "color": "#666666",

components/dist/animation-group/index.js

@@ -0,0 +1,382 @@
+import baseComponent from '../helpers/baseComponent'
+import styleToCssString from '../helpers/styleToCssString'
+
+const ENTER = 'enter'
+const ENTERING = 'entering'
+const ENTERED = 'entered'
+const EXIT = 'exit'
+const EXITING = 'exiting'
+const EXITED = 'exited'
+const UNMOUNTED = 'unmounted'
+
+const TRANSITION = 'transition'
+const ANIMATION = 'animation'
+
+const TIMEOUT = 1000 / 60
+
+const defaultClassNames = {
+    enter: '', // 进入过渡的开始状态，在过渡过程完成之后移除
+    enterActive: '', // 进入过渡的结束状态，在过渡过程完成之后移除
+    enterDone: '', // 进入过渡的完成状态
+    exit: '', // 离开过渡的开始状态，在过渡过程完成之后移除
+    exitActive: '', // 离开过渡的结束状态，在过渡过程完成之后移除
+    exitDone: '', // 离开过渡的完成状态
+}
+
+baseComponent({
+    properties: {
+        // 触发组件进入或离开过渡的状态
+        in: {
+            type: Boolean,
+            value: false,
+            observer(newVal) {
+                if (this.data.isMounting) {
+                    this.updated(newVal)
+                }
+            },
+        },
+        // 过渡的类名
+        classNames: {
+            type: null,
+            value: defaultClassNames,
+        },
+        // 过渡持续时间
+        duration: {
+            type: null,
+            value: null,
+        },
+        // 过渡动效的类型
+        type: {
+            type: String,
+            value: TRANSITION,
+        },
+        // 首次挂载时是否触发进入过渡
+        appear: {
+            type: Boolean,
+            value: false,
+        },
+        // 是否启用进入过渡
+        enter: {
+            type: Boolean,
+            value: true,
+        },
+        // 是否启用离开过渡
+        exit: {
+            type: Boolean,
+            value: true,
+        },
+        // 首次进入过渡时是否懒挂载组件
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        // 离开过渡完成时是否卸载组件
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+        // 自定义类名
+        wrapCls: {
+            type: String,
+            value: '',
+        },
+        // 自定义样式
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        disableScroll: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        animateCss: '', // 动画样式
+        animateStatus: EXITED, // 动画状态，可选值 entering、entered、exiting、exited
+        isMounting: false, // 是否首次挂载
+        extStyle: '', // 组件样式
+    },
+    methods: {
+        /**
+         * 监听过渡或动画的回调函数
+         */
+        addEventListener() {
+            const { animateStatus } = this.data
+            const { enter, exit } = this.getTimeouts()
+
+            if (animateStatus === ENTERING && !enter && this.data.enter) {
+                this.performEntered()
+            }
+
+            if (animateStatus === EXITING && !exit && this.data.exit) {
+                this.performExited()
+            }
+        },
+        /**
+         * 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
+         */
+        onTransitionEnd() {
+            if (this.data.type === TRANSITION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 会在一个 WXSS animation 动画完成时触发
+         */
+        onAnimationEnd() {
+            if (this.data.type === ANIMATION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 更新组件状态
+         * @param {String} nextStatus 下一状态，ENTERING 或 EXITING
+         * @param {Boolean} mounting 是否首次挂载
+         */
+        updateStatus(nextStatus, mounting = false) {
+            if (nextStatus !== null) {
+                this.cancelNextCallback()
+                this.isAppearing = mounting
+
+                if (nextStatus === ENTERING) {
+                    this.performEnter()
+                } else {
+                    this.performExit()
+                }
+            }
+        },
+        /**
+         * 进入过渡
+         */
+        performEnter() {
+            const { className, activeClassName } = this.getClassNames(ENTER)
+            const { enter } = this.getTimeouts()
+            const enterParams = {
+                animateStatus: ENTER,
+                animateCss: className,
+            }
+            const enteringParams = {
+                animateStatus: ENTERING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用进入过渡，则更新状态至 ENTERED
+            if (!this.isAppearing && !this.data.enter) {
+                return this.performEntered()
+            }
+
+            // 第一阶段：设置进入过渡的开始状态，并触发 ENTER 事件
+            // 第二阶段：延迟一帧后，设置进入过渡的结束状态，并触发 ENTERING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发进入过渡完成 performEntered，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(enterParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTER })
+                this.triggerEvent(ENTER, { isAppearing: this.isAppearing })
+
+                // 由于有些时候不能正确的触发动画完成的回调，具体原因未知
+                // 所以采用延迟一帧的方式来确保可以触发回调
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(enteringParams, () => {
+                        this.triggerEvent('change', { animateStatus: ENTERING })
+                        this.triggerEvent(ENTERING, { isAppearing: this.isAppearing })
+
+                        if (enter) {
+                            this.delayHandler(enter, this.performEntered)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 进入过渡完成
+         */
+        performEntered() {
+            const { doneClassName } = this.getClassNames(ENTER)
+            const enteredParams = {
+                animateStatus: ENTERED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置进入过渡的完成状态，并触发 ENTERED 事件
+            this.safeSetData(enteredParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTERED })
+                this.triggerEvent(ENTERED, { isAppearing: this.isAppearing })
+            })
+        },
+        /**
+         * 离开过渡
+         */
+        performExit() {
+            const { className, activeClassName } = this.getClassNames(EXIT)
+            const { exit } = this.getTimeouts()
+            const exitParams = {
+                animateStatus: EXIT,
+                animateCss: className,
+            }
+            const exitingParams = {
+                animateStatus: EXITING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用离开过渡，则更新状态至 EXITED
+            if (!this.data.exit) {
+                return this.performExited()
+            }
+
+            // 第一阶段：设置离开过渡的开始状态，并触发 EXIT 事件
+            // 第二阶段：延迟一帧后，设置离开过渡的结束状态，并触发 EXITING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发离开过渡完成 performExited，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(exitParams, () => {
+                this.triggerEvent('change', { animateStatus: EXIT })
+                this.triggerEvent(EXIT)
+
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(exitingParams, () => {
+                        this.triggerEvent('change', { animateStatus: EXITING })
+                        this.triggerEvent(EXITING)
+
+                        if (exit) {
+                            this.delayHandler(exit, this.performExited)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 离开过渡完成
+         */
+        performExited() {
+            const { doneClassName } = this.getClassNames(EXIT)
+            const exitedParams = {
+                animateStatus: EXITED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置离开过渡的完成状态，并触发 EXITED 事件
+            this.safeSetData(exitedParams, () => {
+                this.triggerEvent('change', { animateStatus: EXITED })
+                this.triggerEvent(EXITED)
+
+                // 判断离开过渡完成时是否卸载组件
+                if (this.data.unmountOnExit) {
+                    this.setData({ animateStatus: UNMOUNTED }, () => {
+                        this.triggerEvent('change', { animateStatus: UNMOUNTED })
+                    })
+                }
+            })
+        },
+        /**
+         * 获取指定状态下的类名
+         * @param {String} type 过渡类型，enter 或 exit
+         */
+        getClassNames(type) {
+            const { classNames } = this.data
+            const className = typeof classNames !== 'string' ? classNames[type] : `${classNames}-${type}`
+            const activeClassName = typeof classNames !== 'string' ? classNames[`${type}Active`] : `${classNames}-${type}-active`
+            const doneClassName = typeof classNames !== 'string' ? classNames[`${type}Done`] : `${classNames}-${type}-done`
+
+            return {
+                className,
+                activeClassName,
+                doneClassName,
+            }
+        },
+        /**
+         * 获取过渡持续时间
+         */
+        getTimeouts() {
+            const { duration } = this.data
+
+            if (duration !== null && typeof duration === 'object') {
+                return {
+                    enter: duration.enter,
+                    exit: duration.exit,
+                }
+            } else if (typeof duration === 'number') {
+                return {
+                    enter: duration,
+                    exit: duration,
+                }
+            }
+
+            return {}
+        },
+        /**
+         * 属性值 in 被更改时的响应函数
+         * @param {Boolean} newVal 触发组件进入或离开过渡的状态
+         */
+        updated(newVal) {
+            let { animateStatus } = this.pendingData || this.data
+            let nextStatus = null
+
+            if (newVal) {
+                if (animateStatus === UNMOUNTED) {
+                    animateStatus = EXITED
+                    this.setData({ animateStatus: EXITED }, () => {
+                        this.triggerEvent('change', { animateStatus: EXITED })
+                    })
+                }
+                if (animateStatus !== ENTER && animateStatus !== ENTERING && animateStatus !== ENTERED) {
+                    nextStatus = ENTERING
+                }
+            } else {
+                if (animateStatus === ENTER || animateStatus === ENTERING || animateStatus === ENTERED) {
+                    nextStatus = EXITING
+                }
+            }
+
+            this.updateStatus(nextStatus)
+        },
+        /**
+         * 延迟一段时间触发回调
+         * @param {Number} timeout 延迟时间
+         * @param {Function} handler 回调函数
+         */
+        delayHandler(timeout, handler) {
+            if (timeout) {
+                this.setNextCallback(handler)
+                setTimeout(this.nextCallback, timeout)
+            }
+        },
+        /**
+         * 点击事件
+         */
+        onTap() {
+            this.triggerEvent('click')
+        },
+        /**
+         * 阻止移动触摸
+         */
+        noop() {},
+    },
+    attached() {
+        let animateStatus = null
+        let appearStatus = null
+
+        if (this.data.in) {
+            if (this.data.appear) {
+                animateStatus = EXITED
+                appearStatus = ENTERING
+            } else {
+                animateStatus = ENTERED
+            }
+        } else {
+            if (this.data.unmountOnExit || this.data.mountOnEnter) {
+                animateStatus = UNMOUNTED
+            } else {
+                animateStatus = EXITED
+            }
+        }
+
+        // 由于小程序组件首次挂载时 observer 事件总是优先于 attached 事件
+        // 所以使用 isMounting 来强制优先触发 attached 事件
+        this.safeSetData({ animateStatus, isMounting: true }, () => {
+            this.triggerEvent('change', { animateStatus })
+            this.updateStatus(appearStatus, true)
+        })
+    },
+})

components/dist/animation-group/index.json

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

components/dist/animation-group/index.wxml

@@ -0,0 +1,3 @@
+<view class="wux-class {{ wrapCls }} {{ animateCss }}" bindtap="onTap" catchtouchmove="{{ disableScroll ? 'noop' : '' }}" bindtransitionend="onTransitionEnd" bindanimationend="onAnimationEnd" wx:if="{{ animateStatus !== 'unmounted' }}" style="{{ extStyle }}">
+    <slot></slot>
+</view>

components/dist/animation-group/index.wxss

@@ -0,0 +1,206 @@
+.wux-animate--fadeIn-enter {
+  transition: opacity .3s;
+  opacity: 0
+}
+.wux-animate--fadeIn-enter-active,
+.wux-animate--fadeIn-enter-done {
+  opacity: 1
+}
+.wux-animate--fadeIn-exit {
+  transition: opacity .3s;
+  opacity: 1
+}
+.wux-animate--fadeIn-exit-active,
+.wux-animate--fadeIn-exit-done {
+  opacity: 0
+}
+.wux-animate--fadeInDown-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInDown-enter-active,
+.wux-animate--fadeInDown-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit-active,
+.wux-animate--fadeInDown-exit-done {
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInLeft-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInLeft-enter-active,
+.wux-animate--fadeInLeft-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit-active,
+.wux-animate--fadeInLeft-exit-done {
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInRight-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInRight-enter-active,
+.wux-animate--fadeInRight-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit-active,
+.wux-animate--fadeInRight-exit-done {
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInUp-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--fadeInUp-enter-active,
+.wux-animate--fadeInUp-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit-active,
+.wux-animate--fadeInUp-exit-done {
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--slideInUp-enter {
+  transition: transform .3s;
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInUp-enter-active,
+.wux-animate--slideInUp-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit-active,
+.wux-animate--slideInUp-exit-done {
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter {
+  transition: transform .3s;
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter-active,
+.wux-animate--slideInDown-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit-active,
+.wux-animate--slideInDown-exit-done {
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter {
+  transition: transform .3s;
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter-active,
+.wux-animate--slideInLeft-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit-active,
+.wux-animate--slideInLeft-exit-done {
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter {
+  transition: transform .3s;
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter-active,
+.wux-animate--slideInRight-enter-done {
+  transform: none
+}
+.wux-animate--slideInRight-exit {
+  transition: transform .3s;
+  transform: none
+}
+.wux-animate--slideInRight-exit-active,
+.wux-animate--slideInRight-exit-done {
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--zoom-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--zoom-enter-active,
+.wux-animate--zoom-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--zoom-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--zoom-exit-active,
+.wux-animate--zoom-exit-done {
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--punch-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(1.35)
+}
+.wux-animate--punch-enter-active,
+.wux-animate--punch-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--punch-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--punch-exit-active,
+.wux-animate--punch-exit-done {
+  opacity: .01;
+  transform: scale(1.35)
+}

components/dist/backdrop/index.js

@@ -0,0 +1,62 @@
+import baseComponent from '../helpers/baseComponent'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-backdrop',
+        },
+        transparent: {
+            type: Boolean,
+            value: false,
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        classNames: {
+            type: null,
+            value: 'wux-animate--fadeIn',
+        },
+    },
+    computed: {
+        classes: ['prefixCls, transparent', function(prefixCls, transparent) {
+            const wrap = transparent ? `${prefixCls}--transparent` : prefixCls
+
+            return {
+                wrap,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 保持锁定
+         */
+        retain() {
+            if (typeof this.backdropHolds !== 'number' || !this.backdropHolds) {
+                this.backdropHolds = 0
+            }
+
+            this.backdropHolds = this.backdropHolds + 1
+
+            if (this.backdropHolds === 1) {
+                this.setData({ in: true })
+            }
+        },
+        /**
+         * 释放锁定
+         */
+        release() {
+            if (this.backdropHolds === 1) {
+                this.setData({ in: false })
+            }
+            this.backdropHolds = Math.max(0, this.backdropHolds - 1)
+        },
+        /**
+         * 点击事件
+         */
+        onClick() {
+            this.triggerEvent('click')
+        },
+    },
+})

components/dist/backdrop/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index"
+    }
+}

components/dist/backdrop/index.wxml

@@ -0,0 +1 @@
+<wux-animation-group wux-class="{{ classes.wrap }}" in="{{ in }}" classNames="{{ classNames }}" bind:click="onClick" wrapStyle="{{ { zIndex } }}" disableScroll />

components/dist/backdrop/index.wxss

@@ -0,0 +1,15 @@
+.wux-backdrop {
+  background: rgba(0,0,0,.4)
+}
+.wux-backdrop,
+.wux-backdrop--transparent {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0
+}
+.wux-backdrop--transparent {
+  background: 0 0
+}

components/dist/countdown/index.js

@@ -0,0 +1,176 @@
+class Countdown {
+    constructor(options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+        this.restart(this.options)
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaults() {
+        return {
+            date: 'June 7, 2087 15:03:25',
+            refresh: 1000,
+            offset: 0,
+            onEnd() {},
+            render(date) {},
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaults()
+
+        for (let i in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(i)) {
+                this.options[i] = typeof options[i] !== 'undefined' ? options[i] : defaultOptions[i]
+
+                if (i === 'date' && typeof this.options.date !== 'object') {
+                    this.options.date = new Date(this.options.date)
+                }
+
+                if (typeof this.options[i] === 'function') {
+                    this.options[i] = this.options[i].bind(this)
+                }
+            }
+        }
+
+        if (typeof this.options.date !== 'object') {
+            this.options.date = new Date(this.options.date)
+        }
+    }
+
+    /**
+     * 计算日期差
+     */
+    getDiffDate() {
+        let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
+
+        let dateData = {
+            years: 0,
+            days: 0,
+            hours: 0,
+            min: 0,
+            sec: 0,
+            millisec: 0,
+        }
+
+        if (diff <= 0) {
+            if (this.interval) {
+                this.stop()
+                this.options.onEnd()
+            }
+            return dateData
+        }
+
+        if (diff >= (365.25 * 86400)) {
+            dateData.years = Math.floor(diff / (365.25 * 86400))
+            diff -= dateData.years * 365.25 * 86400
+        }
+
+        if (diff >= 86400) {
+            dateData.days = Math.floor(diff / 86400)
+            diff -= dateData.days * 86400
+        }
+
+        if (diff >= 3600) {
+            dateData.hours = Math.floor(diff / 3600)
+            diff -= dateData.hours * 3600
+        }
+
+        if (diff >= 60) {
+            dateData.min = Math.floor(diff / 60)
+            diff -= dateData.min * 60
+        }
+
+        dateData.sec = Math.round(diff)
+
+        dateData.millisec = diff % 1 * 1000
+
+        return dateData
+    }
+
+    /**
+     * 补零
+     */
+    leadingZeros(num, length = 2) {
+        num = String(num)
+        if (num.length > length) return num
+        return (Array(length + 1).join('0') + num).substr(-length)
+    }
+
+    /**
+     * 更新组件
+     */
+    update(newDate) {
+        this.options.date = typeof newDate !== 'object' ? new Date(newDate) : newDate
+        this.render()
+        return this
+    }
+
+    /**
+     * 停止倒计时
+     */
+    stop() {
+        if (this.interval) {
+            clearInterval(this.interval)
+            this.interval = !1
+        }
+        return this
+    }
+
+    /**
+     * 渲染组件
+     */
+    render() {
+        this.options.render(this.getDiffDate())
+        return this
+    }
+
+    /**
+     * 启动倒计时
+     */
+    start() {
+        if (this.interval) return !1
+        this.render()
+        if (this.options.refresh) {
+            this.interval = setInterval(() => {
+                this.render()
+            }, this.options.refresh)
+        }
+        return this
+    }
+
+    /**
+     * 更新offset
+     */
+    updateOffset(offset) {
+        this.options.offset = offset
+        return this
+    }
+
+    /**
+     * 重启倒计时
+     */
+    restart(options = {}) {
+        this.mergeOptions(options)
+        this.interval = !1
+        this.start()
+        return this
+    }
+}
+
+export default Countdown

components/dist/countup/index.js

@@ -0,0 +1,220 @@
+class CountUp {
+    constructor(startVal, endVal, decimals, duration, options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            startVal,
+            endVal,
+            decimals,
+            duration,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+
+        this.lastTime = 0
+
+        // merge options
+        this.mergeOptions(this.options)
+
+        this.startVal = Number(this.startVal)
+        this.cacheVal = this.startVal
+        this.endVal = Number(this.endVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.frameVal = this.startVal
+        this.decimals = Math.max(0, this.decimals || 0)
+        this.dec = Math.pow(10, this.decimals)
+        this.duration = Number(this.duration) * 1000 || 2000
+
+        // format startVal on initialization
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaultOptions() {
+        return {
+            useEasing: true, // toggle easing
+            useGrouping: true, // 1,000,000 vs 1000000
+            separator: ',', // character to use as a separator
+            decimal: '.', // character to use as a decimal
+            easingFn: null, // optional custom easing closure function, default is Robert Penner's easeOutExpo
+            formattingFn: null, // optional custom formatting function, default is this.formatNumber below
+            printValue(value) {}, // printValue
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaultOptions()
+
+        // extend default options with passed options object
+        for (let key in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(key)) {
+                this.options[key] = typeof options[key] !== 'undefined' ? options[key] : defaultOptions[key]
+                if (typeof this.options[key] === 'function') {
+                    this.options[key] = this.options[key].bind(this)
+                }
+            }
+        }
+
+        if (this.options.separator === '') { this.options.useGrouping = !1 }
+        if (!this.options.prefix) this.options.prefix = ''
+        if (!this.options.suffix) this.options.suffix = ''
+
+        this.easingFn = this.options.easingFn ? this.options.easingFn : this.easeOutExpo
+        this.formattingFn = this.options.formattingFn ? this.options.formattingFn : this.formatNumber
+        this.printValue = this.options.printValue ? this.options.printValue : function() {}
+    }
+
+    /**
+     * 创建定时器
+     */
+    requestAnimationFrame(callback) {
+        let currTime = new Date().getTime()
+        let timeToCall = Math.max(0, 16 - (currTime - this.lastTime))
+        let timeout = setTimeout(() => {
+            callback.bind(this)(currTime + timeToCall)
+        }, timeToCall)
+        this.lastTime = currTime + timeToCall
+        return timeout
+    }
+
+    /**
+     * 清空定时器
+     */
+    cancelAnimationFrame(timeout) {
+        clearTimeout(timeout)
+    }
+
+    /**
+     * 格式化数字
+     */
+    formatNumber(nStr) {
+        nStr = nStr.toFixed(this.decimals)
+        nStr += ''
+        let x, x1, x2, rgx
+        x = nStr.split('.')
+        x1 = x[0]
+        x2 = x.length > 1 ? this.options.decimal + x[1] : ''
+        rgx = /(\d+)(\d{3})/
+        if (this.options.useGrouping) {
+            while (rgx.test(x1)) {
+                x1 = x1.replace(rgx, '$1' + this.options.separator + '$2')
+            }
+        }
+        return this.options.prefix + x1 + x2 + this.options.suffix
+    }
+
+    /**
+     * 过渡效果
+     */
+    easeOutExpo(t, b, c, d) {
+        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
+    }
+
+    /**
+     * 计数函数
+     */
+    count(timestamp) {
+        if (!this.startTime) { this.startTime = timestamp }
+
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remaining = this.duration - progress
+
+        // to ease or not to ease
+        if (this.options.useEasing) {
+            if (this.countDown) {
+                this.frameVal = this.startVal - this.easingFn(progress, 0, this.startVal - this.endVal, this.duration)
+            } else {
+                this.frameVal = this.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration)
+            }
+        } else {
+            if (this.countDown) {
+                this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration))
+            } else {
+                this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration)
+            }
+        }
+
+        // don't go past endVal since progress can exceed duration in the last frame
+        if (this.countDown) {
+            this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal
+        } else {
+            this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal
+        }
+
+        // decimal
+        this.frameVal = Math.round(this.frameVal * this.dec) / this.dec
+
+        // format and print value
+        this.printValue(this.formattingFn(this.frameVal))
+
+        // whether to continue
+        if (progress < this.duration) {
+            this.rAF = this.requestAnimationFrame(this.count)
+        } else {
+            if (this.callback) { this.callback() }
+        }
+    }
+
+    /**
+     * 启动计数器
+     */
+    start(callback) {
+        this.callback = callback
+        this.rAF = this.requestAnimationFrame(this.count)
+        return !1
+    }
+
+    /**
+     * 停止计数器
+     */
+    pauseResume() {
+        if (!this.paused) {
+            this.paused = !0
+            this.cancelAnimationFrame(this.rAF)
+        } else {
+            this.paused = !1
+            delete this.startTime
+            this.duration = this.remaining
+            this.startVal = this.frameVal
+            this.requestAnimationFrame(this.count)
+        }
+    }
+
+    /**
+     * 重置计数器
+     */
+    reset() {
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.cacheVal
+        this.cancelAnimationFrame(this.rAF)
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 更新计数器
+     */
+    update(newEndVal) {
+        this.cancelAnimationFrame(this.rAF)
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.frameVal
+        this.endVal = Number(newEndVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.rAF = this.requestAnimationFrame(this.count)
+    }
+}
+
+export default CountUp

components/dist/helpers/arrayTreeFilter.js

@@ -0,0 +1,24 @@
+/**
+ * https://github.com/afc163/array-tree-filter
+ */
+function arrayTreeFilter(data, filterFn, options) {
+    options = options || {}
+    options.childrenKeyName = options.childrenKeyName || 'children'
+    let children = data || []
+    const result = []
+    let level = 0
+    do {
+        const foundItem = children.filter(function(item) {
+            return filterFn(item, level)
+        })[0]
+        if (!foundItem) {
+            break
+        }
+        result.push(foundItem)
+        children = foundItem[options.childrenKeyName] || []
+        level += 1
+    } while (children.length > 0)
+    return result
+}
+
+export default arrayTreeFilter

components/dist/helpers/baseComponent.js

@@ -0,0 +1,77 @@
+import computedBehavior from './computedBehavior'
+import relationsBehavior from './relationsBehavior'
+import safeAreaBehavior from './safeAreaBehavior'
+import safeSetDataBehavior from './safeSetDataBehavior'
+import funcBehavior from './funcBehavior'
+import compareVersion from './compareVersion'
+
+const { platform, SDKVersion } = wx.getSystemInfoSync()
+const libVersion = '2.6.6'
+
+// check SDKVersion
+if (platform === 'devtools' && compareVersion(SDKVersion, libVersion) < 0) {
+    if (wx && wx.showModal) {
+        wx.showModal({
+            title: '提示',
+            content: `当前基础库版本（${SDKVersion}）过低，无法使用 Wux Weapp 组件库，请更新基础库版本 >=${libVersion} 后重试。`,
+        })
+    }
+}
+
+const baseComponent = (options = {}) => {
+    // add default externalClasses
+    options.externalClasses = [
+        'wux-class',
+        'wux-hover-class',
+        ...(options.externalClasses = options.externalClasses || []),
+    ]
+
+    // add default behaviors
+    options.behaviors = [
+        relationsBehavior,
+        safeSetDataBehavior,
+        ...(options.behaviors = options.behaviors || []),
+        computedBehavior, // make sure it's triggered
+    ]
+
+    // use safeArea
+    if (options.useSafeArea) {
+        options.behaviors = [...options.behaviors, safeAreaBehavior]
+        delete options.useSafeArea
+    }
+
+    // use func
+    if (options.useFunc) {
+        options.behaviors = [...options.behaviors, funcBehavior]
+        delete options.useFunc
+    }
+
+    // use field
+    if (options.useField) {
+        options.behaviors = [...options.behaviors, 'wx://form-field']
+        delete options.useField
+    }
+
+    // use export
+    if (options.useExport) {
+        options.behaviors = [...options.behaviors, 'wx://component-export']
+        options.methods = {
+            export () {
+                return this
+            },
+            ...options.methods,
+        }
+        delete options.useExport
+    }
+
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true,
+        ...options.options,
+    }
+
+    return Component(options)
+}
+
+export default baseComponent

components/dist/helpers/checkIPhoneX.js

@@ -0,0 +1,29 @@
+/**
+ * 获取系统信息
+ */
+
+let systemInfo = null
+
+export const getSystemInfo = (isForce) => {
+    if (!systemInfo || isForce) {
+        try {
+            systemInfo = wx.getSystemInfoSync()
+        } catch(e) { /* Ignore */ }
+    }
+
+    return systemInfo
+}
+
+// iPhoneX 竖屏安全区域
+export const safeAreaInset = {
+    top: 88, // StatusBar & NavBar
+    left: 0,
+    right: 0,
+    bottom: 34, // Home Indicator
+}
+
+const isIPhoneX = ({ model, platform }) => {
+    return /iPhone X/.test(model) && platform === 'ios'
+}
+
+export const checkIPhoneX = (isForce) => isIPhoneX(getSystemInfo(isForce))

components/dist/helpers/classNames.js

@@ -0,0 +1,39 @@
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+'use strict';
+
+var hasOwn = {}.hasOwnProperty;
+
+function classNames() {
+    var classes = [];
+
+    for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (!arg) continue;
+
+        var argType = typeof arg;
+
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        } else if (Array.isArray(arg) && arg.length) {
+            var inner = classNames.apply(null, arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        } else if (argType === 'object') {
+            for (var key in arg) {
+                if (hasOwn.call(arg, key) && arg[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+    }
+
+    return classes.join(' ');
+}
+
+export default classNames

components/dist/helpers/colors.js

@@ -0,0 +1,27 @@
+/**
+ * Don't modify this file!
+ * Colors generated by themes!
+ */
+
+/* eslint-disable */
+
+export const colors = {
+    'light': '#ddd',
+    'stable': '#b2b2b2',
+    'positive': '#387ef5',
+    'calm': '#11c1f3',
+    'balanced': '#33cd5f',
+    'energized': '#ffc900',
+    'assertive': '#ef473a',
+    'royal': '#886aea',
+    'dark': '#444',
+}
+
+export const isPresetColor = (color) => {
+    if (!color) {
+        return false
+    }
+    return colors[color] ? colors[color] : color
+}
+
+/* eslint-enable */

components/dist/helpers/compareVersion.js

@@ -0,0 +1,27 @@
+function compareVersion(v1, v2) {
+    const $v1 = v1.split('.')
+    const $v2 = v2.split('.')
+    const len = Math.max($v1.length, $v2.length)
+
+    while ($v1.length < len) {
+        $v1.push('0')
+    }
+    while ($v2.length < len) {
+        $v2.push('0')
+    }
+
+    for (let i = 0; i < len; i++) {
+        const num1 = parseInt($v1[i])
+        const num2 = parseInt($v2[i])
+
+        if (num1 > num2) {
+            return 1
+        } else if (num1 < num2) {
+            return -1
+        }
+    }
+
+    return 0
+}
+
+export default compareVersion

components/dist/helpers/computedBehavior.js

@@ -0,0 +1,48 @@
+import isEmpty from './isEmpty'
+import shallowEqual from './shallowEqual'
+
+const ALL_DATA_KEY = '**'
+
+const trim = (str = '') => str.replace(/\s/g, '')
+
+export default Behavior({
+    lifetimes: {
+        attached() {
+            this.initComputed()
+        },
+    },
+    definitionFilter(defFields) {
+        const { computed = {} } = defFields
+        const observers = Object.keys(computed).reduce((acc, name) => {
+            const [field, getter] = Array.isArray(computed[name]) ? computed[name] : [ALL_DATA_KEY, computed[name]]
+            return {
+                ...acc,
+                [field]: function(...args) {
+                    if (typeof getter === 'function') {
+                        const newValue = getter.apply(this, args)
+                        const oldValue = this.data[name]
+                        if (!isEmpty(newValue) && !shallowEqual(newValue, oldValue)) {
+                            this.setData({ [name]: newValue })
+                        }
+                    }
+                },
+            }
+        }, {})
+
+        Object.assign(defFields.observers = (defFields.observers || {}), observers)
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            initComputed: function(data = {}, isForce = false) {
+                if (!this.runInitComputed || isForce) {
+                    this.runInitComputed = false
+                    const context = this
+                    const result = { ...this.data, ...data }
+                    Object.keys(observers).forEach((key) => {
+                        const values = trim(key).split(',').reduce((acc, name) => ([...acc, result[name]]), [])
+                        observers[key].apply(context, values)
+                    })
+                    this.runInitComputed = true
+                }
+            },
+        })
+    },
+})

components/dist/helpers/createFieldsStore.js

@@ -0,0 +1,75 @@
+class FieldsStore {
+    constructor(fields = {}) {
+        this.fields = fields
+    }
+
+    setFields(fields) {
+        Object.assign(this.fields, fields)
+    }
+
+    updateFields(fields) {
+        this.fields = fields
+    }
+
+    clearField(name) {
+        delete this.fields[name]
+    }
+
+    getValueFromFields(name, fields) {
+        const field = fields[name]
+        if (field && 'value' in field) {
+            return field.value
+        }
+        return field.initialValue
+    }
+
+    getAllFieldsName() {
+        const { fields } = this
+        return fields ? Object.keys(fields) : []
+    }
+
+    getField(name) {
+        return {
+            ...this.fields[name],
+            name,
+        }
+    }
+
+    getFieldValuePropValue(fieldOption) {
+        const { name, valuePropName } = fieldOption
+        const field = this.getField(name)
+        const fieldValue = 'value' in field ? field.value : field.initialValue
+
+        return {
+            [valuePropName]: fieldValue,
+        }
+    }
+
+    getFieldValue(name) {
+        return this.getValueFromFields(name, this.fields)
+    }
+
+    getFieldsValue(names) {
+        const fields = names || this.getAllFieldsName()
+        return fields.reduce((acc, name) => {
+            acc[name] = this.getFieldValue(name)
+            return acc
+        }, {})
+    }
+
+    resetFields(ns) {
+        const { fields } = this
+        const names = ns || this.getAllFieldsName()
+        return names.reduce((acc, name) => {
+            const field = fields[name]
+            if (field) {
+                acc[name] = field.initialValue
+            }
+            return acc
+        }, {})
+    }
+}
+
+export default function createFieldsStore(fields) {
+    return new FieldsStore(fields)
+}

components/dist/helpers/debounce.js

@@ -0,0 +1,56 @@
+export default function debounce(func, wait, immediate) {
+    let timeout,
+        args,
+        context,
+        timestamp,
+        result
+
+    function later() {
+        const last = +(new Date()) - timestamp
+        if (last < wait && last >= 0) {
+            timeout = setTimeout(later, wait - last)
+        } else {
+            timeout = undefined
+            if (!immediate) {
+                result = func.apply(context, args)
+                if (!timeout) {
+                    context = undefined
+                    args = undefined
+                }
+            }
+        }
+    }
+
+    function debounced() {
+        context = this
+        args = arguments
+        timestamp = +(new Date())
+
+        const callNow = immediate && !timeout
+        if (!timeout) {
+            timeout = setTimeout(later, wait)
+        }
+
+        if (callNow) {
+            result = func.apply(context, args)
+            context = undefined
+            args = undefined
+        }
+
+        return result
+    }
+
+    function cancel() {
+        if (timeout !== undefined) {
+            clearTimeout(timeout)
+            timeout = undefined
+        }
+
+        context = undefined
+        args = undefined
+    }
+
+    debounced.cancel = cancel
+
+    return debounced
+}

components/dist/helpers/eventsMixin.js

@@ -0,0 +1,53 @@
+const defaultEvents = {
+    onChange() {},
+}
+
+export default function eventsMixin(params = { defaultEvents }) {
+    return Behavior({
+        lifetimes: {
+            created () {
+                this._oriTriggerEvent = this.triggerEvent
+                this.triggerEvent = this._triggerEvent
+            },
+        },
+        properties: {
+            events: {
+                type: Object,
+                value: defaultEvents,
+            },
+        },
+        data: {
+            inputEvents: defaultEvents,
+        },
+        definitionFilter(defFields) {
+            // set default data
+            Object.assign(defFields.data = (defFields.data || {}), {
+                inputEvents: Object.assign({}, defaultEvents, defFields.inputEvents),
+            })
+
+            // set default methods
+            Object.assign(defFields.methods = (defFields.methods || {}), {
+                _triggerEvent(name, params, runCallbacks = true, option) {
+                    const { inputEvents } = this.data
+                    const method = `on${name[0].toUpperCase()}${name.slice(1)}`
+                    const func = inputEvents[method]
+
+                    if (runCallbacks && typeof func === 'function') {
+                        func.call(this, params)
+                    }
+
+                    this._oriTriggerEvent(name, params, option)
+                },
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                events(newVal) {
+                    this.setData({
+                        inputEvents: Object.assign({}, defaultEvents, this.data.inputEvents, newVal),
+                    })
+                },
+            })
+        },
+    })
+}

components/dist/helpers/funcBehavior.js

@@ -0,0 +1,97 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+/**
+ * Simple bind, faster than native
+ *
+ * @param {Function} fn
+ * @param {Object} ctx
+ * @return {Function}
+ */
+const bind = (fn, ctx) => {
+    return (...args) => {
+        return args.length ? fn.apply(ctx, args) : fn.call(ctx)
+    }
+}
+
+/**
+ * Object assign
+ */
+const assign = (...args) => Object.assign({}, ...args)
+
+export default Behavior({
+    definitionFilter(defFields) {
+        defFields.data = mergeOptionsToData(defFields.data)
+        defFields.data.in = false
+        defFields.data.visible = false
+    },
+    methods: {
+        /**
+         * 过滤对象的函数属性
+         * @param {Object} opts
+         */
+        $$mergeOptionsToData: mergeOptionsToData,
+        /**
+         * 合并参数并绑定方法
+         *
+         * @param {Object} opts 参数对象
+         * @param {Object} fns 方法挂载的属性
+         */
+        $$mergeOptionsAndBindMethods (opts = {}, fns = this.fns) {
+            const options = Object.assign({}, opts)
+
+            for (const key in options) {
+                if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+                    fns[key] = bind(options[key], this)
+                    delete options[key]
+                }
+            }
+
+            return options
+        },
+        /**
+         * Promise setData
+         * @param {Array} args 参数对象
+         */
+        $$setData (...args) {
+            const params = assign({}, ...args)
+
+            return new Promise((resolve) => {
+                this.setData(params, resolve)
+            })
+        },
+        /**
+         * 延迟指定时间执行回调函数
+         * @param {Function} callback 回调函数
+         * @param {Number} timeout 延迟时间
+         */
+        $$requestAnimationFrame (callback = () => {}, timeout = 1000 / 60) {
+            return new Promise((resolve) => setTimeout(resolve, timeout)).then(callback)
+        },
+    },
+    /**
+     * 组件生命周期函数，在组件实例进入页面节点树时执行
+     */
+    created () {
+        this.fns = {}
+    },
+    /**
+     * 组件生命周期函数，在组件实例被从页面节点树移除时执行
+     */
+    detached () {
+        this.fns = {}
+    },
+})

components/dist/helpers/gestures.js

@@ -0,0 +1,50 @@
+/**
+ * 获取触摸点位置信息
+ */
+export const getTouchPoints = (nativeEvent, index = 0) => {
+    const touches = nativeEvent.touches
+    const changedTouches = nativeEvent.changedTouches
+    const hasTouches = touches && touches.length > 0
+    const hasChangedTouches = changedTouches && changedTouches.length > 0
+    const points = !hasTouches && hasChangedTouches ? changedTouches[index] : hasTouches ? touches[index] : nativeEvent
+
+    return {
+        x: points.pageX,
+        y: points.pageY,
+    }
+}
+
+/**
+ * 获取触摸点个数
+ */
+export const getPointsNumber = (e) => e.touches && e.touches.length || e.changedTouches && e.changedTouches.length
+
+/**
+ * 判断是否为同一点
+ */
+export const isEqualPoints = (p1, p2) => p1.x === p2.x && p1.y === p2.y
+
+/**
+ * 判断是否为相近的两点
+ */
+export const isNearbyPoints = (p1, p2, DOUBLE_TAP_RADIUS = 25) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return xMove < DOUBLE_TAP_RADIUS & yMove < DOUBLE_TAP_RADIUS
+}
+
+/**
+ * 获取两点之间的距离
+ */
+export const getPointsDistance = (p1, p2) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return Math.sqrt(xMove * xMove + yMove * yMove)
+}
+
+/**
+ * 获取触摸移动方向
+ */
+export const getSwipeDirection = (x1, x2, y1, y2) => {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
+}

components/dist/helpers/isEmpty.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if a value is empty.
+ */
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0
+    } else if (typeof value === 'object') {
+        if (value) {
+            for (const _ in value) {
+                return false
+            }
+        }
+        return true
+    } else {
+        return !value
+    }
+}
+
+export default isEmpty

components/dist/helpers/mergeOptionsToData.js

@@ -0,0 +1,17 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+export default mergeOptionsToData

components/dist/helpers/popupMixin.js

@@ -0,0 +1,314 @@
+import classNames from './classNames'
+import eventsMixin from './eventsMixin'
+
+const DEFAULT_TRIGGER = 'onClick'
+const CELL_NAME = '../cell/index'
+const FIELD_NAME = '../field/index'
+
+const defaultToolbar = {
+    title: '请选择',
+    cancelText: '取消',
+    confirmText: '确定',
+}
+
+const defaultEvents = {
+    onChange() {},
+    onConfirm() {},
+    onCancel() {},
+    onVisibleChange() {},
+    onValueChange() {},
+}
+
+const defaultPlatformProps = {
+    labelPropName: 'label',
+    format(values, props) {
+        return Array.isArray(values.displayValue) ? values.displayValue.join(',') : values.displayValue
+    },
+}
+
+const defaultFieldNames = {
+    label: 'label',
+    value: 'value',
+    children: 'children',
+}
+
+export default function popupMixin(selector = '#wux-picker', platformProps = defaultPlatformProps) {
+    return Behavior({
+        behaviors: [eventsMixin({ defaultEvents })],
+        properties: {
+            toolbar: {
+                type: Object,
+                value: defaultToolbar,
+            },
+            trigger: {
+                type: String,
+                value: DEFAULT_TRIGGER,
+            },
+            defaultVisible: {
+                type: Boolean,
+                value: false,
+            },
+            visible: {
+                type: Boolean,
+                value: false,
+            },
+            controlled: {
+                type: Boolean,
+                value: false,
+            },
+            disabled: {
+                type: Boolean,
+                value: false,
+            },
+        },
+        data: {
+            mounted: false,
+            popupVisible: false,
+            inputValue: [],
+        },
+        methods: {
+            /**
+             * 设置组件显示或隐藏
+             */
+            setVisibleState(popupVisible, callback = () => {}) {
+                if (this.data.popupVisible !== popupVisible) {
+                    const params = {
+                        mounted: true,
+                        inputValue: this.data.value, // forceUpdate
+                        popupVisible,
+                    }
+                    this.setData(popupVisible ? params : { popupVisible }, () => {
+                        // collect field component & forceUpdate
+                        if (popupVisible && this.hasFieldDecorator) {
+                            const field = this.getFieldElem()
+                            if (field) {
+                                field.changeValue(field.data.value)
+                            }
+                        }
+                        callback()
+                    })
+                }
+            },
+            /**
+             * 触发 visibleChange 事件
+             */
+            fireVisibleChange(popupVisible) {
+                if (this.data.popupVisible !== popupVisible) {
+                    if (!this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                    this.setScrollValue(undefined)
+                    this.triggerEvent('visibleChange', { visible: popupVisible })
+                }
+            },
+            /**
+             * 打开
+             */
+            open() {
+                this.fireVisibleChange(true)
+            },
+            /**
+             * 关闭
+             */
+            close(callback) {
+                if (typeof callback === 'function') {
+                    const values = this.getPickerValue(this.scrollValue || this.data.inputValue)
+                    callback.call(this, this.formatPickerValue(values))
+                }
+                this.fireVisibleChange(false)
+            },
+            /**
+             * 组件关闭时重置其内部数据
+             */
+            onClosed() {
+                this.picker = null
+                this.setData({ mounted: false, inputValue: null })
+            },
+            /**
+             * 点击确定按钮时的回调函数
+             */
+            onConfirm() {
+                this.close((values) => {
+                    this.triggerEvent('change', values) // collect field component
+                    this.triggerEvent('confirm', values)
+                })
+            },
+            /**
+             * 点击取消按钮时的回调函数
+             */
+            onCancel() {
+                this.close((values) => this.triggerEvent('cancel', values))
+            },
+            /**
+             * 每列数据选择变化后的回调函数
+             */
+            onValueChange(e) {
+                if (!this.data.mounted) return
+                const { value } = e.detail
+                if (this.data.cascade) {
+                    this.setCasecadeScrollValue(value)
+                } else {
+                    this.setScrollValue(value)
+                }
+
+                this.updated(value, true)
+                this.triggerEvent('valueChange', this.formatPickerValue(e.detail))
+            },
+            /**
+             * 获取当前 picker 的值
+             */
+            getPickerValue(value = this.data.inputValue) {
+                this.picker = this.picker || this.selectComponent(selector)
+                return this.picker && this.picker.getValue(value)
+            },
+            /**
+             * 格式化 picker 返回值
+             */
+            formatPickerValue(values) {
+                return {
+                    ...values,
+                    [platformProps.labelPropName]: platformProps.format(values, this.data),
+                }
+            },
+            /**
+             * 获取 field 父元素
+             */
+            getFieldElem() {
+                return this.field = (this.field || this.getRelationNodes(FIELD_NAME)[0])
+            },
+            /**
+             * 设置子元素 props
+             */
+            setChildProps() {
+                if (this.data.disabled) return
+                const elements = this.getRelationNodes(CELL_NAME)
+                const { trigger = DEFAULT_TRIGGER } = this.data
+                if (elements.length > 0) {
+                    elements.forEach((inputElem) => {
+                        const { inputEvents } = inputElem.data
+                        const oriInputEvents = inputElem.data.oriInputEvents || { ...inputEvents }
+                        inputEvents[trigger] = (...args) => {
+                            if (oriInputEvents && oriInputEvents[trigger]) {
+                                oriInputEvents[trigger](...args)
+                            }
+                            this.onTriggerClick()
+                        }
+                        inputElem.setData({ oriInputEvents, inputEvents })
+                    })
+                }
+            },
+            /**
+             * 触发事件
+             */
+            onTriggerClick() {
+                this.fireVisibleChange(!this.data.popupVisible)
+            },
+            /**
+             * 阻止移动触摸
+             */
+            noop() {},
+            /**
+             * 更新值
+             */
+            updated(inputValue, isForce) {
+                if (!this.hasFieldDecorator || isForce) {
+                    if (this.data.inputValue !== inputValue) {
+                        this.setData({ inputValue })
+                    }
+                }
+            },
+            /**
+             * 记录每列数据的变化值
+             */
+            setScrollValue(value) {
+                this.scrollValue = value
+            },
+            /**
+             * 记录每列数据的变化值 - 针对于级联
+             */
+            setCasecadeScrollValue(value) {
+                if (value && this.scrollValue) {
+                    const length = this.scrollValue.length
+                    if (length === value.length && this.scrollValue[length - 1] === value[length - 1]) {
+                        return
+                    }
+                }
+                this.setScrollValue(value)
+            },
+        },
+        lifetimes: {
+            ready() {
+                const { defaultVisible, visible, controlled, value } = this.data
+                const popupVisible = controlled ? visible : defaultVisible
+
+                // 若 defaultFieldNames 存在，则缓存之，并传递给子组件，只生效一次
+                if ('defaultFieldNames' in this.data) {
+                    this.setData({
+                        fieldNames: Object.assign({}, defaultFieldNames, this.data.defaultFieldNames),
+                    })
+                }
+
+                this.mounted = true
+                this.scrollValue = undefined
+                this.setVisibleState(popupVisible)
+                this.setChildProps()
+            },
+            detached() {
+                this.mounted = false
+            },
+        },
+        definitionFilter(defFields) {
+            // set default child
+            Object.assign(defFields.relations = (defFields.relations || {}), {
+                [CELL_NAME]: {
+                    type: 'child',
+                    observer() {
+                        this.setChildProps()
+                    },
+                },
+                [FIELD_NAME]: {
+                    type: 'ancestor',
+                },
+            })
+
+            // set default classes
+            Object.assign(defFields.computed = (defFields.computed || {}), {
+                classes: ['prefixCls', function(prefixCls) {
+                    const wrap = classNames(prefixCls)
+                    const toolbar = `${prefixCls}__toolbar`
+                    const inner = `${prefixCls}__inner`
+                    const cancel = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--cancel`]: true,
+                    })
+                    const confirm = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--confirm`]: true,
+                    })
+                    const hover = `${prefixCls}__button--hover`
+                    const title = `${prefixCls}__title`
+
+                    return {
+                        wrap,
+                        toolbar,
+                        inner,
+                        cancel,
+                        confirm,
+                        hover,
+                        title,
+                    }
+                }],
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                visible(popupVisible) {
+                    if (this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                },
+                value(value) {
+                    this.updated(value)
+                },
+            })
+        },
+    })
+}

components/dist/helpers/relationsBehavior.js

@@ -0,0 +1,67 @@
+import isEmpty from './isEmpty'
+import debounce from './debounce'
+
+/**
+ * bind func to obj
+ */
+function bindFunc(obj, method, observer) {
+    const oldFn = obj[method]
+    obj[method] = function(target) {
+        if (observer) {
+            observer.call(this, target, {
+                [method]: true,
+            })
+        }
+        if (oldFn) {
+            oldFn.call(this, target)
+        }
+    }
+}
+
+// default methods
+const methods = ['linked', 'linkChanged', 'unlinked']
+
+// extra props
+const extProps = ['observer']
+
+export default Behavior({
+    lifetimes: {
+        created() {
+            this._debounce = null
+        },
+        detached() {
+            if (this._debounce && this._debounce.cancel) {
+                this._debounce.cancel()
+            }
+        },
+    },
+    definitionFilter(defFields) {
+        const { relations } = defFields
+
+        if (!isEmpty(relations)) {
+            for (const key in relations) {
+                const relation = relations[key]
+
+                // bind func
+                methods.forEach((method) => bindFunc(relation, method, relation.observer))
+
+                // delete extProps
+                extProps.forEach((prop) => delete relation[prop])
+            }
+        }
+
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            getRelationsName: function(types = ['parent', 'child', 'ancestor', 'descendant']) {
+                return Object.keys(relations || {}).map((key) => {
+                    if (relations[key] && types.includes(relations[key].type)) {
+                        return key
+                    }
+                    return null
+                }).filter((v) => !!v)
+            },
+            debounce: function(func, wait = 0, immediate = false) {
+                return (this._debounce = this._debounce || debounce(func.bind(this), wait, immediate)).call(this)
+            },
+        })
+    },
+})

components/dist/helpers/safeAreaBehavior.js

@@ -0,0 +1,46 @@
+import { getSystemInfo, checkIPhoneX } from './checkIPhoneX'
+
+const defaultSafeArea = {
+    top: false,
+    bottom: false,
+}
+
+const setSafeArea = (params) => {
+    if (typeof params === 'boolean') {
+        return Object.assign({}, defaultSafeArea, {
+            top: params,
+            bottom: params,
+        })
+    } else if (params !== null && typeof params === 'object') {
+        return Object.assign({}, defaultSafeArea)
+    } else if (typeof params === 'string') {
+        return Object.assign({}, defaultSafeArea, {
+            [params]: true,
+        })
+    }
+    return defaultSafeArea
+}
+
+export default Behavior({
+    properties: {
+        safeArea: {
+            type: [Boolean, String, Object],
+            value: false,
+        },
+    },
+    observers: {
+        safeArea(newVal) {
+            this.setData({ safeAreaConfig: setSafeArea(newVal) })
+        },
+    },
+    definitionFilter(defFields) {
+        const { statusBarHeight } = getSystemInfo() || {}
+        const isIPhoneX = checkIPhoneX()
+
+        Object.assign(defFields.data = (defFields.data || {}), {
+            safeAreaConfig: defaultSafeArea,
+            statusBarHeight,
+            isIPhoneX,
+        })
+    },
+})

components/dist/helpers/safeSetDataBehavior.js

@@ -0,0 +1,57 @@
+export default Behavior({
+    lifetimes: {
+        created() {
+            this.nextCallback = null
+        },
+        detached() {
+            this.cancelNextCallback()
+        },
+    },
+    methods: {
+        /**
+         * safeSetData
+         * @param {Object} nextData 数据对象
+         * @param {Function} callback 回调函数
+         */
+        safeSetData(nextData, callback) {
+            this.pendingData = Object.assign({}, this.data, nextData)
+            callback = this.setNextCallback(callback)
+
+            this.setData(nextData, () => {
+                this.pendingData = null
+                callback()
+            })
+        },
+        /**
+         * 设置下一回调函数
+         * @param {Function} callback 回调函数
+         */
+        setNextCallback(callback) {
+            let active = true
+
+            this.nextCallback = (event) => {
+                if (active) {
+                    active = false
+                    this.nextCallback = null
+
+                    callback.call(this, event)
+                }
+            }
+
+            this.nextCallback.cancel = () => {
+                active = false
+            }
+
+            return this.nextCallback
+        },
+        /**
+         * 取消下一回调函数
+         */
+        cancelNextCallback() {
+            if (this.nextCallback !== null) {
+                this.nextCallback.cancel()
+                this.nextCallback = null
+            }
+        },
+    },
+})

components/dist/helpers/shallowEqual.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @typechecks
+ * 
+ */
+
+/*eslint-disable no-self-compare */
+
+'use strict';
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+        // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        // Added the nonzero y check to make Flow happy, but it is redundant
+        return x !== 0 || y !== 0 || 1 / x === 1 / y;
+    } else {
+        // Step 6.a: NaN == NaN
+        return x !== x && y !== y;
+    }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+    if (is(objA, objB)) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    // Test for A's keys different from B.
+    for (var i = 0; i < keysA.length; i++) {
+        if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export default shallowEqual

components/dist/helpers/styleToCssString.js

@@ -0,0 +1,139 @@
+'use strict';
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+    boxFlex: true,
+    boxFlexGroup: true,
+    columnCount: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+
+    // SVG-related properties
+    fillOpacity: true,
+    strokeDashoffset: true,
+    strokeOpacity: true,
+    strokeWidth: true
+};
+
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+function prefixKey(prefix, key) {
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(function(prop) {
+    prefixes.forEach(function(prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
+});
+
+var msPattern = /^ms-/;
+
+var _uppercasePattern = /([A-Z])/g;
+
+/**
+ * Hyphenates a camelcased string, for example:
+ *
+ *   > hyphenate('backgroundColor')
+ *   < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenate(string) {
+    return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenateStyleName(string) {
+    return hyphenate(string).replace(msPattern, '-ms-');
+}
+
+var isArray = Array.isArray;
+var keys = Object.keys;
+
+var counter = 1;
+// Follows syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/content,
+// including multiple space separated values.
+var unquotedContentValueRegex = /^(normal|none|(\b(url\([^)]*\)|chapter_counter|attr\([^)]*\)|(no-)?(open|close)-quote|inherit)((\b\s*)|$|\s+))+)$/;
+
+function buildRule(key, value) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = '' + value + 'px';
+    } else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = "'" + value.replace(/'/g, "\\'") + "'";
+    }
+
+    return hyphenateStyleName(key) + ': ' + value + ';  ';
+}
+
+function styleToCssString(rules) {
+    var result = ''
+    if (typeof rules === 'string') {
+        rules = rules.trim()
+        return rules.slice(-1) === ";" ? `${rules} ` : `${rules}; `
+    }
+    if (!rules || keys(rules).length === 0) {
+        return result;
+    }
+    var styleKeys = keys(rules);
+    for (var j = 0, l = styleKeys.length; j < l; j++) {
+        var styleKey = styleKeys[j];
+        var value = rules[styleKey];
+
+        if (isArray(value)) {
+            for (var i = 0, len = value.length; i < len; i++) {
+                result += buildRule(styleKey, value[i]);
+            }
+        } else {
+            result += buildRule(styleKey, value);
+        }
+    }
+    return result;
+}
+
+export default styleToCssString

components/dist/index.js

@@ -0,0 +1,67 @@
+/**
+ * Wux Weapp 3.8.7
+ * 一套组件化、可复用、易扩展的微信小程序 UI 组件库
+ * https://github.com/wux-weapp/wux-weapp#readme
+ *
+ * Copyright 2017-2021 skyvow
+ *
+ * Released under the MIT License
+ *
+ * Released on: 2021-4-12
+ */
+
+import $wuxCountDown from './countdown/index'
+import $wuxCountUp from './countup/index'
+
+/**
+ * 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
+ * @param {String} selector 节点选择器
+ * @param {Object} ctx 页面栈或组件的实例，默认为当前页面栈实例
+ */
+export const getCtx = (selector, ctx = getCurrentPages()[getCurrentPages().length - 1]) => {
+    const componentCtx = ctx.selectComponent(selector)
+
+    if (!componentCtx) {
+        throw new Error('无法找到对应的组件，请按文档说明使用组件')
+    }
+
+    return componentCtx
+}
+
+const version = '3.8.7'
+const $wuxActionSheet = (selector = '#wux-actionsheet', ctx) => getCtx(selector, ctx)
+const $wuxBackdrop = (selector = '#wux-backdrop', ctx) => getCtx(selector, ctx)
+const $wuxCalendar = (selector = '#wux-calendar', ctx) => getCtx(selector, ctx)
+const $wuxDialog = (selector = '#wux-dialog', ctx) => getCtx(selector, ctx)
+const $wuxForm = (selector = '#wux-form', ctx) => getCtx(selector, ctx)
+const $wuxGallery = (selector = '#wux-gallery', ctx) => getCtx(selector, ctx)
+const $wuxKeyBoard = (selector = '#wux-keyboard', ctx) => getCtx(selector, ctx)
+const $wuxLoading = (selector = '#wux-loading', ctx) => getCtx(selector, ctx)
+const $wuxNotification = (selector = '#wux-notification', ctx) => getCtx(selector, ctx)
+const $startWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).triggerRefresh()
+const $stopWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).finishPullToRefresh()
+const $stopWuxLoader = (selector = '#wux-refresher', ctx, isEnd) => getCtx(selector, ctx).finishLoadmore(isEnd)
+const $wuxSelect = (selector = '#wux-select', ctx) => getCtx(selector, ctx)
+const $wuxToast = (selector = '#wux-toast', ctx) => getCtx(selector, ctx)
+const $wuxToptips = (selector = '#wux-toptips', ctx) => getCtx(selector, ctx)
+
+export {
+    version,
+	$wuxCountDown,
+	$wuxCountUp,
+	$wuxActionSheet,
+	$wuxBackdrop,
+	$wuxCalendar,
+	$wuxDialog,
+	$wuxForm,
+	$wuxGallery,
+	$wuxKeyBoard,
+	$wuxLoading,
+	$wuxNotification,
+	$startWuxRefresher,
+	$stopWuxRefresher,
+	$stopWuxLoader,
+	$wuxSelect,
+	$wuxToast,
+	$wuxToptips
+}

components/dist/popup/index.js

@@ -0,0 +1,194 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import styleToCssString from '../helpers/styleToCssString'
+import { $wuxBackdrop } from '../index'
+
+baseComponent({
+    useSafeArea: true,
+    externalClasses: ['wux-content-class', 'wux-header-class', 'wux-body-class', 'wux-footer-class', 'wux-close-class'],
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-popup',
+        },
+        newPrefixCls: {
+            type: String,
+            value: '',
+        },
+        animationPrefixCls: {
+            type: String,
+            value: 'wux-animate',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        content: {
+            type: String,
+            value: '',
+        },
+        extra: {
+            type: String,
+            value: '',
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'getTransitionName',
+        },
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        closable: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+        },
+        maskClosable: {
+            type: Boolean,
+            value: true,
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+            observer: 'setPopupVisible',
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        hasHeader: {
+            type: Boolean,
+            value: true,
+        },
+        hasFooter: {
+            type: Boolean,
+            value: true,
+        },
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        transitionName: '',
+        popupVisible: false,
+        extStyle: '',
+    },
+    computed: {
+        classes: ['prefixCls, position, safeAreaConfig, isIPhoneX', function(prefixCls, position, safeAreaConfig, isIPhoneX) {
+            const wrap = classNames(`${prefixCls}-position`, {
+                [`${prefixCls}-position--${position}`]: position,
+                [`${prefixCls}-position--is-iphonex`]: safeAreaConfig.bottom && isIPhoneX,
+            })
+            const content = `${prefixCls}__content`
+            const hd = `${prefixCls}__hd`
+            const title = `${prefixCls}__title`
+            const bd = `${prefixCls}__bd`
+            const ft = `${prefixCls}__ft`
+            const extra = `${prefixCls}__extra`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                content,
+                hd,
+                title,
+                bd,
+                ft,
+                extra,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 点击关闭按钮事件
+         */
+        close() {
+            this.triggerEvent('close')
+        },
+        /**
+         * 点击蒙层事件
+         */
+        onMaskClick() {
+            if (this.data.maskClosable) {
+                this.close()
+            }
+        },
+        /**
+         * 组件关闭后的回调函数
+         */
+        onExited() {
+            this.triggerEvent('closed')
+        },
+        /**
+         * 获取过渡的类名
+         */
+        getTransitionName(value = this.data.position) {
+            const { animationPrefixCls } = this.data
+            let transitionName = ''
+
+            switch (value) {
+                    case 'top':
+                        transitionName = `${animationPrefixCls}--slideInDown`
+                        break
+                    case 'right':
+                        transitionName = `${animationPrefixCls}--slideInRight`
+                        break
+                    case 'bottom':
+                        transitionName = `${animationPrefixCls}--slideInUp`
+                        break
+                    case 'left':
+                        transitionName = `${animationPrefixCls}--slideInLeft`
+                        break
+                    default:
+                        transitionName = `${animationPrefixCls}--fadeIn`
+                        break
+            }
+
+            this.setData({ transitionName })
+        },
+        /**
+         * 设置 popup 组件的显示隐藏
+         */
+        setPopupVisible(popupVisible) {
+            if (this.data.popupVisible !== popupVisible) {
+                this.setData({ popupVisible })
+                this.setBackdropVisible(popupVisible)
+            }
+        },
+        /**
+         * 设置 backdrop 组件的显示隐藏
+         */
+        setBackdropVisible(visible) {
+            if (this.data.mask && this.$wuxBackdrop) {
+                this.$wuxBackdrop[visible ? 'retain' : 'release']()
+            }
+        },
+    },
+    created() {
+        if (this.data.mask) {
+            this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
+        }
+    },
+    attached() {
+        this.setPopupVisible(this.data.visible)
+        this.getTransitionName()
+    },
+})

components/dist/popup/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index",
+        "wux-backdrop": "../backdrop/index"
+    }
+}

components/dist/popup/index.wxml

@@ -0,0 +1,26 @@
+<wux-backdrop id="wux-backdrop" wx:if="{{ mask }}" bind:click="onMaskClick" zIndex="{{ zIndex }}" />
+<view class="wux-class {{ classes.wrap }}" style="{{ extStyle }}">
+    <wux-animation-group wux-class="{{ prefixCls }} {{ newPrefixCls }}" in="{{ popupVisible }}" classNames="{{ transitionName }}" bind:exited="onExited" wrapStyle="{{ { zIndex } }}" mountOnEnter="{{ mountOnEnter }}" unmountOnExit="{{ unmountOnExit }}">
+        <view class="wux-content-class {{ classes.content }}">
+            <view class="wux-header-class {{ classes.hd }}" wx:if="{{ hasHeader }}">
+                <view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view>
+                <block wx:else>
+                    <slot name="header"></slot>
+                </block>
+            </view>
+            <view class="wux-body-class {{ classes.bd }}">
+                <view wx:if="{{ content }}">{{ content }}</view>
+                <slot></slot>
+            </view>
+            <view class="wux-footer-class {{ classes.ft }}" wx:if="{{ hasFooter }}">
+                <view class="{{ classes.extra }}" wx:if="{{ extra }}">{{ extra }}</view>
+                <block wx:else>
+                    <slot name="footer"></slot>
+                </block>
+            </view>
+            <view class="wux-close-class {{ classes.close }}" wx:if="{{ closable }}" bindtap="close">
+                <text class="{{ classes.x }}"></text>
+            </view>
+        </view>
+    </wux-animation-group>
+</view>

components/dist/popup/index.wxss

@@ -0,0 +1,121 @@
+.wux-popup {
+  position: fixed;
+  z-index: 1000;
+  width: 80%;
+  max-width: 600rpx
+}
+
+.wux-popup-widtn {
+  width: 100%;
+  max-width: 100%
+}
+
+.wux-popup-position.wux-popup-position--center .wux-popup {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%)
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__content {
+  border-radius: 8rpx
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__hd {
+  padding: 1.3em 1.6em .5em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__bd {
+  padding: 0 1.6em .8em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__ft::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1PX;
+  border-top: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 0;
+  transform: scaleY(.5)
+}
+.wux-popup-position.wux-popup-position--top .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--right .wux-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--bottom .wux-popup {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--left .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
+  padding-bottom: 68rpx
+}
+.wux-popup__content {
+  position: relative;
+  background-color: #fff;
+  border: 0;
+  background-clip: padding-box;
+  height: 100%;
+  text-align: center;
+  overflow: hidden
+}
+.wux-popup__title {
+  font-weight: 400;
+  font-size: 36rpx;
+  color: rgba(0,0,0,.85)
+}
+.wux-popup__bd {
+  min-height: 80rpx;
+  font-size: 30rpx;
+  line-height: 1.3;
+  word-wrap: break-word;
+  word-break: break-all;
+  color: rgba(0,0,0,.45)
+}
+.wux-popup__ft {
+  position: relative;
+  line-height: 96rpx;
+  font-size: 36rpx;
+  display: -ms-flexbox;
+  display: flex
+}
+.wux-popup__close {
+  border: 0;
+  padding: 6rpx;
+  background-color: transparent;
+  outline: 0;
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  height: 42rpx;
+  width: 42rpx
+}
+.wux-popup__close-x {
+  display: inline-block;
+  width: 30rpx;
+  height: 30rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}

pages/feedback/feedback.js

@@ -0,0 +1,156 @@
+// pages/feedback/feedback.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    maxlength: 500,
+    number: 0,
+    value: "",
+    imgs: [
+      {
+        type: "video",
+        url: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+      },
+      {
+        type: "image",
+        url: "https://img1.baidu.com/it/u=202543353,3627416815&fm=26&fmt=auto"
+      },
+      {
+        type: "image",
+        url: "https://img0.baidu.com/it/u=745609344,230882238&fm=26&fmt=auto"
+      },
+      {
+        type: "image",
+        url: "https://img0.baidu.com/it/u=286636366,3227707112&fm=26&fmt=auto"
+      },
+      {
+        type: "image",
+        url: "https://img1.baidu.com/it/u=2450865760,444795162&fm=26&fmt=auto"
+      },
+      {
+        type: "image",
+        url: "https://img0.baidu.com/it/u=4226275504,4103997964&fm=26&fmt=auto"
+      },
+      {
+        type: "image",
+        url: "https://img0.baidu.com/it/u=2247422843,411257408&fm=26&fmt=auto"
+      },
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  /**
+   * 监听文本域
+  */
+  bindTextAreaInput(e) {
+    this.setData({
+      number: e.detail.cursor,
+      value: e.detail.value
+    })
+  },
+
+  /**
+   * 预览图片和视频
+  */
+  previewMedia(e) {
+    let arr = this.data.imgs
+    let current = e.currentTarget.dataset.index
+    wx.previewMedia({
+      sources: arr,
+      current
+    })
+  },
+
+  /**
+   * 删除列表项
+  */
+  onDeleteItem(e) {
+    let imgs = this.data.imgs;
+    imgs.splice(e.currentTarget.dataset.index, 1);
+    this.setData({ imgs })
+    console.log(imgs)
+  },
+
+  /**
+   * 选择图片
+  */
+  chooseImage() {
+    let that = this;
+    let imgs = this.data.imgs;
+    let count = 9 - this.data.imgs.length
+    wx.chooseImage({
+      count,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success (res) {
+        const tempFilePaths = res.tempFilePaths
+        tempFilePaths.forEach((item) => {
+          imgs.push({
+            type: 'image',
+            url: item
+          })
+        })
+        that.setData({
+          imgs
+        })
+      }
+    })
+  }
+})

pages/feedback/feedback.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "发布记录反馈",
+  "usingComponents": {}
+}

pages/feedback/feedback.wxml

@@ -0,0 +1,42 @@
+<view class="content">
+  <view class="detail border-radius">
+    <view class="top flex-align-center">
+      <image src=""></image>
+      <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">水氧清洁水光提升综合管理</text>
+    </view>
+    <view class="box-textarea">
+      <textarea bindinput="bindTextAreaInput" value="{{value}}" maxlength="{{maxlength}}" placeholder="请输入记录反馈" />
+      <view class="box-text">{{number}}/{{maxlength}}</view>
+    </view>
+    <view class="change-img">
+      <view class="text">
+        <text>添加视频/图片</text>
+        <text style="font-size:28rpx;color:#999;">({{imgs.length}}/9)</text>
+      </view>
+      <view class="img-box">
+        <view class="position-relative" style="position: relative;" wx:for="{{ imgs }}" wx:key="index">
+          <view class="item">
+            <block wx:if="{{ item.type == 'video' }}">
+              <!-- <video src="{{ item.url }}"></video> -->
+              <!-- <text>视频播放</text> -->
+              <view class="flex-center" style="font-size: 28rpx;width: 100%;height: 100%;background-color: #ccc;" data-index="{{index}}" bindtap="previewMedia">这个是视频</view>
+            </block>
+            <block wx:if="{{ item.type == 'image' }}">
+              <image class="img-content" data-index="{{index}}" src="{{ item.url }}" alt="" bindtap="previewMedia"></image>
+            </block>
+          </view>
+          <image src="" class="delete-img" data-index="{{index}}" bindtap="onDeleteItem"></image>
+        </view>
+        
+        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length>0 && imgs.length < 9 &&imgs[0].type != 'video' }}">
+          <image src=""></image>
+          <text style="font-size: 28rpx;">添加视频</text>
+        </view>
+        <view class="item upload flex-column flex-center" wx:if="{{ imgs.length > 0 && imgs.length < 9}}" bindtap="chooseImage">
+          <image src=""></image>
+          <text style="font-size: 28rpx;">添加图片</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/feedback/feedback.wxss

@@ -0,0 +1,104 @@
+.border-radius {
+  background: #FFFFFF;
+  box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
+  border-radius: 24rpx;
+  margin: 20rpx 0;
+}
+
+.content {
+  padding: 10rpx 30rpx;
+}
+
+.detail {
+  padding: 30rpx 28rpx;
+}
+
+.detail .top {
+  padding-bottom: 30rpx;
+  border-bottom: 2rpx solid #F2F2F2;
+}
+
+.detail .top image {
+  width: 112rpx;
+  height: 112rpx;
+  background: #ECECEC;
+  border-radius: 12rpx;
+  margin-right: 20rpx;
+}
+
+.detail .box-textarea {
+  position: relative;
+  padding-bottom: 30rpx;
+  height: 280rpx;
+  box-sizing: border-box;
+}
+
+.detail textarea {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  /* height: 280rpx;
+  box-sizing: border-box; */
+  padding: 30rpx 0 50rpx;
+}
+
+.detail .box-textarea .box-text {
+  position: absolute;
+  right: 0;
+  bottom: 30rpx;
+  font-size: 28rpx;
+  color: #999999;
+}
+
+.detail .change-img {
+  padding-top: 30rpx;
+  border-top: 2rpx solid #F2F2F2;
+}
+
+.change-img .img-box {
+  margin-top: 30rpx;
+  display: grid;
+  grid-gap: 20rpx 20rpx;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.change-img .img-box .item {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+}
+
+.change-img .delete-img {
+  position: absolute;
+  top: -24rpx;
+  right: -16rpx;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background-color: black;
+}
+
+.change-img .img-box .item.upload {
+  border: dashed 2rpx #c6c6c6;
+  background: #F4F4F4;
+}
+
+.change-img .upload image {
+  width: 48rpx;
+  height: 48rpx;
+  background-color: #ccc;
+  margin-bottom: 6rpx;
+}
+
+.change-img .img-box video {
+  width: 100%;
+  height: 100%;
+}
+
+.change-img .img-box .img-content {
+  width: 100%;
+  height: 100%;
+}

pages/orderDetail/orderDetail.js

@@ -5,7 +5,20 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    urls: [
+      "https://img1.baidu.com/it/u=202543353,3627416815&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=745609344,230882238&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=286636366,3227707112&fm=26&fmt=auto",
+      "https://img1.baidu.com/it/u=2450865760,444795162&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=4226275504,4103997964&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=2247422843,411257408&fm=26&fmt=auto",
+      "https://img0.baidu.com/it/u=3098615520,360170704&fm=26&fmt=auto",
+      "https://img1.baidu.com/it/u=510862345,2249984174&fm=26&fmt=auto",
+      "https://img2.baidu.com/it/u=2222750380,2392750381&fm=26&fmt=auto",
+    ],
+    index: 0,
+    visible: false,
+    array: ['美国', '中国', '巴西', '日本'],
   },
 
   /**
@@ -63,7 +76,7 @@ Page({
   onShareAppMessage: function () {
 
   },
-  
+
   /**
    * 复制订单号
    */
@@ -75,4 +88,32 @@ Page({
       }
     })
   },
+
+  /**
+   * 打开弹框
+   */
+  onEditItem() {
+    this.setData({
+      visible: true
+    })
+  },
+
+  /**
+   * 关闭弹框
+  */
+  onPopupState() {
+    this.setData({
+      visible: false
+    })
+  },
+
+  /**
+   * 图片预览
+   */
+  previewImage(e) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.index,
+      urls: this.data.urls
+    })
+  }
 })

pages/orderDetail/orderDetail.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "订单详情",
-  "usingComponents": {}
+  "usingComponents": {
+    "wux-popup": "../../components/dist/popup/index"
+  }
 }

pages/orderDetail/orderDetail.wxml

@@ -61,14 +61,13 @@
       <view class="btn flex-center">新增反馈</view>
     </view>
     <view class="item flex-column" wx:for="{{4}}" wx:key="index">
-      
       <view class="user-info flex-align-center">
         <image></image>
         <view class="info flex-column flex1">
           <text style="font-size: 28rpx;margin-bottom: 6rpx;">查理兹·塞隆…</text>
           <text style="font-size: 20rpx;color: #999;">下午  3:45</text>
         </view>
-        <view class="more flex-align-center flex-justify-space-between">
+        <view class="more flex-align-center flex-justify-space-between" bindtap="onEditItem">
           <text></text>
           <text></text>
           <text></text>
@@ -77,14 +76,17 @@
       </view>
       <text style="font-size: 28rpx;color: #666;">当前皮肤毛孔出现堵塞，抓哟集中在T区，主要问题在于自身油脂分泌过多。</text>
       <view class="box">
-        <image></image>
-        <image></image>
-        <image></image>
-        <image></image>
-        <image></image>
-        <image></image>
+        <image src="{{item}}" data-index="{{item}}" bindtap="previewImage" wx:for="{{urls}}" wx:key="index"></image>
       </view>
     </view>
   </view>
   <view class="no-more-data">已经到底啦~~</view>
-</view>
+</view>
+
+<wux-popup class="popup-radius" position="bottom" catchtouchmove="isShow" visible="{{ visible }}" bind:close="onPopupState">
+  <view class="btn-item flex-center" style="color: #FF77B0;">删除</view>
+  <navigator url="/pages/feedback/feedback" hover-class="none">
+    <view class="btn-item flex-center">编辑</view>
+  </navigator>
+  <view class="btn-item flex-center" style="color: #999999;" bindtap="onPopupState">取消</view>
+</wux-popup>

pages/orderDetail/orderDetail.wxss

@@ -129,8 +129,11 @@
   background-color: red;
 }
 
-/* .list .user-info .more {
+.btn-item {
+  height: 112rpx;
+  border-bottom: 2rpx solid #eee;
+  box-sizing: border-box;
   font-size: 36rpx;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-}  */
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+}

project.private.config.json

@@ -1,4 +1,5 @@
 {
+  "setting": {},
   "condition": {
     "plugin": {
       "list": []
@@ -16,6 +17,12 @@
           "pathName": "pages/orderDetail/orderDetail",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "发布记录反馈",
+          "pathName": "pages/feedback/feedback",
+          "query": "",
+          "scene": null
         }
       ]
     }